/* Crown Affair clone — chrome + sections + Woo overrides */ :root { --ca-pad: 40px; } /* source sets these at runtime via JS; without it they must exist or the .main{margin-top:var(--header-height)} rule computes invalid */ :root { --header-height: 48px; --desktop-announcement-height: 0px; } @media (min-width: 64rem) { :root { --header-height: 135px; --desktop-announcement-height: 45px; } } /* Custom elements with no source CSS default to inline; make them blocks. The :not(.hidden) guard matters: the source hides blocks like the desktop thumbnail carousel with .hidden{display:none}, and an unconditional s-carousel{display:block} here outranks it (same specificity, later wins), which left the 506px-tall desktop swiper in the 390px layout and pushed the PDP title 2.6 screens down. Never make an element block that the source marks hidden. */ .ca-block:not(.hidden), s-header:not(.hidden), s-carousel:not(.hidden), s-desktop-nav:not(.hidden), s-marquee:not(.hidden), s-quote:not(.hidden), s-banner:not(.hidden), .slider:not(.hidden), s-tabs:not(.hidden), s-image:not(.hidden), s-video:not(.hidden), s-instagram:not(.hidden) { display: block; } /* Grid/flex children default to min-width:auto, so a carousel whose slides measure wider than the viewport (Swiper sizes them from the capture-time desktop run) pushes its whole ancestor chain wider than the screen: measured product__layout at 596px inside a 390px main, which shoved the PDP title 2.6 screens down. min-width:0 lets the track shrink to the viewport again; the source relies on its own runtime styles for the same effect. */ main > .shopify-section, .product__layout, .product__images, .product__information, .product__layout > *, .product__images > * { min-width: 0; } /* Carousel slide sizing. The captured DOM carries Swiper's inline slide width (327.333px) which is what the live site renders at 1440 (card 327x492 measured), but that value is a DESKTOP measurement and inline beats media queries — so the clone used desktop-sized cards at 1024/390 (measured 327 vs source 289/292). Only !important can outrank an inline style, hence the !important overrides below, using the source's own numbers: base 75% (390 -> card 292) and 20.45833rem from 64.0625rem up (-> 327). Card art is squared off so a card can never grow to its image's natural height. */ .collection-carousel__carousel .swiper-wrapper > .swiper-slide { min-width: 0; } .collection-carousel__carousel .swiper-wrapper > .swiper-slide > .product-card { height: 100%; width: 100%; } .collection-carousel__carousel .swiper-wrapper > .swiper-slide .product-card__images img { width: 100% !important; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* Breakpoints come from the live source, measured at three widths: viewport 1440 -> container 1092, slide 327.33 = 29.98% viewport 1024 -> container 976, slide 288.67 = 29.58% viewport 390 -> container 390, slide 292.00 = 74.87% So it is ~30% of the track on desktop and ~75% below 64.0625rem -- a fixed rem value or a plain 75% both misrender 1024 (measured: 732px cards vs the source's 289px). */ @media (max-width: 63.99rem) { .collection-carousel__carousel .swiper-wrapper > .swiper-slide { width: 75% !important; } .collection-carousel__carousel .swiper-wrapper > .swiper-slide .product-card__images img { width: 100% !important; } } /* Desktop branch starts AT 64rem so a 1024px viewport gets the desktop ratio. The source renders 1024 with a 288.667px slide (Swiper recomputes per viewport from slidesPerView ~3.34); the 64.0625rem boundary left 1024 on the mobile 75% branch and produced 732px cards (measured). */ @media (min-width: 64rem) { .collection-carousel__carousel .swiper-wrapper > .swiper-slide { width: 30% !important; } } .quote__logos-slideshow .swiper-wrapper > .swiper-slide { min-width: 0; } /* hide leftovers we never want */ .skip-to-content-link { display: none !important; } /* header sits above content */ .site-header-section { z-index: 30; } body { overflow-x: hidden; } .header__nav-link { cursor: pointer; } body.ca-nav-open { overflow: hidden; } /* mobile nav (built by us) */ .ca-mobile-nav { display: none; } body.ca-mobile-open .ca-mobile-nav { display: block; } body.ca-mobile-open { overflow: hidden; } /* product cards. NOTE: we used to hide .product-card__title here, back when we drew our own card and the title sat in the image alt; the source card shows it, so hiding it silently removed every product name from the grid. */ .product-card { position: relative; } .product-card .hover-image { position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease; } .product-card:hover .hover-image { opacity: 1; } .product-card__title-link { margin: 0; } .product-card__info-link { text-decoration: none; color: inherit; } .collection-grid__grid { list-style: none; margin: 0; padding: 0; } .product-card__badge { letter-spacing: .04em; } /* carousels: the source CSS already provides a non-initialised layout for .collection-carousel__carousel .swiper — do not override it. */ /* page + sections width */ .page-width { max-width: 1600px; margin: 0 auto; padding-left: var(--ca-pad); padding-right: var(--ca-pad); } /* Woo: cart / checkout / account rendered inside our chrome */ .ca-woo-wrap { max-width: 1100px; margin: 40px auto 80px; padding: 0 20px; } .ca-woo-wrap .woocommerce { margin: 0; } .woocommerce table.shop_table { border-collapse: collapse; width: 100%; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border-bottom: 1px solid #e5e5e5; padding: 12px 8px; text-align: left; } .woocommerce .button, .woocommerce button.button, .woocommerce input.button, .woocommerce #place_order { background: #1a1a1a; color: #fff; border: 0; padding: 14px 28px; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; cursor: pointer; border-radius: 0; } .woocommerce .button:hover, .woocommerce #place_order:hover { opacity: .85; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { border: 1px solid #d9d9d9; padding: 10px 12px; background: #fff; } .woocommerce .woocommerce-checkout { display: block; } .woocommerce #payment { background: transparent; } .woocommerce-checkout .col2-set { display: flex; gap: 40px; flex-wrap: wrap; } .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { flex: 1 1 320px; } .woocommerce-info, .woocommerce-message, .woocommerce-error { border-top: 2px solid #1a1a1a; background: #f7f7f7; padding: 14px 18px; list-style: none; } /* PDP — fallback template ONLY. Every rule here is scoped to .ca-fb so it cannot collide with the source's own .product / .product__information markup, which ships with the source's compiled CSS (src.css) and must be left untouched. */ .ca-fb .product { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; margin-top: 32px; } .ca-fb .product__media { flex: 1 1 55%; } .ca-fb .product__information { flex: 1 1 360px; } .ca-fb .product__gallery-item { display: none; } .ca-fb .product__gallery-item.active { display: block; } .ca-fb .product__gallery img { width: 100%; } .ca-fb .product-add-to-cart__btn, .ca-fb .product__buynow { display: block; text-align: center; border: 1px solid #1a1a1a; background: transparent; color: #1a1a1a; text-decoration: none; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; } .ca-fb .product__buynow { background: #1a1a1a; color: #fff; } .ca-fb .product__qty-qty .qty { width: 64px; border: 1px solid #d9d9d9; padding: 8px; } .ca-fb .product__below { margin-top: 56px; max-width: 900px; } /* rte basics */ .rte img { max-width: 100%; height: auto; } .rte h1, .rte h2, .rte h3 { font-weight: 400; } /* buttons */ .ca-btn { display: inline-block; padding: 14px 32px; border: 1px solid #1a1a1a; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; text-decoration: none; cursor: pointer; } .ca-btn--solid { background: #1a1a1a; color: #fff; } /* cart */ .ca-cart__table { width: 100%; border-collapse: collapse; } .ca-cart__table td { border-bottom: 1px solid #e6e1d6; padding: 16px 8px; vertical-align: middle; } .ca-cart__media img { width: 90px; height: 90px; object-fit: cover; } .ca-cart__qty { display: block; font-size: 12px; color: #666; margin-top: 6px; } .ca-cart__sub { text-align: right; white-space: nowrap; } .ca-cart__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 16px; flex-wrap: wrap; } .ca-cart__total { font-size: 16px; letter-spacing: .04em; } /* checkout */ .ca-checkout { display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap; } .ca-checkout__main { flex: 1 1 420px; } .ca-checkout__aside { flex: 0 1 360px; background: #faf8f3; padding: 24px; } .ca-line { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid #e6e1d6; } .ca-line img { width: 64px; height: 64px; object-fit: cover; } .ca-checkout__total { margin-top: 16px; font-size: 16px; } /* Instagram feed widget: its runtime JS never loads here, so the unloaded placeholders would stack into a multi-thousand-pixel block. Hide the placeholders that carry no image; keep the section chrome. */ .instagram-feed .fs-entry-container:not(:has(img)) { display: none !important; } .instagram-feed .fs-wrapper { min-height: 0 !important; height: auto !important; } /* PDP gallery thumbs */ .product__thumbs { list-style: none; } .product__gallery-thumb { width: 72px; height: 72px; padding: 0; border: 1px solid transparent; background: none; cursor: pointer; } .product__gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .product__gallery-thumb.is-on { border-color: #1a1a1a; } /* Removed (2026-09-26): hand-written .product / .product__information padding + max-width:1400px. They were written when we drew the PDP ourselves; now that the page is the source's own markup styled by the source's compiled CSS, they only fought it (1400px cap -> 40px white band on the right; 72px top padding -> title pushed down; sticky left column -> wrong column split). */ /* The source hides its button spinner with JS at runtime; our clone never runs that JS, so the un-hidden spinner added 14px inside the Add-to-Cart button. */ .product-add-to-cart__btn loading-spinner { display: none; } /* collection card: swatches + quick add (source layout) */ .product-card__variant-swatch-wrapper { min-height: 26px; } .product-card__variant-swatch .product__variant-option { width: 26px; height: 26px; display: inline-block; overflow: hidden; border-radius: 9999px; flex: 0 0 auto; } .product-card__variant-swatch .product__variant-option.active { box-shadow: 0 0 0 1px #1a1a1a; } .product-card__quick-add { margin-top: .875rem; } .product-card__quick-add .btn--productcard { display: flex; align-items: center; justify-content: center; height: 3rem; gap: .25rem; border: 1px solid #000; background: #fff; color: #000; font-size: .75rem; text-transform: none; text-decoration: none; } .product-card__quick-add .btn--productcard:hover { background: #000; color: #fff; } .product-card__quick-add .btn--productcard:disabled { opacity: .5; } .product-card .product-card__info-link { text-decoration: none; } .product-card__subtitle { color: #6a6a6a; } .collection-grid__filters { border-bottom: 1px solid #e6e1d6; margin-bottom: 1.5rem; } .collection-grid__header { padding: 1rem 0 0; } /* --- ia-* component JS fallback (2026-09-27) ------------------------------- The source drives its carousels with a component bundle that defines the custom element and sizes each slide from the CSS vars --items-mobile/--items-desktop (i.e. 390/1.7 = 222.8px). crawl-site.py has no JS capture, so our is an inert tag: keen-slider falls back to its default and slides render ~348px wide -> the collections-tabs panel is 513px tall instead of 410px (measured, 390px viewport). Reproduce the sizing in CSS. Falls back to the source's own defaults (1.7 mobile / 4 desktop) when the var is absent. Scoped to keen-slider slides so it cannot affect other sliders. */ .ia-slider__slide.keen-slider__slide { min-width: calc(100% / var(--items-mobile, 1.7)) !important; max-width: calc(100% / var(--items-mobile, 1.7)) !important; } @media (min-width: 1024px) { .ia-slider__slide.keen-slider__slide { min-width: calc(100% / var(--items-desktop, 4)) !important; max-width: calc(100% / var(--items-desktop, 4)) !important; } }