body {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 12px;
	line-height: 20px;
	width: 100%;
}
h1, h2, h3, h4, h5, h6 {
	color: #444;
}
/* default font size */
.fa {
	font-size: 14px;
}
/* Override the bootstrap defaults */
h1 {
	font-size: 33px;
}
h2 {
	font-size: 27px;
}
h3 {
	font-size: 21px;
}
h4 {
	font-size: 15px;
}
h5 {
	font-size: 12px;
}
h6 {
	font-size: 10.2px;
}
a {
	color: #23a1d1;
}
a:hover {
	text-decoration: none;
}
legend {
	font-size: 18px;
	padding: 7px 0px
}
label {
	font-size: 12px;
	font-weight: normal;
}
select.form-control, textarea.form-control, input[type="text"].form-control, input[type="password"].form-control, input[type="datetime"].form-control, input[type="datetime-local"].form-control, input[type="date"].form-control, input[type="month"].form-control, input[type="time"].form-control, input[type="week"].form-control, input[type="number"].form-control, input[type="email"].form-control, input[type="url"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="color"].form-control {
	font-size: 12px;
}
.input-group input, .input-group select, .input-group .dropdown-menu, .input-group .popover {
	font-size: 12px;
}
.input-group .input-group-addon {
	font-size: 12px;
	height: 30px;
}
/* Fix some bootstrap issues */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}

.nav-tabs {
	margin-bottom: 15px;
}
div.required .control-label:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
/* Gradent to all drop down menus */
.dropdown-menu li > a:hover {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
/* top */
#top {
	background-color: #EEEEEE;
	border-bottom: 1px solid #e2e2e2;
	padding: 4px 0px 3px 0;
	margin: 0 0 20px 0;
	min-height: 40px;
}
#top .container {
	padding: 0 20px;
}
#top #form-currency .currency-select,
#top #form-language .language-select {
	text-align: left;
}
#top #form-currency .currency-select:hover,
#top #form-language .language-select:hover {
	text-shadow: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#top .btn-link, #top-links li, #top-links a {
	color: #888;
	text-shadow: 0 1px 0 #FFF;
	text-decoration: none;
}
#top .btn-link:hover, #top-links a:hover {
	color: #444;
}
#top-links .dropdown-menu a {
	text-shadow: none;
}
#top-links .dropdown-menu a:hover {
	color: #FFF;
}
#top .btn-link strong {
	font-size: 14px;
        line-height: 14px;
}
#top-links {
	padding-top: 6px;
}
#top-links a + a {
	margin-left: 15px;
}
/* logo */
#logo {
	margin: 0 0 10px 0;
}
/* search */
#search {
	margin-bottom: 10px;
}
#search .input-lg {
	height: 40px;
	line-height: 20px;
	padding: 0 10px;
}
#search .btn-lg {
	font-size: 15px;
	line-height: 18px;
	padding: 10px 35px;
	text-shadow: 0 1px 0 #FFF;
}
/* cart — see the authoritative .uvlf-cart-panel rules further down for
   the actual mini-cart design; this legacy block intentionally only ever
   targeted stock Bootstrap markup this theme no longer renders. */
/* menu */
#menu {
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
	min-height: 40px;
}
#menu .nav > li > a {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	padding: 10px 15px 10px 15px;
	min-height: 15px;
	background-color: transparent;
}
#menu .nav > li > a:hover, #menu .nav > li.open > a {
	background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
	padding-bottom: 0;
}
#menu .dropdown-inner {
	display: table;
}
#menu .dropdown-inner ul {
	display: table-cell;
}
#menu .dropdown-inner a {
	min-width: 160px;
	display: block;
	padding: 3px 20px;
	clear: both;
	line-height: 20px;
	color: #333333;
	font-size: 12px;
}
#menu .dropdown-inner li a:hover {
	color: #FFFFFF;
}
#menu .see-all {
	display: block;
	margin-top: 0.5em;
	border-top: 1px solid #DDD;
	padding: 3px 20px;
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 3px 3px;
	font-size: 12px;
}
#menu .see-all:hover, #menu .see-all:focus {
	text-decoration: none;
	color: #ffffff;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
}
#menu #category {
	float: left;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	line-height: 40px;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .btn-navbar {
	font-size: 15px;
	font-stretch: expanded;
	color: #FFF;
	padding: 2px 18px;
	float: right;
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
#menu .btn-navbar:hover, #menu .btn-navbar:focus, #menu .btn-navbar:active, #menu .btn-navbar.disabled, #menu .btn-navbar[disabled] {
	color: #ffffff;
	background-color: #229ac8;
}
@media (min-width: 768px) {
	#menu .dropdown:hover .dropdown-menu {
		display: block;
	}
}
@media (max-width: 767px) {
	#menu {
		border-radius: 4px;
	}
	#menu div.dropdown-inner > ul.list-unstyled {
		display: block;
	}
	#menu div.dropdown-menu {
		margin-left: 0 !important;
		padding-bottom: 10px;
		background-color: rgba(0, 0, 0, 0.1);
	}
	#menu .dropdown-inner {
		display: block;
	}
	#menu .dropdown-inner a {
		width: 100%;
		color: #fff;
	}
	#menu .dropdown-menu a:hover,
	#menu .dropdown-menu ul li a:hover {
		background: rgba(0, 0, 0, 0.1);
	}
	#menu .see-all {
		margin-top: 0;
		border: none;
		border-radius: 0;
		color: #fff;
	}
}
/* content */
#content {
	min-height: 600px;
}
#product-category #content, #product-product #tab-description, #information-information #content {
	font-size: 13px;
}
/* footer */
footer {
	margin-top: 30px;
	padding-top: 30px;
	background-color: #303030;
	border-top: 1px solid #ddd;
	color: #e2e2e2;
}
footer hr {
	border-top: none;
	border-bottom: 1px solid #666;
}
footer a {
	color: #ccc;
}
footer a:hover {
	color: #fff;
}
footer h5 {
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
}
/* alert */
.alert {
	padding: 8px 14px 8px 14px;
}
.alert > .close {
	position: relative;
	top: -2px;
	right: 0px;
	color: inherit;
}
/* breadcrumb */
.breadcrumb {
	margin: 0 0 20px 0;
	padding: 8px 0;
	border: 1px solid #ddd;
}
.breadcrumb i {
	font-size: 15px;
}
.breadcrumb > li {
	text-shadow: 0 1px 0 #FFF;
	padding: 0 20px;
	position: relative;
	white-space: nowrap;
}
.breadcrumb > li + li:before {
	content: '';
	padding: 0;
}
.breadcrumb > li:after {
	content: '';
	display: block;
	position: absolute;
	top: -3px;
	right: -5px;
	width: 26px;
	height: 26px;
	border-right: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
html[dir=rtl] .breadcrumb > li::after {
  top: -3px;
  left: -5px;
  width: 26px;
  height: 26px;
  border-left: 1px solid #DDD;
  border-top: 1px solid #DDD;
  right: unset;
  border-right: unset;
  border-bottom:unset;

}
.pagination {
	margin: 0;
}
/* buttons */
.buttons {
	margin: 1em 0;
}
.btn {
	padding: 7.5px 12px;
	font-size: 12px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.btn-xs {
	font-size: 9px;
}
.btn-sm {
	font-size: 10.2px;
}
.btn-lg {
	padding: 10px 16px;
	font-size: 15px;
}
.btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
	font-size: 12px;
}
.btn-group > .btn-xs {
	font-size: 9px;
}
.btn-group > .btn-sm {
	font-size: 10.2px;
}
.btn-group > .btn-lg {
	font-size: 15px;
}
.btn-default {
	color: #777;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #e7e7e7;
	background-image: linear-gradient(to bottom, #eeeeee, #dddddd);
	background-repeat: repeat-x;
	border-color: #dddddd #dddddd #b3b3b3 #b7b7b7;
}
.btn-primary {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #229ac8;
	background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
	background-repeat: repeat-x;
	border-color: #1f90bb #1f90bb #145e7a;
}
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
	background-color: #1f90bb;
	background-position: 0 -15px;
}
.btn-warning {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x;
	border-color: #f89406 #f89406 #ad6704;
}
.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-danger {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #da4f49;
	background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
	background-repeat: repeat-x;
	border-color: #bd362f #bd362f #802420;
}
.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-success {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #5bb75b;
	background-image: linear-gradient(to bottom, #62c462, #51a351);
	background-repeat: repeat-x;
	border-color: #51a351 #51a351 #387038;
}
.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
	box-shadow: inset 0 1000px 0 rgba(0, 0, 0, 0.1);
}
.btn-info {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #df5c39;
	background-image: linear-gradient(to bottom, #e06342, #dc512c);
	background-repeat: repeat-x;
	border-color: #dc512c #dc512c #a2371a;
}
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
	background-image: none;
	background-color: #df5c39;
}
.btn-link {
	border-color: rgba(0, 0, 0, 0);
	cursor: pointer;
	color: #23A1D1;
	border-radius: 0;
}
.btn-link, .btn-link:active, .btn-link[disabled] {
	background-color: rgba(0, 0, 0, 0);
	background-image: none;
	box-shadow: none;
}
.btn-inverse {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #363636;
	background-image: linear-gradient(to bottom, #444444, #222222);
	background-repeat: repeat-x;
	border-color: #222222 #222222 #000000;
}
.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
	background-color: #222222;
	background-image: linear-gradient(to bottom, #333333, #111111);
}
/* list group */
.list-group a {
	border: 1px solid #DDDDDD;
	color: #888888;
	padding: 8px 12px;
}
.list-group a.active, .list-group a.active:hover, .list-group a:hover {
	color: #444444;
	background: #eeeeee;
	border: 1px solid #DDDDDD;
	text-shadow: 0 1px 0 #FFF;
}
/* carousel */
.carousel-caption {
	color: #FFFFFF;
	text-shadow: 0 1px 0 #000000;
}
.carousel-control .icon-prev:before {
	content: '\f053';
	font-family: FontAwesome;
}
.carousel-control .icon-next:before {
	content: '\f054';
	font-family: FontAwesome;
}
/* product list */
.product-thumb {
	border: 1px solid #ddd;
	margin-bottom: 20px;
	overflow: auto;
}
.product-thumb .image {
	text-align: center;
}
.product-thumb .image a {
	display: block;
}
.product-thumb .image a:hover {
	opacity: 0.8;
}
.product-thumb .image img {
	margin-left: auto;
	margin-right: auto;
}
.product-grid .product-thumb .image {
	float: none;
}
@media (min-width: 767px) {
.product-list .product-thumb .image {
	float: left;
	padding: 0 15px;
}
}
.product-thumb h4 {
	font-weight: bold;
}
.product-thumb .caption {
	padding: 0 20px;
	min-height: 180px;
}
.product-list .product-thumb .caption {
	margin-left: 230px;
}
@media (max-width: 1200px) {
.product-grid .product-thumb .caption {
	min-height: 210px;
	padding: 0 10px;
}
}
@media (max-width: 767px) {
.product-list .product-thumb .caption {
	min-height: 0;
	margin-left: 0;
	padding: 0 10px;
}
.product-grid .product-thumb .caption {
	min-height: 0;
}
}
.product-thumb .rating {
	padding-bottom: 10px;
}
.rating .fa-stack {
	font-size: 8px;
}
.rating .fa-star-o {
	color: #999;
	font-size: 15px;
}
.rating .fa-star {
	color: #FC0;
	font-size: 15px;
}
.rating .fa-star + .fa-star-o {
	color: #E69500;
}
h2.price {
	margin: 0;
}
.product-thumb .price {
	color: #444;
}
.product-thumb .price-new {
	font-weight: 600;
}
.product-thumb .price-old {
	color: #999;
	text-decoration: line-through;
	margin-left: 10px;
}
.product-thumb .price-tax {
	color: #999;
	font-size: 12px;
	display: block;
}
.product-thumb .button-group {
	border-top: 1px solid #ddd;
	background-color: #eee;
	overflow: auto;
}
.product-list .product-thumb .button-group {
	border-left: 1px solid #ddd;
}
@media (max-width: 768px) {
	.product-list .product-thumb .button-group {
		border-left: none;
	}
}
.product-thumb .button-group button {
	width: 60%;
	border: none;
	display: inline-block;
	float: left;
	background-color: #eee;
	color: #888;
	line-height: 38px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
.product-thumb .button-group button + button {
	width: 20%;
	border-left: 1px solid #ddd;
}
.product-thumb .button-group button:hover {
	color: #444;
	background-color: #ddd;
	text-decoration: none;
	cursor: pointer;
}
@media (max-width: 1200px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
@media (max-width: 767px) {
	.product-thumb .button-group button, .product-thumb .button-group button + button {
		width: 33.33%;
	}
}
.thumbnails {
	overflow: auto;
	clear: both;
	list-style: none;
	padding: 0;
	margin: 0;
}
.thumbnails > li {
	margin-left: 20px;
}
.thumbnails {
	margin-left: -20px;
}
.thumbnails > img {
	width: 100%;
}
.image-additional a {
	margin-bottom: 20px;
	padding: 5px;
	display: block;
	border: 1px solid #ddd;
}
.image-additional {
	max-width: 78px;
}
.thumbnails .image-additional {
	float: left;
	margin-left: 20px;
}

@media (min-width: 1200px) {
	#content .col-lg-2:nth-child(6n+1),
	#content .col-lg-3:nth-child(4n+1),
	#content .col-lg-4:nth-child(3n+1),
	#content .col-lg-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#content .col-md-2:nth-child(6n+1),
	#content .col-md-3:nth-child(4n+1),
	#content .col-md-4:nth-child(3n+1),
	#content .col-md-6:nth-child(2n+1) {
		clear:left;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#content .col-sm-2:nth-child(6n+1),
	#content .col-sm-3:nth-child(4n+1),
	#content .col-sm-4:nth-child(3n+1),
	#content .col-sm-6:nth-child(2n+1) {
		clear:left;
	}
}

/* fixed colum left + content + right*/
@media (min-width: 768px) {
    #column-left  .product-layout .col-md-3 {
       width: 100%;
    }

	#column-left + #content .product-layout .col-md-3 {
       width: 50%;
    }

	#column-left + #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }

    #content + #column-right .product-layout .col-md-3 {
       width: 100%;
    }
}

/* fixed product layouts used in left and right columns */
#column-left .product-layout, #column-right .product-layout {
	width: 100%;
}

/* fixed mobile cart quantity input */
.input-group .form-control[name^=quantity] {
	min-width: 50px;
}

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
    background-image: none;
    background-color: #df5c39;
}
html[dir=rtl] .checkbox input[type="checkbox"],
html[dir=rtl] .checkbox-inline input[type="checkbox"],
html[dir=rtl] .radio input[type="radio"],
html[dir=rtl] .radio-inline input[type="radio"] {
    position: absolute;
    margin-top: 4px\9;
    margin-right: -20px;
      margin-left: unset;
}
html[dir=rtl] .input-group-btn:last-child > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
html[dir=rtl] .input-group .form-control:first-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: unset;
    border-bottom-left-radius: unset;
}
html[dir=rtl] .container .row:first-child  .col-sm-4, html[dir=rtl] .container .row:first-child  .col-sm-5 {
  float: right;

}
html[dir=rtl] #cart .dropdown-menu {
  left: 0;
  right: auto;

}
@media (min-width: 768px) {
   
    html[dir=rtl] .navbar-nav {
        float: right;
        margin: 0;
    }
    
    html[dir=rtl] .navbar-nav > li {
        float: right;
    }
   
}



/* =====================================================================
   UVLF SHOP — AUTHORITATIVE DESIGN SYSTEM
   Single consolidated pass. Do not append further override blocks below
   this file — edit the relevant section in place instead.
   ===================================================================== */

:root {
  /* Official UVLF brand dark — RGB 0 64 73 / Pantone 547 C.
     --uvlf-dark-deep and --uvlf-dark-black are computed tints of the
     same brand color (not separate greens): -deep is the hover/press
     darken for buttons, -black is the near-neutral scrim tone used for
     backdrops and deep atmosphere overlays. */
  --uvlf-dark: #004049;
  --uvlf-dark-rgb: 0, 64, 73;
  --uvlf-dark-deep: #002b31;
  --uvlf-dark-deep-rgb: 0, 43, 49;
  --uvlf-dark-black: #00161a;
  --uvlf-dark-black-rgb: 0, 22, 26;
  --uvlf-dark-soft: #e8eeef;
  --uvlf-gold: #b8944a;
  --uvlf-gold-soft: #f4eee2;
  /* Brighter gold for gold TEXT/icons sitting on a dark brand surface —
     #004049 is lighter than the old near-black green it replaced, so the
     base gold's contrast on it drops under 4:1. This reuses a value the
     theme already used ad hoc for on-dark hover states. */
  --uvlf-gold-bright: #d2b76f;
  --uvlf-ink: #16211d;
  --uvlf-muted: #66736d;
  --uvlf-line: #dfe7e2;
  --uvlf-paper: #fbfcfa;
  --uvlf-white: #ffffff;
  --uvlf-radius: 4px;
  --uvlf-shadow: 0 18px 45px rgba(var(--uvlf-dark-rgb), .09);
  --uvlf-ease: cubic-bezier(.23, 1, .32, 1);
  --uvlf-atmosphere-image: url('../image/uvlf-library-background.png');

  /* Authoritative z-index scale — every stacking layer on the site reads
     from this list so their order is decided in one place.
       header (sticky/pinned nav) ......... --uvlf-z-header   (1000)
       small popovers (cart/account/lang
         dropdown menus) ................... 1001 — unchanged, pre-existing
       alerts (add-to-cart/wishlist/
         compare success, top-of-page
         error banners) ..................... --uvlf-z-alert   (1050)
       off-canvas overlays (mobile nav /
         filter drawers + their scrims) ..... --uvlf-z-overlay          (1100)
         — drawer markup precedes its own backdrop in the DOM on both,
         so the backdrop needs a step of its own to stay under the panel
         it belongs to, not just under the header/alert tiers:
         --uvlf-z-overlay-backdrop (1099)
       cookie notice ....................... 1600
       true modal dialogs (add-to-cart
         confirmation) ...................... --uvlf-z-modal   (1700)
       skip link (focus-only) .............. 2000
     Small popovers sit below alerts deliberately (they're auxiliary, not
     modal); off-canvas drawers sit above alerts since a user actively
     interacting with one shouldn't have a passive notification paint
     over it. A true modal dialog outranks even the cookie notice — it is
     the direct result of an explicit user action and takes precedence
     over a passive, dismissible banner. */
  --uvlf-z-header: 1000;
  --uvlf-z-alert: 1050;
  --uvlf-z-overlay-backdrop: 1099;
  --uvlf-z-overlay: 1100;
  --uvlf-z-modal: 1700;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
  background-color: #f5f7f4;
  background-image:
    radial-gradient(ellipse 760px 520px at 50% 21%, rgba(var(--uvlf-dark-rgb), .05), transparent 72%),
    radial-gradient(ellipse 560px 420px at 6% 56%, rgba(239, 234, 218, .20), transparent 72%);
  color: var(--uvlf-ink);
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--uvlf-dark); font-weight: 600; letter-spacing: -.02em; }
h1, h2 { font-family: "Source Serif 4", Georgia, serif; }
h1 { font-size: clamp(30px, 4vw, 48px); line-height: 1.1; }
h2 { font-size: clamp(25px, 3vw, 36px); line-height: 1.15; }
h3 { font-size: 20px; line-height: 1.25; }
a { color: var(--uvlf-dark); transition: color .18s var(--uvlf-ease); }
a:hover, a:focus { color: var(--uvlf-gold); }
button, a, select, input, textarea { outline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(184, 148, 74, .7); outline-offset: 3px; }
.container { width: min(100% - 40px, 1240px); }
/* Guards against horizontal document scroll — the homepage's full-bleed
   hero, and on every page the fixed+translateX(100%) off-canvas mobile
   nav drawer (.uvlf-primary-nav), both extend past the viewport edge and
   were leaking a ~44px horizontal scrollbar site-wide on mobile.
   Internally-scrolling product carousels keep their own
   overflow-x:auto scroll unaffected. */
body { overflow-x: hidden; }

/* ---------------------------------------------------------------------
   Skip link
   --------------------------------------------------------------------- */
.uvlf-skip-link {
  position: absolute; z-index: 2000; top: -60px; left: 12px;
  padding: 10px 18px; border-radius: var(--uvlf-radius);
  background: var(--uvlf-dark); color: #fff; font-weight: 600; font-size: 13px;
  transition: top .2s var(--uvlf-ease);
}
.uvlf-skip-link:focus { top: 12px; color: #fff; }

/* ---------------------------------------------------------------------
   Header — one authoritative implementation, one visual identity
   everywhere: translucent deep-green, blurred, sticky to the viewport
   top. This IS the "pinned" look and is the default on every page.
   Homepage (body:has(#common-home)) layers ONE extra state on top:
   transparent + enlarged over the hero before scroll, via
   .uvlf-header:not(.uvlf-header--pinned) — see the home-only block
   below. Every other page renders solid immediately; no separate
   inner-page implementation exists.
   --------------------------------------------------------------------- */
.uvlf-header {
  position: sticky;
  top: 0;
  z-index: var(--uvlf-z-header);
  background: rgba(var(--uvlf-dark-rgb), .92);
  box-shadow: 0 10px 30px rgba(var(--uvlf-dark-black-rgb), .28);
  transition: background .3s ease, box-shadow .3s ease;
}
/* backdrop-filter is desktop-only: a filter/backdrop-filter on this
   element creates a new containing block for any position:fixed
   descendant — and the mobile off-canvas nav (#uvlf-primary-nav) is a
   fixed-position descendant of this very header. Applying the blur
   unconditionally made that drawer position itself against the
   ~70px-tall header box instead of the viewport, collapsing it to a
   sliver and making it unusable. At >=992px the drawer isn't fixed
   (it's the inline desktop nav), so blur is safe there. */
@media (min-width: 992px) {
  .uvlf-header {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.uvlf-header-scrim {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.uvlf-header-row {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 40px;
  padding: 13px 0;
}

.uvlf-brand-lockup { display: flex; flex: 0 0 auto; align-items: center; gap: 15px; color: #fff; text-decoration: none; }
.uvlf-brand-lockup:hover, .uvlf-brand-lockup:focus { color: #fff; text-decoration: none; }
.uvlf-brand-mark { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(var(--uvlf-dark-black-rgb), .35)); transition: width .3s ease, height .3s ease; }
.uvlf-brand-copy { display: flex; flex-direction: column; gap: 3px; }
.uvlf-brand-copy strong { font-family: "Source Serif 4", Georgia, serif; font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: .01em; transition: font-size .3s ease; }
.uvlf-brand-copy span { max-width: 220px; font-size: 10.5px; font-weight: 600; letter-spacing: .05em; line-height: 1.35; color: rgba(255, 255, 255, .6); }

/* Primary nav: reuses the existing OpenCart #menu markup verbatim */
.uvlf-primary-nav { display: flex; align-items: center; margin-left: 26px; }
.uvlf-primary-nav-head, .uvlf-nav-extra { display: none; }
.uvlf-primary-nav #menu { min-height: 0; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.uvlf-primary-nav #menu .navbar-header { display: none; }
.uvlf-primary-nav .navbar-collapse { display: flex !important; height: auto !important; padding: 0; border: 0; box-shadow: none; }
.uvlf-primary-nav .nav.navbar-nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; margin: 0; }
.uvlf-primary-nav .nav > li { flex: 0 0 auto; float: none; }
.uvlf-primary-nav .nav > li > a { white-space: nowrap; }
.uvlf-primary-nav .nav > li > a {
  position: relative; display: inline-flex; align-items: center;
  padding: 10px 22px;
  font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .88); text-shadow: none; background-color: transparent;
  transition: color .2s ease;
}
.uvlf-primary-nav .nav > li > a:hover, .uvlf-primary-nav .nav > li > a:focus, .uvlf-primary-nav .nav > li.open > a { background: transparent; color: var(--uvlf-gold-bright); }
.uvlf-primary-nav .nav > li > a.uvlf-active { color: var(--uvlf-gold-bright); }
.uvlf-primary-nav .nav > li > a.uvlf-active:before { margin-right: 8px; color: var(--uvlf-gold-bright); font-weight: 400; content: "["; }
.uvlf-primary-nav .nav > li > a.uvlf-active:after { margin-left: 8px; color: var(--uvlf-gold-bright); font-weight: 400; content: "]"; }
.uvlf-primary-nav .dropdown-menu { margin-top: 16px; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); box-shadow: var(--uvlf-shadow); padding: 10px 0; background: #fff; }
.uvlf-primary-nav .dropdown-inner a { padding: 8px 20px; color: var(--uvlf-ink); font-size: 13px; }
.uvlf-primary-nav .dropdown-inner li a:hover, .uvlf-primary-nav .see-all:hover { background: var(--uvlf-dark-soft); color: var(--uvlf-dark); }
.uvlf-primary-nav .see-all { display: block; border-top: 1px solid var(--uvlf-line); color: var(--uvlf-dark); padding: 10px 20px; font-weight: 600; }
@media (min-width: 992px) {
  .uvlf-primary-nav .dropdown:hover .dropdown-menu { display: block; }
}

/* Spotlight navbar — the one shared desktop nav treatment, every page.
   The pill, the two glow layers (mouse spotlight + active-item ambience)
   and their positions (--spotlight-x/--spotlight-opacity,
   --ambience-x/--ambience-w) are driven by initUvlfSpotlightNav() in
   footer.twig, which now runs on every page, not just the homepage. */
@media (min-width: 992px) {
  .uvlf-primary-nav .nav.navbar-nav {
    position: relative;
    isolation: isolate;
    gap: 4px;
    padding: 5px 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(var(--uvlf-dark-deep-rgb), .34);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  .uvlf-primary-nav .nav > li,
  .uvlf-primary-nav .nav > li > a { position: relative; z-index: 2; }
  .uvlf-primary-nav .nav > li > a { padding: 8px 18px; }
  /* Spotlight glow layers: sit behind the links, above the pill background */
  .uvlf-primary-nav .nav.navbar-nav:before,
  .uvlf-primary-nav .nav.navbar-nav:after {
    display: block; position: absolute; top: 4px; bottom: 4px; z-index: 1;
    pointer-events: none; content: ""; clear: none;
  }
  /* Mouse-tracking spotlight */
  .uvlf-primary-nav .nav.navbar-nav:before {
    left: var(--spotlight-x, 50%);
    width: 150px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(200, 159, 70, .16), transparent 70%);
    opacity: var(--spotlight-opacity, 0);
    transition: opacity .35s ease;
  }
  /* Active item ambience: soft glow + a slim gold underline, both keyed to --ambience-x/--ambience-w */
  .uvlf-primary-nav .nav.navbar-nav:after {
    left: var(--ambience-x, 50%);
    width: var(--ambience-w, 70px);
    transform: translateX(-50%);
    border-radius: 999px;
    opacity: 1;
    transition: opacity .2s ease;
    background:
      linear-gradient(rgba(212, 175, 90, .9), rgba(212, 175, 90, .9)) bottom / 100% 2px no-repeat,
      radial-gradient(ellipse 70% 65% at center, rgba(212, 175, 90, .16), transparent 75%);
  }
  /* Routes like a product page match no top-level nav link, so there is
     no legitimately active item — hide the glow/underline entirely
     instead of it defaulting to a stray pill at the nav's left edge. */
  .uvlf-primary-nav .nav.navbar-nav.uvlf-no-active:after { opacity: 0; }
  /* The spotlight design carries its own active indicator; the bracket
     motif would compete with it, so it steps aside everywhere the pill applies. */
  .uvlf-primary-nav .nav > li > a.uvlf-active:before,
  .uvlf-primary-nav .nav > li > a.uvlf-active:after { content: none; }
}
@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  .uvlf-primary-nav .nav.navbar-nav:before { display: none; }
  .uvlf-primary-nav .nav.navbar-nav:after { transition: none; }
}

/* Right-side actions: language, search, account, cart */
.uvlf-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; margin-left: auto; }
.uvlf-lang-compact { position: relative; padding-right: 14px; margin-right: 4px; }
.uvlf-lang-compact:after { position: absolute; top: 50%; right: 0; width: 1px; height: 20px; background: rgba(255, 255, 255, .25); content: ""; transform: translateY(-50%); }

.uvlf-lang-compact .uvlf-language { display: flex; }
.uvlf-lang-compact .btn-group { display: flex; }
.uvlf-lang-compact .btn-link {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 8px; border: 0; background: transparent; box-shadow: none; text-decoration: none;
  color: rgba(255, 255, 255, .82); font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.uvlf-lang-compact .btn-link:hover, .uvlf-lang-compact .btn-link:focus { color: var(--uvlf-gold-bright); background: transparent; text-decoration: none; outline: none; }
.uvlf-lang-compact .uvlf-lang-caret { font-size: 10px; }
.uvlf-lang-compact .dropdown-menu { margin-top: 14px; min-width: 150px; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); box-shadow: var(--uvlf-shadow); padding: 6px; background: #fff; }
.uvlf-lang-compact .dropdown-menu .btn-link { width: 100%; padding: 8px 10px; border-radius: 4px; color: var(--uvlf-ink); }
.uvlf-lang-compact .dropdown-menu .btn-link:hover { background: var(--uvlf-dark-soft); color: var(--uvlf-dark); }
.uvlf-lang-compact img { display: none; }

.uvlf-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: rgba(255, 255, 255, .92); font-size: 17px;
  cursor: pointer; transition: color .2s ease, background .2s ease;
}
.uvlf-icon-btn:hover, .uvlf-icon-btn:focus { background: rgba(255, 255, 255, .08); color: var(--uvlf-gold-bright); text-decoration: none; }
.uvlf-icon-btn:focus-visible { outline: 3px solid rgba(184, 148, 74, .8); outline-offset: 2px; }
.uvlf-icon-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .1); color: var(--uvlf-gold-bright); }

.uvlf-account-trigger .dropdown-menu { margin-top: 14px; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); box-shadow: var(--uvlf-shadow); background: #fff; }

.uvlf-cart-trigger { position: relative; width: 40px; height: 40px; }
.uvlf-cart-trigger .uvlf-cart-real { position: absolute; inset: 0; }
.uvlf-cart-trigger .uvlf-cart-real-btn {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  font-size: 0; line-height: 0; color: transparent; overflow: hidden; cursor: pointer;
}
.uvlf-cart-trigger .uvlf-cart-real-btn:focus-visible { outline: 3px solid rgba(184, 148, 74, .8); outline-offset: 2px; }
/* =====================================================================
   MINI CART — dropdown panel opened from the header cart icon. Root
   stays <ul class="dropdown-menu">/<li> (Bootstrap's dropdown JS toggles
   .open on #cart to show/hide it, and common.js refreshes it via
   $('#cart > ul').load('...common/cart/info ul li')) — only what's
   inside each <li> is theme-specific markup.
   ===================================================================== */
.uvlf-cart-panel {
  margin-top: 14px; padding: 0; z-index: 1001;
  width: 380px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius);
  box-shadow: var(--uvlf-shadow);
  list-style: none;
}
.uvlf-cart-panel-inner { padding: 0; }
.uvlf-cart-panel-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--uvlf-line);
}
.uvlf-cart-panel-title {
  font-family: "Source Serif 4", Georgia, serif; font-size: 17px; font-weight: 600; color: var(--uvlf-dark);
}
.uvlf-cart-panel-count {
  flex: 0 0 auto;
  font-family: "DM Sans", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--uvlf-muted);
}

/* --- Item list ----------------------------------------------------------- */
.uvlf-cart-items { max-height: 320px; overflow-y: auto; padding: 6px 8px; }
.uvlf-cart-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 34px 10px 10px; border-radius: var(--uvlf-radius);
  transition: background .15s var(--uvlf-ease);
}
.uvlf-cart-item:hover { background: var(--uvlf-dark-soft); }
.uvlf-cart-item + .uvlf-cart-item { margin-top: 2px; }
.uvlf-cart-item-thumb {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius);
  background: var(--uvlf-paper); overflow: hidden;
}
.uvlf-cart-item-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.uvlf-cart-item-body { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.uvlf-cart-item-body--voucher { padding-top: 6px; }
.uvlf-cart-item-name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--uvlf-ink);
}
a.uvlf-cart-item-name:hover { color: var(--uvlf-dark); }
.uvlf-cart-item-options { margin: 3px 0 0; font-size: 11px; color: var(--uvlf-muted); line-height: 1.4; }
.uvlf-cart-item-options span { display: block; }
.uvlf-cart-item-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.uvlf-cart-item-qty { font-family: "DM Sans", sans-serif; font-size: 11.5px; color: var(--uvlf-muted); }
.uvlf-cart-item-total { font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; color: var(--uvlf-dark); font-variant-numeric: tabular-nums; }
.uvlf-cart-item-remove {
  position: absolute; top: 8px; right: 6px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--uvlf-muted); font-size: 11px;
  cursor: pointer; transition: background .18s var(--uvlf-ease), color .18s var(--uvlf-ease);
}
.uvlf-cart-item-remove:hover, .uvlf-cart-item-remove:focus-visible { background: #fff; color: var(--uvlf-dark); box-shadow: 0 1px 4px rgba(var(--uvlf-dark-rgb), .18); }

/* --- Totals summary -------------------------------------------------------- */
.uvlf-cart-summary { padding: 14px 20px; border-top: 1px solid var(--uvlf-line); background: var(--uvlf-paper); }
.uvlf-cart-summary-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: "DM Sans", sans-serif; font-size: 12.5px; color: var(--uvlf-muted);
  padding: 3px 0;
}
.uvlf-cart-summary-row span:last-child { font-variant-numeric: tabular-nums; }
.uvlf-cart-summary-row--total {
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--uvlf-line);
  font-size: 15px; font-weight: 700; color: var(--uvlf-dark);
}

/* --- Actions --------------------------------------------------------------- */
.uvlf-cart-actions { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 18px; }
@media (min-width: 380px) {
  .uvlf-cart-actions { flex-direction: row; }
  .uvlf-cart-actions .uvlf-cart-modal-btn { flex: 1 1 0; }
}

/* --- Empty state ------------------------------------------------------------ */
.uvlf-cart-empty { padding: 34px 24px; text-align: center; }
.uvlf-cart-empty .fa { font-size: 26px; color: var(--uvlf-line); margin-bottom: 12px; }
.uvlf-cart-empty p { margin: 0 0 18px; font-family: "DM Sans", sans-serif; font-size: 13px; color: var(--uvlf-muted); }

@media (max-width: 480px) {
  /* #cart prefix beats bootstrap's .dropdown-menu.pull-right { right: 0;
     left: auto; } (2-class specificity) so the panel actually gets its
     12px margins on mobile instead of sitting flush against the edge. */
  #cart .uvlf-cart-panel {
    position: fixed; top: 66px; right: 12px; left: 12px;
    width: auto; max-width: none; margin-top: 0;
    max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .uvlf-cart-items { max-height: 45vh; }
}
.uvlf-cart-visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .92); font-size: 17px; pointer-events: none; transition: color .2s ease; }
.uvlf-cart-trigger:hover .uvlf-cart-visual { color: var(--uvlf-gold-bright); }
.uvlf-cart-badge {
  position: absolute; top: 1px; right: 1px;
  display: flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--uvlf-dark);
  background: var(--uvlf-gold); color: var(--uvlf-dark);
  font-family: "DM Sans", sans-serif; font-size: 10px; font-weight: 700; line-height: 1;
}
.uvlf-cart-badge[hidden] { display: none; }

/* Search: icon-only trigger revealing the existing OpenCart search field */
.uvlf-search-panel {
  position: absolute; z-index: 1; top: 100%; left: 0; right: 0;
  background: var(--uvlf-dark);
  box-shadow: 0 16px 40px rgba(var(--uvlf-dark-black-rgb), .3);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s var(--uvlf-ease), opacity .2s ease;
}
.uvlf-search-panel:not([hidden]) { max-height: 140px; opacity: 1; }
.uvlf-search-panel-inner { padding: 22px 0; }
.uvlf-search-panel #search input {
  height: 52px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--uvlf-radius) 0 0 var(--uvlf-radius);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; padding-left: 20px; box-shadow: none;
}
.uvlf-search-panel #search input::placeholder { color: rgba(255, 255, 255, .55); }
.uvlf-search-panel #search input:focus { background: rgba(255, 255, 255, .14); border-color: var(--uvlf-gold); box-shadow: none; }
.uvlf-search-panel #search button { height: 52px; min-width: 58px; border: 0; border-radius: 0 var(--uvlf-radius) var(--uvlf-radius) 0; background: var(--uvlf-gold); color: var(--uvlf-dark); }
.uvlf-search-panel #search button:hover { background: var(--uvlf-gold-bright); }

/* --- Live search suggestions --------------------------------------------
   The panel is normally capped at max-height:140px (just room for the
   input row) with overflow:hidden for its slide-down reveal animation;
   grow and let it scroll internally once suggestions are showing. */
.uvlf-search-panel:has(#uvlf-suggest:not([hidden])) { max-height: min(80vh, 620px); overflow-y: auto; }
.uvlf-suggest { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.uvlf-suggest[hidden] { display: none; }
.uvlf-suggest-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 6px; border-radius: var(--uvlf-radius);
  color: rgba(255, 255, 255, .92); text-decoration: none;
}
.uvlf-suggest-item:hover, .uvlf-suggest-item:focus-visible, .uvlf-suggest-item--active {
  background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none;
}
.uvlf-suggest-item:focus-visible { outline: 2px solid rgba(184, 148, 74, .8); outline-offset: -2px; }
.uvlf-suggest-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: var(--uvlf-radius);
  background: #fff; object-fit: contain; padding: 3px;
}
.uvlf-suggest-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.uvlf-suggest-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600;
}
.uvlf-suggest-price { display: flex; align-items: center; gap: 7px; font-family: "DM Sans", sans-serif; font-size: 12px; }
.uvlf-suggest-price, .uvlf-suggest-price-new { color: var(--uvlf-gold-bright); font-weight: 700; }
.uvlf-suggest-price-old { color: rgba(255, 255, 255, .5); font-weight: 400; text-decoration: line-through; }
.uvlf-suggest-viewall {
  display: block; margin-top: 6px; padding: 12px 6px 8px; border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--uvlf-gold-bright); text-align: center; text-decoration: none;
  font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.uvlf-suggest-viewall:hover, .uvlf-suggest-viewall:focus-visible, .uvlf-suggest-viewall.uvlf-suggest-item--active {
  color: #fff; text-decoration: none; background: rgba(255, 255, 255, .06);
}
.uvlf-suggest-empty { margin: 0; padding: 16px 6px; color: rgba(255, 255, 255, .6); font-family: "DM Sans", sans-serif; font-size: 13px; font-style: italic; text-align: center; }

/* Mobile menu toggle (hamburger) */
.uvlf-menu-toggle { display: none; flex: 0 0 auto; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: 2px; border: 0; background: transparent; cursor: pointer; }
.uvlf-menu-toggle span { display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s ease, opacity .25s ease; }
.uvlf-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.uvlf-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.uvlf-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.uvlf-menu-toggle:focus-visible { outline: 3px solid rgba(184, 148, 74, .8); outline-offset: 3px; }

.uvlf-nav-backdrop { position: fixed; inset: 0; z-index: var(--uvlf-z-overlay-backdrop); background: rgba(var(--uvlf-dark-black-rgb), .5); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
body.uvlf-nav-open .uvlf-nav-backdrop { opacity: 1; pointer-events: auto; }

/* Homepage-only ADDITION on top of the shared header above: it floats
   fixed, transparent and enlarged over the hero before scroll, then
   drops back to the exact shared/default look (.uvlf-header--pinned is
   just "not overridden any more") once the user scrolls past the hero.
   No other page adds or overrides anything here. */
body:has(#common-home) .uvlf-header { position: fixed; top: 0; left: 0; right: 0; }
body:has(#common-home) .uvlf-header:not(.uvlf-header--pinned) {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body:has(#common-home) .uvlf-header-scrim {
  opacity: 1;
  height: 230px;
  background: linear-gradient(to bottom, rgba(var(--uvlf-dark-black-rgb), .58), rgba(var(--uvlf-dark-black-rgb), .22) 55%, transparent);
}
body:has(#common-home) .uvlf-header.uvlf-header--pinned .uvlf-header-scrim { opacity: 0; }
/* Enlarging the logo/row only makes sense at desktop sizes, where the
   header row has room for it. These three selectors' specificity
   (body:has + 2-3 classes) beats the plain .uvlf-brand-mark rules the
   max-width:991px/767px blocks use to shrink the logo for mobile, so
   without this >=992px guard the logo stayed full-size (60px) on phones
   too, overflowing the header row and pushing the hamburger button
   off-screen until the header pinned. */
@media (min-width: 992px) {
  body:has(#common-home) .uvlf-header:not(.uvlf-header--pinned) .uvlf-header-row { padding: 24px 0; }
  body:has(#common-home) .uvlf-header:not(.uvlf-header--pinned) .uvlf-brand-mark { width: 60px; height: 60px; }
  body:has(#common-home) .uvlf-header:not(.uvlf-header--pinned) .uvlf-brand-copy strong { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .uvlf-header, .uvlf-header-row, .uvlf-header-scrim, .uvlf-primary-nav, .uvlf-search-panel, .uvlf-menu-toggle span { transition: none !important; }
}

@media (max-width: 991px) {
  .uvlf-header-row { gap: 16px; padding: 18px 0; }
  .uvlf-brand-mark { width: 48px; height: 48px; }
  .uvlf-brand-copy strong { font-size: 20px; }
  .uvlf-brand-copy span { display: none; }

  .uvlf-primary-nav {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--uvlf-z-overlay);
    width: min(86vw, 360px); padding: 22px 24px 32px;
    background: var(--uvlf-dark);
    box-shadow: -16px 0 44px rgba(var(--uvlf-dark-black-rgb), .3);
    transform: translateX(100%); transition: transform .32s var(--uvlf-ease);
    overflow-y: auto;
  }
  body.uvlf-nav-open .uvlf-primary-nav { transform: translateX(0); }
  .uvlf-primary-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .uvlf-primary-nav-title { color: #fff; font-family: "Source Serif 4", Georgia, serif; font-size: 19px; }
  .uvlf-nav-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
  .uvlf-nav-close:hover { background: rgba(255, 255, 255, .08); color: var(--uvlf-gold-bright); }
  .uvlf-primary-nav .navbar-collapse { flex-direction: column; align-items: stretch; }
  .uvlf-primary-nav .nav.navbar-nav { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .uvlf-primary-nav .nav > li > a { width: 100%; padding: 15px 2px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 14px; }
  .uvlf-primary-nav .dropdown-menu { position: static; float: none; border: 0; border-radius: 0; box-shadow: none; background: rgba(255, 255, 255, .06); margin: 0; padding-bottom: 8px; }
  .uvlf-primary-nav .dropdown-inner a { color: rgba(255, 255, 255, .82); }
  .uvlf-primary-nav .see-all { border-top-color: rgba(255, 255, 255, .12); color: var(--uvlf-gold-bright); }

  .uvlf-nav-extra { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); }
  .uvlf-nav-extra-link { padding: 12px 2px; color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
  .uvlf-nav-extra-link:hover { color: var(--uvlf-gold-bright); }
  .uvlf-nav-extra-tel { color: rgba(255, 255, 255, .55); font-weight: 500; }

  .uvlf-menu-toggle { display: flex; }

  body:has(#common-home) .uvlf-header-scrim { height: 170px; }
}

@media (max-width: 767px) {
  .uvlf-header-row { padding: 13px 0; gap: 10px; }
  .uvlf-brand-mark { width: 36px; height: 36px; }
  .uvlf-brand-copy strong { font-size: 14px; }
  .uvlf-lang-compact { padding-right: 8px; }
  .uvlf-lang-compact .btn-link { padding: 10px 4px; }
  .uvlf-lang-compact .uvlf-lang-name { display: none; }
  .uvlf-lang-compact .uvlf-lang-caret { display: none; }
  .uvlf-lang-compact .uvlf-lang-icon { font-size: 16px; }
  .uvlf-account-trigger { display: none; }
  .uvlf-icon-btn { width: 36px; height: 36px; font-size: 15px; }
  .uvlf-cart-trigger { width: 36px; height: 36px; }
}

/* ---------------------------------------------------------------------
   Global surfaces, forms and controls
   --------------------------------------------------------------------- */
#content { min-height: 360px; }
.breadcrumb { margin: 24px 0 20px; padding: 0; background: transparent; color: var(--uvlf-muted); font-size: 12px; }
.breadcrumb > li + li:before { color: var(--uvlf-gold); }
.breadcrumb a { color: var(--uvlf-muted); }
.breadcrumb a:hover { color: var(--uvlf-dark); }
.btn { border-radius: var(--uvlf-radius); border-width: 1px; font-weight: 600; transition: background .18s var(--uvlf-ease), border-color .18s var(--uvlf-ease), color .18s var(--uvlf-ease), transform .18s var(--uvlf-ease); }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--uvlf-dark); border-color: var(--uvlf-dark); }
.btn-primary:hover, .btn-primary:focus { background: var(--uvlf-dark-deep); border-color: var(--uvlf-dark-deep); }
.btn-default { background: #fff; border-color: var(--uvlf-line); color: var(--uvlf-dark); }
.btn-default:hover, .btn-default:focus { background: var(--uvlf-dark-soft); border-color: var(--uvlf-dark); color: var(--uvlf-dark); }
.form-control { border-color: var(--uvlf-line); border-radius: var(--uvlf-radius); box-shadow: none; color: var(--uvlf-ink); font-size: 14px; min-height: 42px; }
.form-control:focus { border-color: var(--uvlf-dark); box-shadow: 0 0 0 3px rgba(var(--uvlf-dark-rgb), .09); }
.alert { border-radius: var(--uvlf-radius); border: 1px solid transparent; }
/* Add-to-cart/wishlist/compare success (and any other alert OpenCart's
   own common.js inserts the same way — see cart.add/wishlist.add/
   compare.add) lands as a direct child of the page's .container, right
   before the content row, then the page is scrolled to the top. At that
   scroll position it sits exactly where the sticky header (z-index:
   var(--uvlf-z-header)) pins itself, and a plain in-flow div with no
   z-index paints below any positioned+z-indexed sibling — so the header
   was covering it. Giving it its own stacking position above the header
   (not moving it, not touching the JS) fixes that without affecting
   alerts elsewhere in the page (checkout step warnings etc. are inserted
   deep inside panel bodies, not matched by this selector). */
.container > .alert.alert-dismissible {
  position: relative;
  z-index: var(--uvlf-z-alert);
}

/* Inline field-level warning (e.g. missing Slovenská pošta pickup point) —
   sits directly under the control it refers to, not a page-wide banner. */
.uvlf-inline-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--uvlf-radius);
  border: 1px solid rgba(178, 38, 30, .25);
  background: #fdecea;
  color: #8a241c;
  font-size: 13px;
  line-height: 1.5;
}
.uvlf-inline-warning i { margin-top: 2px; color: #b3261e; flex: 0 0 auto; }
.uvlf-inline-warning span { flex: 1 1 auto; }
@media (max-width: 480px) {
  .uvlf-inline-warning { font-size: 12.5px; padding: 9px 12px; }
}
.panel { border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); box-shadow: none; overflow: hidden; }
.panel-heading { background: #f4f7f4; border-color: var(--uvlf-line); }
.panel-title { color: var(--uvlf-dark); font-size: 15px; font-weight: 600; }
.panel-title a { color: inherit; display: block; }
.table { background: #fff; }
.table > thead > tr > td, .table > thead > tr > th { background: var(--uvlf-dark); border-color: var(--uvlf-dark); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.table > tbody > tr > td { border-color: var(--uvlf-line); vertical-align: middle; }

/* ---------------------------------------------------------------------
   Product system
   --------------------------------------------------------------------- */
.uvlf-product-section { padding-top: 8px; }
.uvlf-section-heading { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; }
.uvlf-section-heading:after { display: block; width: 48px; height: 2px; background: var(--uvlf-gold); content: ""; }
.uvlf-carousel { position: relative; }
.uvlf-carousel-track { display: flex; flex-wrap: nowrap; gap: 24px; margin: 0; overflow-x: auto; padding: 10px 2px 18px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--uvlf-line) transparent; }
.uvlf-carousel-track::-webkit-scrollbar { height: 5px; }
.uvlf-carousel-track::-webkit-scrollbar-thumb { border-radius: 5px; background: var(--uvlf-line); }
.uvlf-carousel-track .product-layout { display: flex; flex: 0 0 calc((100% - 60px) / 4); max-width: calc((100% - 60px) / 4); min-width: 0; padding: 0; scroll-snap-align: start; }
.uvlf-product-grid .product-thumb { width: 100%; }
.uvlf-carousel-arrow { position: absolute; z-index: 2; top: 42%; width: 42px; height: 42px; border: 1px solid var(--uvlf-line); border-radius: 50%; background: #fff; box-shadow: 0 8px 20px rgba(var(--uvlf-dark-rgb), .12); color: var(--uvlf-dark); font-size: 20px; line-height: 1; transform: translateY(-50%); transition: background .18s var(--uvlf-ease), border-color .18s var(--uvlf-ease), color .18s var(--uvlf-ease), opacity .18s var(--uvlf-ease), transform .18s var(--uvlf-ease); }
.uvlf-carousel-arrow:hover:not(:disabled) { border-color: var(--uvlf-dark); background: var(--uvlf-dark); color: #fff; transform: translateY(-50%) scale(1.04); }
.uvlf-carousel-arrow:disabled { cursor: default; opacity: .35; }
.uvlf-carousel-prev { left: -21px; }
.uvlf-carousel-next { right: -21px; }

.product-detail-summary { position: sticky; top: 20px; }

/* =====================================================================
   PRODUCT DETAIL — same editorial system as the cards: paper-toned
   image stage, serif title, restrained gold accents, one clear CTA.
   ===================================================================== */
#product-product .thumbnails { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; }
#product-product .thumbnails li { float: none; margin: 0; list-style: none; }
#product-product .thumbnails .thumbnail { margin: 0; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); background: var(--uvlf-paper); box-shadow: none; transition: border-color .2s var(--uvlf-ease); }
#product-product .thumbnails .thumbnail:hover { border-color: rgba(var(--uvlf-dark-rgb), .3); }
#product-product .thumbnails > li:first-child { flex: 1 0 100%; }
#product-product .thumbnails > li:first-child .thumbnail { padding: 30px; text-align: center; }
#product-product .thumbnails > li:first-child img { max-height: 460px; margin: auto; mix-blend-mode: multiply; }
#product-product .image-additional .thumbnail { padding: 8px; }
#product-product .image-additional img { mix-blend-mode: multiply; }

#product-product .nav-tabs { border-bottom-color: var(--uvlf-line); margin-top: 28px; }
#product-product .nav-tabs > li > a { border: 0; color: var(--uvlf-muted); font-weight: 600; font-family: "DM Sans", sans-serif; font-size: 13px; letter-spacing: .02em; }
#product-product .nav-tabs > li.active > a, #product-product .nav-tabs > li > a:hover { border-bottom: 2px solid var(--uvlf-gold); background: transparent; color: var(--uvlf-dark); }
#product-product .tab-content { padding-top: 22px; color: var(--uvlf-ink); font-size: 14px; line-height: 1.75; }
#product-product .tab-content h2 { font-size: 20px; margin: 0 0 16px; }
#product-product .tab-pane .table { border: 1px solid var(--uvlf-line); }
#product-product .tab-pane thead td { background: var(--uvlf-dark-soft); font-weight: 700; }

.uvlf-product-info h1 { margin: 0 0 14px; font-size: clamp(26px, 3vw, 34px); }
.uvlf-detail-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.uvlf-detail-actions .uvlf-card-icon-btn { position: static; opacity: 1; }
.uvlf-detail-meta { margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--uvlf-line); color: var(--uvlf-muted); font-size: 13px; }
.uvlf-detail-meta li { margin-bottom: 4px; }
.uvlf-detail-meta a { color: var(--uvlf-dark); font-weight: 600; }
.uvlf-detail-price { margin-bottom: 22px; }
.uvlf-detail-price-current { display: block; color: var(--uvlf-dark); font-family: "Source Serif 4", Georgia, serif; font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uvlf-detail-price-old { display: block; margin-bottom: 2px; color: #9aa49f; font-size: 15px; text-decoration: line-through; }
.uvlf-detail-price-tax { display: block; margin-top: 6px; color: var(--uvlf-muted); font-size: 12px; }
.uvlf-detail-discounts { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--uvlf-line); color: var(--uvlf-muted); font-size: 12px; }

#product-product #product { margin-top: 6px; padding: 22px; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); background: var(--uvlf-paper); }
#product-product #product h3 { font-size: 15px; margin: 0 0 14px; }
#product-product .form-group label.control-label { font-weight: 600; color: var(--uvlf-dark); }
#product-product #input-quantity { display: inline-block; width: 84px; margin-right: 12px; vertical-align: middle; }

.uvlf-detail-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border: 0; border-radius: var(--uvlf-radius);
  background: var(--uvlf-dark); color: #fff;
  font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: background .2s var(--uvlf-ease), transform .2s var(--uvlf-ease);
}
.uvlf-detail-add .fa { color: var(--uvlf-gold-bright); transition: transform .2s var(--uvlf-ease); }
.uvlf-detail-add:hover, .uvlf-detail-add:focus-visible { background: var(--uvlf-dark-deep); transform: translateY(-1px); }
.uvlf-detail-add:hover .fa, .uvlf-detail-add:focus-visible .fa { transform: translateX(3px); }
.uvlf-detail-add--compact { min-height: 44px; padding: 0 22px; font-size: 13px; }

.uvlf-detail-rating-summary { margin-top: 18px; color: var(--uvlf-gold); font-size: 13px; }
.uvlf-detail-rating-summary a { color: var(--uvlf-muted); font-weight: 600; }
.uvlf-detail-rating-summary a:hover { color: var(--uvlf-dark); }

.uvlf-related-heading { margin: 48px 0 24px; }
.uvlf-related-products { margin-right: -12px; margin-left: -12px; }
.uvlf-related-products > div { padding: 0 12px; margin-bottom: 24px; }

.product-layout { margin-bottom: 28px; }

/* Shared card shell — applies everywhere .product-thumb is used
   (homepage carousels, category grid/list, search results). */
.product-thumb { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); background: #fff; box-shadow: none; transition: box-shadow .24s var(--uvlf-ease), transform .24s var(--uvlf-ease), border-color .24s var(--uvlf-ease); }
.product-thumb:hover { border-color: rgba(var(--uvlf-dark-rgb), .22); box-shadow: var(--uvlf-shadow); transform: translateY(-4px); }
.product-thumb .image { display: flex; align-items: center; justify-content: center; height: 230px; margin: 0; padding: 22px; background: var(--uvlf-paper); }
.product-thumb .image img { max-height: 190px; width: auto; mix-blend-mode: multiply; transition: transform .35s var(--uvlf-ease); }
.product-thumb:hover .image img { transform: scale(1.035); }
.product-thumb .caption { display: flex; flex: 1; flex-direction: column; padding: 20px 20px 12px; }
.product-thumb h4 { margin: 0 0 8px; min-height: 42px; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 16px; line-height: 1.32; }
.product-thumb h4 a { color: var(--uvlf-dark); }
.product-thumb h4 a:hover { color: var(--uvlf-gold); }
.product-thumb .caption > p:not(.price) { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0 0 14px; color: var(--uvlf-muted); font-size: 12px; line-height: 1.55; }
.product-thumb .rating { min-height: 19px; color: var(--uvlf-gold); padding-bottom: 0; }
.rating .fa-stack { font-size: 8px; }
.rating .fa-star-o { color: #c3ccc7; font-size: 15px; }
.rating .fa-star { color: var(--uvlf-gold); font-size: 15px; }
.product-thumb .price { margin-top: auto; color: var(--uvlf-dark); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.product-thumb .price-new { color: var(--uvlf-dark); }
.product-thumb .price-old { color: #9aa49f; font-size: 12px; font-weight: 400; text-decoration: line-through; margin-left: 8px; }
.product-thumb .price-tax { display: block; color: var(--uvlf-muted); font-size: 11px; font-weight: 400; }
.product-thumb .button-group { display: flex; border-top: 1px solid var(--uvlf-line); background: #fff; }
.product-thumb .button-group button { min-height: 46px; border: 0; border-right: 1px solid var(--uvlf-line); background: transparent; color: var(--uvlf-dark); font-size: 13px; transition: background .18s var(--uvlf-ease), color .18s var(--uvlf-ease); }
.product-thumb .button-group button:first-child { flex: 1; font-weight: 600; }
.product-thumb .button-group button:not(:first-child) { flex: 0 0 42px; color: #93a19a; font-size: 12px; }
.product-thumb .button-group button:last-child { border-right: 0; }
.product-thumb .button-group button:first-child:hover { background: var(--uvlf-dark); color: #fff; }
.product-thumb .button-group button:not(:first-child):hover { background: var(--uvlf-dark-soft); color: var(--uvlf-dark); }

/* =====================================================================
   EDITORIAL PRODUCT CARD — homepage carousels (Featured / Latest /
   Bestseller). Layers onto the shared .product-thumb shell above via
   .uvlf-product-card; category/search keep the shell as-is.
   ===================================================================== */
.uvlf-product-card { border-radius: 2px; }
.uvlf-product-card:hover { transform: translateY(-5px); }
/* The old default OpenCart "list view" float-and-indent layout assumed
   a floated .image; the editorial card stacks instead, so neutralise it. */
.product-list .uvlf-product-card .caption { margin-left: 0; min-height: 0; }
.product-list .uvlf-product-card { max-width: 420px; }

.uvlf-card-media { position: relative; display: block; }
.uvlf-card-stage { position: relative; display: flex; align-items: center; justify-content: center; height: 246px; padding: 26px; background: var(--uvlf-paper); overflow: hidden; }
.uvlf-card-stage:after {
  position: absolute; left: 50%; bottom: 22px; width: 62%; height: 14px;
  background: radial-gradient(ellipse at center, rgba(var(--uvlf-dark-deep-rgb), .16), transparent 72%);
  transform: translateX(-50%); content: ""; transition: opacity .3s var(--uvlf-ease);
}
.uvlf-card-stage img { position: relative; z-index: 1; max-height: 190px; width: auto; mix-blend-mode: multiply; transition: transform .35s var(--uvlf-ease); }
.uvlf-product-card:hover .uvlf-card-stage img { transform: scale(1.025) translateY(-2px); }
.uvlf-product-card:hover .uvlf-card-stage:after { opacity: .6; }

.uvlf-card-actions { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s var(--uvlf-ease); }
@media (hover: hover) and (pointer: fine) {
  .uvlf-product-card:hover .uvlf-card-actions, .uvlf-product-card:focus-within .uvlf-card-actions { opacity: 1; transform: translateY(0); }
}
@media (hover: none), (pointer: coarse) {
  .uvlf-card-actions { opacity: 1; transform: none; }
}
.uvlf-card-icon-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--uvlf-line); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--uvlf-dark); font-size: 13px; cursor: pointer; transition: background .18s var(--uvlf-ease), color .18s var(--uvlf-ease), border-color .18s var(--uvlf-ease); }
.uvlf-card-icon-btn:hover, .uvlf-card-icon-btn:focus-visible { background: var(--uvlf-dark); border-color: var(--uvlf-dark); color: #fff; }

.uvlf-product-card .caption { position: relative; padding: 22px 20px 10px; }
.uvlf-product-card .caption:before { position: absolute; top: 0; left: 20px; width: 34px; height: 2px; background: var(--uvlf-gold); content: ""; transform: scaleX(.65); transform-origin: left; transition: transform .28s var(--uvlf-ease); }
.uvlf-product-card:hover .caption:before { transform: scaleX(1); }
.uvlf-product-card h4 { min-height: 44px; font-size: 15.5px; }

.uvlf-card-cta { border-top: 1px solid var(--uvlf-line); }
.uvlf-card-add {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 48px; padding: 0 20px; border: 0; background: transparent;
  color: var(--uvlf-dark); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  cursor: pointer; transition: background .2s var(--uvlf-ease), color .2s var(--uvlf-ease);
}
.uvlf-card-add .fa { font-size: 12px; color: var(--uvlf-gold); transition: transform .2s var(--uvlf-ease); }
.uvlf-card-add:hover, .uvlf-card-add:focus-visible { background: var(--uvlf-dark); color: #fff; }
.uvlf-card-add:hover .fa, .uvlf-card-add:focus-visible .fa { color: #fff; transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .uvlf-product-card, .uvlf-product-card .caption:before, .uvlf-card-stage img, .uvlf-card-add .fa { transition: none !important; }
}

#product-category h2, #product-search h1, #product-special h1, #product-manufacturer h1, #product-product h1, #checkout-cart h1, #checkout-checkout h1 { margin: 12px 0 28px; }
#product-category .category-info { margin-bottom: 28px; }
#product-category .product-filter, #product-search .product-filter { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius); background: #fff; }
#product-category .product-filter .form-group, #product-search .product-filter .form-group { margin-bottom: 0; }

/* =====================================================================
   HOMEPAGE COMPOSITION
   ===================================================================== */
.uvlf-homepage { position: relative; padding-top: 24px; padding-bottom: 36px; }
.uvlf-homepage:before {
  position: absolute; z-index: -1; top: 0; right: -18vw; left: -18vw; height: 760px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
  content: "";
}
.uvlf-home-content { min-width: 0; }
.uvlf-home-modules > * + * { margin-top: 52px; }
.uvlf-home-modules > .uvlf-product-section:nth-child(even) { margin-right: -24px; margin-left: -24px; padding: 28px 24px 10px; background: rgba(249, 250, 247, .48); }

/* Hero */
.uvlf-home-hero {
  position: relative;
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: -24px;
  overflow: hidden; background: var(--uvlf-dark);
  /* Thin inset gold frame — the "designed, not just a photo" cue. */
  box-shadow: inset 0 0 0 2px rgba(212, 175, 90, .55);
}
.uvlf-hero-image {
  display: block; width: 100%; height: auto;
  transform-origin: 50% 35%;
  animation: uvlf-hero-kenburns 15s ease-out forwards;
}
@keyframes uvlf-hero-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.uvlf-hero-overlay {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--uvlf-dark-rgb), .90) 0%, rgba(var(--uvlf-dark-rgb), .50) 42%, rgba(var(--uvlf-dark-rgb), .05) 72%, transparent 100%);
}
.uvlf-hero-stamp { position: absolute; z-index: 1; right: 26px; bottom: 28px; display: flex; flex-direction: column; align-items: flex-end; color: #fff; text-align: right; }

.uvlf-hero-copy-wrap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; }
.uvlf-hero-copy-wrap > .container { width: min(100% - 40px, 1240px); margin: 0 auto; }
.uvlf-hero-copy { max-width: 560px; padding: 64px 0; }
.uvlf-eyebrow { display: block; margin-bottom: 20px; color: var(--uvlf-gold-bright); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.uvlf-hero-copy h1 { max-width: 540px; margin: 10px 0 24px; color: #fff; font-size: clamp(44px, 5vw, 76px); line-height: 1.02; }
.uvlf-hero-copy p { max-width: 460px; margin: 0; color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.7; }
.uvlf-hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 40px; }
.uvlf-hero-actions .btn { padding: 15px 20px; border-color: var(--uvlf-gold); background: var(--uvlf-gold); color: var(--uvlf-dark); }
.uvlf-hero-actions .btn:hover { border-color: #d3b46f; background: #d3b46f; color: var(--uvlf-dark); }
.uvlf-hero-actions .fa { margin-left: 10px; }
.uvlf-hero-link { display: inline-flex; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--uvlf-gold); color: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 600; }
.uvlf-hero-link:hover { color: var(--uvlf-gold-bright); }
.uvlf-hero-link .fa { margin-left: 9px; color: var(--uvlf-gold-bright); }
.uvlf-hero-stamp span { color: var(--uvlf-gold-bright); font-family: "Source Serif 4", Georgia, serif; font-size: 34px; font-weight: 600; line-height: 1; }
.uvlf-hero-stamp small { margin-top: 6px; color: rgba(255, 255, 255, .72); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }

/* Facts / live statistics band */
.uvlf-facts {
  display: grid; grid-template-columns: minmax(210px, .9fr) 2.1fr; align-items: stretch; gap: 34px;
  margin: -20px 0 52px; padding: 28px 32px;
  border-top: 1px solid rgba(184, 148, 74, .42); border-bottom: 1px solid rgba(var(--uvlf-dark-rgb), .14);
  background: rgba(251, 252, 250, .54);
}
.uvlf-facts-intro { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding-right: 24px; border-right: 1px solid var(--uvlf-line); }
.uvlf-facts-intro .uvlf-section-kicker { margin-bottom: 8px; }
.uvlf-facts-intro p { max-width: 220px; margin: 0; color: var(--uvlf-muted); font-size: 12px; line-height: 1.6; }
.uvlf-facts-list { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uvlf-fact { display: flex; min-width: 0; min-height: 72px; flex-direction: column; justify-content: center; padding: 0 22px; }
.uvlf-fact span { overflow-wrap: break-word; }
.uvlf-fact + .uvlf-fact { border-left: 1px solid var(--uvlf-line); }
.uvlf-fact strong { color: var(--uvlf-dark); font-family: "Source Serif 4", Georgia, serif; font-size: clamp(27px, 3vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.uvlf-fact span { margin-top: 8px; color: var(--uvlf-muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; }

.uvlf-section-kicker { margin-bottom: 10px; color: var(--uvlf-gold); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

/* Category composition — exactly two intentional tiles, never a padded grid */
.uvlf-category-intro { position: relative; isolation: isolate; margin: 0 -24px 48px; padding: 0 24px; }
.uvlf-category-intro:before {
  position: absolute; z-index: -1; top: -28px; right: -12vw; left: -12vw; bottom: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, rgba(var(--uvlf-dark-rgb), .06), transparent 68%);
  content: "";
}
.uvlf-category-intro h2 { margin: 0 0 24px; }
.uvlf-category-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.uvlf-category-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; min-height: 320px; flex-direction: column; justify-content: space-between;
  padding: 44px; background: rgba(255, 255, 255, .72); color: var(--uvlf-dark);
  box-shadow:
    inset 0 0 0 1px rgba(184, 148, 74, .16),
    0 1px 2px rgba(var(--uvlf-dark-rgb), .05),
    0 22px 44px -26px rgba(var(--uvlf-dark-rgb), .28);
  transition: transform .4s var(--uvlf-ease), box-shadow .4s var(--uvlf-ease);
}
/* Both tiles share one watermark language — a giant ghost numeral tied
   to the tile's own "01"/"02" index — instead of one tile carrying a
   photographic cover and the other a bare letterform. A real cover
   photo for e-publications would need to come from their (busy,
   multi-image) collage-style covers, which reads worse as a faint
   background than a clean typographic mark; matching that same mark on
   the books tile instead gives both tiles equal visual weight. */
.uvlf-category-tile:before {
  position: absolute; z-index: -2; right: -18px; bottom: -74px; left: auto; top: auto;
  content: "1";
  font-family: "Source Serif 4", Georgia, serif; font-size: 280px; font-weight: 500; line-height: 1;
  color: rgba(255, 255, 255, .08);
  transition: transform .6s var(--uvlf-ease), color .4s var(--uvlf-ease);
}
/* A quiet diagonal sheen — the "glass-like" layer — sitting above the
   numeral but below the copy; it is the one thing that moves on its own
   axis on hover, giving the lift a sense of light rather than a second
   effect competing for attention. */
.uvlf-category-tile:after {
  position: absolute; z-index: -1; inset: 0; content: "";
  background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, transparent 32%);
  background-size: 180% 180%; background-position: 0% 0%;
  pointer-events: none;
  transition: background-position .6s var(--uvlf-ease);
}
.uvlf-category-tile:hover {
  box-shadow:
    inset 0 0 0 1px rgba(184, 148, 74, .3),
    0 1px 2px rgba(var(--uvlf-dark-rgb), .06),
    0 34px 60px -24px rgba(var(--uvlf-dark-rgb), .38);
  transform: translateY(-6px); color: var(--uvlf-dark);
}
.uvlf-category-tile:hover:before { transform: translateY(-8px); }
.uvlf-category-tile:hover:after { background-position: 12% 8%; }
.uvlf-category-tile--primary { background: var(--uvlf-dark); color: #fff; }
.uvlf-category-tile--primary:hover { color: #fff; }
.uvlf-category-tile--primary:hover:before { color: rgba(255, 255, 255, .14); }

/* Secondary tile (e-publikácie): a paper/gold counterpart to the primary
   green tile. */
.uvlf-category-tile:nth-child(2) { background: linear-gradient(155deg, #fdfaf2 0%, var(--uvlf-gold-soft) 100%); }
.uvlf-category-tile:nth-child(2):before { content: "2"; color: rgba(184, 148, 74, .14); }
.uvlf-category-tile:nth-child(2):hover:before { color: rgba(184, 148, 74, .22); }
.uvlf-category-tile:nth-child(2):after { background: linear-gradient(115deg, rgba(255, 255, 255, .5) 0%, transparent 28%); }

.uvlf-category-eyebrow { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.uvlf-category-dash { display: block; width: 30px; height: 2px; background: var(--uvlf-gold); transform: scaleX(.6); transform-origin: left; transition: transform .3s var(--uvlf-ease); }
.uvlf-category-tile:hover .uvlf-category-dash { transform: scaleX(1); }
.uvlf-category-number { color: var(--uvlf-gold); font-size: 13px; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.uvlf-category-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.uvlf-category-tile strong {
  max-width: 260px;
  font-family: "Source Serif 4", Georgia, serif; font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1.14;
}
.uvlf-category-tile--primary strong { font-size: 36px; max-width: 300px; }
.uvlf-category-desc {
  max-width: 230px;
  font-family: "DM Sans", sans-serif; font-size: 13px; line-height: 1.5;
  color: var(--uvlf-muted); /* rgba(var(--uvlf-dark-rgb),.6) measured ~3.6:1 on the cream tile — under the 4.5:1 floor */
}
.uvlf-category-tile--primary .uvlf-category-desc { color: rgba(255, 255, 255, .58); }
.uvlf-category-arrow {
  position: relative; z-index: 1; align-self: flex-end;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%;
  color: var(--uvlf-gold); font-size: 16px; opacity: .8;
  transition: background .3s var(--uvlf-ease), color .3s var(--uvlf-ease), transform .3s var(--uvlf-ease), opacity .3s var(--uvlf-ease);
}
.uvlf-category-tile--primary .uvlf-category-arrow { color: rgba(255, 255, 255, .7); }
.uvlf-category-tile--primary .uvlf-category-number { color: var(--uvlf-gold-bright); }
.uvlf-category-tile:hover .uvlf-category-arrow { background: var(--uvlf-gold); border-color: var(--uvlf-gold); color: var(--uvlf-dark); opacity: 1; transform: translateX(4px); }

/* =====================================================================
   SHARED ATMOSPHERE — one background layer behind editorial banner,
   benefits, newsletter and footer. Sections above it stay transparent
   or semi-transparent so the same image reads through continuously.
   ===================================================================== */
[data-uvlf-atmosphere] {
  position: relative;
  isolation: isolate;
  background-image:
    linear-gradient(180deg, rgba(var(--uvlf-dark-deep-rgb), .56) 0%, rgba(var(--uvlf-dark-deep-rgb), .4) 45%, rgba(var(--uvlf-dark-deep-rgb), .6) 100%),
    var(--uvlf-atmosphere-image);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: 50% 50%, 50% 50%;
  background-attachment: fixed, fixed;
  color: rgba(255, 255, 255, .78);
}
[data-uvlf-atmosphere] > * { position: relative; z-index: 1; }
/* Mobile: `background-attachment: fixed` on a non-<body> element is
   unreliable on real mobile browsers — iOS Safari in particular can
   fail to paint it at all rather than degrading to `scroll`. A
   position:fixed pseudo-element does NOT get clipped to this box by
   overflow:hidden either (fixed positioning escapes to the viewport
   regardless of an ancestor's overflow — that was tried and broke the
   entire site, the fixed layer covered every page edge-to-edge). Until
   a properly scoped fix exists, mobile falls back to the safe default:
   the image simply scrolls with the section like normal content. */
@media (max-width: 767px), (hover: none) {
  [data-uvlf-atmosphere] { background-attachment: scroll; }
}

/* Full-bleed edge-to-edge, same technique as .uvlf-home-hero — the
   text itself stays aligned with the rest of the page via the nested
   .uvlf-editorial-inner (a plain .container). */
.uvlf-editorial-band {
  width: 100vw; max-width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: 58px;
  padding: 42px 0;
}
.uvlf-editorial-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.uvlf-editorial-band h2 { max-width: 520px; margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(var(--uvlf-dark-black-rgb), .55); }
.uvlf-editorial-band p { max-width: 390px; margin: 0; font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, .82); text-shadow: 0 1px 12px rgba(var(--uvlf-dark-black-rgb), .5); }

.uvlf-benefits { padding: 24px 0; background-color: rgba(var(--uvlf-dark-deep-rgb), .22); border-top: 1px solid rgba(184, 148, 74, .55); }
.uvlf-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.uvlf-benefit { display: flex; align-items: center; gap: 13px; min-height: 54px; padding: 5px 25px; border-right: 1px solid rgba(255, 255, 255, .16); }
.uvlf-benefit:first-child { padding-left: 0; }
.uvlf-benefit:last-child { padding-right: 0; border-right: 0; }
.uvlf-benefit-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; color: var(--uvlf-gold-bright); font-size: 17px; }
.uvlf-benefit strong, .uvlf-benefit small { display: block; }
.uvlf-benefit strong { color: #fff; font-size: 12px; letter-spacing: .02em; }
.uvlf-benefit small { margin-top: 4px; color: rgba(255, 255, 255, .54); font-size: 11px; }

.uvlf-newsletter { padding: 42px 0; background-color: rgba(var(--uvlf-dark-deep-rgb), .34); border-top: 1px solid rgba(255, 255, 255, .1); }
.uvlf-newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 42px; padding: 0 0 0 28px; border-left: 2px solid var(--uvlf-gold); }
.uvlf-newsletter-copy { max-width: 520px; }
.uvlf-newsletter .uvlf-footer-kicker { margin-bottom: 8px; color: var(--uvlf-gold-bright); }
.uvlf-newsletter h2 { margin: 0 0 7px; color: #fff; font-family: "Source Serif 4", Georgia, serif; font-size: 31px; line-height: 1.12; }
.uvlf-newsletter p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; }
.uvlf-newsletter-ui { display: flex; flex: 0 1 490px; flex-direction: column; gap: 11px; }
.uvlf-newsletter-form-row { display: flex; gap: 8px; }
.uvlf-newsletter-ui input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; }
.uvlf-newsletter-ui input::placeholder { color: rgba(255, 255, 255, .58); }
.uvlf-newsletter-ui input:focus { outline: 2px solid rgba(210, 183, 111, .8); outline-offset: 2px; }
.uvlf-newsletter-consent { display: flex; align-items: flex-start; gap: 8px; color: rgba(255, 255, 255, .64); font-size: 11px; line-height: 1.4; cursor: pointer; }
.uvlf-newsletter-consent input { flex: 0 0 auto; width: 14px; height: 14px; margin: 0; accent-color: var(--uvlf-gold); }
.uvlf-newsletter-consent input:focus-visible { outline: 2px solid rgba(210, 183, 111, .9); outline-offset: 2px; }
.uvlf-newsletter-ui button { height: 48px; padding: 0 19px; border: 1px solid var(--uvlf-gold); border-radius: 2px; background: var(--uvlf-gold); color: var(--uvlf-dark); font-size: 12px; font-weight: 700; white-space: nowrap; transition: background .18s var(--uvlf-ease); }
.uvlf-newsletter-ui button:hover { background: var(--uvlf-gold-bright); }

.uvlf-footer { padding: 54px 0 24px 0; background-color: rgba(var(--uvlf-dark-deep-rgb), .46); border-top: 1px solid rgba(255, 255, 255, .1); }
.uvlf-footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr) 1fr; gap: 30px; padding-bottom: 42px; }
.uvlf-footer-brand { max-width: 340px; }
/* Logo + university name sit side by side, vertically centered — the
   border-right on .uvlf-footer-logo was already styled as a divider
   for this side-by-side layout, but the kicker was a block-level
   sibling stacking underneath it instead of actually sitting beside it. */
.uvlf-footer-brand-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.uvlf-footer-logo { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 0 14px 0 0; border-right: 1px solid rgba(184, 148, 74, .6); }
.uvlf-footer-logo img { display: block; width: 68px; height: 68px; object-fit: contain; }
.uvlf-footer-kicker { display: block; color: var(--uvlf-gold-bright); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.uvlf-footer-brand p { margin: 0; font-family: "DM Sans", sans-serif; font-size: 13px; line-height: 1.65; color: rgba(255, 255, 255, .8); }
.uvlf-socials { display: flex; gap: 7px; margin-top: 20px; }
.uvlf-socials a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .36); border-radius: 50%; color: rgba(255, 255, 255, .78); font-size: 12px; transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.uvlf-socials a:hover { border-color: var(--uvlf-gold); color: var(--uvlf-gold-bright); transform: translateY(-2px); }
.uvlf-socials a:focus-visible { outline: 2px solid var(--uvlf-gold); outline-offset: 3px; }
.uvlf-socials .uvlf-social-x { font-size: 11px; font-weight: 700; letter-spacing: -.04em; }
.uvlf-footer-column h5 { margin: 8px 0 17px; color: #fff; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.uvlf-footer-column li { margin-bottom: 10px; }
.uvlf-footer-column li a { font-size: 12px; }
.uvlf-footer a { color: rgba(255, 255, 255, .68); }
.uvlf-footer a:hover { color: var(--uvlf-gold-bright); }
.uvlf-footer-contact-column > span { display: block; margin-top: 18px; color: rgba(255, 255, 255, .43); font-size: 11px; }
.uvlf-footer-contact-link { display: inline-block; color: #fff !important; font-size: 12px; line-height: 1.5; }
.uvlf-footer-contact-link i { margin-left: 5px; color: var(--uvlf-gold-bright); }
.uvlf-footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .45); font-size: 11px; }
.uvlf-footer-bottom p { margin: 0; }

/* =====================================================================
   COOKIE NOTICE — informational only (no optional cookies exist yet to
   consent to). Floating card, bottom-left, above all other overlays but
   deliberately small/corner-anchored so it never blocks page content or
   checkout controls. See footer.twig for the dismiss-only JS and the
   future consent-mode upgrade note.
   ===================================================================== */
.uvlf-cookie-banner {
  position: fixed;
  z-index: 1600;
  left: 24px;
  bottom: 24px;
  width: min(520px, calc(100vw - 48px));
  pointer-events: none;
}
.uvlf-cookie-banner[hidden] { display: none; }
.uvlf-cookie-panel {
  pointer-events: auto;
  background: var(--uvlf-dark);
  border: 1px solid rgba(184, 148, 74, .3);
  border-radius: var(--uvlf-radius);
  box-shadow: 0 24px 60px rgba(var(--uvlf-dark-black-rgb), .45), 0 6px 18px rgba(var(--uvlf-dark-black-rgb), .3);
  padding: 22px 24px;
  animation: uvlf-cookie-in .4s var(--uvlf-ease);
}
@keyframes uvlf-cookie-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.uvlf-cookie-title {
  margin: 0 0 8px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.uvlf-cookie-text {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}
.uvlf-cookie-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.uvlf-cookie-accept {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px; border: 1px solid var(--uvlf-gold); border-radius: var(--uvlf-radius);
  background: var(--uvlf-gold); color: var(--uvlf-dark);
  font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer;
  transition: background .18s var(--uvlf-ease), border-color .18s var(--uvlf-ease), transform .18s var(--uvlf-ease);
}
.uvlf-cookie-accept:hover, .uvlf-cookie-accept:focus-visible { background: #d3b46f; border-color: #d3b46f; transform: translateY(-1px); }
.uvlf-cookie-more {
  font-family: "DM Sans", sans-serif; font-size: 12.5px; font-weight: 600;
  color: rgba(255, 255, 255, .72); text-decoration: underline; text-underline-offset: 3px;
}
.uvlf-cookie-more:hover, .uvlf-cookie-more:focus-visible { color: var(--uvlf-gold-bright); }
@media (prefers-reduced-motion: reduce) {
  .uvlf-cookie-panel { animation: none; }
}

/* =====================================================================
   ADD-TO-CART CONFIRMATION MODAL — centered, dismissible dialog shown on
   a successful checkout/cart/add response in place of the plain alert
   bar. See footer.twig for the ajaxSuccess hook, focus trap and
   Escape/backdrop-close wiring.
   ===================================================================== */
.uvlf-cart-modal {
  position: fixed;
  z-index: var(--uvlf-z-modal);
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.uvlf-cart-modal[hidden] { display: none; }
body.uvlf-cart-modal-open { overflow: hidden; }
.uvlf-cart-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 30, 34, .4);
  animation: uvlf-cart-modal-fade .2s var(--uvlf-ease);
}
.uvlf-cart-modal-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--uvlf-paper);
  border-radius: var(--uvlf-radius);
  box-shadow: 0 24px 60px rgba(var(--uvlf-dark-black-rgb), .35), 0 6px 18px rgba(var(--uvlf-dark-black-rgb), .22);
  padding: 40px 36px 32px;
  text-align: center;
  animation: uvlf-cart-modal-in .24s var(--uvlf-ease);
}
@keyframes uvlf-cart-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uvlf-cart-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.uvlf-cart-modal-close {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--uvlf-muted); font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .18s var(--uvlf-ease), color .18s var(--uvlf-ease);
}
.uvlf-cart-modal-close:hover, .uvlf-cart-modal-close:focus-visible { background: var(--uvlf-dark-soft); color: var(--uvlf-dark); }
.uvlf-cart-modal-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--uvlf-gold); color: var(--uvlf-dark); font-size: 20px;
}
.uvlf-cart-modal-title {
  margin: 0 0 8px;
  font-family: "Source Serif 4", Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: -.01em;
  color: var(--uvlf-dark);
}
.uvlf-cart-modal-product {
  margin: 0 0 22px;
  font-family: "DM Sans", sans-serif; font-size: 13px; color: var(--uvlf-muted);
}
.uvlf-cart-modal-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.uvlf-cart-modal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px; border-radius: var(--uvlf-radius);
  font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer; transition: background .18s var(--uvlf-ease), border-color .18s var(--uvlf-ease), color .18s var(--uvlf-ease), transform .18s var(--uvlf-ease);
}
.uvlf-cart-modal-btn--primary {
  border: 1px solid var(--uvlf-dark); background: var(--uvlf-dark); color: #fff;
}
.uvlf-cart-modal-btn--primary:hover, .uvlf-cart-modal-btn--primary:focus-visible { background: var(--uvlf-dark-deep); border-color: var(--uvlf-dark-deep); transform: translateY(-1px); }
.uvlf-cart-modal-btn--secondary {
  border: 1px solid var(--uvlf-line); background: transparent; color: var(--uvlf-dark);
}
.uvlf-cart-modal-btn--secondary:hover, .uvlf-cart-modal-btn--secondary:focus-visible { background: var(--uvlf-dark-soft); border-color: var(--uvlf-dark); }
.uvlf-cart-modal-view-cart {
  display: inline-block;
  font-family: "DM Sans", sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--uvlf-muted); text-decoration: underline; text-underline-offset: 3px;
}
.uvlf-cart-modal-view-cart:hover, .uvlf-cart-modal-view-cart:focus-visible { color: var(--uvlf-dark); }
@media (min-width: 480px) {
  .uvlf-cart-modal-actions { flex-direction: row; }
  .uvlf-cart-modal-btn { flex: 1 1 0; }
}
@media (max-width: 479px) {
  .uvlf-cart-modal-panel { padding: 34px 24px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .uvlf-cart-modal-backdrop, .uvlf-cart-modal-panel { animation: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 991px) {
  .container { width: min(100% - 30px, 940px); }
  .uvlf-carousel-track .product-layout { flex-basis: calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); }
  .uvlf-carousel-prev { left: -12px; }
  .uvlf-carousel-next { right: -12px; }
  .uvlf-home-hero { min-height: 660px; }
  .uvlf-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .uvlf-hero-copy { max-width: 460px; padding: 120px 0 56px; }
  .uvlf-hero-copy h1 { font-size: clamp(38px, 5vw, 58px); }
  .uvlf-category-tile { padding: 24px; min-height: 220px; }
  .uvlf-facts { grid-template-columns: 1fr; gap: 20px; }
  .uvlf-facts-intro { padding-right: 0; padding-bottom: 18px; border-right: 0; border-bottom: 1px solid var(--uvlf-line); }
  .uvlf-facts-intro p { max-width: 420px; }
}

@media (max-width: 767px) {
  .container { width: min(100% - 28px, 600px); }

  /* The 4-across stats grid has no room for labels like "OFICIÁLNY
     E-SHOP UVLF" at phone widths — it wrapped one character per line.
     2x2 with its own dividers reads cleanly instead. */
  .uvlf-facts-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .uvlf-fact { min-height: 0; padding: 0 14px; }
  .uvlf-fact + .uvlf-fact { border-left: 0; }
  .uvlf-fact:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--uvlf-line); }
  .uvlf-fact:nth-child(even) { padding-right: 0; }

  .uvlf-homepage { padding-top: 14px; }
  .uvlf-home-hero { min-height: 560px; margin-top: -14px; margin-bottom: 42px; }
  .uvlf-hero-overlay {
    background:
      linear-gradient(0deg, rgba(var(--uvlf-dark-rgb), .88) 0%, rgba(var(--uvlf-dark-rgb), .74) 42%, rgba(var(--uvlf-dark-rgb), .34) 68%, rgba(var(--uvlf-dark-rgb), .12) 100%);
  }
  .uvlf-hero-copy-wrap { align-items: flex-end; }
  .uvlf-hero-copy { max-width: none; padding: 40px 0 40px; }
  .uvlf-hero-copy h1 { font-size: clamp(36px, 11vw, 50px); }
  .uvlf-hero-copy p { max-width: 420px; font-size: 14px; }
  .uvlf-hero-stamp { display: none; }
  .uvlf-home-modules > * + * { margin-top: 36px; }
  .uvlf-home-modules > .uvlf-product-section:nth-child(even) { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }

  .uvlf-category-intro { margin-right: -15px; margin-left: -15px; padding-right: 15px; padding-left: 15px; }
  .uvlf-category-tiles { grid-template-columns: 1fr; gap: 12px; }
  .uvlf-category-tile { min-height: 270px; padding: 22px; } /* tall enough for the longest SK/EN heading+description combo so both tiles always match */

  .uvlf-editorial-band { margin-top: 42px; padding: 30px 0; }
  .uvlf-editorial-inner { display: block; }
  .uvlf-editorial-band p { margin-top: 18px; }

  .product-thumb .image { height: 190px; }
  .product-thumb .caption { padding: 16px; }
  .product-thumb h4 { font-size: 14px; }
  .uvlf-product-grid .product-layout { flex: 0 0 50%; max-width: 50%; }
  .uvlf-carousel-track { gap: 14px; margin-right: -3px; margin-left: -3px; padding-right: 3px; padding-left: 3px; }
  .uvlf-carousel-track .product-layout { flex: 0 0 82%; max-width: 82%; }
  .uvlf-carousel-arrow { display: none; }
  .product-thumb .button-group button:first-child { font-size: 11px; white-space: nowrap; }
  .product-thumb .button-group button:not(:first-child) { flex-basis: 34px; }

  #product-category .product-filter, #product-search .product-filter { align-items: stretch; flex-direction: column; }
  #product-product #product { padding: 18px; }
  #product-product .thumbnails > li:first-child .thumbnail { padding: 18px; }

  .uvlf-benefits { margin-top: 0; }
  .uvlf-benefits-grid { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .uvlf-benefit:nth-child(2) { border-right: 0; }
  .uvlf-benefit:nth-child(3) { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12); padding-left: 0; }

  .uvlf-newsletter-inner { align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 24px; padding-left: 20px; }
  /* .uvlf-newsletter-ui's desktop "flex: 0 1 490px" sets a *width* basis
     when it's a row-layout flex item; once the parent above switches to
     flex-direction:column its main axis is vertical, so that same
     flex-basis instead forces a 490px-tall box here, blowing a huge gap
     under the form. Reset it explicitly for the stacked layout. */
  .uvlf-newsletter-ui { flex: 0 1 auto; width: 100%; max-width: 620px; }

  .uvlf-footer { padding-top: 40px; }
  .uvlf-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .uvlf-footer-brand { grid-column: 1 / -1; max-width: 560px; }
  .uvlf-footer-logo img { width: 52px; height: 52px; }
  .uvlf-footer-bottom { align-items: flex-start; flex-direction: column; gap: 4px; }

  .uvlf-cookie-banner { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .uvlf-cookie-panel { padding: 18px 20px; }
}

@media (max-width: 520px) {
  .uvlf-benefits { padding: 19px 0; }
  .uvlf-benefits-grid { grid-template-columns: 1fr; row-gap: 0; }
  .uvlf-benefit, .uvlf-benefit:first-child, .uvlf-benefit:last-child { min-height: 0; padding: 14px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .uvlf-benefit:last-child { border-bottom: 0; }
  .uvlf-benefit:nth-child(3) { padding-top: 14px; border-top: 0; }
  .uvlf-newsletter { padding: 34px 0; }
  .uvlf-newsletter h2 { font-size: 27px; }
  .uvlf-newsletter-ui { flex-direction: column; }
  .uvlf-newsletter-form-row { flex-direction: column; }
  /* The email input's desktop "flex: 1" (flex-basis 0%) governs WIDTH
     when this row is row-direction, letting it fill the space beside
     the button — but this row just went column-direction above, so
     that same flex-basis now governs HEIGHT instead, collapsing the
     field to a single text line while the button (no flex set, auto
     basis) keeps its full height. Reset it alongside the width fix. */
  .uvlf-newsletter-form-row input { flex: 0 0 auto; width: 100%; }
  .uvlf-newsletter-ui button { width: 100%; }
  .uvlf-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .uvlf-footer-contact-column { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* =====================================================================
   CATEGORY FILTER SIDEBAR (extension/module/filter) — one authoritative
   implementation, replacing the stock Bootstrap panel/list-group/
   checkbox markup entirely (see filter.twig). Desktop: inline sidebar
   card. Mobile: hidden by default, opened as an off-canvas drawer via
   .uvlf-filters-trigger (see column_left.twig for the hidden-xs removal
   that makes this reachable on mobile at all).
   ===================================================================== */
.uvlf-filters {
  position: relative;
  border: 1px solid var(--uvlf-line);
  border-radius: var(--uvlf-radius);
  background: var(--uvlf-paper);
  overflow: hidden;
}
.uvlf-filters-head {
  display: none; /* mobile-drawer-only header; see media query below */
  align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--uvlf-line);
}
.uvlf-filters-title { margin: 0; color: var(--uvlf-ink); font-family: "Source Serif 4", Georgia, serif; font-size: 19px; }
.uvlf-filters-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--uvlf-muted); font-size: 22px; line-height: 1; cursor: pointer; }
.uvlf-filters-close:hover { background: var(--uvlf-dark-soft); color: var(--uvlf-dark); }

/* --- Active filter chips ------------------------------------------------ */
.uvlf-active-filters { padding: 16px 18px; border-bottom: 1px solid var(--uvlf-line); }
.uvlf-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uvlf-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  background: var(--uvlf-dark-soft); color: var(--uvlf-dark);
  font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 600;
}
.uvlf-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: rgba(var(--uvlf-dark-rgb), .12); color: var(--uvlf-dark);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.uvlf-chip-remove:hover { background: var(--uvlf-dark); color: #fff; }
.uvlf-chip-clear {
  border: 0; background: transparent; padding: 6px 4px;
  color: var(--uvlf-gold); font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.uvlf-chip-clear:hover { color: #a17f3c; }
.uvlf-chip-clear[hidden] { display: none; }

/* --- Filter groups (native <details>/<summary> — free keyboard support
   and screen-reader semantics, no custom ARIA to maintain) ------------- */
.uvlf-filters-body { padding: 4px 4px 0; }
.uvlf-filter-group { border-bottom: 1px solid var(--uvlf-line); }
.uvlf-filter-group:last-child { border-bottom: 0; }
.uvlf-filter-group-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 16px; cursor: pointer; list-style: none;
  font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .03em; color: var(--uvlf-ink);
  -webkit-tap-highlight-color: transparent;
}
.uvlf-filter-group-summary::-webkit-details-marker { display: none; }
.uvlf-filter-group-summary::marker { content: ""; }
.uvlf-filter-group-summary:hover { color: var(--uvlf-dark); }
.uvlf-filter-group-summary:focus-visible { outline: 2px solid rgba(184, 148, 74, .7); outline-offset: 2px; }
.uvlf-filter-group-name { flex: 1 1 auto; }
.uvlf-filter-group-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--uvlf-gold); color: #fff; font-size: 11px; font-weight: 700;
}
.uvlf-filter-group-chevron { color: var(--uvlf-muted); font-size: 15px; transition: transform .2s var(--uvlf-ease); }
.uvlf-filter-group[open] > .uvlf-filter-group-summary .uvlf-filter-group-chevron { transform: rotate(180deg); }
.uvlf-filter-group-body { padding: 0 16px 18px; }

/* --- Search-within-group (large groups only) --------------------------- */
.uvlf-filter-search { position: relative; margin-bottom: 10px; }
.uvlf-filter-search .fa { position: absolute; top: 50%; left: 11px; transform: translateY(-50%); color: var(--uvlf-muted); font-size: 13px; pointer-events: none; }
.uvlf-filter-search-input {
  width: 100%; height: 38px; padding: 0 12px 0 32px;
  border: 1px solid var(--uvlf-line); border-radius: var(--uvlf-radius);
  background: #fff; color: var(--uvlf-ink); font-family: "DM Sans", sans-serif; font-size: 13px;
}
.uvlf-filter-search-input::placeholder { color: var(--uvlf-muted); }
.uvlf-filter-search-input:focus { outline: none; border-color: var(--uvlf-gold); box-shadow: 0 0 0 3px rgba(184, 148, 74, .15); }

/* --- Checkbox rows ------------------------------------------------------ */
.uvlf-filter-options { display: flex; flex-direction: column; }
.uvlf-filter-option {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: var(--uvlf-radius);
  font-family: "DM Sans", sans-serif; font-size: 13px; color: var(--uvlf-ink);
  cursor: pointer;
}
.uvlf-filter-option:hover { background: var(--uvlf-dark-soft); }
.uvlf-filter-option:has(input:focus-visible) { outline: 2px solid rgba(184, 148, 74, .7); outline-offset: 1px; }
.uvlf-filter-option input { flex: 0 0 auto; width: 15px; height: 15px; margin: 0; accent-color: var(--uvlf-dark); }
.uvlf-filter-option-name { flex: 1 1 auto; line-height: 1.4; }
.uvlf-filter-option--checked { color: var(--uvlf-dark); font-weight: 600; }
.uvlf-filter-option-count { flex: 0 0 auto; color: var(--uvlf-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.uvlf-filter-option[hidden] { display: none; }

.uvlf-filter-empty { margin: 8px 2px 0; color: var(--uvlf-muted); font-size: 12px; font-style: italic; }
.uvlf-filter-empty[hidden] { display: none; }

.uvlf-filter-toggle-more {
  display: block; margin-top: 8px; padding: 7px 6px; border: 0; background: transparent;
  color: var(--uvlf-dark); font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700;
  text-align: left; cursor: pointer;
}
.uvlf-filter-toggle-more:hover { color: var(--uvlf-gold); }
.uvlf-filter-toggle-more[hidden] { display: none; }

/* --- Apply -------------------------------------------------------------- */
.uvlf-filters-foot { padding: 16px; }
.uvlf-filters-apply {
  display: block; width: 100%; padding: 13px; border: 1px solid var(--uvlf-dark); border-radius: var(--uvlf-radius);
  background: var(--uvlf-dark); color: #fff; font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .02em; cursor: pointer; transition: background .18s var(--uvlf-ease), border-color .18s var(--uvlf-ease);
}
.uvlf-filters-apply:hover { background: var(--uvlf-dark-deep); border-color: var(--uvlf-dark-deep); }

/* --- Mobile trigger + backdrop: hidden on desktop, shown at <768px ----- */
.uvlf-filters-trigger { display: none; }
.uvlf-filters-backdrop {
  position: fixed; inset: 0; z-index: var(--uvlf-z-overlay-backdrop);
  background: rgba(var(--uvlf-dark-black-rgb), .5); opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
body.uvlf-filters-locked .uvlf-filters-backdrop:not([hidden]) { opacity: 1; pointer-events: auto; }

@media (max-width: 767px) {
  .uvlf-filters-trigger {
    display: inline-flex; align-items: center; gap: 9px;
    margin: 0 0 18px; padding: 12px 18px; border: 1px solid var(--uvlf-dark); border-radius: 999px;
    background: #fff; color: var(--uvlf-dark); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700;
    cursor: pointer;
  }
  .uvlf-filters-trigger-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--uvlf-dark); color: #fff; font-size: 11px; font-weight: 700;
  }

  .uvlf-filters {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--uvlf-z-overlay);
    width: min(92vw, 400px); border: 0; border-radius: 0;
    box-shadow: -16px 0 44px rgba(var(--uvlf-dark-black-rgb), .25);
    transform: translateX(100%); transition: transform .32s var(--uvlf-ease);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column;
  }
  .uvlf-filters--open { transform: translateX(0); }
  .uvlf-filters-head { display: flex; flex: 0 0 auto; }
  .uvlf-filters-body { flex: 1 1 auto; }
  .uvlf-filters-foot { flex: 0 0 auto; position: sticky; bottom: 0; background: var(--uvlf-paper); border-top: 1px solid var(--uvlf-line); }
}