/* Nörda catalogue look: category, search and product pages follow the homepage product cards.
   Flex2 keeps its rules in @layer, so these unlayered rules win without !important.
   The exceptions are inline styles written by the Flex config and Flex2's own layered !important rules. */

:is(body.catalog-category-view,body.catalog-product-view,body.catalogsearch-result-index){
  --nc-sage:var(--n-accent);--nc-thumb:#EFE8DD;--nc-line:#D9CFBF;--nc-hair:#E4DCCD;--nc-ink-2:#3A352E;
  --nc-dot-ring:rgba(30,27,23,.15);
  color:var(--n-ink);
}

/* Product card (PLP, search, related and upsell rails).
   The packshots are square with a near-white ground, so a square box leaves no band of photo ground above or below them. */
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-product-card-box{background:transparent;border:0;box-shadow:none}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .flex-card-image-wrap--lifestyle{padding:0;margin-bottom:14px;border-radius:var(--n-radius-card);background:var(--nc-thumb)}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .flex-card-image-wrap--lifestyle .product-item-photo{aspect-ratio:1/1;width:100%;height:auto;margin:0;border-radius:var(--n-radius-card);background:var(--nc-thumb)}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .product-item-photo img{display:block;width:100%;height:100%;object-fit:contain;background:transparent;mix-blend-mode:multiply;transition:transform .7s var(--n-ease)}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle:hover .product-item-photo img{transform:scale(1.04)}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .flex-card-badge{top:12px;left:12px;padding:4px 9px;border-radius:10px;background:var(--n-surface);color:var(--n-ink);font-size:11px;font-weight:600;letter-spacing:.04em}

/* Flex2 puts the cart on the price row when a card has no swatches, so the price and the button jumped between cards.
   Every card now gets the swatch row, and the name row takes the slack so the bottom rows line up across a row of cards. */
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index,.checkout-cart-index #crosssell) .flex-card--lifestyle .product-info{grid-template-areas:"name name" "price price" "swat cart";grid-template-rows:1fr auto minmax(44px,auto);row-gap:6px}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index,.checkout-cart-index #crosssell) .flex-card--lifestyle .product-card-name{align-self:start}
/* Hyvä reserves 56px plus a margin for the swatch row, which made it taller than the 44px button row of a card without swatches. */
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index,.checkout-cart-index #crosssell) .flex-card--lifestyle .product-card-details > *{margin-bottom:0}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index,.checkout-cart-index #crosssell) .flex-card--lifestyle .product-card-details .swatch-attribute-options{min-height:0;min-block-size:0}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .product-card-name{margin:0;font-size:15px;line-height:1.35;font-weight:500}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .product-card-name a{color:var(--n-ink);transition:color .2s}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle:hover .product-card-name a{color:var(--nc-sage)}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .product-card-price-wrap{min-height:20px;padding-top:0}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .price-box .price{font-size:15px;line-height:1.35;font-weight:600;color:var(--n-ink)}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .price-box .price-label{margin-right:4px;font-size:15px;font-weight:400;color:var(--n-muted);text-transform:lowercase}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .price-box .old-price .price{font-size:13px;font-weight:400;color:var(--n-muted)}

/* Flex2 resets Hyvä's 36px swatch minimums itself; this only sets the Nörda dot size and ring. */
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .swatch-attribute-options > div{gap:8px;padding:2px}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .swatch-option[style*="background"]{width:16px;height:16px;padding:0;border:1px solid var(--nc-dot-ring);border-radius:50%;box-shadow:none}
/* The radio sits behind its label at 18px and peeked out as a white square around the smaller dot. */
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .swatch-option .product-option-value-input{inset:0;width:100%;height:100%;opacity:0}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .swatch-option.ring[style*="background"]{box-shadow:0 0 0 2px var(--n-ground),0 0 0 4px var(--n-ink)}

/* Flex2 lister.css makes the action row a size container, which collapses the lifestyle grid's auto cart column to 0 and pushes the button out of the card. */
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .product-card-actions-default{container-type:normal}

/* The Flex config writes the button colour inline, so only !important keeps the card button quiet. */
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .cart-btn-icon-only,
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .cart-btn-configure{width:44px;height:44px;padding:0;border:1px solid var(--nc-line);border-radius:22px;background:transparent!important;color:var(--n-ink)!important;box-shadow:none;filter:none;transition:background-color .2s var(--n-ease),color .2s var(--n-ease),border-color .2s var(--n-ease)}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .cart-btn-configure{width:auto;padding:0 18px;font-size:14px;font-weight:500}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle :is(.cart-btn-icon-only,.cart-btn-configure):is(:hover,:focus-visible){border-color:var(--n-ink);background:var(--n-ink)!important;color:var(--n-ground)!important;filter:none}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .cart-btn-icon-only svg{width:18px;height:18px}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle :is(.cart-btn-default,.cart-btn-compact,.compact-actions__cart){border-radius:24px;background:var(--n-ink)!important;color:var(--n-ground)!important;filter:none}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle :is(.cart-btn-default,.cart-btn-compact,.compact-actions__cart):hover{background:var(--nc-ink-2)!important}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle :is(.cart-btn,.cart-btn-configure):focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card-wishlist :is(button,a){width:40px;height:40px;border-color:var(--nc-line);background:var(--n-surface);color:var(--n-ink);box-shadow:none}
:is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card-wishlist :is(button,a):hover{border-color:var(--n-ink)}

/* Category header and toolbar */
body.catalog-category-view .flex-category-header{border-top-color:var(--nc-hair)}
body.catalog-category-view .flex-category-header h1{margin:2px 0 0;font-family:var(--n-serif);font-size:56px;line-height:1.02;font-weight:400;letter-spacing:-.005em;color:var(--n-ink)}
body.catalog-category-view .flex-category-header nav{font-size:13px;color:var(--n-muted);opacity:1}
body.catalog-category-view .flex-category-header nav a:hover{color:var(--nc-sage)}
/* The header count comes from a stored product_count that disagrees with the toolbar, so the toolbar count is the only one shown. */
body.catalog-category-view .flex-category-header h1 + p{display:none}
body.catalog-category-view .flex-category-header .rounded-xl{border-radius:var(--n-radius-card)}
body.catalog-category-view .category-description{color:var(--nc-ink-2)}

/* "Niet gevonden wat je zoekt?" banner under the grid. The button radius arrives inline, hence the !important. */
body.catalog-category-view .flex-hero-banner h2{margin-bottom:12px;font-family:var(--n-serif);font-size:34px;line-height:1.1;font-weight:400;color:var(--n-ink)!important}
body.catalog-category-view .flex-hero-banner .flex-rich-text{font-size:16px;color:var(--nc-ink-2)!important;opacity:1}
body.catalog-category-view .flex-hero-banner .btn{min-height:52px;padding:0 28px;border:1px solid var(--n-ink)!important;border-radius:24px!important;background:var(--n-ink)!important;color:var(--n-ground)!important;font-size:15px;font-weight:500;transition:background-color .2s var(--n-ease)}
body.catalog-category-view .flex-hero-banner .btn:hover{transform:none;background:var(--nc-ink-2)!important}
body.catalog-category-view .flex-hero-banner .btn:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}

:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products .modes{min-height:44px;padding:0 8px;border-color:var(--nc-line);border-radius:22px;background:var(--n-surface)}
:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products .modes-mode{color:var(--n-muted)}
:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products .modes-mode:is(.active,[aria-current="true"],:hover){color:var(--n-ink)}
/* Flex2 marks the current mode with disabled; the filled chip says which one is on. */
:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products .modes-mode{width:32px;height:32px;border-radius:16px;transition:background-color .2s,color .2s}
:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products .modes-mode[disabled]{background:var(--n-ink);color:var(--n-surface);opacity:1;cursor:default}

/* List mode: one product per row, thumbnail left, copy in the middle, cart at the end of the row.
   The card rules above carry #crosssell inside :is(), which gives them ID weight; #product-list matches it.
   The photo link is its own stacking context (z-index 1), so the multiply blend needs the ground on the link itself. */
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-product-card-box{border-bottom:1px solid var(--nc-hair);border-radius:0}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-product-card-box:first-child{border-top:1px solid var(--nc-hair)}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-card--lifestyle{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:32px;align-items:center;padding:24px 0}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-card-image-wrap{margin:0;border-radius:var(--n-radius-card);background:var(--nc-thumb)}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .product-item-photo{aspect-ratio:1/1;width:100%;max-width:none;height:auto;margin:0;border-radius:var(--n-radius-card);background:var(--nc-thumb)}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .product-item-photo img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-card--lifestyle .product-info{width:auto;padding:0;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name cart" "price cart" "swat cart" "desc cart";grid-template-rows:auto;column-gap:24px;row-gap:8px;align-content:center}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-card--lifestyle .product-card-name{font-family:var(--n-serif);font-size:26px;line-height:1.15;font-weight:400}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .product-info > :not([class*="product-card-"]){grid-area:desc;margin:4px 0 0;max-width:56ch;font-size:15px;line-height:1.55;color:var(--n-muted)}
:is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .product-card-actions-default{align-self:center;padding:0;margin:0}
@media (max-width:639px){
  :is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-card--lifestyle{grid-template-columns:112px minmax(0,1fr);column-gap:16px;padding:16px 0}
  :is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-card--lifestyle .product-info{grid-template-areas:"name name" "price price" "swat cart" "desc desc";column-gap:12px}
  :is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .flex-card--lifestyle .product-card-name{font-size:19px}
  :is(.catalog-category-view,.catalogsearch-result-index) #product-list .products-list .product-info > :not([class*="product-card-"]){display:none}
}
:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products select.sorter-options{min-height:44px;padding-left:18px;padding-right:40px;border-color:var(--nc-line);border-radius:22px;background-color:var(--n-surface);font-size:14px;color:var(--n-ink)}
:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products .sorter-action{width:44px;height:44px;border-color:var(--nc-line);border-radius:22px;background:var(--n-surface);color:var(--n-ink)}
:is(.catalog-category-view,.catalogsearch-result-index) .toolbar-products :is(select,button,a):focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}

/* Filter sidebar */
.flex-sidebar--lifestyle{color:var(--n-ink)}
.flex-sidebar--lifestyle :is(.flex-sidebar-section,.flex-sidebar-section--header,.filter-current){border-bottom-color:var(--nc-hair)}
.flex-sidebar--lifestyle .flex-sidebar-title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--n-muted)}
.flex-sidebar--lifestyle .flex-sidebar-group-title{color:var(--n-ink)}
.flex-sidebar--lifestyle .flex-sidebar-group-title .flex-sidebar-filter-title{font-size:15px;line-height:1.4;font-weight:500}
.flex-sidebar--lifestyle .flex-sidebar-toggle{color:var(--n-muted)}
.flex-sidebar--lifestyle .filter-options-content ol.items > li > a{font-size:14px;color:var(--nc-ink-2)}
.flex-sidebar--lifestyle .filter-options-content ol.items > li > a:hover{color:var(--nc-sage)}
.flex-sidebar--lifestyle :is(.flex-sidebar-count,.filter-options-content .count){font-size:13px;color:var(--n-muted)}
.flex-sidebar--lifestyle .flex-sidebar-price-labels{font-size:13px;color:var(--n-muted)}
.flex-sidebar--lifestyle .flex-sidebar-reset{color:var(--n-ink)}
.flex-sidebar--lifestyle .swatch-option-link-layered[style*="background-color"]{width:28px;height:28px;border:1px solid var(--nc-dot-ring);border-radius:50%;box-shadow:none}
.flex-sidebar--lifestyle .swatch-option-link-layered[style*="background-color"]:is([aria-current="true"],.selected){outline:2px solid var(--n-ink);outline-offset:2px}
.flex-sidebar--lifestyle .swatch-option-link-layered:not([style*="background-color"]){min-height:36px;min-block-size:36px;padding:0 14px;display:inline-flex;align-items:center;border:1px solid var(--nc-line);border-radius:18px;background:var(--n-surface);box-shadow:none;font-size:13px;color:var(--n-ink)}
.flex-sidebar--lifestyle .swatch-option-link-layered:not([style*="background-color"]):hover{border-color:var(--n-ink)}
.flex-sidebar--lifestyle .swatch-option-link-layered:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}

/* Pagination */
:is(.catalog-category-view,.catalogsearch-result-index) .flex-pagination a{min-width:40px;height:40px;border-radius:20px;font-size:14px;color:var(--n-ink)}
:is(.catalog-category-view,.catalogsearch-result-index) .flex-pagination a:hover{background:var(--n-linen)}
:is(.catalog-category-view,.catalogsearch-result-index) .flex-pagination a[aria-current="page"],
:is(.catalog-category-view,.catalogsearch-result-index) .flex-pagination a[aria-current="page"]:hover{background:var(--n-ink);color:var(--n-ground)}

/* Product page: gallery. The page already has 32px above it, so the section's own 24px top padding made the gap under the breadcrumb loose. */
.flex-pdp--lifestyle .product-info-main > section{padding-top:0}
.flex-pdp--lifestyle #gallery > div > div.relative.self-center{border-radius:var(--n-radius-card);overflow:hidden;background:var(--nc-thumb)}
/* Hyvä's page transition names the card's photo link and #gallery-main, and the browser captures a named element on
   its own. Without a ground of their own the multiplied packshot was captured on transparent and flashed white. */
.flex-pdp--lifestyle #gallery-main{background:var(--nc-thumb)}
.flex-pdp--lifestyle #gallery-main img{mix-blend-mode:multiply}
.flex-pdp--lifestyle #gallery .js_thumbs_slide > *{border-radius:var(--n-radius-card);background:var(--nc-thumb)}
.flex-pdp--lifestyle #gallery .js_thumbs_slide img{mix-blend-mode:multiply}
.flex-pdp--lifestyle #gallery .js_thumbs_slide > .border-primary{border-width:1px;border-color:var(--n-ink)}

/* Product page: info column */
.flex-pdp--lifestyle .flex-pdp-info-title h1.page-title,
.flex-pdp--lifestyle h1.page-title{margin-bottom:10px;font-family:var(--n-serif);font-size:44px;line-height:1.05;font-weight:400;letter-spacing:-.005em;color:var(--n-ink)}
.flex-pdp--lifestyle .flex-pdp-info-sku{font-size:13px;color:var(--n-muted)}
/* An empty label still took its margin and pushed the price off the title's edge; the space after the label text is enough. */
.flex-pdp--lifestyle .flex-pdp-info-price .price-label{margin-right:0;font-size:15px;font-weight:400;color:var(--n-muted);opacity:1;text-transform:lowercase}
.flex-pdp--lifestyle .flex-pdp-info-price .price-box{color:var(--n-ink)}
.flex-pdp--lifestyle .rating-summary{color:var(--nc-sage)}
.flex-pdp--lifestyle .rating-summary svg:not(.fill-current):not([style*="url"]):not([width="0"]){color:var(--nc-line)}
.flex-pdp--lifestyle .flex-pdp-info-rating [itemprop="reviewCount"]{font-size:13px;color:var(--n-muted)}
.flex-pdp--lifestyle .flex-pdp-info-description{font-size:16px;line-height:1.65;color:var(--nc-ink-2)}
.flex-pdp--lifestyle .flex-pdp-info-stock .stock{font-size:14px;font-weight:500}
.flex-pdp--lifestyle .flex-pdp-info-stock .stock.available{color:var(--nc-sage)}
.flex-pdp--lifestyle .flex-pdp-info-stock .stock.available::before{width:8px;height:8px;background-color:var(--nc-sage)}
.flex-pdp--lifestyle .flex-pdp-info-stock .stock.unavailable{color:var(--n-muted)}
.flex-pdp--lifestyle .flex-pdp-info-stock .stock.unavailable::before{width:8px;height:8px;background-color:var(--n-brass)}

.flex-pdp--lifestyle .swatch-attribute label.label,
.flex-pdp--lifestyle .swatch-attribute > div > :first-child{font-size:15px;font-weight:500;color:var(--n-ink)}
.flex-pdp--lifestyle .swatch-attribute-options{gap:12px;margin:0}
.flex-pdp--lifestyle .swatch-attribute-options > *{margin:0}
.flex-pdp--lifestyle .swatch-option[style*="background-color"]{width:28px;height:28px;border:1px solid var(--nc-dot-ring);border-radius:50%}
.flex-pdp--lifestyle .swatch-option.selected[style*="background-color"],
.flex-pdp--lifestyle .swatch-option[aria-checked="true"][style*="background-color"]{outline-color:var(--n-ink)}

.flex-pdp--lifestyle .pdp-qty-label{font-size:14px;color:var(--n-muted)}
.flex-pdp--lifestyle .pdp-quantity-stepper{min-height:52px;padding:0 6px;border-color:var(--nc-line);background:var(--n-surface)}
.flex-pdp--lifestyle .pdp-quantity-stepper button{width:40px;height:44px;color:var(--nc-ink-2)}
.flex-pdp--lifestyle .pdp-quantity-stepper input{height:44px;font-size:15px;color:var(--n-ink)}

/* The colour also arrives inline from the product-detail config; ApplyNordaCatalogLook sets the same values there. */
.flex-pdp-actions--lifestyle .pdp-add-to-cart{min-height:52px;padding-top:0;padding-bottom:0;border-radius:26px;background-color:var(--n-ink)!important;color:var(--n-ground)!important;font-size:15px;font-weight:500;letter-spacing:.01em;transition:background-color .2s var(--n-ease)}
.flex-pdp-actions--lifestyle .pdp-add-to-cart:hover{background-color:var(--nc-ink-2)!important}
.flex-pdp-actions--lifestyle .pdp-add-to-cart:focus-visible{outline:2px solid var(--n-ink);outline-offset:3px}
.flex-pdp-actions--lifestyle .flex-pdp-usp-list{margin-top:24px;padding-top:20px;border-top:1px solid var(--nc-hair)}
.flex-pdp-actions--lifestyle .flex-pdp-usp-list > li{font-size:13px;color:var(--nc-ink-2)}
.flex-pdp-actions--lifestyle .flex-pdp-usp-title{font-weight:500;color:var(--nc-ink-2)}
.flex-pdp-actions--lifestyle .flex-pdp-usp-icon{color:var(--nc-sage)}

/* Product page: tabs and reviews */
.flex-pis--tabs .flex-pis-tabs{border-color:var(--nc-hair)}
.flex-pis--tabs .flex-pis-tab{color:var(--n-muted);font-size:15px}
.flex-pis--tabs .flex-pis-tab:hover,
.flex-pis--tabs .flex-pis-tab.is-active{color:var(--n-ink)}
.flex-pis--tabs .flex-pis-tab.is-active::after{background:var(--n-ink)}
.flex-pis--tabs .flex-pis-tab:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}
.flex-pis--tabs .flex-pis-panels{font-size:16px;line-height:1.65}
.flex-pis--tabs .flex-pis-panels > div{color:var(--nc-ink-2)}
.flex-pis--tabs .additional-attributes tr{border-color:var(--nc-hair)}
.flex-pis--tabs .additional-attributes :is(th,td){padding:12px 0;font-size:15px;text-align:left}
.flex-pis--tabs .additional-attributes th{padding-right:32px;font-weight:500;color:var(--n-ink)}
.flex-pis--tabs #customer-review-list > h2{font-family:var(--n-serif);font-size:34px;line-height:1.1;font-weight:400;color:var(--n-ink)}
.flex-pis--tabs :is(#customer-review-list,#review-form) .card{border:1px solid var(--nc-hair);border-radius:var(--n-radius-card);background:var(--n-surface);box-shadow:none}
.flex-pis--tabs :is(#customer-review-list,#review-form) .border-gray-300{border-color:var(--nc-hair)}
.flex-pis--tabs #review-form .btn-primary{min-height:48px;padding:0 24px;border-radius:24px;background:var(--n-ink);color:var(--n-ground)}
.flex-pis--tabs #review-form .btn-primary:hover{background:var(--nc-ink-2)}

/* Product page: rails below the product */
/* One section rhythm for every rail below the product. */
.flex-related--lifestyle{margin-block:72px 0}
.flex-related--lifestyle h2{font-family:var(--n-serif);font-size:34px;line-height:1.1;font-weight:400;color:var(--n-ink)}
.flex-related--lifestyle .flex-slider-arrow{width:44px;height:44px;border:1px solid var(--nc-line);border-radius:22px;background:var(--n-surface);color:var(--n-ink);box-shadow:none}
.flex-related--lifestyle .flex-slider-arrow--next{border-color:var(--n-ink);background:var(--n-ink);color:var(--n-ground)}
.flex-related--lifestyle .flex-slider-arrow:focus-visible{outline:2px solid var(--n-ink);outline-offset:2px}

.magerex-ls-rail{margin-block:72px 0}
.magerex-ls-rail h2{margin-bottom:24px;font-family:var(--n-serif);font-size:34px;line-height:1.1;font-weight:400;color:var(--n-ink)}
.magerex-ls-rail h3{margin-bottom:16px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--n-muted)}
.magerex-ls-rail a.group{color:var(--n-ink)}
.magerex-ls-rail a.group > div:first-child{aspect-ratio:1/1;margin-bottom:12px;border-radius:var(--n-radius-card);background:var(--nc-thumb)}
.magerex-ls-rail a.group img{object-fit:contain;mix-blend-mode:multiply;transition:scale .7s var(--n-ease),transform .7s var(--n-ease)}
.magerex-ls-rail a.group:hover img{scale:1.04}
/* The module renders six hits per row with a similarity badge; Nörda shows four and no badge. */
.magerex-ls-rail .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:768px){.magerex-ls-rail .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.magerex-ls-rail a.group:nth-of-type(n+5){display:none}
.magerex-ls-rail .magerex-ls-similarity{display:none}
.magerex-ls-rail a.group > div:first-child > span{top:12px;left:12px;bottom:auto;right:auto;padding:3px 8px;border-radius:10px;background:var(--n-surface);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--n-muted)}
.magerex-ls-rail a.group > div:nth-child(2){font-size:15px;line-height:1.35;font-weight:500;color:var(--n-ink);transition:color .2s}
.magerex-ls-rail a.group:hover > div:nth-child(2){color:var(--nc-sage)}
.magerex-ls-rail a.group > div:nth-child(3){margin-top:4px;font-size:15px;font-weight:600;color:var(--n-ink)}
.magerex-ls-rail a.group:focus-visible{outline:2px solid var(--n-ink);outline-offset:4px;border-radius:var(--n-radius-card)}

/* Search results (MageRex LiveSearch listing) */
body.catalogsearch-result-index .magerex-ls-results .border-outline{border-color:var(--nc-hair)}
body.catalogsearch-result-index .magerex-ls-results img{background:var(--nc-thumb);mix-blend-mode:multiply;object-fit:contain;border-radius:var(--n-radius-card)}

@media (max-width:900px){
  body.catalog-category-view .flex-category-header h1{font-size:40px}
  .flex-pdp--lifestyle .flex-pdp-info-title h1.page-title,
  .flex-pdp--lifestyle h1.page-title{font-size:32px;line-height:1.08}
  .flex-related--lifestyle h2,.magerex-ls-rail h2,.flex-pis--tabs #customer-review-list > h2{font-size:30px}
  .flex-related--lifestyle,.magerex-ls-rail{margin-block:56px 0}
  body.catalog-category-view .flex-hero-banner{padding-block:32px}
  body.catalog-category-view .flex-hero-banner h2{font-size:28px}
  :is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .product-card-name,
  :is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .price-box :is(.price,.price-label){font-size:14px}
  .magerex-ls-rail a.group > div:nth-child(2),.magerex-ls-rail a.group > div:nth-child(3){font-size:14px}
}

/* Flex2 stacks the gallery as a column below 640px but keeps flex:1 1 0, which gives the main image no height. */
@media (max-width:640px){
  .flex-pdp--lifestyle #gallery > div > div.relative.self-center{flex:none}
}

@media (prefers-reduced-motion:reduce){
  :is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle .product-item-photo img,
  .magerex-ls-rail a.group img{transition:none}
  :is(.catalog-category-view,.catalog-product-view,.catalogsearch-result-index) .flex-card--lifestyle:hover .product-item-photo img{transform:none}
  .magerex-ls-rail a.group:hover img{scale:none}
  .flex-sidebar--lifestyle .swatch-option-link-layered[style*="background-color"]:hover{transform:none}
}

/* Flex2 sets these with !important inside @layer utilities. An !important in an earlier layer outranks it,
   while an unlayered !important would lose, so they go in base on purpose. */
@layer base{
  .flex-pdp--lifestyle .flex-pdp-info-price .price-box,
  .flex-pdp--lifestyle .flex-pdp-info-price .price-box .price,
  .flex-pdp--lifestyle .flex-pdp-info-price .price-box .price-final_price .price{font-size:24px!important;font-weight:500!important;line-height:1.2!important}
  /* Flex2 gives the mobile thumbs a 64px width but no height, so the packshots showed as tall strips. */
  @media (max-width:640px){
    .flex-pdp--lifestyle #gallery .js_thumbs_slide{flex:none!important;width:72px!important;height:72px!important}
    .flex-pdp--lifestyle #gallery .js_thumbs_slide > *{width:100%!important;height:100%!important;aspect-ratio:1!important}
    .flex-pdp--lifestyle #gallery .js_thumbs_slide img{width:100%!important;height:100%!important;object-fit:cover!important}
  }
  .flex-pdp--lifestyle .swatch-attribute label.swatch-option.ring,
  .flex-pdp--lifestyle .swatch-attribute label.swatch-option[class*="ring-primary"]{--tw-ring-color:#1E1B17!important;--tw-ring-offset-color:#F5F1EA!important}
}