/* Minification failed. Returning unminified contents.
(4791,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,22): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,49): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,76): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,121): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,179): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,202): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,238): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,271): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,300): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4791,417): run-time error CSS1039: Token not allowed after unary operator: '-pswp-root-z-index'
(4791,759): run-time error CSS1039: Token not allowed after unary operator: '-pswp-bg'
(4791,1922): run-time error CSS1039: Token not allowed after unary operator: '-pswp-error-text-color'
(4791,2030): run-time error CSS1039: Token not allowed after unary operator: '-pswp-transition-duration'
(4791,2611): run-time error CSS1039: Token not allowed after unary operator: '-pswp-icon-color'
(4791,2640): run-time error CSS1039: Token not allowed after unary operator: '-pswp-icon-color-secondary'
(4791,2804): run-time error CSS1039: Token not allowed after unary operator: '-pswp-icon-stroke-color'
(4791,2847): run-time error CSS1039: Token not allowed after unary operator: '-pswp-icon-stroke-width'
(4791,2972): run-time error CSS1039: Token not allowed after unary operator: '-pswp-placeholder-bg'
(4791,4423): run-time error CSS1039: Token not allowed after unary operator: '-pswp-icon-color'
(4791,4470): run-time error CSS1039: Token not allowed after unary operator: '-pswp-icon-color-secondary'
(10871,34): run-time error CSS1030: Expected identifier, found '.'
(10871,66): run-time error CSS1031: Expected selector, found ')'
(10871,66): run-time error CSS1025: Expected comma or open brace, found ')'
(10875,34): run-time error CSS1030: Expected identifier, found '.'
(10875,66): run-time error CSS1031: Expected selector, found ')'
(10875,66): run-time error CSS1025: Expected comma or open brace, found ')'
(11296,38): run-time error CSS1030: Expected identifier, found '.'
(11296,70): run-time error CSS1031: Expected selector, found ')'
(11296,70): run-time error CSS1025: Expected comma or open brace, found ')'
(11300,38): run-time error CSS1030: Expected identifier, found '.'
(11300,70): run-time error CSS1031: Expected selector, found ')'
(11300,70): run-time error CSS1025: Expected comma or open brace, found ')'
(11578,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11579,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11580,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11581,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11582,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11583,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11584,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11585,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11586,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11587,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11588,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11589,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11590,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11591,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11592,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11593,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11594,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11595,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11596,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11601,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(11613,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(11621,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(11629,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(11633,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(11634,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(11635,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm'
(11664,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(11666,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(11675,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(11680,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(11689,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(11689,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(11710,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(11729,47): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(11731,27): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(11731,47): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(11743,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(11744,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg'
(11745,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-md'
(11748,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(11767,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(11768,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg'
(11769,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-md'
(11840,21): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(11841,34): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(11850,26): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(11873,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(11874,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg'
(11875,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-md'
(11878,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(11884,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(11909,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(11911,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(11917,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(11989,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12042,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(12043,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(12059,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(12060,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm'
(12065,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12086,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(12087,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(12088,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12093,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(12095,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm'
(12100,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12101,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12103,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-md'
(12110,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12131,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12139,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12153,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12153,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(12186,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12186,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(12264,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12273,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(12279,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(12286,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12291,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(12292,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(12293,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(12295,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm'
(12296,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(12300,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-md'
(12313,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12330,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(12338,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12346,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(12396,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12397,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(12405,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger'
(12411,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12427,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12435,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(12442,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(12454,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12460,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(12472,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12478,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12485,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12491,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(12642,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12648,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12661,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12673,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12694,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12720,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12733,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12734,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12735,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12769,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12778,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12812,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12818,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12826,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(12827,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(12840,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(12842,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(12847,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12857,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12858,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(12859,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12860,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(12872,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12898,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(12928,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(12978,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(13004,42): run-time error CSS1030: Expected identifier, found '.'
(13004,60): run-time error CSS1031: Expected selector, found ')'
(13004,60): run-time error CSS1025: Expected comma or open brace, found ')'
(13019,20): run-time error CSS1030: Expected identifier, found '.'
(13019,50): run-time error CSS1031: Expected selector, found ')'
(13019,50): run-time error CSS1025: Expected comma or open brace, found ')'
(13232,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13234,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13271,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13278,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(13303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13311,10): run-time error CSS1030: Expected identifier, found '.'
(13311,34): run-time error CSS1031: Expected selector, found ')'
(13311,34): run-time error CSS1025: Expected comma or open brace, found ')'
(13373,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13381,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13382,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13422,10): run-time error CSS1030: Expected identifier, found '.'
(13422,33): run-time error CSS1031: Expected selector, found ')'
(13422,33): run-time error CSS1025: Expected comma or open brace, found ')'
(13476,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13482,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(13536,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(13541,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(13542,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(13543,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(13550,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13556,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(13603,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(13608,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(13609,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(13610,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(13619,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13621,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(13625,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13625,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(13626,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13636,36): run-time error CSS1030: Expected identifier, found '.'
(13636,49): run-time error CSS1031: Expected selector, found ')'
(13636,49): run-time error CSS1025: Expected comma or open brace, found ')'
(13644,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(13665,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13669,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13683,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(13695,25): run-time error CSS1030: Expected identifier, found ':'
(13695,33): run-time error CSS1031: Expected selector, found ')'
(13695,33): run-time error CSS1025: Expected comma or open brace, found ')'
(13717,25): run-time error CSS1030: Expected identifier, found ':'
(13717,33): run-time error CSS1031: Expected selector, found ')'
(13717,33): run-time error CSS1025: Expected comma or open brace, found ')'
(13758,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13759,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13763,25): run-time error CSS1030: Expected identifier, found ':'
(13763,33): run-time error CSS1031: Expected selector, found ')'
(13763,33): run-time error CSS1025: Expected comma or open brace, found ')'
(13796,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(13798,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(13799,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(13811,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13839,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13841,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13845,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13846,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13865,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(13869,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(13876,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13979,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13992,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(13999,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(14100,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(14110,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14110,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(14125,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14126,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14129,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(14133,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14138,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(14139,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14141,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14141,45): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14149,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(14157,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(14166,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(14167,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14168,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14169,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(14173,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(14178,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(14179,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14180,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(14185,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(14186,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14187,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(14363,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(14364,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14365,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14367,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(14400,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14402,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14428,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(14448,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14462,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(14468,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(14489,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(14498,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(14516,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14517,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(14521,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(14522,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14523,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(14550,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(14588,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14655,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14658,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(14664,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14670,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14673,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(14677,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14729,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14736,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14749,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(14753,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(14759,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14767,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14768,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14797,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(14798,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(14803,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(14806,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14811,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(14818,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14819,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(14841,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(14852,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14920,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(14926,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(14935,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(14951,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(14952,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(14973,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(14979,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(14980,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(14997,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(15000,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(15004,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15032,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(15042,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15044,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15060,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15076,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger'
(15083,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15111,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(15118,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(15124,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(15143,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger'
(15150,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(15156,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(15204,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15209,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15215,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15226,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(15231,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15235,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(15248,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(15256,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(15266,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(15270,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(15273,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15280,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(15286,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15286,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(15288,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(15288,45): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(15300,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15308,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(15314,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger'
(15325,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(15337,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15340,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(15341,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15343,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(15347,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(15348,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15360,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15360,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(15361,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15391,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(15413,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(15415,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(15416,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15420,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15424,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(15425,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(15435,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(15441,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(15443,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15451,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(15452,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15490,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(15499,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(15584,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(15597,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(15875,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(15940,24): run-time error CSS1030: Expected identifier, found '.'
(15940,54): run-time error CSS1031: Expected selector, found ')'
(15940,54): run-time error CSS1025: Expected comma or open brace, found ')'
(15973,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(15977,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(16064,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(16097,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(16101,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(16105,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(16448,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(16449,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16450,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(16458,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(16459,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(16461,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(16462,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16467,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(16468,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg'
(16469,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-md'
(16472,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16486,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16491,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16496,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(16509,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16540,58): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(16547,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(16561,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16561,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(16583,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(16604,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16608,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16616,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(16638,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(16643,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(16651,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16662,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(16666,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16722,58): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(16724,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(16736,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(16743,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16751,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(16756,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(16757,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16758,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(16775,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16791,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16810,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(16816,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16840,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(16842,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(16851,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16860,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(16865,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16908,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16909,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(16918,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(17052,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(17065,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(17070,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(17080,45): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(17080,73): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(17101,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(17101,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(17120,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(17141,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(17142,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17182,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17349,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17413,62): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-light'
(17415,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17445,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17482,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17496,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17527,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17593,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17637,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17648,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17661,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17679,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(17718,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(17725,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(18743,31): run-time error CSS1030: Expected identifier, found '.'
(18743,62): run-time error CSS1031: Expected selector, found ')'
(18743,62): run-time error CSS1025: Expected comma or open brace, found ')'
(18753,27): run-time error CSS1030: Expected identifier, found '.'
(18753,47): run-time error CSS1031: Expected selector, found ')'
(18753,47): run-time error CSS1025: Expected comma or open brace, found ')'
(18968,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(18969,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(18970,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(18976,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm'
(18977,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-transition'
(18981,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-md'
(19030,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(19040,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(19123,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(19137,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(19144,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(19152,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(19162,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(19166,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19178,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-light'
(19182,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19182,65): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(19199,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(19217,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(19218,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(19225,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19233,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(19241,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(19268,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(19395,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19429,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(19468,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(19536,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19539,45): run-time error CSS1030: Expected identifier, found '.'
(19539,65): run-time error CSS1031: Expected selector, found ')'
(19539,65): run-time error CSS1025: Expected comma or open brace, found ')'
(19558,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19560,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19564,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(19568,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19693,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19799,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19823,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(19836,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-dark'
(19838,35): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(19842,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19872,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(19906,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20124,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(20125,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(20126,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-lg'
(20128,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-shadow-sm'
(20135,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-md'
(20183,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(20195,25): run-time error CSS1039: Token not allowed after unary operator: '-ep-radius-sm'
(20270,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-bg-white'
(20271,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text-muted'
(20272,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-border'
(20278,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-text'
(20331,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20335,18): run-time error CSS1039: Token not allowed after unary operator: '-product-view-height'
(20339,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20340,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20341,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20342,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20343,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20345,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20346,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20347,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20348,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20365,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20366,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20367,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20368,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20369,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20370,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20371,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20372,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20373,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20374,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20375,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20376,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20377,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20406,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20407,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20408,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20409,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20414,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20415,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20416,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20417,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20418,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20419,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20420,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20421,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20422,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20423,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20424,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20425,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20429,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20430,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20635,46): run-time error CSS1030: Expected identifier, found '.'
(20635,77): run-time error CSS1031: Expected selector, found ')'
(20635,77): run-time error CSS1025: Expected comma or open brace, found ')'
(20637,42): run-time error CSS1030: Expected identifier, found '.'
(20637,62): run-time error CSS1031: Expected selector, found ')'
(20637,62): run-time error CSS1025: Expected comma or open brace, found ')'
(20796,29): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20801,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20802,31): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20864,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20879,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20886,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20907,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(20922,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21408,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21530,45): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21548,37): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(21549,36): run-time error CSS1039: Token not allowed after unary operator: '-ep-danger'
(21572,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21597,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21638,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21742,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21824,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21825,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21856,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21920,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21953,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21954,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21986,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(21991,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22008,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22130,46): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22161,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22300,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22338,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(22351,33): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22396,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22419,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22507,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22508,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22520,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(22601,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22602,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22603,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(22608,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22609,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22640,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22642,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22649,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22664,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-success'
(22702,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22703,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(22704,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22711,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22753,45): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22776,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22832,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(22893,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23557,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23572,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23579,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary-light'
(23594,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23624,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23626,30): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23636,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23638,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23713,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23726,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23803,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23804,31): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(23874,22): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(24234,24): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(24236,32): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
(24264,17): run-time error CSS1039: Token not allowed after unary operator: '-ep-primary'
 */
@charset "UTF-8";

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.5.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2016 Daniel Eden
 */

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
    transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}

@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes wobble {
  from {
    -webkit-transform: none;
    transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes jello {
  from, 11.1%, to {
    -webkit-transform: none;
    transform: none;
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

.jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
    transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
    opacity: 1;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
    transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
    transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
    transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
    transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
}

@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

.mCustomScrollbar{-ms-touch-action:pinch-zoom;touch-action:pinch-zoom}.mCustomScrollbar.mCS_no_scrollbar,.mCustomScrollbar.mCS_touch_action{-ms-touch-action:auto;touch-action:auto}.mCustomScrollBox{position:relative;overflow:hidden;height:100%;max-width:100%;outline:0;direction:ltr}.mCSB_container{overflow:hidden;width:auto;height:auto}.mCSB_inside>.mCSB_container{margin-right:30px}.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container{margin-right:0;margin-left:30px}.mCS-dir-rtl>.mCSB_inside>.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{margin-left:0}.mCSB_scrollTools{position:absolute;width:16px;height:auto;left:auto;top:0;right:0;bottom:0;opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_outside+.mCSB_scrollTools{right:-26px}.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{right:auto;left:0}.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools{left:-26px}.mCSB_scrollTools .mCSB_draggerContainer{position:absolute;top:0;left:0;bottom:0;right:0;height:auto}.mCSB_scrollTools a+.mCSB_draggerContainer{margin:20px 0}.mCSB_scrollTools .mCSB_draggerRail{width:2px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCSB_scrollTools .mCSB_dragger{cursor:pointer;width:100%;height:30px;z-index:1}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{position:relative;width:4px;height:100%;margin:0 auto;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px;text-align:center}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:12px}.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:8px}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonUp{display:block;position:absolute;height:20px;width:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools .mCSB_buttonDown{bottom:0}.mCSB_horizontal.mCSB_inside>.mCSB_container{margin-right:0;margin-bottom:30px}.mCSB_horizontal.mCSB_outside>.mCSB_container{min-height:100%}.mCSB_horizontal>.mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal{width:auto;height:16px;top:auto;right:0;bottom:0;left:0}.mCustomScrollBox+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:-26px}.mCSB_scrollTools.mCSB_scrollTools_horizontal a+.mCSB_draggerContainer{margin:0 20px}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:2px;margin:7px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{width:30px;height:100%;left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:4px;margin:6px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:12px;margin:2px auto}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:8px;margin:4px 0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{display:block;position:absolute;width:20px;height:100%;overflow:hidden;margin:0 auto;cursor:pointer}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{left:0}.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{right:0}.mCSB_container_wrapper{position:absolute;height:auto;width:auto;overflow:hidden;top:0;left:0;right:0;bottom:0;margin-right:30px;margin-bottom:30px}.mCSB_container_wrapper>.mCSB_container{padding-right:30px;padding-bottom:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:20px}.mCSB_vertical_horizontal>.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:20px}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden+.mCSB_scrollTools.mCSB_scrollTools_vertical{bottom:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{right:0}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:20px}.mCS-dir-rtl>.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden+.mCSB_scrollTools~.mCSB_scrollTools.mCSB_scrollTools_horizontal{left:0}.mCS-dir-rtl>.mCSB_inside>.mCSB_container_wrapper{margin-right:0;margin-left:30px}.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden>.mCSB_container{padding-right:0}.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden>.mCSB_container{padding-bottom:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{margin-right:0;margin-left:0}.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside>.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{margin-bottom:0}.mCSB_scrollTools,.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp,.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:opacity .2s ease-in-out,background-color .2s ease-in-out;transition:opacity .2s ease-in-out,background-color .2s ease-in-out}.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar{-webkit-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-moz-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;-o-transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out;transition:width .2s ease-out .2s,height .2s ease-out .2s,margin-left .2s ease-out .2s,margin-right .2s ease-out .2s,margin-top .2s ease-out .2s,margin-bottom .2s ease-out .2s,opacity .2s ease-in-out,background-color .2s ease-in-out}.mCS-autoHide>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide>.mCustomScrollBox~.mCSB_scrollTools{opacity:0;filter:"alpha(opacity=0)";-ms-filter:"alpha(opacity=0)"}.mCS-autoHide:hover>.mCustomScrollBox>.mCSB_scrollTools,.mCS-autoHide:hover>.mCustomScrollBox~.mCSB_scrollTools,.mCustomScrollBox:hover>.mCSB_scrollTools,.mCustomScrollBox:hover~.mCSB_scrollTools,.mCustomScrollbar>.mCustomScrollBox>.mCSB_scrollTools.mCSB_scrollTools_onDrag,.mCustomScrollbar>.mCustomScrollBox~.mCSB_scrollTools.mCSB_scrollTools_onDrag{opacity:1;filter:"alpha(opacity=100)";-ms-filter:"alpha(opacity=100)"}.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.4);filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75);filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85);filter:"alpha(opacity=85)";-ms-filter:"alpha(opacity=85)"}.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9);filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCSB_scrollTools .mCSB_buttonDown,.mCSB_scrollTools .mCSB_buttonLeft,.mCSB_scrollTools .mCSB_buttonRight,.mCSB_scrollTools .mCSB_buttonUp{background-image:url(/Scripts/jquery.mCustomScrollbar/mCSB_buttons.png);background-repeat:no-repeat;opacity:.4;filter:"alpha(opacity=40)";-ms-filter:"alpha(opacity=40)"}.mCSB_scrollTools .mCSB_buttonUp{background-position:0 0}.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -20px}.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -40px}.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -56px}.mCSB_scrollTools .mCSB_buttonDown:hover,.mCSB_scrollTools .mCSB_buttonLeft:hover,.mCSB_scrollTools .mCSB_buttonRight:hover,.mCSB_scrollTools .mCSB_buttonUp:hover{opacity:.75;filter:"alpha(opacity=75)";-ms-filter:"alpha(opacity=75)"}.mCSB_scrollTools .mCSB_buttonDown:active,.mCSB_scrollTools .mCSB_buttonLeft:active,.mCSB_scrollTools .mCSB_buttonRight:active,.mCSB_scrollTools .mCSB_buttonUp:active{opacity:.9;filter:"alpha(opacity=90)";-ms-filter:"alpha(opacity=90)"}.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:rgba(0,0,0,.85)}.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:rgba(0,0,0,.9)}.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:4px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px auto}.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px 0}.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -20px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -40px}.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -56px}.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px 0}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -20px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -40px}.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail{width:4px;background-color:#fff;background-color:rgba(255,255,255,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;background-color:#fff;background-color:rgba(255,255,255,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:4px;margin:6px 0}.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:6px;margin:5px auto}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px 0}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -20px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -40px}.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -56px}.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px 0}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -20px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -40px}.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -56px}.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.1)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:2px}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%}.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:2px;margin:7px auto}.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px 0}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -20px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -40px}.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -56px}.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,.mCS-rounded.mCSB_scrollTools .mCSB_dragger{height:14px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:14px;margin:0 1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger{width:14px}.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:14px;margin:1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{width:16px;height:16px;margin:-1px 0}.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:4px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{height:16px;width:16px;margin:0 -1px}.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:4px;margin:6px 0}.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp{background-position:0 -72px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown{background-position:0 -92px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft{background-position:0 -112px}.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight{background-position:0 -128px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.15)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-80px -72px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-80px -92px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-80px -112px}.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-80px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail{width:4px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{background-color:transparent;background-position:center}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail{height:4px;margin:6px 0;background-repeat:repeat-x}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp{background-position:-16px -72px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown{background-position:-16px -92px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft{background-position:-20px -112px}.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight{background-position:-20px -128px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=)}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-96px -72px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-96px -92px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-100px -112px}.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-100px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-y;background-image:-moz-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(left,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to right,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{background-repeat:repeat-x;background-image:-moz-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(255,255,255,.5)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-o-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%);background-image:linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 100%)}.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger{height:70px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger{width:70px}.mCS-3d-dark.mCSB_scrollTools,.mCS-3d.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools .mCSB_draggerRail{width:8px;background-color:#000;background-color:rgba(0,0,0,.2);box-shadow:inset 1px 0 1px rgba(0,0,0,.5),inset -1px 0 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:8px}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:8px;margin:4px 0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5),inset 0 -1px 1px rgba(255,255,255,.2)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{width:100%;height:8px;margin:4px auto}.mCS-3d.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1);box-shadow:inset 1px 0 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail{box-shadow:inset 0 1px 1px rgba(0,0,0,.1)}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools{opacity:1;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}.mCS-3d-thick-dark.mCSB_scrollTools,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer,.mCS-3d-thick.mCSB_scrollTools,.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{-webkit-border-radius:7px;-moz-border-radius:7px;border-radius:7px}.mCSB_inside+.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCSB_inside+.mCS-3d-thick.mCSB_scrollTools_vertical{right:1px}.mCS-3d-thick-dark.mCSB_scrollTools_vertical,.mCS-3d-thick.mCSB_scrollTools_vertical{box-shadow:inset 1px 0 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal,.mCS-3d-thick.mCSB_scrollTools_horizontal{bottom:1px;box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.5)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 1px 0 0 rgba(255,255,255,.4);width:12px;margin:2px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4);height:12px;width:auto}.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#555}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer{background-color:#000;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-3d-thick-dark.mCSB_scrollTools{box-shadow:inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal{box-shadow:inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 14px rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 1px 0 0 rgba(255,255,255,.4),inset -1px 0 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#777}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer{background-color:#fff;background-color:rgba(0,0,0,.05);box-shadow:inset 1px 1px 16px rgba(0,0,0,.1)}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{right:0;margin:12px 0}.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools+.mCSB_scrollTools.mCSB_scrollTools_horizontal,.mCustomScrollBox.mCS-minimal-dark+.mCSB_scrollTools.mCSB_scrollTools_horizontal{bottom:0;margin:0 12px}.mCS-dir-rtl>.mCSB_outside+.mCS-minimal-dark.mCSB_scrollTools_vertical,.mCS-dir-rtl>.mCSB_outside+.mCS-minimal.mCSB_scrollTools_vertical{left:0;right:auto}.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger{height:50px}.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger,.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger{width:50px}.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.2);filter:"alpha(opacity=20)";-ms-filter:"alpha(opacity=20)"}.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.5);filter:"alpha(opacity=50)";-ms-filter:"alpha(opacity=50)"}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail{width:6px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px}.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:6px;margin:5px 0}.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{width:12px}.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded+.mCSB_draggerRail,.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{height:12px;margin:2px 0}.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools .mCSB_draggerRail{width:12px;background-color:#000;background-color:rgba(0,0,0,.2)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:6px;margin:3px 5px;position:absolute;height:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{height:6px;margin:5px 3px;position:absolute;width:auto;top:0;bottom:0;left:0;right:0}.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail{width:100%;height:12px;margin:2px 0}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset.mCSB_scrollTools .mCSB_buttonUp{background-position:-32px -72px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset.mCSB_scrollTools .mCSB_buttonDown{background-position:-32px -92px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft{background-position:-40px -112px}.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset.mCSB_scrollTools .mCSB_buttonRight{background-position:-40px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.1)}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp{background-position:-112px -72px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown{background-position:-112px -92px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft{background-position:-120px -112px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight,.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight{background-position:-120px -128px}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail{background-color:transparent;border-width:1px;border-style:solid;border-color:#fff;border-color:rgba(255,255,255,.2);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail{border-color:#000;border-color:rgba(0,0,0,.2)}.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail{background-color:#fff;background-color:rgba(255,255,255,.6)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail{background-color:#000;background-color:rgba(0,0,0,.6)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.75)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.85)}.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#000;background-color:rgba(0,0,0,.9)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.75)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.85)}.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar{background-color:#fff;background-color:rgba(255,255,255,.9)}
/*


   Magic Zoom Plus v5.3.7 
   Copyright 2023 Magic Toolbox
   Buy a license: https://www.magictoolbox.com/magiczoomplus/
   License agreement: https://www.magictoolbox.com/license/


*/

/**
 * Core styles
 */
.MagicZoom,
.mz-figure,
.mz-lens,
.mz-zoom-window,
.mz-loading,
.mz-hint,
.mz-expand .mz-expand-stage,
.mz-expand .mz-expand-stage .mz-image-stage,
.mz-expand .mz-expand-stage .mz-image-stage .mz-caption,
.mz-thumb img,
.mz-expand-thumbnails,
.mz-expand-controls,
.mz-button {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.MagicZoom,
.mz-figure {
    display: inline-block;
    outline: 0 !important;
    font-size: 0 !important;
    line-height: 100% !important;
    direction: ltr !important;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    vertical-align: middle;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.MagicZoom {
    -webkit-transform: translate3d(0,0,0);
    -ms-touch-action: pan-y;
        touch-action: pan-y;
}
figure.mz-figure {
    overflow: hidden;
    margin: 0 !important;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.MagicZoom img,
.mz-figure img {
    border: 0 !important;
    margin: 0 !important;
    outline: 0 !important;
    padding: 0 !important;
}
.MagicZoom > img,
.mz-figure > img {
    width: 100%;
    height: auto;
}
.ie8-magic .MagicZoom > img,
.ie8-magic .mz-figure > img {
    width: 100%;
    max-width: none !important;
}
.mz-figure.mz-no-zoom.mz-no-expand,
.mz-expand .mz-figure.mz-no-zoom {
    cursor: default !important;
}
.mz-figure.mz-active,
.mz-expand {
    -ms-touch-action: none;
        touch-action: none;
}

.mz-lens,
.mz-zoom-window {
    position: absolute !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.mz-lens img,
.mz-zoom-window img {
    position: absolute !important;
    max-width: none !important;
    max-height: none !important;
}
.mz-lens img {
    -webkit-transition: none !important;
            transition: none !important;
}

.mz-zoom-window {
    z-index: 2000000000;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
}
.mz-zoom-window.mz-magnifier {
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    -webkit-mask-clip: content;
    cursor: none;
}
.mz-figure.mz-active .mz-zoom-window.mz-magnifier {
    pointer-events: auto !important;
    cursor: inherit !important;
}
.mz-zoom-window.mz-magnifier.mz-expanded {
    z-index: 2147483647;
}
.mz-zoom-window img  {
    width: auto;
    height: auto;
    left: -1000%;
    right: -1000%;
    top: -1000%;
    bottom: -1000%;
    margin: auto !important;
    -webkit-transition: none !important;
            transition: none !important;
    -webkit-transform-origin: 50% 50% !important;
        -ms-transform-origin: 50% 50% !important;
            transform-origin: 50% 50% !important;
}
.mz-zoom-window.mz-preview img {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    -webkit-transform: none !important;
            transform: none !important;
}
.lt-ie9-magic .mz-zoom-window img  {
    margin: 0 !important;
}

.mz-expand-controls {
    z-index: 2147483647;
}

.mz-fade {
    -webkit-transition: opacity .25s;
            transition: opacity .25s;
}
.mz-hidden {
    opacity: 0;
}
.mz-visible {
    opacity: 1;
}

.mobile-magic .mz-expand .mz-expand-bg {
    -webkit-transform-style: flat !important;
            transform-style: flat !important;
}

.mobile-magic .mz-expand-controls.mz-fade {
    transition: none !important;
}

.mobile-magic .mz-expand > .mz-zoom-window {
    top: 0 !important;
    left: 0 !important;
}


@media not screen and (max-device-width: 767px) {
    .mz-expanded-view-open,
    .mz-expanded-view-open body {
        overflow: hidden !important;
    }
    .mz-expanded-view-open body { height: auto !important; }
}

@media screen and (max-device-width: 767px) {
    :root.mz-expanded-view-open:not(.ios-magic):not([data-magic-ua=safari]),
    :root.mz-expanded-view-open:not(.ios-magic):not([data-magic-ua=safari]) body {
        overflow: hidden !important;
    }
    :root.mz-expanded-view-open:not(.ios-magic):not([data-magic-ua=safari]) body { height: auto !important; }
}


/**
 * Main figure
 */
.mz-figure.mz-active {
    background: #fff;
}
.mz-figure.mz-no-zoom,
.mz-figure.mz-click-zoom,
.mz-figure.mz-active {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}
.mz-figure.mz-active.mz-no-expand {
    cursor: crosshair;
}
.mz-figure.mz-active.mz-click-zoom.mz-no-expand {
    cursor: crosshair;
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;
    cursor: zoom-out;
}
.mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand {
    cursor: none;
}
.mz-figure.mz-magnifier-zoom.mz-active {
    overflow: visible !important;
}

.mz-figure.mz-active > img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/><feComponentTransfer><feFuncA type=\'linear\' slope=\'0.6\'/></feComponentTransfer></filter></svg>#grayscale");
    -webkit-filter: grayscale(80%) opacity(60%);
    filter: grayscale(80%) opacity(60%);
}
.no-cssfilters-magic .mz-figure.mz-active > img {
    opacity: 0.6;
}
.lt-ie10-magic .mz-figure.mz-active > img {
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1,opacity=0.6);
}
.mz-expand .mz-figure.mz-active.mz-inner-zoom,
:not(.mz-expand) .mz-figure.mz-active.mz-inner-zoom > img {
    opacity: 0;
}

.lt-ie10-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom,
.lt-ie10-magic .mz-figure.mz-active.mz-inner-zoom > img {
    filter: alpha(opacity=0);
}
.ie9-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom {
    background: transparent;
}

/**
 * Zoom lens
 */
.mz-lens {
    border: 1px solid #aaa;
    border-color: rgba(170,170,170,0.7);
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    cursor: none;
    z-index: 10;
    opacity: 0;
}
.mz-figure.mz-active .mz-lens {
    opacity: 1;
    -webkit-transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s;
    transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s;
}
.mz-figure.mz-active.mz-magnifier-zoom .mz-lens {
    border-radius: 50%;
    opacity: 0;
    cursor: none;
}

/**
 * Zoom window
 */
.mz-zoom-window {
    background: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
.mz-zoom-window.mz-magnifier {
    border-radius: 100%;
    border: 0;
    background: rgba(255,255,255,.3);
}
.mz-zoom-window.mz-magnifier:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;bottom: 0;
    left: 0; right: 0;
    border-radius: 100%;
    border: 1px solid rgba(170,170,170,0.7);
    box-shadow: inset 0 0 20px 1px rgba(0,0,0,.3);
    background: transparent;
    z-index: 1;
}
.mz-zoom-window.mz-magnifier.mz-square,
.mz-zoom-window.mz-magnifier.mz-square:before {
    border-radius: 0 !important;
}
.lt-ie9-magic .mz-zoom-window {
    border: 1px solid #e5e5e5;
}
.mz-zoom-window.mz-inner {
    border: none;
    box-shadow: none;
}
.mz-zoom-window.mz-inner:not(.mz-expanded) {
    z-index: 80;
}

/* Caption in zoom window */
.mz-zoom-window .mz-caption {
    background: #777;
    color: #fff;
    font-size: 10pt;
    opacity: 0.8;
    position: absolute;
    top: 0;
    z-index: 150;
    padding: 3px;
    width: 100%;
    line-height: normal !important;
    text-align: center !important;
}
.lt-ie9-magic .mz-zoom-window .mz-caption {
    filter: alpha(opacity=80);
}
.mz-zoom-window.caption-bottom .mz-caption {
    top: auto;
    bottom: 0;
}
.mz-zoom-window.mz-expanded > .mz-caption {
    display: none;
}

/* Zoom window animations */
.mz-zoom-window.mz-deactivating,
.mz-zoom-window.mz-activating {
    -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
            transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-deactivating {
    -webkit-transition-duration: .25s, .25s, .25s;
            transition-duration: .25s, .25s, .25s;
}
.mz-zoom-window.mz-p-right,
.mz-zoom-window.mz-p-left,
.mz-zoom-window.mz-p-top,
.mz-zoom-window.mz-p-bottom {
    opacity: 0;
    z-index: -100;
}
.mz-zoom-window.mz-p-right {
    -webkit-transform: translate3d(-20%, 0, 0);
            transform: translate3d(-20%, 0, 0);
}
.mz-zoom-window.mz-p-left {
    -webkit-transform: translate3d(20%, 0, 0);
            transform: translate3d(20%, 0, 0);
}
.mz-zoom-window.mz-p-top {
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
}
.mz-zoom-window.mz-p-bottom {
    -webkit-transform: translate3d(0, -20%, 0);
            transform: translate3d(0, -20%, 0);
}
/* Inner mode animation */
.mz-zoom-window > img {
    -webkit-transform: translate3d(0, 0, 0) scale(1);
            transform: translate3d(0, 0, 0) scale(1);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.mz-zoom-window.mz-p-inner.mz-deactivating > img,
.mz-zoom-window.mz-p-inner.mz-activating > img {
    -webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important;
            transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9) !important;
}
/* Magnifier mode animation */
.mz-zoom-window.mz-p-magnifier {
    -webkit-transform: scale(.1);
            transform: scale(.1);
}
/* Preview mode animation */
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-preview.mz-activating,
.mz-zoom-window.mz-custom.mz-deactivating,
.mz-zoom-window.mz-custom.mz-activating {
    -webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
            transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-custom.mz-deactivating {
    -webkit-transition-duration: .2s;
            transition-duration: .2s;
}
.mz-zoom-window.mz-p-preview,
.mz-zoom-window.mz-p-custom {
    opacity: 0;
}


/**
 * Hint & Loading
 */
.mz-hint,
.mz-loading {
    color: #eee;
    background: rgba(49,51,61,0.7);
    font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-align: center;
    direction: ltr;
    display: inline-block;
    margin: 0;
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: opacity 0.25s ease;
            transition: opacity 0.25s ease;
}

.mz-hint {
    bottom: 8px;
    left: 0;
    right: 0;
    padding: 0 10%;
    background-color: transparent;
    -webkit-transition: opacity 0.4s ease, z-index 0.4s ease;
            transition: opacity 0.4s ease, z-index 0.4s ease;
}
.mz-hint-message {
    display: inline-block;
    background: rgba(49,51,61,0.7);
    border-radius: 2em;
    padding: .7em 1.1em;
}
.mz-hint-message:before {
    content: '\02295';
    font-family: serif;
    font-size: 1.5em;
    speak: none;
    text-align: center;
    vertical-align: -2px;
    margin-right: 6px;
}
.mobile-magic .mz-hint-message:before {
    display: none;
}

.mz-hint-hidden {
    opacity: 0;
    z-index: -1;
    -webkit-transition-delay: .6s;
            transition-delay: .6s;
}
/* Hint in the expanded view on mobile */
.mz-expand .mz-hint {
    font-size: 18px;
    line-height: 1.1em;
    top: 50%;
    bottom: auto;
    margin: 0;
    -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);

}
.mz-expand .mz-hint-message {
    padding: 1.1em;
}
.mz-expand .mz-hint-message:before {
    display: none;
}
.mz-expand .mz-hint-hidden {
    opacity: 0;
    -webkit-transition-delay: 1.5s;
            transition-delay: 1.5s;
}

/* Loading indicator */
.mz-loading {
    font-size: 0;
    border-radius: 100%;
    opacity: 0;
    padding: 0;
    width: 36px;
    height: 36px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
.mz-loading:after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 24px;
    height: 24px;
    margin: auto;
    text-indent: -9999em;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 1);
    border-top-color: transparent;
    box-sizing: border-box;
}
.mz-loading.shown {
    opacity: 1;
    z-index: 1;
    -webkit-transition: opacity 0s;
    transition: opacity 0s;
}
.mz-loading.shown:after {
    -webkit-animation: spin-loading .9s infinite linear;
            animation: spin-loading .9s infinite linear;
}

@-webkit-keyframes spin-loading {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes spin-loading {
    0% {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

.lt-ie10-magic .mz-loading {
    border-radius: 2em;
    font-size: 12px;
    padding: .7em 1.1em;
    width: auto;
    height: auto;
}
.lt-ie10-magic .mz-loading:after {
    content: 'Loading...';
    text-indent: 0;
    border: none;
    position: relative;
}

.lt-ie9-magic .mz-loading {
    filter: alpha(opacity=0);
    right: 0;
    left:  0;
    width: 126px;
    margin: auto;
}
.lt-ie9-magic .mz-hint-message,
.lt-ie9-magic .mz-loading.shown {
    background: transparent !important;
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D', EndColorStr='#7c31333D');
}
.lt-ie9-magic .mz-hint-hidden {
    filter: alpha(opacity=0);
}



/**
 * Expanded view
 */
.mz-expand,
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg,
.mz-expand .mz-expand-stage {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg {
    width: auto !important;
    height: auto !important;

}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > svg  {
    min-width: 100% !important;
    min-height: 100% !important;
}

.mz-expand {
    background-color: rgba(0, 0, 0, 1);
    text-align: center;
    vertical-align: middle;
    display: block;
    overflow: hidden;
    z-index: 2100000000;
    position: fixed;
    width: auto;
    height: auto;
    -webkit-perspective: 600px;
            perspective: 600px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -ms-overflow-style: none;
}

/* Expanded view background */
.mz-expand .mz-expand-bg {
    display: inline-block;
    max-width: none !important;
    max-height: none !important;
    margin: auto;
    vertical-align: middle;
    z-index: -100;
    background-repeat: no-repeat;
    background-size: cover;

    -webkit-perspective: 600px;
            perspective: 600px;

    -webkit-transform: translate3d(0, 0, 0) scale(7) rotate(0.01deg);
            transform: translate3d(0, 0 ,0) scale(7) rotate(0.01deg);
}

.mz-expand .mz-expand-bg > img  {
    margin: auto;
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.mz-expand .mz-expand-bg > img  {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'blur\'><feGaussianBlur stdDeviation=\'80\' in=\'SourceGraphic\'></feGaussianBlur></filter></svg>#blur");
    -webkit-filter: blur(20px) brightness(60%);
            filter: blur(20px) brightness(60%);
}

.mz-expand .mz-expand-bg > svg  {
    margin: auto;
    opacity: .6;
}

[data-magic-ua=edge] .mz-expand .mz-expand-bg,
.lt-ie10-magic .mz-expand .mz-expand-bg {
    display: none !important;
}
.lt-ie9-magic .mz-expand {
    background: #1f1f1f;
}
[data-magic-ua=edge] .mz-expand {
    background-color: rgba(31, 31, 31, .96);
}

/** Plain backgrounds: dark-bg, white-bg **/
.mz-expand.plain-bg .mz-expand-bg,
.mz-expand.dark-bg .mz-expand-bg,
.mz-expand.white-bg .mz-expand-bg {
    display: none !important;
}
.mz-expand.dark-bg {
    background-color: #1f1f1f;
    background-color: rgba(31, 31, 31, .96);
}
.mz-expand.white-bg {
    background-color: #fff;
}

/* Expanded view stage */
.mz-expand .mz-expand-stage {
    display: flex;
    flex-direction: column;
    padding: 0;
    z-index: 2100000000;
}

.mz-expand .mz-expand-stage .mz-image-stage {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    position: relative;
    margin: 0;
    padding: 20px 0;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

.mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
    padding: 0 !important;
    left: 0;
    right: 0;
}


.mz-expand .mz-image-stage > figure {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    overflow: hidden;
}

.mz-expand .mz-figure {
    max-width: 100% !important;
    overflow: visible;
}
.mz-expand .mz-figure > img {
    max-width: 100%;
    width: auto;
    height: auto;
}
.mz-expand .mz-zoom-in .mz-image-stage > figure,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-activating,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active {
    flex: 1 0;
    width: 100%;
    height: 100%;
}
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active > img {
    pointer-events: none;
}
.mz-expand .mz-figure {
    cursor: pointer;
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}
.mz-expand .mz-figure.mz-active {
    cursor: crosshair;
    cursor: -webkit-zoom-out;
    cursor: -moz-zoom-out;
    cursor: zoom-out;
}
/* When inner zoom is always shown */
.mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage > figure > figure > img {
    z-index: 1;
    position: absolute !important;
    top: -5000px !important;
    bottom: -5000px !important;
    left: -5000px !important;
    right: -5000px !important;
    margin: auto !important;
}

.lt-ie10-magic .mz-zoom-window.mz-expanded img  { filter: alpha(opacity=100); }
.lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom {
    overflow: hidden;
    filter: alpha(opacity=100);
}

/* Caption in expanded view */
.mz-expand .mz-caption {
    flex: 0 0;
    color: #fff;
    text-shadow: 0px 0px 46px #000;
    padding: 10px 30px;
    font: normal 10pt/1.25 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
    text-align: center;
    width: 100%;
    opacity: 0;
}

.mz-expand .mz-caption.mz-show {
    -webkit-transition: opacity 0.15s ease-out;
    transition: opacity 0.15s ease-out;
    opacity: 1;
}

.mz-expand .mz-zoom-in .mz-image-stage .mz-caption {
    display: none;
}

.mz-expand .mz-caption a {
    color: inherit;
    cursor: pointer;
}

.mz-expand.white-bg .mz-caption {
    color: #555;
    text-shadow: none;
}

.lt-ie9-magic .mz-expand .mz-caption {
    top: 100%;
}

.mz-expand .mz-zoom-window {
    box-shadow: none;
    background: transparent;
}

.lt-ie9-magic .mz-expand .mz-zoom-window {
    border: 0;
}

/* Expanded view on mobile */
@media screen and (max-device-width: 767px) {
    .mobile-magic .mz-expand .mz-image-stage .mz-caption {
        display: none !important;
    }
}

/**
 * Buttons & Arrows
 */
.mz-nav-controls,
.mz-expand-controls,
button.mz-button {
    margin: 0 !important;
    padding: 0 !important;
    outline: 0 !important;
}

.mz-nav-controls {
    z-index: 2100000000;
}

button.mz-button {
    color: rgba(180, 180, 180, .6) !important;
    font-size: 0;
    cursor: pointer;
    z-index: 2100000000 !important;
    background-color: transparent !important;
    border: 0 solid transparent !important;
    border-radius: 100% !important;
    box-shadow: none !important;
    position: absolute !important;
    text-transform: none !important;
    text-align: center;
    speak: none;
    width: 60px !important;
    height: 60px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    -webkit-transition: color .25s, background-color .25s !important;
            transition: color .25s, background-color .25s !important;
}

button.mz-button:before {
    display: block;
    position: static;
    height: 100%;
    transform: scale(.9);
    -webkit-transition: -webkit-transform .25s !important;
            transition: transform .25s !important;
}

:root:not(.mobile-magic) button.mz-button:hover,
button.mz-button:active {
    color: rgba(180, 180, 180, 1) !important;
}

button.mz-button:active:before {
    -webkit-transform: scale(.7) !important;
            transform: scale(.7) !important;
}

.mobile-magic .mz-expand button.mz-button:active {
    background-color: rgba(49, 51, 61, .7) !important;
}


button.mz-button.mz-button-prev,
button.mz-button.mz-button-next {
    margin: auto 10px !important;
    top: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
}

button.mz-button.mz-button-prev {
    left: 0 !important;
    transform: rotateZ(180deg) !important;
}

button.mz-button.mz-button-next {
    right: 0 !important;
}

button.mz-button.mz-button-close {
    margin: 10px !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 95 !important;
}

button.mz-button.mz-button-close:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
}

button.mz-button.mz-button-prev:before,
button.mz-button.mz-button-next:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
}

@supports(
        ((-webkit-mask-image:url()) or (mask-image:url())) and
        ((-webkit-mask-repeat:no-repeat) or (mask-repeat:no-repeat)) and
        ((-webkit-mask-position:center) or (mask-position:center)) and
        ((-webkit-mask-size:cover) or (mask-size:cover))
) {
    button.mz-button:before {
        content: "" !important;
        background-color: currentColor;
        background-image: none;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: cover;
                mask-size: cover;
    }

    button.mz-button.mz-button-close:before {
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
                mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0yNS4zODQxIDI0LjcyNDFDMjQuOTkzNyAyNC4zMzM0IDI0Ljk5MzkgMjMuNzAwMiAyNS4zODQ3IDIzLjMwOThMMzcgMTEuNzA1MUwzNi4yOTQzIDExTDI0LjY3OTMgMjIuNjA0NEMyNC4yODg2IDIyLjk5NDcgMjMuNjU1NiAyMi45OTQ0IDIzLjI2NTIgMjIuNjAzOEwxMS43MDUyIDExLjAzNjZMMTEgMTEuNzQyMkwyMi41NTkzIDIzLjMwODdDMjIuOTQ5NyAyMy42OTk0IDIyLjk0OTUgMjQuMzMyNiAyMi41NTg4IDI0LjcyM0wxMS4wMzcgMzYuMjM0MkwxMS43NDI3IDM2LjkzOTNMMjMuMjY0MSAyNS40Mjg0QzIzLjY1NDggMjUuMDM4MSAyNC4yODc5IDI1LjAzODMgMjQuNjc4MiAyNS40Mjg5TDM2LjI0MjEgMzdMMzYuOTQ3MiAzNi4yOTQ0TDI1LjM4NDEgMjQuNzI0MVoiIGZpbGw9IiM5OTk5OTkiLz4KPHBhdGggZD0iTTI1LjM4NDEgMjQuNzI0MUMyNC45OTM3IDI0LjMzMzQgMjQuOTkzOSAyMy43MDAyIDI1LjM4NDcgMjMuMzA5OEwzNyAxMS43MDUxTDM2LjI5NDMgMTFMMjQuNjc5MyAyMi42MDQ0QzI0LjI4ODYgMjIuOTk0NyAyMy42NTU2IDIyLjk5NDQgMjMuMjY1MiAyMi42MDM4TDExLjcwNTIgMTEuMDM2NkwxMSAxMS43NDIyTDIyLjU1OTMgMjMuMzA4N0MyMi45NDk3IDIzLjY5OTQgMjIuOTQ5NSAyNC4zMzI2IDIyLjU1ODggMjQuNzIzTDExLjAzNyAzNi4yMzQyTDExLjc0MjcgMzYuOTM5M0wyMy4yNjQxIDI1LjQyODRDMjMuNjU0OCAyNS4wMzgxIDI0LjI4NzkgMjUuMDM4MyAyNC42NzgyIDI1LjQyODlMMzYuMjQyMSAzN0wzNi45NDcyIDM2LjI5NDRMMjUuMzg0MSAyNC43MjQxWiIgc3Ryb2tlPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
    }

    button.mz-button.mz-button-prev:before,
    button.mz-button.mz-button-next:before {
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
                mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");

    }
}

@media screen and (max-device-width: 767px) {
    button.mz-button-prev,
    button.mz-button-next {
        display: none !important;
    }

    .mobile-magic .mz-expand button.mz-button.mz-button-close {
        width: 50px !important;
        height: 50px !important;
        color: rgb(180, 180, 180) !important;
    }

    .mobile-magic .mz-expand button.mz-button:before {
        transform: scale(.8);
    }
}

.lt-ie9-magic button.mz-button {
    border: 0;
    filter: alpha(opacity=75);
}

.lt-ie9-magic button.mz-button:hover {
    filter: alpha(opacity=100);
}

/* Arrows on the main image on the page */
.mz-figure .mz-nav-controls button.mz-button {
    display: none;
    width: 32px !important;
    height: 56px !important;
    margin: auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.mz-figure.mz-show-arrows .mz-nav-controls button.mz-button {
    display: block;
}



/**
 * Thumbnails
 */

/** Thumbnails on the page **/
a[data-zoom-id],
.mz-thumb, .mz-thumb:focus {
    display: inline-block;
    line-height: 0;
    outline: none;
}

a[data-zoom-id] img,
.mz-thumb img {
    padding-bottom: 4px;
    border: 0;
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
}

.mz-thumb:not(.mz-thumb-selected):hover img {
    border-bottom-color: rgba(180, 180, 180, .3);
}

.mz-thumb.mz-thumb-selected img {
    border-bottom-color: rgb(180, 180, 180);
}

/** Thumbnails in expanded view **/
.mz-expand-thumbnails {
    flex: 0 0 80px;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 10px 0;
    z-index: 50;
    overflow: hidden;
}

.ios-magic[data-magic-engine=webkit][data-magic-engine-ver="603.1"] .mz-expand-thumbnails,
:root[data-magic-ua=firefox] .mz-expand-thumbnails {
    height: 80px;
}

.mz-expand-thumbnails .magic-thumb > img {
    cursor: pointer;
    padding-bottom: 4px;
    border: 0;
    border-bottom: 2px solid transparent;
}

.mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected):hover img {
    border-bottom-color: rgba(180, 180, 180, .3);
}

.mz-expand-thumbnails .magic-thumb.magic-thumb-selected img {
    border-bottom-color: rgb(180, 180, 180);
}

.mz-expand-thumbnails .magic-thumbs .magic-thumbs-button {
    box-shadow: none;
}

/** Thumbnails on the left in expanded view with .expand-thumbnails-left class **/
@media not screen and (max-device-width: 767px) and (orientation: portrait) {
    .mz-expand.expand-thumbnails-left .mz-expand-stage {
        flex-direction: row-reverse;
    }

    .mz-expand.expand-thumbnails-left .mz-expand-thumbnails {
        padding: 0 10px;
        height: 100%;
        overflow: hidden;
    }

    .ios-magic[data-magic-engine=webkit][data-magic-engine-ver="603.1"] .mz-expand.expand-thumbnails-left .mz-expand-thumbnails,
    :root[data-magic-ua=firefox] .mz-expand.expand-thumbnails-left .mz-expand-thumbnails {
        width: 80px;
        height: 100%;
    }

    @media not screen and (max-device-width: 767px) {
        .mz-expand-thumbnails .magic-thumbs.magic-thumbs-vertical {
            height: calc(100% - 40px);
            margin-top: 20px;
            margin-bottom: 20px;
        }
    }

    @media screen and (max-device-width: 767px) {
        .mz-expand-thumbnails .magic-thumbs.magic-thumbs-vertical.no-buttons {
            height: calc(100% - 40px);
            margin-top: 20px;
            margin-bottom: 20px;
        }
    }
}

/** Hide thumbnails in expanded view with .no-expand-thumbnails class **/
.mz-expand.no-expand-thumbnails .mz-expand-thumbnails {
    display: none;
}


/** Thumbnails shaded style (improved previous one)  **/
.thumbnails-style-shaded.mz-thumb img {
    border: 0 !important;
    padding-bottom: 0;
    box-shadow: 0 0 1px 0px rgba(0, 0, 0, .3);
}

.thumbnails-style-shaded.mz-thumb:hover:not(.mz-thumb-selected) img {
    -webkit-filter: brightness(.7);
            filter: brightness(.7);

}
.thumbnails-style-shaded.mz-thumb-selected img {
    -webkit-filter: brightness(.7) opacity(.7);
            filter: brightness(.7) opacity(.7);
}

.thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb > img {
    border: 0 ;
    padding-bottom: 0;
    box-shadow:0 0 5px 1px rgba(0, 0, 0, .3);
}

.thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected) > img:hover {
    -webkit-filter: brightness(.75);
            filter: brightness(.75);
}

.thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb-selected img {
    -webkit-filter: brightness(.7) opacity(.7);
            filter: brightness(.7) opacity(.7);
}

.no-cssfilters-magic .thumbnails-style-shaded.mz-thumb:hover,
.no-cssfilters-magic .thumbnails-style-shaded.mz-thumb.mz-thumb-selected,
.no-cssfilters-magic .thumbnails-style-shaded .magic-thumb:hover,
.no-cssfilters-magic .thumbnails-style-shaded .magic-thumb.magic-thumb-selected {
    background: #000;
}

.no-cssfilters-magic .thumbnails-style-shaded.mz-thumb:hover:not(.mz-thumb-selected) img {
    opacity: .75;
    filter: alpha(opacity=75);
}

.no-cssfilters-magic .thumbnails-style-shaded.mz-thumb-selected img {
    opacity: .7;
    filter: alpha(opacity=70);
}

.no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb {
    position: relative;
}

.no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    z-index: 100;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
}

.no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb:hover:not(.magic-thumb-selected):after {
    background-color: rgba(0, 0, 0, 0.2);
}

.no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb.magic-thumb-selected:after {
    background-color: rgba(0, 0, 0, 0.3);
}

.no-cssfilters-magic .thumbnails-style-shaded .mz-expand-thumbnails .magic-thumb img {
    position: relative;
    z-index: 1;
}

.ie9-magic .thumbnails-style-shaded.mz-thumb img {
    box-shadow: 0 0 4px 0px rgba(0, 0, 0, .3);
}

.magic-thumbs,
.magic-thumbs .magic-thumbs-wrapper,
.magic-thumbs ul,
.magic-thumbs li,
.magic-thumbs li:before,
.magic-thumbs li:after,
.magic-thumbs li img,
.magic-thumbs .magic-thumbs-button {
    margin: 0;
    padding: 0;
    outline: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.magic-thumbs {
    direction: ltr;
    overflow: visible;
    z-index: 100;
    position: relative;
    left: 0;
    top: 0;
    padding: 0 40px;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -ms-touch-action: none;
        touch-action: none;
}

.magic-thumbs {
    width: 100%;
    height: 100%;
    white-space: nowrap;
}

.magic-thumbs.no-buttons {
    padding: 0 !important;
}

.magic-thumbs-wrapper {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.magic-thumbs ul {
    list-style: none;
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    position: relative;
    white-space: nowrap;
}
.magic-thumbs.no-buttons ul {
    left: 0 !important;
    padding: 0 !important;
    -webkit-transition: none !important;
            transition: none !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
}


.magic-thumbs ul li {
    margin: 0 4px;
    height: 100%;
    width: auto;
    vertical-align: top;
    line-height: 0;
    display: inline-block;
}
.magic-thumbs ul li:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}

.magic-thumbs ul li > img {
    width: auto;
    height: auto;
    max-width: none !important;
    max-height: 100% !important;
    vertical-align: middle;
}
.ie8-magic .magic-thumbs ul li > img {
    max-width: none !important;
    max-height: none !important;
}

/* vertical */
.magic-thumbs.magic-thumbs-vertical {
    height: 100%;
}
.magic-thumbs-vertical {
    padding: 40px 0;
}
.magic-thumbs-vertical ul {
    height: auto;
    width: 100%;
    white-space: normal;
}
.magic-thumbs-vertical ul li {
    width: 100%;
    height: auto;
}
.magic-thumbs-vertical ul li {
    margin: 4px 0;
}

.magic-thumbs-vertical ul li > img {
    max-width: 100% !important;
    max-height: none !important;
}
.ie8-magic .magic-thumbs-vertical ul li > img {
    width: 100%;
}

/**
 * Buttons
 */
.magic-thumbs button.magic-thumbs-button {
    color: rgba(180, 180, 180, .6) !important;
    font-size: 0;
    cursor: pointer;
    z-index: 90 !important;
    background-repeat: no-repeat;
    background-color: transparent !important;
    background-image: none;
    border: 0;
    border-radius: 100%;
    box-shadow: none !important;
    overflow: hidden;
    position: absolute;
    text-transform: none !important;
    speak: none;
    text-align: center;
    width: 33px;
    height: 33px;
    top: 0;
    bottom: 0;
    margin: auto 3px;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    -webkit-transition: color .25s, background-color .25s !important;
            transition: color .25s, background-color .25s !important;
}

.magic-thumbs button.magic-thumbs-button:before {
    display: block;
    position: static;
    height: 100%;
    transform: scale(1);
    -webkit-transition: -webkit-transform .25s !important;
            transition: transform .25s !important;
}

.mobile-magic .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled),
:root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):hover,
.magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):active {
    color: rgba(180, 180, 180, 1) !important;
}

.magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):active:before {
    -webkit-transform: scale(.7) !important;
            transform: scale(.7) !important;
}

.mobile-magic .mz-expand .magic-thumbs button.magic-thumbs-button:not(.magic-thumbs-button-disabled):active {
    background-color: rgba(49, 51, 61, .7) !important;
}

.magic-thumbs .magic-thumbs-button-prev {
    left: 0;
    transform: rotateZ(180deg) !important;
}

.magic-thumbs .magic-thumbs-button-next {
    right: 0;
}

.magic-thumbs-vertical button.magic-thumbs-button {
    top: auto;
    right: 0;
    bottom: auto;
    left: 0;
    margin: 3px auto;
}

.magic-thumbs-vertical button.magic-thumbs-button-prev {
    top: 0;
    transform: rotateZ(-90deg) !important;
}

.magic-thumbs-vertical button.magic-thumbs-button-next {
    bottom: 0;
    transform: rotateZ(90deg) !important;
}

.magic-thumbs .magic-thumbs-button-prev:before,
.magic-thumbs .magic-thumbs-button-next:before {
    content: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
}

@supports(
        ((-webkit-mask-image:url()) or (mask-image:url())) and
        ((-webkit-mask-repeat:no-repeat) or (mask-repeat:no-repeat)) and
        ((-webkit-mask-position:center) or (mask-position:center)) and
        ((-webkit-mask-size:cover) or (mask-size:cover))
) {
    .magic-thumbs button.magic-thumbs-button:before {
        content: "" !important;
        background-color: currentColor;
        background-image: none;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: center;
                mask-position: center;
        -webkit-mask-size: cover;
                mask-size: cover;
    }

    .magic-thumbs .magic-thumbs-button-prev:before,
    .magic-thumbs .magic-thumbs-button-next:before {
        -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");
                mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDggNDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xOC43NTkzIDkuMzQ5MjFDMTguMzk5OCA4LjkyOTg4IDE3Ljc2ODUgOC44ODEzMiAxNy4zNDkyIDkuMjQwNzRDMTYuOTI5OSA5LjYwMDE3IDE2Ljg4MTMgMTAuMjMxNSAxNy4yNDA3IDEwLjY1MDhMMTguNzU5MyA5LjM0OTIxWk0zMCAyNEwzMC43NTkzIDI0LjY1MDhDMzEuMDgwMiAyNC4yNzYzIDMxLjA4MDIgMjMuNzIzNyAzMC43NTkzIDIzLjM0OTJMMzAgMjRaTTE3LjI0MDcgMzcuMzQ5MkMxNi44ODEzIDM3Ljc2ODUgMTYuOTI5OSAzOC4zOTk4IDE3LjM0OTIgMzguNzU5M0MxNy43Njg1IDM5LjExODcgMTguMzk5OCAzOS4wNzAxIDE4Ljc1OTMgMzguNjUwOEwxNy4yNDA3IDM3LjM0OTJaTTE3LjI0MDcgMTAuNjUwOEwyOS4yNDA3IDI0LjY1MDhMMzAuNzU5MyAyMy4zNDkyTDE4Ljc1OTMgOS4zNDkyMUwxNy4yNDA3IDEwLjY1MDhaTTI5LjI0MDcgMjMuMzQ5MkwxNy4yNDA3IDM3LjM0OTJMMTguNzU5MyAzOC42NTA4TDMwLjc1OTMgMjQuNjUwOEwyOS4yNDA3IDIzLjM0OTJaIiBmaWxsPSIjOTk5OTk5Ii8+Cjwvc3ZnPgo=");

    }
}

.magic-thumbs.no-buttons .magic-thumbs-button {
    display: none !important;
}
.magic-thumbs-button-disabled {
    opacity: 0.2;
    filter: alpha(opacity = 20);
}

/**
 * Minified by jsDelivr using clean-css v5.3.3.
 * Original file: /npm/photoswipe@5.4.4/dist/photoswipe.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */
.pswp{--pswp-bg:#000;--pswp-placeholder-bg:#222;--pswp-root-z-index:100000;--pswp-preloader-color:rgba(79, 79, 79, 0.4);--pswp-preloader-color-secondary:rgba(255, 255, 255, 0.9);--pswp-icon-color:#fff;--pswp-icon-color-secondary:#4f4f4f;--pswp-icon-stroke-color:#4f4f4f;--pswp-icon-stroke-width:2px;--pswp-error-text-color:var(--pswp-icon-color)}.pswp{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--pswp-root-z-index);display:none;touch-action:none;outline:0;opacity:.003;contain:layout style size;-webkit-tap-highlight-color:transparent}.pswp:focus{outline:0}.pswp *{box-sizing:border-box}.pswp img{max-width:none}.pswp--open{display:block}.pswp,.pswp__bg{transform:translateZ(0);will-change:opacity}.pswp__bg{opacity:.005;background:var(--pswp-bg)}.pswp,.pswp__scroll-wrap{overflow:hidden}.pswp__bg,.pswp__container,.pswp__content,.pswp__img,.pswp__item,.pswp__scroll-wrap,.pswp__zoom-wrap{position:absolute;top:0;left:0;width:100%;height:100%}.pswp__img,.pswp__zoom-wrap{width:auto;height:auto}.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.pswp--click-to-zoom.pswp--zoomed-in .pswp__img:active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img,.pswp--no-mouse-drag.pswp--zoomed-in .pswp__img:active,.pswp__img{cursor:-webkit-zoom-out;cursor:-moz-zoom-out;cursor:zoom-out}.pswp__button,.pswp__container,.pswp__counter,.pswp__img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pswp__item{z-index:1;overflow:hidden}.pswp__hidden{display:none!important}.pswp__content{pointer-events:none}.pswp__content>*{pointer-events:auto}.pswp__error-msg-container{display:grid}.pswp__error-msg{margin:auto;font-size:1em;line-height:1;color:var(--pswp-error-text-color)}.pswp .pswp__hide-on-close{opacity:.005;will-change:opacity;transition:opacity var(--pswp-transition-duration) cubic-bezier(.4, 0, .22, 1);z-index:10;pointer-events:none}.pswp--ui-visible .pswp__hide-on-close{opacity:1;pointer-events:auto}.pswp__button{position:relative;display:block;width:50px;height:60px;padding:0;margin:0;overflow:hidden;cursor:pointer;background:0 0;border:0;box-shadow:none;opacity:.85;-webkit-appearance:none;-webkit-touch-callout:none}.pswp__button:active,.pswp__button:focus,.pswp__button:hover{transition:none;padding:0;background:0 0;border:0;box-shadow:none;opacity:1}.pswp__button:disabled{opacity:.3;cursor:auto}.pswp__icn{fill:var(--pswp-icon-color);color:var(--pswp-icon-color-secondary)}.pswp__icn{position:absolute;top:14px;left:9px;width:32px;height:32px;overflow:hidden;pointer-events:none}.pswp__icn-shadow{stroke:var(--pswp-icon-stroke-color);stroke-width:var(--pswp-icon-stroke-width);fill:none}.pswp__icn:focus{outline:0}.pswp__img--with-bg,div.pswp__img--placeholder{background:var(--pswp-placeholder-bg)}.pswp__top-bar{position:absolute;left:0;top:0;width:100%;height:60px;display:flex;flex-direction:row;justify-content:flex-end;z-index:10;pointer-events:none!important}.pswp__top-bar>*{pointer-events:auto;will-change:opacity}.pswp__button--close{margin-right:6px}.pswp__button--arrow{position:absolute;top:0;width:75px;height:100px;top:50%;margin-top:-50px}.pswp__button--arrow:disabled{display:none;cursor:default}.pswp__button--arrow .pswp__icn{top:50%;margin-top:-30px;width:60px;height:60px;background:0 0;border-radius:0}.pswp--one-slide .pswp__button--arrow{display:none}.pswp--touch .pswp__button--arrow{visibility:hidden}.pswp--has_mouse .pswp__button--arrow{visibility:visible}.pswp__button--arrow--prev{right:auto;left:0}.pswp__button--arrow--next{right:0}.pswp__button--arrow--next .pswp__icn{left:auto;right:14px;transform:scale(-1,1)}.pswp__button--zoom{display:none}.pswp--zoom-allowed .pswp__button--zoom{display:block}.pswp--zoomed-in .pswp__zoom-icn-bar-v{display:none}.pswp__preloader{position:relative;overflow:hidden;width:50px;height:60px;margin-right:auto}.pswp__preloader .pswp__icn{opacity:0;transition:opacity .2s linear;animation:pswp-clockwise .6s linear infinite}.pswp__preloader--active .pswp__icn{opacity:.85}@keyframes pswp-clockwise{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.pswp__counter{height:30px;margin-top:15px;margin-inline-start:20px;font-size:14px;line-height:30px;color:var(--pswp-icon-color);text-shadow:1px 1px 3px var(--pswp-icon-color-secondary);opacity:.85}.pswp--one-slide .pswp__counter{display:none}
/*# sourceMappingURL=/sm/f6180d643527cd9318419fe576fd2e0af795ff830c65432b9c78d436946239f9.map */
/* ============================================
   CATEGORY PAGE - PREMIUM E-COMMERCE DESIGN
   Advanced Level - Bootstrap Compatible
   ============================================ */


/* --- Keyframe Animations --- */
@keyframes ep-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ep-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ep-slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ep-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ep-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes ep-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 106, 0, 0.3);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 106, 0, 0);
    }
}

@keyframes ep-pulse-red {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
    }
    50% {
        box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3), 0 0 0 5px rgba(220, 38, 38, 0.08);
    }
}

@keyframes ep-shimmer-sweep {
    0% { left: -100%; }
    50% { left: 200%; }
    100% { left: 200%; }
}

@keyframes ep-badge-glow {
    0%, 100% {
        box-shadow: 0 1px 3px rgba(217, 119, 6, 0.1);
    }
    50% {
        box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25);
    }
}

@keyframes ep-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 106, 0, 0.2), 0 0 20px rgba(255, 106, 0, 0.05);
    }
    50% {
        box-shadow: 0 0 10px rgba(255, 106, 0, 0.3), 0 0 40px rgba(255, 106, 0, 0.1);
    }
}

@keyframes ep-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes ep-borderGlow {
    0%, 100% {
        border-color: rgba(255, 106, 0, 0.1);
    }
    50% {
        border-color: rgba(255, 106, 0, 0.3);
    }
}

@keyframes ep-gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* --- Scroll Reveal Utility --- */
.ep-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ep-reveal.ep-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Product columns stagger animation kaldırıldı (translateY yok) */

/* ==============================
   BREADCRUMB
   ============================== */
#sitePath.breadcrumb,
ol.breadcrumb {
    background: #fff;
    border-radius: 12px;
    padding: 14px 22px;
    margin-top: 20px;
    margin-bottom: 22px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    list-style: none;
    animation: ep-fadeIn 0.4s ease both;
}

#sitePath.breadcrumb::-webkit-scrollbar,
ol.breadcrumb::-webkit-scrollbar {
    display: none;
}

#sitePath.breadcrumb li,
ol.breadcrumb li {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
}

#sitePath.breadcrumb li + li::before,
ol.breadcrumb li + li::before {
    content: "\f054";
    font-family: "Font Awesome 7 Pro";
    font-weight: 900;
    font-size: 9px;
    color: #aaa;
    margin: 0 8px;
}

#sitePath.breadcrumb li a,
ol.breadcrumb li a {
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
}

#sitePath.breadcrumb li a:hover,
ol.breadcrumb li a:hover {
    color: #FF7F00;
}

#sitePath.breadcrumb li a.btn-warning {
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    color: #fff !important;
    border: none;
    border-radius: 24px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(255, 106, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#sitePath.breadcrumb li a.btn-warning:hover {
    box-shadow: 0 5px 16px rgba(255, 106, 0, 0.4);
    transform: translateY(-1px);
}

#sitePath.breadcrumb .active a small {
    font-size: 12px;
}

/* ==============================
   LEFT SIDEBAR
   ============================== */
.left-menu-container {
    position: -webkit-sticky;
    position: sticky;
    top: calc(70px + 48px + 12px);
    align-self: flex-start;
    max-height: calc(100vh - 70px - 48px - 24px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
    animation: ep-slideInLeft 0.5s ease both;
}

.left-menu-container::-webkit-scrollbar {
    width: 4px;
}
.left-menu-container::-webkit-scrollbar-track {
    background: transparent;
}
.left-menu-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}
.left-menu-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* --- Left Menu Panel Group (Accordion) --- */
#accordion.panel-group {
    margin-bottom: 0;
}

#accordion .panel {
    border: 1px solid rgba(255, 106, 0, 0.06) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#accordion .panel:hover {
    box-shadow: 0 4px 20px rgba(255, 106, 0, 0.08);
    border-color: rgba(255, 106, 0, 0.12) !important;
}

#accordion .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
}

#accordion .panel-title a {
    display: block;
    padding: 12px 16px;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#accordion .panel-title a:hover {
    color: #ff6a00;
    background: rgba(255, 106, 0, 0.03);
}

#accordion .panel-title a.active {
    color: #ff6a00;
    background: rgba(255, 106, 0, 0.05);
    border-left: 3px solid #ff6a00;
}

#accordion .panel-title .collapse-icon {
    transition: transform 0.3s ease;
    color: #999;
}

#accordion .panel-body {
    padding: 0 !important;
}

/* --- Left Menu List --- */
.left-menu-list {
    margin-bottom: 0;
}

.left-menu-list .list-group-item {
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.left-menu-list .list-group-item:last-child {
    border-bottom: none !important;
}

.left-menu-list .list-group-item a {
    display: block;
    padding: 10px 16px 10px 24px;
    color: #1a1a2e;
    text-decoration: none !important;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.left-menu-list .list-group-item a:hover {
    color: #ff6a00;
    padding-left: 30px;
    background: rgba(255, 106, 0, 0.04);
}

.left-menu-list .list-group-item a::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 2px;
    background: #ff6a00;
    border-radius: 2px;
    margin-right: 0;
    transition: width 0.3s ease, margin-right 0.3s ease;
    vertical-align: middle;
}

.left-menu-list .list-group-item a:hover::before {
    width: 12px;
    margin-right: 6px;
}

.left-menu-list .list-group-item.active {
    background: linear-gradient(135deg, #ff6a00, #ff8c33) !important;
    border-color: transparent !important;
}

.left-menu-list .list-group-item.active a {
    color: #fff !important;
    font-weight: 600;
}

.left-menu-list .list-group-item.active a:hover {
    color: #fff !important;
    background: transparent;
    padding-left: 28px;
}

/* ==============================
   FILTER PANELS (Color / Fabric Width)
   ============================== */
#filterPanel.filter-panel,
.filter-panel {
    margin-top: 12px !important;
    border: 1px solid rgba(255, 106, 0, 0.06) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#filterPanel.filter-panel:hover,
.filter-panel:hover {
    box-shadow: 0 4px 20px rgba(255, 106, 0, 0.08);
    border-color: rgba(255, 106, 0, 0.12) !important;
}

#filterPanel .panel-heading,
.filter-panel .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 12px 16px !important;
}

#filterPanel .panel-heading .panel-title,
.filter-panel .panel-heading .panel-title {
    font-size: 14px;
    color: #1a1a2e;
}

#filterPanel .panel-body,
.filter-panel .panel-body {
    padding: 12px 16px !important;
}

#filterPanel .panel-body .list-group,
.filter-panel .panel-body .list-group {
    max-height: 400px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #e8e8e8 transparent;
}

#filterPanel .panel-body .list-group::-webkit-scrollbar,
.filter-panel .panel-body .list-group::-webkit-scrollbar {
    width: 4px;
}

#filterPanel .panel-body .list-group::-webkit-scrollbar-thumb,
.filter-panel .panel-body .list-group::-webkit-scrollbar-thumb {
    background: #e8e8e8;
    border-radius: 4px;
}

.filter-search-box {
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    margin-bottom: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-search-box:focus {
    border-color: #ff6a00 !important;
    box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.08), 0 2px 8px rgba(255, 106, 0, 0.06) !important;
    outline: none;
    background: #fffcfa !important;
}

#filterPanel .prod-filter-color {
    background-color: #fff !important;
    padding: 6px 0 !important;
    border: none !important;
}

.filter-panel .prod-filter-color label {
    color: #1a1a2e !important;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-panel .prod-filter-color label:hover {
    color: #ff6a00 !important;
}

.filter-panel-body .list-group-item {
    border: 0px;
}

.filter-panel-body .seperator {
    border-bottom: 1px solid #f0f0f0;
    height: 2px;
    margin-bottom: 10px;
}

/* --- Fabric Width Filter --- */
#filterPanelKumasEni,
.filter-panel-kumasEni {
    margin-top: 12px !important;
    border: 1px solid rgba(255, 106, 0, 0.06) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#filterPanelKumasEni:hover,
.filter-panel-kumasEni:hover {
    box-shadow: 0 4px 20px rgba(255, 106, 0, 0.08);
    border-color: rgba(255, 106, 0, 0.12) !important;
}

.filter-panel-kumasEni .panel-heading {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 12px 16px !important;
}

.filter-panel-kumasEni .panel-heading .panel-title {
    font-size: 14px;
    color: #1a1a2e;
}

.filter-panel-kumasEni .panel-body {
    padding: 12px 16px !important;
}

.filter-panel-kumasEni .panel-body .list-group {
    max-height: 400px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: #e8e8e8 transparent;
}

.filter-panel-kumasEni .panel-body .list-group::-webkit-scrollbar {
    width: 4px;
}

.filter-panel-kumasEni .panel-body .list-group::-webkit-scrollbar-thumb {
    background: #e8e8e8;
    border-radius: 4px;
}

#filterPanelKumasEni .prod-filter-kumasEni {
    background-color: #fff !important;
    padding: 6px 0 !important;
    border: none !important;
}

.filter-panel-kumasEni .prod-filter-kumasEni label {
    color: #1a1a2e !important;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-panel-kumasEni .prod-filter-kumasEni label:hover {
    color: #ff6a00 !important;
}

/* ==============================
   ACTIVE FILTERS - Premium Design
   ============================== */
.ep-active-filters {
    background: linear-gradient(135deg, #fff8f3 0%, #fff 100%);
    border: 1px solid rgba(255, 106, 0, 0.1);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 12px rgba(255, 106, 0, 0.06);
    animation: ep-scaleIn 0.3s ease both;
}

.ep-active-filters__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 106, 0, 0.08);
}

.ep-active-filters__header i {
    color: #ff6a00;
    font-size: 14px;
}

.ep-active-filters__header span {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a2e;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ep-active-filters__count {
    background: #ff6a00 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    margin-left: auto;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.ep-active-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.ep-filter-remove-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    font-size: 9px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.remove-filter-button:hover .ep-filter-remove-icon {
    background: rgba(255,255,255,0.4);
    transform: rotate(90deg);
}

/* ==============================
   ACTIVE FILTERS (Remove buttons)
   ============================== */
.remove-filter-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 24px;
    color: #fff;
    padding: 7px 16px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    margin-left: 3px;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1.4;
    height: auto;
    width: auto;
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.25);
    animation: ep-scaleIn 0.3s ease both;
    position: relative;
    overflow: hidden;
}

.remove-filter-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.remove-filter-button:hover::before {
    left: 100%;
}

.remove-filter-button:hover {
    text-decoration: none;
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(220, 53, 69, 0.35);
}

.remove-filter-button span {
    display: inline-flex;
    align-items: center;
}

#clearFilterBtn {
    background: #999;
    color: #fff;
}

#clearFilterBtn:hover {
    background: #dc3545;
    color: #fff;
}

#clearFilterKumasEniBtn {
    background: #999;
    color: #fff;
}

#clearFilterKumasEniBtn:hover {
    background: #dc3545;
    color: #fff;
}

.filter-button:hover {
    background: #dc3545;
}

/* --- Active List Group Item --- */
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 2;
    color: #fff;
    background-color: #ff6a00;
    border-color: #ff6a00;
}

/* ==============================
   CATEGORY HEADER - Pro Design
   ============================== */
.cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #fffaf6 50%, #fff5ed 100%);
    border-radius: 16px;
    padding: 22px 28px;
    margin-bottom: 14px;
    box-shadow: 0 2px 12px rgba(255,106,0,0.06), 0 0 0 1px rgba(255,106,0,0.06);
    border: none;
    position: relative;
    overflow: hidden;
    animation: ep-fadeInUp 0.4s ease both;
}

.cat-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ff6a00, #ff8c33);
    border-radius: 4px 0 0 4px;
    animation: ep-glow 3s ease-in-out infinite;
}

.cat-header::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 106, 0, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.cat-header__content {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.cat-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3);
    animation: ep-float 4s ease-in-out infinite;
}

.cat-header__text {
    min-width: 0;
    flex: 1;
}

.cat-header h1 {
    margin: 0 !important;
    font-size: 21px !important;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
    letter-spacing: -0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-header__desc {
    margin-top: 3px;
}

.cat-header__desc,
.cat-header p {
    margin: 3px 0 0 0;
    font-size: 13px;
    color: #999;
    line-height: 1.4;
}

.cat-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f5f6f8 0%, #fff 100%);
    border: 1px solid rgba(255, 106, 0, 0.1);
    color: #999;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-header__badge:hover {
    border-color: rgba(255, 106, 0, 0.25);
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.1);
}

.cat-header__badges {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cat-header__badge i {
    font-size: 11px;
    color: #ff6a00;
    opacity: 0.8;
}

/* ==============================
   SORT ROW - Pro Design v2
   ============================== */
#sort-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    background: #fff;
    border-radius: 50px;
    margin-bottom: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.04);
    border: none;
    overflow: hidden;
    min-height: 46px;
    animation: ep-fadeInUp 0.4s ease both;
    animation-delay: 0.15s;
}

/* Sort Options Container */
.sort-row__options {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.sort-row__options::-webkit-scrollbar {
    display: none;
}

/* Sort Buttons */
#sort-row .sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    border: 1.5px solid transparent;
    background: transparent;
    position: relative;
    cursor: pointer;
    letter-spacing: 0.1px;
    line-height: 1;
}

#sort-row .sort-btn i {
    font-size: 13px;
    opacity: 0.5;
    transition: all 0.25s ease;
}

#sort-row .sort-btn:hover {
    color: #ff6a00;
    background: rgba(255,106,0,0.06);
    border-color: rgba(255,106,0,0.15);
}

#sort-row .sort-btn:hover i {
    opacity: 1;
    color: #ff6a00;
}

#sort-row .sort-btn:active {
    transform: scale(0.97);
}

#sort-row .sort-btn.active {
    color: #fff !important;
    background: #ff6a00;
    border-color: #ff6a00;
    box-shadow: 0 2px 8px rgba(255,106,0,0.30);
    font-weight: 600;
}

#sort-row .sort-btn.active i {
    opacity: 1;
    color: #fff;
}

#sort-row .sort-btn.active:hover {
    background: #e55d00;
    border-color: #e55d00;
    box-shadow: 0 4px 14px rgba(255,106,0,0.35);
}

/* Page Indicator */
.sort-row__page {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    height: 46px;
    font-size: 13px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
    border-left: 1px solid #f0f0f0;
}

.sort-row__page > i {
    font-size: 13px;
    color: #999;
    opacity: 0.6;
}

.sort-row__page-current {
    color: #ff6a00;
    font-weight: 700;
    font-size: 15px;
    min-width: 16px;
    text-align: center;
}

.sort-row__page-sep {
    color: #e8e8e8;
    font-weight: 400;
    margin: 0 1px;
    font-size: 12px;
}

.sort-row__page-total {
    color: #999;
    font-size: 13px;
    font-weight: 500;
}

/* Legacy support - hide old col structure if any remains */
#sort-row > .col {
    display: none !important;
}

/* Hide the old label element if it somehow still exists */
.sort-row__label {
    display: none !important;
}


/* ==============================
   WELL - Scoped to category page context
   ============================== */
.col-md-9 > .well,
.col-sm-12 > .well {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ==============================
   PRODUCT GRID (Bootstrap 5 Compatible)
   col-xl-4 col-lg-4 col-md-6 col-6
   ============================== */
#prods.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    align-items: stretch;
}

#prods.row > div[class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px !important;
    display: flex;
    flex-direction: column;
}

/* ==============================
   PRODUCT CARD - PRO LEVEL DESIGN
   Responsive: 4K / Desktop / Laptop / Tablet / Mobile
   ============================== */

/* --- Card Container --- */
.product-item-v2,
.product-item-v3 {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                border-color 0.35s ease;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    container-type: inline-size;
}

.product-item-v2:hover,
.product-item-v3:hover {
    box-shadow: 2px 2px 5px rgba(255, 106, 0, 0.10), 0 0 5px rgba(0,0,0,0.08);
    border-color: rgba(255, 106, 0, 0.15);
}

/* Subtle top accent line */
.product-item-v2::before,
.product-item-v3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff6a00, #ff8c33, #ff6a00);
    background-size: 200% 100%;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.product-item-v2:hover::before,
.product-item-v3:hover::before {
    opacity: 1;
    animation: ep-gradientShift 3s ease infinite;
}

/* --- Hover Overlay on Image --- */
.product-item-v2 .img-wrapper::after,
.product-item-v3 .img-wrapper::after {
    content: 'Ürünü İncele';
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 50%, transparent 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 16px;
    color: #fff;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    z-index: 4;
    pointer-events: none;
}

.product-item-v2:hover .img-wrapper::after,
.product-item-v3:hover .img-wrapper::after {
    opacity: 1;
    transform: translateY(0);
}

/* --- Quick View Floating Badge --- */
.product-item-v2 .img-wrapper::before,
.product-item-v3 .img-wrapper::before {
    content: '\f002';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    color: #ff6a00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 5;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(255,106,0,0.15);
    pointer-events: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.product-item-v2:hover .img-wrapper::before,
.product-item-v3:hover .img-wrapper::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- Card Link Wrapper --- */
.product-item-v2 > a,
.product-item-v3 > a {
    text-decoration: none !important;
    color: #1a1a2e;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    border-radius: inherit;
}

/* --- Image Container --- */
.product-item-v2 .img-wrapper,
.product-item-v3 .img-wrapper {
    display: block;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    position: relative;
    background: linear-gradient(145deg, #f8f9fa, #f0f1f3);
    height: 0;
    padding-bottom: 133.33%;
    aspect-ratio: 3 / 4;
}

@supports (aspect-ratio: 3 / 4) {
    .product-item-v2 .img-wrapper,
    .product-item-v3 .img-wrapper {
        height: auto;
        padding-bottom: 0;
    }
}

.product-item-v2 .img-wrapper img,
.product-item-v3 .img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: filter 0.4s ease;
}

.product-item-v2:hover .img-wrapper img,
.product-item-v3:hover .img-wrapper img {
    filter: brightness(1.03) saturate(1.05);
}

/* --- Image Slider (multi-image hover/swipe) --- */
.ep-img-slider .ep-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 1;
}

.ep-img-slider .ep-slide.active {
    opacity: 1;
    z-index: 2;
}

.product-item-v2:hover .ep-img-slider .ep-slide,
.product-item-v3:hover .ep-img-slider .ep-slide {
    transform: none;
    filter: none;
}

.ep-img-slider .ep-slide-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    display: flex;
    gap: 5px;
    z-index: 7;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 5px 10px;
}

.ep-img-slider .ep-slide-dots .ep-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.ep-img-slider .ep-slide-dots .ep-dot.active {
    background: #ff6a00;
    transform: scale(1.25);
}

@media (max-width: 767px) {
    .ep-img-slider .ep-slide-dots {
        opacity: 1;
        bottom: 6px;
        gap: 4px;
    }
    .ep-img-slider .ep-slide-dots .ep-dot {
        width: 6px;
        height: 6px;
    }
}

/* Kategori kartı: mobilde çoklu görsel Swiper (swiper-element) */
@media (max-width: 767.98px) {
    .ep-img-slider > swiper-container.ep-card-swiper-el {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

    .ep-img-slider[data-ep-swiper-card="1"] swiper-slide .ep-slide {
        position: relative;
        top: auto;
        left: auto;
        opacity: 1;
        z-index: auto;
    }

    /* Swiper kendi pagination ile senkron; HTML .ep-dot tekrarını gizle */
    .ep-img-slider[data-ep-swiper-card="1"] .ep-slide-dots {
        display: none !important;
    }
}

/* --- Card Body (below image) --- */
.product-item-v2 .addInfoArea,
.product-item-v3 .addInfoArea {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
    min-height: 0;
}

.product-item-v2 .calculateAreaMain,
.product-item-v3 .calculateAreaMain {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* --- Variant Dots (override inline styles) --- */
.product-item-v2 > a > span[id^="prodVariant_"],
.product-item-v3 > a > span[id^="prodVariant_"] {
    height: auto !important;
    min-height: 26px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 4px 10px;
}

/* --- Variant Link Button (override inline height:30px) --- */
.product-item-v2 .btn-sm.btn-secondary,
.product-item-v3 .btn-sm.btn-secondary {
    height: auto !important;
    min-height: 0;
    padding: 4px 8px !important;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- All inline height overrides within card (prevent layout shift) --- */
.product-item-v2 span[style*="height"],
.product-item-v3 span[style*="height"],
.product-item-v2 a[style*="height"],
.product-item-v3 a[style*="height"],
.product-item-v2 div[style*="height"],
.product-item-v3 div[style*="height"] {
    height: auto !important;
}

/* --- Calculate close button --- */
.product-item-v2 .calcCloseBtn,
.product-item-v3 .calcCloseBtn {
    height: auto !important;
}

/* --- Discount panel wrapper (override inline styles) --- */
.product-item-v2 [id="discountWrapperProdItemNew"],
.product-item-v3 [id="discountWrapperProdItemNew"] {
    height: auto !important;
    min-height: 0;
    margin-top: auto;
}

/* --- Product Name --- */
.product-item-v2 .prod-name,
.product-item-v3 .prod-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 14px 16px 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.5;
    min-height: 44px;
    max-height: 54px;
    letter-spacing: -0.01em;
    word-break: break-word;
    transition: color 0.25s ease;
}

.product-item-v2:hover .prod-name,
.product-item-v3:hover .prod-name {
    color: #e55d00;
}

/* --- Favorite Button (Floating Heart on Image) --- */
.product-item-v2 .add-to-fav,
.product-item-v3 .add-to-fav,
.epv3-card .add-to-fav {
    position: absolute !important;
    top: 12px;
    right: 12px;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #999;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
    margin: 0;
    opacity: 1;
    transform: scale(1);
}

.product-item-v2 .add-to-fav::before,
.product-item-v3 .add-to-fav::before,
.epv3-card .add-to-fav::before {
    content: '';
    position: absolute;
    top: -12px;
    right: -3px;
    bottom: -12px;
    left: -12px;
    border-radius: 12px;
}

.product-item-v2 .add-to-fav .my-fav-heart-selected,
.product-item-v3 .add-to-fav .my-fav-heart-selected,
.epv3-card .add-to-fav .my-fav-heart-selected {
    color: #dc3545;
}

/* Hide the text label - only show icon */
.product-item-v2 .add-to-fav > span[id^="prodFavText"],
.product-item-v3 .add-to-fav > span[id^="prodFavText"],
.epv3-card .add-to-fav > span[id^="prodFavText"] {
    display: none !important;
}

/* Fix icon sizing inside floating fav button */
.product-item-v2 .add-to-fav .fa-lg,
.product-item-v3 .add-to-fav .fa-lg,
.epv3-card .add-to-fav .fa-lg {
    font-size: 1em;
    line-height: 1;
}

/* prod-detail.css’teki genel .add-to-fav i.fa-heart { 1.3rem !important } kart üstü mini butonu şişiriyor — burada sıfırla */
.product-item-v2 .add-to-fav i.fa-heart,
.product-item-v3 .add-to-fav i.fa-heart,
.epv3-card .add-to-fav i.fa-heart,
.product-item-v2 .add-to-fav i.fa-smile,
.product-item-v3 .add-to-fav i.fa-smile,
.epv3-card .add-to-fav i.fa-smile,
.product-item-v2 .add-to-fav i.fa-frown,
.product-item-v3 .add-to-fav i.fa-frown,
.epv3-card .add-to-fav i.fa-frown {
    font-size: 1em !important;
    line-height: 1 !important;
}

/* --- Price Area --- PREMIUM */
.product-item-v2 .price-area,
.product-item-v3 .price-area {
    padding: 0;
    position: relative !important;
    top: 0 !important;
    display: flex;
    flex-direction: column;
}

.product-item-v2 .price-area br,
.product-item-v3 .price-area br {
    display: none;
}

/* --- Normal Price Wrapper --- */
.product-item-v2 .price-wrapper,
.product-item-v3 .price-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px 8px;
    position: relative !important;
    top: 0 !important;
    line-height: 1.3 !important;
    height: auto !important;
    width: 100% !important;
    flex-wrap: nowrap;
}

.product-item-v2 .priceText,
.product-item-v3 .priceText {
    font-size: 12px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}

.product-item-v2 .priceText > span:first-child,
.product-item-v3 .priceText > span:first-child {
    font-size: 10px;
    color: #999;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.product-item-v2 .priceText > span:last-child,
.product-item-v3 .priceText > span:last-child {
    display: inline;
    font-size: 24px;
    font-weight: 800;
    color: #1a1a2e;
    letter-spacing: -0.03em;
    font-feature-settings: 'tnum' on, 'lnum' on;
    line-height: 1.1;
}

.price-wrapper-line {
    text-decoration: line-through !important;
    color: #999 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    opacity: 0.6;
}

/* --- Balloon Price (Çarpı Fiyat) --- PREMIUM */
.baloon-price-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 8px;
    height: auto;
    font-weight: 700;
}

.baloon-price-rate-row {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    height: auto;
    min-width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    text-align: center;
    border-radius: 10px;
    position: static;
    top: auto;
    margin-left: 0;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.25);
    animation: ep-pulse-red 3s ease-in-out infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.product-item-v2:hover .baloon-price-rate-row,
.product-item-v3:hover .baloon-price-rate-row {
    transform: scale(1.06);
    box-shadow: 0 4px 18px rgba(220, 38, 38, 0.4);
}

.baloon-price-rate {
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    position: static;
    top: auto;
}

.baloon-price-space {
    display: none;
}

.baloon-price-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 16px;
    flex: 1;
    min-width: 0;
}

.baloon-price-row-first-price {
    color: #999 !important;
    text-decoration: line-through;
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.65;
}

.baloon-price-row-last-price {
    color: #1a1a2e !important;
    display: block;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    font-feature-settings: 'tnum' on, 'lnum' on;
}

/* --- Discount Footer (İndirimli Fiyat) --- PREMIUM GLASS CARD */
.baloon-price-footer {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 40%, #a7f3d0 100%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    font-weight: bold;
    min-height: auto;
    border-top: none;
    position: relative;
    overflow: hidden;
    margin: 6px 12px 10px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.18);
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.10), inset 0 1px 0 rgba(255,255,255,0.6);
}

.baloon-price-footer::before {
    display: none;
}

.baloon-price-footer-empty {
    background-color: transparent;
    display: block;
    padding: 8px 14px;
    font-weight: bold;
    min-height: auto;
    margin: 6px 12px 10px;
    border-radius: 12px;
}

/* --- Card Options Slider (Seçenekli Ürün) --- */
.ep-card-opts-row {
    background: linear-gradient(135deg, rgba(124,58,237,.07) 0%, rgba(124,58,237,.14) 100%);
    border: 1px solid rgba(124,58,237,.18);
}

.ep-card-opts-icon {
    color: #7c3aed;
    font-size: 12px;
    flex-shrink: 0;
}


.baloon-green-text {
    color: #059669;
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
    line-height: 1.3;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.baloon-green-text::before {
    content: '\f058';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    font-size: 11px;
    color: #10b981;
}

.baloon-price-value {
    display: block;
    font-size: 24px;
    line-height: 1.15;
    text-align: left;
    color: #047857;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-feature-settings: 'tnum' on, 'lnum' on;
}

/* ==============================
   PRODUCT CARD BADGES - PRO v2
   ============================== */
.product-item-v2 .iade-garantisi,
.product-item-v2 .sponsorlu,
.product-item-v2 .storDahil,
.product-item-v2 .genis-en-kumas,
.product-item-v2 .next-day-cargo,
.product-item-v2 .same-day-cargo,
.product-item-v3 .iade-garantisi,
.product-item-v3 .sponsorlu,
.product-item-v3 .storDahil,
.product-item-v3 .genis-en-kumas,
.product-item-v3 .next-day-cargo,
.product-item-v3 .same-day-cargo {
    position: absolute;
    z-index: 6;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1.3;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    white-space: nowrap;
    letter-spacing: 0.03em;
    animation: ep-scaleIn 0.3s ease both;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.product-item-v2:hover .iade-garantisi,
.product-item-v2:hover .sponsorlu,
.product-item-v2:hover .storDahil,
.product-item-v2:hover .genis-en-kumas,
.product-item-v2:hover .next-day-cargo,
.product-item-v2:hover .same-day-cargo,
.product-item-v3:hover .iade-garantisi,
.product-item-v3:hover .sponsorlu,
.product-item-v3:hover .storDahil,
.product-item-v3:hover .genis-en-kumas,
.product-item-v3:hover .next-day-cargo,
.product-item-v3:hover .same-day-cargo {
    transform: translateY(-1px) scale(1.03);
}

.iade-garantisi {
    bottom: 10px;
    right: 10px;
    top: auto;
    left: auto;
    background: rgba(22, 163, 74, 0.94);
    color: #fff;
    box-shadow: 0 2px 10px rgba(22, 163, 74, 0.25);
}

.sponsorlu,
.img-wrapper > .sponsorlu,
.product-item-v2 .img-wrapper > .sponsorlu,
.product-item-v3 .img-wrapper > .sponsorlu,
.product-item-v2 .img-wrapper .sponsorlu,
.product-item-v3 .img-wrapper .sponsorlu {
    position: absolute !important;
    bottom: 6px !important;
    top: auto !important;
    left: 6px !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.4) !important;
    color: rgba(255,255,255,0.7) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    font-size: 7px !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    letter-spacing: 0.02em;
    z-index: 8 !important;
    line-height: 1.3 !important;
}

.storDahil {
    top: 36px;
    left: 10px;
    background: rgba(14, 116, 144, 0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.25);
}

.genis-en-kumas {
    top: 6px !important;
    left: 6px !important;
    bottom: auto !important;
    right: auto !important;
    background: rgba(124, 58, 237, 0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
    z-index: 7;
}

/* Yeni Ürün etiketi varsa geniş-en-kumaş altına kaydır */
.img-wrapper > .new-product ~ .genis-en-kumas {
    top: 30px !important;
}

.next-day-cargo {
    top: 6px;
    left: 6px;
    background: rgba(37, 99, 235, 0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.same-day-cargo {
    top: 6px;
    left: 6px;
    background: rgba(37, 99, 235, 0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* ==========================================================
   KARGO ETİKETLERİ — img-wrapper içi hiyerarşi algoritması
   Sıralama: 1) Yeni Ürün  2) Geniş Enli Kumaş  3) Kargo Etiketi
   next-day-cargo ve same-day-cargo aynı kuralları paylaşır
   (bir ürün aynı anda ikisine birden sahip olamaz)
   ========================================================== */
.img-wrapper > .next-day-cargo,
.img-wrapper > .same-day-cargo {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 7;
}
/* Sadece Yeni Ürün varsa → altına */
.img-wrapper > .new-product ~ .next-day-cargo,
.img-wrapper > .new-product ~ .same-day-cargo {
    top: 30px !important;
}
/* Sadece Geniş Enli Kumaş varsa → altına */
.img-wrapper > .genis-en-kumas ~ .next-day-cargo,
.img-wrapper > .genis-en-kumas ~ .same-day-cargo {
    top: 30px !important;
}
/* Yeni Ürün + Geniş Enli Kumaş ikisi de varsa → en alta */
.img-wrapper > .new-product ~ .genis-en-kumas ~ .next-day-cargo,
.img-wrapper > .new-product ~ .genis-en-kumas ~ .same-day-cargo {
    top: 54px !important;
}

/* ==========================================================
   ÖZEL ÜRÜN ETİKETLERİ (prod-custom-tag)
   Admin panelinden tanımlanan, renkleri dinamik etiketler.
   Sağ üst köşede, üstten alta doğru sıralanır.
   ========================================================== */
.product-item-v2 .prod-custom-tag,
.product-item-v3 .prod-custom-tag {
    position: absolute;
    z-index: 6;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 6px;
    line-height: 1.3;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    white-space: nowrap;
    letter-spacing: 0.03em;
    animation: ep-scaleIn 0.3s ease both;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    right: 6px;
    top: 56px;
    left: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.product-item-v2:hover .prod-custom-tag,
.product-item-v3:hover .prod-custom-tag {
    transform: translateY(-1px) scale(1.03);
}

.img-wrapper > .prod-custom-tag {
    position: absolute !important;
    right: 6px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 7;
}

.img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 56px !important; }
.img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 80px !important; }
.img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 104px !important; }

@keyframes ep-video-ring {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35); }
    70% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.video-izle {
    position: absolute !important;
    top: 10px;
    right: 12px;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px !important;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #b91c1c;
    cursor: pointer;
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
    white-space: nowrap;
}

.video-izle i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    font-size: 10px;
    padding-left: 2px;
    flex-shrink: 0;
    animation: ep-video-ring 2s ease-out infinite;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.video-izle:hover {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.25);
}

/* Video İzle - görselin üstünde (indirim + video çakışma durumu) */
.video-izle--on-img {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    z-index: 7 !important;
}

.video-izle:hover i {
    background: linear-gradient(135deg, #b91c1c, #dc2626);
    transform: scale(1.1);
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.35);
}

.video-izle span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    font-size: 11px;
}

.new-product,
.new-product-mobile {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
}

.ribbon-new-product {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #16a34a, #059669);
    color: #fff;
    padding: 5px 14px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 16px 0 8px 0;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
}

.brillant-logo {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 6;
    background: rgba(255, 255, 255, 0.96);
    padding: 5px 8px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ==============================
   FAVORITE BUTTON - PRO (Global fallback)
   ============================== */
.add-to-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    color: #999;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-bottom: 1px solid #f0f0f0;
}

.add-to-fav .my-fav-heart-selected {
    color: #dc3545;
}

/* ==============================
   COLOR VARIANT DOTS - PRO v2
   ============================== */
/* --- Variant Row Container --- */
/* --- Trust Strip (tek renk durumu) --- */
.ep-trust-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 16px 8px;
    min-height: 0;
    overflow: hidden;
    flex-wrap: nowrap;
}

.ep-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
    flex-shrink: 0;
}

.ep-trust-item i {
    font-size: 9px;
    color: #d1d5db;
}

.ep-trust-item--highlight {
    color: #16a34a;
}

.ep-trust-item--highlight i {
    color: #16a34a;
}

/* Yıldız puanı altın rengi */
.ep-trust-item .fa-star {
    color: #f59e0b !important;
}

/* Tek renk varsa ürün adına daha fazla satır ver (:has WebGrease ile minify edilemez; kardeş seçiciler) */
.ep-trust-strip ~ .calculateAreaMain .prod-name,
.product-item-v2 .ep-trust-strip ~ .calculateAreaMain .prod-name,
.product-item-v3 .ep-trust-strip ~ .calculateAreaMain .prod-name {
    -webkit-line-clamp: 3 !important;
}

.ep-variant-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px 6px;
    min-height: 0;
}

/* --- Variant Color Dots --- */
.ep-variant-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.dot {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    display: block;
    background-color: #ccc;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    position: relative;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.dot--rainbow {
    background-image: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444) !important;
    background-color: transparent !important;
}

.dot--more {
    background: #f5f6f8 !important;
    border: 1.5px solid #f0f0f0;
    color: #999;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: auto;
    min-width: 16px;
    padding: 0 3px;
    border-radius: 50%;
    line-height: 1;
    vertical-align: middle;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1;
}

.dot:hover {
    transform: scale(1.3);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.dot:active {
    transform: scale(1.1);
}

/* --- Variant Count Label --- */
.ep-variant-count {
    font-size: 10px;
    font-weight: 600;
    color: #999;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 10px;
    background: #f5f6f8;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

.ep-variant-count:hover {
    color: #ff6a00;
    border-color: #ff6a00;
    background: rgba(255, 106, 0, 0.04);
}

.ep-variant-spacer {
    display: none;
}

/* ==============================
   COMMENT / REVIEW SECTION - PREMIUM
   ============================== */
.item-comment {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px 12px;
    margin-top: auto;
    min-height: 44px;
    border-top: 1px solid rgba(0,0,0,0.04);
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.01) 100%);
}

/* Legacy table styles (kept for backward compatibility) */
.item-comment table {
    width: 100%;
    table-layout: fixed;
}

.item-comment table td {
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-comment .btn-warning {
    background: transparent;
    color: #ff6a00;
    border: 1.5px solid #ff6a00;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}

.item-comment .btn-warning:hover {
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    color: #fff;
    box-shadow: 0 3px 12px rgba(255, 106, 0, 0.3);
    border-color: transparent;
    transform: translateY(-1px);
}

.item-comment .btn-outline-success {
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}

/* --- New Premium Review Elements --- */
.ep-review-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    flex-wrap: wrap;
}

.ep-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(217, 119, 6, 0.12);
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.08);
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.3;
}

.ep-rating-badge .fa-star {
    color: #f59e0b;
    font-size: 10px;
}

.product-item-v2:hover .ep-rating-badge,
.product-item-v3:hover .ep-rating-badge {
    transform: scale(1.04);
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.18);
}

.ep-review-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ff6a00 !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 3px 10px;
    border-radius: 16px;
    border: 1.5px solid #ff6a00;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    background: transparent;
    line-height: 1.3;
    cursor: pointer;
}

.ep-review-link:hover {
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(255, 106, 0, 0.3);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.ep-review-link i {
    font-size: 12px;
}

.ep-seller-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ff6a00 !important;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1.5px solid #ff6a00;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    background: transparent;
    line-height: 1.3;
    cursor: pointer;
}

.ep-seller-link:hover {
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 3px 12px rgba(255, 106, 0, 0.3);
    transform: translateY(-1px);
    text-decoration: none !important;
}

.ep-seller-link i {
    font-size: 11px;
}

.ep-new-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid rgba(5, 150, 105, 0.15);
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.3;
}

.ep-new-badge i {
    font-size: 11px;
}

.product-item-v2:hover .ep-new-badge,
.product-item-v3:hover .ep-new-badge {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.15);
}

.ep-sales-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #999;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ep-sales-count i {
    font-size: 9px;
    color: #28a745;
}

/* ==============================
   DISCOUNT PANEL (on product card) - PRO
   ============================== */
[id="discountWrapperProdItemNew"] {
    border-radius: 0 !important;
    margin-top: auto;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.4;
    height: auto !important;
    overflow: hidden;
}

.product-item-v2 [id="discountWrapperProdItemNew"],
.product-item-v3 [id="discountWrapperProdItemNew"] {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 25%, #b91c1c 50%, #991b1b 75%, #7f1d1d 100%) !important;
    background-size: 300% 100% !important;
    color: #fff !important;
    font-weight: 700;
    height: auto !important;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    animation: ep-urgency-pulse 4s ease-in-out infinite;
}

.product-item-v2 [id="discountWrapperProdItemNew"]::before,
.product-item-v3 [id="discountWrapperProdItemNew"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: ep-shimmer 2.5s infinite;
}

.product-item-v2 [id="discountWrapperProdItemNew"]::after,
.product-item-v3 [id="discountWrapperProdItemNew"]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}

/* --- Campaign / Discount Wrapper --- */
.discount-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
}

.discount-percent {
    background: linear-gradient(135deg, #e53935, #d32f2f);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    box-shadow: 0 2px 8px rgba(229, 57, 53, 0.35);
}

.discount-percent small {
    font-size: 12px;
}

.discount-price-wrapper {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.prod-old-price {
    color: #999;
    font-size: 13px;
    font-weight: 500;
}

.prod-price {
    color: #1a1a2e;
    font-size: 18px;
    font-weight: 800;
}

.campaign-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 0;
}

.campaign-text {
    font-size: 12px;
    color: #1a1a2e;
}

/* --- Pro Discount Panel - URGENCY DESIGN --- */
@keyframes ep-urgency-pulse {
    0%, 100% {
        background-position: 0% 50%;
        box-shadow: inset 0 0 0 0 rgba(239, 68, 68, 0);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: inset 0 0 30px rgba(239, 68, 68, 0.15);
    }
}

@keyframes ep-timer-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.97); }
}

@keyframes ep-bolt-flash {
    0%, 80%, 100% { opacity: 1; transform: scale(1); }
    90% { opacity: 0.5; transform: scale(1.2); }
}

.ep-discount-panel {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 25%, #b91c1c 50%, #991b1b 75%, #7f1d1d 100%);
    background-size: 300% 100%;
    color: #fff;
    font-weight: 700;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    min-height: 52px;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    position: relative;
    animation: ep-urgency-pulse 4s ease-in-out infinite;
}

.ep-discount-panel--empty {
    background: transparent !important;
    min-height: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    animation: none !important;
}

/* --- Product Detail Page Discount Panel --- */
.ep-discount-panel--detail {
    border-radius: 10px;
    margin-top: 0;
    min-height: auto;
    height: auto !important;
    padding: 12px 16px;
}

.ep-discount-text {
    font-size: 10px;
    font-weight: 700;
    color: #fde68a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: 100%;
    text-align: center;
    margin-bottom: 2px;
}

/* New discount row layout */
.ep-discount-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

/* Discount badge (big percentage) */
.ep-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 4px 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    flex-shrink: 0;
}

.ep-discount-badge > i {
    color: #fbbf24;
    font-size: 13px;
    animation: ep-bolt-flash 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.ep-discount-badge > span {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    line-height: 1;
}

/* Discount info (label + timer) */
.ep-discount-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    min-width: 0;
}

.ep-discount-label {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}

.ep-discount-timer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 2px;
    animation: ep-timer-blink 1.2s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.ep-discount-timer i {
    font-size: 10px;
    color: #fbbf24;
    animation: ep-bolt-flash 1.5s ease-in-out infinite;
}

/* Legacy support */
.ep-discount-rate {
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.ep-discount-rate i {
    color: #fbbf24;
    font-size: 12px;
}

/* Responsive discount panel */
@media (max-width: 767px) {
    .ep-discount-panel {
        padding: 8px 8px;
        min-height: 44px;
        border-radius: 0 0 12px 12px;
    }
    .ep-discount-badge > span {
        font-size: 15px;
    }
    .ep-discount-badge > i {
        font-size: 11px;
    }
    .ep-discount-badge {
        padding: 3px 8px;
        border-radius: 6px;
    }
    .ep-discount-label {
        font-size: 10px;
    }
    .ep-discount-timer {
        font-size: 9px;
        padding: 3px 6px;
        border-radius: 5px;
    }
    .ep-discount-text {
        font-size: 9px;
    }
    .ep-discount-row {
        gap: 8px;
    }
    .product-item-v2 [id="discountWrapperProdItemNew"],
    .product-item-v3 [id="discountWrapperProdItemNew"] {
        border-radius: 0 0 12px 12px;
    }
}

@media (max-width: 480px) {
    .ep-discount-panel {
        padding: 6px 6px;
        min-height: 40px;
        gap: 2px;
        border-radius: 0 0 8px 8px;
    }
    .ep-discount-badge > span {
        font-size: 13px;
    }
    .ep-discount-badge > i {
        font-size: 10px;
    }
    .ep-discount-badge {
        padding: 2px 6px;
        border-radius: 5px;
        gap: 3px;
    }
    .ep-discount-label {
        font-size: 9px;
        letter-spacing: 0.08em;
    }
    .ep-discount-timer {
        font-size: 8px;
        padding: 2px 5px;
        border-radius: 4px;
        gap: 3px;
    }
    .ep-discount-timer i {
        font-size: 7px;
    }
    .ep-discount-text {
        font-size: 8px;
    }
    .ep-discount-row {
        gap: 6px;
    }
    .product-item-v2 [id="discountWrapperProdItemNew"],
    .product-item-v3 [id="discountWrapperProdItemNew"] {
        border-radius: 0 0 8px 8px;
    }
}

/* ==============================
   PAGINATION – BS5 Flexbox
   ============================== */
.ep-pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 24px 0;
    margin-top: 12px;
}

.ep-pagination-prev,
.ep-pagination-next {
    flex: 0 0 auto;
}

.ep-pagination-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ep-pagination-info {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    letter-spacing: 0.3px;
}

/* Önceki/Sonraki buton sarmalayıcı ul'leri sıfırla */
.ep-pagination-wrapper .ep-pagination-prev .pagination,
.ep-pagination-wrapper .ep-pagination-next .pagination {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    background: none;
}

/* Önceki/Sonraki butonlar — li > a stillerini devre dışı bırak */
.ep-pagination-wrapper .ep-pagination-prev .pagination > li,
.ep-pagination-wrapper .ep-pagination-next .pagination > li {
    display: flex;
    list-style: none;
}

.ep-pagination-wrapper .ep-pagination-prev .pagination > li > a,
.ep-pagination-wrapper .ep-pagination-next .pagination > li > a {
    min-width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    background: none;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    box-shadow: none;
}

.ep-pagination-prev .btn-success,
.ep-pagination-next .btn-success {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff6a00, #ff9a33) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 22px !important;
    font-weight: 600;
    font-size: 14px;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.2px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.5;
}

.ep-pagination-prev .btn-success:hover,
.ep-pagination-next .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 106, 0, 0.35);
}

.ep-pagination-prev .btn-success:active,
.ep-pagination-next .btn-success:active {
    transform: translateY(0);
}


/* ==============================
   SEO TEXT
   ============================== */
/* --- SEO Text Row — Pro Tasarım (daraltılabilir) --- */
@keyframes ep-seo-row-accent {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.ep-seo-text-row {
    margin-top: 24px;
}

.ep-seo-text-row .well {
    line-height: 1.9;
    font-size: 12.5px;
    color: #6b7a8d;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 0;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    max-height: 160px;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.ep-seo-text-row .well.ep-seo--expanded {
    max-height: 5000px;
}

/* Sol accent çizgisi */
.ep-seo-text-row .well::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #FF7F00 0%, #ff9a3c 40%, #ffc78e 100%);
    border-radius: 16px 0 0 16px;
    z-index: 3;
    animation: ep-seo-row-accent 3s ease-in-out infinite;
}

/* Fade-out gradient (daraltılmış halde) */
.ep-seo-text-row .well::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 35%, rgba(255,255,255,0.95) 65%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 2;
}

.ep-seo-text-row .well.ep-seo--expanded::after {
    opacity: 0;
}

/* İç padding (::before sol accent olduğu için sol'da biraz fazla) */
.ep-seo-text-row .well > * {
    padding-left: 28px;
    padding-right: 24px;
}

.ep-seo-text-row .well > *:first-child {
    padding-top: 20px;
}

.ep-seo-text-row .well > *:last-child {
    padding-bottom: 20px;
}

/* Başlıklar */
.ep-seo-text-row .well h2 {
    color: #1a202c;
    font-size: 15px;
    font-weight: 800;
    margin-top: 18px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    padding-left: 40px;
    border-left: 3px solid #FF7F00;
    display: block;
    letter-spacing: 0.2px;
}

.ep-seo-text-row .well h3 {
    color: #2d3748;
    font-size: 13.5px;
    font-weight: 700;
    margin-top: 14px;
    margin-bottom: 8px;
    padding-left: 38px;
    border-left: 2px solid rgba(255, 127, 0, 0.4);
    display: block;
}

/* Linkler */
.ep-seo-text-row .well a {
    color: #4a6fa5 !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.ep-seo-text-row .well a:hover {
    color: #FF7F00 !important;
    border-bottom-color: rgba(255, 127, 0, 0.3);
}

/* Listeler */
.ep-seo-text-row .well ul,
.ep-seo-text-row .well ol {
    padding-left: 34px;
    margin-bottom: 10px;
    list-style: none;
}

.ep-seo-text-row .well li {
    margin-bottom: 5px;
    position: relative;
    padding-left: 16px;
}

.ep-seo-text-row .well li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF7F00, #ff9a3c);
    box-shadow: 0 0 4px rgba(255, 127, 0, 0.2);
}

/* Bold metin */
.ep-seo-text-row .well strong,
.ep-seo-text-row .well b {
    color: #2d3748;
    font-weight: 700;
}

/* Görseller */
.ep-seo-text-row .well img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 8px 0;
}

/* === Sosyal medya ikon görselleri (DB'den gelen küçük ikonlar) === */
.ep-seo-text-row .well a > img,
.ep-seo-text-row .well a > img[width] {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    margin: 0 2px !important;
    vertical-align: middle !important;
    object-fit: contain !important;
    background: #f5f6f8 !important;
    padding: 4px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.ep-seo-text-row .well a:hover > img {
    transform: scale(1.12) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14) !important;
    border-color: rgba(255, 127, 0, 0.2) !important;
}

/* Sosyal link chip tasarımı */
.ep-seo-text-row .well a[href*="facebook"],
.ep-seo-text-row .well a[href*="instagram"],
.ep-seo-text-row .well a[href*="youtube"],
.ep-seo-text-row .well a[href*="pinterest"],
.ep-seo-text-row .well a[href*="twitter"],
.ep-seo-text-row .well a[href*="x.com"],
.ep-seo-text-row .well a[href*="plus.google"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px 6px 6px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #f8f9fb, #f0f2f5) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    margin: 4px 5px !important;
    transition: all 0.3s ease !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.ep-seo-text-row .well a[href*="facebook"]:hover,
.ep-seo-text-row .well a[href*="instagram"]:hover,
.ep-seo-text-row .well a[href*="youtube"]:hover,
.ep-seo-text-row .well a[href*="pinterest"]:hover,
.ep-seo-text-row .well a[href*="twitter"]:hover,
.ep-seo-text-row .well a[href*="x.com"]:hover,
.ep-seo-text-row .well a[href*="plus.google"]:hover {
    background: linear-gradient(135deg, #fff5eb, #fff0e0) !important;
    border-color: rgba(255, 127, 0, 0.2) !important;
    color: #FF7F00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 127, 0, 0.12) !important;
}

/* Platform özel hover renkleri */
.ep-seo-text-row .well a[href*="facebook"]:hover { border-color: rgba(24, 119, 242, 0.3) !important; color: #1877f2 !important; }
.ep-seo-text-row .well a[href*="instagram"]:hover { border-color: rgba(225, 48, 108, 0.3) !important; color: #e1306c !important; }
.ep-seo-text-row .well a[href*="youtube"]:hover { border-color: rgba(255, 0, 0, 0.3) !important; color: #ff0000 !important; }
.ep-seo-text-row .well a[href*="pinterest"]:hover { border-color: rgba(189, 8, 28, 0.3) !important; color: #bd081c !important; }

/* Devamını Oku butonu (JS ile eklenir) */
.ep-seo-text-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 0;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background: linear-gradient(to bottom, #fafbfc, #f5f6f8);
    color: #8896a6;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
    border-radius: 0 0 16px 16px;
}

.ep-seo-text-toggle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 127, 0, 0.3), transparent);
    border-radius: 2px;
}

.ep-seo-text-toggle:hover {
    color: #FF7F00;
    background: linear-gradient(to bottom, #fff8f0, #fff3e6);
}

.ep-seo-text-toggle i {
    font-size: 9px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
}

.ep-seo-text-toggle:hover i {
    background: rgba(255, 127, 0, 0.1);
}

.ep-seo-text-toggle.ep-seo--expanded i {
    transform: rotate(180deg);
}

/* ==============================
   EMPTY STATE - Premium Design
   ============================== */
.ep-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    text-align: center;
    background: linear-gradient(135deg, #fff 0%, #faf8f5 100%);
    border: 2px dashed rgba(255, 106, 0, 0.15);
    border-radius: 20px;
    margin: 20px 0;
    animation: ep-fadeInUp 0.5s ease both;
}

.ep-empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,106,0,0.08), rgba(255,106,0,0.04));
    color: #ff6a00;
    font-size: 28px;
    margin-bottom: 20px;
    animation: ep-float 3s ease-in-out infinite;
}

.ep-empty-state__title {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px 0;
}

.ep-empty-state__desc {
    font-size: 14px;
    color: #999;
    max-width: 400px;
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.ep-empty-state__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ep-empty-state__btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(255, 106, 0, 0.4);
    color: #fff !important;
}

/* ==============================
   ALERT BOX
   ============================== */
.alert-success.alert-white {
    background: #fff;
    border: 1px solid #d4edda;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success.alert-white > .icon {
    flex-shrink: 0;
}

.margin-bottom-5px {
    margin-bottom: 12px;
}


/* ==============================
   PRODUCT ADMIN PANEL (inline admin controls)
   ============================== */
.ep-prod-admin-panel {
    margin-top: 4px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: 11px;
}

.ep-admin-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 4px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    transition: color 0.2s, background 0.2s;
}

.ep-admin-toggle:hover {
    color: #495057;
    background: #e9ecef;
}

.ep-admin-toggle i {
    font-size: 9px;
    transition: transform 0.2s;
}

.ep-admin-body {
    padding: 6px;
}

.ep-prod-admin-panel .btn-sm {
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1.4;
}

.ep-prod-admin-panel .badge {
    font-size: 10px;
}

.ep-prod-admin-panel .form-check-input {
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

.ep-prod-admin-panel .form-check-label {
    font-size: 11px;
    line-height: 1.3;
}

/* ==============================
   LEFT BANNER CONTAINER
   ============================== */
.left-banner-container {
    overflow-y: auto;
    max-height: 3000px;
    scrollbar-width: thin;
}

.left-banner-container::-webkit-scrollbar {
    width: 4px;
}

.left-banner-container::-webkit-scrollbar-thumb {
    background: #e8e8e8;
    border-radius: 4px;
}

/* ==============================
   CATEGORY AUTO BANNER (sol sidebar ürün kartları)
   BS5 flex layout uyumu
   ============================== */
.category-auto-banner {
    position: relative;
    margin-bottom: 12px;
}

.category-auto-banner:last-child {
    margin-bottom: 0;
}

.left-banner-container .product-item-v2,
.left-banner-container .product-item-v3 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.left-banner-container .product-item-v2 .img-wrapper,
.left-banner-container .product-item-v3 .img-wrapper {
    max-width: 100%;
}

.left-banner-container .product-item-v2 .img-wrapper img,
.left-banner-container .product-item-v3 .img-wrapper img {
    width: 100%;
    height: auto;
}

.left-banner-container .product-item-v2 .prod-name,
.left-banner-container .product-item-v3 .prod-name {
    font-size: 11px;
}

.left-banner-container .product-item-v2 .price-wrapper,
.left-banner-container .product-item-v3 .price-wrapper {
    font-size: 12px;
}

.left-banner-container .product-item-v2 .baloon-price-header,
.left-banner-container .product-item-v3 .baloon-price-header {
    font-size: 11px;
}

.left-banner-container .product-item-v2 .ep-discount-panel,
.left-banner-container .product-item-v3 .ep-discount-panel {
    font-size: 11px;
    padding: 4px 6px;
}

/* ==============================
   SOL SIDEBAR BANNER KARTI - PRO
   ============================== */
@keyframes ep-side-banner-shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.ep-side-banner {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.35s ease;
    max-width: 90%;
}

.ep-side-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(255, 106, 0, 0.18);
}

.ep-side-banner__link {
    display: block;
    text-decoration: none !important;
    color: inherit;
}

/* --- Eperde Önerisi Badge (side banner) --- */
.ep-side-banner .ep-recommendation-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #f0c040;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.25);
}

.ep-side-banner .ep-recommendation-badge::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(240,192,64,0.08) 40%, rgba(240,192,64,0.15) 50%, rgba(240,192,64,0.08) 60%, transparent 100%);
    background-size: 200% 100%;
    animation: ep-badge-shimmer 3s ease-in-out infinite;
    pointer-events: none;
}

.ep-side-banner .ep-recommendation-badge i {
    font-size: 10px;
    color: #f0c040;
    filter: drop-shadow(0 0 3px rgba(240, 192, 64, 0.4));
}

.ep-side-banner .ep-recommendation-badge span {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1;
}

/* --- Görsel Alanı --- */
.ep-side-banner__img {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
    max-height: 280px;
}

.ep-side-banner__img img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ep-side-banner:hover .ep-side-banner__img img {
    transform: scale(1.06);
}

/* Gradient overlay on image bottom */
.ep-side-banner__img::after {
    display: none;
}

/* Shine effect on hover */
.ep-side-banner__img::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    z-index: 3;
    transform: skewX(-15deg);
    pointer-events: none;
}

.ep-side-banner:hover .ep-side-banner__img::before {
    animation: ep-side-banner-shine 0.6s ease forwards;
}

/* --- Fiyat Etiketi --- */
.ep-side-banner__price-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 4;
    display: flex;
    align-items: baseline;
    gap: 3px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.ep-side-banner__price {
    font-size: 20px;
    font-weight: 800;
    color: #ff6a00;
    letter-spacing: -0.03em;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ep-side-banner__currency {
    font-size: 11px;
    font-weight: 600;
    color: #999;
}

/* --- Kampanya Sayacı --- */
.ep-side-banner__campaign {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(220, 38, 38, 0.9);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.ep-side-banner__campaign i {
    font-size: 9px;
}

/* --- Alt Bilgi Alanı --- */
.ep-side-banner__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: #fff;
}

.ep-side-banner__name {
    font-size: 12px;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ep-side-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: linear-gradient(135deg, #ff6a00 0%, #ee5a24 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    text-align: center;
    justify-content: center;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.25);
}

.ep-side-banner:hover .ep-side-banner__cta {
    background: linear-gradient(135deg, #ee5a24 0%, #ff6a00 100%);
    box-shadow: 0 4px 16px rgba(255, 106, 0, 0.35);
    transform: translateY(-1px);
}

.ep-side-banner__cta i {
    font-size: 10px;
    transition: transform 0.25s ease;
}

.ep-side-banner:hover .ep-side-banner__cta i {
    transform: translateX(3px);
}

/* ==============================
   SORT MENU
   ============================== */
.sortMenu .list-group-item {
    padding: 0px !important;
}

.sortMenu a {
    display: block;
    padding: 8px 13px;
    color: #1a1a2e;
    text-decoration: none !important;
}

/* ============================================
   RESPONSIVE BREAKPOINTS - PRO LEVEL
   BS5 Grid: col-xl-4 col-lg-4 col-md-6 col-6
   Her ekran ölçüsü için ayrı ayrı tasarım
   ============================================ */

/* ========== 4K / Ultra Wide (2560px+) ========== */
@media (min-width: 2560px) {
    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 16px;
        padding: 16px 20px 8px;
        min-height: 56px;
        max-height: 68px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 28px;
    }

    .baloon-price-row-last-price {
        font-size: 26px;
    }

    .baloon-price-value {
        font-size: 28px;
    }

    .baloon-price-rate-row {
        height: 42px;
        min-width: 56px;
        font-size: 16px;
        border-radius: 12px;
    }

    .baloon-price-header {
        padding: 12px 20px 8px;
    }

    .baloon-price-footer {
        padding: 14px 18px;
        margin: 6px 16px 12px;
        border-radius: 14px;
    }

    .product-item-v2 .add-to-fav,
    .product-item-v3 .add-to-fav,
    .epv3-card .add-to-fav {
        width: 44px;
        height: 44px;
        font-size: 18px;
        top: 14px;
        right: 14px;
    }

    .item-comment {
        min-height: 52px;
        padding: 10px 20px 14px;
    }

    .ep-rating-badge {
        font-size: 14px;
        padding: 5px 12px;
        border-radius: 22px;
    }

    .ep-review-link {
        font-size: 13px;
        padding: 5px 16px;
    }

    .ep-seller-link {
        font-size: 13px;
        padding: 5px 16px;
    }

    .ep-new-badge {
        font-size: 13px;
        padding: 5px 16px;
    }

    .ep-sales-count {
        font-size: 12px;
    }

    .product-item-v2 .iade-garantisi,
    .product-item-v2 .sponsorlu,
    .product-item-v2 .storDahil,
    .product-item-v2 .genis-en-kumas,
    .product-item-v2 .next-day-cargo,
    .product-item-v2 .same-day-cargo,
    .product-item-v3 .iade-garantisi,
    .product-item-v3 .sponsorlu,
    .product-item-v3 .storDahil,
    .product-item-v3 .genis-en-kumas,
    .product-item-v3 .next-day-cargo,
    .product-item-v3 .same-day-cargo {
        font-size: 13px;
        padding: 6px 14px;
        border-radius: 8px;
    }

    .product-item-v2 .prod-custom-tag,
    .product-item-v3 .prod-custom-tag {
        font-size: 10px;
        padding: 4px 10px;
        border-radius: 6px;
    }

    .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 50px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 72px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 94px !important; }

    .dot {
        height: 18px;
        width: 18px;
    }

    .ep-variant-row {
        padding: 4px 18px 6px;
        gap: 8px;
    }

    .item-comment .btn-warning {
        font-size: 13px;
        padding: 6px 16px;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-bottom: 24px !important;
    }
}

/* ========== Large Desktop (1920px - 2559px) ========== */
@media (min-width: 1920px) and (max-width: 2559px) {
    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 14px;
        padding: 14px 16px 6px;
        min-height: 48px;
        max-height: 58px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 22px;
    }

    .baloon-price-row-last-price {
        font-size: 20px;
    }

    .baloon-price-value {
        font-size: 22px;
    }

    .baloon-price-rate-row {
        height: 36px;
        min-width: 48px;
        font-size: 15px;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 20px !important;
    }
}

/* ========== Standard Desktop (1200px - 1919px) ========== */
@media (min-width: 1200px) and (max-width: 1919px) {
    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 13px;
        padding: 12px 14px 6px;
        min-height: 44px;
        max-height: 52px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 18px;
    }

    .baloon-price-row-last-price {
        font-size: 17px;
    }

    .baloon-price-value {
        font-size: 18px;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 16px !important;
    }
}

/* ========== Small Desktop / Laptop (992px - 1199px) ========== */
@media (min-width: 992px) and (max-width: 1199px) {
    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 12px;
        padding: 10px 12px 4px;
        min-height: 38px;
        max-height: 46px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 17px;
    }

    .baloon-price-row-last-price {
        font-size: 16px;
    }

    .baloon-price-row-first-price {
        font-size: 11px;
    }

    .baloon-price-value {
        font-size: 17px;
    }

    .baloon-price-rate-row {
        height: 30px;
        min-width: 40px;
        font-size: 12px;
    }

    .baloon-price-header {
        padding: 6px 12px 4px;
        gap: 8px;
    }

    .baloon-price-footer {
        padding: 8px 10px;
        margin: 3px 8px 6px;
        border-radius: 10px;
    }


    .product-item-v2 .add-to-fav,
    .product-item-v3 .add-to-fav,
    .epv3-card .add-to-fav {
        width: 34px;
        height: 34px;
        font-size: 13px;
        top: 8px;
        right: 8px;
    }

    .product-item-v2 .iade-garantisi,
    .product-item-v2 .sponsorlu,
    .product-item-v2 .storDahil,
    .product-item-v2 .genis-en-kumas,
    .product-item-v2 .next-day-cargo,
    .product-item-v2 .same-day-cargo,
    .product-item-v3 .iade-garantisi,
    .product-item-v3 .sponsorlu,
    .product-item-v3 .storDahil,
    .product-item-v3 .genis-en-kumas,
    .product-item-v3 .next-day-cargo,
    .product-item-v3 .same-day-cargo {
        font-size: 9px;
        padding: 3px 8px;
    }

    .product-item-v2 .prod-custom-tag,
    .product-item-v3 .prod-custom-tag {
        font-size: 8px;
        padding: 3px 7px;
        border-radius: 4px;
        max-width: calc(100% - 46px);
        overflow: hidden;
        text-overflow: ellipsis;
        right: 4px;
    }

    .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 42px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 60px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 78px !important; }

    .dot {
        height: 14px;
        width: 14px;
    }

    .ep-variant-row {
        padding: 3px 12px 4px;
        gap: 6px;
    }

    .ep-variant-count {
        font-size: 9px;
        padding: 1px 6px;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
    }
}

/* ========== Tablet Portrait (768px - 991px) — BS5: col-md-6 = 2 kolon ========== */
@media (min-width: 768px) and (max-width: 991px) {
    .left-menu-container {
        position: static;
        margin-bottom: 20px;
    }

    #sort-row {
        justify-content: center;
    }

    .ep-pagination-wrapper {
        flex-direction: row;
        align-items: center;
    }

    .product-item-v2,
    .product-item-v3 {
        border-radius: 12px;
    }

    .product-item-v2 .img-wrapper,
    .product-item-v3 .img-wrapper {
        border-radius: 12px 12px 0 0;
    }

    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 13px;
        padding: 10px 12px 4px;
        min-height: 38px;
        max-height: 48px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 18px;
    }

    .product-item-v2 .priceText > span:first-child,
    .product-item-v3 .priceText > span:first-child {
        font-size: 10px;
    }

    .baloon-price-row-last-price {
        font-size: 17px;
    }

    .baloon-price-row-first-price {
        font-size: 11px;
    }

    .baloon-price-value {
        font-size: 18px;
    }

    .baloon-price-rate-row {
        height: 30px;
        min-width: 40px;
        font-size: 12px;
        border-radius: 8px;
    }

    .baloon-price-header {
        padding: 6px 12px 4px;
        gap: 8px;
    }

    .baloon-price-footer {
        padding: 8px 10px;
        margin: 3px 8px 6px;
        border-radius: 10px;
    }

    .baloon-green-text {
        font-size: 10px;
    }

    .product-item-v2 .add-to-fav,
    .product-item-v3 .add-to-fav,
    .epv3-card .add-to-fav {
        width: 34px;
        height: 34px;
        font-size: 13px;
        top: 8px;
        right: 8px;
    }

    .product-item-v2 .iade-garantisi,
    .product-item-v2 .sponsorlu,
    .product-item-v2 .storDahil,
    .product-item-v2 .genis-en-kumas,
    .product-item-v2 .next-day-cargo,
    .product-item-v2 .same-day-cargo,
    .product-item-v3 .iade-garantisi,
    .product-item-v3 .sponsorlu,
    .product-item-v3 .storDahil,
    .product-item-v3 .genis-en-kumas,
    .product-item-v3 .next-day-cargo,
    .product-item-v3 .same-day-cargo {
        font-size: 9px;
        padding: 3px 8px;
    }

    .dot {
        height: 14px;
        width: 14px;
    }

    .ep-variant-row {
        padding: 3px 10px 4px;
        gap: 5px;
    }

    .ep-variant-count {
        font-size: 9px;
        padding: 1px 6px;
    }

    .item-comment {
        min-height: 36px;
        padding: 5px 10px 8px;
    }

    .item-comment .btn-warning {
        font-size: 10px;
        padding: 3px 10px;
    }

    .item-comment .btn-outline-success {
        font-size: 10px;
        padding: 3px 10px;
    }

    .ep-rating-badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .ep-review-link {
        font-size: 10px;
        padding: 2px 8px;
    }

    .ep-seller-link {
        font-size: 10px;
        padding: 3px 10px;
    }

    .ep-new-badge {
        font-size: 10px;
        padding: 3px 10px;
    }

    .ep-sales-count {
        font-size: 9px;
    }

    .product-item-v2 [id="discountWrapperProdItemNew"],
    .product-item-v3 [id="discountWrapperProdItemNew"] {
        min-height: 44px;
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    .product-item-v2 > a > span[id^="prodVariant_"],
    .product-item-v3 > a > span[id^="prodVariant_"] {
        min-height: 22px;
        padding: 3px 8px;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
    }
}

/* ========== Mobile Landscape (576px - 767px) — BS5: col-6 = 2 kolon ========== */
@media (min-width: 576px) and (max-width: 767px) {
    #sitePath.breadcrumb {
        padding: 10px 12px;
        font-size: 12px;
    }

    .cat-header h1 {
        font-size: 18px !important;
    }
    .cat-header__icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 15px;
    }

    #sort-row {
        border-radius: 30px;
        min-height: 40px;
    }
    #sort-row .sort-btn {
        padding: 6px 12px;
        font-size: 11px;
    }
    .sort-row__options {
        gap: 3px;
        padding: 4px 5px;
    }
    .sort-row__page {
        height: 40px;
        padding: 0 12px;
    }

    .product-item-v2,
    .product-item-v3 {
        border-radius: 12px;
    }

    .product-item-v2 .img-wrapper,
    .product-item-v3 .img-wrapper {
        border-radius: 12px 12px 0 0;
    }

    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 12px;
        padding: 8px 10px 4px;
        min-height: 34px;
        max-height: 42px;
    }

    .product-item-v2 .price-wrapper,
    .product-item-v3 .price-wrapper {
        padding: 4px 10px;
    }

    .product-item-v2 .priceText > span:first-child,
    .product-item-v3 .priceText > span:first-child {
        font-size: 9px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 15px;
    }

    .baloon-price-row-last-price {
        font-size: 14px;
    }

    .baloon-price-row-first-price {
        font-size: 10px;
    }

    .baloon-price-value {
        font-size: 15px;
    }

    .baloon-price-rate-row {
        height: 26px;
        min-width: 36px;
        font-size: 11px;
        border-radius: 5px;
    }

    .baloon-price-header {
        padding: 4px 10px 2px;
        gap: 6px;
    }

    .baloon-price-footer {
        padding: 6px 8px;
        margin: 2px 8px 6px;
        border-radius: 8px;
    }


    .baloon-green-text {
        font-size: 9px;
    }

    .product-item-v2 .add-to-fav,
    .product-item-v3 .add-to-fav,
    .epv3-card .add-to-fav {
        width: 32px;
        height: 32px;
        font-size: 12px;
        top: 8px;
        right: 8px;
    }

    .product-item-v2 .iade-garantisi,
    .product-item-v2 .sponsorlu,
    .product-item-v2 .storDahil,
    .product-item-v2 .genis-en-kumas,
    .product-item-v2 .next-day-cargo,
    .product-item-v2 .same-day-cargo,
    .product-item-v3 .iade-garantisi,
    .product-item-v3 .sponsorlu,
    .product-item-v3 .storDahil,
    .product-item-v3 .genis-en-kumas,
    .product-item-v3 .next-day-cargo,
    .product-item-v3 .same-day-cargo {
        font-size: 9px;
        padding: 3px 6px;
    }

    .product-item-v2 .prod-custom-tag,
    .product-item-v3 .prod-custom-tag {
        font-size: 8px;
        padding: 2px 6px;
        border-radius: 4px;
        max-width: calc(100% - 50px);
        overflow: hidden;
        text-overflow: ellipsis;
        right: 4px;
    }

    .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 42px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 60px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 78px !important; }

    .dot {
        height: 13px;
        width: 13px;
        border-width: 1px;
    }

    .ep-variant-row {
        padding: 2px 8px 4px;
        gap: 4px;
    }

    .ep-variant-count {
        font-size: 8px;
        padding: 1px 5px;
    }

    .item-comment {
        min-height: 34px;
        padding: 4px 8px 6px;
    }

    .item-comment .btn-warning {
        font-size: 10px;
        padding: 3px 8px;
    }

    .item-comment .btn-outline-success {
        font-size: 10px;
        padding: 3px 8px;
    }

    .ep-rating-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    .ep-rating-badge .fa-star {
        font-size: 9px;
    }

    .ep-review-link {
        font-size: 10px;
        padding: 2px 8px;
    }

    .ep-seller-link {
        font-size: 10px;
        padding: 3px 8px;
    }

    .ep-new-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    .ep-sales-count {
        font-size: 9px;
    }

    .ep-review-summary {
        gap: 4px;
    }

    .product-item-v2 [id="discountWrapperProdItemNew"],
    .product-item-v3 [id="discountWrapperProdItemNew"] {
        min-height: 40px;
        padding: 5px 8px !important;
        font-size: 11px !important;
    }

    .product-item-v2 > a > span[id^="prodVariant_"],
    .product-item-v3 > a > span[id^="prodVariant_"] {
        min-height: 20px;
        padding: 3px 6px;
        gap: 3px;
    }

    .ep-pagination-prev .btn-success,
    .ep-pagination-next .btn-success {
        padding: 8px 14px !important;
        font-size: 13px;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px !important;
    }
}

/* ========== Mobile Portrait (481px - 575px) ========== */
@media (min-width: 481px) and (max-width: 575px) {
    #sitePath.breadcrumb {
        padding: 8px 10px;
        font-size: 11px;
    }

    .cat-header {
        padding: 12px;
        gap: 8px;
    }
    .cat-header__icon {
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 13px;
    }
    .cat-header h1 {
        font-size: 16px !important;
    }
    .cat-header__badge {
        font-size: 10px;
        padding: 4px 8px;
    }

    #sort-row {
        border-radius: 26px;
        min-height: 38px;
    }
    #sort-row .sort-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
    #sort-row .sort-btn i {
        display: none;
    }
    .sort-row__options {
        gap: 2px;
        padding: 4px 5px;
    }
    .sort-row__page {
        padding: 0 10px;
        height: 38px;
    }
    .sort-row__page > i {
        display: none;
    }

    .product-item-v2,
    .product-item-v3 {
        border-radius: 10px;
    }

    .product-item-v2 .img-wrapper,
    .product-item-v3 .img-wrapper {
        border-radius: 10px 10px 0 0;
    }

    .product-item-v2:hover,
    .product-item-v3:hover {
        box-shadow: 2px 2px 5px rgba(255, 106, 0, 0.10), 0 0 5px rgba(0,0,0,0.08);
    }

    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 11px;
        padding: 8px 8px 3px;
        min-height: 30px;
        max-height: 38px;
        -webkit-line-clamp: 2;
    }

    .product-item-v2 .price-wrapper,
    .product-item-v3 .price-wrapper {
        padding: 2px 8px;
    }

    .product-item-v2 .priceText > span:first-child,
    .product-item-v3 .priceText > span:first-child {
        font-size: 9px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 14px;
    }

    .baloon-price-row-last-price {
        font-size: 13px;
    }

    .baloon-price-row-first-price {
        font-size: 9px;
    }

    .baloon-price-value {
        font-size: 14px;
    }

    .baloon-price-rate-row {
        height: 24px;
        min-width: 34px;
        font-size: 10px;
        border-radius: 5px;
        padding: 2px 5px;
    }

    .baloon-price-header {
        padding: 4px 8px 2px;
        gap: 5px;
    }

    .baloon-price-footer {
        padding: 6px 8px;
        margin: 2px 6px 4px;
        border-radius: 6px;
    }


    .baloon-green-text {
        font-size: 9px;
    }

    .product-item-v2 .add-to-fav,
    .product-item-v3 .add-to-fav,
    .epv3-card .add-to-fav {
        width: 30px;
        height: 30px;
        font-size: 11px;
        top: 6px;
        right: 6px;
    }

    .product-item-v2 .iade-garantisi,
    .product-item-v2 .sponsorlu,
    .product-item-v2 .storDahil,
    .product-item-v2 .genis-en-kumas,
    .product-item-v2 .next-day-cargo,
    .product-item-v2 .same-day-cargo,
    .product-item-v3 .iade-garantisi,
    .product-item-v3 .sponsorlu,
    .product-item-v3 .storDahil,
    .product-item-v3 .genis-en-kumas,
    .product-item-v3 .next-day-cargo,
    .product-item-v3 .same-day-cargo {
        font-size: 8px;
        padding: 2px 5px;
        border-radius: 4px;
    }

    .iade-garantisi { bottom: 6px; right: 6px; top: auto; left: auto; }
    .sponsorlu { bottom: 6px; left: 6px; top: auto; right: auto; }
    .storDahil { top: 28px; left: 6px; }
    .genis-en-kumas { top: 6px !important; left: 6px !important; }
    .img-wrapper > .next-day-cargo,
    .img-wrapper > .same-day-cargo { top: 6px !important; left: 6px !important; }
    .img-wrapper > .new-product ~ .genis-en-kumas { top: 24px !important; }
    .img-wrapper > .new-product ~ .next-day-cargo,
    .img-wrapper > .new-product ~ .same-day-cargo { top: 24px !important; }
    .img-wrapper > .genis-en-kumas ~ .next-day-cargo,
    .img-wrapper > .genis-en-kumas ~ .same-day-cargo { top: 24px !important; }
    .img-wrapper > .new-product ~ .genis-en-kumas ~ .next-day-cargo,
    .img-wrapper > .new-product ~ .genis-en-kumas ~ .same-day-cargo { top: 42px !important; }

    .dot {
        height: 12px;
        width: 12px;
        border-width: 1px;
    }

    .ep-variant-row {
        padding: 2px 8px 3px;
        gap: 4px;
    }

    .ep-variant-dots {
        gap: 3px;
    }

    .ep-variant-count {
        font-size: 8px;
        padding: 1px 5px;
    }

    .item-comment {
        min-height: 30px;
        padding: 4px 6px 6px;
    }

    .ep-rating-badge {
        font-size: 9px;
        padding: 2px 5px;
    }

    .ep-rating-badge .fa-star {
        font-size: 8px;
    }

    .ep-review-link {
        font-size: 9px;
        padding: 2px 6px;
    }

    .ep-seller-link {
        font-size: 9px;
        padding: 2px 8px;
    }

    .ep-new-badge {
        font-size: 9px;
        padding: 2px 8px;
    }

    .ep-sales-count {
        font-size: 8px;
    }

    .ep-review-summary {
        gap: 3px;
    }

    .remove-filter-button {
        font-size: 11px;
        padding: 4px 10px;
    }

    .product-item-v2 [id="discountWrapperProdItemNew"],
    .product-item-v3 [id="discountWrapperProdItemNew"] {
        min-height: 38px;
        padding: 5px 6px !important;
        font-size: 10px !important;
    }

    .product-item-v2 > a > span[id^="prodVariant_"],
    .product-item-v3 > a > span[id^="prodVariant_"] {
        min-height: 18px;
        padding: 2px 6px;
        gap: 3px;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-bottom: 8px !important;
    }

    .ep-pagination-prev .btn-success,
    .ep-pagination-next .btn-success {
        padding: 6px 12px !important;
        font-size: 12px;
    }
}

/* ========== Small Mobile (320px - 480px) ========== */
@media (max-width: 480px) {
    #sitePath.breadcrumb {
        padding: 6px 8px;
        font-size: 10px;
    }

    .cat-header {
        padding: 10px;
        gap: 6px;
    }
    .cat-header__icon {
        display: none;
    }
    .cat-header h1 {
        font-size: 15px !important;
    }
    .cat-header__badge {
        font-size: 9px;
        padding: 3px 6px;
    }
    .cat-header__badge i {
        display: none;
    }

    #sort-row {
        min-height: 36px;
        border-radius: 22px;
    }
    #sort-row .sort-btn {
        padding: 4px 8px;
        font-size: 9px;
    }
    #sort-row .sort-btn i {
        display: none;
    }
    .sort-row__options {
        gap: 2px;
        padding: 3px 4px;
    }
    .sort-row__page {
        padding: 0 8px;
        height: 36px;
        font-size: 11px;
    }
    .sort-row__page > i {
        display: none;
    }
    .sort-row__page-current {
        font-size: 12px;
    }

    .product-item-v2,
    .product-item-v3 {
        border-radius: 8px;
        border-width: 1px;
    }

    .product-item-v2 .img-wrapper,
    .product-item-v3 .img-wrapper {
        border-radius: 8px 8px 0 0;
    }

    .product-item-v2:hover,
    .product-item-v3:hover {
        box-shadow: 2px 2px 5px rgba(255, 106, 0, 0.10), 0 0 5px rgba(0,0,0,0.08);
    }

    .product-item-v2 .prod-name,
    .product-item-v3 .prod-name {
        font-size: 10px;
        padding: 6px 6px 2px;
        min-height: 26px;
        max-height: 34px;
        -webkit-line-clamp: 2;
        line-height: 1.35;
    }

    .product-item-v2 .price-wrapper,
    .product-item-v3 .price-wrapper {
        padding: 2px 6px;
    }

    .product-item-v2 .price-area,
    .product-item-v3 .price-area {
        padding: 4px 6px 6px;
    }

    .product-item-v2 .priceText > span:first-child,
    .product-item-v3 .priceText > span:first-child {
        font-size: 8px;
    }

    .product-item-v2 .priceText > span:last-child,
    .product-item-v3 .priceText > span:last-child {
        font-size: 13px;
    }

    .baloon-price-row-last-price {
        font-size: 12px;
    }

    .baloon-price-row-first-price {
        font-size: 9px;
    }

    .baloon-price-value {
        font-size: 13px;
    }

    .baloon-price-rate-row {
        height: 22px;
        min-width: 30px;
        font-size: 9px;
        border-radius: 4px;
        padding: 2px 4px;
    }

    .baloon-price-header {
        padding: 3px 6px 2px;
        gap: 4px;
    }

    .baloon-price-footer {
        padding: 5px 6px;
        margin: 2px 4px 4px;
        border-radius: 6px;
    }

    .baloon-green-text {
        font-size: 8px;
    }

    .product-item-v2 .add-to-fav,
    .product-item-v3 .add-to-fav,
    .epv3-card .add-to-fav {
        width: 28px;
        height: 28px;
        font-size: 10px;
        top: 4px;
        right: 4px;
    }

    .product-item-v2 .iade-garantisi,
    .product-item-v2 .sponsorlu,
    .product-item-v2 .storDahil,
    .product-item-v2 .genis-en-kumas,
    .product-item-v2 .next-day-cargo,
    .product-item-v2 .same-day-cargo,
    .product-item-v3 .iade-garantisi,
    .product-item-v3 .sponsorlu,
    .product-item-v3 .storDahil,
    .product-item-v3 .genis-en-kumas,
    .product-item-v3 .next-day-cargo,
    .product-item-v3 .same-day-cargo {
        font-size: 7px;
        padding: 2px 4px;
        border-radius: 3px;
    }

    .product-item-v2 .prod-custom-tag,
    .product-item-v3 .prod-custom-tag {
        font-size: 7px;
        padding: 2px 5px;
        border-radius: 3px;
        max-width: calc(100% - 40px);
        overflow: hidden;
        text-overflow: ellipsis;
        right: 4px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }

    .img-wrapper > .prod-custom-tag:nth-of-type(1) { top: 34px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(2) { top: 50px !important; }
    .img-wrapper > .prod-custom-tag:nth-of-type(3) { top: 66px !important; }

    .iade-garantisi { bottom: 4px; right: 4px; top: auto; left: auto; }
    .sponsorlu { bottom: 4px; left: 4px; top: auto; right: auto; }
    .storDahil { top: 22px; left: 4px; }
    .genis-en-kumas { top: 4px !important; left: 4px !important; }
    .img-wrapper > .next-day-cargo,
    .img-wrapper > .same-day-cargo { top: 4px !important; left: 4px !important; }
    .img-wrapper > .new-product ~ .genis-en-kumas { top: 20px !important; }
    .img-wrapper > .new-product ~ .next-day-cargo,
    .img-wrapper > .new-product ~ .same-day-cargo { top: 20px !important; }
    .img-wrapper > .genis-en-kumas ~ .next-day-cargo,
    .img-wrapper > .genis-en-kumas ~ .same-day-cargo { top: 20px !important; }
    .img-wrapper > .new-product ~ .genis-en-kumas ~ .next-day-cargo,
    .img-wrapper > .new-product ~ .genis-en-kumas ~ .same-day-cargo { top: 36px !important; }

    .ribbon-new-product {
        font-size: 8px;
        padding: 3px 8px;
    }

    /* Video button on small mobile */
    .video-izle {
        top: 4px;
        right: 6px;
        padding: 3px 6px 3px 4px !important;
        font-size: 8px !important;
        gap: 3px;
        border-radius: 14px !important;
    }
    .video-izle i {
        width: 18px;
        height: 18px;
        font-size: 7px;
        padding-left: 1px;
    }
    .video-izle span {
        font-size: 8px;
    }

    .dot {
        height: 11px;
        width: 11px;
        border-width: 1px;
    }

    .ep-variant-row {
        padding: 2px 6px 3px;
        gap: 3px;
    }

    .ep-variant-dots {
        gap: 2px;
    }

    .ep-variant-count {
        font-size: 7px;
        padding: 1px 4px;
        border-radius: 8px;
    }

    .dot--more {
        font-size: 7px;
    }

    .remove-filter-button {
        font-size: 10px;
        padding: 3px 8px;
    }

    .item-comment {
        padding: 3px 4px 5px;
        min-height: 26px;
    }

    .item-comment .btn-warning {
        font-size: 8px;
        padding: 2px 5px;
    }

    .item-comment .btn-outline-success {
        font-size: 8px;
        padding: 2px 5px;
    }

    .ep-rating-badge {
        font-size: 8px;
        padding: 1px 4px;
        border-radius: 4px;
    }

    .ep-rating-badge .fa-star {
        font-size: 7px;
    }

    .ep-review-link {
        font-size: 8px;
        padding: 1px 5px;
        border-radius: 10px;
        border-width: 1px;
    }

    .ep-review-link i {
        font-size: 9px;
    }

    .ep-seller-link {
        font-size: 8px;
        padding: 2px 6px;
        border-radius: 10px;
        border-width: 1px;
    }

    .ep-new-badge {
        font-size: 8px;
        padding: 2px 6px;
        border-radius: 10px;
    }

    .ep-new-badge i {
        font-size: 8px;
    }

    .ep-sales-count {
        display: none;
    }

    .ep-review-summary {
        gap: 3px;
    }

    .product-item-v2 [id="discountWrapperProdItemNew"],
    .product-item-v3 [id="discountWrapperProdItemNew"] {
        min-height: 36px;
        padding: 4px 6px !important;
        font-size: 9px !important;
    }

    .product-item-v2 > a > span[id^="prodVariant_"],
    .product-item-v3 > a > span[id^="prodVariant_"] {
        min-height: 16px;
        padding: 2px 4px;
        gap: 2px;
    }

    .product-item-v2 .price-area,
    .product-item-v3 .price-area {
        padding: 0;
    }

    #prods.row > div[class*="col-"] {
        padding-left: 3px !important;
        padding-right: 3px !important;
        margin-bottom: 6px !important;
    }

    .ep-pagination-prev .btn-success,
    .ep-pagination-next .btn-success {
        padding: 5px 10px !important;
        font-size: 11px;
    }
}

/* --- Mobile & Tablet: Disable all hover effects (touch devices) --- */
@media (max-width: 991px) {
    /* Cat header: sadece masaüstünde göster */
    .cat-header {
        display: none !important;
    }

    /* Remove image overlay and quick-view badge */
    .product-item-v2 .img-wrapper::after,
    .product-item-v3 .img-wrapper::after,
    .product-item-v2 .img-wrapper::before,
    .product-item-v3 .img-wrapper::before {
        display: none !important;
    }

    /* Disable card hover lift/scale */
    .product-item-v2:hover,
    .product-item-v3:hover {
        transform: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03) !important;
        border-color: #e8e8e8 !important;
    }

    /* Disable image hover zoom */
    .product-item-v2:hover .img-wrapper img,
    .product-item-v3:hover .img-wrapper img {
        transform: none !important;
        filter: none !important;
    }

    /* Disable badge hover effects */
    .product-item-v2:hover .iade-garantisi,
    .product-item-v2:hover .sponsorlu,
    .product-item-v2:hover .storDahil,
    .product-item-v2:hover .genis-en-kumas,
    .product-item-v2:hover .next-day-cargo,
    .product-item-v2:hover .same-day-cargo,
    .product-item-v3:hover .iade-garantisi,
    .product-item-v3:hover .sponsorlu,
    .product-item-v3:hover .storDahil,
    .product-item-v3:hover .genis-en-kumas,
    .product-item-v3:hover .next-day-cargo,
    .product-item-v3:hover .same-day-cargo {
        transform: none !important;
    }

    /* Disable price rate hover */
    .product-item-v2:hover .baloon-price-rate-row,
    .product-item-v3:hover .baloon-price-rate-row {
        transform: none !important;
        box-shadow: 0 3px 12px rgba(220, 38, 38, 0.25) !important;
    }

    /* Always show fav button (no hover needed) */
    .product-item-v2 .add-to-fav,
    .product-item-v3 .add-to-fav,
    .epv3-card .add-to-fav {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    /* Hide card top accent */
    .product-item-v2::before,
    .product-item-v3::before {
        display: none !important;
    }

    /* Disable video button hover effect */
    .video-izle:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Hide sponsorlu badge on mobile & tablet */
    .sponsorlu {
        display: none !important;
    }

    /* Video button responsive on mobile */
    .video-izle {
        top: 6px;
        right: 8px;
        padding: 4px 8px 4px 5px !important;
        font-size: 9px !important;
        gap: 4px;
        border-radius: 16px !important;
    }
    .video-izle i {
        width: 20px;
        height: 20px;
        font-size: 8px;
    }
    .video-izle span {
        font-size: 9px;
    }

    .cat-header__badges {
        flex-direction: column;
        gap: 4px;
    }

    .ep-active-filters {
        padding: 12px 14px;
        border-radius: 12px;
    }

    .ep-active-filters__header {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .ep-empty-state {
        padding: 40px 20px;
    }

    .ep-empty-state__icon {
        width: 60px;
        height: 60px;
        font-size: 22px;
    }

    .ep-empty-state__title {
        font-size: 17px;
    }

    /* Disable spring animations on mobile for performance */
    .product-item-v2,
    .product-item-v3 {
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    #prods.row > div[class*="col-"] {
        animation-duration: 0.3s;
    }
}

/* --- Tablet: Adjust overlay size --- */
@media (min-width: 768px) and (max-width: 991px) {
    .product-item-v2 .img-wrapper::before,
    .product-item-v3 .img-wrapper::before {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .cat-header__badges {
        flex-direction: column;
        gap: 4px;
    }

    /* Hide sponsorlu badge on tablet */
    .sponsorlu {
        display: none !important;
    }
}

/* --- Small Mobile: Hide badges text --- */
@media (max-width: 480px) {
    .cat-header__badges {
        display: none;
    }

    .ep-active-filters__header span {
        font-size: 11px;
    }
}

/* --- Prefers Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Product Grid Full (Favs, RelProds, etc.) --- */
.ep-prod-grid-full > div[class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    flex-direction: column !important;
}
@media (min-width: 1600px) {
    .ep-prod-grid-full > div[class*="col-"] { width: 20% !important; flex: 0 0 20% !important; max-width: 20% !important; }
}
@media (min-width: 1920px) {
    .ep-prod-grid-full > div[class*="col-"] { width: 16.6666% !important; flex: 0 0 16.6666% !important; max-width: 16.6666% !important; }
}
@media (min-width: 2560px) {
    .ep-prod-grid-full > div[class*="col-"] { width: 14.2857% !important; flex: 0 0 14.2857% !important; max-width: 14.2857% !important; }
}
@media (min-width: 3840px) {
    .ep-prod-grid-full > div[class*="col-"] { width: 11.1111% !important; flex: 0 0 11.1111% !important; max-width: 11.1111% !important; }
}

/* ==============================
   MOBILE CATEGORY SCROLL BAR
   ============================== */

#mobile-cat-scroll {
    display: none;
}

@media (max-width: 991px) {
    #mobile-cat-scroll {
        display: block;
        position: sticky;
        top: calc(98px - 1px);
        z-index: 1040;
        background: #fff;
        margin-left: -12px;
        margin-right: -12px;
        margin-top: -5px;
        border-bottom: 2px solid #eee;
    }

    #mobile-cat-scroll .ep-cat-nav {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 12px;
        gap: 0;
    }

    #mobile-cat-scroll .ep-cat-nav::-webkit-scrollbar {
        display: none;
    }

    #mobile-cat-scroll .ep-cat-nav .nav-item {
        flex-shrink: 0;
    }

    #mobile-cat-scroll .ep-cat-nav .nav-link {
        display: block;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 500;
        color: #555;
        white-space: nowrap;
        text-decoration: none;
        border: none;
        border-bottom: 3px solid transparent;
        border-radius: 0;
        background: transparent;
        transition: color 0.2s ease, border-color 0.2s ease;
    }

    #mobile-cat-scroll .ep-cat-nav .nav-link:hover {
        color: #ff6a00;
        border-bottom-color: rgba(255, 106, 0, 0.3);
        background: transparent;
    }

    #mobile-cat-scroll .ep-cat-nav .nav-link.active {
        color: #ff6a00;
        font-weight: 600;
        border-bottom-color: #ff6a00;
        background: transparent;
    }
}

/* ==============================
   MOBILE FILTER OFFCANVAS
   ============================== */

#mobile-filter-btn-wrapper {
    display: none;
}

@media (max-width: 991px) {
    #sitePath.breadcrumb {
        display: none !important;
    }

    #sort-row {
        display: none !important;
    }

    #mobile-filter-btn-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-top: 8px;
        margin-bottom: 16px;
    }

    #btnMobileFilter {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 28px;
        background: #7B2CBF;
        color: #fff;
        border: none;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 8px rgba(123, 44, 191, 0.25);
        position: relative;
    }

    #btnMobileFilter:hover {
        background: #6A1B9A;
        box-shadow: 0 4px 16px rgba(123, 44, 191, 0.35);
        transform: translateY(-1px);
    }

    #btnMobileFilter:active {
        transform: translateY(0);
        box-shadow: 0 1px 4px rgba(123, 44, 191, 0.2);
    }

    #btnMobileFilter i {
        font-size: 15px;
    }

    .mobile-filter-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: #fff;
        color: #7B2CBF;
        border-radius: 50px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }
}

.ep-filter-offcanvas {
    display: none;
}

@media (max-width: 991px) {
    .ep-filter-offcanvas {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1070;
        pointer-events: none;
        visibility: hidden;
    }

    .ep-filter-offcanvas--open {
        pointer-events: auto;
        visibility: visible;
    }

    .ep-filter-offcanvas__backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ep-filter-offcanvas--open .ep-filter-offcanvas__backdrop {
        opacity: 1;
    }

    .ep-filter-offcanvas__panel {
        position: absolute;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 380px;
        height: 100%;
        background: #fff;
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    .ep-filter-offcanvas--open .ep-filter-offcanvas__panel {
        transform: translateX(0);
    }

    .ep-filter-offcanvas__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid #e8e8e8;
        background: #fff;
        flex-shrink: 0;
    }

    .ep-filter-offcanvas__title {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 17px;
        font-weight: 700;
        color: #1a1a2e;
    }

    .ep-filter-offcanvas__title i {
        color: #ff6a00;
        font-size: 18px;
    }

    .ep-filter-offcanvas__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: #f5f6f8;
        border-radius: 50%;
        color: #555;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ep-filter-offcanvas__close:hover {
        background: #e8e8e8;
        color: #1a1a2e;
    }

    .ep-filter-offcanvas__sort {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px 16px;
        border-bottom: 1px solid #e8e8e8;
        background: #f5f6f8;
        flex-shrink: 0;
    }

    .ep-filter-offcanvas__sort .sort-row__options {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        flex: 1;
    }

    .ep-filter-offcanvas__sort .sort-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 500;
        color: #555;
        text-decoration: none !important;
        background: #fff;
        border: 1px solid #eee;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .ep-filter-offcanvas__sort .sort-btn i {
        font-size: 11px;
        opacity: 0.6;
    }

    .ep-filter-offcanvas__sort .sort-btn:hover {
        border-color: #ff6a00;
        color: #ff6a00;
    }

    .ep-filter-offcanvas__sort .sort-btn.active {
        background: #ff6a00;
        border-color: #ff6a00;
        color: #fff;
        font-weight: 600;
    }

    .ep-filter-offcanvas__sort .sort-btn.active i {
        opacity: 1;
        color: #fff;
    }

    .ep-filter-offcanvas__sort .sort-row__page {
        display: none;
    }

    .ep-filter-offcanvas__body {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
    }

    .ep-filter-offcanvas__body::-webkit-scrollbar {
        width: 4px;
    }

    .ep-filter-offcanvas__body::-webkit-scrollbar-track {
        background: transparent;
    }

    .ep-filter-offcanvas__body::-webkit-scrollbar-thumb {
        background: #e8e8e8;
        border-radius: 4px;
    }

    .ep-filter-offcanvas__body .panel-group {
        margin-bottom: 0;
    }

    .ep-filter-offcanvas__body .panel {
        border-radius: 8px;
        margin-bottom: 8px;
        border: 1px solid #f0f0f0;
    }

    .ep-filter-offcanvas__body .filter-panel {
        display: block !important;
    }
}

/* ===========================
   Category FAQ Section
   =========================== */
.cat-faq-row {
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
}

.cat-faq-section {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    padding: 1.5rem 1.75rem 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Collapse wrap */
.cat-faq-collapse-wrap {
    position: relative;
    max-height: 220px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.cat-faq-collapse-wrap.cat-faq--expanded {
    max-height: 5000px;
}

.cat-faq-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cat-faq-collapse-wrap.cat-faq--expanded .cat-faq-gradient {
    opacity: 0;
}

.cat-faq-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    border: none;
    background: transparent;
    color: #FF7F00;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.6rem 0 0.4rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cat-faq-toggle-btn:hover {
    color: #e06c00;
}

.cat-faq-toggle-btn i {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
}

.cat-faq-toggle-btn.cat-faq--expanded i {
    transform: rotate(180deg);
}

.cat-faq-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.cat-faq-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FF7F00 0%, #ff9a33 100%);
    color: #fff;
    font-size: 1.15rem;
}

.cat-faq-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
    line-height: 1.3;
}

.cat-faq-subtitle {
    font-size: 0.82rem;
    color: #9ca3af;
    margin: 0.1rem 0 0;
    line-height: 1.3;
}

/* FAQ Search */
.cat-faq-search-wrap {
    position: relative;
    margin-bottom: 1rem;
    background: #f5f5f7;
    border-radius: 10px;
    overflow: hidden;
}

.cat-faq-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.85rem;
    pointer-events: none;
}

.cat-faq-search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.7rem 2.2rem 0.7rem 2.4rem;
    font-size: 0.9rem;
    color: #1d1d1f;
}

.cat-faq-search-input::placeholder {
    color: #9ca3af;
}

.cat-faq-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #d1d5db;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.15s ease;
}

.cat-faq-search-clear:hover {
    background: #9ca3af;
}

/* FAQ Accordion */
.cat-faq-accordion {
    border: none;
}

.cat-faq-item {
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent;
}

.cat-faq-item:last-child {
    border-bottom: none !important;
}

.cat-faq-btn {
    background: transparent !important;
    box-shadow: none !important;
    padding: 1.1rem 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1d1d1f;
    gap: 0.75rem;
    align-items: center;
    transition: color 0.2s ease;
}

.cat-faq-btn:not(.collapsed) {
    color: #FF7F00;
}

.cat-faq-btn::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
    transition: transform 0.25s ease;
}

.cat-faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.cat-faq-btn:not(.collapsed) .cat-faq-num {
    background: #FF7F00;
    color: #fff;
}

.cat-faq-answer {
    padding: 0 0.5rem 1.25rem 3.25rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #4b5563;
}

.cat-faq-no-result {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
    font-size: 0.9rem;
}

.cat-faq-no-result i {
    display: block;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 767.98px) {
    .cat-faq-row {
        margin-top: 1.5rem;
    }

    .cat-faq-section {
        padding: 1rem 1rem 0.5rem;
        border-radius: 10px;
    }

    .cat-faq-collapse-wrap {
        max-height: 180px;
    }

    .cat-faq-header-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .cat-faq-title {
        font-size: 1rem;
    }

    .cat-faq-btn {
        font-size: 0.88rem;
        padding: 0.9rem 0.3rem;
    }

    .cat-faq-answer {
        padding: 0 0.3rem 1rem 2.75rem;
        font-size: 0.85rem;
    }

    .cat-faq-num {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.72rem;
    }
}

/* --- Print Styles --- */
@media print {
    .left-menu-container,
    #sort-row,
    .ep-pagination-wrapper,
    #sitePath.breadcrumb,
    .add-to-fav,
    #discountWrapperProdItemNew,
    .ep-active-filters {
        display: none !important;
    }

    .product-item-v2,
    .product-item-v3 {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd;
    }

    .epv3-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd;
    }
}


/* ======================================================================
   PRODUCT CARD V3 - MODERN CLEAN DESIGN
   Tamamen bağımsız stiller - mevcut v2/v3 kartlara dokunmaz
   ====================================================================== */

.epv3-card {
    border-radius: 14px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    container-type: inline-size;
}

.epv3-card:hover {
    box-shadow: 0 4px 11px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
}

/* --- Link wrapper --- */
.epv3-link {
    color: #1a1a2e;
}

.epv3-link:hover {
    color: #1a1a2e;
    text-decoration: none !important;
}

/* --- Image area --- */
.epv3-img {
    aspect-ratio: 3 / 4;
    background: #f8f8f8;
}

.epv3-img__main {
    object-fit: cover;
    object-position: center;
}

/* Çoklu görsel: genel .ep-img-slider .ep-slide cover'ı ezer */
.epv3-img.ep-img-slider .ep-slide {
    object-fit: cover;
    object-position: center;
}

/* "Ürünü İncele" overlay */
.epv3-img::after {
    content: 'Ürünü İncele';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(transparent, rgba(0,0,0,0.55));
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
}

.epv3-card:hover .epv3-img::after {
    opacity: 0;
}

/* Slide dots inside image (reuse existing ep-slide-dots) */
.epv3-img .ep-slide-dots {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    z-index: 8;
    display: flex;
    gap: 4px;
    opacity: 1;
    transition: opacity 0.3s ease;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 20px;
    padding: 5px 10px;
}

/* --- Badges --- */
.epv3-badges {
    top: 8px;
    left: 8px;
    z-index: 5;
}

.epv3-badges-right {
    bottom: 8px;
    right: 8px;
    z-index: 5;
}

.ep-img-slider .epv3-badges-right {
    bottom: 18px;
}

.epv3-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.03em;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.epv3-card:hover .epv3-badge {
    transform: translateY(-1px) scale(1.03);
}

/* Eski kartlarla aynı: koyu yarı saydam rozet (turuncu değil) */
.epv3-badge--sponsor {
    background: rgba(0, 0, 0, 0.4) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

/* V3: Sponsorlu — görsel içinde sol alt; sadece adminden gelen etiket şeridi varken yukarı kayar */
.epv3-img > .sponsorlu.epv3-badge--sponsor {
    position: absolute !important;
    bottom: 4px !important;
    left: 4px !important;
    top: auto !important;
    right: auto !important;
    z-index: 8 !important;
    font-size: 7px !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    letter-spacing: 0.02em;
    line-height: 1.3 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

/* Adminden gelen etiket şeridi (ProdTags) — artık body içinde, image dışı */

.epv3-badge--new {
    background: rgba(16,185,129,0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(16,185,129,0.25);
}

.epv3-badge--info {
    background: rgba(14,165,233,0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(14,165,233,0.25);
}

.epv3-badge--genis-en {
    background: rgba(124,58,237,0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}

/* Sol üst: aynı gün kargo — ikon + metin */
.epv3-badge--same-day {
    background: rgba(37,99,235,0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
    font-size: 10px;
    padding: 5px 10px;
    max-width: calc(100% - 4px);
}

.epv3-badge--same-day i {
    font-size: 10px;
    flex-shrink: 0;
}

.epv3-badge--guarantee {
    background: rgba(22,163,74,0.94);
    color: #fff;
    box-shadow: 0 2px 10px rgba(22,163,74,0.25);
}

.epv3-badge--cargo {
    background: rgba(37,99,235,0.94);
    color: #fff;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}

/* --- Cargo bar (below price, shrink to content) --- */
.epv3-cargo-bar {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    width: auto;
    max-width: 100%;
    padding: 0 12px 0 10px;
    border-radius: 20px;
    line-height: 1;
    color: #fff;
    height: 28px;
}

.epv3-cargo-bar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    color: #fff;
    opacity: 0.95;
}

.epv3-cargo-bar__label {
    white-space: nowrap;
    letter-spacing: 0.03em;
}

.epv3-cargo-bar--same {
    background: linear-gradient(135deg, #ff6d00, #ff8f00);
}

.epv3-cargo-bar--next {
    background: linear-gradient(135deg, #1565c0, #1976d2);
}

/* --- Custom Tags (above product name — full-width) --- */

.epv3-tags-overlay::before {
    content: '\00a0';
    display: block;
    padding: 5px 10px;
    font-size: 0.68rem;
    line-height: 1.3;
    visibility: hidden;
}

/* etiket varken placeholder ::before gizlenir — sınıf _ProdItemNewV3’te */
.epv3-tags-overlay--has-tags::before {
    display: none;
}

.ep-card-tags-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.ep-card-tags-slider__track {
    position: relative;
    width: 100%;
    height: 100%;
}

.ep-card-tags-slider__item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .4s cubic-bezier(.4,0,.2,1);
}

.ep-card-tags-slider__item--active {
    position: relative;
    transform: translateY(0);
    opacity: 1;
}

.ep-card-tags-slider__item--exit {
    position: absolute;
    transform: translateY(-110%);
    opacity: 0;
}

.epv3-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 0;
    font-size: 14px !important;
    line-height: 1.3;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    white-space: nowrap;
    letter-spacing: 0.03em;
    width: 100%;
    text-align: center;
    transition: opacity 0.2s ease;
}

.epv3-tags-overlay--single .epv3-tag {
    animation: ep-scaleIn 0.3s ease both;
}

/* --- Video button --- */
.epv3-img .video-izle--on-img {
    position: absolute !important;
    bottom: 8px !important;
    right: 8px !important;
    top: auto !important;
    left: auto !important;
    z-index: 6 !important;
}


/* --- Card body --- */
.epv3-body {
    padding: 8px 8px 4px;
    gap: 2px;
}

/* --- Product name --- */
.epv3-name {
    line-height: 1.35;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.4em;
    transition: color 0.2s ease;
}

.epv3-card:hover .epv3-name {
    color: #ff6a00;
}

/* --- Color overlay (on image, bottom-right; above video when both) --- */
.epv3-color-overlay {
    position: absolute;
    bottom: 8px;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #fff;
    padding: 5px 8px 5px 6px;
    border-radius: 20px 0 0 20px;
    box-shadow: -1px 1px 6px rgba(0,0,0,0.10);
    cursor: pointer;
    z-index: 8;
}

.epv3-img--with-video-on-img .video-izle--on-img {
    bottom: 18px !important;
}

.epv3-img--with-video-on-img .epv3-color-overlay {
    bottom: 62px;
}

.epv3-img--with-video-on-img:has(.epv3-badges-right > .epv3-badge) .video-izle--on-img {
    bottom: 44px !important;
}

.epv3-img--with-video-on-img:has(.epv3-badges-right > .epv3-badge) .epv3-color-overlay {
    bottom: 78px;
}

.epv3-color-overlay__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
    display: block;
    flex-shrink: 0;
}

.epv3-color-overlay__dot + .epv3-color-overlay__dot,
.epv3-color-overlay__dot + .epv3-color-overlay__dot--rainbow,
.epv3-color-overlay__dot--rainbow + .epv3-color-overlay__dot,
.epv3-color-overlay__dot--rainbow + .epv3-color-overlay__dot--rainbow {
    margin-left: -10px;
}

.epv3-color-overlay__dot--rainbow {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
    display: block;
    flex-shrink: 0;
}


.epv3-color-overlay__more {
    color: #555;
    line-height: 1;
    white-space: nowrap;
    margin-left: 3px;
    align-self: center;
}

/* --- Trust strip --- */
.epv3-trust {
    gap: 5px;
    padding: 2px 8px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    justify-content: flex-start;
}

.epv3-trust__item {
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 0px;
    border-radius: 16px;
    background: rgba(255,255,255,0.7);
    white-space: nowrap;
    line-height: 1.3;
    flex-shrink: 0;
    font-size: 0.75rem;
}

@media (min-width: 576px) {
    .epv3-trust__item {
        font-size: 0.875rem;
    }
}

.epv3-trust__item i {
    color: #ff6a00;
}

.epv3-trust__item .fa-shield-check {
    color: #16a34a;
}

.epv3-trust__item--stars {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
    border-color: rgba(217, 119, 6, 0.12);
    box-shadow: 0 1px 4px rgba(217, 119, 6, 0.08);
}

.epv3-trust__item--stars i {
    color: #ff6a00;
}

.epv3-trust__item--hl {
    color: #ff6a00;
    border-color: rgba(255, 106, 0, 0.18);
    background: rgba(255, 106, 0, 0.06);
}

.epv3-trust__item--hl i {
    color: #ff6a00;
}

/* --- Price area --- */
.epv3-price-area {
    padding-top: 2px;
    position: relative;
}

.epv3-price {
    gap: 2px;
}

.epv3-price__label {
    color: #6b7280;
    line-height: 1.2;
}

.epv3-price__old {
    color: #9ca3af;
    text-decoration: line-through;
}

.epv3-price__value {
    color: #1a1a2e;
    letter-spacing: -0.3px;
}

.epv3-price__value--discount {
    color: #16a34a;
}

.epv3-price__kdv {
    color: #9ca3af;
}

.epv3-price--soldout .epv3-price__value {
    color: #dc3545;
    font-size: 0.9rem;
}

/* --- Deal (balloon + extra discount) --- */
/* epv3-deal layout handled by BS5 utility classes */

.epv3-deal__badge {
    color: #fff;
    background: linear-gradient(135deg, #ff6a00, #ee5a00);
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.3;
}

.epv3-deal__old {
    color: #9ca3af;
    text-decoration: line-through;
    line-height: 1.2;
}

/* epv3-deal__body layout handled by BS5 utility classes */

.epv3-deal__body--double {
    gap: 2px;
    background: linear-gradient(135deg, rgba(22,163,74,0.04), rgba(22,163,74,0.08));
    border: 1px solid rgba(22,163,74,0.12);
    padding: 5px 8px;
}

.epv3-deal__label {
    color: #1a1a2e;
}

.epv3-deal__label--unit {
    color: #111;
}

.epv3-deal__prev {
    color: #9ca3af;
}

.epv3-deal__prev del {
    color: #9ca3af;
}

.epv3-deal__final-row {
    gap: 5px;
}

.epv3-deal__final-badge {
    color: #fff;
    background: #16a34a;
    padding: 1px 5px;
    border-radius: 4px;
    line-height: 1.4;
}

.epv3-deal__final-price {
    color: #16a34a;
    letter-spacing: -0.3px;
    font-size: 1.125rem !important;
}

.epv3-deal__main-price {
    color: #16a34a;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.epv3-deal__kdv {
    color: #9ca3af;
}

/* --- Campaign --- */
/* epv3-campaign layout handled by BS5 utility classes */

.epv3-campaign__percent {
    color: #fff;
    background: #dc3545;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
}

/* epv3-campaign__prices layout handled by BS5 utility classes */

.epv3-campaign__old {
    color: #9ca3af;
    text-decoration: line-through;
}

.epv3-campaign__new {
    color: #16a34a;
}

.epv3-campaign__timer {
    color: #dc3545;
    margin-top: 4px;
}


/* --- Reviews --- */
.epv3-reviews {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 20px;
}

.epv3-reviews__rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.epv3-reviews__stars {
    font-size: 0.72rem;
    font-weight: 700;
    color: #f59e0b;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.epv3-reviews__stars i {
    font-size: 0.68rem;
}

.epv3-reviews__link {
    font-size: 0.72rem;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s ease;
}

.epv3-reviews__link:hover {
    color: #ff6a00;
    text-decoration: underline;
}

.epv3-reviews__seller {
    font-size: 0.72rem;
    color: #6b7280;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.epv3-reviews__seller:hover {
    color: #ff6a00;
}

.epv3-reviews__new {
    font-size: 0.72rem;
    color: #10b981;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* --- Seller location --- */
.epv3-seller {
    font-size: 0.68rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 3px;
}

.epv3-seller i {
    font-size: 0.62rem;
    color: #d1d5db;
}

/* --- Brand logo --- */
.epv3-brand {
    position: absolute;
    top: 8px;
    right: 46px;
    z-index: 5;
}

.epv3-brand img {
    width: 60px;
    height: auto;
    opacity: 0.85;
}

/* --- Discount panel --- */
.epv3-discount-panel {
    background: linear-gradient(135deg, #fff5f5 0%, #fef2e8 100%);
    border-top: 1px solid #fde8e8;
    padding: 8px 14px;
    text-align: center;
}

.epv3-discount-panel__text {
    display: block;
    color: #dc3545;
    margin-bottom: 4px;
}

/* epv3-discount-panel__row layout handled by BS5 utility classes */

.epv3-discount-panel__badge {
    background: #dc3545;
    color: #fff;
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.epv3-discount-panel__info {
    color: #dc3545;
    line-height: 1.2;
}

.epv3-discount-panel__timer {
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* --- Admin filter badges --- */
.epv3-admin-filter {
    padding: 2px 0;
}

.epv3-admin-filter--ok {
    color: #10b981;
}

.epv3-admin-filter--missing {
    color: #dc3545;
}

/* ── V3 Card Responsive ── */

@media (max-width: 575.98px) {
    .epv3-body {
        padding: 8px 8px 4px;
        gap: 4px;
    }

    .epv3-trust {
        flex-wrap: wrap;
        justify-content: flex-start;
        row-gap: 4px;
        column-gap: 5px;
        
    }

    .epv3-name {
        min-height: 2.1em;
    }

    .epv3-badge {
        padding: 3px 6px;
    }

    .epv3-badge--same-day {
        padding: 3px 6px;
    }

    .epv3-color-overlay__dot,
    .epv3-color-overlay__dot--rainbow {
        width: 14px;
        height: 14px;
    }

    .epv3-color-overlay {
        padding: 4px 5px;
        gap: 3px;
    }

    .epv3-img--with-video-on-img .video-izle--on-img {
        bottom: 18px !important;
    }

    .epv3-img--with-video-on-img .epv3-color-overlay {
        bottom: 62px;
    }

    .epv3-img--with-video-on-img:has(.epv3-badges-right > .epv3-badge) .video-izle--on-img {
        bottom: 44px !important;
    }

    .epv3-img--with-video-on-img:has(.epv3-badges-right > .epv3-badge) .epv3-color-overlay {
        bottom: 78px;
    }

    .epv3-img > .sponsorlu.epv3-badge--sponsor {
        font-size: 6px !important;
        padding: 1px 4px !important;
    }

    .epv3-tag {
        padding: 4px 6px;
        font-size: 11px !important;
    }

    .epv3-tags-overlay::before {
        padding: 4px 6px;
        font-size: 11px;
    }

    .epv3-cargo-bar {
        height: 22px;
        padding: 0 8px 0 8px;
        gap: 5px;
    }

    .epv3-cargo-bar__icon {
        width: 14px;
    }

    .epv3-card {
        border-radius: 10px;
    }
}

@media (min-width: 576px) {
    .epv3-tags-overlay::before {
        font-size: 0.75rem;
    }

}

@media (min-width: 1400px) {
    .epv3-body {
        padding: 8px 8px 4px;
    }

    .epv3-tags-overlay::before {
        font-size: 0.82rem;
    }
}

@media (min-width: 2000px) {
    .epv3-badge {
        padding: 5px 12px;
    }

    .epv3-tags-overlay::before {
        font-size: 0.88rem;
    }
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #ff6a00;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #ff6a00;
    border-color: #ff6a00;
}

/* ==============================
   EP-PAGER — Modern BS5 Pagination
   ============================== */
.ep-pager {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 32px 0 24px;
    padding: 0;
}

.ep-pager__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.ep-pager__item {
    display: flex;
}

.ep-pager__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    gap: 6px;
}

a.ep-pager__link:hover {
    color: #ff6a00;
    background: #fff7ed;
    border-color: #ff6a00;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.15);
}

a.ep-pager__link:active {
    transform: translateY(0);
    box-shadow: none;
}

.ep-pager__item--active .ep-pager__link {
    color: #fff;
    background: linear-gradient(135deg, #ff6a00 0%, #e85d04 100%);
    border-color: #ff6a00;
    box-shadow: 0 4px 14px rgba(255, 106, 0, 0.3);
    cursor: default;
    font-weight: 600;
}

.ep-pager__item--disabled .ep-pager__link {
    color: #c4c8cf;
    background: #f9fafb;
    border-color: #e5e7eb;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.ep-pager__item--ellipsis .ep-pager__link {
    border: none;
    background: transparent;
    cursor: default;
    min-width: 32px;
    padding: 0 4px;
    color: #9ca3af;
    font-weight: 700;
    letter-spacing: 2px;
}

.ep-pager__item--prev .ep-pager__link,
.ep-pager__item--next .ep-pager__link {
    font-weight: 600;
    gap: 8px;
    padding: 0 16px;
    background: #f8f9fa;
}

a.ep-pager__item--prev .ep-pager__link:hover,
a.ep-pager__item--next .ep-pager__link:hover,
.ep-pager__item--prev a.ep-pager__link:hover,
.ep-pager__item--next a.ep-pager__link:hover {
    background: #ff6a00;
    color: #fff;
    border-color: #ff6a00;
}

.ep-pager__info {
    font-size: 13px;
    color: #6b7280;
    font-weight: 400;
}

.ep-pager__info strong {
    color: #ff6a00;
    font-weight: 700;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
    .ep-pager {
        margin: 24px 0 16px;
        gap: 10px;
    }

    .ep-pager__link {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 13px;
        border-radius: 8px;
    }

    .ep-pager__item--prev .ep-pager__link,
    .ep-pager__item--next .ep-pager__link {
        padding: 0 12px;
    }

    .ep-pager__prev-text,
    .ep-pager__next-text {
        display: none;
    }
}

/* Responsive: Mobile */
@media (max-width: 480px) {
    .ep-pager__link {
        min-width: 34px;
        height: 34px;
        font-size: 12px;
        border-radius: 8px;
        padding: 0 6px;
    }

    .ep-pager__list {
        gap: 3px;
    }

    .ep-pager__item--prev .ep-pager__link,
    .ep-pager__item--next .ep-pager__link {
        padding: 0 10px;
    }

    .ep-pager__info {
        font-size: 12px;
    }
}

@keyframes epLoaderSpin {
    to { transform: rotate(360deg); }
}

.ep-prod-loader-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255, 127, 0, 0.25);
    border-top-color: #FF7F00;
    border-radius: 50%;
    animation: epLoaderSpin 0.75s linear infinite;
    vertical-align: middle;
    margin-bottom: 4px;
}

/* ============================================
   EPerde - Modern Product Detail Page Styles
   Bootstrap 5 Compatible - Professional Design
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    --ep-primary: #FF7F00;
    --ep-primary-dark: #e67200;
    --ep-primary-light: #fff3e6;
    --ep-secondary: #252934;
    --ep-text: #2d3436;
    --ep-text-muted: #6c757d;
    --ep-text-light: #9CA3AF;
    --ep-border: #e9ecef;
    --ep-bg-light: #f8f9fa;
    --ep-bg-white: #ffffff;
    --ep-success: #10b981;
    --ep-danger: #ef4444;
    --ep-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --ep-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --ep-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --ep-radius-sm: 8px;
    --ep-radius-md: 12px;
    --ep-radius-lg: 16px;
    --ep-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Product Detail Container --- */
#prod-detail {
    color: var(--ep-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

#prod-detail h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ep-text);
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

#prod-detail h2 {
    color: var(--ep-text);
    margin-top: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* --- Modern Breadcrumb --- */
#prod-detail .breadcrumb {
    background: var(--ep-bg-white);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    box-shadow: var(--ep-shadow-sm);
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#prod-detail .breadcrumb::-webkit-scrollbar {
    display: none;
}

#prod-detail .breadcrumb li,
#prod-detail .breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: inherit;
    line-height: 1.4;
}

#prod-detail .breadcrumb .breadcrumb-item a,
#prod-detail .breadcrumb li a {
    color: var(--ep-text-muted);
    text-decoration: none;
    transition: var(--ep-transition);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

#prod-detail .breadcrumb .breadcrumb-item a:hover,
#prod-detail .breadcrumb li a:hover {
    color: var(--ep-primary);
}

#prod-detail .breadcrumb .breadcrumb-item.active a,
#prod-detail .breadcrumb li.active a {
    color: var(--ep-primary);
    font-weight: 600;
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Active item - btn-warning override for breadcrumb */
#prod-detail .breadcrumb li.active a.btn-warning {
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    color: #fff !important;
    border: none;
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(255, 127, 0, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}

#prod-detail .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
#prod-detail .breadcrumb li + li::before {
    content: "\f054";
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.55rem;
    color: var(--ep-text-light);
    vertical-align: middle;
    margin: 0 0.5rem;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Breadcrumb fade edges for scroll indication */
#prod-detail nav[aria-label="breadcrumb"] {
    position: relative;
}

#prod-detail nav[aria-label="breadcrumb"]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, var(--ep-bg-white) 0%, transparent 100%);
    pointer-events: none;
    border-radius: 0 var(--ep-radius-sm) var(--ep-radius-sm) 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#prod-detail .breadcrumb.is-scrollable ~ .breadcrumb-fade,
#prod-detail nav[aria-label="breadcrumb"].is-scrollable::after {
    opacity: 1;
}

/* --- Product Card (replaces .well) --- */
#prod-detail .prod-detail-card {
    background: var(--ep-bg-white);
    border-radius: var(--ep-radius-lg);
    box-shadow: var(--ep-shadow-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--ep-border);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

@media (min-width: 1200px) {
    .prod-detail-layout {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-start;
    }

    .prod-detail-layout > .prod-detail-card {
        flex: 1;
        min-width: 0;
    }

    .prod-seller-card.seller-sidebar-mode {
        background: #fff;
        border: 1px solid var(--ep-border);
        border-radius: var(--ep-radius-lg);
        box-shadow: var(--ep-shadow-md);
        margin: 0;
        padding: 1.5rem 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: sticky;
        top: 90px;
    }

    .seller-sidebar-mode .seller-card-main {
        flex-direction: column;
        text-align: center;
        gap: 0;
        align-items: center;
        width: 100%;
    }

    .seller-sidebar-mode .seller-card-avatar {
        width: 56px;
        height: 56px;
        margin-bottom: 0.75rem;
    }

    .seller-sidebar-mode .seller-card-info {
        text-align: center;
        width: 100%;
    }

    .seller-sidebar-mode .seller-card-name-row {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        margin-bottom: 0.75rem;
        flex-wrap: nowrap;
    }

    .seller-sidebar-mode .seller-card-name {
        font-size: 0.82rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 110px;
    }

    .seller-sidebar-mode .seller-card-rating {
        font-size: 0.72rem;
        padding: 0.15rem 0.45rem;
        flex-shrink: 0;
    }

    .seller-sidebar-mode .seller-card-actions {
        flex-direction: column;
        gap: 0;
        align-items: stretch;
        width: 100%;
        margin-top: 0;
    }

    .seller-sidebar-mode .seller-card-goto {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        width: 100%;
        padding: 0.5rem 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--ep-primary, #FF7F00);
        border: 1.5px solid var(--ep-primary, #FF7F00);
        border-radius: 8px;
        text-decoration: none;
        text-transform: uppercase;
        transition: all 0.2s ease;
        margin-top: 0.5rem;
    }

    .seller-sidebar-mode .seller-card-goto:hover {
        background: var(--ep-primary, #FF7F00);
        color: #fff;
    }

    .seller-sidebar-mode .seller-card-goto i {
        font-size: 0.55rem;
        transition: transform 0.2s ease;
    }

    .seller-sidebar-mode .seller-card-goto:hover i {
        transform: translateX(2px);
    }
}

@media (min-width: 769px) {
    #prod-detail .prod-detail-card > .row {
        align-items: flex-start;
    }
}

/* Backward compat for .well */
#prod-detail .well,
#prod-detail .well-radius {
    background: var(--ep-bg-white);
    border-radius: var(--ep-radius-lg);
    box-shadow: var(--ep-shadow-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--ep-border);
}

/* --- Image Gallery --- */
#prod-detail .prod-detail-image {
    width: 100%;
    border-radius: var(--ep-radius-md);
    transition: none;
}


/* ============================================
   PhotoSwipe 5 Responsive Product Gallery
   ============================================ */

/* --- Gallery Column --- */
.prod-gallery-col {
    position: relative;
}

@media (min-width: 768px) {
    .prod-gallery-col {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

/* --- Gallery Container --- */
.prod-gallery {
    position: relative;
    border-radius: var(--ep-radius-md);
    overflow: hidden;
    background: var(--ep-bg-white);
}

/* --- Main Image --- */
.prod-main-image-wrapper {
    position: relative;
    border-radius: var(--ep-radius-md);
    background: #fafafa;
    cursor: zoom-in;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Masaüstü: Fancyapps Thumbs, ana carousel'in altında (flex row yerine column) */
.desktop-prod-gallery .prod-main-image-wrapper {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    aspect-ratio: auto;
    overflow: visible;
}

.desktop-prod-gallery .prod-main-image-wrapper #productCarousel {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    min-height: 0;
    overflow: hidden;
}

/* Init olmadan önce slide'ları gizle */
#productCarousel:not(.f-carousel) .f-carousel__slide:not(:first-child) {
    display: none;
}

#productCarousel:not(.f-carousel) .f-carousel__slide:first-child {
    width: 100%;
    height: 100%;
}

.desktop-prod-gallery .prod-main-image-wrapper .f-thumbs {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin-top: 0.625rem;
}


/* --- Zoom Hint --- */
.prod-image-zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.prod-main-image-wrapper:hover .prod-image-zoom-hint {
    opacity: 1;
    transform: translateY(0);
}

/* --- Fancyapps carousel nav rengi --- */
#productCarousel {
    --f-carousel-theme-color: #FF7F00;
}

/* --- Image Counter Badge --- */
.prod-image-counter {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    z-index: 5;
    letter-spacing: 0.03em;
}

/* --- Thumbnails Wrapper --- */
.prod-thumbs-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    position: relative;
}

/* --- Thumbnails Track (horizontal scroll) --- */
.prod-thumbs-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px 0;
    flex: 1;
    min-width: 0;
}

.prod-thumbs-track::-webkit-scrollbar {
    display: none;
}

/* --- Individual Thumbnail --- */
.prod-thumb {
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    border-radius: var(--ep-radius-sm);
    border: 2px solid var(--ep-border);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
}

.prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.prod-thumb:hover {
    border-color: var(--ep-text-light);
    box-shadow: var(--ep-shadow-sm);
    transform: translateY(-2px);
}

.prod-thumb.active {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.18);
}

.prod-thumb .btnCover {
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 4px;
    z-index: 2;
}

/* --- Thumbnail Navigation Buttons --- */
.prod-thumbs-nav {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ep-border);
    background: var(--ep-bg-white);
    color: var(--ep-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--ep-transition);
    font-size: 0.7rem;
    box-shadow: var(--ep-shadow-sm);
    z-index: 2;
}

.prod-thumbs-nav:hover {
    background: var(--ep-primary);
    border-color: var(--ep-primary);
    color: #fff;
    box-shadow: var(--ep-shadow-md);
}

/* ============================================
   PhotoSwipe 5 Overrides
   ============================================ */
.pswp {
    --pswp-bg: rgba(0, 0, 0, 0.92);
}

.pswp__button {
    color: #fff;
}

.pswp__counter {
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0.85;
}

.pswp__zoom-wrap {
    will-change: transform;
}

/* --- Product Info Section --- */
#prodName {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ep-text);
    text-align: left;
    margin-bottom: 0.75rem;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

#prodCode {
    color: var(--ep-text);
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, #fff8f0, #fff3e6);
    border: 1px solid rgba(255, 127, 0, 0.18);
    padding: 0.3rem 0.85rem;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0.02em;
}

/* --- Badges --- */
.iade-garantisi {
    position: absolute;
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    color: #fff;
    width: auto;
    padding: 6px 14px;
    text-align: center;
    top: 16px;
    z-index: 2;
    right: 0;
    border-radius: 4px 0 0 4px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.3);
    height: auto;
}

.desktop-prod-gallery .prod-main-image-wrapper > .iade-garantisi {
    top: 12px;
    bottom: auto;
    left: 12px;
    right: auto;
    display: inline-flex;
    align-items: center;
    width: max-content;
    border-radius: 4px;
    z-index: 6;
}

.product-item-v2 .iade-garantisi,
.product-item-v3 .iade-garantisi {
    font-size: 0.62rem;
    padding: 2px 6px;
    color: #fff;
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    border: none;
    z-index: 99;
    position: absolute;
    top: 8px;
    right: 7px;
    height: auto;
    width: max-content;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 4px;
}

.sponsorlu {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    color: #fff;
    width: auto;
    text-align: center;
    padding: 4px 10px;
    bottom: 8px;
    z-index: 3;
    right: 15px;
    border-radius: 4px;
    font-size: 0.75rem;
    height: auto;
}

.product-item-v2 .sponsorlu,
.product-item-v3 .sponsorlu {
    font-size: 0.7rem;
    padding: 3px 8px;
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    border: none;
    z-index: 99;
    position: absolute;
    bottom: 200px;
    right: 15px;
    border-radius: 4px;
}

.storDahil {
    position: absolute;
    background: linear-gradient(135deg, #008396, #006d7a);
    color: #fff;
    border: 2px dotted rgba(255,255,255,0.6);
    border-radius: 8px;
    width: auto;
    text-align: center;
    padding: 4px 12px;
    top: 50px;
    z-index: 4;
    left: 9px;
    font-size: 0.8rem;
    font-weight: 600;
    height: auto;
}

.product-item-v2 .storDahil,
.product-item-v3 .storDahil {
    font-size: 0.7rem;
    padding: 3px 8px;
    color: #fff;
    background: linear-gradient(135deg, #008396, #006d7a);
    border: 2px dotted rgba(255,255,255,0.6);
    border-radius: 8px;
    z-index: 99;
    position: absolute;
    top: 60px;
    left: 8px;
}

/* --- Price Section --- */
.price-color-header div {
    font-size: 0.9rem;
    color: var(--ep-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

#price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ep-success);
    letter-spacing: -0.02em;
}

.calcOldPrice {
    text-decoration: line-through;
    color: var(--ep-text-light) !important;
    font-size: 1.1rem;
}

.calcTotalPrice {
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--ep-primary) !important;
}

/* --- Price Card (Non-Balloon) --- */
.ep-price-card {
    background: var(--ep-bg-white);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-md);
    padding: 1rem 1.25rem;
    box-shadow: var(--ep-shadow-sm);
    transition: var(--ep-transition);
}

.ep-price-card:hover {
    box-shadow: var(--ep-shadow-md);
}

.ep-price-card__top {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ep-price-card__unit-label {
    width: 100%;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ep-text);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: left;
    align-self: flex-start;
}

.ep-price-card__price-group {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.ep-price-card__amount {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ep-success);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.ep-price-card__kdv {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ep-primary);
    opacity: 0.75;
}

.ep-price-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--ep-success), #059669);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ep-price-card__badge i {
    font-size: 0.7rem;
}

/* Discount row (horizontal: badge + old price + timer) */
.ep-price-card__discount-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ep-price-card__discount-rate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.ep-price-card__discount-rate i {
    font-size: 0.72rem;
    color: #fbbf24;
    animation: ep-bolt-flash-detail 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.ep-price-card__discount-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ep-text-muted);
    background: var(--ep-bg-light);
    padding: 0.2rem 0.55rem;
    border-radius: 12px;
    white-space: nowrap;
}

.ep-price-card__discount-timer i {
    font-size: 0.62rem;
    color: var(--ep-danger);
}

.ep-price-card__discount-text {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ep-text-muted);
    text-align: right;
    max-width: 180px;
    line-height: 1.3;
}

.ep-price-card__old-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.ep-price-card__label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ep-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ep-price-card__old-price {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ep-text-light);
    text-decoration: line-through;
}

.ep-price-card__old-kdv {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ep-text-light);
}

.ep-price-card__unit-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.35rem;
}

.ep-price-card__unit-icon {
    font-size: 0.8rem;
    color: var(--ep-primary);
    opacity: 0.7;
}

.ep-price-card__divider {
    height: 1px;
    background: var(--ep-border);
    margin: 0.75rem 0;
}

.ep-price-card__color-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ep-price-card__color-icon {
    font-size: 0.85rem;
    color: var(--ep-primary);
    opacity: 0.6;
}

.ep-price-card__color-label {
    font-size: 0.82rem;
    color: var(--ep-text-muted);
    font-weight: 500;
}

.ep-price-card__color-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ep-text);
}

/* Discount banner */
#discountWrapperProdItemNew,
#discountWrapperProdDetail {
    border-radius: var(--ep-radius-sm) !important;
    overflow: hidden;
    margin-top: 0.75rem;
}

/* --- Discount Panel (urgency design) --- */
@keyframes ep-urgency-pulse-detail {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes ep-bolt-flash-detail {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.15); }
}

@keyframes ep-timer-blink-detail {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.ep-discount-panel {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 25%, #b91c1c 50%, #991b1b 75%, #7f1d1d 100%);
    background-size: 300% 100%;
    color: #fff;
    font-weight: 700;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-height: auto;
    height: auto !important;
    overflow: hidden;
    border-radius: 10px !important;
    position: relative;
    animation: ep-urgency-pulse-detail 4s ease-in-out infinite;
}

.ep-discount-text {
    font-size: 10px;
    font-weight: 700;
    color: #fde68a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    width: 100%;
    text-align: center;
    margin-bottom: 2px;
}

.ep-discount-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

.ep-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 4px 10px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    flex-shrink: 0;
}

.ep-discount-badge > i {
    color: #fbbf24;
    font-size: 14px;
    animation: ep-bolt-flash-detail 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.ep-discount-badge > span {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    line-height: 1;
}

.ep-discount-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    min-width: 0;
}

.ep-discount-label {
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
}

.ep-discount-timer {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.02em;
    line-height: 1;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 4px 8px;
    margin-top: 2px;
    animation: ep-timer-blink-detail 1.2s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.ep-discount-timer i {
    font-size: 10px;
    color: #fbbf24;
    animation: ep-bolt-flash-detail 1.5s ease-in-out infinite;
}

/* --- Variant / Color Section --- */
.ep-variant-section {
    margin-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,.06);
    padding-top: 0.75rem;
}

.ep-variant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.ep-variant-header__left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ep-variant-header__icon {
    font-size: 0.9rem;
    color: var(--ep-primary, #FF7F00);
}

.ep-variant-header__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ep-text, #222);
    letter-spacing: -0.01em;
}

.ep-variant-header__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ep-primary, #FF7F00);
    background: rgba(255, 127, 0, 0.08);
    border-radius: 1rem;
    line-height: 1;
}

.ep-variant-header__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ep-primary, #FF7F00);
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

.ep-variant-header__link:hover {
    color: #e06600;
    gap: 0.4rem;
    text-decoration: none;
}

.ep-variant-header__link i {
    font-size: 0.55rem;
    transition: transform .2s ease;
}

.ep-variant-header__link:hover i {
    transform: translateX(2px);
}

#prodColorName {
    color: var(--ep-text, #222);
    font-size: 0.9rem;
}

#colorWrapper {
    overflow: visible;
}

.prod-variant-link {
    display: inline-block;
    border: 2px solid transparent;
    margin: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    transition: all .2s ease;
    position: relative;
}

.prod-variant-link:hover {
    text-decoration: none;
    border-color: rgba(0,0,0,.12);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

.prod-variant-link-selected {
    border-color: var(--ep-primary, #FF7F00) !important;
    box-shadow: 0 0 0 1px rgba(255, 127, 0, 0.15);
    border-radius: 0.5rem;
}

/* --- Color Swiper --- */
.ep-color-swiper-wrap {
    position: relative;
    padding: 0;
    overflow: hidden;
}

.ep-color-swiper {
    --swiper-theme-color: #FF7F00;
    --swiper-navigation-size: 14px;
    --swiper-navigation-color: #555;
}

.ep-color-slide {
    height: auto !important;
    box-sizing: border-box;
}

.ep-color-slide .prod-variant-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    text-decoration: none !important;
    padding: 3px;
}

.ep-color-slide .prod-variant-link img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 0.375rem;
}

.variant-color-name {
    display: block;
    width: 100%;
    padding: 4px 2px 2px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--ep-text, #444);
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-variant-link-selected .variant-color-name {
    color: var(--ep-primary, #FF7F00);
    font-weight: 700;
}

.ep-color-swiper::part(button-prev),
.ep-color-swiper::part(button-next) {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,.95);
    border-radius: 50%;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
    color: #555;
}

.ep-color-swiper::part(button-prev):hover,
.ep-color-swiper::part(button-next):hover {
    background: #FF7F00;
    color: #fff;
    box-shadow: 0 2px 10px rgba(255,127,0,.25);
}

.ep-color-swiper::part(bullet-active) {
    background: #FF7F00;
}

/* --- Seller Info --- */
.seller-wrapper {
    min-height: 40px;
    line-height: 40px;
    vertical-align: middle;
    padding: 0 0.5rem;
}

.seller-title {
    color: var(--ep-text-muted);
    padding-right: 8px;
    font-size: 0.9rem;
}

.seller-name {
    color: var(--ep-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

/* --- WhatsApp Button --- */
.prod-whatsapp-btn {
    font-size: 0.78rem !important;
    border-radius: var(--ep-radius-sm) !important;
    transition: var(--ep-transition);
    white-space: nowrap;
}

.prod-whatsapp-btn:hover {
    background: #25D366 !important;
    border-color: #25D366 !important;
    color: #fff !important;
}

/* --- Seller Link --- */
.prod-seller-link {
    font-size: 0.82rem;
    color: var(--ep-text-muted);
    font-weight: 600;
    transition: var(--ep-transition);
    white-space: nowrap;
}

.prod-seller-link:hover {
    color: var(--ep-primary);
    text-decoration: none;
}

/* --- Favorites Button --- */
.add-to-fav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border: 2px solid var(--ep-primary);
    border-radius: var(--ep-radius-md);
    color: var(--ep-primary);
    transition: var(--ep-transition);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    gap: 0.5rem;
    background: transparent;
    width: auto;
    max-width: 360px;
    margin: 0 auto;
}

.add-to-fav:hover {
    background: var(--ep-primary);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(255, 127, 0, 0.3);
    transform: translateY(-1px);
}

.add-to-fav i.fa-heart,
.add-to-fav i.fa-smile,
.add-to-fav i.fa-frown {
    font-size: 1.3rem !important;
    border: none !important;
    width: auto !important;
    padding: 0 !important;
}

.add-to-fav i span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 0.95rem !important;
    font-style: normal;
    font-weight: 600;
    width: auto !important;
    vertical-align: middle;
}

.my-fav-heart-selected {
    color: var(--ep-primary);
}

/* --- Step Component (ep-step) --- */
.ep-step {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.25rem 0 0.625rem;
}

.ep-step__num {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.ep-step__text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ep-text);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.ep-step--collapsible,
.ep-step--sf {
    cursor: default;
    user-select: none;
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.625rem;
    border: 1.5px solid #e0e0e0;
    justify-content: center;
}

.ep-step--collapsible:hover,
.ep-step--sf:hover {
    background: transparent;
    box-shadow: none;
    border-color: #ccc;
}
.ep-step--sf.ep-addprod-optional:hover {
    background: transparent;
    border-color: #e0e0e0;
}

.ep-step--sf.ep-addprod-optional[aria-expanded="true"] {
    margin-bottom: 0 !important;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ep-step--sf.ep-addprod-optional[aria-expanded="true"]:hover {
    background: transparent !important;
    border-color: #e0e0e0 !important;
    box-shadow: none !important;
}

.ep-step--collapsible:active,
.ep-step--sf:active {
    background: transparent;
    border-color: inherit;
}

.ep-step__chevron {
    margin-left: auto;
    color: var(--ep-text-muted, #999);
    font-size: 0.75rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease;
    flex-shrink: 0;
}

.ep-step--collapsible:hover .ep-step__chevron {
    display: none !important;
}

.ep-step--collapsible .ep-step__chevron {
    display: none !important;
}

.ep-step--collapsible[aria-expanded="false"] .ep-step__chevron {
    transform: rotate(-90deg);
}

.ep-step--sf .ep-step__chevron {
    display: inline-block;
}

.ep-step--sf[aria-expanded="false"] .ep-step__chevron {
    transform: rotate(-90deg);
}

.ep-step--sf[aria-expanded="true"]:has(+ .ep-panel-collapse) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.ep-step--sf[aria-expanded="true"] + .ep-panel-collapse {
    border: 1.5px solid #e0e0e0;
    border-top: none;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    margin-bottom: 0.625rem;
}

.ep-step--sf:has(+ .ep-cbopt-panel:not(.collapse)),
.ep-step--sf:has(+ .ep-cbopt-panel.collapse.show),
.ep-step--sf:has(+ .ep-cbopt-panel.collapsing),
.ep-step--sf:has(+ .ep-sf-panel:not(.collapse)),
.ep-step--sf:has(+ .ep-sf-panel.collapse.show),
.ep-step--sf:has(+ .ep-sf-panel.collapsing) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0 !important;
    border-bottom: none;
}

.ep-step--sf + .ep-cbopt-panel,
.ep-step--sf + .ep-sf-panel {
    border: 1.5px solid #e0e0e0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 0 1rem 12px;
    margin-bottom: 0.625rem;
}

/* ── Tek parça section wrapper (montaj yeri / montaj yöntemi) ── */
.ep-cbopt-section {
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    margin-bottom: 0.625rem;
    overflow: hidden;
}

/* İçindeki toggle kendi border/margin/radius'unu kaybeder */
.ep-cbopt-section .ep-step--sf {
    border: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* İçindeki panel de kendi border/radius'unu kaybeder */
.ep-cbopt-section .ep-cbopt-panel {
    border: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 1rem 12px !important;
}

/* ── Hata durumu ── */
.ep-cbopt-section--error {
    border-color: #dc3545 !important;
}

.ep-cbopt-section--error .ep-step--sf {
    background: rgba(220, 53, 69, 0.08) !important;
}

.ep-cbopt-section--error .ep-step__num {
    background: #dc3545 !important;
}

.ep-cbopt-section--error .ep-step__text {
    color: #dc3545;
}

.ep-cbopt-section--error .ep-cbopt-panel {
    background: rgba(220, 53, 69, 0.04) !important;
}

/* ── Bağımsız toggle+panel çifti için hata stili (ör: kumaş rengi cbOptToggle_X) ── */
.ep-step--sf-error {
    border-color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.08) !important;
}

.ep-step--sf-error .ep-step__num {
    background: #dc3545 !important;
}

.ep-step--sf-error .ep-step__text {
    color: #dc3545;
}

.ep-step--sf-error + .ep-panel-collapse,
.ep-step--sf-error + .ep-cbopt-panel {
    border-color: #dc3545 !important;
    background: rgba(220, 53, 69, 0.04) !important;
}


#tulPerdeModelToggle {
    justify-content: flex-start;
}

.ep-step__selection {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    color: #5f6b7a;
    white-space: nowrap;
    max-width: 58%;
    overflow: hidden;
}

.ep-step__selection-label {
    font-weight: 600;
}

.ep-step__selection-value {
    font-weight: 700;
    color: #2a5fa8;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ep-step__selection-change {
    color: #ff7f00;
    font-weight: 700;
    text-transform: lowercase;
}

.ep-panel-collapse {
    overflow: hidden;
    padding: 0.75rem;
    contain: layout style;
}

.ep-panel-collapse.ep-animating {
    will-change: max-height, opacity, transform;
}

.ep-step-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0 0.625rem;
    flex-wrap: wrap;
}

.ep-step-inline .ep-step--compact {
    padding: 0;
    flex-shrink: 0;
}

.ep-step-inline__control {
    flex: 1;
    min-width: 160px;
}

.ep-step__info-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #3b7dd8;
    background: #eef6ff;
    border: 1px solid #bdd8f5;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ep-step__info-btn:hover {
    background: #ddeeff;
    border-color: #7ab3eb;
    color: #2a5fa8;
    text-decoration: none;
}

.ep-step__info-btn i {
    font-size: 0.82rem;
    color: #5a9be6;
}

/* --- Kuşgözü Kapsül Swiper --- */
.ep-kapsul-swiper-wrap {
    position: relative;
    padding: 0 40px;
}

@media (max-width: 767.98px) {
    .ep-kapsul-swiper-wrap {
        padding: 0;
    }
}

.ep-kapsul-swiper-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ep-kapsul-swiper-btn:hover {
    border-color: var(--ep-primary, #FF7F00);
    box-shadow: 0 2px 10px rgba(255,127,0,0.18);
    color: var(--ep-primary, #FF7F00);
}

.ep-kapsul-swiper-btn svg {
    width: 16px;
    height: 16px;
}

.ep-kapsul-swiper-prev { left: 0; }
.ep-kapsul-swiper-next { right: 0; }

.ep-kapsul-swiper-btn.swiper-button-disabled {
    opacity: 0.3;
    pointer-events: none;
}

.ep-kapsul-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px !important;
    width: 100%;
    gap: 6px;
    border: 1.5px solid #e8e8e8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.ep-kapsul-card:hover {
    border-color: #ccc !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.btn-check:checked + .ep-kapsul-card {
    border-color: var(--ep-primary, #FF7F00) !important;
    box-shadow: 0 0 0 2px rgba(255, 127, 0, 0.15), 0 3px 10px rgba(255, 127, 0, 0.12);
    background: #fff !important;
    transform: translateY(-1px);
}

.btn-check:checked + .ep-kapsul-card small {
    color: var(--ep-primary-dark, #e06c00);
    font-weight: 700;
}

.ep-kapsul-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
}

.ep-kapsul-card small {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    color: #555;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* --- Info Offcanvas --- */
.ep-model-offcanvas {
    --bs-offcanvas-width: 33vw;
    width: 33vw !important;
    max-width: 33vw !important;
    z-index: 1080 !important;
    border-left: 1px solid #e9ecef;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
}

body:has(.ep-model-offcanvas.show) > .offcanvas-backdrop,
body:has(.ep-model-offcanvas.showing) > .offcanvas-backdrop {
    z-index: 1070 !important;
    background: rgba(33, 37, 41, 0.35) !important;
}

.ep-model-offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    border-bottom: 1px solid #ffe0b2;
    background: rgba(255, 127, 0, 0.1);
}

.ep-model-offcanvas__header .offcanvas-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #e06c00;
}

.ep-model-offcanvas__header .offcanvas-title i {
    color: #FF7F00;
}

.ep-model-offcanvas__action {
    margin-left: auto;
    min-width: 78px;
    border-radius: 999px;
    font-weight: 700;
    background: transparent !important;
    color: #FF7F00 !important;
    border: 1px solid #FF7F00 !important;
}

.ep-model-offcanvas__action:hover,
.ep-model-offcanvas__action:focus {
    background: #FF7F00 !important;
    color: #fff !important;
    border-color: #FF7F00 !important;
}

.ep-model-offcanvas .ep-radio-grid .ep-radio-btn {
    font-size: 1rem;
    padding: 0.65rem 1rem;
}

.ep-model-offcanvas .ep-model-card__name {
    font-size: 1rem;
    padding: 0.65rem 1rem;
}

.ep-model-offcanvas .ep-model-card__name--sm {
    font-size: 0.82rem;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .ep-model-offcanvas {
        --bs-offcanvas-width: 50vw;
        width: 50vw !important;
        max-width: 50vw !important;
    }
}

@media (max-width: 767.98px) {
    .ep-model-offcanvas {
        --bs-offcanvas-width: 100vw !important;
        --bs-offcanvas-height: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-left: none !important;
        border-right: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    .ep-model-offcanvas.showing,
    .ep-model-offcanvas.show:not(.hiding) {
        transform: translateY(0) !important;
    }

    .ep-model-offcanvas.hiding {
        transform: translateY(100%) !important;
    }

    .ep-model-offcanvas .offcanvas-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.ep-info-offcanvas {
    border-radius: 20px 20px 0 0 !important;
    height: 90vh !important;
    max-height: 90vh !important;
    z-index: 1060 !important;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
}

body:has(.ep-info-offcanvas.show) > .offcanvas-backdrop,
body:has(.ep-info-offcanvas.showing) > .offcanvas-backdrop {
    background: rgba(0, 0, 0, 0.15) !important;
    z-index: 1059 !important;
}

.ep-info-offcanvas__header {
    background: linear-gradient(135deg, #eef6ff 0%, #ddeeff 100%);
    border-bottom: 1px solid #bdd8f5;
    padding: 1rem 1.25rem;
}

.ep-info-offcanvas__header .offcanvas-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: #2a5fa8;
    margin: 0;
}

.ep-info-offcanvas__header .offcanvas-title i {
    color: #5a9be6;
    font-size: 1.1rem;
}

.ep-info-offcanvas__body {
    padding: 1.25rem;
}

.ep-info-offcanvas__card {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ep-info-offcanvas__item {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.ep-info-offcanvas__item:last-child {
    border-bottom: none;
}

.ep-info-offcanvas__item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ep-info-offcanvas__item-header i {
    color: var(--ep-primary, #FF7F00);
    font-size: 0.85rem;
}

.ep-info-offcanvas__item-header strong {
    font-size: 0.92rem;
    color: var(--ep-text, #333);
}

.ep-info-offcanvas__item p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
    padding-left: 24px;
    line-height: 1.5;
}

.ep-info-offcanvas__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0.875rem 1rem;
    margin-top: 0.5rem;
    background: #fff8ee;
    border: 1px solid #ffd89e;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #b45309;
    line-height: 1.5;
}

.ep-info-offcanvas__note i {
    color: #f59e0b;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* --- Info Collapse (desktop) --- */
.ep-info-collapse {
    border: 1px solid #e8f0fe;
    border-radius: 12px;
    background: #f8fbff;
    overflow: hidden;
}

.ep-info-collapse .ep-info-offcanvas__body {
    padding: 0.75rem 1rem;
}

.ep-info-collapse .ep-info-offcanvas__item {
    padding: 0.625rem 0.75rem;
}

.ep-info-collapse .ep-info-offcanvas__note {
    margin: 0.25rem 0 0;
}

/* --- Size Options Selects --- */
#sizeOptions .form-select {
    border: 2px solid var(--ep-border);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 2.25rem 0.75rem 0.875rem;
    transition: var(--ep-transition);
    color: var(--ep-text);
    background-color: var(--ep-bg-white);
    cursor: pointer;
    height: auto;
    appearance: none;
}

#sizeOptions .form-select:focus {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.12);
    outline: 0;
}

#sizeOptions .form-select option[value=""] {
    color: var(--ep-text-muted);
}

#sizeOptions table {
    width: 100%;
    table-layout: fixed;
}

#sizeOptions table td:first-child:not(:last-child) {
    width: 80px;
    vertical-align: middle;
}

#sizeOptions table td:last-child {
    width: 100%;
}

#sizeOptions table img.rounded-circle {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1;
}

#sizeOptions .form-control.myselect,
#sizeOptions select.optGeneralSelect {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

/* --- Radio Button Grid (ep-radio) --- */
.ep-radio-grid {
    margin-bottom: 0.5rem;
}

.ep-radio-grid .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.ep-radio-grid .ep-radio-btn {
    display: block;
    width: 100%;
    border: 2px solid var(--ep-border);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.5rem 0.75rem;
    color: var(--ep-text);
    background: var(--ep-bg-white);
    transition: var(--ep-transition);
    text-align: left;
    cursor: pointer;
    line-height: 1.5;
    user-select: none;
    white-space: nowrap;
}

.ep-radio-grid .btn-check + .ep-radio-btn:hover {
    border-color: var(--ep-primary);
    background: #fff8f0;
    color: var(--ep-primary-dark);
}

.ep-radio-grid .btn-check:checked + .ep-radio-btn {
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    border-color: var(--ep-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(255, 127, 0, 0.25);
}


.ep-radio-grid .btn-check:focus + .ep-radio-btn {
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.2);
}

.ep-radio-grid .ep-radio-btn:has(+ .ep-radio-img) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ep-radio-grid .ep-radio-img {
    margin-top: 0;
    padding: 0;
    border: 2px solid var(--ep-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.ep-radio-grid .ep-radio-img img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    display: block;
    border-radius: 0;
}

.ep-radio-grid .ep-radio-img a {
    cursor: zoom-in;
    display: block;
}

.ep-radio-grid .btn-check:checked + .ep-radio-btn + .ep-radio-img {
    border-color: var(--ep-primary);
}

.ep-radio-grid .btn-check + .ep-radio-btn:hover + .ep-radio-img {
    border-color: var(--ep-primary);
}

/* --- Model Card (label-wrap pattern like gs-card / ep-sf-radio-item) --- */
.ep-model-grid {
    margin-bottom: 0.5rem;
}

.ep-model-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    cursor: pointer;
    border: 2px solid var(--ep-border, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.ep-model-card:hover {
    border-color: #bbb;
    background: #fafafa;
}

.ep-model-card:has(input:checked) {
    border-color: var(--ep-primary, #FF7F00);
    background: rgba(255, 127, 0, .04);
    box-shadow: 0 0 0 3px rgba(255, 127, 0, .12);
}

.ep-model-card input {
    display: none;
}

.ep-model-card__name {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 6px;
    color: #212529;
    order: 1;
    transition: background .2s, color .2s;
}

.ep-model-card:has(input:checked) .ep-model-card__name {
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    color: #fff;
}

.ep-model-card__name--sm {
    font-size: 0.72rem;
}

.ep-model-card__img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top;
    display: block;
    border-top: 1px solid #f1f3f5;
    order: 2;
}

.ep-model-card__zoom {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 9px;
    cursor: pointer;
    color: #555;
    font-size: 17px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background .2s, color .2s, border-color .2s, transform .15s;
    z-index: 2;
}

.ep-model-card__zoom:hover {
    background: #fff;
    color: var(--ep-primary, #FF7F00);
    border-color: var(--ep-primary, #FF7F00);
    transform: scale(1.1);
}

.ep-model-card:has(input:checked) .ep-model-card__zoom {
    color: var(--ep-primary, #FF7F00);
    border-color: var(--ep-primary, #FF7F00);
}

/* --- Segment Group (pro radio selection) --- */
.ep-segment-group {
    display: flex;
    gap: 0.625rem;
}

.ep-segment-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ep-segment-input {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.ep-segment-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    flex: 1;
    padding: 0.75rem 0.65rem;
    border: 1.5px solid var(--ep-border);
    border-radius: 10px;
    background: var(--ep-bg-white);
    color: var(--ep-text);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    user-select: none;
}

.ep-segment-label:hover {
    border-color: var(--ep-primary);
    background: #fff8f0;
}

.ep-segment-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: #fff;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.ep-segment-check i {
    font-size: 0.55rem;
    color: transparent;
    transition: color 0.15s ease;
}

.ep-segment-text {
    display: block;
}

.ep-segment-input:checked + .ep-segment-label {
    border-color: var(--ep-primary);
    background: linear-gradient(135deg, #fff7ed, #fff1e0);
    box-shadow: 0 0 0 1px var(--ep-primary), 0 2px 8px rgba(255, 127, 0, 0.12);
}

.ep-segment-input:checked + .ep-segment-label .ep-segment-check {
    border-color: var(--ep-primary);
    background: var(--ep-primary);
}

.ep-segment-input:checked + .ep-segment-label .ep-segment-check i {
    color: #fff;
}

.ep-segment-input:focus + .ep-segment-label {
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.18);
}

.ep-segment-photo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--ep-text-muted);
    text-decoration: none;
    cursor: zoom-in;
    transition: color 0.2s;
    border-top: 1px solid var(--ep-border);
    width: 100%;
    justify-content: center;
    padding-top: 0.35rem;
}

.ep-segment-photo:hover {
    color: var(--ep-primary);
}

.ep-segment-photo i {
    font-size: 0.65rem;
}

/* --- Photo Swiper Overlay --- */
.ep-photo-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.ep-photo-overlay--active {
    opacity: 1;
    visibility: visible;
}

.ep-photo-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    flex-shrink: 0;
}

.ep-photo-overlay__title {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ep-photo-overlay__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.ep-photo-overlay__close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.ep-photo-overlay__body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem 1.5rem;
}

.ep-photo-overlay__slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 0.75rem;
}

.ep-photo-overlay__slide img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.ep-photo-overlay__caption {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    text-align: center;
}

.ep-photo-overlay swiper-container::part(button-prev),
.ep-photo-overlay swiper-container::part(button-next) {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.ep-photo-overlay swiper-container::part(bullet-active) {
    background: var(--ep-primary, #FF7F00);
}

/* Legacy ep-radio-photo (used elsewhere) */
.ep-radio-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--ep-primary);
    text-decoration: none;
    transition: color 0.2s;
    cursor: zoom-in;
}

.ep-radio-photo:hover {
    color: var(--ep-primary-dark);
    text-decoration: underline;
}

/* --- Collapsible Alert --- */
.ep-alert-collapse {
    padding: 0 !important;
    overflow: hidden;
}

.ep-alert-collapse__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.ep-alert-collapse__toggle:hover {
    background: rgba(0, 0, 0, 0.03);
    color: inherit;
    text-decoration: none;
}

.ep-alert-collapse__toggle .icon {
    flex-shrink: 0;
}

.ep-alert-collapse__title {
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.35;
}

.ep-alert-collapse__chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    transition: transform 0.3s;
    opacity: 0.6;
}

.ep-alert-collapse__toggle[aria-expanded="true"] .ep-alert-collapse__chevron {
    transform: rotate(180deg);
}

.ep-alert-collapse__body {
    padding: 0 1rem 0.75rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 0.75rem;
    margin-top: 0;
}

/* --- sizeOptions card pill radius --- */
#sizeOptions .card {
    border-radius: 999px;
    overflow: hidden;
}

#sizeOptions .card .card-header {
    border-radius: 999px;
}

/* --- Card Collapse Toggle --- */
.ep-card-collapse-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: inherit;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
}

.ep-card-collapse-toggle:hover {
    color: inherit;
    text-decoration: none;
}

.ep-card-collapse-toggle__chevron {
    font-size: 0.75rem;
    transition: transform 0.3s;
    opacity: 0.5;
}

.ep-card-collapse-toggle[aria-expanded="true"] .ep-card-collapse-toggle__chevron {
    transform: rotate(180deg);
}

/* Backward compat (old step-header) */
.step-header {
    font-size: 1.05rem;
    padding-top: 1.25rem;
    padding-bottom: 0.75rem;
    font-weight: 600;
    color: var(--ep-text);
}
.number-circle-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.number-circle {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.3);
}

/* --- Info Cards (replaces .panel) --- */
#prod-detail .panel,
#prod-detail .card {
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    margin-bottom: 1rem;
    box-shadow: none;
    background: var(--ep-bg-white);
}

#prod-detail .panel-default {
    border-color: var(--ep-border);
}

#prod-detail .panel-heading,
#prod-detail .card-header {
    background: var(--ep-bg-light);
    border-bottom: 1px solid var(--ep-border);
    padding: 0.875rem 1.25rem;
    border-radius: var(--ep-radius-sm) var(--ep-radius-sm) 0 0 !important;
}

#prod-detail .panel-heading h4,
#prod-detail .card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ep-text);
}

#prod-detail .panel-body,
#prod-detail .card-body {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--ep-text);
}

/* --- Read More Toggle (Base) --- */
.ep-read-more-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.55rem 1rem;
    background-color: var(--ep-bg-light);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    color: var(--ep-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--ep-transition);
    cursor: pointer;
}

.ep-read-more-toggle:hover {
    background-color: var(--ep-primary-light);
    border-color: var(--ep-primary);
    color: var(--ep-primary-dark);
    text-decoration: none;
}

.ep-read-more-toggle[aria-expanded="true"] {
    background-color: var(--ep-primary-light);
    border-color: var(--ep-primary);
    color: var(--ep-primary-dark);
}

.ep-read-more-toggle i {
    font-size: 0.9rem;
}

.ep-read-more-toggle .ep-collapse-icon {
    transition: transform 0.25s ease;
}

.ep-read-more-toggle[aria-expanded="true"] .ep-collapse-icon {
    transform: rotate(180deg);
}

/* --- Read More Toggle: Info Variant --- */
.ep-read-more-toggle--info {
    background-color: #eef6ff;
    border-color: #bdd8f5;
    color: #3b7dd8;
}

.ep-read-more-toggle--info:hover {
    background-color: #ddeeff;
    border-color: #7ab3eb;
    color: #2a5fa8;
}

.ep-read-more-toggle--info[aria-expanded="true"] {
    background-color: #ddeeff;
    border-color: #7ab3eb;
    color: #2a5fa8;
}

.ep-read-more-toggle--info i {
    color: #5a9be6;
}

/* --- Read More Toggle: Highlight Variant (Opsiyonel Seçenekler) --- */
.ep-read-more-toggle--highlight {
    position: relative;
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, #f3eeff 0%, #ece5ff 100%);
    border: 2px solid #7c3aed;
    border-radius: 10px;
    color: #5b21b6;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.7rem 1.25rem;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.15);
}

.ep-read-more-toggle--highlight::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 10px;
    padding: 2px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9, #a855f7);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ep-read-more-toggle--highlight:hover::before {
    opacity: 1;
}

.ep-read-more-toggle--highlight:hover {
    background: linear-gradient(135deg, #ece5ff, #ddd6fe);
    border-color: #6d28d9;
    color: #4c1d95;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25);
    transform: translateY(-1px);
    text-decoration: none;
}

.ep-read-more-toggle--highlight[aria-expanded="true"] {
    background: linear-gradient(135deg, #ddd6fe, #ece5ff);
    border-color: #6d28d9;
    color: #4c1d95;
    box-shadow: 0 2px 10px rgba(124, 58, 237, 0.18);
}

.ep-read-more-toggle--highlight .ep-highlight-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1;
    margin-left: 4px;
}

.ep-read-more-toggle--highlight i {
    color: #7c3aed;
    font-size: 1rem;
    transition: transform 0.25s ease;
}

.ep-read-more-toggle--highlight[aria-expanded="true"] i.ep-collapse-icon {
    transform: rotate(180deg);
}

@keyframes ep-subtle-glow {
    0%, 100% { box-shadow: 0 2px 10px rgba(124, 58, 237, 0.15); }
    50% { box-shadow: 0 2px 20px rgba(124, 58, 237, 0.35); }
}

.ep-read-more-toggle--highlight:not([aria-expanded="true"]) {
    animation: ep-subtle-glow 2.5s ease-in-out 3;
}

/* --- Opsiyonel Seçenekler Title Slider --- */
.ep-ops-slider {
    display: inline-block;
    position: relative;
    height: 1.3em;
    overflow: hidden;
    vertical-align: middle;
    min-width: 0;
    flex: 0 1 auto;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ep-ops-slider__track {
    display: block;
    position: relative;
    height: 100%;
}

.ep-ops-slider__item {
    display: block;
    white-space: nowrap;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.ep-ops-slider__item--active {
    transform: translateY(0);
    opacity: 1;
}

.ep-ops-slider__item--enter {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(100%);
    opacity: 0;
}

.ep-ops-slider__item--exit {
    transform: translateY(-100%);
    opacity: 0;
}

/* --- Addon Option Card (Opsiyonel Seçenekler) --- */
.ep-addon-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ep-addon-card {
    display: flex;
    gap: 12px;
    padding: 0.875rem 1rem;
    background: var(--ep-bg-white);
    border: 2px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    margin-bottom: 0.625rem;
    transition: var(--ep-transition);
    cursor: pointer;
    position: relative;
}

.ep-addon-card:hover {
    border-color: #c4b5fd;
    background: #faf8ff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.08);
}

.ep-addon-card--selected {
    border-color: #7c3aed;
    background: linear-gradient(135deg, #faf5ff 0%, #f3eeff 100%);
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.12);
}

.ep-addon-card--selected::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0.5rem;
    right: 0.625rem;
    color: #7c3aed;
    font-size: 1rem;
    opacity: 0.8;
}

.ep-addon-card__img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--ep-radius-sm);
    object-fit: cover;
    border: 1px solid var(--ep-border);
}

.ep-addon-card__body {
    flex: 1;
    min-width: 0;
}

.ep-addon-card__header {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 0.35rem;
}

.ep-addon-card__header input[type="radio"] {
    accent-color: #7c3aed;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}

.ep-addon-card__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ep-text);
    line-height: 1.35;
}

.ep-addon-card--selected .ep-addon-card__name {
    color: #5b21b6;
}

.ep-addon-card__price-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
    padding-left: 26px;
}

.ep-addon-card__price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ep-primary);
    line-height: 1;
}

.ep-addon-card__price sup {
    font-size: 0.65rem;
    font-weight: 700;
    vertical-align: super;
    position: relative;
    top: -0.15em;
}

.ep-addon-card__kdv {
    font-size: 0.7rem;
    color: var(--ep-text-light);
    font-weight: 500;
}

.ep-addon-card__unit-label {
    font-size: 0.7rem;
    color: var(--ep-text-muted);
    display: block;
    padding-left: 26px;
    margin-top: 2px;
}

.ep-addon-card__discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ep-addon-card__old-price {
    text-decoration: line-through;
    color: var(--ep-text-light);
    font-size: 0.82rem;
    font-weight: 500;
}

.ep-addon-card__free-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--ep-success), #059669);
    color: #fff;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 26px;
    margin-top: 0.25rem;
}

/* --- Quantity Counter (BS5 input-group) --- */
.ep-qty-counter {
    width: auto;
}

.ep-qty-counter .btn-outline-secondary {
    min-width: 40px;
    padding: 0 0.5rem;
    border-color: var(--ep-border);
    color: var(--ep-text);
}

.ep-qty-counter .btn-outline-secondary:hover {
    background-color: var(--ep-primary-light);
    border-color: var(--ep-primary);
    color: var(--ep-primary-dark);
}

.ep-qty-counter .ep-qty-input {
    width: 52px !important;
    min-width: 52px;
    max-width: 52px;
    font-weight: 700;
    font-size: 1rem;
    padding: 0;
    text-align: center;
    -moz-appearance: textfield;
}

.ep-qty-counter .ep-qty-input::-webkit-outer-spin-button,
.ep-qty-counter .ep-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ep-qty-counter .ep-qty-input:focus {
    box-shadow: none;
}

.ep-qty-counter .ep-qty-postfix {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ep-text-muted);
    padding: 0 0.75rem;
}

/* --- Field Error Highlight --- */
.ep-field-error {
    outline: 2px solid #dc3545 !important;
    outline-offset: -1px;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.2) !important;
    border-color: #dc3545 !important;
    transition: outline 0.3s ease, box-shadow 0.3s ease;
}

.ep-field-error.ep-field-error--fade {
    outline-color: transparent !important;
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0) !important;
}

/* --- Add to Cart Loading State --- */
#btnAddToCart.btn-loading {
    opacity: 0.85;
    pointer-events: none;
    position: relative;
}

#btnAddToCart .fa-spinner {
    font-size: 1rem;
}

#btnAddToCart .fa-check {
    font-size: 1rem;
}

/* --- Quantity Pill (cam-balkon style) --- */
.ep-qty-pill {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--ep-border, #e9ecef);
    border-radius: 999px;
    padding: 2px 4px;
    gap: 2px;
}

.ep-qty-pill__btn {
    padding: 6px 10px;
    border: none !important;
    background: transparent !important;
    color: #FF7F00 !important;
    cursor: pointer;
    border-radius: 50%;
    min-width: 36px;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.ep-qty-pill__btn:hover {
    background: transparent !important;
    color: #FF7F00 !important;
}

.ep-qty-pill__val {
    width: 32px !important;
    min-width: 32px;
    max-width: 40px;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    -moz-appearance: textfield;
    box-shadow: none !important;
    outline: none !important;
}

.ep-qty-pill__val::-webkit-outer-spin-button,
.ep-qty-pill__val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ep-qty-pill__val:focus {
    box-shadow: none !important;
    border: none !important;
}

/* ep-qty-postfix (FirsatUrunu select vb. dahil) */
.input-group .ep-qty-postfix {
    font-size: 0.82rem;
    font-weight: 600;
}

/* --- Form Controls --- */
#prod-detail input,
#prod-detail select {
    font-weight: 600;
}

#prod-detail .form-control,
#prod-detail .myselect {
    border-radius: 10px;
    border: 2px solid var(--ep-border);
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    transition: var(--ep-transition);
    height: auto;
}

#prod-detail .form-control:focus,
#prod-detail .myselect:focus {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.12);
}

#prod-detail .form-select.myselect {
    border-radius: 10px;
    border: 2px solid var(--ep-border);
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--ep-transition);
}

#prod-detail .form-select.myselect:focus {
    border-color: var(--ep-primary);
    box-shadow: 0 0 0 3px rgba(255, 127, 0, 0.12);
}

@media only screen and (max-width: 576px) {
    #prod-detail #enboyWrapper .form-select.myselect {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 380px) {
    #prod-detail #enboyWrapper .form-select.myselect {
        font-size: 0.75rem;
    }
}

#enboyWrapper {
    margin-bottom: 1.25rem;
    overflow: visible;
    padding-bottom: 0.25rem;
}

@media only screen and (max-width: 1024px) {
    #enboyWrapper {
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 768px) {
    #enboyWrapper {
        margin-bottom: 0.875rem;
    }
}

@media only screen and (max-width: 576px) {
    #enboyWrapper {
        margin-bottom: 0.75rem;
    }
}

@media only screen and (max-width: 380px) {
    #enboyWrapper {
        margin-bottom: 0.5rem;
    }
}

/* --- Funky Radio Buttons (legacy) --- */
#prod-detail .funkyradio {
    margin-bottom: 0.5rem;
}

#prod-detail .funkyradio label {
    border-radius: var(--ep-radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
}

/* --- Tabs --- */
#prod-detail .nav-tabs {
    border-bottom: 2px solid var(--ep-border);
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 0;
}

#prod-detail .nav-tabs .nav-item {
    margin-bottom: -2px;
}

#prod-detail .nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--ep-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.875rem 1.25rem;
    transition: var(--ep-transition);
    border-radius: 0;
    background: transparent;
}

#prod-detail .nav-tabs .nav-link:hover {
    color: var(--ep-primary);
    border-bottom-color: rgba(255, 127, 0, 0.3);
    background: transparent;
}

#prod-detail .nav-tabs .nav-link.active,
#prod-detail .nav-tabs .nav-item.active .nav-link,
#prod-detail .nav-tabs li.active a {
    color: var(--ep-primary) !important;
    border-bottom: 3px solid var(--ep-primary) !important;
    background: transparent !important;
    font-weight: 700;
}

#prod-detail .tab-content {
    padding: 1.25rem 0;
    margin-bottom: 1.5rem;
}

#prod-detail .tab-pane {
    padding-top: 0.5rem;
}

#myTabContent {
    margin-bottom: 1.5rem;
}

#myTabContent .tab-pane {
    overflow: hidden;
}

/* --- Tab Content Styling --- */
.prod-sub-title {
    background-color: transparent;
    padding: 0 0 0.75rem 0;
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ep-text);
    border-bottom: 2px solid var(--ep-border);
}

.tab-prods-header {
    font-weight: 700;
    background-color: var(--ep-bg-light);
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: var(--ep-radius-sm);
}

#taksit-bilgileri {
    width: 100%;
    border-radius: var(--ep-radius-sm);
    margin-top: 0.75rem;
}

/* --- Calculated Price --- */
#calculated-price-wrapper {
    background: linear-gradient(135deg, #fffaf5 0%, #fff 100%);
    border: 2px solid var(--ep-primary);
    border-radius: var(--ep-radius-md);
    padding: 0.6rem 1rem;
    margin-top: 0.75rem;
    position: relative;
}

#calculated-price-wrapper.has-discount {
    border-color: #16a34a;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.ep-price-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.3rem;
}

.ep-price-box__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ep-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.ep-price-box__label i {
    font-size: 0.76rem;
    color: var(--ep-primary);
}

#calculated-price-wrapper.has-discount .ep-price-box__label i {
    color: #16a34a;
}

.ep-price-box__price-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ep-price-box__discount {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ep-price-box__old-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: #94a3b8;
    text-decoration: line-through;
}

.ep-price-box__discount-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    background: #16a34a;
    padding: 2px 7px;
    border-radius: 100px;
    letter-spacing: 0.02em;
}

.ep-price-box__value {
    margin-top: 0.25rem;
}

#calculated-price-wrapper .calcTotalPrice {
    font-size: 1.5rem !important;
}

.ep-price-box__savings {
    padding: 2px 8px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #15803d;
    white-space: nowrap;
}

.ep-price-box__savings i {
    font-size: 0.76rem;
    color: #16a34a;
}

#calculated-price-wrapper legend {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ep-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: none;
    width: auto;
    padding: 0 0.75rem;
    background: var(--ep-bg-white);
}

#calcTotalPrice,
#calcEbat {
    font-weight: 800;
    font-size: 2rem;
    display: inline-block;
    text-align: center;
    color: var(--ep-primary);
    letter-spacing: -0.02em;
}

#calculated-price-wrapper.has-discount #calcTotalPrice {
    color: #16a34a;
}

/* --- Action Buttons --- */
#btnAddToCart {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    border: none;
    color: #fff !important;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0.75rem 1rem;
    border-radius: var(--ep-radius-md);
    transition: var(--ep-transition);
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.3);
    text-transform: none;
    letter-spacing: 0.01em;
}

#btnAddToCart:hover {
    background: linear-gradient(135deg, #15803d, #166534) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(22, 163, 74, 0.4);
    color: #fff !important;
}

#btnAddToCart:active,
#btnAddToCart:focus {
    background: linear-gradient(135deg, #166534, #14532d) !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
    color: #fff !important;
}

#toggleSizeOptions {
    background: linear-gradient(135deg, var(--ep-success), #059669) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.875rem 2rem !important;
    border-radius: var(--ep-radius-md) !important;
    transition: var(--ep-transition) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3) !important;
}

#toggleSizeOptions:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(16, 185, 129, 0.4) !important;
}

/* --- Prod Helper Links --- */
.prod-helper-link {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.prod-helper-link a {
    font-size: 0.85rem;
    color: var(--ep-text-muted);
    font-weight: 600;
    display: inline-block;
    transition: var(--ep-transition);
}

.prod-helper-link a:hover {
    color: var(--ep-primary);
}

/* --- Prod Detail Box (Order Note, Add to Cart area) --- */
.prod-detail-box {
    padding: 0.75rem 0;
}

.prod-detail-box.ep-disabled-box {
    opacity: 0.45;
    pointer-events: none;
    user-select: none;
}

/* --- Cam Balkon Ölçü Ekle Butonu --- */
.cam-balkon-add-btn-col {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.cam-balkon-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.2rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ep-text-muted);
    background: #f8f9fa;
    border: 1px dashed #ced4da;
    border-radius: 999px;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.cam-balkon-add-btn:hover,
.cam-balkon-add-btn:focus {
    color: var(--ep-primary);
    background: #fff7ed;
    border-color: var(--ep-primary);
    border-style: dashed;
}

.cam-balkon-add-btn:active {
    transform: scale(0.99);
}

.cam-balkon-add-btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.6rem;
    color: #fff;
    background: var(--ep-primary);
    border-radius: 50%;
    transition: transform 0.15s;
}

.cam-balkon-add-btn:hover .cam-balkon-add-btn__icon {
    transform: rotate(90deg);
}

.cam-balkon-add-btn__text {
    letter-spacing: 0.01em;
}

/* --- Discount Section --- */
.discount-percent-box,
#discount-percent-box {
    background: linear-gradient(135deg, var(--ep-danger), #dc2626);
    color: #fff;
    float: left;
    padding: 0.5rem 0.75rem;
    font-weight: 700;
    height: auto;
    font-size: 1.1rem;
    border-radius: var(--ep-radius-sm);
}

#discount-percent-box span {
    display: block;
}

#campaign {
    overflow: hidden;
    text-align: center;
    padding: 0.5rem;
}

#campaign-price-wrapper {
    height: auto;
    float: left;
    padding-left: 0.5rem;
}

#campaign-price-wrapper span {
    display: block;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
}

#campaign-price-wrapper span:nth-child(1) {
    font-size: 1.1rem;
    color: var(--ep-text-light);
    text-decoration: line-through;
    float: left;
}

#campaign-price-wrapper span:nth-child(2) {
    font-size: 1rem;
    color: var(--ep-text-light);
    float: left;
}

#campaign-price-wrapper span:nth-child(3) {
    font-size: 2rem;
    color: var(--ep-text);
    font-weight: 800;
    letter-spacing: -1px;
}

/* --- Baloon Price Section --- */
.detail-baloon-price-header {
    display: block;
    height: 55px;
    font-weight: bold;
}

.detail-baloon-price-rate-row-top {
    color: white;
    height: 45px;
    width: 50px;
    display: inline-block;
    padding: 4px;
    text-align: center;
    background: linear-gradient(135deg, var(--ep-danger), #dc2626);
    border-radius: 6px 6px 0 0;
    position: relative;
    top: -14px;
}

.detail-baloon-price-rate-row-bottom {
    color: var(--ep-success);
    height: 45px;
    width: 50px;
    display: inline-block;
    padding: 4px;
    text-align: center;
    background-color: var(--ep-success);
    border-radius: 0 0 6px 6px;
    position: absolute;
    top: 55px;
}

.detail-baloon-price-rate-top {
    text-align: center;
    vertical-align: top;
    font-size: 14px;
    position: relative;
    top: 0;
}

.detail-baloon-price-rate-bottom {
    text-align: center;
    vertical-align: top;
    font-size: 14px;
    position: relative;
    top: 0;
    z-index: 9;
}

.detail-baloon-price-rate-text-top {
    text-align: center;
    vertical-align: bottom;
    font-size: 10px;
    position: relative;
    top: -5px;
}

.detail-baloon-price-rate-text-bottom {
    text-align: center;
    vertical-align: bottom;
    font-size: 9px;
    position: relative;
    top: 1px;
    z-index: 9;
}

.detail-baloon-price-space {
    display: inline-block;
    width: 3px;
}

.detail-baloon-price-row {
    display: inline-block;
    vertical-align: text-bottom;
    color: var(--ep-primary);
    font-size: 20px;
}

.detail-baloon-price-row-first-price {
    color: var(--ep-primary);
    text-decoration: line-through;
    display: block;
}

.detail-baloon-price-row-last-price {
    color: var(--ep-primary);
    display: block;
}

.detail-baloon-price-header-green {
    display: block;
    height: 55px;
    font-weight: bold;
}

.detail-baloon-price-footer {
    background-color: var(--ep-bg-light);
    display: block;
    padding: 0.5rem 1rem;
    font-weight: bold;
    min-height: 53px;
    border-radius: var(--ep-radius-sm);
}

.baloon-green-text {
    color: var(--ep-success);
    display: block;
    text-align: left;
    line-height: 18px;
    margin-bottom: 5px;
    font-weight: 700;
}

.detail-baloon-price-value {
    display: block;
    font-size: 20px;
    line-height: 18px;
    text-align: center;
    color: var(--ep-text);
}

.detail-baloon-price-bottom-value {
    display: inline-block;
    font-size: 22px;
    line-height: 45px;
    text-align: center;
    color: var(--ep-text);
    left: 55px;
    position: relative;
}

.detail-baloon-price-bottom-value-kdv {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
    color: var(--ep-text);
}

.detail-baloon-price-area {
    background-color: var(--ep-bg-light);
    display: inline-block;
    padding: 0.75rem;
    border-radius: var(--ep-radius-sm);
    max-height: 109px;
    min-height: 55px;
}

/* --- Comments Section --- */
#yorumlar {
    border-radius: var(--ep-radius-md) !important;
    overflow: hidden;
}

#yorumlar .panel-heading,
#yorumlar .card-header {
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark)) !important;
    color: white !important;
    border-radius: var(--ep-radius-md) var(--ep-radius-md) 0 0 !important;
}

#yorumlar .panel-heading h4,
#yorumlar .card-header h4 {
    color: white !important;
}

/* --- Related Products --- relocated to prod-detail-tab.css as .ep-rel-prods --- */

/* --- Alert Styles --- */
#prod-detail .alert {
    border-radius: var(--ep-radius-sm);
    border: none;
    font-size: 0.9rem;
}

#prod-detail .alert-success {
    background: #ecfdf5;
    color: #065f46;
    border-left: 4px solid var(--ep-success);
}

#prod-detail .alert-danger {
    background: #fef2f2;
    color: #991b1b;
    border-left: 4px solid var(--ep-danger);
}

#prod-detail .alert-info {
    background: #eff6ff;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
}

/* --- International Shipping Banner --- */
.international-free-cargo {
    color: var(--ep-success);
    font-weight: 600;
}

/* --- Pagination --- */
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 0.5rem 0.875rem;
    margin-left: -1px;
    line-height: 1.5;
    color: var(--ep-primary);
    text-decoration: none;
    background-color: #fff;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    margin: 0 2px;
    transition: var(--ep-transition);
}

.pagination > li > a:hover {
    background: var(--ep-primary-light);
    border-color: var(--ep-primary);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 3;
    color: #fff;
    cursor: default;
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    border-color: var(--ep-primary);
}

/* --- Misc --- */
#prod-detail .list-inline > li {
    padding-right: 2px;
    padding-left: 2px;
}

#prod-detail .right-pane {
    position: static;
}

#prod-detail .prod-info .calculated-price {
    font-size: 1.25rem;
}

#prod-detail .big-price-text {
    font-size: 1.1rem;
}

#prod-detail .big-price span {
    font-size: 1.25rem;
}

#prod-detail .big-price .curr-symbol {
    font-size: 1rem;
}

#prod-detail .select-color-header {
    color: var(--ep-text);
    font-weight: 700;
    font-size: 0.9rem;
}

.bootstrap-touchspin .form-control {
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    height: 37px;
}

#addToCart {
    float: right;
}

.bootstrap-touchspin {
    width: 100%;
    float: left;
}

.add-information {
    background-color: var(--ep-bg-light);
    padding: 0.75rem;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
}

fieldset {
    border: 2px solid var(--ep-primary);
    padding: 0 1.25rem 1.25rem 1.25rem;
    margin: 0 0 1.5rem 0;
    text-align: center;
    border-radius: var(--ep-radius-md);
    background: linear-gradient(135deg, var(--ep-primary-light), #fff);
}

legend {
    font-size: 0.85rem;
    font-weight: 600;
    border: 0;
    width: auto;
    text-align: center;
    padding: 0 0.75rem;
    color: var(--ep-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.prod-detail-badges {
    border: 1px solid var(--ep-border);
    padding: 0.5rem;
    border-radius: var(--ep-radius-sm);
}

#prod-detail .prod-code {
    font-size: 0.85rem;
}

.selected-prod-acc {
    border: 2px solid var(--ep-text);
    border-radius: var(--ep-radius-sm);
}

#prod-detail .selected-prod-accessory .cancelButton {
    position: absolute;
    left: -12px;
    top: -12px;
}

#prod-detail .prodAccPicContainer {
    width: 95px;
    height: 80px;
    overflow: hidden;
    padding-top: 2px;
}

#prod-detail .prodAccPicContainer .prodAccPic {
    width: 95px;
}

#divProdAccessory {
    margin: 0 auto;
}

#divProdAccessoryProdList {
    margin: 0 auto !important;
}

.right-pane table tr td {
    padding: 0.5rem;
}

#firsat-urunu-content {
    border: none;
}

/* --- Star Rating (glyphicon replacement) --- */
.mainDetailStar .star {
    color: var(--ep-primary) !important;
    display: inline-block;
    margin: 0 1px;
    text-align: center;
    font-size: 1.25rem;
}

/* Seller-only stars (no product reviews, gray stars) */
.mainDetailStar--seller .star {
    color: var(--ep-text-light) !important;
    font-size: 1.1rem;
}

/* ============================================
   Fullscreen Swiper Gallery Overlay
   ============================================ */
#fsGalleryOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.96);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
#fsGalleryOverlay.fs-open {
    display: flex;
}
#fsGalleryOverlay swiper-container {
    display: block;
    width: 100%;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}
.fs-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    z-index: 2;
    flex-shrink: 0;
}
.fs-gallery-counter {
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
}
.fs-gallery-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    padding: 4px 10px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity .2s;
}
.fs-gallery-close:hover,
.fs-gallery-close:focus {
    opacity: 1;
}

/* ============================================
   Mobile Product Image Slider
   ============================================ */

/* Mobil galeri masaüstünde gizli */
.mobile-prod-gallery {
    display: none;
}

/* Masaüstü galeri mobilde gizli */
@media only screen and (max-width: 768px) {
    .desktop-prod-gallery {
        display: none !important;
    }

    .mobile-prod-gallery {
        display: block;
        padding: 0 !important;
        margin: 0 !important;
        margin-bottom: 0.75rem !important;
    }
}

/* --- Slider Container --- */
.mobile-slider-container {
    position: relative;
    background: var(--ep-bg-white);
}

/* --- Slider Track (scroll-snap) --- */
.mobile-slider-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pinch-zoom;
    border-radius: var(--ep-radius-md);
}

.mobile-slider-track::-webkit-scrollbar {
    display: none;
}

/* --- Individual Slide --- */
.mobile-slide {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
}

.mobile-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    max-height: 70vh;
    background: #fafafa;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

/* --- Swiper Slide Image --- */
.mobile-slider-container swiper-slide {
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fafafa;
}

.mobile-slider-container swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

.mobile-slider-container swiper-container {
    width: 100%;
    border-radius: 0;
}

/* --- Slider Counter Badge --- */
.mobile-slider-counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: rgba(255, 255, 255, 0.7);
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
    z-index: 5;
    letter-spacing: 0.02em;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mobile-slider-counter i {
    font-size: 0.7rem;
}

/* --- Slider Dots --- */
.mobile-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    background: linear-gradient(to top, rgba(0,0,0,0.15) 0%, transparent 100%);
}

.mobile-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    display: inline-block;
}

.mobile-dot.active {
    background: #fff;
    width: 20px;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* --- Mobile Video Button --- */
.mobile-video-btn {
    position: absolute;
    background: linear-gradient(to right, #ffa500, #ffa200);
    padding: 0.65rem 1rem;
    bottom: 3rem;
    right: 0;
    z-index: 6;
    border-top-left-radius: 99px;
    border-bottom-left-radius: 99px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.3);
}

/* --- Mobile Gallery Badges --- */
.mobile-prod-gallery .iade-garantisi {
    position: absolute;
    right: 0;
    font-size: 0.72rem;
    padding: 4px 10px;
    z-index: 6;
}

.mobile-prod-gallery .sponsorlu {
    position: absolute;
    bottom: 3rem;
    right: 12px;
    font-size: 0.68rem;
    padding: 3px 8px;
    z-index: 6;
}

.mobile-prod-gallery .storDahil {
    position: absolute;
    top: 45px;
    left: 8px;
    font-size: 0.72rem;
    padding: 3px 8px;
    z-index: 6;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* --- Tablet (max 1024px) --- */
@media only screen and (max-width: 1024px) {
    /* Breadcrumb - Tablet */
    #prod-detail .breadcrumb {
        padding: 0.6rem 0.875rem;
        font-size: 0.8rem;
        margin-bottom: 1rem;
        gap: 0;
    }

    #prod-detail .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
    #prod-detail .breadcrumb li + li::before {
        margin: 0 0.4rem;
        font-size: 0.5rem;
    }

    #prod-detail .breadcrumb li.active a.btn-warning {
        font-size: 0.75rem;
        padding: 3px 12px;
        max-width: 300px;
    }

    #prod-detail .well,
    #prod-detail .prod-detail-card {
        padding: 1rem !important;
    }

    .prod-detail-image {
        width: 100% !important;
    }

    .extra-option .ext-opt-img {
        width: 120px !important;
    }

    .extra-option .well,
    .extra-option .prod-detail-card {
        width: 100% !important;
    }

    #prodName {
        font-size: 1.3rem;
    }

    #price {
        font-size: 1.6rem;
    }

    #calcTotalPrice,
    #calcEbat {
        font-size: 1.6rem;
    }

    .prod-thumb {
        width: 60px;
        height: 60px;
    }

    /* ep-radio-grid: tablet ekranlarda karakter küçült */
    .ep-radio-grid .ep-radio-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.65rem;
    }
}

/* --- Mobile Landscape & Small Tablet (max 768px) --- */
@media only screen and (max-width: 768px) {
    /* Breadcrumb - Mobile Landscape / Small Tablet */
    #prod-detail .breadcrumb {
        padding: 0.5rem 0.75rem;
        font-size: 0.78rem;
        margin-bottom: 0.875rem;
        border-radius: 6px;
        gap: 0;
        scroll-padding-inline-start: 0.5rem;
    }

    #prod-detail .breadcrumb li,
    #prod-detail .breadcrumb .breadcrumb-item {
        font-size: 0.78rem;
    }

    #prod-detail .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
    #prod-detail .breadcrumb li + li::before {
        margin: 0 0.35rem;
        font-size: 0.45rem;
    }

    /* Home item - sadece ikon göster */
    #prod-detail .breadcrumb li:first-child a span,
    #prod-detail .breadcrumb .breadcrumb-item:first-child a {
        font-size: 0.78rem;
    }

    #prod-detail .breadcrumb li.active a.btn-warning {
        font-size: 0.7rem;
        padding: 3px 10px;
        max-width: 220px;
        border-radius: 16px;
    }

    /* Son eleman aktif ürün adını truncate et */
    #prod-detail .breadcrumb .breadcrumb-item.active a,
    #prod-detail .breadcrumb li.active a:not(.btn-warning) {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /* Scroll fade effect */
    #prod-detail nav[aria-label="breadcrumb"]::after {
        width: 30px;
    }

    #prod-detail .well,
    #prod-detail .prod-detail-card {
        padding: 0.75rem !important;
        border-radius: var(--ep-radius-md) !important;
    }

    #prod-detail .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    #prod-detail .nav-tabs .nav-link {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .seller-wrapper {
        line-height: 1.4;
        height: auto;
        padding: 0.25rem 0;
    }

    .add-to-fav {
        max-width: 100%;
        padding: 0.625rem 1.25rem;
    }

    #btnAddToCart {
        width: 100%;
        padding: 0.875rem 0.75rem;
    }

    .step-header {
        font-size: 0.95rem;
    }

    .number-circle {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .ep-step__num,
    .eks-step__badge {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.85rem;
    }

    .ep-step__text,
    .eks-step__name {
        font-size: 0.95rem;
    }

    .ep-step--collapsible,
    .ep-step--sf {
        margin: 0 0 0.625rem 0;
        width: 100%;
    }

    .ep-step--sf[aria-expanded="true"] + .ep-panel-collapse {
        margin: 0 0 0.625rem 0;
        width: 100%;
    }

    .ep-step--sf:has(+ .ep-cbopt-panel:not(.collapse)),
    .ep-step--sf:has(+ .ep-cbopt-panel.collapse.show),
    .ep-step--sf:has(+ .ep-cbopt-panel.collapsing),
    .ep-step--sf:has(+ .ep-sf-panel:not(.collapse)),
    .ep-step--sf:has(+ .ep-sf-panel.collapse.show),
    .ep-step--sf:has(+ .ep-sf-panel.collapsing),
    .ep-step--sf.ep-addprod-optional[aria-expanded="true"] {
        margin-bottom: 0 !important;
    }

    .ep-step--sf + .ep-cbopt-panel,
    .ep-step--sf + .ep-sf-panel {
        margin: 0 0 0.625rem 0;
        width: 100%;
    }

    #sizeOptions .form-select {
        font-size: 0.9rem;
        padding: 0.625rem 2rem 0.625rem 0.75rem;
    }

    .ep-radio-grid .ep-radio-btn {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    /* Gallery responsive */
    .prod-gallery-col {
        position: relative !important;
        top: auto !important;
    }

    .prod-main-image-wrapper {
        border-radius: var(--ep-radius-sm);
    }

    .prod-main-image-wrapper .prod-detail-image {
        border-radius: var(--ep-radius-sm);
    }

    /* Zoom hint her zaman görünür (mobilde hover yok) */
    .prod-image-zoom-hint {
        opacity: 0.8;
        transform: translateY(0);
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .prod-thumb {
        width: 56px;
        height: 56px;
    }

    .prod-thumbs-wrapper {
        margin-top: 8px;
    }

    /* Rozetler responsive */
    .iade-garantisi {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    .sponsorlu {
        font-size: 0.65rem;
        padding: 3px 8px;
    }

    .storDahil {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    /* Ürün bilgi alanı */
    #prod-detail-inside-right {
        padding-left: 0 !important;
        padding-top: 1rem;
    }

    /* Fiyat alanı responsive */
    .price-color-header div {
        font-size: 0.8rem;
    }

    #price {
        font-size: 1.5rem;
    }

    /* Baloon fiyat responsive */
    .detail-baloon-price-area {
        max-width: 100%;
        width: 100%;
    }

    .detail-baloon-price-row {
        font-size: 16px;
    }

    /* Renk seçenekleri responsive */
    .ep-color-grid {
        gap: 6px;
    }

    /* Ek seçenekler responsive */
    .funkyradio label {
        font-size: 0.85rem !important;
    }

    /* Tab içerik responsive */
    .prod-sub-title {
        font-size: 1rem;
    }

    #myTabContent .tab-pane {
        padding: 0.5rem 0;
    }
}

/* --- Mobile Portrait (max 576px) --- */
@media only screen and (max-width: 576px) {
    #prod-detail .well,
    #prod-detail .prod-detail-card {
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: var(--ep-radius-sm) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    }

    #prodName {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    #prodCode {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }

    #price {
        font-size: 1.35rem;
    }

    #calcTotalPrice,
    #calcEbat {
        font-size: 1.35rem;
    }

    .calcTotalPrice {
        font-size: 1.35rem !important;
    }

    .calcOldPrice {
        font-size: 0.95rem;
    }

    /* Galeri mobil optimizasyon */
    .prod-gallery {
        border-radius: var(--ep-radius-sm);
    }

    .prod-main-image-wrapper {
        border-radius: var(--ep-radius-sm);
    }

    .prod-main-image-wrapper .prod-detail-image {
        border-radius: var(--ep-radius-sm);
    }

    .prod-thumb {
        width: 48px;
        height: 48px;
        border-radius: 6px;
    }

    .prod-thumbs-nav {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .prod-image-counter {
        font-size: 0.7rem;
        padding: 3px 9px;
    }

    /* Sepete Ekle butonu tam genişlik */
    #btnAddToCart {
        font-size: 0.95rem;
        padding: 0.75rem 0.625rem;
    }

    #toggleSizeOptions {
        font-size: 0.85rem !important;
        padding: 0.75rem 1rem !important;
        width: 100%;
    }

    /* Step numaraları küçült */
    .number-circle {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .step-header {
        font-size: 0.88rem;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    .ep-step {
        gap: 0.625rem;
        padding: 1rem 0 0.375rem;
    }

    .ep-step--collapsible,
    .ep-step--sf {
        padding: 0.75rem 1rem;
        margin-bottom: 0.625rem;
    }

    .ep-step__num,
    .eks-step__badge {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 0.8rem;
    }

    .ep-step__text,
    .eks-step__name {
        font-size: 0.88rem;
    }

    #sizeOptions .form-select {
        font-size: 0.88rem;
        padding: 0.5rem 1.75rem 0.5rem 0.625rem;
    }

    .ep-radio-grid .ep-radio-btn {
        font-size: 0.72rem;
        padding: 0.4rem 0.5rem;
    }

    .ep-segment-group {
        gap: 0.4rem;
    }

    .ep-segment-label {
        padding: 0.55rem 0.5rem;
        font-size: 0.72rem;
        gap: 0.35rem;
        border-radius: 8px;
    }

    .ep-segment-check {
        width: 15px;
        height: 15px;
    }

    .ep-segment-check i {
        font-size: 0.45rem;
    }

    .ep-segment-photo {
        font-size: 0.62rem;
    }

    /* Favoriye ekle butonu */
    .add-to-fav {
        padding: 0.5rem 1rem;
        font-size: 0.88rem;
    }

    /* Alert'ler */
    #prod-detail .alert {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
    }

    /* İndirim paneli */
    #discountWrapperProdItemNew,
    #discountWrapperProdDetail {
        font-size: 14px !important;
    }

    /* Breadcrumb - Mobile Portrait */
    #prod-detail .breadcrumb {
        font-size: 0.72rem;
        padding: 0.4rem 0.625rem;
        margin-bottom: 0.625rem;
        border-radius: 6px;
        gap: 0;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    #prod-detail .breadcrumb li,
    #prod-detail .breadcrumb .breadcrumb-item {
        font-size: 0.72rem;
    }

    #prod-detail .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
    #prod-detail .breadcrumb li + li::before {
        margin: 0 0.25rem;
        font-size: 0.4rem;
    }

    #prod-detail .breadcrumb li.active a.btn-warning {
        font-size: 0.65rem;
        padding: 2px 8px;
        max-width: 160px;
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(255, 127, 0, 0.25);
    }

    /* Aktif ürün adı truncate - mobilde daha kısa */
    #prod-detail .breadcrumb .breadcrumb-item.active a,
    #prod-detail .breadcrumb li.active a:not(.btn-warning) {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        font-size: 0.72rem;
    }

    /* Orta kategori itemlerini de truncate et */
    #prod-detail .breadcrumb .breadcrumb-item:not(:first-child):not(.active) a,
    #prod-detail .breadcrumb li:not(:first-child):not(.active):not(:last-child) a {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }

    /* Scroll fade */
    #prod-detail nav[aria-label="breadcrumb"]::after {
        width: 24px;
    }

    /* Sipariş notu */
    .prod-detail-box textarea {
        font-size: 0.85rem;
    }

    /* Mağaza bilgi kartı */
    .seller-title {
        font-size: 0.82rem;
    }

    .seller-name {
        font-size: 0.88rem;
    }

    /* Panel/card kompakt */
    #prod-detail .panel-body,
    #prod-detail .card-body {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    #prod-detail .panel-heading,
    #prod-detail .card-header {
        padding: 0.625rem 0.75rem;
    }

    /* Calculated price responsive */
    #calculated-price-wrapper {
        padding: 0.75rem;
        margin-top: 0.75rem;
    }

    #calculated-price-wrapper legend {
        font-size: 0.78rem;
    }
}

/* --- Very Small Screens (max 380px) --- */
@media only screen and (max-width: 380px) {
    /* Breadcrumb - Very Small Mobile */
    #prod-detail .breadcrumb {
        font-size: 0.65rem;
        padding: 0.35rem 0.5rem;
        margin-bottom: 0.5rem;
        border-radius: 5px;
    }

    #prod-detail .breadcrumb li,
    #prod-detail .breadcrumb .breadcrumb-item {
        font-size: 0.65rem;
    }

    #prod-detail .breadcrumb .breadcrumb-item + .breadcrumb-item::before,
    #prod-detail .breadcrumb li + li::before {
        margin: 0 0.2rem;
        font-size: 0.35rem;
    }

    /* Ana Sayfa ikonunu küçült */
    #prod-detail .breadcrumb li:first-child a i,
    #prod-detail .breadcrumb .breadcrumb-item:first-child a i {
        font-size: 0.65rem;
    }

    #prod-detail .breadcrumb li.active a.btn-warning {
        font-size: 0.6rem;
        padding: 2px 6px;
        max-width: 120px;
        border-radius: 12px;
    }

    /* Aktif ürün adı - çok kısa truncate */
    #prod-detail .breadcrumb .breadcrumb-item.active a,
    #prod-detail .breadcrumb li.active a:not(.btn-warning) {
        max-width: 100px;
        font-size: 0.65rem;
    }

    /* Orta kategori linkleri - çok kısa */
    #prod-detail .breadcrumb .breadcrumb-item:not(:first-child):not(.active) a,
    #prod-detail .breadcrumb li:not(:first-child):not(.active):not(:last-child) a {
        max-width: 70px;
    }

    #prodName {
        font-size: 1rem;
    }

    #price {
        font-size: 1.2rem;
    }

    #calcTotalPrice,
    #calcEbat {
        font-size: 1.2rem;
    }

    .prod-thumb {
        width: 42px;
        height: 42px;
    }

    .prod-thumbs-nav {
        display: none;
    }

    #btnAddToCart {
        font-size: 0.88rem;
    }

    #toggleSizeOptions {
        font-size: 0.8rem !important;
    }

    /* ep-radio-grid: çok dar ekranlarda karakter küçült, tek satırda tut */
    .ep-radio-grid .ep-radio-btn {
        font-size: 0.65rem;
        padding: 0.35rem 0.4rem;
    }

    .ep-segment-group {
        gap: 0.3rem;
    }

    .ep-segment-label {
        padding: 0.45rem 0.35rem;
        font-size: 0.65rem;
        gap: 0.25rem;
        border-radius: 7px;
    }

    .ep-segment-check {
        width: 14px;
        height: 14px;
    }

    .ep-segment-check i {
        font-size: 0.4rem;
    }

    .ep-segment-photo {
        font-size: 0.55rem;
        margin-top: 0.2rem;
    }
}

/* --- Smooth Scroll Behavior --- */
#prod-detail {
    scroll-behavior: smooth;
}

/* --- Sticky Image Column Enhancement --- */
#prod-detail .sticky {
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

@media only screen and (max-width: 768px) {
    #prod-detail .sticky {
        position: relative;
        top: auto;
    }
}

/* --- Admin Panel in Product Detail --- */
#prod-detail .admin-panel {
    background: var(--ep-bg-light);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
}

/* --- Info Pattern Text --- */
#infoPatternText {
    font-size: 0.85rem;
    color: var(--ep-text-muted);
    background: var(--ep-bg-light);
    padding: 0.5rem 1rem;
    border-radius: var(--ep-radius-sm);
    border-left: 3px solid var(--ep-primary);
}

/* --- BS5 Compatibility for BS3 remnants --- */
#prod-detail .well {
    background: var(--ep-bg-white);
    border-radius: var(--ep-radius-lg);
    box-shadow: var(--ep-shadow-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--ep-border);
}

/* --- Prod Detail Inside Right Section --- */
#prod-detail-inside-right {
    padding-left: 0.5rem;
}

/* Sağ sütun (ürün bilgisi) hover turuncu arka planını kaldır */
#prod-detail-inside-right .ep-step--collapsible:hover,
#prod-detail-inside-right .ep-step--sf:hover,
#prod-detail-inside-right .eks-option-section.ep-addprod-optional:hover {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--ep-border, #e0e0e0) !important;
}

#prod-detail-inside-right .ep-step--sf[aria-expanded="true"]:hover {
    background: transparent !important;
    border-color: var(--ep-border, #e0e0e0) !important;
}

/* --- Video Section --- */
#prod-detail .tab-pane iframe {
    border-radius: var(--ep-radius-sm);
    max-width: 100%;
}

/* ============================================
   PRO - Product Info Panel (Right Side)
   Mobile & Tablet Responsive Design
   Kullanıcıya bir bakışta net bilgi sunumu
   ============================================ */

/* --- Product Info Wrapper Section Dividers --- */
#prod-detail-inside-right hr {
    border: 0;
    border-top: 1px solid var(--ep-border);
    opacity: 0.6;
    margin: 0.875rem 0;
}

/* --- Product Code + Rating Row (side by side) --- */
.prod-code-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.prod-code-rating-row .prod-code-text {
    margin: 0;
    flex-shrink: 0;
}

.prod-code-rating-row .prod-rating-row {
    margin: 0;
}

/* --- Rating Row (stars + score + comment link) --- */
.prod-rating-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0.5rem auto;
    padding: 0;
    background: linear-gradient(135deg, #fffaf5 0%, var(--ep-bg-light) 100%);
    border: 1px solid rgba(255, 127, 0, 0.13);
    border-radius: 100px;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.07);
    transition: var(--ep-transition);
}

.prod-rating-row:hover {
    box-shadow: 0 4px 16px rgba(255, 127, 0, 0.13);
    border-color: rgba(255, 127, 0, 0.22);
}

/* Score Badge */
.prod-rating-row .rating-badge {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.75rem;
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    color: #fff;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 100px 0 0 100px;
}

.prod-rating-row .rating-badge-icon {
    font-size: 0.7rem;
    opacity: 0.9;
}

.prod-rating-row .rating-badge-score {
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Seller badge variant */
.prod-rating-row .rating-badge--seller {
    background: linear-gradient(135deg, var(--ep-text-muted), #4b5563);
}

.prod-rating-row .rating-badge--seller .rating-badge-icon {
    font-size: 0.75rem;
}

/* Stars Group */
.prod-rating-row .rating-stars-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 0.65rem;
}

.prod-rating-row .rating-star {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.prod-rating-row .rating-star--filled {
    color: var(--ep-primary);
}

.prod-rating-row .rating-star--half {
    color: var(--ep-primary);
}

.prod-rating-row .rating-star--empty {
    color: #d4d4d8;
}

.prod-rating-row .rating-star--seller {
    color: var(--ep-text-light);
    font-size: 0.8rem;
}

.prod-rating-row:hover .rating-star {
    transform: scale(1.1);
}

/* Separator */
.prod-rating-row .rating-sep {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* Reviews Link */
.prod-rating-row .rating-reviews-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    color: var(--ep-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ep-transition);
    line-height: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prod-rating-row .rating-reviews-link:hover {
    color: var(--ep-primary);
    text-decoration: none;
}

.prod-rating-row .rating-reviews-link i:first-child {
    font-size: 0.78rem;
    opacity: 0.7;
}

.prod-rating-row .rating-reviews-count {
    font-weight: 800;
    color: var(--ep-text);
}

.prod-rating-row .rating-reviews-link:hover .rating-reviews-count {
    color: var(--ep-primary);
}

.prod-rating-row .rating-reviews-text {
    color: inherit;
}

.prod-rating-row .rating-reviews-arrow {
    font-size: 0.7rem;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.prod-rating-row .rating-reviews-link:hover .rating-reviews-arrow {
    transform: translateX(2px);
    opacity: 0.9;
}

/* WhatsApp Link inside Rating Row */
.prod-rating-row .rating-wa-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border-radius: 0 100px 100px 0;
    background: #25d366;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, filter 0.2s ease;
    flex-shrink: 0;
    align-self: stretch;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.prod-rating-row .rating-wa-link i {
    font-size: 0.9rem;
    line-height: 1;
}

.prod-rating-row .rating-wa-link:hover {
    background: #1ebe57;
    filter: brightness(1.05);
    color: #fff;
    text-decoration: none;
}

.prod-rating-row .rating-wa-link:active {
    background: #1aad4d;
}

/* --- Price-Color Info Card --- */
.prod-price-color-card {
    background: linear-gradient(135deg, #fffaf5 0%, var(--ep-bg-light) 100%);
    border: 1px solid rgba(255, 127, 0, 0.12);
    border-radius: var(--ep-radius-md);
    padding: 1rem;
    margin: 0.75rem 0;
    text-align: center;
}

.prod-price-color-card .price-label,
.prod-price-color-card .color-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--ep-text-muted);
    margin-bottom: 0.125rem;
}

.prod-price-color-card .price-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ep-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.prod-price-color-card .color-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ep-text);
}

/* --- Seller Info Card --- */
.prod-seller-card {
    background: var(--ep-bg-light);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-md);
    padding: 0.75rem 1rem;
    margin: 0.75rem 0;
}

.seller-card-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.seller-card-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ep-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seller-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.seller-card-avatar i {
    font-size: 1.15rem;
    color: var(--ep-primary, #FF7F00);
}

.seller-card-info {
    flex: 1;
    min-width: 0;
}

.seller-card-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.seller-card-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ep-text);
    text-decoration: none;
    transition: color 0.2s;
}

.seller-card-name:hover {
    color: var(--ep-primary);
    text-decoration: none;
}

.seller-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
    color: #fff;
    background: #1a7431;
}

.seller-card-action-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ep-text);
    text-decoration: none;
    border-bottom: 1px solid var(--ep-border, #e9ecef);
    transition: color 0.2s ease, background 0.2s ease;
}

.seller-card-action-link:last-child {
    border-bottom: none;
}

.seller-card-action-link:hover {
    color: var(--ep-primary, #FF7F00);
    background: rgba(255, 127, 0, 0.04);
    text-decoration: none;
}

.seller-card-action-link i {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
    color: var(--ep-text-muted, #6c757d);
    transition: color 0.2s;
}

.seller-card-action-link:hover i {
    color: var(--ep-primary, #FF7F00);
}

.seller-card-action-link--wa {
    color: #fff;
    background: #25d366;
    border-bottom: none;
    border-radius: 8px;
    font-weight: 600;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    margin-top: 0.35rem;
}

.seller-card-action-link--wa i {
    color: #fff;
    font-size: 1rem;
}

.seller-card-action-link--wa:hover {
    background: #1da851;
    color: #fff;
}

.seller-card-action-link--wa:hover i {
    color: #fff;
}

.seller-card-goto {
    display: none;
}

/* Show seller CTA in sidebar card on all breakpoints */
.prod-seller-card.seller-sidebar-mode .seller-card-goto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ep-primary, #FF7F00);
    border: 1.5px solid var(--ep-primary, #FF7F00);
    border-radius: 8px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.prod-seller-card.seller-sidebar-mode .seller-card-goto:hover {
    background: var(--ep-primary, #FF7F00);
    color: #fff;
}

.prod-seller-card.seller-sidebar-mode .seller-card-goto i {
    font-size: 0.55rem;
    transition: transform 0.2s ease;
}

.prod-seller-card.seller-sidebar-mode .seller-card-goto:hover i {
    transform: translateX(2px);
}

.seller-card-rating--excellent {
    color: #fff;
    background: #1a7431;
}

.seller-card-rating--good {
    color: #fff;
    background: #7a6c00;
}

.seller-card-rating--average {
    color: #fff;
    background: #b45309;
}

.seller-card-rating--poor {
    color: #fff;
    background: #c62828;
}

.seller-card-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.seller-sidebar-products {
    width: 100%;
    margin-top: 0.9rem;
    border-top: 1px solid #eef1f5;
    padding-top: 0.75rem;
}

.seller-sidebar-products.seller-sidebar-products--bottom {
    margin-top: 1rem;
    border-top: 0;
    padding-top: 0;
}

.seller-sidebar-products__title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.55rem;
    text-align: center;
}

.seller-sidebar-products__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.seller-sidebar-prod-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem;
    border-radius: 10px;
    border: 1px solid #eef1f5;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.seller-sidebar-prod-item:hover {
    border-color: rgba(255, 127, 0, 0.35);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.seller-sidebar-prod-item__thumb {
    width: 66px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f6f7f9;
}

.seller-sidebar-prod-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.seller-sidebar-prod-item__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seller-sidebar-prod-item__name {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.seller-sidebar-prod-item__old-price {
    font-size: 0.66rem;
    color: #9ca3af;
    text-decoration: line-through;
    line-height: 1.1;
    white-space: nowrap;
}

.seller-sidebar-prod-item__price {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ep-primary, #FF7F00);
    white-space: nowrap;
}


/* --- Kapıda Ödeme Badge --- */
.prod-kapida-odeme-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #1a2332 0%, #2c3e50 100%);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: var(--ep-radius-md);
    max-width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(26, 35, 50, 0.25);
    transition: var(--ep-transition);
}

.prod-kapida-odeme-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ep-primary), #ffc107, var(--ep-primary));
    background-size: 200% 100%;
    animation: ep-kapida-shimmer 3s linear infinite;
}

@keyframes ep-kapida-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.prod-kapida-odeme-badge:hover {
    box-shadow: 0 6px 20px rgba(26, 35, 50, 0.35);
    transform: translateY(-1px);
}

.prod-kapida-odeme-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 1rem;
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.35);
}

.prod-kapida-odeme-badge__content {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1px;
    line-height: 1.3;
}

.prod-kapida-odeme-badge__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ep-primary);
    letter-spacing: 0.01em;
}

.prod-kapida-odeme-badge__subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

.prod-kapida-odeme-badge__check {
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    color: #10b981;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

/* --- Discount Info Card (Modern) --- */
.prod-discount-info {
    background: var(--ep-bg-light);
    border-radius: var(--ep-radius-sm);
    padding: 0.5rem 0.75rem;
    text-align: center;
}

/* ============================================
   TABLET: Product Info Panel (769px - 1024px)
   ============================================ */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    #prod-detail-inside-right {
        padding-left: 0.25rem !important;
    }

    #prod-detail-inside-right hr {
        margin: 0.625rem 0;
    }

    /* Price section */
    .price-color-header {
        margin-bottom: 0.25rem;
    }

    .price-color-header div {
        font-size: 0.82rem;
    }

    /* Seller wrapper - tablet */
    .seller-wrapper {
        min-height: auto;
        height: auto !important;
        line-height: 1.5 !important;
        padding: 0.3rem 0.25rem;
    }

    /* Discount wrapper - tablet */
    #discountWrapperProdItemNew,
    #discountWrapperProdDetail {
        height: auto !important;
        min-height: auto !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: var(--ep-radius-sm) !important;
        font-size: 16px !important;
    }

    /* Baloon price - tablet */
    .detail-baloon-price-area {
        max-width: 100%;
    }

    .detail-baloon-price-header,
    .detail-baloon-price-header-green {
        height: auto !important;
    }

    .detail-baloon-price-bottom-value {
        left: 45px !important;
    }

    /* Favorites - tablet */
    .add-to-fav {
        max-width: 100% !important;
    }

    .add-to-fav i {
        width: auto !important;
    }

    .add-to-fav i span {
        width: auto !important;
    }

    /* Color variants - tablet */
    .ep-color-grid {
        gap: 6px;
    }

    /* Rating row - tablet */
    .prod-rating-row .rating-badge {
        padding: 0.35rem 0.55rem;
    }

    .prod-rating-row .rating-badge-score {
        font-size: 0.82rem;
    }

    .prod-rating-row .rating-stars-group {
        padding: 0 0.35rem;
    }

    .prod-rating-row .rating-star {
        font-size: 0.7rem;
    }

    .prod-rating-row .rating-reviews-link {
        padding: 0.35rem 0.55rem;
        font-size: 0.72rem;
    }

    .prod-rating-row .rating-reviews-arrow {
        display: none;
    }
}

/* ============================================
   MOBILE: Product Info Panel (max-width: 768px)
   ============================================ */
@media only screen and (max-width: 768px) {
    /* --- Container Reset --- */
    #prod-detail-inside-right {
        padding: 0 !important;
        margin-top: 0.5rem;
    }

    #prod-detail-inside-right hr {
        margin: 0.5rem 0;
    }

    /* --- Product Name - Mobile Hero --- */
    #prod-detail-inside-right #prodName {
        font-size: 1.2rem !important;
        line-height: 1.35;
        letter-spacing: -0.01em;
        margin-bottom: 0.5rem;
        padding: 0;
    }

    /* --- Product Code --- */
    #prod-detail-inside-right #prodCode {
        font-size: 0.75rem;
        padding: 0.2rem 0.6rem;
    }

    /* --- Rating Stars Section - Force Inline --- */
    #prod-detail-inside-right p.text-center > .col-md-4,
    #prod-detail-inside-right p.text-center > .col-md-2 {
        display: inline-block !important;
        width: auto !important;
        float: none !important;
        padding: 0 0.15rem;
        vertical-align: middle;
    }

    #prod-detail-inside-right p.text-center > .col-md-6.float-start,
    #prod-detail-inside-right p.text-center > .col-md-6:last-child {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        margin-top: 0.25rem;
        padding: 0;
    }

    /* Rating row mobile */
    .prod-rating-row {
        gap: 0;
        margin: 0.3rem auto;
    }

    .prod-rating-row .rating-badge {
        padding: 0.36rem 0.56rem;
        gap: 0.23rem;
    }

    .prod-rating-row .rating-badge-score {
        font-size: 0.82rem;
    }

    .prod-rating-row .rating-badge-icon {
        font-size: 0.59rem;
    }

    .prod-rating-row .rating-stars-group {
        padding: 0 0.39rem;
        gap: 1px;
    }

    .prod-rating-row .rating-star {
        font-size: 0.69rem;
    }

    .prod-rating-row .rating-sep {
        height: 16px;
    }

    .prod-rating-row .rating-reviews-link {
        padding: 0.36rem 0.59rem;
        font-size: 0.72rem;
        gap: 0.23rem;
    }

    .prod-rating-row .rating-reviews-arrow {
        display: none;
    }

    .prod-rating-row .rating-wa-link {
        padding: 0.36rem 0.5rem;
        font-size: 0.66rem;
        gap: 0.2rem;
    }

    .prod-rating-row .rating-wa-link i {
        font-size: 0.82rem;
    }

    /* --- Price Card (Non-Balloon) - Mobile --- */
    .ep-price-card {
        padding: 0.75rem 0.875rem;
        border-radius: var(--ep-radius-sm);
    }

    .ep-price-card__amount {
        font-size: 1.65rem;
    }

    .ep-price-card__badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .ep-price-card__discount-rate {
        font-size: 0.75rem;
        padding: 0.25rem 0.55rem;
    }

    .ep-price-card__discount-timer {
        font-size: 0.65rem;
        padding: 0.15rem 0.45rem;
    }

    .ep-price-card__discount-text {
        font-size: 0.62rem;
        max-width: 150px;
    }

    .ep-price-card__divider {
        margin: 0.5rem 0;
    }

    /* --- Addon Card - Mobile --- */
    .ep-addon-card {
        padding: 0.75rem 0.75rem;
        gap: 10px;
        margin-bottom: 0.5rem;
    }

    .ep-addon-card__name {
        font-size: 0.85rem;
    }

    .ep-addon-card__price {
        font-size: 1rem;
    }

    .ep-addon-card__price-row {
        padding-left: 26px;
        gap: 0.35rem;
    }

    .ep-addon-card__img {
        width: 48px;
        height: 48px;
    }

    .ep-addon-card--selected::after {
        font-size: 0.85rem;
        top: 0.4rem;
        right: 0.5rem;
    }

    /* --- Price/Color Header - Modern Mobile Card --- */
    .price-color-header {
        background: linear-gradient(135deg, #fffaf5 0%, var(--ep-bg-light) 100%);
        border: 1px solid rgba(255, 127, 0, 0.1);
        border-radius: var(--ep-radius-sm);
        padding: 0.375rem 0.625rem;
        margin-bottom: 0.25rem;
    }

    .price-color-header div {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    /* --- Price Prominence --- */
    #prod-detail-inside-right #price {
        font-size: 1.65rem !important;
        font-weight: 800;
        display: block;
        margin: 0.2rem 0;
    }

    /* --- Color Name --- */
    #activeColorNames {
        font-size: 0.92rem;
    }

    /* --- Baloon Price Area - Mobile Full Width --- */
    .detail-baloon-price-area {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        padding: 0.625rem !important;
        margin: 0.375rem 0;
        border-radius: var(--ep-radius-sm);
    }

    .detail-baloon-price-header,
    .detail-baloon-price-header-green {
        height: auto !important;
    }

    .detail-baloon-price-row {
        font-size: 16px;
    }

    .detail-baloon-price-bottom-value {
        left: auto !important;
        position: relative;
        font-size: 20px;
    }

    .detail-baloon-price-rate-row-top {
        width: 44px;
        height: 40px;
        padding: 3px;
    }

    .detail-baloon-price-rate-row-bottom {
        width: 44px;
        height: 40px;
        padding: 3px;
    }

    /* --- Discount Banner - Mobile Clean Card --- */
    #discountWrapperProdItemNew,
    #discountWrapperProdDetail {
        height: auto !important;
        min-height: auto !important;
        padding: 0.625rem 0.75rem !important;
        font-size: 15px !important;
        border-radius: var(--ep-radius-sm) !important;
        margin: 0.5rem 0 !important;
        line-height: 1.5 !important;
    }

    #prodDiscountRate,
    #catDiscountRate,
    #discountInCartCounterProdDetail {
        font-size: 12px !important;
    }

    /* --- Discount Old Price Footer --- */
    .detail-baloon-price-footer {
        padding: 0.5rem 0.625rem;
        border-radius: var(--ep-radius-sm);
        margin-top: 0.375rem;
        min-height: auto !important;
    }

    .baloon-green-text {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.2rem;
    }

    .detail-baloon-price-value {
        font-size: 18px;
        line-height: 1.3;
    }

    /* --- Campaign Section Mobile --- */
    #campaign-row {
        margin: 0.375rem 0;
    }

    #campaign {
        padding: 0.375rem;
    }

    #discount-percent-box {
        height: auto !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 16px !important;
        float: none !important;
        display: inline-block !important;
        border-radius: var(--ep-radius-sm) !important;
        margin-bottom: 0.375rem;
    }

    #campaign-price-wrapper {
        height: auto !important;
        float: none !important;
        text-align: center;
        padding-left: 0 !important;
    }

    #campaign-price-wrapper span {
        height: auto !important;
        line-height: 1.5 !important;
        float: none !important;
        display: inline-block !important;
    }

    #campaign-price-wrapper span:nth-child(1) {
        font-size: 1rem;
        float: none !important;
    }

    #campaign-price-wrapper span:nth-child(2) {
        font-size: 0.88rem;
        float: none !important;
    }

    #campaign-price-wrapper span:nth-child(3) {
        font-size: 1.6rem;
        display: block !important;
    }

    /* --- Seller Section - Mobile Clean Layout --- */
    .seller-wrapper {
        height: auto !important;
        min-height: auto !important;
        line-height: 1.5 !important;
        padding: 0.375rem 0 !important;
    }

    .seller-wrapper .col-lg-6,
    .seller-wrapper .col-md-6 {
        width: 100% !important;
        text-align: center !important;
        float: none !important;
        padding: 0.15rem 0;
    }

    .seller-wrapper .col-lg-6.text-start,
    .seller-wrapper .col-md-6.text-start {
        text-align: center !important;
    }

    .seller-title {
        font-size: 0.8rem !important;
    }

    .seller-name {
        font-size: 0.9rem !important;
    }

    /* --- Seller Card Mobile --- */
    .prod-seller-card {
        padding: 0.625rem 0.75rem;
        margin: 0.5rem 0;
        border-radius: var(--ep-radius-sm);
    }

    .seller-card-avatar {
        width: 40px;
        height: 40px;
    }

    .seller-card-name {
        font-size: 0.85rem;
    }

    .seller-card-rating {
        font-size: 0.68rem;
        padding: 0.1rem 0.4rem;
    }

    .seller-card-action-link {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }

    .seller-card-action-link i {
        font-size: 0.78rem;
    }

    .prod-whatsapp-btn {
        font-size: 0.72rem !important;
        margin-top: 0.2rem;
        padding: 0.3rem 0.5rem;
    }

    .prod-seller-link {
        font-size: 0.78rem;
    }

    /* WhatsApp & contact links (legacy) */
    .seller-wrapper .btn-white-default,
    .seller-wrapper a[href*="wa.me"],
    #prod-detail-inside-right a[href*="wa.me"] {
        font-size: 0.78rem !important;
        display: inline-block;
        margin-top: 0;
        padding: 0.35rem 0.625rem;
        border-radius: var(--ep-radius-sm);
    }

    /* Phone number */
    .seller-wrapper a[href="javascript:"] {
        font-size: 0.85rem;
    }

    /* --- Kapıda Ödeme - Mobile Responsive --- */
    #prod-detail-inside-right div[style*="clip-path"] {
        clip-path: none !important;
        border-radius: var(--ep-radius-sm) !important;
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* --- Favorites Button - Mobile Full Width --- */
    .add-to-fav {
        width: 100%;
        max-width: 100% !important;
        padding: 0.625rem 1rem;
        font-size: 0.9rem;
        border-radius: var(--ep-radius-sm);
        border-width: 1.5px;
    }

    .add-to-fav i {
        width: auto !important;
    }

    .add-to-fav i span {
        width: auto !important;
        font-size: 0.88rem !important;
    }

    /* --- CTA Button - Mobile Prominent --- */
    #toggleSizeOptions {
        width: 100% !important;
        font-size: 0.95rem !important;
        padding: 0.875rem 1.25rem !important;
        border-radius: var(--ep-radius-md) !important;
    }

    /* --- Color Variants - Mobile --- */
    #colorWrapper {
        height: auto !important;
    }

    .ep-color-grid {
        gap: 5px;
    }

    .ep-variant-header__title {
        font-size: 0.84rem;
    }

    .ep-variant-header__icon {
        font-size: 0.82rem;
    }

    .ep-variant-header__count {
        min-width: 1.25rem;
        height: 1.25rem;
        font-size: 0.65rem;
    }

    .ep-variant-header__link {
        font-size: 0.74rem;
    }

    #prodColorName {
        font-size: 0.84rem;
    }

    /* --- Alert Boxes - Mobile Clean --- */
    #prod-detail-inside-right .alert {
        font-size: 0.82rem;
        padding: 0.5rem 0.75rem;
        margin: 0.375rem 0;
        border-radius: var(--ep-radius-sm);
    }

    /* --- Product Description Link --- */
    #prod-detail-inside-right .btn-secondary {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--ep-radius-sm);
    }

    /* --- Shipping Day Alert --- */
    #prod-detail-inside-right .alert-danger {
        font-size: 0.8rem;
        line-height: 1.5;
    }

    /* --- Video Section --- */
    #prod-detail-inside-right h4[style*="color:#ff6a00"] {
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
}

/* ============================================
   SMALL MOBILE: Product Info Panel (max-width: 576px)
   ============================================ */
@media only screen and (max-width: 576px) {
    /* Product name - compact */
    #prod-detail-inside-right #prodName {
        font-size: 1.05rem !important;
        line-height: 1.3;
        margin-bottom: 0.35rem;
    }

    /* Product code - minimal */
    #prod-detail-inside-right #prodCode {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
    }

    .prod-rating-row .rating-badge {
        padding: 0.3rem 0.46rem;
    }

    .prod-rating-row .rating-badge-score {
        font-size: 0.75rem;
    }

    .prod-rating-row .rating-stars-group {
        padding: 0 0.3rem;
    }

    .prod-rating-row .rating-star {
        font-size: 0.62rem;
    }

    .prod-rating-row .rating-reviews-link {
        padding: 0.3rem 0.49rem;
        font-size: 0.65rem;
        gap: 0.2rem;
    }

    /* Price Card (Non-Balloon) - Small Mobile */
    .ep-price-card {
        padding: 0.625rem 0.75rem;
    }

    .ep-price-card__amount {
        font-size: 1.45rem;
    }

    .ep-price-card__badge {
        font-size: 0.72rem;
        padding: 0.2rem 0.45rem;
    }

    .ep-price-card__discount-row {
        gap: 0.35rem;
    }

    .ep-price-card__discount-rate {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    .ep-price-card__discount-timer {
        font-size: 0.6rem;
    }

    .ep-price-card__discount-text {
        font-size: 0.58rem;
        text-align: left;
        max-width: 100%;
    }

    .ep-price-card__old-price {
        font-size: 0.88rem;
    }

    .ep-price-card__label {
        font-size: 0.72rem;
    }

    .ep-price-card__color-label,
    .ep-price-card__color-value {
        font-size: 0.8rem;
    }

    /* Price - clear hero display */
    #prod-detail-inside-right #price {
        font-size: 1.45rem !important;
    }

    /* Price/Color header */
    .price-color-header {
        padding: 0.3rem 0.5rem;
    }

    .price-color-header div {
        font-size: 0.68rem;
    }

    /* Discount panel compact */
    #discountWrapperProdItemNew,
    #discountWrapperProdDetail {
        font-size: 14px !important;
        padding: 0.5rem !important;
    }

    #prodDiscountRate,
    #catDiscountRate,
    #discountInCartCounterProdDetail {
        font-size: 11px !important;
    }

    /* Baloon price compact */
    .detail-baloon-price-row {
        font-size: 14px;
    }

    .detail-baloon-price-value {
        font-size: 16px;
    }

    .detail-baloon-price-bottom-value {
        font-size: 18px;
    }

    .detail-baloon-price-rate-row-top,
    .detail-baloon-price-rate-row-bottom {
        width: 40px;
        height: 36px;
    }

    /* Color variants compact */
    .ep-color-grid {
        gap: 4px;
    }

    .ep-variant-section {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .ep-variant-header__title {
        font-size: 0.8rem;
    }

    #prodColorName {
        font-size: 0.8rem;
    }

    /* Campaign price compact */
    #campaign-price-wrapper span:nth-child(1) {
        font-size: 0.88rem;
    }

    #campaign-price-wrapper span:nth-child(3) {
        font-size: 1.4rem;
    }

    .calcTotalPrice {
        font-size: 1.4rem !important;
    }

    .calcOldPrice {
        font-size: 0.88rem !important;
    }

    /* Discount box compact */
    #discount-percent-box {
        font-size: 14px !important;
        padding: 0.3rem 0.4rem !important;
    }

    /* Favorites compact */
    .add-to-fav {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    .add-to-fav i.fa-heart,
    .add-to-fav i.fa-smile,
    .add-to-fav i.fa-frown {
        font-size: 1.1rem !important;
    }

    .add-to-fav i span {
        font-size: 0.8rem !important;
    }

    /* Seller compact */
    .seller-title {
        font-size: 0.75rem !important;
    }

    .seller-name {
        font-size: 0.82rem !important;
    }

    .seller-wrapper a[href*="wa.me"],
    #prod-detail-inside-right a[href*="wa.me"] {
        font-size: 0.72rem !important;
    }

    /* Alerts compact */
    #prod-detail-inside-right .alert {
        font-size: 0.78rem;
        padding: 0.375rem 0.625rem;
    }

    /* Kapıda ödeme compact */
    #prod-detail-inside-right div[style*="clip-path"] {
        font-size: 0.88rem !important;
        padding: 0.4rem 0.75rem !important;
    }

    /* CTA compact */
    #toggleSizeOptions {
        font-size: 0.88rem !important;
        padding: 0.75rem 1rem !important;
    }
}

/* ============================================
   VERY SMALL: Product Info Panel (max-width: 380px)
   ============================================ */
@media only screen and (max-width: 380px) {
    #prod-detail-inside-right #prodName {
        font-size: 0.95rem !important;
    }

    .prod-rating-row .rating-badge {
        padding: 0.26rem 0.36rem;
    }

    .prod-rating-row .rating-badge-score {
        font-size: 0.69rem;
    }

    .prod-rating-row .rating-badge-icon {
        font-size: 0.52rem;
    }

    .prod-rating-row .rating-stars-group {
        padding: 0 0.2rem;
    }

    .prod-rating-row .rating-star {
        font-size: 0.56rem;
    }

    .prod-rating-row .rating-sep {
        height: 13px;
    }

    .prod-rating-row .rating-reviews-link {
        padding: 0.26rem 0.36rem;
        font-size: 0.59rem;
    }

    .prod-rating-row .rating-reviews-text {
        display: none;
    }

    #prod-detail-inside-right #price {
        font-size: 1.25rem !important;
    }

    #discountWrapperProdItemNew,
    #discountWrapperProdDetail {
        font-size: 12px !important;
        padding: 0.375rem !important;
    }

    .ep-color-grid {
        gap: 3px;
    }

    .add-to-fav i span {
        font-size: 0.72rem !important;
    }

    .add-to-fav i.fa-heart,
    .add-to-fav i.fa-smile,
    .add-to-fav i.fa-frown {
        font-size: 1rem !important;
    }

    .seller-wrapper .btn-white-default,
    .seller-wrapper a[href*="wa.me"],
    #prod-detail-inside-right a[href*="wa.me"] {
        font-size: 0.68rem !important;
    }

    #campaign-price-wrapper span:nth-child(3) {
        font-size: 1.2rem;
    }

    .calcTotalPrice {
        font-size: 1.2rem !important;
    }

    /* Baloon minimal */
    .detail-baloon-price-rate-row-top,
    .detail-baloon-price-rate-row-bottom {
        width: 36px;
        height: 32px;
        font-size: 11px;
    }

    .detail-baloon-price-rate-top {
        font-size: 12px;
    }

    .detail-baloon-price-rate-text-top {
        font-size: 8px;
    }
}

/* ==========================================================================
   VARIANT SLIDER — Ürünün Diğer Renkleri (Swiper.js)
   Tamamen bağımsız, Swiper Element (Web Component) tabanlı
   ========================================================================== */

/* =====================================================
   VARIANT SLIDER - "Ürünün Diğer Renkleri"
   ===================================================== */

/* --- Section --- */
.ep-variant-section {
    margin: 32px 0;
    padding: 0;
}

/* --- Ana Kart Konteyner --- */
.ep-variant-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.ep-variant-card:hover {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 8px 28px rgba(0,0,0,0.05);
}

/* --- Başlık (Header) --- */
.ep-variant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

/* --- Başlık İkonu --- */
.ep-variant-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #FF7F00 0%, #ff9a33 100%);
    color: #fff;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(255,127,0,0.25);
}

.ep-variant-title-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ep-variant-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    padding: 0;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.ep-variant-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #FF7F00 0%, #ff9a33 100%);
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
    white-space: nowrap;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(255,127,0,0.2);
}

.ep-variant-viewall:hover,
.ep-variant-viewall:focus {
    background: linear-gradient(135deg, #e67200 0%, #FF7F00 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255,127,0,0.35);
    color: #fff !important;
    text-decoration: none !important;
}

/* --- Slider Body --- */
.ep-variant-body {
    padding: 20px 20px 0;
    position: relative;
    overflow: visible;
}

/* --- Loading Spinner --- */
.ep-variant-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
}

.ep-variant-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,127,0,0.15);
    border-top-color: #FF7F00;
    border-radius: 50%;
    animation: epVariantSpin 0.8s linear infinite;
}

@keyframes epVariantSpin {
    to { transform: rotate(360deg); }
}

/* --- Swiper Slide Product Cards --- */
.ep-variant-slide {
    height: auto !important;
    padding: 4px 0 !important;
}

.ep-variant-slide .product-item-v2,
.ep-variant-slide .product-slider-item-variant {
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}

.ep-variant-slide .product-item-v2:hover,
.ep-variant-slide .product-slider-item-variant:hover {
    border-color: rgba(255,127,0,0.25) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
    transform: translateY(-4px) !important;
}

/* --- Link Wrapper --- */
.ep-variant-slide .product-item-v2 > a,
.ep-variant-slide .product-slider-item-variant > a {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
}

.ep-variant-slide a,
.ep-variant-slide a:hover,
.ep-variant-slide a:visited,
.ep-variant-slide a:active,
.ep-variant-slide a:focus {
    text-decoration: none !important;
    color: inherit !important;
}

/* --- Image Area --- */
.ep-variant-slide .img-wrapper {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #f5f5f5 !important;
    position: relative !important;
    height: auto !important;
    border-radius: 12px 12px 0 0 !important;
    flex-shrink: 0 !important;
}

.ep-variant-slide .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

.ep-variant-slide .product-item-v2:hover .img-wrapper img {
    transform: scale(1.05) !important;
}

/* --- Product Name --- */
.ep-variant-slide .prod-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    padding: 12px 14px 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #2d3436 !important;
    min-height: 46px !important;
    margin: 0 !important;
    text-align: left !important;
    letter-spacing: -0.01em !important;
}

/* --- Price Area --- */
.ep-variant-slide .price-area {
    padding: 4px 14px 14px !important;
    font-size: 12px !important;
    color: #636e72 !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.ep-variant-slide .price-area br {
    display: none !important;
}

.ep-variant-slide .price-area > style {
    display: none !important;
}

/* Normal fiyat */
.ep-variant-slide .price-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    position: static !important;
    top: auto !important;
}

.ep-variant-slide .price-wrapper > span:first-child {
    font-size: 11px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.ep-variant-slide .price-wrapper > span[style*="color:#fe7f00"],
.ep-variant-slide .price-wrapper > span.price-wrapper-line + span {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FF7F00 !important;
}

.ep-variant-slide .price-wrapper-line {
    text-decoration: line-through !important;
    color: #9ca3af !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Kampanya / hidden */
.ep-variant-slide .campaign-wrapper {
    display: none !important;
}

/* Balon Fiyat */
.ep-variant-slide .smartCat-baloon-price-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    height: auto !important;
    margin-bottom: 4px !important;
    font-weight: normal !important;
}

.ep-variant-slide .smartCat-baloon-price-rate-row {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    top: auto !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
}

.ep-variant-slide .smartCat-baloon-price-rate {
    font-size: 11px !important;
    position: static !important;
    top: auto !important;
}

.ep-variant-slide .smartCat-baloon-price-space {
    display: none !important;
}

.ep-variant-slide .smartCat-baloon-price-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    font-size: 12px !important;
    color: #636e72 !important;
    position: static !important;
    top: auto !important;
    vertical-align: baseline !important;
}

.ep-variant-slide .smartCat-baloon-price-row-first-price {
    text-decoration: line-through !important;
    color: #9ca3af !important;
    font-size: 11px !important;
    display: block !important;
}

.ep-variant-slide .smartCat-baloon-price-row-last-price {
    color: #FF7F00 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: block !important;
}

/* Balloon Footer (Fiyat Kutusu) */
.ep-variant-slide .smartCat-baloon-price-footer {
    background: linear-gradient(135deg, #fff7ed 0%, #fff3e0 100%) !important;
    border: 1px solid rgba(255,127,0,0.12) !important;
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    margin-top: 8px !important;
    min-height: auto !important;
    position: static !important;
    top: auto !important;
    font-weight: normal !important;
}

.ep-variant-slide .smartCat-baloon-green-text {
    color: #059669 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-align: center !important;
    display: block !important;
    line-height: 1.3 !important;
    margin-bottom: 3px !important;
}

.ep-variant-slide .smartCat-baloon-price-value {
    display: block !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

.ep-variant-slide .smartCat-baloon-price-value span[style*="font-size:xx-small"] {
    font-size: 9px !important;
    color: #9ca3af !important;
    font-weight: 500 !important;
}

/* --- Rozet (iade garantisi vb.) --- */
.ep-variant-slide .iade-garantisi {
    font-size: 9px !important;
    padding: 2px 6px !important;
    top: 8px !important;
    border-radius: 4px 0 0 4px !important;
}

.ep-variant-slide .sponsorlu {
    font-size: 8px !important;
    padding: 2px 5px !important;
}

/* --- MOBILE Responsive (<576px) --- */
@media (max-width: 575.98px) {
    .ep-variant-section {
        margin: 16px 0;
    }

    .ep-variant-card {
        border-radius: 12px;
    }

    .ep-variant-header {
        padding: 14px 16px;
        gap: 8px;
    }

    .ep-variant-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: 8px;
    }

    .ep-variant-title {
        font-size: 15px;
    }

    .ep-variant-viewall {
        padding: 6px 12px;
        font-size: 12px;
    }

    .ep-variant-body {
        padding: 12px 12px 0;
    }

    .ep-variant-slide .prod-name {
        padding: 8px 10px 4px !important;
        font-size: 12px !important;
        min-height: 38px !important;
    }

    .ep-variant-slide .price-area {
        padding: 4px 10px 10px !important;
        font-size: 11px !important;
    }

    .ep-variant-slide .smartCat-baloon-price-value {
        font-size: 14px !important;
    }

    .ep-variant-slide .smartCat-baloon-price-row-last-price {
        font-size: 13px !important;
    }

    .ep-variant-slide .product-item-v2,
    .ep-variant-slide .product-slider-item-variant {
        border-radius: 10px !important;
    }

    .ep-variant-slide .img-wrapper {
        border-radius: 10px 10px 0 0 !important;
    }
}

/* --- TABLET (576px - 991px) --- */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ep-variant-section {
        margin: 24px 0;
    }

    .ep-variant-header {
        padding: 16px 20px;
    }

    .ep-variant-body {
        padding: 16px 16px 0;
    }

    .ep-variant-title {
        font-size: 16px;
    }
}

/* --- DESKTOP (992px+) --- */
@media (min-width: 992px) {
    .ep-variant-section {
        margin: 32px 0;
    }

    .ep-variant-body {
        padding: 20px 24px 0;
    }
}

/* --- LARGE SCREEN (1400px+) --- */
@media (min-width: 1400px) {
    .ep-variant-body {
        padding: 24px 28px 0;
    }
}


/* ==========================================================================
   GENERIC SLIDER (ep-slider-*) — Non-variant Swiper sliders
   Kategori, Son Gezilen, Vitrin, Akilli Siralama vb.
   ========================================================================== */

/* --- Section --- */
.ep-slider-section {
    margin: 24px 0;
    padding: 0;
}

/* --- Card Container --- */
.ep-slider-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.ep-slider-card:hover {
    box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05);
}

/* --- Header --- */
.ep-slider-header {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.ep-slider-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1;
    white-space: nowrap;
}

.ep-slider-title a.ep-slider-viewall,
a.ep-slider-viewall {
    font-size: 12px;
    font-weight: 500;
    color: #FF7F00 !important;
    text-decoration: none !important;
}

.ep-slider-title a.ep-slider-viewall:hover,
.ep-slider-title a.ep-slider-viewall:focus,
a.ep-slider-viewall:hover,
a.ep-slider-viewall:focus {
    color: #e06d00 !important;
    text-decoration: none !important;
}

/* --- Body --- */
.ep-slider-body {
    padding: 16px 20px 8px;
    position: relative;
    overflow: hidden;
}

/* --- Loading Spinner (shared) --- */
.ep-slider-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.ep-slider-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255,127,0,0.15);
    border-top-color: #FF7F00;
    border-radius: 50%;
    animation: epVariantSpin 0.8s linear infinite;
}

/* --- Non-variant slide item overrides --- */
.ep-slide {
    height: auto !important;
}

.ep-slide .product-item-v2,
.ep-slide .product-slider-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.ep-slide .product-item-v2:hover,
.ep-slide .product-slider-item:hover {
    border-color: rgba(255,127,0,0.25) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    transform: translateY(-3px) !important;
}

.ep-slide .product-item-v2 > a,
.ep-slide .product-slider-item > a {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    height: 100% !important;
}

.ep-slide a,
.ep-slide a:hover,
.ep-slide a:visited {
    text-decoration: none !important;
    color: inherit !important;
}

/* Image area */
.ep-slide .img-wrapper {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #f8f9fa !important;
    border-radius: 10px 10px 0 0 !important;
    flex-shrink: 0 !important;
}

.ep-slide .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.45s ease !important;
}

.ep-slide .product-item-v2:hover .img-wrapper img {
    transform: scale(1.05) !important;
}

.ep-slide .product-item-v2::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    z-index: 5;
    pointer-events: auto;
}

/* Product name — single line, fixed height */
.ep-slide .prod-name {
    display: block !important;
    -webkit-line-clamp: unset !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 10px 12px 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #2d3436 !important;
    height: 29px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}

/* Trust strip — single line, fixed height (high specificity to beat category.css) */
.ep-slide .product-item-v2 .ep-trust-strip,
.ep-slide .product-item-v2 > a > span[id^="prodVariant_"] {
    height: 20px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    padding: 2px 12px !important;
}

/* Hide last trust item (Güvenli Alışveriş/Hızlı Kargo) when comments exist */
.ep-slide .ep-trust-strip:has(.ep-trust-item + .ep-trust-item) .ep-trust-item:last-child {
    display: none !important;
}

/* Hide baloon-price-header (M2 fiyatı) — not present on every card */
.ep-slide .baloon-price-header {
    display: none !important;
}

/* Hide price-wrapper when baloon-price-footer exists (avoids duplicate price) */
.ep-slide .price-area:has(.baloon-price-footer) .price-wrapper {
    display: none !important;
}

.ep-slide .priceText > span:last-child {
    font-size: 16px !important;
}

/* Price area — compact, push footer to bottom */
.ep-slide .price-area {
    padding: 6px 0 0 !important;
    font-size: 12px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

.ep-slide .price-area br {
    display: none !important;
}

/* baloon-price-footer — always consistent */
.ep-slide .baloon-price-footer {
    margin: 0 10px 8px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.ep-slide .baloon-price-footer-empty {
    margin: 0 10px 8px !important;
    padding: 8px 10px !important;
    min-height: 44px !important;
}

/* Hide item-comment, discount panel, and spacer in slider cards */
.ep-slide .item-comment {
    display: none !important;
}

.ep-slide [id="discountWrapperProdItemNew"] {
    display: none !important;
}

.ep-slide .product-item-v2 > a > span:not([class]):not([style]) {
    display: none !important;
}

.ep-slide .campaign-wrapper {
    display: none !important;
}

.ep-slide .price-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    line-height: 1.4 !important;
    width: 100% !important;
    position: static !important;
    top: auto !important;
    padding: 6px 12px 4px !important;
}

.ep-slide .smartCat-baloon-price-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    height: auto !important;
    margin-bottom: 4px !important;
    font-weight: normal !important;
}

.ep-slide .smartCat-baloon-price-rate-row {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    top: auto !important;
}

.ep-slide .smartCat-baloon-price-space {
    display: none !important;
}

.ep-slide .smartCat-baloon-price-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    font-size: 12px !important;
    position: static !important;
    top: auto !important;
}

.ep-slide .smartCat-baloon-price-row-first-price {
    text-decoration: line-through !important;
    color: #9ca3af !important;
    font-size: 11px !important;
}

.ep-slide .smartCat-baloon-price-row-last-price {
    color: #FF7F00 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.ep-slide .smartCat-baloon-price-footer {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1px solid rgba(16,185,129,0.15) !important;
    padding: 6px 8px !important;
    border-radius: 8px !important;
    margin-top: 4px !important;
    min-height: auto !important;
    position: static !important;
    top: auto !important;
    font-weight: normal !important;
}

.ep-slide .smartCat-baloon-green-text {
    color: #059669 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 2px !important;
}

.ep-slide .smartCat-baloon-price-value {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

/* Mobile responsive */
@media (max-width: 575.98px) {
    .ep-slider-section {
        margin: 12px 0;
    }

    .ep-slider-card {
        border-radius: 10px;
    }

    .ep-slider-header {
        padding: 8px 12px;
    }

    .ep-slider-title {
        font-size: 13px;
    }

    .ep-slider-viewall {
        font-size: 12px;
    }

    .ep-slider-body {
        padding: 10px 10px 4px;
    }

    .ep-slide .prod-name {
        padding: 8px 8px 0 !important;
        font-size: 11px !important;
        height: 25px !important;
    }

    .ep-slide .price-area {
        padding: 4px 0 0 !important;
        font-size: 11px !important;
    }

    .ep-slide .baloon-price-footer {
        margin: 0 6px 6px !important;
        padding: 6px 8px !important;
        min-height: 38px !important;
    }

    .ep-slide .baloon-price-footer-empty {
        margin: 0 6px 6px !important;
        min-height: 38px !important;
    }

}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ep-slider-section {
        margin: 18px 0;
    }

    .ep-slider-header {
        padding: 10px 16px;
    }
}

/* ============================================
   EP Price Hero — Modern Fiyat & Renk Kartı
   ============================================ */

.ep-price-hero {
    margin: 0.75rem 0;
}

/* --- Fiyat Kartı (dikey düzen) --- */
.ep-price-hero__card {
    background: var(--ep-bg-white);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-md);
    padding: 1rem 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: var(--ep-shadow-sm);
    transition: var(--ep-transition);
}

.ep-price-hero__card:hover {
    box-shadow: var(--ep-shadow-md);
    border-color: rgba(255, 127, 0, 0.2);
}

.ep-price-hero__top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    border: 1.5px solid transparent;
    background: transparent;
    border-radius: 8px;
}

.ep-price-hero__top--has-discount {
    border-color: #16a34a;
    background: rgba(22, 163, 74, 0.07);
}

.ep-price-hero__price-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem 0;
}

@media only screen and (max-width: 768px) {
    .ep-price-hero__top {
        flex-wrap: wrap;
    }
}

/* Ana fiyat */
.ep-price-hero__amount {
    font-size: 1.75rem;
    font-weight: 800;
    color: #16a34a;
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

.ep-price--no-disc { color: #212529 !important; }

.ep-price-hero__unit {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ep-text);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.ep-price-hero__kdv {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ep-text-muted);
    white-space: nowrap;
}

/* İndirim oranı badge */
.ep-price-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.25);
    flex-shrink: 0;
}

.ep-price-hero__badge i {
    font-size: 0.6rem;
}

/* Inline Discount Block (Price Hero) */
.ep-price-hero__discount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ep-price-hero__discount-rate {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.65rem;
    border-radius: 20px;
    letter-spacing: 0.02em;
    line-height: 1.2;
    box-shadow: 0 1px 4px rgba(220, 38, 38, 0.25);
    justify-content: space-evenly;
}

.ep-price-hero__discount-rate i {
    font-size: 0.68rem;
    color: #fbbf24;
    animation: ep-bolt-flash-detail 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.ep-price-hero__discount-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #c62828;
    background: rgba(255, 255, 255, 1);
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    white-space: nowrap;

}

.ep-price-hero__discount-timer i {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.8);
}

.ep-price-hero__discount-timer.is-countdown {
    margin-top: 0;
    line-height: inherit;
}

.ep-price-hero__discount-text {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--ep-text-muted);
    text-align: right;
    max-width: 170px;
    line-height: 1.3;
}

/* Eski fiyat satırı */
.ep-price-hero__old-row {
    margin-top: 0;
}

.ep-price-hero__old-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ep-text-light);
    margin-right: 0.25rem;
}

.ep-price-hero__old-price {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ep-text-light);
    text-decoration: line-through;
    white-space: nowrap;
}

/* Ayırıcı çizgi */
.ep-price-hero__divider {
    border: none;
    border-top: 1px dashed var(--ep-border);
    margin: 0.125rem 0;
}

/* Piyasa fiyatı satırı */
.ep-price-hero__market-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--ep-text-muted);
}

.ep-price-hero__market-icon {
    color: var(--ep-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ep-price-hero__market-label {
    font-weight: 600;
}

.ep-price-hero__baloon-old {
    text-decoration: line-through;
    font-weight: 500;
    color: var(--ep-text-light);
}

.ep-price-hero__baloon-rate {
    background: linear-gradient(135deg, var(--ep-primary), var(--ep-primary-dark));
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.125rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    margin-left: auto;
}

/* Tasarruf satırı */
.ep-price-hero__save-row {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ep-success);
    background: rgba(34, 197, 94, 0.06);
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.12);
}

.ep-price-hero__save-row i {
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* --- Renk Satırı (fiyat kartı içi) --- */
.ep-price-hero__color-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.82rem;
    color: var(--ep-text-muted);
    border-top: 1px dashed var(--ep-border);
    padding-top: 0.5rem;
    margin-top: 0.125rem;
    flex-wrap: wrap;
}

.ep-price-hero__color-icon {
    color: var(--ep-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ep-price-hero__color-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ep-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.ep-price-hero__color-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ep-text);
    line-height: 1.35;
    word-break: break-word;
}

/* ============================================
   EP Price Hero — Responsive
   ============================================ */

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .ep-price-hero__amount {
        font-size: 1.5rem;
    }

    .ep-price-hero__card {
        padding: 0.75rem 0.875rem;
        gap: 0.4rem;
    }
}

@media only screen and (max-width: 768px) {
    .ep-price-hero {
        margin: 0.5rem 0;
    }

    .ep-price-hero__card {
        padding: 0.75rem;
        border-radius: var(--ep-radius-sm);
        gap: 0.375rem;
    }

    .ep-price-hero__amount {
        font-size: 1.45rem;
    }

    .ep-price-hero__old-price {
        font-size: 0.82rem;
    }

    .ep-price-hero__market-row {
        font-size: 0.78rem;
    }

    .ep-price-hero__save-row {
        font-size: 0.78rem;
        padding: 0.3rem 0.5rem;
    }

    .ep-price-hero__color-value {
        font-size: 0.78rem;
    }
}

@media only screen and (max-width: 576px) {
    .ep-price-hero__card {
        padding: 0.625rem 0.75rem;
        gap: 0.3rem;
    }

    .ep-price-hero__amount {
        font-size: 1.25rem;
    }

    .ep-price-hero__badge {
        font-size: 0.68rem;
        padding: 0.2rem 0.45rem;
    }

    .ep-price-hero__discount-rate {
        font-size: 0.68rem;
        padding: 0.4rem 0.2rem;
    }

    .ep-price-hero__discount-timer {
        font-size: 0.6rem;
    }

    .ep-price-hero__discount-text {
        font-size: 0.58rem;
        max-width: 140px;
    }

    .ep-price-hero__old-price {
        font-size: 0.75rem;
    }

    .ep-price-hero__market-row {
        font-size: 0.72rem;
        gap: 0.3rem;
    }

    .ep-price-hero__save-row {
        font-size: 0.72rem;
        padding: 0.25rem 0.4rem;
    }

    .ep-price-hero__baloon-rate {
        font-size: 0.6rem;
        padding: 0.1rem 0.35rem;
    }

    .ep-price-hero__color-row {
        font-size: 0.75rem;
    }

    .ep-price-hero__color-value {
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 380px) {
    .ep-price-hero__amount {
        font-size: 1.1rem;
    }

    .ep-price-hero__card {
        padding: 0.5rem 0.625rem;
        gap: 0.25rem;
    }

    .ep-price-hero__color-value {
        font-size: 0.7rem;
    }
}

/* --- Print Styles --- */
@media print {
    #prod-detail .well,
    #prod-detail .prod-detail-card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .add-to-fav,
    #btnAddToCart,
    #toggleSizeOptions {
        display: none !important;
    }
}

/* ============================================
   EKS — Ek Seçenekler (prod-detail içi)
   ============================================ */
.eks-option-section {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.875rem 1rem 0.75rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
}

.eks-option-section--required {
    border-left: 3px solid var(--ep-primary, #FF7F00);
}

.eks-option-section p {
    margin-bottom: 0;
}

.eks-step {
}

.eks-step__badge {
    width: 38px;
    height: 38px;
    min-width: 38px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    flex-shrink: 0;
}

.eks-step__label {
    flex: 1;
    min-width: 0;
}

.eks-step__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ep-text);
    line-height: 1.3;
}

.eks-step__desc {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.45;
}

.eks-step__info {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #3b7dd8;
    background: #eef6ff;
    border: 1px solid #c6dcf5;
    border-radius: 20px;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.eks-step__info:hover {
    background: #ddeeff;
    border-color: #7ab3eb;
    color: #2a5fa8;
}

/* --- Optional Step Collapse Toggle --- */
.eks-step.ep-optional-collapsible {
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-radius: var(--ep-radius-sm, 8px);
    padding: 0.5rem 0.75rem 0.625rem;
    margin: 0 -0.75rem;
    align-items: center;
}

.eks-step.ep-optional-collapsible:hover {
    background-color: rgba(0,0,0,0.03);
}

.eks-step.ep-optional-collapsible .eks-step__badge,
.eks-step.ep-optional-collapsible .eks-step__info {
    margin-top: 0;
}

.eks-step.ep-optional-collapsible .eks-step__badge {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.eks-step.ep-optional-collapsible .ep-optional-collapse-icon {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    transition: transform 0.25s ease;
    margin-top: 0;
}

.eks-step.ep-optional-collapsible:not(.collapsed) .ep-optional-collapse-icon {
    transform: rotate(180deg);
}

/* --- Optional section: ep-step--collapsible referansı --- */
.eks-option-section.ep-addprod-optional {
    background: #fff;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    padding: 0;
    margin-bottom: 0.625rem;
    box-shadow: none;
    overflow: hidden;
}

.eks-option-section.ep-addprod-optional > .ep-step--sf {
    margin: 0;
    width: 100%;
    border: none;
    border-radius: 0;
}

.eks-option-section.ep-addprod-optional > .ep-step--sf[aria-expanded="true"] {
    border-bottom: 1px solid #e0e0e0;
}

.eks-option-section.ep-addprod-optional > .collapse,
.eks-option-section.ep-addprod-optional > .collapsing {
    margin: 0;
    padding: 0.75rem 1rem 1rem;
}

.eks-option-section.ep-addprod-optional:hover {
    background: rgba(255, 127, 0, 0.06);
    box-shadow: 0 0 0 1px rgba(255, 127, 0, 0.15);
    border-color: rgba(255, 127, 0, 0.4);
}

.eks-option-section.ep-addprod-optional:hover .ep-optional-collapse-icon {
    color: var(--ep-primary, #FF7F00);
}

.eks-option-section.ep-addprod-optional:has(.collapse.collapsing) {
    overflow: hidden;
}

.eks-option-section.ep-addprod-optional .collapse .eks-check-group {
    gap: 0.625rem;
}

.eks-option-section.ep-addprod-optional .collapse .eks-check-card {
    border-radius: 10px;
    border-color: #e2e8f0;
}

.eks-option-section.ep-addprod-optional .collapse .eks-check-card:hover {
    border-color: rgba(255, 127, 0, 0.5);
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.08);
}

.eks-option-section.ep-addprod-optional .collapse .eks-check-card--checked {
    border-color: var(--ep-primary, #FF7F00);
    background: linear-gradient(135deg, #fff8f0 0%, #fff5eb 100%);
    box-shadow: 0 0 0 1px var(--ep-primary), 0 2px 8px rgba(255, 127, 0, 0.12);
}

.eks-option-section.ep-addprod-optional .collapse .eks-check-card--checked .eks-check-card__name {
    color: var(--ep-primary-dark, #1e293b);
}

.eks-option-section.ep-addprod-optional .collapse .eks-check-card__price {
    color: var(--ep-primary, #FF7F00);
}

.eks-step.ep-optional-collapsible {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 10px;
}

.eks-step.ep-optional-collapsible.collapsed {
    padding: 0.75rem 1rem;
}

.eks-step.ep-optional-collapsible:hover {
    background: transparent;
}

.eks-combo-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.eks-addprod-img {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important;
    border-radius: 50%;
    object-fit: cover !important;
    display: block;
    border: 2px solid #e2e8f0;
}

.eks-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.eks-radio-card {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    background: #fff;
    overflow: hidden;
    transition: all 0.2s ease;
}

.eks-radio-card:hover {
    border-color: #c4b5fd;
    background: #faf8ff;
}

.eks-radio-card--selected {
    border-color: #7c3aed !important;
    background: linear-gradient(135deg, #faf5ff 0%, #f3eeff 100%) !important;
    box-shadow: 0 2px 12px rgba(124,58,237,0.1);
}

.eks-radio-card--selected::after {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 0.5rem;
    right: 0.625rem;
    color: #7c3aed;
    font-size: 0.95rem;
}

.eks-radio-card__img {
    flex-shrink: 0;
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 8px;
    object-fit: cover !important;
    border: 1px solid #e2e8f0;
}

.eks-radio-card__body { flex: 1; min-width: 0; }

.eks-radio-card__header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.eks-radio-card__header input[type="radio"] {
    accent-color: #7c3aed;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

.eks-radio-card__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    line-height: 1.35;
}

.eks-radio-card--selected .eks-radio-card__name { color: #5b21b6; }

.eks-radio-card__price-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-left: 26px;
    margin-top: 4px;
}

.eks-radio-card__price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ep-primary, #FF7F00);
    line-height: 1.2;
    white-space: nowrap;
}

.eks-radio-card__kdv {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}

.eks-radio-card__unit-label {
    font-size: 0.7rem;
    color: #64748b;
    display: block;
    padding-left: 26px;
    margin-top: 2px;
}

.eks-radio-card__discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
}

.eks-radio-card__old-price {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 500;
}

.eks-radio-card__free-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #10b981;
    font-weight: 700;
    font-size: 0.8rem;
    padding-left: 26px;
    margin-top: 4px;
}

.eks-check-card {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: #fff;
    overflow: hidden;
    transition: all 0.2s ease;
}

.eks-check-card:hover {
    border-color: #93c5fd;
    background: #f0f7ff;
}

.eks-check-card--checked {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
}

.eks-check-card__body { flex: 1; min-width: 0; }

.eks-check-card__header {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
}

.eks-check-card__header input[type="checkbox"] {
    accent-color: #3b82f6;
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    cursor: pointer;
    margin: 0;
}

.eks-check-card__name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.eks-check-card__price-info {
    padding-left: 26px;
    margin-top: 4px;
}

.eks-check-card__price {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ep-primary, #FF7F00);
    line-height: 1.2;
}

.eks-check-card__kdv {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
    margin-left: 4px;
}

.eks-check-card__img {
    flex-shrink: 0;
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 8px;
    object-fit: cover !important;
    border: 1px solid #e2e8f0;
}

/* --- Ep Info Box (sade bilgi kartı) --- */
.ep-info-box {
    border: 1px solid var(--ep-border, #e2e8f0);
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden;
}

.ep-info-box__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ep-primary-dark, #1e293b);
    background: linear-gradient(135deg, #fff8f0 0%, #fff5eb 100%);
    border-bottom: 1px solid var(--ep-border, #e2e8f0);
}

.ep-info-box__header i {
    color: var(--ep-primary, #FF7F00);
    font-size: 1rem;
}

.ep-info-box__list {
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #64748b;
    list-style: none;
}

.ep-info-box__list li {
    position: relative;
    padding-left: 0.75rem;
    margin-bottom: 0.35rem;
}

.ep-info-box__list li:last-child {
    margin-bottom: 0;
}

.ep-info-box__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ep-primary, #FF7F00);
}

.eks-info-collapse {
    border: 1px solid #e0ecff;
    border-radius: 8px;
    background: #f8fbff;
    overflow: hidden;
    margin-top: 0.5rem;
}

.eks-info-collapse .ep-info-offcanvas__body {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.eks-desc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #7c3aed;
    text-decoration: none !important;
    font-weight: 500;
    margin-top: 0.25rem;
}

.eks-desc-link:hover {
    color: #5b21b6;
    text-decoration: underline !important;
}

.eks-option-msg {
    color: var(--ep-primary, #FF7F00);
    font-weight: 600;
    font-size: 0.82rem;
}

.eks-single-top-img {
    display: block;
    max-width: 80px !important;
    height: auto !important;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

/* ── Ek Seçenekler Modal ── */
.ep-eks-modal .modal-dialog {
    max-width: 820px;
    margin: 1rem auto;
}
.ep-eks-modal__content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}
.ep-eks-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.ep-eks-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
}
.ep-eks-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    transition: all .15s ease;
}
.ep-eks-modal__close:hover {
    background: #eee;
    color: #1a1a1a;
}
.ep-eks-modal__body {
    position: relative;
    padding: 0;
    min-height: 350px;
    background: #fafafa;
}
.ep-eks-modal__iframe {
    display: block;
    width: 100%;
    min-height: 450px;
    height: 60vh;
    max-height: 75vh;
    border: none;
}
.ep-eks-modal__loader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(255,255,255,.85);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: #999;
}
.ep-eks-modal__loader i {
    font-size: 28px;
    color: #FF6000;
}
.ep-eks-modal--loading .ep-eks-modal__loader {
    display: flex;
}

@media (max-width: 1024px) {
    .ep-eks-modal.modal {
        padding: 0 !important;
    }
    .ep-eks-modal .modal-dialog {
        max-width: none !important;
        width: 100vw !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .ep-eks-modal .modal-content {
        border: 0 !important;
        border-radius: 0 !important;
        height: 100% !important;
    }
    .ep-eks-modal__iframe {
        height: calc(100vh - 63px) !important;
        max-height: none !important;
        min-height: 0 !important;
    }
}

/* ── Ek Seçenekler Offcanvas (Mobil) ── */
.ep-eks-oc {
    height: 100% !important;
    border: none !important;
    border-radius: 16px 16px 0 0;
    transition: transform .3s ease;
}
.ep-eks-oc__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.ep-eks-oc__back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 18px;
    color: #333;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.ep-eks-oc__title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ep-eks-oc__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: #f5f5f5;
    border-radius: 50%;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    flex-shrink: 0;
}
.ep-eks-oc__close:hover {
    background: #eee;
    color: #1a1a1a;
}
.ep-eks-oc__body {
    position: relative;
    flex: 1;
    overflow: hidden;
    background: #fafafa;
}
.ep-eks-oc__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
.ep-eks-oc__loader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(255,255,255,.85);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: #999;
}
.ep-eks-oc__loader i {
    font-size: 28px;
    color: #FF6000;
}
.ep-eks-oc--loading .ep-eks-oc__loader {
    display: flex;
}
.ep-eks-oc {
    z-index: 1060 !important;
}

/* ==============================================
   Inactive / Out-of-Stock Product Styles
   ============================================== */

.ep-inactive-product {
    margin-top: 1rem;
}

.ep-inactive-product__card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--ep-bg-white);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--ep-shadow-sm);
}

.ep-inactive-product__img-wrap {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--ep-radius-md);
    overflow: hidden;
    background: #f9fafb;
}

.ep-inactive-product__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(25%) opacity(0.8);
    transition: filter 0.3s ease;
}

.ep-inactive-product__img-wrap:hover .ep-inactive-product__img {
    filter: grayscale(0%) opacity(1);
}

.ep-inactive-product__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ep-inactive-product__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    border: 1px solid #fecaca;
    width: fit-content;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ep-inactive-product__badge i {
    font-size: 0.75rem;
}

.ep-inactive-product__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ep-text);
    line-height: 1.3;
    margin: 0;
}

.ep-inactive-product__message {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--ep-radius-sm);
}

.ep-inactive-product__icon-circle {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef3c7;
    border: 1.5px solid #fbbf24;
    border-radius: 50%;
    color: #d97706;
    font-size: 0.8125rem;
}

.ep-inactive-product__heading {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #92400e;
    margin: 0;
}

.ep-inactive-product__desc {
    font-size: 0.75rem;
    font-weight: 400;
    color: #a16207;
    margin: 0.125rem 0 0;
    line-height: 1.4;
}

.ep-inactive-product__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-self: center;
}

.ep-inactive-product__btn {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ep-inactive-product__btn--primary {
    background: linear-gradient(135deg, #ff7f00 0%, #f97316 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(255, 127, 0, 0.25);
}

.ep-inactive-product__btn--primary:hover {
    background: linear-gradient(135deg, #e67200 0%, #ea580c 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(255, 127, 0, 0.4);
    transform: translateY(-1px);
}

.ep-inactive-product__btn--primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(255, 127, 0, 0.3);
}

.ep-inactive-product__btn--outline {
    background: var(--ep-bg-white);
    color: var(--ep-text-muted);
    border: 1.5px solid var(--ep-border);
}

.ep-inactive-product__btn--outline:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: var(--ep-text);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ep-inactive-product__btn--outline:active {
    transform: translateY(0);
}

.ep-inactive-product .ep-rel-prods {
    margin-top: 1.5rem;
}

/* --- Responsive: Mobile (< 768px) --- */
@media (max-width: 767.98px) {
    .ep-inactive-product__card {
        flex-direction: column;
        align-items: stretch;
        gap: 0.875rem;
        padding: 1rem;
    }

    .ep-inactive-product__img-wrap {
        width: 100px;
        height: 100px;
        align-self: center;
    }

    .ep-inactive-product__info {
        text-align: center;
        align-items: center;
    }

    .ep-inactive-product__message {
        flex-direction: column;
        text-align: center;
        gap: 0.375rem;
    }

    .ep-inactive-product__actions {
        width: 100%;
    }

    .ep-inactive-product__btn {
        width: 100%;
    }
}

/* ============================================
   Fancybox / Carousel - Product Image Gallery
   ============================================ */

#productContainer {
    --product-view-height: 680px;
}

#productContainer .f-thumbs.is-classic.is-vertical {
    height: var(--product-view-height, 100%);
}

.f-thumbs.is-classic {
    --f-thumb-width: 45px;
    --f-thumb-height: 68px;
    --f-thumb-gap: 0.5rem;
    --f-thumb-opacity: 1;
    --f-thumb-selected-opacity: 0.2;
    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;
    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;
}

.f-thumbs.is-classic .f-thumbs__slide__img {
    object-fit: contain;
}

.desktop-prod-gallery .f-thumbs__viewport,
.desktop-prod-gallery .f-thumbs {
    background-color: #fff !important;
}

.f-thumbs.is-classic .f-carousel__nav .f-button[disabled] {
    display: none;
}

#productCarousel {
    --f-carousel-spacing: 0;
    --f-button-width: 48px;
    --f-button-height: 48px;
    --f-button-border-radius: 50%;
    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;
    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;
    --f-button-svg-width: 28px;
    --f-button-svg-height: 28px;
    --f-button-svg-stroke-width: 1;
    --f-button-svg-filter: none;
    height: 100%;
}

#productCarousel .f-carousel__slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#productCarousel .f-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#productCarousel .f-carousel__nav {
    opacity: 0;
    transition: opacity 0.15s;
}

@media (hover: hover) {
    #productCarousel:hover .f-carousel__nav {
        opacity: 1;
    }
}

.fancybox__container {
    --fancybox-color: #0d0c22;
    --fancybox-bg: #fff;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
}

.fancybox__toolbar,
.fancybox__nav {
    --f-button-width: 60px;
    --f-button-height: 60px;
    --f-button-border-radius: 0;
    --f-button-color: #0d0c22;
    --f-button-hover-color: #ff3520;
    --f-button-bg: #fff;
    --f-button-hover-bg: #fff;
    --f-button-active-bg: #fff;
    --f-button-svg-width: 32px;
    --f-button-svg-height: 32px;
    --f-button-svg-stroke-width: 1;
    --f-button-svg-filter: none;
}

.fancybox__nav {
    --f-button-next-pos: 0;
    --f-button-prev-pos: 0;
}

.breadcrumb {
    overflow-x: auto;
    display: flex;
    scrollbar-width: thin;
}

.breadcrumb li {
    flex: none;
}

/* ── Skeleton Loading (Lazy Section) ── */
@keyframes ep-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ep-rel-skeleton {
    display: flex;
    gap: 10px;
    overflow: hidden;
    padding: 4px 0;
}

.ep-skeleton-card {
    flex: 0 0 calc(50% - 5px);
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.ep-skeleton-img {
    width: 100%;
    padding-bottom: 120%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ep-shimmer 1.4s ease-in-out infinite;
}

.ep-skeleton-line {
    margin: 10px 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ep-shimmer 1.4s ease-in-out infinite;
}

.ep-skeleton-line--title {
    height: 14px;
    width: 80%;
}

.ep-skeleton-line--price {
    height: 16px;
    width: 50%;
    margin-bottom: 14px;
}

@media (min-width: 576px) {
    .ep-skeleton-card {
        flex: 0 0 calc(33.333% - 8px);
    }
}

@media (min-width: 992px) {
    .ep-skeleton-card {
        flex: 0 0 calc(20% - 13px);
    }
}

/* ============================================
   EPerde - Product Detail Tabs
   Modern E-Commerce Tab Design
   ============================================ */

/* ==============================
   RELATED PRODUCTS
   ============================== */
.ep-rel-prods {
    margin-top: 24px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
    overflow: hidden;
}

.ep-rel-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 24px 16px;
    background: linear-gradient(135deg, #fef9f4 0%, #fff5ec 50%, #fff 100%);
    border-bottom: 1px solid rgba(255, 106, 0, 0.08);
}

.ep-rel-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff6a00, #ff8c33);
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 106, 0, 0.25);
}

.ep-rel-header-text {
    min-width: 0;
}

.ep-rel-header-text h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.ep-rel-header-text p {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: #888;
    font-weight: 400;
    line-height: 1.4;
}

.ep-rel-viewall {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #ff6a00;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(255, 106, 0, 0.08);
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.ep-rel-viewall i {
    font-size: 10px;
    transition: transform 0.2s;
}

.ep-rel-viewall:hover,
.ep-rel-viewall:focus {
    color: #fff;
    background: #ff6a00;
    text-decoration: none;
}

.ep-rel-viewall:hover i {
    transform: translateX(2px);
}

.ep-rel-prods .dynamicRelProdsContent {
    padding: 16px 0 8px;
}

.ep-rel-swiper .ep-slide .img-wrapper {
    aspect-ratio: 3 / 4 !important;
}

.ep-rel-swiper .ep-slide .prod-name {
    display: block !important;
    -webkit-line-clamp: unset !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 10px 12px 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: #2d3436 !important;
    height: 29px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}

.ep-rel-swiper .ep-slide .product-item-v2 .ep-trust-strip,
.ep-rel-swiper .ep-slide .product-item-v2 > a > span[id^="prodVariant_"] {
    height: 20px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
    padding: 2px 12px !important;
}

.ep-rel-swiper .ep-slide .dot { width: 8px !important; height: 8px !important; min-width: 8px !important; border-width: 1px !important; }
.ep-rel-swiper .ep-slide .dot--more { width: auto !important; min-width: 8px !important; height: 8px !important; font-size: 6px !important; padding: 0 2px !important; }
.ep-rel-swiper .ep-slide .ep-variant-dots { gap: 2px !important; }
.ep-rel-swiper .ep-slide .ep-trust-strip:has(.ep-trust-item + .ep-trust-item) .ep-trust-item:last-child { display: none !important; }
.ep-rel-swiper .ep-slide .baloon-price-header { display: none !important; }
.ep-rel-swiper .ep-slide .price-area:has(.baloon-price-footer) .price-wrapper { display: none !important; }
.ep-rel-swiper .ep-slide .price-area { padding: 6px 0 0 !important; font-size: 12px !important; flex-grow: 1 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; }
.ep-rel-swiper .ep-slide .price-area br { display: none !important; }
.ep-rel-swiper .ep-slide .price-wrapper { display: flex !important; flex-direction: column !important; gap: 2px !important; line-height: 1.4 !important; width: 100% !important; position: static !important; top: auto !important; padding: 6px 12px 4px !important; }
.ep-rel-swiper .ep-slide .priceText > span:last-child { font-size: 16px !important; }
.ep-rel-swiper .ep-slide .baloon-price-footer { margin: 0 10px 8px !important; padding: 8px 10px !important; border-radius: 10px !important; min-height: 44px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
.ep-rel-swiper .ep-slide .baloon-price-footer-empty { margin: 0 10px 8px !important; padding: 8px 10px !important; min-height: 44px !important; }
.ep-rel-swiper .ep-slide .item-comment { display: none !important; }
.ep-rel-swiper .ep-slide .ep-card-opts-row { display: none !important; }
.ep-rel-swiper .ep-slide [id="discountWrapperProdItemNew"] { display: none !important; }
.ep-rel-swiper .ep-slide .campaign-wrapper { display: none !important; }
.ep-rel-swiper .ep-slide .product-item-v2 > a > span:not([class]):not([style]) { display: none !important; }
.ep-rel-swiper .ep-slide .video-izle { padding: 2px 5px 2px 3px !important; font-size: 7px !important; gap: 2px !important; border-radius: 12px !important; }
.ep-rel-swiper .ep-slide .video-izle i { width: 16px !important; height: 16px !important; font-size: 6px !important; }
.ep-rel-swiper .ep-slide .video-izle span { font-size: 7px !important; }

@media (max-width: 767px) {
    .ep-rel-prods {
        margin-top: 16px;
        border-radius: 12px;
    }

    .ep-rel-header {
        padding: 16px 16px 12px;
        gap: 10px;
    }

    .ep-rel-header-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 14px;
    }

    .ep-rel-header-text h4 {
        font-size: 1rem;
    }

    .ep-rel-header-text p {
        font-size: 0.75rem;
    }

    .ep-rel-viewall {
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 6px;
    }

    .ep-rel-prods .dynamicRelProdsContent {
        padding: 10px 0 4px;
    }

    .ep-rel-swiper {
        padding: 0 8px;
    }

    .ep-rel-swiper .ep-slide .prod-name {
        padding: 8px 8px 0 !important;
        font-size: 11px !important;
        height: 25px !important;
    }

    .ep-rel-swiper .ep-slide .price-area {
        padding: 4px 0 0 !important;
        font-size: 11px !important;
    }

    .ep-rel-swiper .ep-slide .baloon-price-footer {
        margin: 0 6px 6px !important;
        padding: 6px 8px !important;
        min-height: 38px !important;
    }

    .ep-rel-swiper .ep-slide .baloon-price-footer-empty {
        margin: 0 6px 6px !important;
        min-height: 38px !important;
    }
}

/* ============================================
   TAB CONTAINER
   ============================================ */
.pdt-tabs {
    margin-top: 1.5rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ============================================
   DESKTOP TAB NAVIGATION
   ============================================ */
.pdt-tab-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    background: #fafafa;
    border-bottom: 2px solid #e5e7eb;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

/* Sticky state (JS-controlled, desktop only) */
@media (min-width: 992px) {
    .pdt-tab-nav--sticky {
        position: fixed !important;
        z-index: 1020;
        background: #fff;
        border-bottom: 2px solid #e5e7eb;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    .pdt-tab-nav-placeholder {
        background: #fafafa;
        border-bottom: 2px solid #e5e7eb;
    }
}

.pdt-tab-nav::-webkit-scrollbar {
    display: none;
}

.pdt-tab-nav .nav-item {
    flex-shrink: 0;
}

.pdt-tab-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    position: relative;
}

.pdt-tab-nav .nav-link:hover {
    color: #374151;
    background: rgba(0, 0, 0, 0.02);
}

.pdt-tab-nav .nav-link:focus-visible {
    outline: 2px solid var(--ep-primary);
    outline-offset: -2px;
}

.pdt-tab-nav .nav-link.active {
    color: var(--ep-primary, #ff6a00);
    border-bottom-color: var(--ep-primary, #ff6a00);
    background: #fff;
    font-weight: 700;
}

.pdt-tab-nav .nav-link i {
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.pdt-tab-nav .nav-link.active i {
    opacity: 1;
}

/* ============================================
   MOBILE/TABLET ACTION NAVIGATION (vertical)
   ============================================ */
.pdt-action-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-bottom: none;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow: visible;
}

.pdt-action-nav .nav-item {
    flex-shrink: 1;
    border-bottom: 1px solid #f0f0f0;
}

.pdt-action-nav .nav-item:last-child {
    border-bottom: none;
}

.pdt-action-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #1d1d1f;
    background: #fff;
    border: none;
    border-bottom: none;
    margin-bottom: 0;
    white-space: normal;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: -0.01em;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: left;
}

.pdt-action-nav .nav-link:hover {
    background: #fafafa;
    color: var(--ep-primary, #ff6a00);
}

.pdt-action-nav .nav-link:active {
    background: #f5f5f5;
}

.pdt-action-nav .nav-link i:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f8f9fa;
    color: var(--ep-primary, #ff6a00);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.pdt-action-nav .nav-link:hover i:first-child {
    background: var(--ep-primary, #FF7F00);
    color: #fff;
    transform: scale(1.05);
}

.pdt-action-nav .nav-link span:first-of-type {
    flex: 1;
    min-width: 0;
}

.pdt-nav-arrow {
    color: #c0c0c0;
    font-size: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    transition: color 0.2s ease, transform 0.2s ease;
}

.pdt-action-nav .nav-link:hover .pdt-nav-arrow {
    color: var(--ep-primary, #ff6a00);
    transform: translateX(3px) scale(1) !important;
    background: none !important;
}

.pdt-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    background: var(--ep-primary, #ff6a00);
    border-radius: 11px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.28);
    transform: translateZ(0);
    will-change: transform, box-shadow, filter;
}

.pdt-tab-nav .nav-link:not(.active) .pdt-tab-badge {
    background: #9ca3af;
}

/* Badge reveal animation (starts when badge enters viewport) */
.pdt-tab-badge.pdt-badge-reveal-active {
    animation: pdtBadgeReveal 900ms cubic-bezier(0.18, 0.88, 0.32, 1.28) 1,
               pdtBadgePulseGlow 1900ms ease-in-out 900ms 1;
}

@keyframes pdtBadgeReveal {
    0% {
        transform: translateY(10px) scale(0.78) rotate(-14deg);
        opacity: 0;
        filter: blur(0.8px);
    }
    55% {
        transform: translateY(-3px) scale(1.12) rotate(6deg);
        opacity: 1;
        filter: blur(0);
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes pdtBadgePulseGlow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(255, 106, 0, 0.28);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(255, 106, 0, 0.15), 0 8px 20px rgba(255, 106, 0, 0.35);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pdt-tab-badge.pdt-badge-reveal-active {
        animation: none;
    }
}

/* ============================================
   TAB CONTENT
   ============================================ */
.pdt-tab-content {
    background: #fff;
}

.pdt-tab-content > .tab-pane {
    padding: 2rem 2rem 2.5rem;
}

/* ============================================
   SECTION HEADER (shared across all tabs)
   ============================================ */
.pdt-section-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
}

.pdt-section-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
}

.pdt-section-subtitle {
    font-size: 0.92rem;
    color: #6b7280;
    font-weight: 400;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.5;
}

/* FAQ Accordion */
.pdt-faq-accordion {
    border: none;
}

.pdt-faq-item {
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent;
}

.pdt-faq-item:last-child {
    border-bottom: none !important;
}

.pdt-faq-btn {
    background: transparent !important;
    box-shadow: none !important;
    padding: 1.1rem 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1d1d1f;
    gap: 0.75rem;
    align-items: center;
    transition: color 0.2s ease;
}

.pdt-faq-btn:not(.collapsed) {
    color: #FF7F00;
}

.pdt-faq-btn::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-size: 1rem;
    transition: transform 0.25s ease;
}

.pdt-faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 700;
    transition: background 0.2s ease, color 0.2s ease;
}

.pdt-faq-btn:not(.collapsed) .pdt-faq-num {
    background: #FF7F00;
    color: #fff;
}

.pdt-faq-answer {
    padding: 0 0.5rem 1.25rem 3.25rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: #4b5563;
}

/* ==============================
   REDACTOR CONTENT OUTPUT STYLES
   (accordion, collapse, toc, icons)
   ============================== */

/* --- Accordion --- */
[data-block="accordion"] {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0;
}

[data-accordion-item] {
    border-bottom: 1px solid #e5e7eb;
}

[data-accordion-item]:last-child {
    border-bottom: none;
}

[data-accordion-trigger] {
    background: #f8f9fb;
    padding: 14px 44px 14px 18px;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background .2s, color .2s;
}

[data-accordion-trigger]:hover {
    background: #eef1f6;
}

[data-accordion-trigger]::after {
    content: '\f078';
    font-family: 'Font Awesome 7 Pro';
    font-weight: 900;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: #9ca3af;
    transition: transform .25s ease;
}

[data-accordion-item].rx-acc-open [data-accordion-trigger] {
    background: #eef1f6;
    color: #2563eb;
}

[data-accordion-item].rx-acc-open [data-accordion-trigger]::after {
    transform: translateY(-50%) rotate(180deg);
    color: #2563eb;
}

[data-accordion-content] {
    padding: 16px 18px;
    background: #fff;
    display: none;
}

[data-accordion-item].rx-acc-open [data-accordion-content] {
    display: block;
}

/* --- Collapse (rx-hidden / rx-collapsed) --- */
.rx-hidden {
    display: none !important;
}

.rx-collapsed {
    position: relative;
    cursor: pointer;
}

.rx-collapsed::before {
    content: "\203A";
    position: absolute;
    left: -14px;
    top: 50%;
    margin-top: -8px;
    font-size: 16px;
    line-height: 1;
    color: #9ca3af;
}

/* --- Table of Contents --- */
.rx-toc {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #f8f9fb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.rx-toc-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: #1f2937;
}

.rx-toc-list,
.rx-toc-sublist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rx-toc-sublist {
    padding-left: 18px;
}

.rx-toc-item {
    padding: 4px 0;
}

.rx-toc-item a {
    color: #2563eb;
    text-decoration: none;
    font-size: 0.9rem;
}

.rx-toc-item a:hover {
    text-decoration: underline;
}

/* --- Layout Grid --- */
[data-block="layout"],
.rx-layout-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px;
}

[data-block="column"] {
    min-width: 0;
    flex: 1 1 0%;
}

@media (max-width: 575.98px) {
    [data-block="layout"],
    .rx-layout-grid {
        flex-direction: column;
        gap: 16px;
    }

    [data-block="column"] {
        flex-basis: 100% !important;
    }
}

/* --- Icons --- */
.icon.icon-text {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.icon.icon-text svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* --- Redactor Image Zoom --- */
.pdt-faq-answer img,
[data-block="accordion"] img {
    cursor: zoom-in;
    transition: opacity 0.2s ease;
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.pdt-faq-answer img:hover,
[data-block="accordion"] img:hover {
    opacity: 0.85;
}

/* FAQ Search */
.pdt-faq-search-wrap {
    position: relative;
    margin-bottom: 1rem;
    background: #f5f5f7;
    border-radius: 10px;
    overflow: hidden;
}

.pdt-faq-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 0.85rem;
    pointer-events: none;
}

.pdt-faq-search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.7rem 2.2rem 0.7rem 2.4rem;
    font-size: 0.9rem;
    color: #1d1d1f;
}

.pdt-faq-search-input::placeholder {
    color: #9ca3af;
}

.pdt-faq-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #d1d5db;
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.15s ease;
}

.pdt-faq-search-clear:hover {
    background: #9ca3af;
}

.pdt-faq-item.faq-hidden {
    display: none !important;
}

.faq-highlight {
    background: #fff3cd;
    color: #1d1d1f;
    border-radius: 2px;
    padding: 0 1px;
}

.pdt-faq-no-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: #9ca3af;
    font-size: 0.92rem;
}

.pdt-faq-no-result i {
    font-size: 1.8rem;
}

/* ============================================
   TAB: Product Description
   ============================================ */
#pdt-desc {
    background: #fff;
}

.pdt-desc-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    text-align: center;
    padding-bottom: 0;
    border-bottom: none;
}

.pdt-desc-body {
    max-width: 100%;
    font-size: 1rem;
    color: #424245;
    line-height: 1.75;
}

.pdt-desc-body img {
    width: 100%;
    border-radius: 12px;
    margin: 1.5rem 0;
}

/* Specs Grid */
.pdt-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.pdt-spec-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pdt-spec-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.pdt-spec-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: var(--ep-primary, #ff6a00);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.pdt-spec-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    display: block;
    margin-bottom: 0.2rem;
}

.pdt-spec-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1d1d1f;
    display: block;
}

/* ============================================
   TAB: Comments
   ============================================ */
#pdt-comments {
    background: #fafafa;
}

.pdt-comments {
    margin-top: 0;
}

/* Score Summary Card */
.pdt-score-summary {
    background: #fff;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.pdt-score-summary > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
}

.pdt-score-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(160deg, #fff8f0 0%, #fff 100%);
    text-align: center;
    min-height: 180px;
}

.pdt-big-score {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1d1d1f;
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.04em;
}

.pdt-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 0.5rem;
}

.pdt-stars i {
    font-size: 1.15rem;
    color: #fbbf24;
}

.pdt-stars i.fa-regular {
    color: #d1d5db;
}

.pdt-total-reviews {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
}

.pdt-score-right {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.875rem;
}

.pdt-score-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pdt-score-label {
    flex: 0 0 150px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #424245;
}

.pdt-score-bar {
    flex: 1;
    height: 6px;
    background: #e8e8ed;
    border-radius: 3px;
    overflow: hidden;
    min-width: 80px;
}

.pdt-score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ep-primary, #ff6a00), #fbbf24);
    border-radius: 3px;
    transition: width 0.8s ease;
}

.pdt-score-val {
    flex: 0 0 32px;
    font-size: 0.82rem;
    font-weight: 700;
    color: #1d1d1f;
    text-align: right;
}

.pdt-score-emoji {
    flex: 0 0 20px;
    font-size: 1rem;
}

.pdt-score-emoji.good { color: var(--ep-success); }
.pdt-score-emoji.bad { color: var(--ep-danger); }

/* Comment Toolbar */
.pdt-comment-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pdt-comment-count {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1d1d1f;
}

.pdt-comment-count span {
    color: var(--ep-primary, #ff6a00);
}

/* ========================================
   Comment Media Gallery
   ======================================== */
.pdt-media-gallery {
    background: #fff;
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.pdt-media-gallery-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.pdt-media-gallery-label i {
    color: var(--ep-primary, #ff6a00);
    font-size: 0.85rem;
}

.pdt-media-gallery-count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 500;
    color: #8b8fa3;
}

.pdt-media-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.pdt-media-scroll::-webkit-scrollbar {
    display: none;
}

.pdt-media-slide {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #eef0f4;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    scroll-snap-align: start;
    flex-shrink: 0;
}

.pdt-media-slide:hover {
    border-color: var(--ep-primary, #ff6a00);
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pdt-media-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdt-media-slide-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
}

.pdt-media-slide-play i {
    color: #fff;
    font-size: 1.25rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

/* ========================================
   Media Lightbox
   ======================================== */
.pdt-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pdt-media-lightbox.active {
    display: flex;
    opacity: 1;
}

.pdt-media-lightbox-dialog {
    background: #fff;
    border-radius: 16px;
    width: 94%;
    max-width: 960px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    position: relative;
}

.pdt-media-lightbox-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #eef0f4;
    flex-shrink: 0;
    background: #fff;
}

.pdt-media-lightbox-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pdt-media-lightbox-close:hover {
    background: #e5e7eb;
    color: #111827;
}

.pdt-media-lightbox-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0;
}

.pdt-media-lightbox-counter {
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--ep-primary, #ff6a00);
    padding: 4px 12px;
    border-radius: 20px;
    flex-shrink: 0;
    line-height: 1.2;
}

.pdt-media-lightbox-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pdt-media-lightbox-main {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.pdt-media-lightbox-visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8f9fb;
    min-width: 0;
    padding: 16px;
    position: relative;
}

.pdt-media-lightbox-media-wrap {
    width: 100%;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.pdt-media-lightbox-visual img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.pdt-media-lightbox-visual video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 8px;
    background: #000;
}

.pdt-media-lightbox-rotate {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-shrink: 0;
}

.pdt-media-lightbox-rotate button {
    width: 36px;
    height: 36px;
    border: 1px solid #e0e3ea;
    background: #fff;
    border-radius: 50%;
    color: #6b7280;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pdt-media-lightbox-rotate button:hover {
    border-color: var(--ep-primary, #ff6a00);
    color: var(--ep-primary, #ff6a00);
    background: #fff8f3;
}

.pdt-media-lightbox-sidebar {
    width: 340px;
    flex-shrink: 0;
    border-left: 1px solid #eef0f4;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: #fff;
}

.pdt-media-lightbox-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 20px 0;
}

.pdt-media-lightbox-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--ep-primary, #ff6a00) 0%, #ff9a44 100%);
    flex-shrink: 0;
    text-transform: uppercase;
}

.pdt-media-lightbox-user-info {
    flex: 1;
    min-width: 0;
}

.pdt-media-lightbox-user-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

.pdt-media-lightbox-verified {
    color: #3b82f6;
    font-size: 0.78rem;
}

.pdt-media-lightbox-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 3px;
}

.pdt-media-lightbox-stars i {
    font-size: 0.78rem;
    color: #fbbf24;
}

.pdt-media-lightbox-stars i.fa-regular {
    color: #dfe1e6;
}

.pdt-media-lightbox-date {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-left: 8px;
}

.pdt-media-lightbox-comment-text {
    margin: 16px 20px;
    padding: 14px 16px;
    background: #f5f6f8;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.65;
    color: #3d3d56;
}

.pdt-media-lightbox-seller-info {
    padding: 0 20px 12px;
    font-size: 0.78rem;
    color: #8b8fa3;
}

.pdt-media-lightbox-seller-info a {
    color: var(--ep-primary, #ff6a00);
    font-weight: 600;
    text-decoration: none;
}

.pdt-media-lightbox-actions {
    padding: 12px 20px;
    border-top: 1px solid #f0f1f5;
    margin-top: auto;
}

.pdt-media-lightbox-actions-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1a1a2e;
}

.pdt-media-lb-useful-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #e0e3ea;
    background: #fff;
    color: #5a5d72;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pdt-media-lb-useful-btn:hover {
    border-color: var(--ep-primary, #ff6a00);
    color: var(--ep-primary, #ff6a00);
    background: #fff8f3;
}

.pdt-media-lightbox-thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #eef0f4;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    background: #fff;
}

.pdt-media-lightbox-thumbs::-webkit-scrollbar {
    display: none;
}

.pdt-media-lb-thumb {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #e0e3ea;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.pdt-media-lb-thumb.active {
    border-color: var(--ep-primary, #ff6a00);
    box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.2);
}

.pdt-media-lb-thumb:hover {
    border-color: var(--ep-primary, #ff6a00);
}

.pdt-media-lb-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pdt-media-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: var(--ep-primary, #ff6a00);
    border-radius: 50%;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 2px 10px rgba(255, 106, 0, 0.3);
    transition: all 0.2s ease;
}

.pdt-media-lightbox-nav:hover {
    background: #e55d00;
    box-shadow: 0 4px 16px rgba(255, 106, 0, 0.4);
    transform: translateY(-50%) scale(1.08);
}

.pdt-media-lightbox-nav.prev {
    left: 10px;
}

.pdt-media-lightbox-nav.next {
    right: 10px;
}

/* Mobile lightbox: fullscreen, vertical layout */
@media (max-width: 767.98px) {
    .pdt-media-lightbox-dialog {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .pdt-media-lightbox-main {
        flex-direction: column;
        overflow-y: auto;
    }

    .pdt-media-lightbox-sidebar {
        width: 100%;
        border-left: none;
        border-top: 1px solid #eef0f4;
        overflow-y: visible;
    }

    .pdt-media-lightbox-visual {
        flex: none;
        padding: 10px;
    }

    .pdt-media-lightbox-media-wrap {
        width: 100%;
        aspect-ratio: 3 / 4;
    }

    .pdt-media-lightbox-rotate {
        margin-top: 6px;
    }

    .pdt-media-lightbox-nav {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .pdt-media-lightbox-nav.prev { left: 6px; }
    .pdt-media-lightbox-nav.next { right: 6px; }

    .pdt-media-lb-thumb {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .pdt-media-lightbox-user { padding: 14px 14px 0; }
    .pdt-media-lightbox-comment-text { margin: 12px 14px; padding: 10px 12px; font-size: 0.82rem; }
    .pdt-media-lightbox-actions { padding: 10px 14px; }
}

/* Comment List */
.pdt-comment-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Single Comment Card */
.pdt-comment-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid #eef0f4;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.pdt-comment-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    border-color: #e0e3ea;
}

/* Comment Header */
.pdt-comment-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.pdt-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--ep-primary, #ff6a00) 0%, #ff9a44 100%);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: 0 3px 10px rgba(255, 106, 0, 0.2);
}

.pdt-user-info {
    flex: 1;
    min-width: 0;
}

.pdt-user-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
}

.pdt-user-location {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.76rem;
    color: #8b8fa3;
    margin-top: 3px;
}

.pdt-user-location i {
    font-size: 0.65rem;
    color: var(--ep-primary, #ff6a00);
}

/* Star Rating */
.pdt-comment-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.pdt-comment-stars i {
    font-size: 0.85rem;
    color: #fbbf24;
}

.pdt-comment-stars i.fa-regular {
    color: #dfe1e6;
}

/* Verified Badge */
.pdt-verified-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
}

.pdt-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #059669;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.pdt-verified-badge i {
    font-size: 0.78rem;
    color: #059669;
}

.pdt-variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #7c3aed;
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-radius: 20px;
    letter-spacing: 0.01em;
}

.pdt-variant-badge i {
    font-size: 0.78rem;
    color: #7c3aed;
}

.pdt-relative-date {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: #8b8fa3;
    margin-left: auto;
}

.pdt-relative-date i {
    font-size: 0.68rem;
    color: #b0b3c4;
}

/* Rating Pills */
.pdt-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pdt-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.15s ease;
}

.pdt-pill:hover {
    transform: translateY(-1px);
}

.pdt-pill.good {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.pdt-pill.good i { color: #22c55e; font-size: 0.82rem; }

.pdt-pill.bad {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.pdt-pill.bad i { color: #ef4444; font-size: 0.82rem; }

/* Product Mini Card */
.pdt-prod-link {
    text-decoration: none !important;
    display: block;
    margin-bottom: 1rem;
}

.pdt-prod-mini {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem;
    background: #f8f9fb;
    border-radius: 12px;
    border: 1px solid #eef0f4;
    transition: all 0.3s ease;
}

.pdt-prod-mini:hover {
    border-color: var(--ep-primary, #ff6a00);
    box-shadow: 0 4px 16px rgba(255, 127, 0, 0.1);
    background: #fff;
}

.pdt-prod-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: #f0f1f5;
}

.pdt-prod-detail {
    flex: 1;
    min-width: 0;
}

.pdt-prod-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pdt-prod-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--ep-success);
    font-weight: 600;
}

.pdt-prod-meta i { font-size: 0.85rem; }
.pdt-prod-size { color: #8b8fa3; font-weight: 500; }

/* Comment Body */
.pdt-comment-body {
    margin-bottom: 1rem;
    padding: 1rem 1.125rem;
    background: #f8f9fb;
    border-radius: 12px;
    border-left: 3px solid var(--ep-primary, #ff6a00);
}

.pdt-comment-subject {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.pdt-comment-text {
    font-size: 0.9rem;
    color: #3d3d56;
    line-height: 1.7;
    margin: 0;
}

.pdt-no-text {
    font-style: italic;
    color: #8b8fa3;
    font-weight: 500;
    font-size: 0.85rem;
}

/* Photo Gallery */
.pdt-gallery {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #fafbfc;
    border-radius: 12px;
    border: 1px dashed #e0e3ea;
}

.pdt-gallery-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
}

.pdt-gallery-label i {
    color: var(--ep-primary, #ff6a00);
    font-size: 0.85rem;
}

.pdt-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.pdt-gallery-item {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #eef0f4;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
}

.pdt-gallery-item:hover {
    border-color: var(--ep-primary, #ff6a00);
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.pdt-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pdt-gallery-item:hover img {
    transform: scale(1.1);
}

.pdt-gallery-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 10px;
}

.pdt-gallery-zoom i {
    color: #fff;
    font-size: 1.25rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.pdt-gallery-item:hover .pdt-gallery-zoom {
    opacity: 1;
}

.pdt-gallery-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdt-gallery-video i {
    color: #fff;
    font-size: 1.75rem;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}

/* Comment Footer */
.pdt-comment-foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.875rem;
    border-top: 1px solid #f0f1f5;
}

.pdt-useful-label {
    font-size: 0.78rem;
    color: #8b8fa3;
    font-weight: 500;
}

.pdt-useful-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid #e0e3ea;
    background: #fff;
    color: #5a5d72;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pdt-useful-btn:hover {
    border-color: var(--ep-primary, #ff6a00);
    color: var(--ep-primary, #ff6a00);
    background: #fff8f3;
    box-shadow: 0 2px 8px rgba(255, 106, 0, 0.1);
}

.pdt-useful-btn:active {
    transform: scale(0.96);
}

.pdt-rating-feedback {
    display: none;
    font-size: 0.78rem;
    color: var(--ep-success);
    font-weight: 600;
}

/* Seller Response */
.pdt-seller-reply {
    margin-top: 1rem;
    padding: 1.125rem 1.25rem;
    background: linear-gradient(135deg, #f0f7ff, #e8f2ff);
    border-radius: 12px;
    border-left: 4px solid #3b82f6;
    position: relative;
}

.pdt-seller-reply::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 24px;
    width: 16px;
    height: 16px;
    background: #f0f7ff;
    border-left: 1px solid #dbeafe;
    border-top: 1px solid #dbeafe;
    transform: rotate(45deg);
}

.pdt-reply-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.pdt-reply-head i { color: #3b82f6; font-size: 0.9rem; }
.pdt-reply-head strong { font-size: 0.85rem; color: #1a1a2e; font-weight: 700; }
.pdt-reply-date { font-size: 0.72rem; color: #8b8fa3; margin-left: auto; }

.pdt-reply-text {
    font-size: 0.875rem;
    color: #3d3d56;
    line-height: 1.65;
    margin: 0;
}

/* Pagination */
.pdt-pagination {
    display: flex;
    justify-content: center;
    padding: 2rem 0 0.5rem;
}

.pdt-pagination .pagination {
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.pdt-pagination .pagination li a,
.pdt-pagination .pagination li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1d1d1f;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pdt-pagination .pagination li a:hover {
    border-color: var(--ep-primary, #ff6a00);
    color: var(--ep-primary, #ff6a00);
    background: var(--ep-primary-light, #fff5ec);
}

.pdt-pagination .pagination li.active a,
.pdt-pagination .pagination li.active span {
    background: var(--ep-primary, #ff6a00);
    border-color: var(--ep-primary, #ff6a00);
    color: #fff;
    cursor: default;
}

/* Loading & Load More */
.pdt-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
}

.pdt-loader img { width: 28px; height: 28px; }

.pdt-load-more {
    text-align: center;
    padding: 1.5rem 0;
}

.pdt-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ep-primary, #ff6a00);
    background: #fff;
    border: 2px solid var(--ep-primary, #ff6a00);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pdt-load-more-btn:hover {
    background: var(--ep-primary, #ff6a00);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 127, 0, 0.25);
}

.pdt-end-msg {
    text-align: center;
    padding: 1.5rem;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: 500;
}

.pdt-end-msg i {
    color: var(--ep-success);
    margin-right: 0.25rem;
}

/* Empty State */
.pdt-empty-comments {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}

.pdt-empty-comments i {
    font-size: 3rem;
    color: #d2d2d7;
    margin-bottom: 1rem;
    display: block;
}

.pdt-empty-comments h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 0.5rem;
}

.pdt-empty-comments p {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

/* Seller Link */
.pdt-all-comments-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ep-primary, #ff6a00);
    background: var(--ep-primary-light, #fff5ec);
    border: 1px solid var(--ep-primary, #ff6a00);
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.pdt-all-comments-link:hover {
    background: var(--ep-primary, #ff6a00);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255, 127, 0, 0.25);
}

/* ============================================
   TAB: Payment & Installments
   ============================================ */
#pdt-payment {
    background: #fff;
}

.pdt-payment-section {
    max-width: 100%;
}

.pdt-payment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.pdt-payment-card {
    position: relative;
    background: #f8f9fa;
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    text-align: center;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.pdt-payment-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ep-primary, #ff6a00), #ffb366);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pdt-payment-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(255, 106, 0, 0.15);
}

.pdt-payment-card:hover::before {
    opacity: 1;
}

.pdt-payment-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #fff;
    color: var(--ep-primary, #ff6a00);
    font-size: 1.25rem;
    margin-bottom: 0.875rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease;
}

.pdt-payment-card:hover .pdt-payment-card-icon {
    transform: scale(1.08);
}

.pdt-payment-card h5 {
    margin: 0 0 0.35rem 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1d1d1f;
}

.pdt-payment-card p {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.45;
}

/* Legacy payment items (backward compat) */
.pdt-payment-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.pdt-payment-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: none;
    transition: all 0.2s ease;
}

.pdt-payment-item:hover {
    background: #f0f0f0;
    transform: translateX(4px);
}

.pdt-payment-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ep-primary, #ff6a00);
    color: #fff;
    border-radius: 10px;
    font-size: 1rem;
}

.pdt-payment-info h5 {
    margin: 0 0 0.25rem 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #1d1d1f;
}

.pdt-payment-info p {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.5;
}

/* ============================================
   TAB: Safe Shopping (Güvenli Alışveriş)
   ============================================ */
#pdt-safeshopping {
    background: #fff;
}

.pdt-safe-shopping {
    max-width: 100%;
}

.pdt-safe-faq {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pdt-safe-faq-item {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #f0f0f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pdt-safe-faq-item:hover {
    border-color: rgba(255, 106, 0, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.pdt-safe-faq-item h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 0.75rem 0;
}

.pdt-safe-faq-item h4 i {
    color: var(--ep-primary, #ff6a00);
    font-size: 1rem;
    flex-shrink: 0;
}

.pdt-safe-faq-item p {
    font-size: 0.88rem;
    color: #424245;
    line-height: 1.7;
    margin: 0;
}

.pdt-safe-faq-item ol {
    padding-left: 1.25rem;
    margin: 0;
}

.pdt-safe-faq-item ol li {
    font-size: 0.88rem;
    color: #424245;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.pdt-safe-faq-item ol li:last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .pdt-safe-faq-item {
        padding: 1rem 1.125rem;
        border-radius: 12px;
    }

    .pdt-safe-faq-item h4 {
        font-size: 0.92rem;
    }

    .pdt-safe-faq-item p,
    .pdt-safe-faq-item ol li {
        font-size: 0.82rem;
    }
}

@media (max-width: 575.98px) {
    .pdt-safe-faq-item {
        padding: 0.875rem 1rem;
        border-radius: 10px;
    }

    .pdt-safe-faq-item h4 {
        font-size: 0.85rem;
        gap: 0.4rem;
    }

    .pdt-safe-faq-item h4 i {
        font-size: 0.88rem;
    }

    .pdt-safe-faq-item p,
    .pdt-safe-faq-item ol li {
        font-size: 0.78rem;
    }
}

/* ============================================
   TAB: Measure / How To
   ============================================ */
#pdt-measure {
    background: #fafafa;
}

.pdt-measure-section {
    max-width: 100%;
}

.pdt-measure-section h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1d1d1f;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.pdt-measure-section p,
.pdt-measure-section ul {
    font-size: 0.92rem;
    color: #424245;
    line-height: 1.75;
}

.pdt-measure-section ul {
    padding-left: 1.25rem;
}

.pdt-measure-section ul li {
    margin-bottom: 0.625rem;
    position: relative;
}

.pdt-measure-section img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 1rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    display: block;
}

/* ============================================
   TAB: Video
   ============================================ */
#pdt-video {
    background: #111;
    color: #fff;
}

#pdt-video .pdt-section-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

#pdt-video .pdt-section-title {
    color: #f5f5f7;
}

#pdt-video .pdt-section-subtitle {
    color: #9ca3af;
}

.pdt-video-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.pdt-video-container iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================
   RESPONSIVE - LARGE SCREENS
   ============================================ */

@media (min-width: 1400px) {
    .pdt-tab-content > .tab-pane {
        padding: 2.5rem 3rem 3rem;
    }

    .pdt-section-title {
        font-size: 1.75rem;
    }

    .pdt-desc-title {
        font-size: 1.75rem;
    }

    .pdt-section-subtitle {
        font-size: 1rem;
        max-width: 640px;
    }

    .pdt-tab-nav .nav-link {
        padding: 18px 28px;
        font-size: 0.95rem;
    }

    .pdt-desc-body {
        font-size: 1.05rem;
    }

    .pdt-specs-grid {
        gap: 1.25rem;
    }

    .pdt-spec-card {
        padding: 1.5rem 1.25rem;
    }

    .pdt-spec-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        border-radius: 12px;
    }

    .pdt-spec-value {
        font-size: 1.05rem;
    }

    .pdt-payment-grid {
        gap: 1.25rem;
    }

    .pdt-payment-card {
        padding: 1.75rem 1.5rem;
    }

    .pdt-payment-card-icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
        border-radius: 14px;
    }

    .pdt-payment-card h5 {
        font-size: 1rem;
    }

    .pdt-payment-card p {
        font-size: 0.85rem;
    }

    .pdt-video-container {
        max-width: 900px;
    }

    .pdt-comment-text {
        font-size: 0.95rem;
    }
}

@media (min-width: 1600px) {
    .pdt-tab-content > .tab-pane {
        padding: 3rem 3.5rem 3.5rem;
    }

    .pdt-section-header {
        margin-bottom: 2.5rem;
    }

    .pdt-section-title {
        font-size: 2rem;
    }

    .pdt-desc-title {
        font-size: 2rem;
    }

    .pdt-section-subtitle {
        font-size: 1.05rem;
        max-width: 720px;
    }

    .pdt-tab-nav .nav-link {
        padding: 20px 32px;
        font-size: 1rem;
    }

    .pdt-desc-body {
        font-size: 1.1rem;
        line-height: 1.8;
    }

    .pdt-video-container {
        max-width: 1000px;
    }

    .pdt-big-score {
        font-size: 4rem;
    }

    .pdt-score-label {
        font-size: 0.9rem;
        flex: 0 0 180px;
    }

    .pdt-score-bar {
        height: 7px;
    }
}

@media (min-width: 1920px) {
    .pdt-section-title {
        font-size: 2.25rem;
    }

    .pdt-desc-title {
        font-size: 2.25rem;
    }

    .pdt-tab-nav .nav-link {
        font-size: 1.05rem;
    }

    .pdt-desc-body {
        font-size: 1.15rem;
    }

    .pdt-video-container {
        max-width: 1100px;
    }
}

/* ============================================
   RESPONSIVE - SMALL SCREENS
   ============================================ */

@media (max-width: 1199.98px) {
    .pdt-score-right {
        padding: 1.5rem 2rem;
    }

    .pdt-score-label {
        flex: 0 0 130px;
    }

    .pdt-payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .pdt-tab-content > .tab-pane {
        padding: 1.75rem 1.5rem 2rem;
    }

    .pdt-section-title {
        font-size: 1.25rem;
    }

    .pdt-desc-title {
        font-size: 1.25rem;
    }

    .pdt-score-left {
        padding: 1.5rem 1rem;
        min-height: auto;
    }

    .pdt-big-score { font-size: 2.75rem; }

    .pdt-score-right {
        padding: 1.25rem;
    }

    .pdt-score-label {
        flex: 0 0 120px;
        font-size: 0.8rem;
    }

    .pdt-comment-card { padding: 1.25rem; }
}

@media (max-width: 767.98px) {
    .pdt-tabs {
        margin-top: 1rem;
        border-radius: 12px;
    }

    .pdt-tab-nav .nav-link {
        padding: 12px 14px;
        font-size: 0.8rem;
        gap: 6px;
    }

    .pdt-tab-nav .nav-link i {
        font-size: 0.85rem;
    }

    .pdt-action-nav .nav-link {
        padding: 14px 16px;
        font-size: 0.85rem;
        gap: 10px;
    }

    .pdt-action-nav .nav-link i:first-child {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .pdt-tab-content > .tab-pane {
        padding: 1.5rem 1rem 1.75rem;
    }

    .pdt-section-header {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }

    .pdt-section-title {
        font-size: 1.15rem;
    }

    .pdt-desc-title {
        font-size: 1.15rem;
    }

    .pdt-section-subtitle {
        font-size: 0.85rem;
    }

    /* Score */
    .pdt-score-left { padding: 1.25rem 1rem; }
    .pdt-big-score { font-size: 2.5rem; }
    .pdt-stars i { font-size: 1.1rem; }

    .pdt-score-right { padding: 1rem; gap: 0.75rem; }
    .pdt-score-row { gap: 0.5rem; }
    .pdt-score-label { flex: 0 0 55px; font-size: 0.72rem; }

    /* Comment */
    .pdt-comment-card { padding: 1.25rem; border-radius: 14px; }
    .pdt-avatar { width: 38px; height: 38px; font-size: 0.9rem; }
    .pdt-user-name { font-size: 0.85rem; }
    .pdt-comment-stars i { font-size: 0.8rem; }
    .pdt-ratings { gap: 0.375rem; }
    .pdt-pill { padding: 0.3rem 0.625rem; font-size: 0.75rem; }
    .pdt-comment-body { padding: 0.875rem; border-radius: 10px; }

    .pdt-prod-thumb { width: 48px; height: 48px; }
    .pdt-prod-name { font-size: 0.8rem; }
    .pdt-gallery-item { width: 80px; height: 80px; }
    .pdt-gallery { padding: 0.875rem; border-radius: 10px; }

    /* Payment */
    .pdt-payment-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .pdt-payment-card {
        padding: 1.25rem 0.875rem;
    }

    .pdt-payment-item { padding: 0.875rem; gap: 0.75rem; }
    .pdt-payment-icon { width: 36px; height: 36px; font-size: 0.9rem; border-radius: 10px; }

    /* Pagination */
    .pdt-pagination .pagination li a,
    .pdt-pagination .pagination li span {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .pdt-video-container { max-width: 100%; }
    .pdt-video-container iframe { border-radius: 12px; }

    /* Specs grid */
    .pdt-specs-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.625rem;
    }
}

@media (max-width: 575.98px) {
    .pdt-tabs {
        border-radius: 10px;
    }

    .pdt-tab-nav .nav-link {
        padding: 10px 10px;
        font-size: 0.74rem;
        gap: 4px;
    }

    .pdt-tab-nav .nav-link span:first-of-type {
        /* Hide text, show only icon on very small screens if needed */
    }

    .pdt-tab-badge {
        min-width: 18px;
        height: 18px;
        font-size: 0.62rem;
        padding: 0 4px;
    }

    .pdt-action-nav .nav-link {
        padding: 12px 14px;
        font-size: 0.82rem;
        gap: 8px;
    }

    .pdt-action-nav .nav-link i:first-child {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .pdt-quick-actions {
        border-radius: 10px;
    }

    .pdt-quick-action-btn {
        padding: 11px 14px;
        font-size: 0.82rem;
    }

    .pdt-quick-action-btn > i:first-child {
        width: 28px;
        height: 28px;
        font-size: 0.78rem;
    }

    .pdt-tab-content > .tab-pane {
        padding: 1.25rem 0.875rem 1.5rem;
    }

    .pdt-section-header {
        margin-bottom: 1.25rem;
        padding-bottom: 0.875rem;
    }

    .pdt-section-title {
        font-size: 1.05rem;
    }

    .pdt-desc-title {
        font-size: 1.05rem;
    }

    .pdt-section-subtitle {
        font-size: 0.8rem;
    }

    /* Score */
    .pdt-big-score { font-size: 2.25rem; }
    .pdt-comment-toolbar { padding: 0.75rem; border-radius: 8px; }

    /* Comment */
    .pdt-comment-card { padding: 1.125rem; border-radius: 12px; }
    .pdt-comment-head { gap: 0.5rem; margin-bottom: 0.625rem; }
    .pdt-avatar { width: 34px; height: 34px; font-size: 0.82rem; }
    .pdt-comment-stars i { font-size: 0.75rem; }
    .pdt-verified-badge { font-size: 0.68rem; padding: 0.25rem 0.625rem; }
    .pdt-variant-badge { font-size: 0.68rem; padding: 0.25rem 0.625rem; }
    .pdt-relative-date { font-size: 0.66rem; }
    .pdt-pill { font-size: 0.7rem; padding: 0.25rem 0.5rem; }
    .pdt-pill i { font-size: 0.72rem; }
    .pdt-comment-body { padding: 0.75rem 0.875rem; border-radius: 8px; }
    .pdt-comment-subject { font-size: 0.85rem; }
    .pdt-comment-text { font-size: 0.82rem; }

    /* Gallery */
    .pdt-gallery { padding: 0.75rem; gap: 0.375rem; border-radius: 8px; }
    .pdt-gallery-grid { gap: 0.5rem; }
    .pdt-gallery-item { width: 68px; height: 68px; border-radius: 8px; }
    .pdt-gallery-label { font-size: 0.72rem; margin-bottom: 0.5rem; }
    .pdt-media-slide { width: 64px; height: 64px; min-width: 64px; border-radius: 8px; }

    /* Footer */
    .pdt-comment-foot { gap: 0.5rem; padding-top: 0.625rem; }
    .pdt-useful-label { font-size: 0.75rem; }
    .pdt-useful-btn { font-size: 0.72rem; padding: 0.3rem 0.75rem; }

    /* Seller Reply */
    .pdt-seller-reply { padding: 0.875rem 1rem; margin-top: 0.75rem; border-radius: 10px; }
    .pdt-seller-reply::before { display: none; }
    .pdt-reply-head strong { font-size: 0.8rem; }
    .pdt-reply-text { font-size: 0.82rem; }

    /* Pagination */
    .pdt-pagination .pagination { gap: 3px; }
    .pdt-pagination .pagination li a,
    .pdt-pagination .pagination li span {
        min-width: 30px; height: 30px; font-size: 0.75rem; padding: 0 6px; border-radius: 6px;
    }

    /* Payment */
    .pdt-payment-card {
        border-radius: 12px;
        padding: 1.125rem 0.875rem;
    }

    .pdt-payment-card-icon {
        width: 40px; height: 40px; font-size: 1.1rem; border-radius: 10px;
    }

    .pdt-payment-card h5 { font-size: 0.85rem; }
    .pdt-payment-card p { font-size: 0.75rem; }

    .pdt-payment-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem;
        border-radius: 10px;
    }

    .pdt-payment-icon { width: 32px; height: 32px; font-size: 0.8rem; }
    .pdt-payment-info h5 { font-size: 0.85rem; }
    .pdt-payment-info p { font-size: 0.78rem; }

    /* Specs */
    .pdt-specs-grid { grid-template-columns: repeat(3, 1fr); gap: 0.375rem; }
    .pdt-spec-card { padding: 0.625rem 0.5rem; border-radius: 8px; }
    .pdt-spec-icon { width: 28px; height: 28px; font-size: 0.8rem; border-radius: 7px; margin-bottom: 0.4rem; }
    .pdt-spec-label { font-size: 0.58rem; }
    .pdt-spec-value { font-size: 0.75rem; }

    /* Payment */
    .pdt-payment-grid { grid-template-columns: 1fr; }

    /* Video */
    .pdt-video-container iframe { border-radius: 10px; }

    /* Measure */
    .pdt-measure-section img { border-radius: 10px; }
}

@media (max-width: 374.98px) {
    .pdt-tab-nav .nav-link {
        padding: 8px 8px;
        font-size: 0.68rem;
    }

    .pdt-action-nav .nav-link {
        padding: 11px 12px;
        font-size: 0.78rem;
    }

    .pdt-section-title { font-size: 0.95rem; }
    .pdt-desc-title { font-size: 0.95rem; }
    .pdt-big-score { font-size: 2rem; }
    .pdt-score-val { font-size: 0.75rem; }
}

/* ==============================
   PRODUCT CARD FAV — Kart üstü kalp boyutu category.css’teki .add-to-fav font-size / 1em ile (prod-detail 1.3rem ve eski 24px override yok)
   ============================== */

/* ============================================
   QUICK ACTION BUTTONS (prod-detail right panel)
   ============================================ */
.pdt-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #fff;
}

.pdt-quick-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1d1d1f;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: left;
}

.pdt-quick-action-btn:last-child {
    border-bottom: none;
}

.pdt-quick-action-btn:hover {
    background: #fafafa;
    color: var(--ep-primary, #ff6a00);
}

.pdt-quick-action-btn:active {
    background: #f5f5f5;
}

.pdt-quick-action-btn > i:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8f9fa;
    color: var(--ep-primary, #ff6a00);
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.pdt-quick-action-btn:hover > i:first-child {
    background: var(--ep-primary-light, #fff5ec);
}

.pdt-quick-action-btn > span {
    flex: 1;
    min-width: 0;
}

.pdt-qa-arrow {
    color: #c0c0c0;
    font-size: 0.7rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.pdt-quick-action-btn:hover .pdt-qa-arrow {
    color: var(--ep-primary, #ff6a00);
    transform: translateX(2px);
}

/* ============================================
   TAB PREVIEW — Mobile/Tablet Collapse + Offcanvas
   ============================================ */
.pdt-tab-preview {
    transition: max-height 0.3s ease;
}

/* Gradient overlay */
.pdt-tab-gradient {
    position: relative;
    height: 100px;
    margin-top: -100px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
    pointer-events: none;
    z-index: 1;
}

/* "Tümünü Gör" button (legacy, kept for desktop if needed) */
.pdt-tab-expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ep-primary, #ff6a00);
    background: #fff;
    border: 1.5px solid var(--ep-primary, #ff6a00);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    z-index: 2;
}

.pdt-tab-expand-btn:hover,
.pdt-tab-expand-btn:focus {
    background: var(--ep-primary, #ff6a00);
    color: #fff;
    border-color: var(--ep-primary, #ff6a00);
    box-shadow: 0 4px 16px rgba(255, 106, 0, 0.25);
}

.pdt-tab-expand-btn:active {
    transform: scale(0.97);
}

/* Offcanvas fullscreen — z-index must beat sticky header (1050) */
.pdt-tab-offcanvas {
    height: 100vh !important;
    border-radius: 16px 16px 0 0;
    z-index: 1060 !important;
}

.pdt-tab-offcanvas + .offcanvas-backdrop,
.offcanvas-backdrop.show {
    z-index: 1055 !important;
}

/* Fancybox z-index — must beat offcanvas (1060) */
.fancybox__container,
.fancybox-container {
    z-index: 99999 !important;
}

/* Offcanvas header — app-like bar */
.pdt-oc-header {
    background: #fff;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.pdt-tab-offcanvas .offcanvas-title {
    font-size: 0.92rem;
    color: #1d1d1f;
    line-height: 1.3;
    max-width: calc(100% - 140px);
}

.pdt-oc-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
    color: #1d1d1f;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.pdt-oc-back-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
}

.pdt-oc-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    padding: 0;
    color: #4b5563;
    font-size: 1.1rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.pdt-oc-action-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--ep-primary, #ff6a00);
}

.pdt-oc-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    background: var(--ep-primary, #ff6a00);
    border-radius: 8px;
    line-height: 16px;
    text-align: center;
}

.pdt-tab-offcanvas .offcanvas-body {
    -webkit-overflow-scrolling: touch;
}

/* Offcanvas tab navigation */
.pdt-oc-tabs {
    background: #fff;
    flex-shrink: 0;
    overflow: hidden;
}

.pdt-oc-tab-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.pdt-oc-tab-nav::-webkit-scrollbar {
    display: none;
}

.pdt-oc-tab-nav .nav-item {
    flex-shrink: 0;
}

.pdt-oc-tab-link,
.pdt-oc-tab-link:not(.active) {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #1d1d1f !important;
    background: transparent;
    border: none;
    border-bottom: 2.5px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pdt-oc-tab-link i {
    font-size: 0.82rem;
    opacity: 0.6;
}

@media (max-width: 767.98px) {
    .pdt-oc-tab-link {
        padding: 10px 8px;
        font-size: 0.72rem;
    }

    .pdt-oc-tab-link i {
        display: none;
    }
}

.pdt-oc-tab-link:hover {
    color: #374151;
}

.pdt-oc-tab-link.active {
    color: var(--ep-primary, #ff6a00) !important;
    border-bottom-color: var(--ep-primary, #ff6a00);
    font-weight: 700;
}

.pdt-oc-tab-link.active i {
    opacity: 1;
}

.pdt-tab-offcanvas .offcanvas-body img {
    max-width: 100%;
    height: auto;
}

/* Offcanvas tab navigation arrows */
.pdt-oc-nav-arrow {
    position: absolute;
    bottom: 20%;
    width: 30px;
    height: 56px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 127, 0, 0.80);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    color: #fff;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    opacity: 0.8;
    -webkit-tap-highlight-color: transparent;
}

.pdt-oc-nav-arrow::before {
    content: '';
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: -25%;
    right: -25%;
}

.pdt-oc-nav-arrow:active {
    transform: scale(0.92);
}

.pdt-oc-nav-prev { left: 0; border-radius: 0 8px 8px 0; }
.pdt-oc-nav-next { right: 0; border-radius: 8px 0 0 8px; }

@media (max-width: 575.98px) {
    .pdt-oc-nav-arrow {
        width: 26px;
        height: 48px;
        font-size: 0.7rem;
    }
    .pdt-oc-nav-prev { left: 0; }
    .pdt-oc-nav-next { right: 0; }
}

/* Offcanvas Back to Top */
.pdt-oc-back-to-top {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--ep-primary, #ff6a00);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}

.pdt-oc-back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pdt-oc-back-to-top:hover {
    background: #e55d00;
    box-shadow: 0 6px 22px rgba(255, 106, 0, 0.35);
    transform: translateY(-2px);
}

.pdt-oc-back-to-top:active {
    transform: scale(0.92);
}

@media (max-width: 575.98px) {
    .pdt-oc-back-to-top {
        width: 40px;
        height: 40px;
        bottom: 1.25rem;
        right: 1rem;
        font-size: 0.95rem;
    }
}

#pdtTabOffcanvasBody .pdt-section-header,
#pdtTabOffcanvasBody .list-group-item-info {
    display: none;
}

#pdtTabOffcanvasBody .pdt-faq-search-wrap {
    position: sticky;
    top: -1rem;
    z-index: 3;
    background: #fff;
    border-radius: 0;
    margin: -1rem -1rem 0.75rem;
    padding: 10px 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@media (max-width: 575.98px) {
    .pdt-tab-offcanvas {
        border-radius: 12px 12px 0 0;
    }

    .pdt-tab-offcanvas .offcanvas-title {
        font-size: 0.85rem;
    }

    .pdt-oc-back-btn,
    .pdt-oc-action-btn {
        width: 34px;
        height: 34px;
    }

    .pdt-oc-action-btn {
        font-size: 1rem;
    }
}

/* ==============================
   SPECIAL BANNERS / REL PRODS BODY
   ============================== */
.ep-rel-prods__body {
    padding: 20px 16px;
}

.ep-rel-prods__body swiper-container {
    min-height: 300px;
}

@media (max-width: 767px) {
    .ep-rel-prods__body {
        padding: 12px 8px;
    }
}

.wrapper {
  margin: 50px auto;
  width: 280px;
  height: 370px;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: relative;
  z-index: 999;
}

.ribbon-wrapper-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: 13px;
}

@media (max-width: 500px) {
    .ribbon-wrapper-green {
        right: 2px;
    }
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

.ui-pnotify{top:36px;right:36px;position:absolute;height:auto;z-index:2}body>.ui-pnotify{position:fixed;z-index:100040}.ui-pnotify-modal-overlay{background-color:rgba(0,0,0,.4);top:0;left:0;position:absolute;height:100%;width:100%;z-index:1}body>.ui-pnotify-modal-overlay{position:fixed;z-index:100039}.ui-pnotify.ui-pnotify-in{display:block!important}.ui-pnotify.ui-pnotify-move{transition:left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-slow{transition:opacity .6s linear;opacity:0}.ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move{transition:opacity .6s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-normal{transition:opacity .4s linear;opacity:0}.ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move{transition:opacity .4s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-fast{transition:opacity .2s linear;opacity:0}.ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move{transition:opacity .2s linear,left .5s ease,top .5s ease,right .5s ease,bottom .5s ease}.ui-pnotify.ui-pnotify-fade-in{opacity:1}.ui-pnotify .ui-pnotify-shadow{-webkit-box-shadow:0 6px 28px 0 rgba(0,0,0,.1);-moz-box-shadow:0 6px 28px 0 rgba(0,0,0,.1);box-shadow:0 6px 28px 0 rgba(0,0,0,.1)}.ui-pnotify-container{background-position:0 0;padding:.8em;height:100%;margin:0}.ui-pnotify-container:after{content:" ";visibility:hidden;display:block;height:0;clear:both}.ui-pnotify-container.ui-pnotify-sharp{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui-pnotify-title{display:block;margin-bottom:.4em;margin-top:0}.ui-pnotify-text{display:block}.ui-pnotify-icon,.ui-pnotify-icon span{display:block;float:left;margin-right:.2em}.ui-pnotify.stack-bottomleft,.ui-pnotify.stack-topleft{left:25px;right:auto}.ui-pnotify.stack-bottomleft,.ui-pnotify.stack-bottomright{bottom:25px;top:auto}.ui-pnotify.stack-modal{left:50%;right:auto;margin-left:-150px}.brighttheme{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.brighttheme.ui-pnotify-container{padding:18px}.brighttheme .ui-pnotify-title{margin-bottom:12px}.brighttheme-notice{background-color:#FFFFA2;border:0 solid #FF0;color:#4F4F00}.brighttheme-info{background-color:#8FCEDD;border:0 solid #0286A5;color:#012831}.brighttheme-success{background-color:#AFF29A;border:0 solid #35DB00;color:#104300}.brighttheme-error{background-color:#FFABA2;background-image:repeating-linear-gradient(135deg,transparent,transparent 35px,rgba(255,255,255,.3) 35px,rgba(255,255,255,.3) 70px);border:0 solid #FF1800;color:#4F0800}.brighttheme-icon-closer,.brighttheme-icon-info,.brighttheme-icon-notice,.brighttheme-icon-sticker,.brighttheme-icon-success{position:relative;width:16px;height:16px;font-size:12px;font-weight:700;line-height:16px;font-family:"Courier New",Courier,monospace;border-radius:50%}.brighttheme-icon-closer:after,.brighttheme-icon-info:after,.brighttheme-icon-notice:after,.brighttheme-icon-sticker:after,.brighttheme-icon-success:after{position:absolute;top:0;left:4px}.brighttheme-icon-notice{background-color:#2E2E00;color:#FFFFA2;margin-top:2px}.brighttheme-icon-notice:after{content:"!"}.brighttheme-icon-info{background-color:#012831;color:#8FCEDD;margin-top:2px}.brighttheme-icon-info:after{content:"i"}.brighttheme-icon-success{background-color:#104300;color:#AFF29A;margin-top:2px}.brighttheme-icon-success:after{content:"\002713"}.brighttheme-icon-error{position:relative;width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:16px solid #2E0400;font-size:0;line-height:0;color:#FFABA2;margin-top:1px}.brighttheme-icon-error:after{position:absolute;top:1px;left:-4px;font-size:12px;font-weight:700;line-height:16px;font-family:"Courier New",Courier,monospace;content:"!"}.brighttheme-icon-closer,.brighttheme-icon-sticker{display:inline-block}.brighttheme-icon-closer:after{top:-4px;content:"\002715"}.brighttheme-icon-sticker:after{top:-5px;content:"\01D1BC";-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.brighttheme-icon-sticker.brighttheme-icon-stuck:after{-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.brighttheme .ui-pnotify-action-bar{padding-top:12px}.brighttheme .ui-pnotify-action-bar input,.brighttheme .ui-pnotify-action-bar textarea{display:block;width:100%;margin-bottom:12px!important}.brighttheme .ui-pnotify-action-button{text-transform:uppercase;font-weight:700;padding:4px 8px;border:none;background:0 0}.brighttheme .ui-pnotify-action-button.btn-primary{border:none;border-radius:0}.brighttheme-notice .ui-pnotify-action-button.btn-primary{background-color:#FF0;color:#4F4F00}.brighttheme-info .ui-pnotify-action-button.btn-primary{background-color:#0286A5;color:#012831}.brighttheme-success .ui-pnotify-action-button.btn-primary{background-color:#35DB00;color:#104300}.brighttheme-error .ui-pnotify-action-button.btn-primary{background-color:#FF1800;color:#4F0800}.ui-pnotify-closer,.ui-pnotify-sticker{float:right;margin-left:.2em}.ui-pnotify-history-container{position:absolute;top:0;right:18px;width:70px;border-top:none;padding:0;-webkit-border-top-left-radius:0;-moz-border-top-left-radius:0;border-top-left-radius:0;-webkit-border-top-right-radius:0;-moz-border-top-right-radius:0;border-top-right-radius:0;z-index:10000}.ui-pnotify-history-container.ui-pnotify-history-fixed{position:fixed}.ui-pnotify-history-container .ui-pnotify-history-header{padding:2px;text-align:center}.ui-pnotify-history-container button{cursor:pointer;display:block;width:100%}.ui-pnotify-history-container .ui-pnotify-history-pulldown{display:block;margin:0 auto}.ui-pnotify-container{position:relative;left:0}@media (max-width:480px){.ui-pnotify-mobile-able.ui-pnotify{position:fixed;top:0;right:0;left:0;width:auto!important;font-size:1.2em;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-ms-font-smoothing:antialiased;font-smoothing:antialiased}.ui-pnotify-mobile-able.ui-pnotify .ui-pnotify-shadow{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-bottom-width:5px}.ui-pnotify-mobile-able .ui-pnotify-container{-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft,.ui-pnotify-mobile-able.ui-pnotify.stack-topleft{left:0;right:0}.ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft,.ui-pnotify-mobile-able.ui-pnotify.stack-bottomright{left:0;right:0;bottom:0;top:auto}.ui-pnotify-mobile-able.ui-pnotify.stack-bottomleft .ui-pnotify-shadow,.ui-pnotify-mobile-able.ui-pnotify.stack-bottomright .ui-pnotify-shadow{border-top-width:5px;border-bottom-width:1px}}
.funkyradio div {
  overflow: hidden;
}

.funkyradio label {
  width: 100%;
  border: 3px solid #ddd;
  font-weight: bold;
}


.funkyradio label:hover {
  border: 3px solid #919191;
}

.funkyradio-warning input[type="radio"]:checked + label{
    border: 3px solid #FF7F00;
}

.funkyradio p{
    margin-top:5px;
    padding:5px;
    border:1px solid #ddd;
}

.funkyradio p a{
    cursor:zoom-in
}

.funkyradio img{
    width:100%;
}

/*
.funkyradio label:checked{
    border: 3px solid #FF7F00;
}

*/


.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
  display: none;
}

.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
  position: relative;
  line-height: 2.5em;
  text-indent: 3.25em;
  /*margin-top: 2em;*/
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  content: '';
  width: 2.5em;
  background: #ddd;
}

.funkyradio input[type="radio"]:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:not(:checked) ~ label ~ label:before {
    content: '\2714';
    text-indent: .9em;
    color: #fff !important;
    background-color: #ccc;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
  color: #919191;
}

.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #919191;
}

.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
  color: #777;
}

.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
  content: '\2714';
  text-indent: .9em;
  color: #333;
  background-color: #ccc;
}

.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
  box-shadow: 0 0 0 3px #999;
}

.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
  color: #333;
  background-color: #ccc;
}

.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #337ab7;
}

.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #5cb85c;
}

.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #d9534f;
}

.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #FF7F00;
}

.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
  color: #fff;
  background-color: #5bc0de;
}

/* =============================================
   Size/Price Selection Grid
   ============================================= */

.frb-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0;
}

.frb {
    position: relative;
}

.frb input[type="radio"],
.frb input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.frb label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 14px 10px;
    margin: 0;
    min-height: 72px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

.frb label:hover {
    border-color: #c5c7cc;
    background: #fafafa;
}

.frb input[type="radio"]:checked ~ label,
.frb input[type="checkbox"]:checked ~ label {
    border-color: var(--ep-primary, #ff6a00);
    background: #fff7ed;
    box-shadow: 0 0 0 1px var(--ep-primary, #ff6a00);
}

/* Title (size text) */
.frb-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4b5563;
    line-height: 1.3;
}

.frb input[type="radio"]:checked ~ label .frb-title,
.frb input[type="checkbox"]:checked ~ label .frb-title {
    color: #1f2937;
}

/* Price */
.frb-eperde-price {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.3;
}

.frb input[type="radio"]:checked ~ label .frb-eperde-price,
.frb input[type="checkbox"]:checked ~ label .frb-eperde-price {
    color: var(--ep-primary, #ff6a00);
}

/* Old (strikethrough) price */
.frb-old-price {
    display: block;
    text-decoration: line-through;
    font-size: 0.72rem;
    font-weight: 500;
    color: #9ca3af;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 991.98px) {
    .frb-group {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .frb label {
        padding: 12px 8px;
        min-height: 66px;
    }

    .frb-title {
        font-size: 0.76rem;
    }

    .frb-eperde-price {
        font-size: 0.88rem;
    }
}

@media (max-width: 767.98px) {
    .frb-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .frb-group.frb-swiped {
        display: none;
    }

    .frb label {
        padding: 12px 8px;
        min-height: 64px;
        border-radius: 8px;
    }

    /* ── Fırsat Ürünü Swiper (mobile) ── */
    .frb-swiper-wrap {
        position: relative;
        overflow: hidden;
    }

    .frb-swiper {
        padding-bottom: 0;
    }

    .frb-swiper swiper-slide {
        height: auto;
    }

    .frb-swiper .frb {
        height: 100%;
    }

    .frb-swiper .frb label {
        height: 100%;
        padding: 14px 10px;
        min-height: 74px;
        border-radius: 10px;
        border-width: 2px;
    }
}

@media (max-width: 399.98px) {
    .frb-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .frb label {
        padding: 10px 6px;
        min-height: 58px;
    }

    .frb-title {
        font-size: 0.72rem;
    }

    .frb-eperde-price {
        font-size: 0.82rem;
    }
}

/*
 *  Bootstrap TouchSpin - v3.0.1
 *  A mobile and touch friendly input spinner component for Bootstrap 3.
 *  http://www.virtuosoft.eu/code/bootstrap-touchspin/
 *
 *  Made by István Ujj-Mészáros
 *  Under Apache License v2.0 License
 */

.bootstrap-touchspin .input-group-btn-vertical{position:relative;white-space:nowrap;width:1%;vertical-align:middle;display:table-cell}.bootstrap-touchspin .input-group-btn-vertical>.btn{display:block;float:none;width:100%;max-width:100%;padding:8px 10px;margin-left:-1px;position:relative}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up{border-radius:0;border-top-right-radius:4px}.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down{margin-top:-2px;border-radius:0;border-bottom-right-radius:4px}.bootstrap-touchspin .input-group-btn-vertical i{position:absolute;top:3px;left:5px;font-size:9px;font-weight:400}