/**
 * WooCommerce Overrides — Handmade Crochet Shop
 *
 * These rules target WooCommerce's default class names and
 * override them to match the brand design system.
 */

/* ============================================================
   GLOBAL WC LAYOUT
   ============================================================ */

.woocommerce-page-header {
    padding: 2.5rem 0 1.5rem;
    text-align: left;
}
.woocommerce-page-header h1 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--color-text);
}

/* Hide the WC-generated archive header — the theme already renders a
   page header via woocommerce.php so we suppress the duplicate. */
.woocommerce-products-header { display: none; }

/* Bottom breathing room between product grid and footer */
.post-type-archive-product .woocommerce-content-wrap,
.tax-product_cat .woocommerce-content-wrap,
.tax-product_tag .woocommerce-content-wrap {
    padding-bottom: 4rem;
}

/* ============================================================
   NOTICES
   ============================================================ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top: 3px solid var(--color-accent);
    background: var(--color-accent-bg);
    color: var(--color-text);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 1em 1.5em;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.woocommerce-error {
    border-color: var(--color-error);
    background: #fdf2f2;
}
.woocommerce-message .button,
.woocommerce-info .button {
    background: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.4em 1.2em !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

/* ============================================================
   PRODUCT GRID (Archive / Shop) — 5 columns desktop
   ============================================================ */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 1.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    float: none !important;
    clear: both !important;
}
@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
    .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

/* Reset WC default float/margin on product list items */
.woocommerce ul.products li.product {
    float: none !important;
    margin: 0 !important;
    width: auto !important;
}

/* Sorting / results toolbar */
.woocommerce-ordering select,
.woocommerce .woocommerce-ordering select {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5em 1em;
    font-size: 0.9rem;
    color: var(--color-text);
    background: var(--color-surface);
    cursor: pointer;
}
.woocommerce-result-count {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
    border: none !important;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2.5rem;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.5em 0.9em !important;
    color: var(--color-text) !important;
    font-size: 0.9rem;
    min-width: 40px;
    text-align: center;
    transition: background var(--ease), border-color var(--ease), color var(--ease) !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background: var(--color-accent-bg) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-accent-dark) !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

/* ============================================================
   SINGLE PRODUCT PAGE
   ============================================================ */

/* ── Product page outer container ──────────────────────────── */
.single-product div.product {
    padding: var(--sp-md) 0 3rem;
}

/* ──────────────────────────────────────────────────────────────
   PRODUCT GRID  (.hk-product-grid)
   Deterministic 2-column × 2-row CSS Grid.

     Row 1:  title   |  (empty)
     Row 2:  gallery |  summary

   Three direct children are placed with grid-area:
     h1.product_title                → title
     div.woocommerce-product-gallery → gallery
     div.summary                     → summary
   ────────────────────────────────────────────────────────────── */
.hk-product-grid {
    display: grid;
    grid-template-columns: 60% 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "title   ."
        "gallery summary";
    column-gap: 3rem;
    row-gap: 0;
    align-items: start;
}

/* ── Title — row 1, column 1 ──────────────────────────────── */
.hk-product-grid > .product_title {
    grid-area: title;
    margin: 0 0 24px;
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 3.1vw, 2.45rem);
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* ── Gallery — row 2, column 1 ────────────────────────────── */
/*
 * !important on position & top is required to beat WooCommerce's
 * .woocommerce div.product div.images.woocommerce-product-gallery
 * (specificity 0-4-2) which sets position:relative and would leave
 * our top offset active — pushing the gallery down ~88px.
 */
.hk-product-grid > .woocommerce-product-gallery,
.hk-product-grid > div.images {
    grid-area: gallery;
    align-self: start;
    /* Override WooCommerce default float/width */
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    clear: none !important;
    /* Sticky on desktop so gallery follows scroll */
    position: sticky !important;
    top: calc(var(--header-height, 72px) + 1rem) !important;
    /* Zero out any inherited spacing */
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Summary — row 2, column 2 ────────────────────────────── */
.hk-product-grid > .summary,
.hk-product-grid > div.summary {
    grid-area: summary;
    align-self: start;
    /* Override WooCommerce default float/width */
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    /* Stack children vertically */
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── SALE badge — single product page ───────────────────────── */
/*
 * The badge is output by the theme's product-image.php template override inside
 * .woocommerce-product-gallery (sibling of the wrapper). GalleryFix injects
 * .hcs-gallery-frame (position: relative) wrapping .flex-viewport. The badge
 * is positioned relative to .woocommerce-product-gallery (position: sticky),
 * but z-index: 30 ensures it sits above the frame and images visually.
 */
.single-product .woocommerce-product-gallery span.onsale {
    position: absolute !important;
    top: 1rem !important;
    left: 1rem !important;
    right: auto !important;

    /* Reset WooCommerce's awkward sizing */
    min-height: unset !important;
    min-width: unset !important;
    height: auto !important;
    width: auto !important;
    line-height: 1 !important;

    /* Brand pill style */
    border-radius: var(--radius-pill, 999px) !important;
    padding: 0.45em 1em !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    background: var(--color-sale-bg, var(--color-accent-dark, #C47A6E)) !important;
    color: var(--color-sale-text, #fff) !important;
    box-shadow: 0 2px 12px rgba(196, 122, 110, 0.45) !important;
    z-index: 30 !important;
    transform: none !important;
    margin: 0 !important;
}

/* ── .hcs-gallery-frame — the 4:5 portrait container ───────────────────────
 *
 * GalleryFix (theme.js) creates this div and wraps .flex-viewport inside it,
 * leaving ol.flex-control-thumbs as a sibling in the wrapper (not inside the
 * frame). This keeps the frame purely the image area — no thumbnail interference.
 *
 * aspect-ratio: 4/5 with width: 100% gives a definite height = width × 1.25.
 * Because the height is definite, .flex-viewport's height: 100% resolves cleanly
 * to fill the frame exactly, with no dependence on Flexslider's JS height-setting.
 * Flexslider's inline height is overridden by CSS height: 100% !important.
 * ─────────────────────────────────────────────────────────────────────────── */
.hcs-gallery-frame {
    width: 100%;
    aspect-ratio: 4 / 5;
    position: relative;             /* containing block for .onsale badge overlay */
    overflow: hidden;               /* clips images + badge to rounded corners */
    border-radius: 24px;
    box-shadow: 0 4px 32px rgba(61, 43, 39, 0.12);
    background: var(--color-accent-bg, #FDF0EC);
}

/* Viewport fills the frame completely.
 * height: 100% !important overrides Flexslider's inline height (which has no
 * !important), so the viewport always matches the frame's 1:1 height.
 * GalleryFix._lock() also enforces the px value via inline !important as a
 * belt-and-suspenders safety net. */
.woocommerce-product-gallery .flex-viewport {
    width: 100% !important;
    height: 100% !important;        /* fill .hcs-gallery-frame height (= its width) */
    min-height: 0 !important;
    overflow: hidden !important;
    cursor: zoom-in;
    /* Visual properties now live on .hcs-gallery-frame above */
}

/* ── Slides: height-100% chain ──────────────────────────────────────────────
 *
 * Flexslider is called on .woocommerce-product-gallery. It wraps
 * .woocommerce-product-gallery__wrapper (slider.container) inside the newly
 * created .flex-viewport. The wrapper becomes a wide container (width: N×200%)
 * and each slide is a div.woocommerce-product-gallery__image (float:left,
 * width:Wpx set inline by Flexslider). There is no ul/li — it's div-based.
 *
 * Height chain (JS _lock() gives .flex-viewport a definite px height first):
 *
 *   .hcs-gallery-frame  (definite W×W via aspect-ratio:1/1)
 *   └── .flex-viewport              height: Wpx (inline !important via _lock)
 *       └── __wrapper               height: 100% → Wpx
 *           └── div.__image         height: 100% → Wpx  (width: Wpx by Flexslider)
 *               └── figure          height: 100% → Wpx
 *                   └── a           height: 100% → Wpx  (may be absent pre-zoom)
 *                       └── img     width/height: 100%; object-fit:contain
 *
 * We do NOT touch slide widths — Flexslider owns those via inline style.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Slide container fills viewport height */
.woocommerce-product-gallery .flex-viewport > .woocommerce-product-gallery__wrapper {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each slide div: fill container height (width managed by Flexslider inline) */
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image {
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* figure and a fill the slide height */
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image figure,
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Image fills the slide; object-fit:contain shows full image letterboxed
 * on the brand-coloured frame background. */
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image img:not(.zoomImg) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    border: none !important;
    transition: transform 0.55s ease !important;
}

/* ── Gallery prev / next arrow buttons ─────────────────────────────────────
 * Injected into .hcs-gallery-frame by GalleryFix._tryAttach().
 * Hidden until the user hovers the frame; appear with a fade. */
.hcs-gallery-prev,
.hcs-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba(61, 43, 39, 0.18);
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.hcs-gallery-frame:hover .hcs-gallery-prev,
.hcs-gallery-frame:hover .hcs-gallery-next {
    opacity: 1;
}
.hcs-gallery-prev { left: 0.75rem; }
.hcs-gallery-next { right: 0.75rem; }
.hcs-gallery-prev:hover,
.hcs-gallery-next:hover {
    background: rgba(255, 255, 255, 0.97);
    transform: translateY(-50%) scale(1.08);
}
.hcs-gallery-prev svg,
.hcs-gallery-next svg {
    width: 18px;
    height: 18px;
    display: block;
    flex-shrink: 0;
}

/* Lightbox trigger — frosted glass look */
.woocommerce-product-gallery__trigger {
    background: rgba(255, 255, 255, 0.88) !important;
    border: none !important;
    border-radius: 50% !important;
    color: var(--color-text) !important;
    backdrop-filter: blur(4px);
    top: 0.75rem !important;
    right: 0.75rem !important;
}

/* Thumbnail strip — horizontal scroll, no wrap. */
ol.flex-control-thumbs {
    margin-top: 0.5rem !important;
    display: flex;
    gap: 0.25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    padding-bottom: 3px;
}
ol.flex-control-thumbs::-webkit-scrollbar { height: 3px; }
ol.flex-control-thumbs::-webkit-scrollbar-track { background: transparent; }
ol.flex-control-thumbs::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 2px;
}
ol.flex-control-thumbs li {
    flex-shrink: 0 !important;
    scroll-snap-align: start;
    margin: 0 !important;
    /* WooCommerce sets li { width: 25%; float: left } by default.
     * Override both so each li is exactly as wide as its 72px thumbnail image. */
    width: auto !important;
    float: none !important;
}
ol.flex-control-thumbs img {
    border-radius: var(--radius-sm) !important;
    border: 2.5px solid transparent !important;
    cursor: pointer;
    width: 72px !important;
    height: 90px !important;            /* 4:5 ratio (72 × 1.25) */
    object-fit: cover !important;
    opacity: 0.65;
    transition: border-color var(--ease), opacity var(--ease) !important;
    display: block !important;
}
ol.flex-control-thumbs img:hover { opacity: 1; }
ol.flex-control-thumbs .flex-active img {
    border-color: var(--color-accent) !important;
    opacity: 1 !important;
}

/* ── Product summary children ─────────────────────────────── */

/* Star rating */
.single-product .woocommerce-product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    font-size: 0.88rem;
}
.woocommerce-product-rating .star-rating {
    color: #F4B942;
    font-size: 1rem;
}

/* Price — warm, bold */
.single-product div.product p.price,
.single-product div.product span.price {
    font-size: 1.9rem !important;
    font-weight: 800 !important;                   /* stronger weight for visual hierarchy */
    color: var(--color-accent-dark) !important;
    margin-bottom: 0.85rem;
    display: block;
    line-height: 1;
}
.single-product div.product p.price del,
.single-product div.product span.price del {
    font-size: 1.05rem;
    color: var(--color-text-muted) !important;
    font-weight: 400 !important;
    margin-right: 0.4em;
}

/* Short description — muted, readable */
.woocommerce-product-details__short-description {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 0;
    padding-bottom: 0;
}
.woocommerce-product-details__short-description p { margin: 0; }

/* Variations */
.variations_form .variations {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: separate;
    border-spacing: 0 0.55rem;
}
.variations_form .variations td,
.variations_form .variations th {
    padding: 0;
    border: none;
    display: block;
}
.variations_form .variations tr {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.variations_form .variations label {
    font-size: 0.77rem;
    font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.variations_form .variations select {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6em 1em;
    font-size: 0.93rem;
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    width: 100%;
    max-width: 100%; /* fill summary column */
}
.variations_form .variations select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(232, 165, 152, 0.2);
    outline: none;
}
.variations_form .reset_variations {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    text-decoration: underline;
}

/* Add-to-cart form — stacked, full-width button */
form.cart {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;                                   /* –33 % from 0.6rem */
    align-items: stretch;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
}

/* ── Buy box: qty + price row (PHP hooks inject this markup) ─── */
/*
 * PHP (functions.php) wraps the WooCommerce quantity input and the
 * product price in .hcs-qty-price-row — no JS DOM manipulation needed.
 *
 * Layout:
 *   [- 1 +]   [₹ 1,200]   ← flex row
 *   [  Add to Cart  ]      ← full-width button below
 */
.hcs-qty-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    margin-bottom: 0.2rem;
}

/* Reset price margins so it sits flush in the flex row */
.hcs-live-price .price {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: block !important;
}

/* Hide WooCommerce's own variation price block — our row shows it instead */
.single-product .woocommerce-variation-price {
    display: none !important;
}
form.cart .quantity {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
form.cart .quantity input.qty {
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.65em 0.8em !important;
    width: 72px !important;
    text-align: center !important;
    font-size: 1rem !important;
    background: var(--color-surface);
}
/* Primary CTA button — Add to Cart (single product page) */
.single_add_to_cart_button.button,
form.cart .single_add_to_cart_button {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    background: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 1.05em 1.5em !important;
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease) !important;
    box-shadow: 0 4px 18px rgba(232, 165, 152, 0.35) !important;
}
.single_add_to_cart_button.button:hover,
form.cart .single_add_to_cart_button:hover {
    background: var(--color-btn-bg-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 28px rgba(196, 122, 110, 0.42) !important;
}

/* ── Trust signals (per-product meta, displayed above ATC button) ─── */
.hcs-trust-signals {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 0 0.35rem;
}
.hcs-trust-signals__line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.hcs-trust-signals__line::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent-bg, #FDF0EC);
    border: 1.5px solid var(--color-accent-light, #f5d6cf);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23C47A6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

/* ── Info box (short description + trust signals card) ───────────── */
.hcs-info-box {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--sp-sm);
    background: var(--color-surface);
    margin-bottom: 0.75rem;
}
/* Remove outer spacing from children — the box provides padding. */
.hcs-info-box .woocommerce-product-details__short-description {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* Subtle separator between description and trust signals */
.hcs-info-box .hcs-trust-signals {
    padding: 0.5rem 0 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

/* ── Delivery timeline (below ATC form) ───────────────────── */
.hcs-delivery-timeline {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: -0.925rem;
    padding: 0.65rem 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.hcs-delivery-timeline__icon {
    flex-shrink: 0;
    color: var(--color-accent);
    width: 18px;
    height: 18px;
}
.hcs-delivery-timeline__text {
    font-weight: 500;
}
/* Cart/checkout page variant — centered between sections */
.hcs-delivery-timeline--page {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    justify-content: center;
}

/* Product meta (SKU, categories) */
.product_meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.65rem;
}
.product_meta > span { display: block; margin-bottom: 0.3rem; }
.product_meta a { color: var(--color-accent-dark); }

/* Product tabs — single description tab, nav hidden */
.woocommerce-tabs {
    margin-top: 2rem;
    padding-top: 1.5rem;
    /* No border-top: with a sticky gallery the border scrolls into view and
       visually crosses the thumbnail strip. Use margin for separation instead. */
}
.woocommerce-tabs ul.tabs { display: none !important; }
.woocommerce-Tabs-panel { line-height: 1.8; font-size: 0.95rem; margin-top: 0; }
.woocommerce-Tabs-panel h2 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

/* Related products */
.related.products { margin-top: 2.5rem; }
.related.products h2 {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

/* ── Minimum Order Quantity — simple product notice ────────── */
.hcs-min-qty-notice {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 0 0 0.25rem;
    font-style: italic;
}

/* ── Minimum Order Quantity — bulk order UI (variable products) ── */
.hcs-bulk-order {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    overflow: hidden;
    margin-bottom: 0;
}
/* Collapse form bottom margin when bulk-order UI is the last element */
form.variations_form.hcs-bulk-order-active {
    margin-bottom: 0 !important;
}

.hcs-bulk-order__list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.hcs-bulk-order__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 1rem;
    transition: background var(--ease);
}
.hcs-bulk-order__row:hover {
    background: var(--color-accent-bg);
}
.hcs-bulk-order__row + .hcs-bulk-order__row {
    border-top: 1px solid var(--color-border);
}

.hcs-bulk-order__row--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.hcs-bulk-order__label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.hcs-bulk-order__name {
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hcs-bulk-order__price {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}
.hcs-bulk-order__price del {
    opacity: 0.6;
    margin-right: 0.3em;
}
.hcs-bulk-order__price ins {
    text-decoration: none;
    font-weight: 600;
}

.hcs-bulk-order__oos {
    font-size: 0.72rem;
    color: var(--color-error, #dc3545);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hcs-bulk-order__qty {
    flex-shrink: 0;
}

.hcs-bulk-order__input {
    width: 64px;
    text-align: center;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.5em 0.4em;
    font-size: 0.93rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--ease);
}
.hcs-bulk-order__input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(232, 165, 152, 0.2);
    outline: none;
}

.hcs-bulk-order__input--disabled {
    display: inline-block;
    width: 64px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.93rem;
}

/* Footer: summary + button */
.hcs-bulk-order__footer {
    border-top: 1.5px solid var(--color-border);
    padding: 0.85rem 1rem;
    background: var(--color-accent-bg);
}

.hcs-bulk-order__summary {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

.hcs-bulk-order__total {
    font-weight: 700;
    font-size: 0.95rem;
}

.hcs-bulk-order__total-price {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-accent-dark);
}

.hcs-bulk-order__minimum {
    color: var(--color-text-muted);
}

.hcs-bulk-order__remaining {
    color: var(--color-error, #dc3545);
    font-weight: 600;
    font-size: 0.82rem;
    transition: color var(--ease);
}
.hcs-bulk-order__remaining--met {
    color: var(--color-success, #28a745);
}
.hcs-bulk-order__remaining--met-icon {
    font-size: 1em;
    margin-right: 0.15em;
}

/* Submit button — explicit styling identical to single product ATC */
.hcs-bulk-order__submit {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 1.05em 1.5em !important;
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease) !important;
    box-shadow: 0 4px 18px rgba(232, 165, 152, 0.35) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.hcs-bulk-order__submit:hover:not([disabled]) {
    background: var(--color-btn-bg-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 28px rgba(196, 122, 110, 0.42) !important;
}
.hcs-bulk-order__submit[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Error/success notices above bulk order */
.hcs-bulk-order-notice {
    margin-bottom: 0.75rem;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
}

/* ── Responsive: Tablet (≤ 1024px) ─────────────────────────── */
@media (max-width: 1024px) {
    .hk-product-grid {
        grid-template-columns: 55% 1fr;
        column-gap: 2rem;
    }

    /* Unstick gallery on tablet — must use !important to override
       both WooCommerce core (specificity 0-4-2) and our own desktop
       sticky !important above. */
    .hk-product-grid > .woocommerce-product-gallery,
    .hk-product-grid > div.images {
        position: relative !important;
        top: 0 !important;
    }

    /* Title — tablet size */
    .hk-product-grid > .product_title {
        font-size: clamp(1.5rem, 2.8vw, 1.75rem);
    }

    /* Price — scale down so it doesn't overflow the narrower summary */
    .single-product div.product p.price,
    .single-product div.product span.price {
        font-size: 1.45rem !important;
    }

    /* Qty + price row — tighter gap on tablet */
    .hcs-qty-price-row {
        gap: 0.75rem;
    }

    /* Bulk order rows — tighter on tablet */
    .hcs-bulk-order__row {
        gap: 0.65rem;
        padding: 0.55rem 0.85rem;
    }
    .hcs-bulk-order__name {
        font-size: 0.85rem;
    }
    .hcs-bulk-order__price {
        font-size: 0.75rem;
    }
    .hcs-bulk-order__input {
        width: 58px;
        font-size: 0.88rem;
    }
    .hcs-bulk-order__input--disabled {
        width: 58px;
    }
}

/* ── Responsive: Mobile (≤ 768px) ──────────────────────────── */
@media (max-width: 768px) {
    /* Stack to single column: title → gallery → summary */
    .hk-product-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "title"
            "gallery"
            "summary";
        column-gap: 0;
        row-gap: 1rem;
    }

    /* Unstick gallery on mobile */
    .hk-product-grid > .woocommerce-product-gallery,
    .hk-product-grid > div.images {
        position: relative !important;
        top: 0 !important;
    }

    .single-product div.product {
        padding: 0.75rem 0 2rem;
    }

    /* Title — mobile size; margin-bottom: 0 because row-gap: 1rem
       handles spacing between all rows (no double-gap). */
    .hk-product-grid > .product_title {
        font-size: clamp(1.15rem, 5vw, 1.4rem);
        margin-bottom: 0;
    }

    /* Normal in-flow ATC button on mobile — no sticky positioning */
    form.cart .single_add_to_cart_button {
        position: static !important;
        border-radius: var(--radius-pill, 999px) !important;
        box-shadow: 0 4px 18px rgba(232, 165, 152, 0.35) !important;
        transform: none !important;
        padding: 1em 1.5em !important;
    }
    form.cart .single_add_to_cart_button:hover {
        transform: none !important;
    }

    /* Price — mobile size */
    .single-product div.product p.price,
    .single-product div.product span.price {
        font-size: 1.25rem !important;
    }
    .single-product div.product p.price del,
    .single-product div.product span.price del {
        font-size: 0.85rem;
    }

    /* Allow price+qty to wrap on very small screens without overflow */
    .hcs-qty-price-row {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        gap: 0.65rem;
    }
    /* Let price take remaining width; prevent overflow */
    .hcs-live-price {
        flex: 1;
        min-width: 0;
        text-align: right;
    }
    .hcs-live-price .price {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Smaller thumbnails on mobile */
    ol.flex-control-thumbs img {
        width: 58px !important;
        height: 73px !important;         /* 4:5 ratio (58 × 1.25) */
    }

    /* SALE badge slightly smaller on mobile */
    .single-product .woocommerce-product-gallery span.onsale,
    .woocommerce.single-product span.onsale {
        font-size: 0.7rem !important;
        padding: 0.4em 0.85em !important;
    }

    /* Bulk order — mobile adjustments */
    .hcs-bulk-order__list {
        max-height: 260px;
    }
    .hcs-bulk-order__row {
        gap: 0.5rem;
        padding: 0.55rem 0.75rem;
    }
    .hcs-bulk-order__name {
        font-size: 0.82rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .hcs-bulk-order__price {
        font-size: 0.72rem;
    }
    .hcs-bulk-order__input {
        width: 52px;
        font-size: 0.85rem;
        padding: 0.5em 0.3em;
    }
    .hcs-bulk-order__input--disabled {
        width: 52px;
    }
    .hcs-bulk-order__footer {
        padding: 0.75rem 0.75rem;
    }
}

/* ── Responsive: Small mobile (≤ 480px) — product page ─────── */
@media (max-width: 480px) {
    .single-product div.product p.price,
    .single-product div.product span.price {
        font-size: 1.1rem !important;
    }

    /* Stack qty + price vertically */
    .hcs-qty-price-row {
        flex-direction: column;
        align-items: stretch;
    }
    .hcs-live-price {
        text-align: left;
    }

    /* Variation selects full-width */
    .variations_form .variations select {
        font-size: 0.88rem;
        padding: 0.55em 0.8em;
    }

    /* Bulk order rows: keep horizontal but tighter */
    .hcs-bulk-order__row {
        gap: 0.4rem;
        padding: 0.5rem 0.6rem;
    }
    .hcs-bulk-order__name {
        font-size: 0.78rem;
    }
    .hcs-bulk-order__price {
        font-size: 0.68rem;
    }
    .hcs-bulk-order__input {
        width: 48px;
        padding: 0.45em 0.25em;
        font-size: 0.82rem;
    }
    .hcs-bulk-order__input--disabled {
        width: 48px;
    }
}

/* ============================================================
   CART & CHECKOUT — layout and page header
   ============================================================ */

/*
 * Cart & Checkout use page.php → wrapper is .entry-content.container.
 * Override the base .entry-content max-width (700px) and provide
 * consistent container padding matching the Shop page's .container class.
 */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
    max-width: 960px !important;
    padding-inline: var(--container-px) !important;
    padding-bottom: 3rem !important;
    margin-inline: auto;
}

/* Disabled minus button for grouped min-qty enforcement */
.wc-block-components-quantity-selector__button--minus[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Disabled checkout button when min-qty rule is violated.
   The body-level class survives React re-renders of the button. */
.hcs-min-qty-violated .wc-block-cart__submit-button,
.wc-block-cart__submit-button.hcs-checkout-blocked {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Min-qty violation notice below checkout button */
.hcs-cart-min-qty-notice {
    margin-top: 0.65rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-error, #dc3545);
    background: #fef2f2;
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: var(--radius-md);
    text-align: center;
}

/* Compact page header for cart/checkout.
   These pages use page.php (NOT woocommerce.php), so the header is
   .page-header from page.php — not .woocommerce-page-header.
   Base .page-header in style.css: padding: var(--sp-xl) 0 (56px),
   margin-bottom: var(--sp-xl) (56px). Override all. */
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header {
    padding: 0.6rem 0 0.4rem;
    margin-bottom: 0;
    text-align: center;
}
body.woocommerce-cart .page-header h1,
body.woocommerce-cart .page-header .page-title,
body.woocommerce-checkout .page-header h1,
body.woocommerce-checkout .page-header .page-title {
    font-size: 2.15rem;
    font-weight: 700;
    margin: 0;
}
/* Let WC Blocks alignwide use full container width */
.woocommerce-cart .entry-content .alignwide,
.woocommerce-checkout .entry-content .alignwide,
.woocommerce-cart .entry-content .wp-block-woocommerce-cart,
.woocommerce-checkout .entry-content .wp-block-woocommerce-checkout {
    max-width: 100% !important;
    width: 100% !important;
}

/* ============================================================
   CART PAGE
   ============================================================ */

/* ── Cart table ─────────────────────────────────────────────── */
.woocommerce-cart table.cart {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 1px 4px rgba(61, 43, 39, 0.04);
}
.woocommerce-cart table.cart th {
    background: var(--color-accent-bg);
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75em 1.2em;
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-cart table.cart td {
    padding: 1em 1.2em;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.93rem;
}
.woocommerce-cart table.cart tr:last-child td { border-bottom: none; }

/* Product thumbnail */
.woocommerce-cart table.cart .product-thumbnail img {
    border-radius: var(--radius-md);
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
    border: 1px solid var(--color-border);
}

/* Product name */
.woocommerce-cart table.cart .product-name a {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color var(--ease);
}
.woocommerce-cart table.cart .product-name a:hover { color: var(--color-accent-dark); }

/* Price column */
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
    font-weight: 600;
    color: var(--color-text);
}
.woocommerce-cart table.cart .product-subtotal {
    color: var(--color-accent-dark);
    font-weight: 700;
}

/* Qty input */
.woocommerce-cart table.cart input.qty {
    width: 60px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.4em 0.5em;
    text-align: center;
    font-size: 0.9rem;
    transition: border-color var(--ease);
}
.woocommerce-cart table.cart input.qty:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 165, 152, 0.15);
}

/* Remove button */
.woocommerce-cart table.cart a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--color-text-muted) !important;
    font-size: 1.15rem;
    line-height: 1;
    transition: color var(--ease), background var(--ease);
}
.woocommerce-cart table.cart a.remove:hover {
    color: var(--color-error) !important;
    background: rgba(220, 53, 69, 0.08);
}

/* Actions row (coupon + update cart) */
.woocommerce-cart table.cart td.actions {
    background: var(--color-accent-bg);
    padding: 1em 1.2em;
}
.woocommerce-cart table.cart td.actions .coupon {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}
.woocommerce-cart-form__contents .coupon input[type="text"] {
    width: auto;
    min-width: 180px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.55em 1em;
    font-size: 0.88rem;
    background: #fff;
    transition: border-color var(--ease);
}
.woocommerce-cart-form__contents .coupon input[type="text"]:focus {
    border-color: var(--color-accent);
    outline: none;
}
.woocommerce-cart-form__contents .coupon .button,
.woocommerce-cart-form__contents [name="update_cart"] {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.55em 1.3em !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background var(--ease), border-color var(--ease) !important;
}
.woocommerce-cart-form__contents .coupon .button:hover,
.woocommerce-cart-form__contents [name="update_cart"]:hover {
    background: var(--color-accent-bg) !important;
    border-color: var(--color-accent) !important;
}
.woocommerce-cart-form__contents [name="update_cart"][disabled] {
    opacity: 0.45;
    cursor: not-allowed !important;
}

/* ── Cart totals ────────────────────────────────────────────── */
.cart-collaterals { margin-top: 2rem; }
.woocommerce .cart_totals {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    max-width: 420px;
    margin-left: auto;
    box-shadow: 0 1px 4px rgba(61, 43, 39, 0.04);
}
.woocommerce .cart_totals h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--color-text);
    padding-bottom: 0.65rem;
    border-bottom: 2px solid var(--color-border);
}
.woocommerce .cart_totals table { width: 100%; border-collapse: collapse; }
.woocommerce .cart_totals table th {
    text-align: left;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
    padding: 0.6em 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.93rem;
}
.woocommerce .cart_totals table tr:last-child th,
.woocommerce .cart_totals table tr:last-child td { border-bottom: none; }
.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-accent-dark);
    padding-top: 0.85em;
    border-top: 2px solid var(--color-border);
    border-bottom: none;
}
/* Proceed to Checkout — Block-based cart button
   WC Blocks renders this as .wc-block-cart__submit-button (a .wc-block-components-button),
   NOT the classic .wc-proceed-to-checkout a.checkout-button. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-button.wc-block-components-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wc-block-cart .wc-block-cart__submit-button,
.wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    background: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 1.05em 1.5em !important;
    font-family: var(--font-body) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(232, 165, 152, 0.35) !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    opacity: 1 !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button.wc-block-components-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.wc-block-cart .wc-block-cart__submit-button:hover,
.wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--color-btn-bg-dark) !important;
    color: var(--color-btn-text) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 28px rgba(196, 122, 110, 0.42) !important;
}
.wc-block-cart__submit-button:focus,
.wc-block-cart__submit-button.wc-block-components-button:focus {
    background: var(--color-btn-bg) !important;
    box-shadow: 0 0 0 2px var(--color-btn-bg-dark), 0 4px 18px rgba(232, 165, 152, 0.35) !important;
    outline: none !important;
}

/* Empty cart */
.woocommerce-cart .cart-empty {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-muted);
    padding: 2rem 0;
}
.woocommerce-cart .return-to-shop a {
    display: inline-block;
    background: var(--color-btn-bg);
    color: var(--color-btn-text);
    border-radius: var(--radius-pill);
    padding: 0.7em 1.8em;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background var(--ease), transform var(--ease);
}
.woocommerce-cart .return-to-shop a:hover {
    background: var(--color-btn-bg-dark);
    transform: translateY(-2px);
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */

/* Two-column layout: billing left, order review right (desktop) */
.woocommerce-checkout .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
    width: 100%;
    float: none;
}

/* Form fields */
.woocommerce-checkout #customer_details,
.woocommerce form .form-row {
    margin-bottom: 0.85rem;
}
.woocommerce form .form-row label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.3em;
    display: block;
}
.woocommerce form .form-row label .required {
    color: var(--color-accent-dark);
}
.woocommerce form .form-row input,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6em 0.9em;
    font-size: 0.93rem;
    width: 100%;
    background: #fff;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(232, 165, 152, 0.15);
    outline: none;
}

/* Section headings */
.woocommerce-checkout h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    margin-bottom: 1rem;
    margin-top: 0;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.6rem;
}
.woocommerce-checkout h3#ship-to-different-address {
    font-size: 0.95rem;
    border-bottom: none;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

/* Checkbox/radio styling */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] {
    width: auto !important;
    margin-right: 0.4em;
}

/* Additional notes */
.woocommerce-additional-fields h3 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
}
.woocommerce-additional-fields textarea {
    min-height: 80px;
    resize: vertical;
}

/* ── Order review on checkout ───────────────────────────────── */
#order_review_heading {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-text);
    margin-bottom: 0.85rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0.6rem;
}
.woocommerce-checkout-review-order {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 1px 4px rgba(61, 43, 39, 0.04);
}
.woocommerce-checkout-review-order-table {
    width: 100%;
}
.woocommerce-checkout-review-order-table thead th {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: 0 0 0.5em;
    border-bottom: 1px solid var(--color-border);
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 0.65em 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}
.woocommerce-checkout-review-order-table .cart_item td {
    font-size: 0.88rem;
}
.woocommerce-checkout-review-order-table .cart_item .product-name {
    color: var(--color-text);
    font-weight: 500;
}
.woocommerce-checkout-review-order-table .cart_item .product-total {
    font-weight: 600;
    text-align: right;
}
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--color-accent-dark);
    padding-top: 0.75em;
    border-top: 2px solid var(--color-border);
    border-bottom: none;
}

/* ── Place order button ─────────────────────────────────────── */
#place_order {
    display: block !important;
    width: 100% !important;
    background: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.9em 1.5em !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    margin-top: 1.25rem !important;
    transition: background var(--ease), transform var(--ease), box-shadow var(--ease) !important;
    box-shadow: 0 2px 8px rgba(61, 43, 39, 0.12);
}
#place_order:hover {
    background: var(--color-btn-bg-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(61, 43, 39, 0.18) !important;
}

/* ── Payment section ────────────────────────────────────────── */
#payment {
    background: none !important;
    border-radius: 0 !important;
    margin-top: 0.5rem;
}
#payment ul.payment_methods {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 1rem;
    overflow: hidden;
    background: #fff;
}
#payment ul.payment_methods li {
    padding: 0.85em 1.1em !important;
    border-bottom: 1px solid var(--color-border) !important;
    transition: background var(--ease);
}
#payment ul.payment_methods li:last-child { border-bottom: none !important; }
#payment ul.payment_methods li:hover { background: var(--color-accent-bg); }
#payment ul.payment_methods label {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.93rem;
}
#payment .payment_box {
    background: var(--color-accent-bg) !important;
    border-radius: var(--radius-md);
    padding: 0.75em 1em !important;
    font-size: 0.88rem;
    color: var(--color-text-muted);
}
#payment .payment_box::before {
    border-bottom-color: var(--color-accent-bg) !important;
}

/* Privacy / terms */
.woocommerce-privacy-policy-text {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}
.woocommerce-privacy-policy-text a {
    color: var(--color-accent-dark);
}

/* Login / coupon toggle on checkout */
.woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-form-coupon-toggle .woocommerce-info {
    font-size: 0.9rem;
    padding: 0.85em 1.2em;
    margin-bottom: 1rem;
}
.woocommerce-form-login,
.checkout_coupon {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

/* --- Cancel Window Notices (View Order page) --- */
.hcs-cancel-notice {
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.hcs-cancel-notice--eligible {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}
.hcs-cancel-notice--expired {
    background: #fefce8;
    border: 1px solid #fef08a;
    color: #854d0e;
}
.hcs-cancel-notice__time {
    font-weight: 600;
}
.hcs-cancel-notice__action {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.5rem 1.25rem;
    background: var(--clr-error, #dc2626);
    color: #fff;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.hcs-cancel-notice__action:hover {
    opacity: 0.85;
    color: #fff;
}

/* ============================================================
   CART & CHECKOUT — Responsive
   ============================================================ */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .woocommerce-cart .entry-content,
    .woocommerce-checkout .entry-content {
        max-width: 100% !important;
        padding-inline: 1.5rem !important;
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .woocommerce-cart .entry-content,
    .woocommerce-checkout .entry-content {
        padding-inline: 1rem !important;
    }

    /* Cart table → stacked card layout */
    .woocommerce-cart table.cart,
    .woocommerce-cart table.cart thead,
    .woocommerce-cart table.cart tbody,
    .woocommerce-cart table.cart th,
    .woocommerce-cart table.cart td,
    .woocommerce-cart table.cart tr {
        display: block;
        width: 100%;
    }
    .woocommerce-cart table.cart thead { display: none; }
    .woocommerce-cart table.cart tr {
        border-bottom: 1px solid var(--color-border);
        padding: 0.75rem 1rem;
        position: relative;
    }
    .woocommerce-cart table.cart tr:last-child { border-bottom: none; }
    .woocommerce-cart table.cart td {
        padding: 0.3em 0;
        border-bottom: none;
        text-align: left !important;
    }
    .woocommerce-cart table.cart .product-remove {
        position: absolute;
        top: 0.75rem;
        right: 0.5rem;
    }
    .woocommerce-cart table.cart .product-thumbnail {
        display: inline-block;
        vertical-align: top;
    }
    .woocommerce-cart table.cart .product-thumbnail img {
        width: 60px !important;
        height: 60px !important;
    }
    .woocommerce-cart table.cart td.actions {
        padding: 0.75rem 1rem;
    }
    .woocommerce-cart table.cart td.actions .coupon {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .woocommerce-cart-form__contents .coupon input[type="text"] {
        min-width: 0;
        flex: 1;
    }

    /* Cart totals full width */
    .woocommerce .cart_totals {
        max-width: 100%;
        margin-left: 0;
    }

    /* Checkout columns stacked */
    .woocommerce-checkout .col2-set {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Page header */
    body.woocommerce-cart .page-header,
    body.woocommerce-checkout .page-header {
        padding: 0.35rem 0 0.2rem;
        margin-bottom: 0;
    }
    body.woocommerce-cart .page-header h1,
    body.woocommerce-cart .page-header .page-title,
    body.woocommerce-checkout .page-header h1,
    body.woocommerce-checkout .page-header .page-title {
        font-size: 1.3rem;
    }
}

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    .woocommerce-cart .entry-content,
    .woocommerce-checkout .entry-content {
        padding-inline: 0.75rem !important;
    }
}

/* ============================================================
   MY ACCOUNT
   ============================================================ */
.woocommerce-MyAccount-navigation {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 2rem;
}
.woocommerce-MyAccount-navigation ul { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation a {
    display: block;
    padding: 0.5em 1.1em;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.9rem;
    transition: background var(--ease), color var(--ease);
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
}

/* ============================================================
   STAR RATINGS
   ============================================================ */
.star-rating span::before,
.star-rating::before {
    color: #F4B942 !important;
}

/* ============================================================
   PRODUCT BADGES
   ============================================================ */
.woocommerce span.onsale {
    background: var(--color-sale-bg) !important;
    color: var(--color-sale-text) !important;
    border-radius: var(--radius-pill) !important;
    min-height: auto !important;
    line-height: 1 !important;
    padding: 0.3em 0.8em !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ============================================================
   ITEM META in cart/checkout (personalization display)
   ============================================================ */
.woocommerce-cart-form .cart_item .wc-item-meta,
dl.variation,
.wc-item-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 0.4rem;
}
.wc-item-meta dt, dl.variation dt { font-weight: 600; }

/* ============================================================
   CUSTOMIZABLE BADGE (product listing cards — CPP plugin)
   ============================================================ */
.cpp-customizable-badge {
    display: block;
    margin: 0 1rem 0.2rem;
    padding: 0.25em 0.6em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-customizable-badge-text);
    background: var(--color-customizable-badge-bg);
    border: none;
    border-radius: var(--radius-pill);
}

/* ============================================================
   PREMIUM PRODUCT CARD (.hcs-product-card)
   Shared by the shop archive grid and homepage carousel.
   Custom markup with image overlays, 2-line title clamp,
   and prominent ATC button pinned to the bottom.
   ============================================================ */
.hcs-product-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    transition: transform var(--ease), box-shadow var(--ease);
}
.hcs-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

/* ── Card link — wraps image + content ─────────────────────── */
.hcs-product-card__link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
    flex: 1 1 auto;
}

/* ── Image wrapper — aspect-ratio container with overlays ──── */
.hcs-product-card__image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--color-bg, #f7f3f0);
}
.hcs-product-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    transition: transform 0.45s ease !important;
}
.hcs-product-card:hover .hcs-product-card__image img {
    transform: scale(1.05);
}

/* Sale badge — top-left overlay inside image.
   WooCommerce defaults (woocommerce.scss:483/519) set the badge to
   border-radius:100%, min-height:3.236em, top:0;right:0;left:auto;
   margin:-0.5em — all of which must be overridden to prevent the badge
   from becoming a clipped circle outside the overflow:hidden wrapper. */
.hcs-product-card__image .onsale {
    position: absolute !important;
    top: 0.75rem !important;
    left: 0.75rem !important;
    right: auto !important;
    margin: 0 !important;
    background: var(--color-sale-bg) !important;
    color: var(--color-sale-text) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.3em 0.75em !important;
    border-radius: var(--radius-pill) !important;
    z-index: 5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    display: inline-block !important;
}

/* Customizable badge — top-left overlay inside image (below sale badge) */
.hcs-product-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 4;
    display: inline-block;
    padding: 0.3em 0.75em;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--color-customizable-badge-text, #fff);
    background: var(--color-customizable-badge-bg, rgba(61, 43, 39, 0.82));
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
/* When both sale + customizable badges are present, stack vertically */
.hcs-product-card__image .onsale + .hcs-product-card__badge {
    top: 2.35rem;
}

/* ── Content area — title + price ──────────────────────────── */
.hcs-product-card__content {
    padding: 0.85rem 1rem 0.5rem;
}
.hcs-product-card__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.3rem;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--ease);
}
.hcs-product-card:hover .hcs-product-card__title {
    color: var(--color-accent-dark);
}
.hcs-product-card__price {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-accent-dark);
}
.hcs-product-card__price del {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.85rem;
    margin-right: 0.3em;
}
.hcs-product-card__price ins {
    text-decoration: none;
}

/* ── ATC button container ──────────────────────────────────── */
.hcs-product-card__actions {
    padding: 0 1rem 1rem;
    margin-top: auto;
}
.hcs-product-card__actions .button,
.hcs-product-card__actions .add_to_cart_button {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.65em 1em !important;
    background: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    border: none !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background var(--ease), transform var(--ease) !important;
    text-decoration: none !important;
}
.hcs-product-card__actions .button:hover,
.hcs-product-card__actions .add_to_cart_button:hover {
    background: var(--color-btn-bg-dark) !important;
}
.hcs-product-card__actions .added_to_cart {
    display: none !important;
}

/* ============================================================
   FEATURED PRODUCTS CAROUSEL (Homepage)
   ============================================================ */

/* ── Carousel wrapper — positions arrows relative to track ─── */
.hcs-carousel {
    position: relative;
}

/* ── Scroll track — the overflow container ─────────────────── */
.hcs-carousel__track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar on all browsers */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hcs-carousel__track::-webkit-scrollbar {
    display: none;
}

/* ── Product list — flexbox row with scroll-snap ───────────── */
.hcs-carousel__list.products {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 1.5rem !important;
    padding: 0.5rem 0 !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory;
}

/* ── Each card — fixed width fraction for 4-up desktop ─────── */
.hcs-carousel__list.products > li.product {
    flex: 0 0 calc((100% - 4.5rem) / 4) !important;
    max-width: calc((100% - 4.5rem) / 4) !important;
    scroll-snap-align: start;
    float: none !important;
    margin: 0 !important;
}

/* ── Arrow buttons — frosted glass circles (match gallery) ─── */
.hcs-carousel__prev,
.hcs-carousel__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 14px rgba(61, 43, 39, 0.18);
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.hcs-carousel__prev { left: -22px; }
.hcs-carousel__next { right: -22px; }
.hcs-carousel__prev:hover,
.hcs-carousel__next:hover {
    background: rgba(255, 255, 255, 0.97);
    transform: translateY(-50%) scale(1.08);
}
.hcs-carousel__prev svg,
.hcs-carousel__next svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

/* Disabled state — arrow at scroll boundary */
.hcs-carousel__prev[disabled],
.hcs-carousel__next[disabled] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

/* ── Responsive: Tablet (max 1024px) — 2 visible cards ─────── */
@media (max-width: 1024px) {
    .hcs-carousel__list.products > li.product {
        flex: 0 0 calc((100% - 1.5rem) / 2) !important;
        max-width: calc((100% - 1.5rem) / 2) !important;
    }
    .hcs-carousel__prev { left: 0.5rem; }
    .hcs-carousel__next { right: 0.5rem; }
}

/* ── Responsive: Mobile (max 520px) — 1 card + peek ───────── */
@media (max-width: 520px) {
    .hcs-carousel__list.products > li.product {
        flex: 0 0 85% !important;
        max-width: 85% !important;
    }
    .hcs-carousel__prev,
    .hcs-carousel__next {
        display: none;
    }
}

/* ============================================================
   LOAD MORE BUTTON (Shop Archives)
   ============================================================ */
.hcs-load-more {
    text-align: center;
    margin-top: 2.5rem;
}
.hcs-load-more__btn {
    display: inline-block;
    padding: 0.8em 2.5em;
    background: var(--color-accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease);
}
.hcs-load-more__btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
}
.hcs-load-more__btn[disabled] {
    cursor: wait;
    opacity: 0.7;
}
.hcs-load-more__btn.is-loading {
    pointer-events: none;
}
.hcs-load-more__btn.is-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 0.6em;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hcs-spin 0.6s linear infinite;
    vertical-align: middle;
}
@keyframes hcs-spin {
    to { transform: rotate(360deg); }
}
.hcs-load-more__end {
    display: inline-block;
    padding: 0.6em 1.5em;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}