:root {
  --blue: #0279C4;
  --light-blue: #EEF4F8;
  /* Lock to light mode so iOS Safari doesn't auto-invert form fields,
     backgrounds and text when the user's OS is in dark mode. */
  color-scheme: light;
}

body {line-height: 1; font-family: "Google Sans Flex", sans-serif; font-weight: 300; color: #292929; background: #fff;}
h1 {line-height: 1; font-family: "Instrument Serif", serif;}
h2 {line-height: 1; font-family: "Instrument Serif", serif; font-size: 4.2vw;}
h3 {line-height: 1; font-family: "Instrument Serif", serif; font-size: 2.7vw;}
h4 {line-height: 1;}
h5 {line-height: 1;}
p:last-child {margin-bottom: 0;}

.no-scroll {height: 100dvh; overflow: hidden;}

header {position: relative; top: 0; width: 100%; z-index: 999; color: #2C2C2C; transition: 0.5s;}
header.scroll {position: fixed;}
.home header {position: fixed; color: #fff;}

.header-top {display: flex; justify-content: center; background: var(--blue); padding: 15px; box-sizing: border-box; position: relative; color: #fff;}
.header-top p {text-transform: uppercase; padding: 0 2vw; border-right: 2px solid #fff3; font-size: 10px; line-height: 10px; font-weight: 700;}
.header-top p:last-child {border-right: 0;}

.button {display: inline-block; font-weight: 500; font-size: 12px; line-height: 14px; color: #fff; background: var(--blue); padding: 18px 50px; text-transform: uppercase; box-sizing: border-box; transition: 0.5s; cursor: pointer;}

.button.outline {border: 1px solid #2C2C2C; color: #2C2C2C; background: #0279C400;}

.wrapper {max-width: 90vw; margin: 0 auto;}

.home header nav > ul > li > a {color: #fff;}
.home header .left .logo img {opacity: 0;}
.home header .left .logo img:nth-child(1) {opacity: 1;}
.home header .left .logo img:nth-child(2) {opacity: 0;}
.home header .wrapper {border-bottom: 1px solid #EFEFEF00;}
.home header .right p {color: #fff;}
/* Country picker — white over the banner on the home page; flips back to dark
   when the header gets the .scroll (or .open) class. */
.home header .country-select {color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ffffff' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");}
.home header.scroll .country-select, .home header.open .country-select {color: #292929; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23292929' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");}
.home header .country-select option {color: #292929;} /* options stay readable in the native picker dropdown */
.home header .search::after, .home header .cart::after {background: #fff;}

header .wrapper {padding: 0 40px; display: flex; max-width: 100%; border-bottom: 1px solid #EFEFEF; box-sizing: border-box; align-items: center;}
header .left, header .right {flex: 1;}
header .left .logo {width: 145px; height: 62px; display: block; position: relative;}
header .left .logo img {opacity: 1; transition: 0.5s; position: absolute;}
header .left .logo img:nth-child(1) {opacity: 0;}
header .left .logo img:nth-child(2) {opacity: 1;}
header .left .logo .scroll {opacity: 0;}
header .right {display: flex; justify-content: flex-end; align-items: center; gap: 2vw;}
header .right p {font-weight: 500; color: #2C2C2C}
header .cart {display: block; width: 16px; height: 20px; position: relative; cursor: pointer;}
header .cart::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #292929; mask-repeat:no-repeat; mask-size:contain; mask-position: center; mask-image: url('../img/cart.svg');}
header .search {display: block; width: 18px; height: 18px; position: relative;}
header .search::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #292929; mask-repeat:no-repeat; mask-size:contain; mask-position: center; mask-image: url('../img/search.svg');}

header.scroll, header.open {background: #fff;}
header.scroll .wrapper, header.open .wrapper {border-bottom: 1px solid #EFEFEF; background: #fff; color: #2C2C2C;}
header.scroll .left .logo img:nth-child(1),header.open .left .logo img:nth-child(1) {opacity: 0;}
header.scroll .left .logo .scroll, header.open .left .logo .scroll {opacity: 1;}
header.scroll ul li a {}

.home header.scroll nav > ul > li > a,
.home header.open nav > ul > li > a {color: #2C2C2C; transition: color 0s;}
.home header.scroll .left .logo img:nth-child(1),
.home header.open .left .logo img:nth-child(1) {opacity: 0;}
.home header.scroll .left .logo img.scroll,
.home header.open .left .logo img.scroll {opacity: 1;}
.home header.scroll .right p,
.home header.open .right p {color: #2C2C2C;}
.home header.scroll .search::after, .home header.scroll .cart::after,
.home header.open .search::after, .home header.open .cart::after {background: #292929;}

header nav {margin: auto;}
header nav > ul {margin: 0; display: flex;}
header nav > ul > li {display: block; padding: 0 1vw;}
header nav > ul > li > a {display: inline-block; font-size: 14px; line-height: 14px; padding: 41px 0; text-transform: uppercase; font-weight: 500; position: relative; transition: 0.5s; color: #2C2C2C;}
header nav > ul > li > a:not([href]) {cursor: default;}
header nav > ul > li > a:hover, header.open nav ul > li.open > a {color: var(--blue);}
header nav > ul > li > a::after {content: ''; display: block; position: absolute; bottom: 38px; width: 100%; left: 0; height: 1px; background: var(--blue); transition: 0.5s; opacity: 0;}
header nav > ul > li > a:hover::after, header.open nav ul > li.open > a::after {opacity: 1; bottom: 35px;}

.dropdown {position: absolute; top: 0; left: 0; width: 100%; height: auto; max-height: 0px; transition: 0.5s; overflow: hidden; z-index: -1;}
.dropdown-container {padding: 3vw; padding-top: calc(130px + 4vw); background: #fff; color: #2C2C2C;}

.dropdown-columns {display: flex; gap: 4vw;}
.dropdown-columns .title {font-size: 13px; font-weight: 700; margin-bottom: 20px;}
.dropdown-columns ul li {display: block; margin-bottom: 10px;}
.dropdown-columns ul li a {display: inline-block; font-size: 13px; line-height: 1.4; color: #2C2C2C;}
.dropdown-columns ul li:last-child{margin-bottom: 0;}
.dropdown-columns ul li:last-child a {font-weight: 700;}

.dropdown-featured {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1.5vw;}

.dropdown-layout {display: grid; grid-template-columns: 1.5fr 1fr;}

.dropdown-left {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}

.lens-filter-dropdown {display: flex; justify-content: center; align-items: center; gap: 2vw;}
.lens-filter-dropdown p {font-size: 13px; font-weight: 700; line-height: 1;}

header nav ul li a:hover + .dropdown, .dropdown:hover {max-height: 1000px;}

.cart-pop, .account-pop {position: fixed; top: 0; right: 0; width: 100vw; height: 100dvh; z-index: 999; max-width: 0px; overflow: hidden;transition: 0.5s;}
.cart-pop::after, .account-pop::after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0002; backdrop-filter: blur(5px);}
.cart-wrapper, .account-wrapper {position: absolute; right: 0; height: 100%; width: 600px; background: #fff; box-sizing: border-box; padding: 3vw; color: #292929; display: flex; flex-direction: column; z-index: 1;}

.close-icon {padding: 20px; right: 20px; top: 20px; position: absolute; z-index: 9999; overflow: hidden; transition: 0.5s; transform: rotate(180deg); cursor: pointer;}
.close-icon::before {content: ''; position: absolute; width: 1px; height: 20px; background: #0003; transform: rotate(45deg); top: 10px; transition: 0.5s;}
.close-icon::after {content: ''; position: absolute; width: 1px; height: 20px; background: #0003; transform: rotate(-45deg); top: 10px; transition: 0.5s;}

.close-icon:hover::before {transform: rotate(-135deg) !important;}
.close-icon:hover::after {transform: rotate(-225deg)!important;}

.cart-pop.active, .account-pop.active {max-width: 100vw;}

.cart-header, .account-content h3 {margin-bottom: 3vw;}

.cart-content {flex: 1; overflow: scroll;}

.cart-item {display: grid; grid-template-columns: 180px 1fr; grid-gap: 20px; align-items: center; position: relative; margin-bottom: 30px;}
.cart-item .price {position: absolute; right: 0px; top: 0px; font-size: 14px; line-height: 14px; font-weight: 400; letter-spacing: 1px; background: #000; color: #fff; padding: 5px;}
.cart-item h2 {font-size: 24px; line-height: 1.1; text-wrap: balance; margin-bottom: 15px;}
.cart-item p {font-size: 10px; line-height: 1; margin-bottom: 15px; text-transform: uppercase; color: #29292940;}
.cart-item span {color: #2C2C2C40; font-size: 10px; line-height: 10px; cursor: pointer; padding: 5px 0; text-align: center; box-sizing: border-box; border-bottom: 1px solid #A9A9A9; text-transform: uppercase;}
.cart-item figure {background: linear-gradient(180deg,rgba(247, 245, 244, 1) 0%, rgba(237, 231, 226, 1) 100%); position: relative; height: 0; padding-bottom: 95%;}
.cart-item figure img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply;}
.cart-item:last-child {margin-bottom: 3vw;}

.cart-footer {position: relative;}
.cart-footer h4 {font-size: 13px; line-height: 16px; font-weight: 700; color: #2C2C2C; margin-bottom: 2px; display: block;}
.cart-footer p {font-size: 13px; line-height: 1.4; font-weight: 400; color: #2C2C2C;}
.cart-footer .total {font-size: 18px; line-height: 22px;}
.cart-footer::after {content: ''; display: block; position: absolute; top: -3vw; left: 0; width: 100%; height: 3vw; background: linear-gradient(0deg,rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0) 100%);}
.cart-footer .flex-row {padding-top: 30px; margin-bottom: 30px; border-top: 1px solid #EFEFEF;}
.cart-footer .button, .account-wrapper .button {width: 100%; text-align: center;}

.account-wrapper article input {outline: 0; border: 0; border-bottom: 1px solid #555555; width: 100%; font-family: inherit; padding: 11px 10px 11px 0; font-size: 14px; line-height: 14px; color: #292929; font-weight: 300; margin-bottom: 10px;}
.account-wrapper article input::placeholder {color: #29292940; text-transform: uppercase;}
.account-wrapper article > .button {margin-top: 2vw;}
.account-wrapper article .account-footer {margin-top: 2vw;}
.account-wrapper article .account-footer h4 {font-size: 13px; line-height: 16px; font-weight: 700; color: #2C2C2C; margin-bottom: 15px; display: block;}

.account-wrapper .login {display: none;}

.banner {position: relative;}
/* Faint top-to-transparent gradient so the white header / menu stays readable
   against light banner images. Sits above the figure, below the article text. */
.banner::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 500px; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%); pointer-events: none; z-index: 2;}
.banner figure {height: 85vh;}
.banner article {position: absolute; top: 55%; transform: translateY(-50%); margin-left: 7.5vw; color: #fff; max-width: 42.5vw; z-index: 99;}
.banner article h1 {line-height: 6vw; font-size: 6.25vw;}

.shop-banner > .flex-row {margin: 2vw 0 2vw; align-items: flex-end;}
.shop-banner > .flex-row p {font-size: 14px; text-transform: uppercase; color: #29292940;}
.shop-banner h1 {line-height: 1; font-family: "Instrument Serif", serif; font-size: 2.7vw;}

.shop-banner .breadcrumbs {margin-top: 40px;}

.shop-content {margin-top: 2vw; display: grid; grid-template-columns: 1fr 460px; grid-gap: 3vw;}
.product-images {overflow: hidden; display: grid; grid-template-columns: 200px 1fr; width: 100%; grid-gap: 15px;}
/* Pagination dots on the product gallery (mobile only — thumbs cover this role on desktop). */
.product-gallery-pagination {display: none; position: absolute; bottom: 12px; right: 12px !important; left: auto !important; width: auto !important; text-align: right; z-index: 10;}
.product-gallery-pagination .swiper-pagination-bullet {background: rgba(0,0,0,.35); opacity: 1; width: 7px; height: 7px; margin: 0 3px;}
.product-gallery-pagination .swiper-pagination-bullet-active {background: var(--blue);}

/* Checkout newsletter opt-in checkbox */
.ch-newsletter-optin .ch-checkbox {display: flex; align-items: flex-start; gap: 10px; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 400; color: #292929;}
.ch-newsletter-optin .ch-checkbox input[type="checkbox"] {width: 18px; height: 18px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--blue);}
.ch-newsletter-optin .ch-checkbox span {line-height: 1.4;}

/* Header country selector */
.country-select-wrap {margin-right: 12px;}
.country-select {appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 4px 18px 4px 4px; font: inherit; font-size: 13px; color: #292929; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23292929' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center;}
.country-select:focus {outline: 1px dotted #6b7280; outline-offset: 2px;}

/* Inline "Prices displayed in NZD/AUD" label */
.currency-label {font-size: 12px; color: #6b7280; margin: 18px 0 24px; letter-spacing: 0.04em;}
.product-images .swiper {width: 100%;}
.product-images .swiper-slide {height: 0!important; padding-bottom: 100%; position: relative; background: linear-gradient(180deg,rgba(247, 245, 244, 1) 0%, rgba(237, 231, 226, 1) 100%);}
.product-images .swiper-slide img {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; height: 90%; object-fit: contain; mix-blend-mode: multiply;}
.product-images .swiper-slide::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: none; border: 2px solid var(--blue); transition: 0.3s; opacity: 0; box-sizing: border-box;}
.product-images .swiper-slide-thumb-active::before {opacity: 1;}

.product-content .flex-row {margin-bottom: 30px;}
.product-content .flex-row span {text-transform: uppercase; font-size: 14px; line-height: 1; color: #29292940;}
.product-content h1 {line-height: 1.1; text-wrap: balance; font-size: 2.1vw; margin-bottom: 30px;}
.product-content h4 {font-size: 13px; line-height: 16px; font-weight: 700; color: #2C2C2C; margin-bottom: 15px; display: block;}
.product-content .price {display: inline-block; font-size: 18px; line-height: 22px; font-weight: 400; letter-spacing: 1px; background: #000; color: #fff; padding: 9px 12px;}

.specifications {margin: 30px 0; padding: 25px 0; border-top: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;}
.specifications ul {margin: 0; list-style: none;}
.specifications li, .specifications p {margin-bottom: 15px; font-size: 13px; font-weight: 400;}
.specifications li:last-child, .specifications p:last-child {margin-bottom: 0;}

.lens-power-options {display: grid; grid-gap: 12px 20px; grid-template-columns: repeat(4, max-content); max-width: 100%;}
.lens-power-option {display: flex; align-items: center; gap: 10px;}
.lens-power-option input {box-sizing: border-box; width: 17px; height: 17px; border: 1px solid #C3C3C3; -webkit-appearance: none; appearance: none; -moz-appearance: none; z-index: 1; position: relative; background: none;}
.lens-power-option input::after { content: ''; position: absolute; width: 9px; height: 9px; background: var(--blue); opacity: 0; transition: 0.3s; z-index: 0;  padding: 0; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.lens-power-option span {font-size: 13px; line-height: 1.4; font-weight: 400; white-space: nowrap;}

.lens-power-option input:checked::after {opacity: 1;}

.button-wrap {border-top: 1px solid #EFEFEF; margin-top: 30px; padding-top: 30px;}
.button-wrap .button {width: 100%; text-align: center;}

.breadcrumbs {display: flex;}
.breadcrumbs a, .breadcrumbs p {padding-right: 20px; position: relative; color: #A8A8A8; font-weight: 600; font-size: 12px; line-height: 12px; transition: 0.3s;}
.breadcrumbs a::after {content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: #A8A8A8; border-radius: 50vw; right:8px;}
.breadcrumbs a:hover {color: var(--blue);}

.shop-grid {display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 30px;}
.shop-banner .shop-grid {grid-template-columns: repeat(5, 1fr); grid-gap: 25px;}
/* On the shop landing the `.large` modifier no longer spans — all 5 tiles sit equal-width. */
.shop-banner .shop-grid .grid-item.large {grid-column: auto; grid-row: auto;}
.shop-banner .shop-grid .grid-item.large figure {padding-bottom: 105%; height: 0;}

.shop-grid .grid-item.large {grid-column: 3 / 5; grid-row: 1 / 3;}
.shop-grid .grid-item {display: block; position: relative;}
.shop-grid .grid-item figure {height: 0; padding-bottom: 105%; position: relative; overflow: hidden;}
.shop-grid .grid-item.large figure {padding-bottom: 0; height: 100%;}
.shop-grid .grid-item figure img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.shop-grid .grid-item span {position: absolute; bottom: 40px; width: 100%; text-align: center; font-size: 17px; font-weight: 500; line-height: 20px; color: #fff;}

.filter-row {margin-bottom: 2vw;}
.filter-row > p:first-child {color: #292929;}

.content {margin: 5vw 0;}
.content .flex-row > p {font-size: 14px; text-transform: uppercase; color: #29292940;}

.lens-filter {background: var(--blue); color: #fff; padding: 30px 0;}
.lens-filter h4 {text-align: center; display: block; font-weight: 600; font-size: 11px; line-height: 13px; text-transform: uppercase; margin-bottom: 20px;}

.lens-options {display: flex; justify-content: center;}
.lens-options a {position: relative; display: block; padding: 13px 2.5vw; background: #fff0; transition: 0.5s; font-size: 13px; font-weight: 400; color: #fff; line-height: 14px;}
.lens-options a::before, .lens-options a:last-child::after {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 11px; background: #fff2;}
.lens-options a:last-child::after {left: auto; right: 0;}
.lens-options a.active {background: #fff; color: var(--blue);}

.dropdown .lens-options a {color: #000;}
.dropdown .lens-options a::before, .dropdown .lens-options a::after {background: #0279C420; height: 16px;}
.dropdown .lens-options a.active {background: var(--blue); color: #fff;}

.browse {margin: 3vw 0 4vw;}
.browse h4 {font-size: 14px; display: block; text-align: center; text-transform: uppercase;}

.productSwiper {margin: 30px auto 0!important; max-width: 90vw; box-sizing: border-box; padding: 0 5vw!important;}
.productSwiper::before, .productSwiper::after {content: ''; display: block; position: absolute; top: 0; height: 100%; width: 5vw; left: 0; background: linear-gradient(90deg,rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%); z-index: 9;}
.productSwiper::after {left: auto; right: 0; background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%);}

.custom-prev, .custom-next {display: block; position: absolute; width: 65px; height: 65px; border: 1px solid #0002; border-radius: 50vw; z-index: 10; top: 50%; transform: translateY(-50%); left: 0;}
.custom-next {right: 0; left: auto;}
.custom-prev::after, .custom-next::after {content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 16px; height: 16px; background: #000; mask-repeat:no-repeat; mask-size:contain; mask-position: center; mask-image: url('../img/swiper-arrow.svg');}
.custom-next::after {transform: translate(-50%,-50%) scaleX(-1);}

.productSwiper .swiper-slide {cursor: pointer;}
.productSwiper .swiper-slide p {margin: 10px auto 0; text-align: center; transition: 0.5s; opacity: 0; max-width: 160px; line-height: 1.5;}
.productSwiper .swiper-slide:hover p {opacity: 1;}
.productSwiper figure {height: 0; position: relative; padding-bottom: 45%; margin-top: 45px;}
.productSwiper figure img {position: absolute; object-fit: cover; width: 100%; height: 100%; top: 0; left: 0; transform: none;}

.product-feature {position: relative;}
.product-feature article {position: absolute; top: 3vw; left: 3.5vw; color: #fff;}
.product-feature article h2 {margin-bottom: 5px;}
.product-feature article p {font-size: 14px; line-height: 1; color: #fff5; text-transform: uppercase;}
.product-feature .button {position: absolute; bottom: 3vw; right: 3vw;}

.grid-5 {display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 15px;}
.flex-row + .grid-5 {margin-top: 30px;}

.product-tile {display: block; position: relative; text-align: center; background: linear-gradient(180deg,rgba(247, 245, 244, 1) 0%, rgba(237, 231, 226, 1) 100%);}
.product-tile::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: none; border: 2px solid var(--blue); transition: 0.3s; opacity: 0; box-sizing: border-box;}
.product-tile figure {position: relative; height: 0; padding-bottom: 150%; overflow: hidden; max-width: 90%; margin: 0 auto;}
.product-tile figure img {position: absolute; width: 95%; height: 100%; object-fit: contain; mix-blend-mode: multiply; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: 0.3s;}
.product-tile figure img:nth-child(2) {left: 150%;}
.product-tile:hover figure img:nth-child(1) {left: -50%;}
.product-tile:hover figure img:nth-child(2) {left: 50%;}
.product-tile:hover figure img:only-child {left: 50%;}
.product-tile .title {position: absolute; bottom: 30px; text-align: center; width: 100%; font-size: 17px; font-weight: 500; line-height: 20px;}
.product-tile:hover::before {opacity: 1;}

.featured-readers {display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 15px; margin-top: 30px;}

.collection-promo {grid-row: span 2; position: relative;}
.collection-promo .button {position: absolute; bottom: 3vw; left: 50%; transform: translateX(-50%); z-index: 1;}

.product-card {display: block; position: relative; text-align: center; background: linear-gradient(180deg,rgba(247, 245, 244, 1) 0%, rgba(237, 231, 226, 1) 100%);}
.product-card::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: none; border: 2px solid var(--blue); transition: 0.3s; opacity: 0; box-sizing: border-box;}
.product-card figure {position: relative; height: 100%; overflow: hidden;}
.product-card figure img {position: absolute; width: 90%; height: 100%; object-fit: contain; mix-blend-mode: multiply; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: 0.3s;}
.product-card figure img:nth-child(2) {left: 150%;}
.product-card:hover figure img:nth-child(1) {left: -50%;}
.product-card:hover figure img:nth-child(2) {left: 50%;}
.product-card:hover figure img:only-child {left: 50%;}
.product-card .price {position: absolute; right: 20px; top: 20px; font-size: 14px; line-height: 14px; font-weight: 400; letter-spacing: 1px; background: #000; color: #fff; padding: 5px;}
.product-card .sku {position: absolute; font-size: 11px; line-height: 13px; color: #0003; font-weight: 400; left: 20px; top: 20px;}
.product-card .title {position: absolute; bottom: 30px; text-align: center; width: 100%; font-size: 14px; font-weight: 500; line-height: 20px;}
.product-card:hover::before {opacity: 1;}

.shop-grid .product-card figure, .swiper-slide.product-card figure {height: 0; padding-bottom: 95%;}

.similar .wrapper-sml {max-width: 80vw; margin: 0 auto 2vw;}
.similar .similarSwiper {padding: 0 10vw;}
.similar .similarSwiper::before, .similar .similarSwiper::after {content: ''; display: block; position: absolute; z-index: 9; background: #fff; top: 0; width: 10vw; left: 0; height: 100%;}
.similar .similarSwiper::after {right: 0; left: auto;}
.similar .custom-prev, .similar .custom-next {left: 4vw;}
.similar .custom-next {left: auto; right: 4vw;}

.highlight {position: relative; display: flex; justify-content: flex-end; background: var(--light-blue);}
.highlight article {max-width: 610px; position: absolute; left: 7.5vw; top: 50%; transform: translateY(-50%);}
.highlight article .button {margin-top: 30px;}
.highlight h3 {font-size: 3.1vw; margin-bottom: 15px;}
.highlight p {font-size: 22px; line-height: 1.4;}

img.desktop {display: block;}
img.mobile {display: none;}

.info-blocks {display: grid; grid-template-columns: 1fr 1fr;}
.info-blocks p {text-align: center; font-weight: 700; text-transform: uppercase; font-size: 19px; line-height: 1; padding: 2vw; box-sizing: border-box; background: #EDE7E3;}
.info-blocks p:last-child {background: #EDE7E350;}

.shop-wrapper {max-width: 80vw; margin: 0 auto; padding: 20px 0;}

footer {background: #000; color: #fff; padding: 3vw 0 0;}
footer h4 {font-size: 13px; line-height: 1; margin-bottom: 30px; font-weight: 700; text-transform: uppercase;}

footer .footer-nav {display: flex;}
footer .footer-nav ul {margin: 0 6vw 0 0; list-style: none;}
footer .footer-nav ul li {display: block; margin-bottom: 15px;}
footer .footer-nav ul li a {font-size: 15px; display: inline-block;}

footer .footer-grid {padding-bottom: 3vw; display: flex; justify-content: space-between;}
footer .footer-grid .social {max-width: 550px; width: 85%;}

footer .newsletter-form {position: relative; width: 100%;}
footer .newsletter-form input {padding: 20px; border: 1px solid #fff; outline: 0; font-size: 12px; font-weight: 400; background: #fff; color: #2c2c2c; box-sizing: border-box; width: 100%; line-height: 18px;}
footer .newsletter-form input::placeholder {color: #2C2C2C40;}
footer .newsletter-form .form-button {position: absolute; right: 25px; top: 50%; transform: translateY(-50%); outline: 0; color: #2C2C2C; font-size: 11px; line-height: 13px; cursor: pointer; padding: 5px; text-align: center; box-sizing: border-box;}
footer .newsletter-form .form-button::after {content: ''; display: block; height: 1px; width: 100%; position: absolute; background: #2C2C2C; bottom: -3px; left: 0;}

footer .social-row {display: flex; justify-content: flex-start; margin-top: 30px; gap: 30px;}
footer .facebook, footer .linkedin {display: block; position: relative; width: 30px; height: 30px; background: #fff; border-radius: 50vw; transition: 0.5s; mask-repeat:no-repeat; mask-size:contain; mask-position: center; mask-image: url('../img/facebook.svg');}

footer .payment-icons {margin-top: 30px; display: flex; justify-content: flex-end;}
footer .payment-icons img {height: 20px; width: auto;}

footer .footer-logo {display: block; width: 115px; margin-right: 6vw;}
footer .copyright {border-top: 1px solid #292929; padding: 20px 5vw; display: flex; justify-content: space-between;}
footer .copyright p, footer .copyright a {color: #fff3; font-size: 13px; line-height: 1;}

.category-description {display: flex; justify-content: space-between; width: 100%; align-items: flex-end;}

/* Placeholder image fills the card */
.product-card figure img[src*="image-coming-soon"] {width: 100%; object-fit: cover;}

/* Placeholder: disable hover-swap */
.product-card figure img[src*="image-coming-soon"] + img,
.product-card figure img:nth-child(2)[src*="image-coming-soon"] {display: none;}
.product-card:hover figure img:nth-child(1)[src*="image-coming-soon"] {left: 50%;}

/* Category showcase: rollover disabled */
.product-tile figure img:nth-child(2) {display: none;}
.product-tile:hover figure img:nth-child(1),
.product-tile:hover figure img:only-child {left: 50%;}
.product-tile::before, .product-tile:hover::before {opacity: 0;}


/* Static page article (Shipping, Terms, About, FAQ, etc.) */
article.page {color: #292929; font-family: "Google Sans Flex", sans-serif; font-weight: 300; line-height: 1.7; font-size: 16px; padding: 32px 0 64px;}
article.page p {margin: 0 0 18px;}
article.page p:last-child {margin-bottom: 0;}
article.page h1, article.page h2, article.page h3, article.page h4 {font-family: "Instrument Serif", serif; line-height: 1.1; margin: 32px 0 14px; color: var(--blue);}
article.page h1 {font-size: clamp(2rem, 4vw, 3rem);}
article.page h2 {font-size: clamp(1.6rem, 3vw, 2.25rem);}
article.page h3 {font-size: clamp(1.25rem, 2.2vw, 1.6rem);}
article.page h4 {font-size: 1.15rem; text-transform: uppercase; letter-spacing: 1.4px; font-family: "Google Sans Flex", sans-serif; font-weight: 600; color: var(--blue);}
article.page a {color: var(--blue); text-decoration: underline;}
article.page a:hover {opacity: .75;}
article.page ul, article.page ol {margin: 0 0 18px; padding: 0; list-style: none;}
article.page ol {counter-reset: ol-counter;}
article.page ol > li {counter-increment: ol-counter;}
article.page ol > li::before {content: counter(ol-counter) ". "; color: var(--blue); font-weight: 600; margin-right: 4px;}
article.page li {margin-bottom: 18px; line-height: 1.6;}
article.page li:last-child {margin-bottom: 0;}
/* Inline labels (Email, Phone, Postal, Hours, etc.) — clients just bold the word in the editor */
article.page li > strong {display: block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #8094ae; font-weight: 600; margin-bottom: 4px;}
article.page li address {font-style: normal; line-height: 1.6; margin: 0;}
article.page strong {font-weight: 600;}
article.page hr {border: 0; border-top: 1px solid #EFEFEF; margin: 28px 0;}
article.page img {max-width: 100%; height: auto; display: block; margin: 18px auto;}


/* Contact form */
.contact-form {background: #f7f5f4; padding: 36px 36px 32px; box-sizing: border-box;}
.contact-form .cf-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;}
.contact-form .cf-field {display: flex; flex-direction: column; gap: 6px;}
.contact-form .cf-field-wide {grid-column: 1 / -1;}
.contact-form .cf-field > span {font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #8094ae; font-weight: 600;}
.contact-form .cf-field input, .contact-form .cf-field textarea {border: 1px solid #d8d8d8; background: #fff; padding: 12px 14px; font-family: "Google Sans Flex", sans-serif; font-size: 14px; color: #292929; transition: border-color .2s; box-sizing: border-box; width: 100%;}
.contact-form .cf-field input:focus, .contact-form .cf-field textarea:focus {outline: none; border-color: var(--blue);}
.contact-form .cf-field textarea {resize: vertical; min-height: 140px; font-family: inherit;}
.contact-form .cf-honeypot {position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden;}
.contact-form .cf-submit {margin-top: 22px; padding: 18px 30px; background: var(--blue); color: #fff; border: 0; font-family: "Google Sans Flex", sans-serif; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer; transition: opacity .5s;}
.contact-form .cf-submit:hover {opacity: .85;}
.contact-form .cf-submit:disabled {opacity: .5; cursor: wait;}
.contact-form .cf-message {margin-top: 14px; font-size: 13px; min-height: 18px;}
.contact-form .cf-message.success {color: #3a7d3a;}
.contact-form .cf-message.error {color: #a13030;}
.contact-form .cf-field-error > span {color: #a13030;}
.contact-form .cf-field-error input, .contact-form .cf-field-error textarea {border-color: #a13030; background: #fff5f5;}

@media (max-width: 760px) {
    .contact-form {padding: 24px;}
    .contact-form .cf-grid {grid-template-columns: 1fr;}
}


/* Contact layout */
.wrapper-sml:has(.contact-layout) {max-width: 1100px;}
.contact-layout {display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start;}
.contact-layout > article.page {padding-top: 0;}
@media (max-width: 760px) {.contact-layout {grid-template-columns: 1fr; gap: 32px;}}


/* Newsletter form */
.newsletter-form .nl-honeypot {position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden;}
.newsletter-form .sr-only {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
.newsletter-form .form-button {cursor: pointer; background: transparent; border: none; padding: 0; font: inherit; color: inherit;}
.newsletter-form .newsletter-msg {margin-top: 8px; font-size: 13px;}
.newsletter-form .newsletter-msg.error {color: #a13030;}
.newsletter-form .newsletter-msg.success {color: #3a7d3a;}

/* Cart icon — red dot when cart has items */
header .cart {overflow: visible;}
header .cart.has-items::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: #d23a3a;
    border-radius: 50%;
    border: 1.5px solid #fff;
    z-index: 1;
}


/* ===== Buy 2, Get 1 Free promo ===== */
.header-top__promo {font-weight: 700;}
.ch-promo-text, .cart-promo-text, .drawer-promo-text {display: flex; flex-direction: column; gap: 1px; text-align: left;}
#checkout_promo_label, #cart_promo_label, #cart-drawer-promo-label {font-size: .9rem; font-weight: 500; margin: 0;}
.ch-promo-note, .cart-promo-note, .drawer-promo-note {display: block; font-size: 10px; line-height: 1.3; color: #8a8a8a; font-weight: 400; text-transform: none; letter-spacing: 0; margin: 1px 0 0;}
.cart__promo {display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;}
.cart__promo .cart-promo-amt {font-weight: 600; white-space: nowrap;}
.ch-total-row--promo {align-items: flex-start;}
#cart-drawer-promo {align-items: flex-start;}
.cart-promo-band {display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, rgba(13,82,157,1) 0%, rgba(21,149,188,1) 100%); color: #fff; padding: 14px 20px; border-radius: 8px; margin-bottom: 28px;}
.cart-promo-band .cpb-icon {flex-shrink: 0; color: #fff; display: block;}
.cart-promo-band strong {font-weight: 600; font-size: .95rem; display: block;}
.cart-promo-band span.cpb-note {font-size: .78rem; opacity: .9; display: block; margin-top: 1px;}