/* ========================================================================= iSupply Displays — single product Loaded only on product screens, after style.css (and therefore after kadence-global and Kadence's Customizer CSS), so plain selectors here beat theme defaults. The few !important marks are annotated with the rule they are fighting. ISD_Single::full_width_layout() asks Kadence for `fullwidth` + `unboxed` + no vertical padding, which removes the parent's 1290px container, white card and wrapper margins. This sheet then gives the product screen its deliberate 1450px maximum while retaining fluid small-screen gutters inside each band. ====================================================================== */ /* Match the site's established non-product typography without adding a remote font request. Both families are variable fonts already shipped by the child theme, so the intermediate weights used below remain native. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/archivo-latin-variable.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/inter-latin-variable.woff2") format("woff2"); } /* * Tokens are scoped to the body, not to .isd-single, because two things that * need them sit outside that element: Kadence's breadcrumb, which is printed * on woocommerce_before_single_product and so lands before .product, and the * full screen viewer, which isd-single.js appends to . Scoped to * .isd-single both would resolve every var() to nothing. */ body.single-product { --isd-body-font: "Inter", Arial, sans-serif; --isd-heading-font: "Archivo", Arial, sans-serif; --isd-navy: #0a315f; --isd-primary-blue: var(--opt1-blue, #1769ff); --isd-primary-blue-dark: var(--opt1-blue-dark, #084fcc); --isd-band: #ececec; --isd-ink: #1a2a4a; --isd-muted: #5c6b81; --isd-line: #e2e6ec; --isd-tile: #f4f5f7; --isd-gutter: clamp(20px, 3vw, 64px); --isd-ease: cubic-bezier(0.4, 0, 0.2, 1); --isd-prose: 78ch; --isd-sticky-top: 24px; --isd-rail-w: 112px; /* * The spotlight is square, so its height is its width. Capping both to the * usable viewport height is what lets the media column be sticky without * any part of it becoming unreachable, and it is why the stage no longer * stretches to whatever the column happens to be. */ --isd-stage-max: calc(100vh - var(--isd-sticky-top) - 64px); } /* Keep the complete product experience, including breadcrumbs and notices, within the requested 1450px page measure. This out-specifies Kadence's full-width max-width:none rule without affecting any other content type. */ body.single-product .content-container.site-container { width: 100%; max-width: 1450px; margin-inline: auto; padding-inline: 0; font-family: var(--isd-body-font); } /* Keep the typography contract within the product-page content. Site chrome remains governed by the global Kadence typography used everywhere else. */ body.single-product .content-container.site-container :is(h1, h2, h3, h4, h5, h6), .isd-accordion__summary { font-family: var(--isd-heading-font); text-transform: uppercase; } body.single-product .content-container.site-container :is(button, input, select, textarea) { font-family: var(--isd-body-font); } @media (max-width: 1024px) { body.single-product { /* Stacked layout: nothing is sticky, so the square can simply fill the column. */ --isd-stage-max: none; --isd-rail-w: 88px; } } /* ------------------------------------------------------------------------- Bands Each band fills the constrained product parent and owns its responsive inner edge padding. ---------------------------------------------------------------------- */ .isd-band, .isd-section__inner { padding-inline: var(--isd-gutter); } /* * Kadence prints the product breadcrumb from output_product_above(), hooked to * woocommerce_before_single_product — which this template fires, so it lands * as a sibling before .product rather than inside it. With the container gone * it would sit hard against the viewport edge without this. */ body.single-product .product-title.product-above { padding: 20px var(--isd-gutter) 0; } .isd-single__crumbs { padding-top: 20px; } .isd-single__crumbs:empty { display: none; } body.single-product.content-vertical-padding-hide .kadence-breadcrumbs { margin-top: 0; } body.single-product .kadence-breadcrumbs, body.single-product .kadence-breadcrumbs a, body.single-product .kadence-breadcrumbs a:visited, body.single-product .kadence-breadcrumbs a:hover, body.single-product .kadence-breadcrumbs a:focus { color: var(--isd-navy); } body.single-product .kadence-breadcrumbs a, body.single-product .kadence-breadcrumbs a:focus, body.single-product .kadence-breadcrumbs a:focus-visible { text-decoration: none; } body.single-product .kadence-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 0.14em; } body.single-product .kadence-breadcrumbs a:focus-visible { outline: 2px solid var(--isd-primary-blue); outline-offset: 2px; } body.single-product .kadence-breadcrumbs .bc-delimiter { display: inline-flex; align-items: center; margin-inline: clamp(6px, 0.65vw, 9px); color: var(--isd-primary-blue); vertical-align: middle; line-height: 1; } body.single-product .kadence-breadcrumbs .bc-delimiter svg { display: block; width: 0.8em; height: 0.8em; } body.single-product .kadence-breadcrumbs .kadence-bread-current { color: var(--isd-navy); font-weight: 700; } /* ------------------------------------------------------------------------- Two column body ---------------------------------------------------------------------- */ .isd-single__top { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); gap: clamp(16px, 1.5vw, 28px); align-items: start; padding-block: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); } @media (max-width: 1024px) { .isd-single__top { grid-template-columns: minmax(0, 1fr); gap: 32px; } } .isd-single__media { position: relative; min-width: 0; /* The column keeps its full height so the inner block has something to stick against; align-items: start would otherwise collapse it. */ align-self: stretch; } .isd-single__summary { min-width: 0; align-self: stretch; } /* * Only the shorter desktop column sticks within the shared grid row. If it * exceeds the viewport, it scrolls until its bottom is visible before sticking. */ @media (min-width: 1025px) { .isd-single__top.is-media-sticky .isd-single__media-inner { position: sticky; top: var(--isd-media-sticky-top, var(--isd-sticky-top)); } .isd-single__top.is-summary-sticky .isd-single__summary-inner { position: sticky; top: var(--isd-summary-sticky-top, var(--isd-sticky-top)); } } /* ------------------------------------------------------------------------- Why Choose Product-authored prose and existing product media below the complete media/summary row. No generated feature cards or bullet columns are added. ---------------------------------------------------------------------- */ .isd-single__why-choose { width: 100%; padding-block: clamp(48px, 6vw, 84px); } .isd-single__why-choose-inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); gap: clamp(36px, 5vw, 72px); align-items: center; width: 100%; margin: 0; } .isd-single__why-choose-inner.is-without-media { grid-template-columns: minmax(0, 1fr); } .isd-single__why-choose-copy { min-width: 0; } .isd-single__why-choose-inner.is-without-media .isd-single__why-choose-copy { max-width: var(--isd-prose); } .isd-single__why-choose-eyebrow { display: flex; align-items: center; gap: 18px; margin: 0 0 18px; color: var(--isd-muted); font-family: var(--isd-heading-font); font-size: 13px; font-weight: 800; letter-spacing: 0.24em; line-height: 1.2; text-transform: uppercase; } .isd-single__why-choose-eyebrow::after { width: 58px; height: 2px; background: var(--isd-primary-blue); content: ""; } .isd-single__why-choose-title, .isd-single__why-choose-content :is(h2, h3, h4) { font-family: var(--isd-heading-font); font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--isd-ink); } .isd-single__why-choose-title { margin: 0 0 22px; font-size: clamp(2rem, 3.7vw, 3.25rem); letter-spacing: -0.035em; line-height: 1.08; } .isd-single__why-choose-content { font-size: clamp(16px, 1.45vw, 18px); font-weight: 400; line-height: 1.7; color: var(--isd-muted); } .isd-single__why-choose-content > :first-child { margin-top: 0; } .isd-single__why-choose-content > :last-child { margin-bottom: 0; } .isd-single__why-choose-content :is(h2, h3, h4) { margin: 1.6em 0 0.6em; } .isd-single__why-choose-content h2 { font-size: clamp(1.35rem, 2vw, 1.65rem); } .isd-single__why-choose-content h3 { font-size: clamp(1.2rem, 1.8vw, 1.4rem); } .isd-single__why-choose-content h4 { font-size: 1.1rem; } .isd-single__why-choose-content :is(p, ul, ol, blockquote) { margin: 0 0 1em; } .isd-single__why-choose-content :is(ul, ol) { padding-left: 1.4em; } .isd-single__why-choose-content li + li { margin-top: 0.4em; } .isd-single__why-choose-content a { color: var(--isd-navy); text-decoration: underline; text-underline-offset: 0.16em; } .isd-single__why-choose-content strong { font-weight: 700; } .isd-single__why-choose-content blockquote { padding-left: 1em; border-left: 3px solid var(--isd-line); } .isd-single__why-choose-cta { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 56px; margin-top: 22px; padding: 14px 30px; border: 1px solid var(--isd-primary-blue); border-radius: 999px; background: var(--isd-primary-blue); box-shadow: 0 12px 28px rgba(10, 49, 95, 0.14); color: #fff; font-family: var(--isd-body-font); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; text-align: center; text-decoration: none; transition: background-color 0.2s var(--isd-ease), border-color 0.2s var(--isd-ease), box-shadow 0.2s var(--isd-ease), transform 0.2s var(--isd-ease); } .isd-single__why-choose-cta:hover, .isd-single__why-choose-cta:focus { border-color: var(--isd-primary-blue-dark); background: var(--isd-primary-blue-dark); color: #fff; transform: translateY(-2px); } .isd-single__why-choose-cta:visited { color: #fff; } .isd-single__why-choose-cta:focus-visible { outline: 3px solid var(--isd-primary-blue); outline-offset: 3px; } .isd-single__why-choose-cta .kadence-svg-iconset, .isd-single__why-choose-cta .kadence-svg-icon { display: block; width: 18px; height: 18px; flex: 0 0 auto; } .isd-single__why-choose-media { display: flex; align-items: center; justify-content: center; min-width: 0; aspect-ratio: 4 / 3; background: radial-gradient(circle at 54% 42%, rgba(10, 49, 95, 0.055), transparent 55%), linear-gradient(145deg, rgba(247, 249, 252, 0.5), rgba(255, 255, 255, 0)); } .isd-single__why-choose-image { display: block; width: 100%; height: 100%; object-fit: contain; } @media (max-width: 1024px) { .isd-single__why-choose-inner { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 48px); } .isd-single__why-choose-copy { max-width: var(--isd-prose); } .isd-single__why-choose-media { width: min(100%, 760px); margin-inline: auto; } } @media (max-width: 560px) { .isd-single__why-choose-eyebrow { gap: 14px; font-size: 12px; } .isd-single__why-choose-eyebrow::after { width: 44px; } .isd-single__why-choose-title { font-size: clamp(1.8rem, 9vw, 2.4rem); } .isd-single__why-choose-cta { width: 100%; } .isd-single__why-choose-media { aspect-ratio: 5 / 4; } } /* ------------------------------------------------------------------------- Kadence WooCommerce reset The gallery deliberately carries WooCommerce's own class names — `images`, `flex-control-nav` / `flex-control-thumbs`, `woocommerce-product-gallery*`, `wp-post-image` — because that is how the variation script finds and swaps the product image. See ISD_Gallery for the contract. Those are also precisely the names Kadence's 141kb woocommerce.min.css styles for the native two-column, flexslider gallery, at specificities this sheet cannot beat with plain class selectors. Every rule below neutralises one named Kadence rule; the selectors are built to out-specify it rather than reaching for !important. Each is annotated with what it is undoing and what that rule did to this layout. If Kadence's stylesheet changes, re-derive this list rather than adding to it blindly: scan woocommerce.min.css for rules whose rightmost compound is one of the class names above. ---------------------------------------------------------------------- */ /* * `.woocommerce div.product div.images { float:left; width:48% }` * — the gallery is a grid item here, so 48% simply made the spotlight a bit * under half the width it should be. This was the small image. * Also `{ margin-bottom:1em; padding-bottom:1em }`. */ .woocommerce div.product div.images.isd-gallery { float: none; width: 100%; margin: 0; padding: 0; } /* * `.woocommerce div.product div.images img { height:auto; margin:0 auto }` * — forced the spotlight image to its intrinsic height, so it never filled * the square stage. */ .woocommerce div.product div.images.isd-gallery .isd-gallery__image { height: 100%; margin: 0; } /* * `... .woocommerce-product-gallery__wrapper { transition: all … .5s }` plus a * clearfix `::after`. The transition on `all` animated our own layout changes; * the clearfix added a stray table box inside the stage. */ .woocommerce div.product div.images.isd-gallery .isd-gallery__viewport { height: 100%; transition: none; } .woocommerce div.product div.images.isd-gallery .isd-gallery__viewport::after { content: none; } /* * `... .flex-control-thumbs { display:inline-flex; flex-wrap:wrap; width:100%; * max-width:94%; position:relative; left:50%; transform:translate(-50%,0); * margin-top:-32px; overflow:hidden; justify-content:center }` * — this is the native horizontal thumbnail strip. Against a vertical rail it * wrapped the thumbnails into extra columns, shifted the whole list sideways * by half its width, and pulled it up over the spotlight. */ .woocommerce div.product div.images.isd-gallery .isd-gallery__rail { display: flex; flex-wrap: nowrap; justify-content: flex-start; width: auto; max-width: none; margin: 0; padding: 0; transform: none; left: auto; /* * These three have to live at this specificity, not on the plain * .isd-gallery__rail rule: Kadence sets `position: relative` and * `overflow: hidden` on the same selector. Losing `position` would leave * the rail in flow, so it would size the grid row instead of being sized * by it — the spotlight-height behaviour depends on this. Losing * `overflow` would clip the extra thumbnails instead of scrolling them. */ position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; } /* * `... .flex-control-thumbs li { width:60px; height:65px; display:inline-flex; * background:… }`, plus `:first-child` and `:nth-child(6|7|9)` variants that * set `width:65px; padding-left:5px`. The fixed 60/65px box is what pinned the * thumbnails to one size, and the nth-child rules are what pushed individual * thumbnails out of line with the rest. */ .woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb { display: block; width: auto; height: auto; padding: 0; background: none; } /* * `... .flex-control-thumbs li img { opacity:.5; border-top:5px solid; * border-right:5px solid }` and its `:hover` / `.flex-active` pair at a * specificity above ours — the borders cropped the thumbnails and the opacity * fought this sheet's own active state. */ .woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb img { border: 0; margin: 0; opacity: 0.72; /* * `.woocommerce div.product div.images img { height: auto }` also wins * against the plain thumbnail rule, which left every rail image at its * intrinsic height instead of filling its square. */ width: 100%; height: 100%; object-fit: cover; } .woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb .isd-gallery__thumb-btn:hover img, .woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.is-active .isd-gallery__thumb-btn img, .woocommerce div.product div.images.isd-gallery .isd-gallery__rail li.isd-gallery__thumb.is-active img { opacity: 1; } /* * `.woocommerce div.product div.summary { float:right; width:48%; clear:none; * margin-bottom:2em }` — the same 48% applied to the summary column, which is * what left the empty band down the right of the page. */ .woocommerce div.product div.summary.isd-single__summary { float: none; width: 100%; margin-bottom: 0; } /* * `.entry-summary { margin: var(--global-xs-spacing) 0 0 }` in * kadence-content — a top margin that pushed the summary column out of line * with the top of the gallery. */ .isd-single .entry-summary.isd-single__summary { margin-top: 0; } /* * Kadence styles bare `button` as a filled brand button — background, padding, * radius, shadow, transition — and its `:hover`, `:focus` and `:active` rules * sit at [0,1,1], which outranks a plain class selector. Every control in this * gallery and its viewer is a