/* Build: 0.12.0-pdp-load-dropdown */
/* ============================================================ */
/* Concept Studio - storefront (Stage 6 consumer side)          */
/* Gallery from _ccc_images, price range, Customize/BETA block. */
/* Palette matches the store front (green CTA), not the admin.   */
/* ============================================================ */

/* ---- Gallery ---- */
.ccc-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border: 1.5px solid var(--ccc-moss, #799268);  /* thin green frame, no fill */
    padding: 12px;
    border-radius: 12px;
}
.ccc-gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;          /* reserve the box so it never collapses while the image loads */
    background: #fff;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Prev/next nav arrows (overlaid, fade in on hover). JS hides when <2 items. */
.ccc-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d9e2dc;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1d2b22;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .12s ease, background .12s ease;
}
.ccc-gallery-main:hover .ccc-gallery-nav { opacity: 1; }
.ccc-gallery-prev { left: 10px; }
.ccc-gallery-next { right: 10px; }
.ccc-gallery-nav:hover { background: #fff; border-color: #9fb0a6; }
.ccc-gallery-nav:focus-visible { outline: 2px solid #2f6b46; outline-offset: 2px; opacity: 1; }
.ccc-gallery-main-img,
.ccc-gallery-video {
    width: 100%;
    height: 100%;
    object-fit: contain;          /* fit the reserved box, never crop */
    display: block;
}
.ccc-gallery-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;                 /* single row -- no second row */
    justify-content: flex-start;       /* anchor left: the first thumb is the stop */
    overflow-x: auto;                  /* scroll right through the photos */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;     /* rest flush on a thumb, never mid-clip */
    scroll-padding-inline-start: 0;    /* snap aligns to the very left edge */
    padding-bottom: 2px;
}
.ccc-gallery-thumbs .ccc-thumb { flex: 0 0 auto; scroll-snap-align: start; }
.ccc-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}
.ccc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ccc-thumb.is-active {
    border-color: #2e5d3b;
}
/* Blank "future review photo" slots: dashed white tiles on the moss. */
.ccc-thumb--ph {
    border: 2px dashed var(--ccc-moss, #799268);
    background: transparent;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ccc-thumb--ph::before {
    content: "+";
    color: var(--ccc-moss, #799268);
    font-size: 24px;
    line-height: 1;
}
.ccc-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    font-size: 18px;
}

/* ---- Price range ---- */
.ccc-price-range {
    font-weight: 600;
}

/* ---- Customize / BETA affordance ---- */
.ccc-customize {
    margin: 14px 0;
    padding: 12px 14px;
    background: #f3f7f4;
    border: 1px solid #d9e2dc;
    border-left: 4px solid #2e5d3b;
    border-radius: 8px;
}
.ccc-customize-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.ccc-customize-title {
    font-weight: 700;
    font-size: 14px;
    color: #1d2b22;
}
.ccc-customize-soon {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2e5d3b;
    background: #e3efe7;
    padding: 2px 8px;
    border-radius: 10px;
}
.ccc-customize-sub {
    margin: 4px 0 10px;
    color: #4a5650;
    font-size: 13px;
}
.ccc-cs-signin { font-size: 0.85em; opacity: 0.85; font-weight: 600; }

/* ---- 0.79.0: Concept Studio BANNER (replaces the slim band, same slot).
 * One anatomy, two states -- only the pill label/destination differ. The
 * decorative art is a background-image layered over the cream field; mobile
 * drops it (no second asset, no extra download on the connection class that
 * least wants one). Height-disciplined: the buy box must never drop. */
.ccc-customize--banner { margin: 0.35rem 0 0.9rem; }
.ccc-csb {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem 1rem;
	min-height: 72px;
	max-height: 96px;
	box-sizing: border-box;
	background-color: #F5F0E8;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid rgba(121, 146, 104, 0.45);
	border-radius: 10px;
	text-decoration: none;
	color: var(--ccc-ink, #2d2d2d);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ccc-csb:hover {
	text-decoration: none;
	border-color: var(--ccc-green-dark, #385c38);
	box-shadow: 0 2px 8px rgba(56, 92, 56, 0.14);
}
.ccc-csb-ico {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: rgba(121, 146, 104, 0.18);
	color: var(--ccc-green-dark, #385c38);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ccc-csb-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
}
.ccc-csb-title {
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.2;
	color: var(--ccc-ink, #2d2d2d);
}
.ccc-csb-sub {
	font-size: 0.82rem;
	line-height: 1.3;
	opacity: 0.75;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccc-csb-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--ccc-moss, #799268);
	color: #fff;
	font-weight: 700;
	font-size: 0.88rem;
	line-height: 1;
	padding: 10px 16px;
	border-radius: 6px;
	white-space: nowrap;
	transition: background 0.15s ease;
}
.ccc-csb:hover .ccc-csb-btn { background: var(--ccc-green-dark, #385c38); }

@media screen and (max-width: 782px) {
	/* Stack: icon + text row, pill full width below. Flat cream -- the
	 * desktop art crops badly at ~2.5:1 and is not worth a second asset. */
	.ccc-csb {
		flex-wrap: wrap;
		max-height: none;
		background-image: none !important; /* beats the inline style by design */
		padding: 0.75rem 0.85rem;
	}
	.ccc-csb-text { flex: 1 1 0; }
	.ccc-csb-btn { flex: 1 1 100%; justify-content: center; padding: 12px 16px; }
}
.ccc-customize-btn {
    display: inline-block;
    background: #2e5d3b;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.2;
}
.ccc-customize-btn:hover,
.ccc-customize-btn:focus {
    background: #244b30;
    color: #fff;
}
/* Slim variant (2026-07-03): panel chrome off, one full-width narrow button
   at the top of the buy box. */
.ccc-customize--slim {
    margin: 0 0 14px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.ccc-customize--slim .ccc-customize-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 10px 16px;
}
/* Band variant (2026-07): the Concept Studio door as a full-width CTA directly
   under the title, in the Concept Studio moss->green (matches the card
   affordance). Moss at rest, deepens to brand green on hover. */
.ccc-customize--band {
    margin: 10px 0 4px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}
.ccc-customize--band .ccc-customize-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
    background: var(--ccc-moss, #799268);
}
.ccc-customize--band .ccc-customize-btn:hover,
.ccc-customize--band .ccc-customize-btn:focus {
    background: var(--ccc-green-dark, #385c38);
    color: #fff;
}
.ccc-cs-ico { font-style: normal; }

/* ---- Size x thickness picker ---- */
.ccc-size-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 16px 0;
    max-width: 240px;
}
.ccc-size-label {
    font-weight: 600;
    color: #1d2b22;
}

/* Custom columnized listbox */
.ccc-dd { position: relative; }
.ccc-dd-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #c9d2cc;
    border-radius: 6px;
    background: #fff;
    font-size: 15px;
    color: #1d2b22;
    cursor: pointer;
    text-align: left;
}
.ccc-dd-trigger:hover { border-color: #9fb0a6; }
.ccc-dd-trigger:focus-visible { outline: 2px solid #2f6b46; outline-offset: 1px; }
.ccc-dd-caret { color: #6b736d; font-size: 12px; transition: transform .12s ease; }
.ccc-dd[data-open="1"] .ccc-dd-caret { transform: rotate(180deg); }

.ccc-dd-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #c9d2cc;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 40, 30, .12);
    display: none;
}
.ccc-dd[data-open="1"] .ccc-dd-panel { display: block; }

.ccc-dd-opt {
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    align-items: baseline;
    column-gap: 14px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    color: #1d2b22;
}
.ccc-dd-group {
    border-top: 1px solid #e4e9e6;
    margin-top: 3px;
    padding-top: 10px;
}
.ccc-dd-opt:hover { background: #eef4f0; }
.ccc-dd-opt[aria-selected="true"] { background: #e3efe8; font-weight: 600; }
.ccc-col-size  { text-align: left; }
.ccc-col-thick { color: #56635b; font-variant-numeric: tabular-nums; }
.ccc-col-price { text-align: right; color: #1d2b22; font-variant-numeric: tabular-nums; }

.ccc-selected-price {
    font-weight: 700;
    font-size: 20px;
    color: #1d2b22;
}
.ccc-sku-live {
    font-size: 12px;
    color: #6b736d;
}
.ccc-sku-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #1d2b22;
}

/* ---- Buy-box: tame the theme's full-width add-to-cart ---- */
.woocommerce div.product form.cart .single_add_to_cart_button,
.single_add_to_cart_button {
    width: auto;
    min-width: 200px;
    padding: 14px 30px;
    flex: 0 0 auto;
}
.woocommerce div.product form.cart .quantity {
    margin-right: 12px;
}

/* ============================================================ */
/* Placement rail (McMaster-style anchored branch)             */
/* Injected as the first child of .product-entry-wrapper (@5,   */
/* before the @20 gallery). Grid is scoped to CCC products.     */
/* ============================================================ */

/* Desktop: rail | gallery | summary. Scoped so the theme + non-CCC
   pages are untouched. body.ccc-product beats Blocksy's bare selector. */
body.ccc-product .product-entry-wrapper {
    /* !important (2026-08-06 incident): Blocksy regenerated its CSS tonight
       (m=1786055963) and the new build carries an equal-specificity
       display:flex on this wrapper that wins by cascade ORDER. One property,
       one hammer -- the grid IS the layout on ccc-product pages, and the
       theme must never be able to take it back by rebuilding itself. */
    display: grid !important;
    grid-template-columns: clamp(320px, 30vw, 480px) minmax(380px, 460px);
    grid-template-rows: min-content auto auto; /* title row stays tight; rail height flows into rows 2-3 */
    column-gap: clamp(24px, 2.5vw, 48px);
    row-gap: 16px;
    align-items: start;
    justify-content: start; /* pack left -- no centered dead gap */
}

/* Header band: title + short description span the gallery + summary columns
   (cols 2-3), above both; the rail keeps the left lane to itself. */
body.ccc-product .ccc-product-head { grid-column: 1 / 3; grid-row: 1; }
/* 2026-07-03c: the GALLERY carries the row span now. A grid row is as tall
   as its tallest occupant -- with gallery and summary sharing row 2, the
   short summary inherited the tall gallery's row height and Description
   started hundreds of px below the cart. Gallery spanning 2/4 lets row 2
   collapse to the summary's natural height; Description tucks in beneath. */
body.ccc-product .ccc-gallery      { grid-column: 1; grid-row: 2 / 4; }
body.ccc-product .summary          { grid-column: 2; grid-row: 2; }
/* 2026-07-03b: Description rides the summary column, directly beneath the
   cart -- a quiet continuation of the buy box, not a competing headline
   under the gallery. */
body.ccc-product .ccc-tabs-cell    { grid-column: 2; grid-row: 3; min-width: 0; }
/* 2026-07-03c: the theme pads the WooCommerce tabs machinery generously --
   inside our cell it reads as mystery whitespace. Zero it; our own heading
   margin owns the rhythm. */
body.ccc-product .ccc-tabs-cell .woocommerce-tabs { margin: 0; padding: 0; }
body.ccc-product .ccc-tabs-cell .woocommerce-Tabs-panel { margin: 0; padding: 0; }
body.ccc-product .ccc-tabs-cell .woocommerce-Tabs-panel > :first-child { margin-top: 0; }
body.ccc-product .summary { margin-bottom: 0; padding-bottom: 0; }
/* 2026-07-03d: the theme pads the summary interior; the tabs cell has none.
   Zero the summary sides so buy box and Description share one left edge. */
body.ccc-product .summary { margin-left: 0; padding-left: 0; padding-right: 0; }
body.ccc-product .summary > :last-child { margin-bottom: 0; }

body.ccc-product .ccc-product-head .product_title { margin: 0 0 6px; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.15; }
body.ccc-product .ccc-product-head .woocommerce-product-details__short-description { margin: 0; }
/* Price range: present but quiet -- lighter weight, softer color, smaller, one line. */
body.ccc-product .ccc-title-price {
    font-weight: 400;
    font-size: 0.6em;
    color: var(--theme-palette-color-2, #7A9268);
    white-space: nowrap;
}

.ccc-rail {
    position: sticky;
    top: var(--ccc-rail-top, 96px);
    align-self: start;
    font-size: 14px;
    line-height: 1.5;
    color: #1d2b22;
}
.ccc-rail-toggle {
    display: flex; /* desktop: family heading shown (non-interactive) */
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 8px 0;
    margin: 0;
    border: 0;
    border-bottom: 2px solid #2e5d3b;
    background: none;
    cursor: default;
    text-align: left;
}
.ccc-rail-fam {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #2e5d3b;
}
.ccc-rail-caret { display: none; color: #6b736d; font-size: 12px; }

.ccc-rail-body { margin-top: 10px; }
.ccc-rail-list,
.ccc-rail-children { list-style: none; margin: 0; padding: 0; }
.ccc-rail-list > li { padding: 3px 0; }
.ccc-rail-children {
    margin: 4px 0 6px 4px;
    padding-left: 10px;
    border-left: 1px solid #dde4df;
}
.ccc-rail-children > li { padding: 2px 0; }

.ccc-rail-item a {
    color: #2e5d3b;
    text-decoration: none;
}
.ccc-rail-item a:hover,
.ccc-rail-item a:focus { text-decoration: underline; }
.ccc-rail-cur { font-weight: 700; color: #1d2b22; }
.ccc-rail-muted { color: #aeb4af; } /* greyed: present in the tree, no products yet */
.ccc-rail-count { color: #9aa39c; font-variant-numeric: tabular-nums; font-size: 12px; }

/* ============================================================ */
/* Full-width, left-justified PDP frame (scoped to CCC products)*/
/* Breaks the product page out of the theme centered 1290 cap   */
/* so the layout uses the screen and packs left (McMaster).     */
/* CSS-only: cannot affect header/footer (those use .ct-container). */
/* ============================================================ */
body.ccc-product #main .is-width-constrained {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* Hero/breadcrumb keeps a normal gutter; vertical space trimmed to pull the
   breadcrumb + title up toward the header. (Tabs are now inside the grid.) */
body.ccc-product #main .hero-section {
    padding-left: clamp(16px, 3vw, 48px);
    padding-right: clamp(16px, 3vw, 48px);
    padding-top: 0;
    padding-bottom: 0;
}
/* Trim the container's top padding so content starts closer to the header. */
body.ccc-product #main .ct-container-full { padding-top: clamp(8px, 1.5vw, 20px); }
/* Description tab nested under the picture: comfortable reading in a narrow column. */
body.ccc-product .ccc-tabs-cell .woocommerce-tabs { padding: 0; margin-top: 8px; }
body.ccc-product .ccc-desc-heading { margin: 0 0 0.45em; font-size: 16px; font-weight: 600; line-height: 1.3; color: #1d2b22; }  /* 2026-07-03b: matched to .ccc-size-label -- a section label, not a billboard */
body.ccc-product .ccc-tabs-cell .woocommerce-Tabs-panel { font-size: 15px; line-height: 1.7; }
body.ccc-product .ccc-tabs-cell .woocommerce-Tabs-panel p { margin: 0 0 0.9em; }
/* Mobile description clamp (JS adds .ccc-desc-clamp on phones): hide the tail
   unless expanded, and style the "…continue" / "Show less" toggle. */
body.ccc-product .ccc-tabs-cell .woocommerce-Tabs-panel.ccc-desc-clamp:not(.ccc-desc-open) .ccc-desc-rest { display: none; }
body.ccc-product .ccc-tabs-cell .ccc-desc-toggle {
    display: block;
    margin-top: 12px;       /* the buffer after the 3rd sentence */
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: #2e5d3b;
    cursor: pointer;
}
body.ccc-product .ccc-tabs-cell .ccc-desc-toggle:hover { text-decoration: underline; }
/* Toggle only appears when clamped (mobile); desktop shows full text, no toggle. */
body.ccc-product .ccc-tabs-cell .woocommerce-Tabs-panel:not(.ccc-desc-clamp) .ccc-desc-toggle { display: none; }
/* Left frame anchored left with a comfortable gutter (content stays left-
   justified; not glued to the edge). padding-left is the dial. */
body.ccc-product #main .product-entry-wrapper {
    padding-left: clamp(16px, 2vw, 32px);
    padding-right: clamp(24px, 4vw, 64px);
}
/* gallery image fills its (now larger) column without upscaling past source */
body.ccc-product .ccc-gallery-main-img,
body.ccc-product .ccc-gallery-video {
    max-width: 100%;
}
/* Blocksy sizes the gallery to var(--product-gallery-width) (the 64% slider).
   In our grid that leaves a dead band in the column -- force it to fill. */
body.ccc-product #main .woocommerce-product-gallery.ccc-gallery {
    width: 100%;
    max-width: 100%;
    position: static; /* tabs now sit under the gallery; a sticky gallery scrolls over them */
}

/* Mobile: single column, rail first (source order) but collapsed by default. */
@media (max-width: 980px) {
    body.ccc-product .product-entry-wrapper {
        grid-template-columns: 1fr;
        padding-left: clamp(16px, 5vw, 28px);
        padding-right: clamp(16px, 5vw, 28px);
    }
    body.ccc-product .ccc-product-head,
    body.ccc-product .ccc-rail,
    body.ccc-product .ccc-gallery,
    body.ccc-product .summary,
    body.ccc-product .ccc-tabs-cell {
        grid-column: 1 / -1;
        grid-row: auto;
    }
    /* 2026-07-03b: explicit stacking -- DOM order would put Description
       ABOVE the buy box on mobile; the buy box wins. */
    body.ccc-product .ccc-product-head { grid-row: 1; }
    body.ccc-product .ccc-rail         { grid-row: 2; }
    body.ccc-product .ccc-gallery      { grid-row: 3; }
    body.ccc-product .summary          { grid-row: 4; }
    body.ccc-product .ccc-tabs-cell    { grid-row: 5; }
    /* Centered, not left-pinned: center the hero (title + thumbnails). */
    body.ccc-product .ccc-product-head { text-align: center; }
    body.ccc-product .ccc-gallery-thumbs { justify-content: center; }
    .ccc-rail {
        position: static;
        margin: 0 0 8px 0;
        border: 1px solid #d9e2dc;
        border-radius: 8px;
        padding: 10px 12px;
        background: #f6f8f6;
    }
    .ccc-rail-toggle { display: flex; cursor: pointer; border-bottom: 0; padding: 0; }
    .ccc-rail-caret { display: inline; transition: transform .12s ease; }
    .ccc-rail.is-open .ccc-rail-caret { transform: rotate(180deg); }
    .ccc-rail-body { display: none; }
    .ccc-rail.is-open .ccc-rail-body { display: block; }
    /* 2026-07-03 mobile polish: force SYMMETRIC gutters (the theme container
       was landing 16/24 on narrow phones) and tighten the vertical rhythm
       between gallery, description and buy box. */
    body.ccc-product .product-entry-wrapper { row-gap: 10px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; width: 100%; max-width: 100%; box-sizing: border-box; }
    body.ccc-product .ccc-tabs-cell { margin-top: 0; }
    body.ccc-product .summary { margin-top: 4px; }
    .ccc-long-desc { margin: 12px 0 8px; }
}

/* ============================================================ */
/* Relocated long description (under the gallery, full-width).  */
/* Readable measure -- text does not span the whole screen.     */
/* ============================================================ */
.ccc-long-desc {
    margin: 28px 0 8px;
    max-width: 820px;
    color: #2b332d;
    line-height: 1.7;
    font-size: 16px;
}
.ccc-long-desc > :first-child { margin-top: 0; }
.ccc-long-desc p { margin: 0 0 1em; }

/* ---- Phase 4: volume-discount affordance under the size picker ---- */
.ccc-volume {
    -webkit-appearance: none;
    appearance: none;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    width: 100%;
    min-width: 0;
    padding: 6px 10px;
    border: 1.5px solid #9fb0a6;
    border-radius: 6px;
    background: #fff;
    color: #1d2b22;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.ccc-volume:hover { border-color: #2f6b3f; background: #f4f7f1; }
.ccc-volume:focus-visible { outline: 2px solid #2f6b46; outline-offset: 1px; }
.ccc-volume[hidden] { display: none; }
/* Top row label: shrinks to fit the button width via container query units. */
.ccc-volume-label {
    font-size: 11px; /* fallback where container queries are unsupported */
    font-size: clamp(8px, 10cqi, 13px);
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
/* Bottom row: the discount applied at the CURRENT size + qty (or em dash). */
.ccc-volume-now { font-size: 12px; color: #6b736d; white-space: nowrap; }
.ccc-volume.has-disc .ccc-volume-now { color: #2f6b3f; font-weight: 700; }

/* ------------------------------------------------------------------ *
 *  Quick add (archive cards) -- 0.61.0-quick-add
 * ------------------------------------------------------------------ */
.ccc-quick-add { position: relative; width: 100%; }
.ccc-qa-row { display: flex; gap: 8px; }
.ccc-qa-row > * { flex: 1 1 0; min-width: 0; }
.ccc-qa-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid #385c38;
    border-radius: 4px;
    color: #385c38;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}
.ccc-qa-view:hover { background: #385c38; color: #fff; text-decoration: none; }
.ccc-qa-toggle, .ccc-qa-add, .ccc-view-options { width: 100%; text-align: center; }
/* 0.61.3: the panel OVERLAYS the grid instead of growing the card. In-flow
 * expansion changed the row height, and the theme's equal-height rows dragged
 * every neighbor's buttons down with it -- cards must stay independent. */
.ccc-qa-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    padding: 10px;
    background: #fff;
    border: 1px solid #799268;
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.ccc-qa-panel[hidden] { display: none; }
/* Lift a card above its later siblings while its quick-add dropdown is open, so
   the panel isn't painted over by the next item's image. */
li.product:has(.ccc-qa-panel:not([hidden])) { position: relative; z-index: 40; }
.ccc-qa-select {
    width: 100%;
    padding: 8px 10px;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, Menlo, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    background: #fff;
}
.ccc-qa-buyrow { display: flex; gap: 8px; }
.ccc-qa-qty {
    flex: 0 0 72px;
    width: 72px;
    padding: 8px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 4px;
    background: #fff;
}
.ccc-qa-buyrow .ccc-qa-add { flex: 1 1 auto; width: auto; }

/* ------------------------------------------------------------------ *
 *  PDP buy-box polish -- 0.61.4 (napkin spec)
 * ------------------------------------------------------------------ */
/* The title band already shows the short description under the H1; the
 * summary column's copy of it is a duplicate. Hide the duplicate only. */
body.ccc-product .summary .woocommerce-product-details__short-description { display: none; }

/* Price rides the label row, flush right -- the picker becomes a 2-col grid:
 * row 1 = label | price, every other child spans both columns. */
body.ccc-product .ccc-size-select {
    max-width: none; /* the 240px cap was the wall keeping controls off the Customize edge */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 12px;
}
body.ccc-product .ccc-size-select > * { grid-column: 1 / -1; }
body.ccc-product .ccc-size-select > .ccc-size-label { grid-column: 1; grid-row: 1; }
body.ccc-product .ccc-size-select > .ccc-selected-price {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
}

/* Controls run to the same right edge as the Customize card. */
/* 0.61.5 buy-box rows (order property arranges; DOM order stays semantic):
 *   row 1  .ccc-size-select (label+price / dropdown / SKU)
 *   row 2  quantity | volume banner (equal height, banner fills to the edge)
 *   row 3  Add to cart (grows) | View cart (compact)
 *   row 4  Report an issue (quiet)                                        */
/* 0.62.0-buybox-grid: GRID, not flex. Flex packs each line independently, so
 * the qty|banner seam and the Add|View seam landed at different x positions
 * (the inconsistency). A grid pins ONE seam: every row's columns align. */
body.ccc-product .summary form.cart {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    gap: 10px 12px;
    align-items: stretch;
}
/* Blocksy wraps quantity + button in .ct-cart-actions; display:contents
 * dissolves the wrapper so its children are first-class grid items. */
body.ccc-product .summary form.cart .ct-cart-actions { display: contents; }
/* Every item gets an EXPLICIT row + column. Auto-placement's sparse cursor
 * refuses to move backward in a row: the banner (col 2) renders before the
 * qty (col 1) in the DOM, so the qty was demoted a row -- the stagger. */
body.ccc-product .summary form.cart .ccc-size-select { grid-row: 1; grid-column: 1 / -1; }
body.ccc-product .summary form.cart .quantity { grid-row: 2; grid-column: 1; width: 100%; margin: 0; }
body.ccc-product .summary form.cart .ccc-volume {
    grid-row: 2;
    grid-column: 2;
    min-width: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
body.ccc-product .summary form.cart .ccc-flex-break { display: none; } /* grid rows replace the manual break */
body.ccc-product .summary form.cart .single_add_to_cart_button { grid-row: 3; grid-column: 1; min-width: 0; width: 100%; padding: 14px 12px; white-space: nowrap; }
body.ccc-product .summary form.cart .ccc-view-cart { grid-row: 3; grid-column: 2; min-width: 0; margin: 0; padding: 14px 12px; white-space: nowrap; }
body.ccc-product .summary form.cart .ccc-report-issue { grid-row: 4; grid-column: 1; }
body.ccc-product .summary form.cart .ccc-edit-product { grid-row: 4; grid-column: 2; justify-self: end; }

.ccc-view-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border: 1px solid #385c38;
    border-radius: 4px;
    color: #385c38;
    background: transparent;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.ccc-view-cart:hover { background: #385c38; color: #fff; text-decoration: none; }

.ccc-report-issue {
    font-size: 12px;
    color: #6b736d;
    text-decoration: none;
}
.ccc-report-issue:hover { color: #385c38; text-decoration: underline; }

.ccc-edit-product {
    font-size: 12px;
    color: #6b736d;
    text-decoration: none;
    white-space: nowrap;
}
.ccc-edit-product:hover { color: #385c38; text-decoration: underline; }

/* WC's transient added-to-cart link would duplicate our persistent View cart. */
body.ccc-product .summary .added_to_cart { display: none; }


/* 0.64.0-qa-ajax: quick-add success state */
.ccc-qa-done {
    color: var(--ccc-green-dark, #385c38);
    font-weight: 600;
    white-space: nowrap;
}
.ccc-qa-cartlink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1.5px solid var(--ccc-green-dark, #385c38);
    border-radius: 6px;
    color: var(--ccc-green-dark, #385c38);
    text-decoration: none;
    white-space: nowrap;
}
.ccc-qa-cartlink:hover { background: rgba(56, 92, 56, 0.08); }

/* ------------------------------------------------------------------ *
 *  Discount Schedule popover (Slice 2b, rev). Covers the buy box in
 *  place: .ccc-vsd-overlay is position:absolute inside form.cart, no
 *  backdrop, no page dim. The vernier arrows hug the green centre line,
 *  on the scale itself. Keep .ccc-vsd-tick height (26px) in sync with
 *  TICK_H in storefront.js. Floating fallback (no form.cart) re-modals.
 * ------------------------------------------------------------------ */
.ccc-vsd-host { position: relative; }

.ccc-vsd-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    overflow: hidden;
    background: #fff;
}
.ccc-vsd-overlay[hidden] { display: none; }
.ccc-vsd-overlay.ccc-vsd-floating {
    position: fixed; inset: 0; min-height: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(20, 40, 30, .45);
}

.ccc-vsd {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 12px 14px;
    background: #fff;
    border: 1px solid #d8e0d4;
    border-radius: 8px;
    color: #1d2b22;
    font-size: 14px;
}
.ccc-vsd-floating .ccc-vsd { max-width: 380px; height: auto; max-height: 88vh; box-shadow: 0 12px 40px rgba(20, 40, 30, .28); }
.ccc-vsd-floating .ccc-vsd-stage { flex: 0 0 auto; height: calc(2 * var(--ccc-card-h) + 2 * var(--ccc-card-gap)); }
.ccc-vsd-close {
    position: absolute; top: 8px; right: 10px;
    padding: 5px 14px;
    border: 0; border-radius: 6px;
    background: #5f7a4f; color: #fff;
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
    line-height: 1.4; cursor: pointer;
    box-shadow: 0 1px 3px rgba(20, 40, 30, .18);
    transition: background .12s ease;
}
.ccc-vsd-close:hover { background: #4d6640; }
.ccc-vsd-title { flex: 0 0 auto; font-weight: 700; font-size: 14px; margin-bottom: 10px; padding-right: 64px; }

.ccc-vsd-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 12px; align-items: stretch; }

/* ---- vernier (left) ---- */
.ccc-vsd-vernier { flex: 0 0 auto; width: 58px; display: flex; flex-direction: column; align-items: center; }
.ccc-vsd-window {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 120px;
    overflow: hidden;
    background: #f4f7f1;
    border: 1px solid #d8e0d4;
    border-radius: 6px;
}
.ccc-vsd-scale {
    position: absolute; left: 0; right: 0; top: 50%;
    transition: transform .18s ease;
}
.ccc-vsd-tick {
    height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px;
    color: #9aa39c; font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
}
.ccc-vsd-tickmark { width: 8px; height: 2px; background: #c3cdc4; border-radius: 1px; }
.ccc-vsd-tick.is-active { color: #2f6b3f; font-weight: 700; }
.ccc-vsd-tick.is-active .ccc-vsd-tickmark { width: 14px; background: #2f6b3f; }
/* The scale "splits" at centre: an opaque island masks the middle ticks and
   carries the controls -- a large UP button above the size, DOWN below it. */
.ccc-vsd-island {
    position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
    display: flex; flex-direction: column; align-items: stretch; gap: 5px;
    padding: 6px 5px;
    background: #f4f7f1;
    border-top: 3px solid #2f6b3f;
    border-bottom: 3px solid #2f6b3f;
}
.ccc-vsd-up, .ccc-vsd-down {
    height: 28px; padding: 0;
    border: 1px solid #c4d2c5; border-radius: 6px;
    background: #fff; color: #2f6b3f;
    font-size: 12px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .12s ease, border-color .12s ease;
}
.ccc-vsd-up:hover, .ccc-vsd-down:hover { background: #eef4f0; border-color: #2f6b3f; }
.ccc-vsd-up:disabled, .ccc-vsd-down:disabled { opacity: .3; cursor: default; }
.ccc-vsd-readout {
    text-align: center; padding: 3px 2px; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700; font-size: 11px; color: #1d2b22; background: #e3efe8; border-radius: 4px;
}

/* ---- card reel (right) ---- */
.ccc-vsd-stage {
    --ccc-card-h: 118px;
    --ccc-card-gap: 8px;
    position: relative;
    flex: 1 1 auto; min-width: 0;
    min-height: var(--ccc-card-h);
    overflow: hidden;
    /* opaque band = exactly the active card; neighbours cut + faded to transparent */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(50% - var(--ccc-card-h) / 2), #000 calc(50% + var(--ccc-card-h) / 2), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 calc(50% - var(--ccc-card-h) / 2), #000 calc(50% + var(--ccc-card-h) / 2), transparent 100%);
}
.ccc-vsd-reel {
    position: absolute; left: 0; right: 0; top: 0;
    display: flex; flex-direction: column; gap: var(--ccc-card-gap);
    transition: transform .2s ease;
}
.ccc-vsd-card {
    box-sizing: border-box;
    height: var(--ccc-card-h);
    display: flex; flex-direction: column;
    padding: 8px 10px;
    background: #fff; border: 1px solid #d8e0d4; border-radius: 8px;
    opacity: .4;
    transition: opacity .2s ease, background .2s ease, border-color .2s ease;
}
.ccc-vsd-card[data-i] { cursor: pointer; }
.ccc-vsd-card[data-i]:not(.is-active):hover { opacity: .7; }
.ccc-vsd-card.is-active {
    opacity: 1; cursor: default;
    background: #f4f7f1; border-color: #9fb0a6;
    box-shadow: 0 2px 10px rgba(20, 40, 30, .10);
}
/* dark end-caps: a wall below "0" and above the largest size; arrows disable at the ends */
.ccc-vsd-cap {
    opacity: 1; cursor: default;
    background: #38443d; border-color: #2c352f;
    background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}
.ccc-vsd-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
/* material label: same pill as the nav cart (.ccc-ci-coin). lighter staged-style fill. */
.ccc-vsd-matpill {
    display: inline-flex; align-items: center; justify-content: center;
    max-width: 62%; padding: .12rem .4rem; border-radius: 999px;
    background: color-mix(in srgb, var(--ccc-coin, #c9bfa6) 42%, #fff);
    color: #2d2d2d; font-size: 10px; font-weight: 600; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.ccc-vsd-card-list {
    flex: 0 0 auto; display: inline-flex; align-items: baseline; white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; color: #6b736d; font-variant-numeric: tabular-nums;
}
.ccc-vsd-ll { display: inline-block; width: 6ch; text-align: right; }   /* single-piece price */
.ccc-vsd-pip { display: inline-block; padding: 0 7px; color: #aab2ac; } /* pinned, with room */
.ccc-vsd-lr { display: inline-block; width: 7ch; text-align: right; }   /* price for cart qty */
.ccc-vsd-cols { flex: 1 1 auto; display: flex; align-items: center; gap: 5px; }
.ccc-vsd-col {
    position: relative;
    flex: 1 1 0; align-self: stretch;
    display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px;
    padding: 8px 4px; background: #fff; border: 1px solid #d8e0d4; border-radius: 6px;
    cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.ccc-vsd-col:hover { border-color: #2f6b3f; background: #eef4f0; }
/* row 1: quantity dead-centre; the mark (x / drop) is pinned right so the number never moves */
.ccc-vsd-col-qty { position: relative; width: 100%; text-align: center; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; }
.ccc-vsd-col-mark {
    position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
}
.ccc-vsd-x { color: #aab2ac; font-weight: 400; }
.ccc-vsd-drop {
    display: none; align-items: center; justify-content: center;
    color: #000;
}
.ccc-vsd-col:hover .ccc-vsd-x { display: none; }
.ccc-vsd-col:hover .ccc-vsd-drop { display: inline-flex; }
/* rows 2 & 3: shared money grid -- sym | int | . | frac; decimals align across rows */
/* rows 2 & 3: static, centred. no hover swap -- the dynamic read now lives in
   the card-head label (top-right). */
.ccc-vsd-money {
    width: 100%; text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 500; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.4;
}
.ccc-vsd-col-price { color: #2f6b3f; }
.ccc-vsd-col-pct { color: #385c38; }
/* buy-box: small grey regular price to the left of the discounted price */
.ccc-selected-price .ccc-reg { font-size: 0.6em; font-weight: 400; color: #6b736d; margin-right: 5px; }
/* press confirmation */
.ccc-vsd-col.is-picked { border-color: #2f6b3f; background: #dcebe0; }
.ccc-vsd-col.is-picked > * { visibility: hidden; }
.ccc-vsd-col.is-picked::after {
    content: '\2713'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #2f6b3f; font-size: 20px; font-weight: 700;
}
.ccc-vsd-none { width: 100%; color: #6b736d; font-size: 12px; font-style: italic; text-align: center; }

/* Concept Studio entry on configurable cards (C1.3). Mirrors .ccc-qa-view but
   in the studio terracotta accent, full-width below the quick-add row. */
.ccc-qa-customize {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px solid #2e5d3b;
    border-radius: 4px;
    background: #2e5d3b;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.ccc-qa-customize:hover,
.ccc-qa-customize:focus { background: #244b30; color: #fff; text-decoration: none; }

/* ============================================================ */
/* Review photos in the gallery + the '+' add-review tile,      */
/* and the collapsible reviews panel beneath the gallery.       */
/* ============================================================ */
.ccc-thumb-sep { flex: 0 0 auto; align-self: stretch; width: 1px; margin: 6px 3px; background: #d9e2dc; }
.ccc-gallery-thumbs .ccc-thumb--review { flex: 0 0 auto; }
.ccc-thumb--review { border-color: #ece8db; }
.ccc-thumb--review.is-active { border-color: #2e5d3b; }
.ccc-gallery-thumbs .ccc-gal-add { flex: 0 0 auto; scroll-snap-align: start; }
.ccc-gal-add {
    width: 72px; height: 72px; padding: 0;
    border: 2px dashed var(--ccc-moss, #799268); border-radius: 6px;
    background: transparent; cursor: pointer; color: var(--ccc-moss, #799268);
    font-size: 26px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.ccc-gal-add:hover { border-color: #2e5d3b; color: #2e5d3b; background: #f6f8f6; }
.ccc-gal-add:focus-visible { outline: 2px solid #2e5d3b; outline-offset: 2px; }

.ccc-reviews-cell { margin-top: 4px; }
.ccc-reviews { border: 1px solid #d9e2dc; border-radius: 8px; background: #f6f8f6; overflow: hidden; }
.ccc-reviews-summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 6px; padding: 12px 14px; font-weight: 600; color: #2f3827; }
.ccc-reviews-summary::-webkit-details-marker { display: none; }
.ccc-reviews-summary::after { content: "\25BE"; margin-left: auto; color: #5f6b52; transition: transform .12s ease; }
.ccc-reviews[open] .ccc-reviews-summary::after { transform: rotate(180deg); }
.ccc-reviews-sum-count { color: #5f6b52; font-weight: 400; }
.ccc-reviews-sum-hint { color: #5f6b52; font-weight: 400; font-size: 0.85em; margin-left: 2px; }
.ccc-reviews-body { padding: 4px 14px 14px; background: #fff; border-top: 1px solid #e7ece7; }
.ccc-reviews-note { margin: 12px 0; font-size: 0.85rem; color: #5f6b52; }

/* ============================================================ */
/* Reviews panel polish: kill the 2-column list|form cram, go   */
/* single-column, roomier, photo-forward. CSS only.            */
/* ============================================================ */
.ccc-reviews-body #reviews,
.ccc-reviews-body .woocommerce-Reviews { display: block !important; }
.ccc-reviews-body #comments,
.ccc-reviews-body #review_form_wrapper,
.ccc-reviews-body #review_form,
.ccc-reviews-body #respond {
    width: 100% !important; max-width: 100% !important;
    float: none !important; margin-left: 0 !important; margin-right: 0 !important;
    box-sizing: border-box;
}
.ccc-reviews-body #comments { margin: 0 0 22px; }
.ccc-reviews-body .woocommerce-Reviews-title { font-size: 1rem; font-weight: 600; margin: 0 0 12px; color: #2f3827; }

/* Review list -- clean stacked items */
.ccc-reviews-body ol.commentlist { list-style: none; margin: 0; padding: 0; }
.ccc-reviews-body ol.commentlist li.review { margin: 0; padding: 16px 0; border-top: 1px solid #ececec; }
.ccc-reviews-body ol.commentlist li.review:first-child { border-top: 0; padding-top: 0; }
.ccc-reviews-body .comment_container { display: block; }
.ccc-reviews-body .comment_container img.avatar { width: 34px; height: 34px; border-radius: 50%; float: left; margin: 2px 10px 0 0; }
.ccc-reviews-body .comment-text { margin: 0; overflow: hidden; }
.ccc-reviews-body .comment-text .star-rating { float: none; margin: 0 0 6px; font-size: 0.9em; }
.ccc-reviews-body .comment-text p.meta { font-size: 0.82rem; color: #5f6b52; margin: 0 0 8px; line-height: 1.45; }
.ccc-reviews-body .comment-text .woocommerce-review__author { color: #2f3827; font-weight: 600; }
.ccc-reviews-body .description { line-height: 1.6; color: #2f3827; }
.ccc-reviews-body .description p { margin: 0 0 8px; }

/* Customer photo: its own full-width line, image-forward */
.ccc-reviews-body .comment-text img:not(.avatar),
.ccc-reviews-body .description img,
.ccc-reviews-body .comment-text a[href] > img {
    display: block; width: 100%; max-width: 300px; height: auto;
    margin: 10px 0 4px; border-radius: 6px; border: 1px solid #ececec;
}

/* Add-a-review form -- single column, roomy */
.ccc-reviews-body #respond .comment-reply-title { display: block; font-size: 1rem; font-weight: 600; margin: 0 0 12px; color: #2f3827; }
.ccc-reviews-body form.comment-form { display: block; }
.ccc-reviews-body .comment-form-rating { margin: 0 0 14px; }
.ccc-reviews-body .comment-form-rating > label { display: block; margin: 0 0 4px; font-size: 0.85rem; color: #5f6b52; }
.ccc-reviews-body .comment-form-comment { margin: 0 0 14px; }
.ccc-reviews-body .comment-form-comment label { display: block; margin: 0 0 4px; font-size: 0.85rem; color: #5f6b52; }
.ccc-reviews-body .comment-form textarea { width: 100%; min-height: 120px; box-sizing: border-box; }
.ccc-reviews-body .comment-form .form-submit { margin: 8px 0 0; }

/* ====================================================================
 * Header breakpoint alignment (2026-08-02): Blocksy collapses its menu
 * to the mobile header below 1000px (baked into the theme's generated
 * media queries -- no setting exposed). Our nav/browse system switches
 * at 1024. This flips the header in the 1000-1024 seam so all three
 * systems agree that <=1024 is mobile. Blocksy renders BOTH headers in
 * the DOM and toggles by media query, so showing/hiding is safe; the
 * hamburger's offcanvas JS is width-agnostic.
 * ==================================================================== */
@media (min-width: 1000px) and (max-width: 1024px) {
	#header [data-device="desktop"] { display: none !important; }
	#header [data-device="mobile"]  { display: block !important; }
}

/* ------------------------------------------------------------------ *
 *  Lightbox (2026-08, slice 1: PDP). Full-screen overlay, dark scrim,
 *  pinch/drag/double-tap zoom. touch-action:none hands ALL gestures to
 *  the pointer handlers -- without it the browser's own scroll/pinch
 *  fights the pan math on mobile.
 * ------------------------------------------------------------------ */
html.ccc-lightbox-lock { overflow: hidden; }
.ccc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(24, 24, 20, 0.93);
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}
.ccc-lightbox.is-open { display: flex; }
.ccc-lightbox-img {
	max-width: 94vw;
	max-height: 92vh;
	transform-origin: center center;
	will-change: transform;
	cursor: grab;
}
.ccc-lightbox button {
	position: absolute;
	z-index: 1;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.ccc-lightbox button:hover { background: rgba(255, 255, 255, 0.25); }
.ccc-lightbox-close { top: 14px; right: 14px; font-size: 26px; }
.ccc-lightbox-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.ccc-lightbox-next { right: 10px; top: 50%; transform: translateY(-50%); }
/* Affordance: the PDP main image invites the tap. */
.ccc-gallery-main-img { cursor: zoom-in; }