/** Shopify CDN: Minification failed Line 218:7 Unexpected "/" **/ /* Redesigned PDP styles — only loaded on the pdp-redesign-v2 product template. */ /* Shared "label" type size — the small uppercase Swis721 style used by the Add to Cart button, size selectors, and upsell-card titles. This is the page's guideline label size; bump it here once and every element below that shares the style follows. */ :root { --pdp-label-size: 11px; } /* ------------------------------------------------------------------ Uniform vertical rhythm: every section contributes 66px top + 66px bottom, so the gap between any two adjacent sections is ~132px (and the first/last edges get 66px). Sections that expose a padding setting are set to 66/66 in the template JSON; the rules below cover the sections with no padding setting (outer wrapper padding) and force the card carousels to 66px on mobile too (they otherwise scale to 75% under 750px). Applies on desktop and mobile. */ #shopify-section-main, #shopify-section-product_features_qfdKh7, #shopify-section-product-recommendations, #shopify-section-image_scrolling_text_M99BUm, #shopify-section-rich_text_Uan8xd { padding-top: 66px !important; padding-bottom: 66px !important; } .section-card_carousel_slick_yXTi4U-padding, .section-card_carousel_slick_GNqXYB-padding { padding-top: 66px !important; padding-bottom: 66px !important; } /* yotpo-reviews-api carries its own inner padding (20/60); set it to 66/66 directly so it isn't stacked on top of a wrapper. */ .yotpo-reviews-api { padding-top: 66px !important; padding-bottom: 66px !important; } /* Product Features needs an even 132px gap to the section above (guarantee bar, bottom padding 0) and below (product showcase, top padding 0). Since both neighbours contribute 0, this section carries the full 132px on each side. */ #shopify-section-product_features_qfdKh7 { padding-top: 132px !important; padding-bottom: 132px !important; } /* While the showcase is locked into the lower viewport during the feature scrub, hide its floating ATC bar so it doesn't flash in over the locked preview. */ #shopify-section-product_showcase_DTdG8C.opf-locked-below .pshow__sticky { display: none !important; } /* Hide the per-variant tag pill above the colour swatches (the little gray pill). The green back-in-stock notice (.variant-restock-notice) is kept. */ .product-hero .variant-tag-container { display: none !important; } /* 721 Light — declared + used only on this page */ @font-face { font-family: "Zalando Sans", sans-serif; font-display: swap; font-weight: 300; font-style: normal; src: url("ZalandoSans-Light.ttf") format("truetype"); } @font-face { font-family: "Zalando Sans", sans-serif; font-display: swap; font-weight: 300; font-style: italic; src: url("ZalandoSans-LightItalic.ttf") format("truetype"); } .meta-accordion.product__accordion .accordions-group__block:first-of-type { border-top: 0; } .meta-accordion .accordions-group__block:last-of-type .accordions-group__block-header { border-bottom: 0; } .product-material-subtitle { grid-column-start: 1; grid-column-end: -1; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 14px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 2.1px; padding-top: 18px; } /* Title always on its own full-width row (overrides the partial grid spans at all breakpoints) */ .product-hero .product-panel .product-panel__title { grid-column-start: 1; grid-column-end: -1; font-family: "Zalando Sans", sans-serif !important; } /* Product title type spec (mobile) */ @media only screen and (max-width: 767px) { .product-hero .product-panel .product-panel__title { color: #2D261B !important; font-family: "Zalando Sans", sans-serif !important; font-size: 30px !important; font-style: normal !important; font-weight: 200 !important; line-height: 110% !important; letter-spacing: -0.3px !important; text-transform: capitalize !important; } } /* Product title type spec (desktop) */ @media only screen and (min-width: 768px) { .product-hero .product-panel .product-panel__title { color: #2D261B !important; font-family: "Zalando Sans", sans-serif !important; font-size: 30px !important; font-style: normal !important; font-weight: 200 !important; line-height: 110% !important; letter-spacing: -0.3px !important; text-transform: capitalize !important; } } /* Space between the gallery and the info/price column on desktop = exactly 70px, at every width. The theme's 12-column grid positions the panel proportionally, so the gap drifts with the viewport. The gallery is a FIXED 642px (40.125rem) element, so we replace the grid with a flex row: fixed gallery + a fixed 70px gap + the panel taking the rest. Fixed + fixed = a constant 70px gap. */ @media only screen and (min-width: 1024px) { .product-hero .product-hero__grid { grid-column: main !important; display: flex !important; flex-direction: row; align-items: flex-start; gap: 70px; } .product-hero .product-hero__grid .product-hero__carousel .carousel__wrapper { margin-right: 0; width: 100%; } .product-hero .product-hero__grid .product-panel { flex: 1 1 auto; min-width: 0; padding-left: 0; position: sticky; top: 20px; align-self: flex-start; } /* ---- Desktop gallery: all images stacked in one column ---- Every product image is shown top-to-bottom; you scroll through them with the normal page scroll and then continue down the page. No thumbnails, no nested scroll, no pinning. The Slick carousel is neutralised with CSS (!important beats its inline transform/width/height) so the slides just stack. */ /* .product-hero .product-hero__grid .product-hero__carousel { position: static !important; top: auto !important; align-self: stretch; overflow: visible !important; } .product-hero .product-hero__grid .product-hero__carousel .carousel__wrapper { width: 40.125rem !important; overflow: visible !important; margin-right: 0; } */ /* Pinned one-image gallery window. The strip of images stacks inside this stage; JS sizes it to one image and pins it with position:fixed while you scroll, so each image flows through the fixed window. The clip below is a pre-JS fallback only — it keeps the full stack from flashing before the script sizes/pins the stage. */ /* .product-hero .product-hero__grid .product-hero__carousel .js-pdp-gallery-stage { overflow: hidden; max-height: calc(100vh - 36px); } .product-hero .product-hero__grid .product-hero__carousel .js-product-media-slider { transition: none; } */ /* Scroll-position indicator — a small, compact track sitting just INSIDE the gallery window's left edge (16px in). It's position:fixed; JS re-pins its `left`, `top` and `height` each frame so the short track stays centered in the pinned one-image window, and moves the dark handle to show progress through the whole image strip. The top/height below are just pre-paint fallbacks before JS runs. */ /* .pdp-gallery-rail { position: fixed; width: 3px; top: calc(50vh - 55px); height: 110px; background: rgba(45, 38, 27, 0.16); border-radius: 3px; z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .pdp-gallery-rail.is-visible { opacity: 1; } */ /* display:block !important is required — -base.min.css hides empty
s via `div:empty` (specificity 0,1,1, which beats a plain class), and this handle is an empty div. The inline JS sets it too, as the primary safeguard. */ /* .pdp-gallery-rail__thumb { display: block !important; position: absolute; left: 0; top: 0; width: 100%; /* same width as the track — sits flush within the bar */ height: 30px; background: #595349; /* dark-gray handle showing scroll position */ border-radius: 3px; } */ /* .product-hero .product-hero__grid .product-hero__carousel .slick-slider { position: static !important; margin-top: 0 !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-list { position: static !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; overflow: visible !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-track { transform: none !important; width: 100% !important; height: auto !important; display: block !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slide, .product-hero .product-hero__grid .product-hero__carousel .main-product-slide, .product-hero .product-hero__grid .product-hero__carousel .product-slide, .product-hero .product-hero__grid .product-hero__carousel .product-image-wrapper { width: 100% !important; max-width: 100% !important; height: auto !important; float: none !important; display: block !important; transform: none !important; margin: 0 0 12px 0 !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slide.slick-cloned { display: none !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-dots { display: none !important; } } */ /* Badges block: small uploaded images in a row */ .mp-badges { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; margin-top: 1rem; } .mp-badges .mp-badge { height: var(--mp-badge-h, 32px) !important; width: auto !important; max-width: none !important; flex: 0 0 auto; display: block; object-fit: contain; } /* Add to cart button: label left, price right */ .product-form__buttons button[name="add"].atc-flex { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 540px !important; max-width: 100%; height: 50px !important; min-height: 50px; padding: 0 18px !important; background: #2D261B !important; background-color: #2D261B !important; border: 0 !important; color: #FFF !important; text-align: center; font-family: "Zalando Sans", sans-serif !important; font-size: var(--pdp-label-size) !important; font-style: normal; font-weight: 300 !important; line-height: normal; letter-spacing: 1.5px; } /* Desktop: stretch the ATC button to the full panel width so it lines up with the size selector block above (which spans the whole panel). */ @media only screen and (min-width: 768px) { .product-form__buttons button[name="add"].atc-flex { width: 100% !important; } } .product-form__buttons button[name="add"].atc-flex .atc-label, .product-form__buttons button[name="add"].atc-flex .atc-price { color: #FFF; font-family: "Zalando Sans", sans-serif; font-size: var(--pdp-label-size); font-weight: 300; letter-spacing: 1.5px; } .product-form__buttons button[name="add"].atc-flex .atc-label { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; } /* Discounted price in the ATC button: original crossed out + discounted price */ .product-form__buttons button[name="add"].atc-flex .atc-price del { text-decoration: line-through; opacity: 0.6; margin-right: 6px; } .product-form__buttons button[name="add"].atc-flex .atc-price ins { text-decoration: none; } .atc-shipping-note, .atc-shipping-note span { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 12px; font-style: normal; font-weight: 300; line-height: normal; text-transform: capitalize; } /* the shipping note is a centered flex row by default — force it justified left */ .atc-shipping-note, .option__group-label-recommended.grey.atc-shipping-note { justify-content: flex-start !important; text-align: justify !important; /* match the popup note (.mp-qv__note): no extra letter-spacing */ letter-spacing: normal !important; } /* The "Cool With Confidence" showcase has its own sticky add-to-cart bar. The theme's native sticky ATC (.product-form__buttons-hidden) becomes a fixed bottom bar at <=1023px with the highest z-index, so it sits on top of and hides the showcase bar ("stuck underneath the CTA"). Suppress the native one on this template so the showcase bar is the only sticky add-to-cart. */ @media only screen and (max-width: 1023px) { .product-hero .product-form__buttons.product-form__buttons-hidden { /* display: none !important; */ } } /* Description block. This stylesheet only loads on the figma-redesign template, so we can target .product-panel__short directly (no .product-hero needed) to guarantee the override wins regardless of the wrapper — without touching the global site. Kills the theme's big top/bottom margin and the Replo centering. */ .product-panel__short { grid-column-start: 1; grid-column-end: -1; margin-top: 0 !important; margin-bottom: 0 !important; /* .product-panel__short also has the `.rte` class, whose `margin: 0 auto` centers the block. Reset the auto side margins so it aligns left. */ margin-left: 0 !important; margin-right: 0 !important; padding-top: 18px !important; padding-bottom: 8px !important; } /* A bit more breathing room under the description on desktop */ @media only screen and (min-width: 768px) { .product-panel__short { padding-bottom: 24px !important; } } .product-panel__short, .product-panel__short * { text-align: left !important; } /* The description is a page-builder (Replo) block whose centering styles are injected in the AFTER this stylesheet, so equal-specificity rules lose on source order. The repeated `.product-panel__short` bumps specificity and — crucially — keeps the override self-contained so it no longer depends on the .product-hero / .product-panel__grid ancestor chain being present. */ .product-panel__short.product-panel__short .block__container, .product-panel__short.product-panel__short .block__text-container, .product-panel__short.product-panel__short .block__blurb, .product-panel__short.product-panel__short .block__blurb *, .product-panel__short.product-panel__short .block__container.left, .product-panel__short.product-panel__short .block__container.pair { display: block !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; width: 100% !important; max-width: 100% !important; } /* On desktop the Replo combined `.left.pair` rule pushes the blurb right with margin-left:auto. Match both classes together (+ extra specificity) to kill it. */ .product-panel__short.product-panel__short.product-panel__short .block__container.left.pair, .product-panel__short.product-panel__short.product-panel__short .block__container.left.pair > .block__text-container { margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; } .product-panel__short, .product-panel__short p { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 15px; font-style: normal; font-weight: 300; line-height: 139.511%; } /* Yotpo star-rating block: stars in #2D261B (full colour set in ytp-reviews.js for half-stars) */ .product-hero .ytp-star-rating svg.full-star { fill: #2D261B; stroke: #2D261B; } .product-hero .ytp-star-rating svg.empty-star, .product-hero .ytp-star-rating svg.half-star { stroke: #2D261B; } /* Reviews count text */ .product-hero .ytp-bottomline a, .product-hero .ytp-bottomline a span, .product-hero .ytp-bottomline .ytp-total-reviews, .product-hero .ytp-bottomline .dekstech-ytp-total-reviews { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 10px; font-style: normal; font-weight: 300; line-height: normal; } /* Compact rating row: tiny stars + "4.8 stars" + "6,577 reviews" inline */ .product-hero .ytp-bottomline .ytp-wrapper { display: flex; align-items: center; flex-wrap: nowrap; /* override -base.min.css wrap so stars + score + count stay on one line instead of stacking */ white-space: nowrap; gap: 5px; } /* whole rating block scrolls to the reviews grid (handled in JS) */ .product-hero .ytp-bottomline, .product-hero .ytp-bottomline .ytp-star-rating { cursor: pointer; } .product-hero .ytp-star-rating { display: inline-flex; align-items: center; line-height: 0; } .product-hero .ytp-star-rating svg { width: 11px !important; height: 11px !important; } /* "4.8 stars" */ .product-hero .ytp-bottomline .ytp-avg-score { display: inline !important; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 10px; font-style: normal; font-weight: 300; line-height: normal; } /* "6,577 reviews" — light gray, lighter weight, lowercase word, snug to the score */ .product-hero .ytp-bottomline .ytp-reviews-link, .product-hero .ytp-bottomline .ytp-reviews-link span { color: #A4A09D; font-family: "Zalando Sans", sans-serif; font-size: 10px; font-style: normal; font-weight: 275; line-height: normal; } .product-hero .ytp-bottomline .ytp-reviews-word { text-transform: lowercase; } .product-hero .ytp-bottomline .ytp-total-reviews { margin-left: 0 !important; margin-right: 3px !important; color: #A4A09D; } /* Color swatches: square, fixed 21x21. Keep the theme's original swatch layout/spacing — only resize + square the corners. */ /* Show the active colour name OFF TO THE SIDE (right of the swatches, top-aligned with the first row). The label is "Color Sand"; font-size:0 hides the "Color" option-name text, the shows the selected value. Swatches take the left column so the name never overlaps them, even when expanded. Updated live by component-product-variant.js. */ .product-hero .swatch__group--color { display: grid; /* Fixed-width column for the active colour name so a longer/shorter name never resizes the 1fr swatch column (which made the swatches jump around). */ grid-template-columns: 1fr 130px; align-items: start; column-gap: 16px; } .product-hero .swatch__group--color .swatch__group-buttons { grid-column: 1; grid-row: 1; } .product-hero .swatch__group--color .product-option__label { grid-column: 2; grid-row: 1; min-height: 21px; /* vertically centre against the first swatch row */ margin: 0; display: flex; align-items: center; justify-content: flex-end; } .product-hero .swatch__group--color .swatch__see-all { grid-column: 1; grid-row: 2; } .product-hero .swatch__group--color .swatch__group-label { display: block; margin: 0; padding: 0; font-size: 0; letter-spacing: 0; text-align: right; /* Allow long multi-word names (e.g. "Gray Windowpane") to wrap within the reserved column instead of overflowing into the swatches. Wrapping here can't move the swatches, since the name lives in its own top-aligned column. */ white-space: normal; overflow-wrap: break-word; } .product-hero .swatch__group--color .swatch__group-label mark { background: none; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: var(--pdp-label-size); font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; } /* A bit more breathing room between swatches; drop the theme min-height that leaves dead space below a single row (collapsed) before the toggle */ .product-hero .swatch__group--color .swatch__group-buttons { gap: 6px; min-height: 0; } .product-hero .swatch__group--large .swatch__group-buttons .swatch__button.swatch__button--color { width: 21px; height: 21px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; box-sizing: border-box; } .product-hero .swatch__group--color .swatch__group-buttons .swatch__button .swatch__button--color { display: block; /* Reset the theme's 4px inner offset (sized for the old 44px circle) so the color square lines up exactly inside the active outline box. */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; box-sizing: border-box; } /* Active swatch: thin outline with a tiny gap (instead of the thick touching border) */ .product-hero .swatch__group--color .swatch__group-buttons .swatch__button.swatch__button--active { border: 0 !important; outline: 1px solid #2D261B; outline-offset: 1px; } .product-hero .swatch__group--color .swatch__group-buttons .swatch__button.swatch__button--oos:after { width: 100%; height: 100%; border-radius: 0; } /* "See all N colors" toggle under the swatches */ .product-hero .swatch__see-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 0; background: none; border: 0; cursor: pointer; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 12px; font-style: normal; font-weight: 300; line-height: normal; text-decoration: underline; text-underline-offset: 3px; } .product-hero .swatch__see-all::after { content: ""; width: 7px; height: 7px; border-right: 1px solid #2D261B; border-bottom: 1px solid #2D261B; transform: rotate(45deg); transform-origin: center; margin-top: -3px; transition: transform 0.2s ease; } .product-hero .swatch__see-all[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 2px; } /* Size (option) selector: up to 3 per row, but the buttons grow to fill the row so 2 sizes become two full-width halves (1 fills the whole bar) instead of leaving a dark empty cell. Dividers via 1px gap; hide the "Size" label */ .product-hero .option__group .option__group-label { display: none; } .product-hero .option__group { display: flex; flex-wrap: wrap; gap: 1px; background: #2D261B; border: 1px solid #2D261B; border-radius: 0; overflow: hidden; } .product-hero .option__group .option__button { flex: 1 0 30%; /* grow to fill the row; 30% basis caps it at 3 per row */ display: flex; align-items: center; justify-content: center; height: 50px; min-height: 50px; margin: 0; padding: 0 12px; background-color: #ffffff; border: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; } .product-hero .option__group .option__button.option__button--active { background-color: #F6F4F0; } /* Match the size labels to the ATC button typography */ .product-hero .option__group .option__button span { color: #2D261B; font-family: "Zalando Sans", sans-serif !important; font-size: var(--pdp-label-size) !important; font-weight: 300 !important; line-height: normal; letter-spacing: 1.5px; text-transform: uppercase; } /* Mobile: keep the same fill-the-row layout (max 3 per row, then wrap) instead of stacking. The theme forces .option__button { grid-column: span 4 } on mobile, so override to the flex fill here too. */ @media only screen and (max-width: 767px) { .product-hero .option__group { display: flex !important; flex-wrap: wrap !important; gap: 1px !important; } .product-hero .option__group .option__button { flex: 1 0 30% !important; } .product-hero .option__group .option__button span { color: #000; text-align: center; font-family: "Zalando Sans", sans-serif !important; font-size: 11px !important; font-style: normal; font-weight: 300 !important; line-height: normal; letter-spacing: 1.2px; text-transform: uppercase; } } /* Upsell Products block: full-width row, 3 cards across */ .mp-upsell-trio { grid-column-start: 1; grid-column-end: -1; margin-top: 0; padding-top: 40px; } .mp-upsell-trio__title { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 16px; font-style: normal; font-weight: 300; line-height: 128%; margin-bottom: 0.75rem; } .mp-upsell-trio__items { display: flex; gap: 0.75rem; } .mp-upsell-trio__items .mp-upsell-card { flex: 1 1 0; min-width: 0; text-decoration: none; color: inherit; } .mp-upsell-card__media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; } .mp-upsell-card__img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } .mp-upsell-card__atc { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; border: 0; cursor: pointer; padding: 14px 14px; background: #2D261B; color: #FFF; text-align: center; font-family: "Zalando Sans", sans-serif; font-size: 12px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 1.5px; transform: translateY(100%); transition: transform 0.25s ease; } .mp-upsell-card:hover .mp-upsell-card__atc { transform: translateY(0); } .mp-upsell-card__img-link { display: block; width: 100%; height: 100%; } .mp-upsell-card__title { display: block; color: #000; text-decoration: none; font-family: "Zalando Sans", sans-serif; font-size: var(--pdp-label-size); font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 0.4rem; } /* Product Stats block: title + 4-up stats + link, full-width row */ .mp-stats { grid-column-start: 1; grid-column-end: -1; margin-top: 1.5rem; } /* Mobile: align the product info content with the rest of the page's sections. Other sections use .cpage-width (full width minus a 15px side gutter), but the product panel content sits in the theme grid's capped/centered "main" column, so it ends up inset more than everything else on wider phones. Force it to full width with the same 15px gutter so it lines up with the other sections. */ @media screen and (max-width: 767px) { /* The product info panel is a .grid-container: it lays its content out in a centered, capped "main" column with minmax(1rem, 1fr) side tracks, so on wider phones the leftover space becomes growing side gutters — that's the extra space on the sides. Drop the grid so the content spans the full width instead. */ .js-product-panel.product-panel.grid-container, .product-panel.grid-container { display: block !important; } /* Full width, no inset, then ONE 15px gutter to match .cpage-width (every other section on the page). */ .product-panel .product-panel__grid { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 15px !important; padding-right: 15px !important; box-sizing: border-box !important; } /* The breadcrumb sits in .container--narrow, which adds its OWN side padding on top of the 15px above — zero it so it lines up with the title and the rest. */ .product-panel .pdp-breadcrumb-mobile .container, .product-panel .pdp-breadcrumb-mobile .container--narrow { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } } /* Mobile only: reorder the lower product-panel blocks to ATC -> Product Stats -> Complete Your Buffy Bed -> accordion (Details / Dimensions / Care Guide) -> badges. The ATC + everything above keep order:0 (DOM order), so these positive-order items fall in after it. */ @media screen and (max-width: 749px) { /* The panel grid is display:block at mobile widths (display:grid is only set >=1024px), so `order` was being ignored. Make it a flex column so the order values below actually reposition the blocks. The items already stacked full-width, so the layout is unchanged — just now reorderable. */ .product-hero .product-panel__grid { display: flex; flex-direction: column; } .product-hero .product-panel__grid .mp-stats { order: 1; } .product-hero .product-panel__grid .mp-upsell-trio { order: 2; } .product-hero .product-panel__grid .meta-accordion { order: 3; } /* badges stay visible on mobile, after the accordion */ .product-hero .product-panel__grid .mp-badges { order: 4; } /* Complete Your Buffy Bed on mobile: show 2 larger cards (hide the 3rd+). With two cards the flex row gives each ~half the width, so the square images get a decent chunk bigger. */ .mp-upsell-trio__items .mp-upsell-card ~ .mp-upsell-card ~ .mp-upsell-card { display: none; } /* On mobile the whole image opens the quick-view popup (see mp-upsell-card.liquid), so the Add-to-Cart button is removed here. */ .mp-upsell-card__atc { display: none !important; } .mp-upsell-card__img-link { cursor: pointer; } } .mp-stats__title { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 24px; font-weight: 300; line-height: 128%; margin-bottom: 1.75rem; } /* Mobile: a little breathing room above the stats heading */ @media screen and (max-width: 749px) { /* NOTE: selector is .mp-stats .mp-stats__title (specificity 0,2,0) on purpose — the unified-heading rule (.mp-stats__title, 0,1,0) appears LATER in this file, so a plain .mp-stats__title here would lose the !important tie on source order. The extra ancestor class makes this win regardless of order. */ .mp-stats .mp-stats__title { padding-top: 20px; /* Keep the title on ONE line on mobile and never past the section edge: size scales with viewport width (clamp) and never wraps. Tuned so the longest heading ("Cooling Bedding That's Radically Clean", ~38 chars) fits down to ~320px screens. */ font-size: clamp(14px, 4.9vw, 20px) !important; white-space: nowrap; } } .mp-stats__grid { display: flex; flex-wrap: nowrap; gap: 55px; } .mp-stats__item { flex: 1 1 0; max-width: 136px; min-width: 0; } .mp-stats__value { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 40px; font-weight: 300; line-height: normal; } .mp-stats__label { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 14px; font-weight: 300; line-height: 1.3; margin-top: 0.35rem; } .mp-stats__link { display: inline-block; margin-top: 1.75rem; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: underline; } @media screen and (max-width: 749px) { /* Stack the stats vertically; each row = value on the left, label on the right */ .mp-stats__grid { flex-direction: column; flex-wrap: nowrap; gap: 20px; } .mp-stats__item { display: flex; align-items: center; gap: 0; flex: 0 0 auto; max-width: none; } .mp-stats__value { flex: 0 0 50%; max-width: 50%; font-size: 48px; } .mp-stats__label { flex: 0 0 50%; max-width: 50%; margin-top: 0; text-align: left; } } /* Breadcrumb: on desktop it sits at the top (above the gallery + title). On mobile, move it below the gallery and above the title so the image sits flush at the very top of the page. */ /* Desktop: trim the breadcrumb padding/height so it tucks closer to the top. The breadcrumb links live in nav.container--narrow, which already matches the page "main" grid (same 45/59/69.5rem widths the product gallery uses), so its left edge IS the gallery's left edge — the links were just centered inside it. Left-aligning the nav text lands them on the gallery's left edge. */ @media screen and (min-width: 768px) { .pdp-breadcrumb-top .product-breadcrumb { min-height: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; } /* The breadcrumb is rendered INSIDE .product-hero (the same grid that holds the gallery), so placing it in the same track as the gallery makes its left edge equal the gallery's left edge by construction. The gallery spans the `full` track at 768-1191px and the `main` track at >=1192px — match it. Then strip the theme nav's own max-width/margin/padding so it fills the track left-aligned. */ .pdp-breadcrumb-top { grid-column: full; } .pdp-breadcrumb-top .product-breadcrumb .container.container--narrow { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; text-align: left !important; } } @media screen and (min-width: 1024px) { .pdp-breadcrumb-top { grid-column: main; } } .pdp-breadcrumb-mobile { display: none; } @media only screen and (max-width: 767px) { .pdp-breadcrumb-top { display: none; } /* Breadcrumbs are hidden entirely on mobile */ .pdp-breadcrumb-mobile { display: none; grid-column: 1 / -1; } .pdp-breadcrumb-mobile .product-breadcrumb { min-height: 0; padding-bottom: 0; padding-left: 0; } /* Drop the nav's .container side padding so the breadcrumb left-aligns with the title/content below it instead of being inset. */ .pdp-breadcrumb-mobile .product-breadcrumb .container--narrow { text-align: left; padding-left: 0; padding-right: 0; } } /* Gallery: no badges, square main image, bigger side thumbnails */ .product-hero .product-media--overlay, .product-hero .product-hero__discount-badge, .product-hero .shared__discount-badge { display: none !important; } /* Mobile gallery: one full-viewport-width image per slide + line/tab dot indicators. Selectors match the theme's high-specificity rules + !important so they win. */ @media only screen and (max-width: 767px) { /* Full-bleed: break the gallery out of the content gutter to span the viewport */ /* .product-hero .product-hero__grid .product-hero__carousel { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; } */ /* The slide wrapper is display:inline-block, so it shrink-wraps its content. Force the wrapper + its inner spacer div to fill the full viewport width. */ /* .product-hero .product-hero__grid .product-hero__carousel .main-product-slide, .product-hero .product-hero__grid .product-hero__carousel .product-image-wrapper-constrained, .product-hero .product-hero__grid .product-hero__carousel .product-image-wrapper-constrained > div { display: block !important; width: 100% !important; max-width: 100% !important; } .product-hero .product-hero__grid .product-hero__carousel .product-image-wrapper-constrained { position: relative !important; aspect-ratio: 1 / 1 !important; height: auto !important; overflow: hidden !important; } */ /* The inner div fills the square box instead of shrink-wrapping the spacer */ /* .product-hero .product-hero__grid .product-hero__carousel .product-image-wrapper-constrained > div { position: absolute !important; inset: 0 !important; height: 100% !important; } .product-hero .product-hero__grid .product-hero__carousel .product-image-wrapper-constrained > div > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } */ /* The real product image absolutely fills that height. Do NOT make it static — that drops it below the spacer and the image reads as missing. */ /* .product-hero .product-hero__grid .product-hero__carousel .product-slide picture, .product-hero .product-hero__grid .product-hero__carousel .product-slide .true-img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } */ /* The slider is the positioning context for the overlaid dots */ /* .product-hero .product-hero__grid .product-hero__carousel .slick-slider { position: relative !important; } */ /* Line/tab indicators — override the theme's grid/thumb dot styling. Overlaid on the image (20px up from its bottom edge) instead of sitting below it, so the slide keeps its full image ratio. */ /* .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; height: auto !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 20px !important; z-index: 2 !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots > li { grid-column: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots > li button { display: block !important; width: 28px !important; height: 2px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #A4A09D !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; cursor: pointer; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots > li button::before { display: none !important; content: none !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots > li.slick-active button { background: #2D261B !important; } */ } /* No border / radius / outline on any gallery image, slide, thumb or dot */ .product-hero .product-hero__carousel img, .product-hero .product-hero__carousel .product-slide, .product-hero .product-hero__carousel .product-slide img, .product-hero .product-hero__carousel .product-slide .true-img, .product-hero .product-hero__carousel .product-thumb, .product-hero .product-hero__carousel .product-thumb img, .product-hero .product-hero__carousel .slick-dots button, .product-hero .product-hero__carousel .slick-dots img { border: 0 !important; border-radius: 0 !important; outline: 0 !important; box-shadow: none !important; } /* Desktop gallery sizing — applies from >=1024px now that we also bring the gallery structure (fixed 642px wrapper, slick-list left:94px offset, side thumbnails) down to >=1024px above, so the 1024–1191px band gets the full desktop gallery instead of an overlapping one. */ /* @media only screen and (min-width: 1024px) { .product-hero .product-hero__grid .product-hero__carousel .slick-slider { min-height: 34.25rem; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .product-slide { height: 34.25rem; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .product-slide img, .product-hero .product-hero__grid .product-hero__carousel .slick-slider .product-slide .true-img { width: 100%; height: 100%; object-fit: cover; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .product-thumb { height: 5.5rem !important; width: 5.5rem !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-dots button { height: 5.5rem; width: 5.5rem; } } */ /* Divider under the product gallery (50px of space above the line) */ /* .product-hero .product-hero__carousel::after { content: ""; display: block; clear: both; margin-top: 50px; border-top: 1px solid #D8D4CC; } */ /* Desktop: Product Stats is relocated by JS into the gallery column, below the gallery. Its own top divider becomes the "divider under the gallery", so the carousel's own divider is hidden to avoid doubling up. Width is capped to the gallery width inline by the script. */ @media only screen and (min-width: 1024px) { .product-hero .product-hero__carousel:has(.mp-stats--under-gallery)::after { display: none; } .product-hero .product-hero__carousel .mp-stats--under-gallery { margin-top: 50px; padding-top: 50px; border-top: 1px solid #D8D4CC; } } /* Divider under the material subtitle block (30px of space above the line) */ .product-material-subtitle::after { content: ""; display: block; margin-top: 30px; border-top: 1px solid #D8D4CC; } /* ----------------------------------------------------------------------- */ /* Upsell quick-view modal */ /* ----------------------------------------------------------------------- */ html.mp-qv-lock { overflow: hidden; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .mp-qv[hidden] { display: none; } .mp-qv { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; } .mp-qv__overlay { position: absolute; inset: 0; background: rgba(10, 8, 5, 0.35); } .mp-qv__dialog { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; width: 100%; max-width: 960px; max-height: 90vh; overflow: auto; background: #fff; padding: 40px; box-sizing: border-box; } .mp-qv__close { position: absolute; top: 14px; right: 16px; z-index: 2; background: none; border: 0; padding: 0; font-size: 24px; line-height: 1; color: #2D261B; cursor: pointer; } /* Gallery: square main image, thumbnails underneath */ .mp-qv__main { aspect-ratio: 1 / 1; overflow: hidden; background: #F3F1ED; } .mp-qv__main-img { width: 100%; height: 100%; object-fit: cover; display: block; } .mp-qv__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } .mp-qv__thumb { padding: 0; border: 1px solid transparent; background: #F3F1ED; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; } .mp-qv__thumb.is-active { border-color: #2D261B; } .mp-qv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Info column: title pinned to the top, the rest bottom-aligned with the gallery */ .mp-qv__info { display: flex; flex-direction: column; } .mp-qv__body { margin-top: auto; display: flex; flex-direction: column; } .mp-qv__title { margin: 0; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 30px; font-style: normal; font-weight: 300; line-height: 110%; /* 33px */ letter-spacing: -0.3px; text-transform: capitalize; } /* Rating row: matches the PDP product info section — 11px stars, "Zalando Sans", sans-serif 10px, score in #2D261B, review count in light gray. */ .mp-qv__rating { display: flex; align-items: center; gap: 5px; margin-top: 12px; } .mp-qv__stars { display: inline-flex; align-items: center; line-height: 0; } .mp-qv__stars svg.full-star { fill: #2D261B; stroke: #2D261B; } .mp-qv__stars svg.empty-star { fill: none; stroke: #2D261B; } .mp-qv__stars svg { width: 11px !important; height: 11px !important; } .mp-qv__rating-text { display: inline-flex; align-items: center; gap: 3px; } .mp-qv__rating-text .mp-qv__avg { color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 10px; font-style: normal; font-weight: 300; line-height: normal; } .mp-qv__rating-text .mp-qv__rcount { color: #A4A09D; font-family: "Zalando Sans", sans-serif; font-size: 10px; font-style: normal; font-weight: 275; line-height: normal; } .mp-qv__subtitle { margin-top: 16px; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: 2.1px; text-transform: uppercase; } /* Divider under the material subtitle — matches the PDP product info section */ .mp-qv__subtitle::after { content: ""; display: block; margin-top: 16px; border-top: 1px solid #D8D4CC; } .mp-qv__desc { margin-top: 12px; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 15px; font-weight: 300; line-height: 139.511%; } .mp-qv__options { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; } /* Color swatches: square 21px */ .mp-qv__swatches { display: flex; flex-wrap: wrap; gap: 8px; } .mp-qv__swatch { width: 21px; height: 21px; padding: 0; border: 1px solid #D8D4CC; border-radius: 0; background-color: #fff; background-size: cover; background-position: center; cursor: pointer; box-sizing: border-box; } .mp-qv__swatch.is-active { outline: 1px solid #2D261B; outline-offset: 1px; } /* Size selector: up to 3 per row, buttons grow to fill the row (matches the PDP) so 2 sizes become two full-width halves instead of leaving a dark empty cell. */ .mp-qv__sizes { display: flex; flex-wrap: wrap; gap: 1px; background: #2D261B; border: 1px solid #2D261B; overflow: hidden; } .mp-qv__size { flex: 1 0 30%; /* grow to fill the row; 30% basis caps it at 3 per row */ margin: 0; padding: 18px 12px; background-color: #fff; border: 0; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; } .mp-qv__size.is-active { background-color: #F6F4F0; } /* Size not available in the selected colour — light-gray + crossed out, like the product info (no background dimming) */ .mp-qv__size.is-unavailable, .mp-qv__size[disabled] { background-color: #fff; color: var(--hh-color-grey-300); text-decoration: line-through; cursor: default; } /* ATC: label left, price right (matches the PDP button) */ .mp-qv__atc { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; height: 50px; margin-top: 20px; padding: 0 18px; background: #2D261B; border: 0; color: #fff; font-family: "Zalando Sans", sans-serif; font-size: 11px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; } .mp-qv__atc[disabled] { opacity: 0.5; cursor: default; } /* Discounted price in the popup ATC button: original crossed out + discounted */ .mp-qv__atc .mp-qv__atc-price del { text-decoration: line-through; opacity: 0.6; margin-right: 6px; } .mp-qv__atc .mp-qv__atc-price ins { text-decoration: none; } .mp-qv__note { margin-top: 12px; color: #2D261B; font-family: "Zalando Sans", sans-serif; font-size: 12px; font-weight: 300; } @media screen and (max-width: 749px) { .mp-qv__dialog { grid-template-columns: 1fr; gap: 24px; padding: 24px; } } /* ---- Mobile PDP tweaks ---- */ @media screen and (max-width: 749px) { /* No gallery divider sitting above the product title on mobile */ .product-hero .product-hero__carousel::after { display: none !important; } /* Product info goes edge-to-edge on mobile (no left/right gutter) */ .product-hero .product-hero__grid .product-panel { padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } /* Badges stay visible on mobile and are placed last via `order: 4` above. The upsell card slide-up "Add to Cart" is removed on mobile (display:none above), so it's no longer forced visible here. */ /* Title fills the full screen width and only wraps when the text exceeds it (theme makes it inline-flex spanning cols 1-10, which wrapped early) */ .product-hero .product-panel .product-panel__title { display: block; width: 100%; white-space: normal; } } /* Unify all section headings on this template to one size/style */ .mp-stats__title, .pshow__heading, .tcards__title, .cmp__title, .opf__title, .ups__title, .pfaq__title { color: #2D261B !important; font-family: "Zalando Sans", sans-serif !important; font-size: 22px !important; font-style: normal !important; font-weight: 300 !important; line-height: 146% !important; } /* Widen the product page content on desktop. The theme caps the "main" column at 69.5rem (~1112px) and .cpage-width at 1200px; bump both to ~1440px with min gutters. Scoped to this template only (this stylesheet loads only on the redesign PDP). */ @media only screen and (min-width: 1024px) { .grid-container.js-main-product { grid-template-columns: [full-start] minmax(2.5rem, 1fr) [main-start] minmax(0, 90rem) [main-end] minmax(2.5rem, 1fr) [full-end] !important; } .cpage-width { max-width: 1385px !important; } /* NOTE: the footer alignment rules that used to live here now live globally in sections/footer.liquid (so the footer looks identical on every template, not just this one). The footer already aligns to the same 90rem "main" column as the product grid above, because both use the same track. */ } /* ---- Desktop gallery: side thumbnails = main image height; 3 fill it, scroll for more ---- */ /* @media only screen and (min-width: 1024px) { .product-hero .product-hero__grid .product-hero__carousel .slick-slider { position: relative; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots { top: 0 !important; bottom: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; flex-wrap: nowrap !important; gap: 10px !important; padding: 0 !important; scrollbar-width: none; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots::-webkit-scrollbar { display: none; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots > li { flex: 0 0 calc((100% - 20px) / 3) !important; height: auto !important; width: 5.5rem !important; margin: 0 !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots > li button, .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots .product-thumb { width: 100% !important; height: 100% !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots .product-thumb img, .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-dots img { width: 100% !important; height: 100% !important; object-fit: cover !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider.has-more-thumbs::after { content: ""; position: absolute; left: 0; bottom: 6px; width: 5.5rem; height: 22px; pointer-events: none; z-index: 4; background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%) , url("data:image/svg+xml;utf8,"); background-repeat: no-repeat, no-repeat; background-position: center, center bottom 2px; background-size: 100% 100%, 16px; } } */ /* PDP STYLE */ .product-hero { .product-hero__grid { @media (max-width:1024px) { } .product-hero__carousel { @media (min-width:1200px){ flex: 0 0 44.125rem; width: 44.125rem; max-width: 44.125rem; } @media (max-width:1200px){ flex: 0 0 50%; width: 50%; max-width: 50%; grid-column-end: 12; grid-column-start: 1; } @media (max-width:1024px){ width: 100%; max-width: 100%; margin-left: 0; overflow: unset; } @media (max-width:576px){ grid-column-end: 13; } .slick-slider { .slick-list { @media (min-width:1024px){ width: 100% !important; left: 0; } .slick-track { .slick-slide { @media (max-width:576px){ margin-right: 0px !important; } .main-product-slide { .product-image-wrapper { width: 100%; @media (max-width:576px){ margin-right: 0px !important; } } } } } } } } .slick-dots { top: unset !important; bottom: 23px; width: 100%; flex-direction: row !important; flex-wrap: wrap; gap: 4px; height: unset !important; li { padding: 8px 0 !important; margin: 0 !important; cursor: pointer; button { width: 46px !important; height: 1px !important; background-color:#2D261B; opacity: 35%; .product-image-wrapper { display: none !important; } } &.slick-active { button { opacity: 1; } } } } .product-panel { @media (min-width: 768px) and (max-width: 1023px) { .product-panel__gift, .product-panel__short, .shared__button { grid-column-end: 12; grid-column-start: 1; } .product-panel__block-full { grid-column-start: 1; } } } } } @media(max-width: 768px) { .product-hero .product-hero__grid .product-hero__carousel .slick-slider .slick-slide { width: 100vw !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-slider .product-slide { height: 27rem !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-dots { position: absolute !important; bottom: 19px !important; display: flex !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-dots > li button { width: 28px !important; height: 2px !important; } .product-hero .swatch__group--color .swatch__group-label mark { font-family: "Zalando Sans", sans-serif !important; font-size: 8px !important; font-style: normal; font-weight: 300 !important; line-height: normal; letter-spacing: 1.2px; } .footer__newsletter form .newsletter-form__input { font-weight: 200 !important; font-style: Light; font-size: 14px !important; line-height: 128%; letter-spacing: 0%; vertical-align: bottom; height: 2rem !important; } .footer.section-footer .footer__newsletter form .newsletter-form__submit::after { font-weight: 200; font-style: Light; font-size: 8px !important; line-height: 100%; letter-spacing: 15%; text-align: right; vertical-align: bottom; } .footer.section-footer .footer__social a { font-weight: 200; font-style: Regular; font-size: 10px !important; line-height: 100%; letter-spacing: 0%; text-align: right; vertical-align: bottom; } .footer.section-footer .footer__menu-block .footer__menu-link:first-child { padding: 20px 0px 11px 0px !important; } .footer.section-footer .footer__menu-block .footer__menu-link:first-child a { font-weight: 200; font-style: Light; font-size: 8px !important; line-height: 100%; letter-spacing: 15%; vertical-align: bottom; } .footer.section-footer .footer__menu-block .footer__menu-link:first-child::after { font-size: 12px !important; line-height: 1; color: var(--hh-footer-font-color); font-weight: 200; } .footer.section-footer .footer__menu-link a { font-weight: 300; font-style: Regular; font-size: 10px !important; line-height: 200%; letter-spacing: 0%; } .footer.section-footer .footer__menu-block .footer__menu-link:not(:first-child) { margin-bottom: .2rem !important; } .footer.section-footer .footer__tagline--mobile { font-weight: 300; font-style: Regular; font-size: 10px !important; line-height: 100%; letter-spacing: 0%; text-align: left; vertical-align: bottom; } .footer.section-footer .footer__sublinks { justify-self: auto; padding-top: 0px !important; } .footer.section-footer .footer__sublinks ul { flex-wrap: wrap; gap: 0rem !important; align-items: flex-start; justify-content: flex-start; } .footer.section-footer .footer__sublinks a { font-weight: 200; font-style: Regular; font-size: 8px !important; line-height: 100%; letter-spacing: 0%; vertical-align: bottom; } .footer.section-footer .footer__menu > .footer__menu-block.hidden--lg:nth-of-type(5) { border-top: none !important; } .footer.section-footer .footer__menu-block.is-open .footer__menu-link:not(:first-child) { line-height: 0 !important; margin: 0px; padding: 0px; } .footer__sublinks.flex span.block { margin-bottom: 2rem !important; font-weight: 400; font-style: Regular; font-size: 8px !important; line-height: 100%; letter-spacing: 0%; vertical-align: middle; display: block; } .footer.section-footer .footer__container{ padding-left: 15px !important; padding-right: 15px !important; grid-column: unset !important; } footer.grid-container { grid-template-columns: 1fr !important; } .product-hero .product-hero__grid .product-hero__carousel .slick-dots>li { padding: 0px !important; } }