/* ───── extracted block 1 ───── */ /* Body font: inherit from the theme's --site-font custom property so this template works on ANY theme without hardcoding "Outfit". The build's buildFontStyles() pre-declares --site-font from the theme's primary font (typography config or theme default). Bootstrap (loaded earlier) sets body to var(--bs-body-font-family); we beat it on specificity by using body.product-elegant + !important on the actual value, which loads later in the cascade. */ body.product-elegant { font-family: var(--site-font, "Outfit", sans-serif) !important; } .pe-wrap { max-width: 1280px; margin: 0 auto; padding: 60px 24px; color: #1a1a1a; line-height: 1.6; } /* ── Breadcrumb trail ───────────────────────────────────────────── Small subtle row above the gallery + buy box. Aligned left, spans the full pe-top width so it sits over both columns. Chevron `›` separator between segments. Each segment except the current page is a link (gold-on-hover). For products with no categories the trail collapses to just "Flooring › "; populated with intermediate category names when categories[] is set. Renders in the site body font, sentence case, no letter-spacing — reads as normal prose, not a label band. */ .pe-crumbs { font-size: 13px; letter-spacing: 0; text-transform: none; color: #6b6b6b; margin-bottom: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pe-crumbs a { color: #6b6b6b; text-decoration: none; /* Underline on hover only (transparent border reserves the space, so the row doesn't shift). Matches the category hero's trail. */ border-bottom: 1px solid transparent; padding-bottom: 1px; transition: color .2s, border-color .2s; } .pe-crumbs a:hover { color: #1a1a1a; border-bottom-color: #a38c5f; } .pe-crumbs a:focus-visible { outline: 2px solid #a38c5f; outline-offset: 3px; border-radius: 2px; } .pe-crumbs .pe-crumbs-sep { color: #c8c0aa; font-size: 14px; letter-spacing: 0; } .pe-crumbs .pe-crumbs-current { color: #1a1a1a; font-weight: 500; } /* SIDE-GALLERY variant: info column on the LEFT, gallery floated to the RIGHT, with the thumbnails stacked VERTICALLY to the left of the hero. */ .pe-top { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; } .pe-info { order: 1; } .pe-gallery { order: 2; position: sticky; top: 24px; align-self: start; display: flex; gap: 12px; align-items: flex-start; } .pe-hero { flex: 1 1 auto; min-width: 0; aspect-ratio: 4/5; background: #f5f0e6; overflow: hidden; margin-bottom: 0; position: relative; cursor: zoom-in; } .pe-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; } .pe-hero img.active { opacity: 1; } /* Hover hint — dark tint + magnifying-glass pill labelled "Click to zoom". Clicking the hero opens the lightbox gallery (product.js's attachLightbox IIFE wires this up if it can find #mainImg — see the hidden span we render inside the hero further down). */ .pe-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.32); opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 6; } .pe-hero::after { content: "Click to zoom"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.92); background: rgba(255,255,255,.95); color: #1a1a1a; padding: 11px 20px 11px 42px; border-radius: 28px; font: 600 12px/1 -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: 16px center; background-size: 16px 16px; box-shadow: 0 8px 22px rgba(0,0,0,.22); opacity: 0; transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1); pointer-events: none; z-index: 7; } .pe-hero:hover::before { opacity: 1; } .pe-hero:hover::after { opacity: 1; transform: translate(-50%,-50%) scale(1); } @media (hover: none) { .pe-hero { cursor: pointer; } .pe-hero::before, .pe-hero::after { display: none; } } /* Flexbox instead of grid so the thumb row auto-resizes to fit any number of images on a single row (4, 5, 6 …) — wider products just give each thumb proportionally less width. min-width:0 lets the flex children shrink below their content-implied size. */ /* Vertical thumbnail column to the LEFT of the hero (order:-1 places it before the hero in the flex row). Fixed-width SQUARE thumbs, cropped. */ .pe-thumbs { order: -1; display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; width: 84px; } .pe-thumbs > div { flex: 0 0 auto; width: 84px; height: 84px; max-width: none; aspect-ratio: 1/1; overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .25s; } .pe-thumbs > div.active, .pe-thumbs > div:hover { opacity: 1; } .pe-thumbs img { width: 100%; height: 100%; object-fit: cover; } /* H1 inherits the site body font (set on body via var(--site-font)). Only weight + size + spacing are customised so the title still has editorial proportions without forcing a different font family. */ .pe-info h1 { font-weight: 300; font-size: 44px; letter-spacing: -.5px; margin-bottom: 10px; color: #1a1a1a; line-height: 1.1; } /* "Wood Flooring" / "Flooring" suffix chip — when the post-render splitter detects either keyword at the end of the H1, it adds .ewf-h1-split to the

and wraps the text in two spans. The main words keep their full editorial weight; the suffix becomes a pale-orange pill, on its own line, sized for visual hierarchy (≈40% of the H1's size). Self-contained — these rules only activate when the splitter found a match. */ .pe-info h1.ewf-h1-split { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .pe-info h1.ewf-h1-split .ewf-h1-main { /* inherits the h1 font/size — same big editorial heading. */ line-height: 1; } .pe-info h1.ewf-h1-split .ewf-h1-suffix { display: inline-block; font-size: 21px; font-weight: 400; font-style: italic; letter-spacing: .2px; line-height: 1.25; color: #6b6b6b; background: none; padding: 0; border-radius: 0; box-shadow: none; } /* (.pe-cat-tag eyebrow above the H1 was removed — picking a "first category" arbitrarily made no sense for products belonging to several. Tags chips below the buy box already list every category they belong to, with proper links.) */ /* Manufacturer line under the H1 — "Manufacturer: ". The brand links to its /cat/ page in the theme accent. Sits tight under the title, above the price. Hidden if empty (no manufacturer). */ /* 10px gap above (from the H1, whose margin-bottom is now 10px) and 10px below (to the product description). */ .pe-manufacturer { font-size: 14px; color: #555; margin: 0 0 10px; } .pe-manufacturer:empty { display: none; } .pe-manufacturer strong { color: #1a1a1a; font-weight: 600; } .pe-manufacturer a { color: #a38c5f; text-decoration: none; } .pe-manufacturer a:hover { text-decoration: underline; } .pe-price { font-size: 28px; color: #1a1a1a; margin: 18px 0; font-weight: 500; } .pe-price del { color: #999; font-size: 16px; margin-right: 12px; } .pe-desc { color: #555; font-size: 15px; margin-bottom: 24px; max-width: 480px; } .pe-desc p { margin: 0 0 12px; } .pe-desc p:last-child { margin-bottom: 0; } .pe-row { display: flex; gap: 14px; margin-bottom: 14px; } .pe-row > label { width: 100px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #888; padding-top: 10px; } .pe-row .opts { display: flex; gap: 8px; flex-wrap: wrap; } .pe-row .opts button { padding: 8px 14px; background: #fff; border: 1px solid #ddd; cursor: pointer; font-family: inherit; font-size: 13px; transition: all .2s; color: #1a1a1a; } .pe-row .opts button:hover { border-color: #1a1a1a; } .pe-row .opts button.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } /* Primary CTA row — quantity stepper + "Add to basket" pill. The stepper is a rounded pill matching the buy button's geometry so the two read as a paired control. */ .pe-cta { display: flex; gap: 14px; margin: 30px 0 14px; align-items: stretch; } .pe-qty { display: inline-flex; align-items: center; border: 1px solid #1a1a1a; border-radius: 40px; overflow: hidden; background: #fff; } .pe-qty button { width: 42px; height: 100%; background: transparent; border: 0; cursor: pointer; font-size: 18px; color: #1a1a1a; transition: background .2s ease; } .pe-qty button:hover { background: rgba(254, 133, 0, .08); } .pe-qty input { width: 44px; text-align: center; border: 0; padding: 12px 0; font: inherit; background: transparent; color: #1a1a1a; -moz-appearance: textfield; } .pe-qty input::-webkit-outer-spin-button, .pe-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Stack the two CTAs (Add to basket + Install this floor for me) so the primary action sits on top with the qty selector, and the secondary CTA fills the row below. Both pills mirror the theme's .quote-btn / .pricing-btn styling — orange pill that white-fills on hover with a rotating arrow icon. */ .pe-cta-stack { display: flex; flex-direction: column; gap: 12px; margin: 30px 0 14px; } .pe-cta-stack .pe-cta { margin: 0; } /* The two CTA pills (`.quote-btn` "Add to basket" + `.quote-btn .pricing-btn` "Install this floor for me") inherit ALL visuals (orange pill, white-fill-on-hover, native-size arrow-cross icon that rotates 45° and re-tints orange on hover) from the theme's global .quote-btn / .pricing-btn rules in style.css. We only add layout overrides here: • .pe-buy { flex: 1 } so the primary pill fills the row next to the rounded qty stepper. • .quote-btn { line-height: 1.2 } so the pill height stays comparable to the qty stepper (the theme default 24px line height makes the pill noticeably taller). Reusing the theme classes means future tweaks to .quote-btn / .pricing-btn show up here automatically — no drift. */ /* Theme's .quote-btn is `display: inline-block` — children align on the text baseline, which leaves the arrow sitting below the text. Switching to inline-flex with align-items: center puts the text and the icon on the same horizontal cross-axis so both look properly centred inside the pill, regardless of icon size or font metrics. */ .pe-cta .quote-btn, .pe-install { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; line-height: 1; } .pe-cta .quote-btn { flex: 1; } /* .pricing-btn defaults to margin-top: 30px in the theme — the 12px gap on the parent flex-column already gives the spacing we want, so zero out the inherited margin. */ .pe-install { margin-top: 0; } /* Once the pill is a flex container, the arrow img doesn't need its theme `margin-left: 10px` (replaced by the parent's gap) and definitely doesn't need a vertical nudge — flex centres perfectly. */ .pe-cta .quote-btn .arrow, .pe-install .arrow { margin: 0; vertical-align: baseline; display: block; } /* (.pe-meta editorial block removed; will return as a configurable shop-policy snippet driven from Site Config.) */ /* Tags + Key Features both render as a row of outline chips, with a small Title-Case label sitting INLINE on the left (not stacked above). Wrap: when the chips overflow the line they wrap as a group beneath the label, which itself stays anchored top-left. Labels are normal-cased — no UPPERCASE, no wide letter-spacing — to match the editorial body type. Chip text is vertically centered using inline-flex so every chip (and the label) sits on the same baseline regardless of font metrics. */ .pe-tags { padding: 18px 0 4px; } .pe-tags-label { font-size: 13px; color: #888; font-weight: 500; line-height: 32px; } .pe-tags-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; row-gap: 8px; } .pe-tag-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border: 1px solid #ece6d8; border-radius: 999px; font-size: 12px; color: #555; text-decoration: none; line-height: 1; /* prevent descenders shifting baseline */ transition: border-color .2s, color .2s, background .2s; } .pe-tag-chip:hover { border-color: #a38c5f; color: #a38c5f; background: #fbf7ee; } .pe-tags-more { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: transparent; border: 1px solid #ece6d8; color: #a38c5f; cursor: pointer; font: inherit; font-size: 16px; font-weight: 700; padding: 0 0 4px; transition: background .2s, transform .25s ease, opacity .2s; } .pe-tags-more:hover { background: #fbf7ee; } .pe-tags-more.open { transform: rotate(90deg); opacity: .5; } .pe-tags-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .4s ease, margin-top .4s ease; } .pe-tags-extra.open { max-height: 240px; opacity: 1; } /* Related-products rail */ .pe-related { margin-top: 80px; padding-top: 40px; border-top: 1px solid #ece6d8; } .pe-related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; } .pe-related h2 { font-weight: 300; font-size: 30px; letter-spacing: -.3px; color: #1a1a1a; } .pe-related-nav { display: flex; gap: 8px; } .pe-related-nav button { width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1px solid #ece6d8; cursor: pointer; color: #888; font-size: 14px; transition: background .2s, color .2s, border-color .2s; } .pe-related-nav button:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; } .pe-related-rail-wrap { position: relative; } .pe-related-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc(25% - 18px); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding-bottom: 6px; } .pe-related-rail::-webkit-scrollbar { display: none; } .pe-rel-card { scroll-snap-align: start; cursor: pointer; text-decoration: none; color: inherit; display: block; } .pe-rel-thumb { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #f5f0e6; } .pe-rel-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .pe-rel-card:hover .pe-rel-thumb img { transform: scale(1.04); } .pe-rel-label { position: absolute; top: 12px; left: 12px; background: #a38c5f; color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 10px; z-index: 2; } .pe-rel-cart { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 12px); opacity: 0; background: #1a1a1a; color: #fff; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 20px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity .25s ease, transform .25s ease, background .2s ease; white-space: nowrap; } .pe-rel-cart:hover { background: #a38c5f; } .pe-rel-card:hover .pe-rel-cart { opacity: 1; transform: translate(-50%, 0); } .pe-rel-body { padding: 14px 4px 6px; } .pe-rel-body h3 { font-size: 17px; font-weight: 400; color: #1a1a1a; margin-bottom: 4px; letter-spacing: -.2px; } .pe-rel-body .pe-rel-price { font-size: 15px; color: #a38c5f; font-weight: 500; } /* Pad below the fixed top header so the hero doesn't tuck under it. */ body.product-elegant .pe-wrap { padding-top: 150px; } @media (max-width: 880px) { .pe-top { grid-template-columns: 1fr; gap: 32px; } /* Stacked: show the gallery first (image-first), info below. */ .pe-gallery { position: static; order: 0; } .pe-info { order: 1; } .pe-related-rail { grid-auto-columns: calc(60% - 12px); } .pe-info h1 { font-size: 34px; } } @media (max-width: 540px) { .pe-related-rail { grid-auto-columns: calc(85% - 6px); } } /* ───── extracted block 2 ───── */ /* ── Wood-flooring spec sections (Elegant retheme) ─────────────────── Restyles the same {{TEMPLATE_SECTIONS_*}} markup product--wood-flooring uses, in the Elegant palette: serif section titles, hairline horizontal rules, light 2-column spec tables, oiled-wood gold accent. Editor's intent: this template carries the FULL Kährs spec block (dimensions, design, construction, facts, hardness, package, identifiers) like the standard Wood Flooring template, but in the editorial Elegant skin. */ /* ── lightGallery (lightbox) overrides ────────────────────────────── Restyle the prev/next arrows so they look like the hero slider's square white-on-orange buttons (.sec-one-slider-btn + .NextArrow / .PrevArrow) and force the slide direction to match the natural "click right → new image slides in from the right" expectation. These rules live on the product page (not in the bundled lightgallery.min.css) so the lightbox picks them up via cascade order: the lightGallery CSS loads first, ours overrides. */ body.product-elegant-wf .lg-actions .lg-prev, body.product-elegant-wf .lg-actions .lg-next { /* Round white tile — same hero-slider colour scheme (white tile, orange-gradient on hover) but rendered as a perfect circle so it reads as a floating control distinct from any squared page-furniture. */ width: 56px; height: 56px; padding: 0; margin-top: -28px; /* keep vertically centred (lg default uses -10) */ background: #fff; color: transparent; /* hide the lg pseudo-icon glyph */ border: 0; border-radius: 50%; box-shadow: none; transition: background .25s ease, transform .15s ease; display: flex; align-items: center; justify-content: center; font-size: 0; } body.product-elegant-wf .lg-actions .lg-prev:hover, body.product-elegant-wf .lg-actions .lg-next:hover { background: linear-gradient(135deg, #FE8500 0%, #d57000 100%); transform: scale(1.05); } /* Hide lightGallery's built-in glyph (Pictonic icon font) — we draw our own arrow with a CSS background image instead. */ body.product-elegant-wf .lg-actions .lg-prev:after, body.product-elegant-wf .lg-actions .lg-prev:before, body.product-elegant-wf .lg-actions .lg-next:after, body.product-elegant-wf .lg-actions .lg-next:before { content: none !important; } body.product-elegant-wf .lg-actions .lg-prev::before, body.product-elegant-wf .lg-actions .lg-next::before { content: "" !important; display: block; width: 36px; height: 36px; background-repeat: no-repeat; background-position: center; background-size: contain; transition: background-image .25s ease; } /* Paths are relative to THIS CSS file (which lives at /css/), not the page that loads it. %ROOT% is an HTML-only build placeholder and is NOT resolved inside CSS — using it here left the arrows blank because the browser fetched the literal `%ROOT%assets/...` URL. */ body.product-elegant-wf .lg-actions .lg-prev::before { background-image: url('../assets/images/svg/left-arrow.svg'); } body.product-elegant-wf .lg-actions .lg-next::before { background-image: url('../assets/images/svg/right-arrow.svg'); } body.product-elegant-wf .lg-actions .lg-prev:hover::before { background-image: url('../assets/images/svg/left-white-arrow.svg'); } body.product-elegant-wf .lg-actions .lg-next:hover::before { background-image: url('../assets/images/svg/right-white-arrow.svg'); } /* Slide direction — when the user clicks the right (next) arrow, lightGallery v1 assigns: • old-current → .lg-prev-slide • new-image → .lg-next-slide The expected film-reel feel for a "next" click is: old image exits to the LEFT and the new image arrives from the RIGHT. (Same on wrap-around — last → first should feel identical to any other forward step, NOT slide in from the opposite side.) So we pin lg-next-slide at the off-screen RIGHT edge (so a new image lands there at-rest and then animates into view) and lg-prev-slide at the off-screen LEFT edge (so the old image exits leftwards). !important defeats the cascade order of the bundled lightgallery.min.css. */ body.product-elegant-wf .lg-outer .lg-prev-slide { left: -100% !important; transform: translate3d(-100%, 0, 0) !important; } body.product-elegant-wf .lg-outer .lg-next-slide { left: 100% !important; transform: translate3d(100%, 0, 0) !important; } body.product-elegant-wf .lg-outer .lg-current { left: 0 !important; transform: translate3d(0, 0, 0) !important; } /* ── Dimensions block ────────────────────────────────────────── Sits at the BOTTOM of the right info column, below the Install button + Tags row. Pulled out of the tab strip by the post-render JS so it doesn't appear twice. Same tabulated label/value layout as the tab panes — header bar + zebra rows. */ body.product-elegant-wf .pe-dimensions { margin-top: 24px; padding-top: 24px; border-top: 1px solid #ece6d8; } body.product-elegant-wf .pe-dimensions:empty { display: none; } body.product-elegant-wf .pe-dimensions h2 { font-weight: 600; font-size: 15px; letter-spacing: 0; text-transform: none; color: #1a1a1a; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #ece6d8; } body.product-elegant-wf .pe-dimensions .prod-spec-table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 1px solid #f1ead9; border-radius: 6px; overflow: hidden; } body.product-elegant-wf .pe-dimensions .prod-spec-table tr:nth-child(even) { background: #faf6ec; } body.product-elegant-wf .pe-dimensions .prod-spec-table th { /* 10px left padding so the row label sits inside the panel edge rather than flush against the border — applies to both the zebra-striped (even) and flat (odd) rows. Universal across all wood-flooring product pages (Kährs + Parador). */ padding: 10px 12px 10px 10px; text-align: left; vertical-align: top; font-size: 13px; font-weight: 400; color: #6b6b6b; width: 50%; } body.product-elegant-wf .pe-dimensions .prod-spec-table td { padding: 10px 10px 10px 10px; font-size: 14px; font-weight: 500; color: #1a1a1a; text-align: left; vertical-align: top; } /* ── Key Features chip row ───────────────────────────────────────── Sits ABOVE the spec tabs. Visually identical to the Tags row in the right-hand buy-box column: small uppercase eyebrow label ("Key Features") sitting inline with outline-pill chips, all wrapping together. Non-clickable (no link, no hover) since these are descriptive marketing labels (Real Wood, Suitable UFH, Made in Sweden …), not navigable taxonomy. Empty (display:none) when no features. */ /* Spacing in the buy-box column: small gap above (so it separates from the Install button + msg), with a thin border-top to echo the same visual rhythm the rest of the column uses to group sections. */ body.product-elegant-wf .pe-keyfeats { margin-top: 18px; padding-top: 18px; border-top: 1px solid #ece6d8; } body.product-elegant-wf .pe-keyfeats:empty { display: none; } body.product-elegant-wf .pe-keyfeats-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; row-gap: 8px; } /* Differentiated from .pe-tags-label: same normal-cased Title-Case text (no UPPERCASE, no wide letter-spacing) but BOLD + theme orange so it reads as a feature callout, not an editorial eyebrow. */ body.product-elegant-wf .pe-keyfeats-label { font-size: 13px; color: #FE8500; font-weight: 700; line-height: 32px; } /* Key Feature chips: orange text + orange border so they pop next to the muted Tag chips. Same dimensions as .pe-tag-chip so both rows align visually. Non-clickable (no link, no hover state), `line-height: 1` + inline-flex centering = text sits exactly centred vertically inside the chip. */ body.product-elegant-wf .pe-keyfeats-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border: 1px solid #FE8500; border-radius: 999px; font-size: 12px; color: #FE8500; line-height: 1; font-weight: 500; background: transparent; } /* ── Recommended Accessories cards ───────────────────────────────── Card grid that lives INSIDE a tab pane (no longer a freestanding section below the tabs). The .pe-accs-grid layout is unchanged but the outer .pe-accs wrapper sits flat inside the pane so the tab's existing padding/margin handles spacing — no extra border- top, no top margin. */ body.product-elegant-wf .pe-accs { margin: 0; } body.product-elegant-wf .pe-accs:empty { display: none; } body.product-elegant-wf .pe-accs-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } body.product-elegant-wf .pe-acc { /* Card is now image-on-top + body-below — flex column so the image and the text content sit cleanly stacked with consistent gutter. */ display: flex; flex-direction: column; background: #fbfaf6; border: 1px solid #ece6d8; border-radius: 8px; overflow: hidden; /* clip the image's top corners */ text-decoration: none; color: inherit; transition: border-color .2s ease, transform .15s ease, box-shadow .25s ease; } body.product-elegant-wf a.pe-acc:hover { border-color: #a38c5f; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(163, 140, 95, .15); } /* Image header: 1:1 ratio thumbnail, centred & cover-fitted so cards stay uniform regardless of source aspect ratio. Pale neutral backdrop in case the source image has transparency. */ body.product-elegant-wf .pe-acc-img { aspect-ratio: 4/3; background: #f0ebe0; overflow: hidden; } body.product-elegant-wf .pe-acc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .35s ease; } body.product-elegant-wf a.pe-acc:hover .pe-acc-img img { transform: scale(1.04); } /* Body sits below the image with consistent padding. */ body.product-elegant-wf .pe-acc-body { padding: 16px 20px 20px; } /* Category eyebrow — small, uppercase, oiled-wood gold so it reads as a section label above the product name. */ body.product-elegant-wf .pe-acc-cat { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #a38c5f; margin-bottom: 6px; } body.product-elegant-wf .pe-acc h3 { font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 0 0 8px; letter-spacing: .5px; text-transform: uppercase; } body.product-elegant-wf .pe-acc p { font-size: 14px; color: #555; line-height: 1.55; margin: 0 0 14px; } body.product-elegant-wf .pe-acc .pe-acc-price { font-size: 18px; color: #a38c5f; font-weight: 600; } body.product-elegant-wf .pe-acc .pe-acc-note { display: block; font-size: 11px; color: #888; font-weight: 400; margin-top: 2px; letter-spacing: .3px; } /* Hide accessory prices site-wide when build sets the .shop-hide-accessory-prices body class (driven by cfg.shop.showAccessoryPrices in the site config — defaults to hidden). Data is still scraped + stored, just not displayed — a single config flip restores the price block without re-crawling anything. */ body.shop-hide-accessory-prices.product-elegant-wf .pe-acc .pe-acc-price { display: none; } /* ── Wood-flooring spec sections as TABS ─────────────────────────── The {{TEMPLATE_SECTIONS_*}} HTML emits a list of
s (Dimensions / Design / Construction & Install / Facts / Hardness / Package / Identifiers + long-form prose blocks like More Details and Colour Evolution). Inline JS in the template wraps them in a tab interface: a horizontal row of buttons + a single visible pane at a time, with a cross-fade between panes. The first section is active on first paint; clicking a tab switches focus. Inherits the site body font — no Georgia. */ body.product-elegant-wf .pe-specs { margin-top: 60px; padding-top: 40px; border-top: 1px solid #ece6d8; } /* Tab nav — a single horizontal row that scrolls sideways when there are too many tabs to fit. The wrapper holds left/right arrow buttons that appear only when the scroll rail can actually scroll; clicking an arrow scrolls the rail by ~one tab-width at a time. */ body.product-elegant-wf .pe-tabs-nav-wrap { position: relative; border-bottom: 1px solid #ece6d8; margin-bottom: 28px; } body.product-elegant-wf .pe-tabs-nav { display: flex; flex-wrap: nowrap; /* single row — overflow scrolls */ gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* hide scrollbar — arrows handle it */ scroll-behavior: smooth; } body.product-elegant-wf .pe-tabs-nav::-webkit-scrollbar { display: none; } body.product-elegant-wf .pe-tabs-nav button { appearance: none; background: transparent; border: 0; margin: 0; padding: 14px 22px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #8a8377; /* clearly muted inactive */ white-space: nowrap; flex: 0 0 auto; /* don't shrink — let the row scroll */ border-bottom: 2px solid transparent; margin-bottom: -1px; /* overlap the container's bottom border */ transition: color .2s ease, border-color .2s ease, background .2s ease; } body.product-elegant-wf .pe-tabs-nav button:hover { color: #1a1a1a; background: rgba(163, 140, 95, .06); } body.product-elegant-wf .pe-tabs-nav button.active { color: #1a1a1a; font-weight: 600; border-bottom-color: #a38c5f; background: rgba(163, 140, 95, .08); } /* Left / right arrow buttons — solid black circle with a white chevron. Vertically centred on the tab row, pinned to the rail's edges. Hover / focus / active state flips to orange bg with a black chevron, mirroring the hero-slider arrow behaviour. Shown only when JS detects the rail can scroll (.has-overflow on the wrap) — desktop with all tabs visible doesn't need them. */ body.product-elegant-wf .pe-tabs-nav-wrap { padding: 0 48px; /* leave room for the circular arrows */ } body.product-elegant-wf .pe-tabs-arrow { appearance: none; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #1a1a1a; color: #fff; border: 0; cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1; display: none; /* shown when .has-overflow on wrap */ align-items: center; justify-content: center; padding: 0; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: background .2s ease, color .2s ease, transform .15s ease, opacity .2s ease; } body.product-elegant-wf .pe-tabs-arrow.pe-tabs-arrow-prev { left: 4px; } body.product-elegant-wf .pe-tabs-arrow.pe-tabs-arrow-next { right: 4px; } body.product-elegant-wf .pe-tabs-arrow:hover:not([disabled]), body.product-elegant-wf .pe-tabs-arrow:focus-visible:not([disabled]), body.product-elegant-wf .pe-tabs-arrow:active:not([disabled]) { background: #FE8500; color: #1a1a1a; transform: translateY(-50%) scale(1.05); outline: none; } body.product-elegant-wf .pe-tabs-nav-wrap.has-overflow .pe-tabs-arrow { display: flex; } /* Disabled state — arrow when there's nothing left to scroll that way. */ body.product-elegant-wf .pe-tabs-arrow[disabled] { opacity: .35; cursor: default; box-shadow: none; } /* Tab pane wrapper — relative so we can cross-fade panes by toggling their .active class. Inactive panes set to opacity 0 + visibility hidden + max-height 0 so they disappear without leaving a gap. */ body.product-elegant-wf .pe-tabs-pane { opacity: 0; visibility: hidden; max-height: 0; overflow: hidden; transition: opacity .3s ease, visibility 0s linear .3s, max-height 0s linear .3s; } body.product-elegant-wf .pe-tabs-pane.active { opacity: 1; visibility: visible; max-height: none; transition: opacity .3s ease, visibility 0s linear 0s, max-height 0s linear 0s; } /* Spec table inside a pane — clean tabulated label/value rows with subtle zebra stripes and a fixed label column width. */ body.product-elegant-wf .pe-tabs-pane h2 { display: none; } /* nav already shows the title */ body.product-elegant-wf .pe-tabs-pane .prod-spec-table { width: 100%; max-width: 720px; border-collapse: collapse; table-layout: fixed; /* Subtle outer frame so the table reads as one block. */ border: 1px solid #f1ead9; border-radius: 6px; overflow: hidden; } body.product-elegant-wf .pe-tabs-pane .prod-spec-table tr { border-bottom: 1px solid #f3eee2; } body.product-elegant-wf .pe-tabs-pane .prod-spec-table tr:last-child { border-bottom: 0; } /* Zebra stripes — alternating off-white background on even rows so dense sections like Design are easy to scan. */ body.product-elegant-wf .pe-tabs-pane .prod-spec-table tr:nth-child(even) { background: #faf6ec; } body.product-elegant-wf .pe-tabs-pane .prod-spec-table th { /* 10px left padding on every row — applied to both the zebra- striped (even) rows and the flat (odd) rows so the cell text no longer sits flush against the panel edge. Universal across all wood-flooring product pages (Kährs + Parador alike). */ padding: 12px 16px 12px 10px; text-align: left; vertical-align: top; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #6b6b6b; width: 40%; min-width: 160px; } body.product-elegant-wf .pe-tabs-pane .prod-spec-table td { padding: 12px 10px 12px 10px; font-size: 14px; font-weight: 500; color: #1a1a1a; letter-spacing: 0; text-transform: none; text-align: left; vertical-align: top; word-wrap: break-word; } /* Long-form prose blocks (More Details, Colour Evolution, Design Features) — readable paragraph blocks inside their own panes. */ body.product-elegant-wf .pe-tabs-pane.is-prose { max-width: 820px; color: #444; line-height: 1.7; } body.product-elegant-wf .pe-tabs-pane.is-prose p { margin: 0 0 14px; font-size: 15px; } body.product-elegant-wf .pe-tabs-pane.is-prose p:last-child { margin-bottom: 0; } @media (max-width: 600px) { body.product-elegant-wf .pe-tabs-nav button { padding: 12px 16px; font-size: 13px; } body.product-elegant-wf .pe-tabs-pane .prod-spec-table th { min-width: 120px; } }