/* =========================================================================
   HATAN — PRODUCT CARD SYSTEM v3.1
   Two card styles:
     .hc--image      → Full-bleed image card with overlay name + tasting strip
     .hc--editorial  → Image-free typographic label card (printed label feel)
   Design language: Aesop × Aurem — calm, editorial, no abrupt animation
   ========================================================================= */

/* ──────────────────────────────────────────
   PRODUCT GRID
   ────────────────────────────────────────── */
ul.products,
.products-grid.woocommerce-loop {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ──────────────────────────────────────────
   BASE CARD
   ────────────────────────────────────────── */
.hc {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color-bg, #F5F0E8);
    /* Subtle shadow lift — no abrupt translateY pop */
    transition: box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hc:hover {
    box-shadow: 0 12px 40px rgba(53, 38, 31, 0.09);
}
.hc__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
    outline-offset: 3px;
}

/* Add-to-cart: visible below card on hover, hidden on touch */
.hc-atc-wrap {
    padding: 0 0 4px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.35s ease;
}
.hc:hover .hc-atc-wrap {
    opacity: 1;
    max-height: 60px;
}
/* Remove add-to-cart reveal on touch devices */
@media (hover: none) {
    .hc-atc-wrap {
        opacity: 1;
        max-height: none;
        overflow: visible;
        padding: 0 0 12px;
    }
}
.hc-atc-wrap .button {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
    background: var(--color-primary, #35261F);
    color: var(--color-accent, #C1B094);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-family: 'Cairo', sans-serif;
}
.hc-atc-wrap .button:hover {
    background: var(--color-secondary, #767154);
    color: #fff;
}

/* ══════════════════════════════════════════════════════
   IMAGE CARD  (.hc--image)
   ══════════════════════════════════════════════════════ */

/* Tasting notes strip */
.hc--image .hc-tasting-strip {
    padding: 10px 18px 9px;
    font-size: 0.60rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-secondary, #767154);
    text-align: center;
    border-bottom: 1px solid rgba(118, 113, 84, 0.13);
    line-height: 1;
    background: var(--color-bg, #F5F0E8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Cairo', sans-serif;
}

/* Image frame */
.hc--image .hc-image-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--color-surface, #EDE7DA);
}
.hc--image .hc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Subtle image zoom — no pop */
.hc--image:hover .hc-img {
    transform: scale(1.03);
}
/* No scale on touch */
@media (hover: none) {
    .hc--image:hover .hc-img {
        transform: none;
    }
}

/* Placeholder */
.hc--image .hc-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface, #EDE7DA);
}
.hc--image .hc-placeholder-text {
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    color: rgba(53, 38, 31, 0.08);
    font-family: 'Cairo', sans-serif;
    letter-spacing: 0;
    text-align: center;
    padding: 16px;
    line-height: 1;
}

/* Name + origin overlay */
.hc--image .hc-name-overlay {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    padding: 52px 16px 14px;
    background: linear-gradient(to top, rgba(25, 15, 10, 0.78) 0%, rgba(25, 15, 10, 0) 100%);
}
.hc--image .hc-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 2px;
    color: #F5F0E8;
    font-family: 'Cairo', sans-serif;
}
.hc--image .hc-origin-tag {
    display: block;
    font-size: 0.58rem;
    font-weight: 500;
    color: rgba(193, 176, 148, 0.85);
    letter-spacing: 0;
    line-height: 1;
    font-family: 'Cairo', sans-serif;
}

/* LOT badge */
.hc--image .hc-lot {
    position: absolute;
    top: 10px;
    inset-inline-start: 12px;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-accent, #C1B094);
    background: var(--color-primary, #35261F);
    padding: 3px 7px;
    line-height: 1.4;
    font-family: 'Cairo', sans-serif;
}

/* Status badges */
.hc-badge {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0;
    padding: 3px 8px;
    line-height: 1.4;
    font-family: 'Cairo', sans-serif;
}
.hc-badge--sale { background: var(--color-secondary, #767154); color: #F5F0E8; }
.hc-badge--oos  { background: #7A2E2E; color: #F5F0E8; }

/* Card body */
.hc--image .hc-body {
    padding: 16px 18px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.hc--image .hc-descriptor {
    font-size: 0.75rem;
    color: var(--color-text-light, #7A6E63);
    margin: 0;
    line-height: 1.65;
    font-family: 'Cairo', sans-serif;
}

/* Image card footer */
.hc--image .hc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 18px;
    margin-top: auto;
    border-top: 1px solid rgba(118, 113, 84, 0.12);
    margin-top: 14px;
}
.hc--image .hc-price .price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #35261F);
    line-height: 1;
}
.hc--image .hc-price del      { font-size: 0.75rem; color: var(--color-text-light, #9A8C82); }
.hc--image .hc-price ins       { text-decoration: none; }
.hc--image .hc-cta-btn {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-secondary, #767154);
    letter-spacing: 0;
    border-bottom: 1px solid rgba(118, 113, 84, 0.35);
    padding-bottom: 1px;
    transition: color 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}
.hc--image:hover .hc-cta-btn {
    color: var(--color-primary, #35261F);
    border-color: var(--color-primary, #35261F);
}

/* ══════════════════════════════════════════════════════
   EDITORIAL CARD  (.hc--editorial)
   ══════════════════════════════════════════════════════ */
.hc--editorial {
    background: var(--color-bg, #F5F0E8);
    border: 1px solid rgba(118, 113, 84, 0.18);
    color: var(--color-text, #2A1F1A);
}
.hc--editorial.hc--dark {
    background: var(--color-primary, #35261F);
    border-color: rgba(193, 176, 148, 0.12);
    color: #F5F0E8;
}

/* Top mark */
.he-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(118, 113, 84, 0.12);
}
.hc--dark .he-top { border-bottom-color: rgba(193, 176, 148, 0.08); }
.he-brand {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--color-secondary, #767154);
    line-height: 1;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-brand { color: rgba(193, 176, 148, 0.60); }
.he-lot,
.he-origin-tag {
    font-size: 0.55rem;
    font-weight: 500;
    color: var(--color-secondary, #767154);
    letter-spacing: 0;
    line-height: 1;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-lot,
.hc--dark .he-origin-tag { color: rgba(193, 176, 148, 0.50); }

/* Ghost region text */
.he-ghost-region {
    padding: 20px 18px 2px;
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    color: rgba(53, 38, 31, 0.06);
    font-family: 'Cairo', sans-serif;
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    pointer-events: none;
    user-select: none;
}
.hc--dark .he-ghost-region { color: rgba(245, 240, 232, 0.05); }

/* Product info */
.he-info {
    padding: 14px 18px 6px;
}
.he-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 4px;
    color: var(--color-text, #2A1F1A);
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-title { color: #F5F0E8; }
.he-location {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--color-secondary, #767154);
    letter-spacing: 0;
    margin: 0;
    line-height: 1.5;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-location { color: rgba(193, 176, 148, 0.60); }

/* Specs: Process / Variety / Altitude */
.he-specs {
    padding: 0 18px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid rgba(118, 113, 84, 0.10);
}
.hc--dark .he-specs { border-bottom-color: rgba(193, 176, 148, 0.07); }
.he-spec {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--color-text, #35261F);
    letter-spacing: 0;
    line-height: 1.4;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-spec { color: rgba(245, 240, 232, 0.88); }
.he-spec--light {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-secondary, #767154);
}
.hc--dark .he-spec--light { color: rgba(193, 176, 148, 0.60); }

/* Tasting notes */
.he-tasting {
    padding: 12px 18px 6px;
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--color-secondary, #767154);
    letter-spacing: 0;
    line-height: 1.7;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-tasting { color: rgba(193, 176, 148, 0.55); }

/* Roast tag */
.he-roast-wrap { padding: 0 18px 12px; }
.he-roast-tag {
    display: inline-block;
    font-size: 0.60rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--color-secondary, #767154);
    border: 1px solid rgba(118, 113, 84, 0.28);
    padding: 3px 10px;
    line-height: 1.5;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-roast-tag {
    color: rgba(193, 176, 148, 0.60);
    border-color: rgba(193, 176, 148, 0.18);
}

/* Editorial footer */
.he-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px 14px;
    border-top: 1px solid rgba(118, 113, 84, 0.12);
    margin-top: auto;
}
.hc--dark .he-footer { border-top-color: rgba(193, 176, 148, 0.08); }
.he-price .price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary, #35261F);
    line-height: 1;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-price .price { color: var(--color-accent, #C1B094); }
.he-price del { font-size: 0.75rem; color: #9A8C82; }
.he-price ins { text-decoration: none; }
.he-cta-btn {
    font-size: 0.65rem;
    font-weight: 600;
    color: #F5F0E8;
    background: var(--color-primary, #35261F);
    padding: 7px 14px;
    line-height: 1;
    letter-spacing: 0;
    transition: background 0.25s ease;
    white-space: nowrap;
    font-family: 'Cairo', sans-serif;
}
.hc--editorial:hover .he-cta-btn { background: var(--color-secondary, #767154); }
.hc--dark .he-cta-btn { background: var(--color-accent, #C1B094); color: var(--color-primary, #35261F); }
.hc--dark:hover .he-cta-btn { background: #F5F0E8; }

/* Brand footnote */
.he-footnote {
    text-align: center;
    padding: 6px 18px 12px;
    font-size: 0.50rem;
    font-weight: 500;
    letter-spacing: 0;
    color: rgba(118, 113, 84, 0.28);
    line-height: 1;
    font-family: 'Cairo', sans-serif;
}
.hc--dark .he-footnote { color: rgba(193, 176, 148, 0.18); }

/* ──────────────────────────────────────────
   RELATED / UPSELLS
   ────────────────────────────────────────── */
.related.products ul.products,
.upsells.products ul.products {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */
@media (max-width: 1100px) {
    ul.products,
    .products-grid.woocommerce-loop {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 900px) {
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile — 2 columns */
@media (max-width: 640px) {
    ul.products,
    .products-grid.woocommerce-loop {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Image card compact */
    .hc--image .hc-title        { font-size: 0.92rem; }
    .hc--image .hc-tasting-strip{ font-size: 0.56rem; padding: 8px 12px; }
    .hc--image .hc-body         { padding: 12px 12px 0; }
    .hc--image .hc-footer       { padding: 10px 12px 14px; }
    .hc--image .hc-descriptor   { font-size: 0.72rem; }

    /* Editorial card compact */
    .he-top           { padding: 10px 12px 9px; }
    .he-ghost-region  { padding: 14px 12px 2px; font-size: 1.6rem; }
    .he-info          { padding: 10px 12px 4px; }
    .he-title         { font-size: 0.88rem; }
    .he-specs         { padding: 0 12px 8px; }
    .he-tasting       { padding: 8px 12px 4px; font-size: 0.65rem; }
    .he-roast-wrap    { padding: 0 12px 8px; }
    .he-footer        { padding: 10px 12px 12px; }
    .he-footnote      { padding: 4px 12px 8px; }
}

/* Very small — 1 column */
@media (max-width: 360px) {
    ul.products,
    .products-grid.woocommerce-loop {
        grid-template-columns: 1fr;
    }
    .related.products ul.products,
    .upsells.products ul.products {
        grid-template-columns: 1fr;
    }
}

/* Final refinement pass: denser packaging-style cards */
.hc {
    border: 1px solid rgba(var(--color-border-rgb, 216, 207, 196), 0.78);
    box-shadow:
        0 10px 24px rgba(var(--color-primary-rgb, 53, 38, 31), 0.035),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
}

.hc:hover,
.hc:focus-within {
    box-shadow:
        0 14px 30px rgba(var(--color-primary-rgb, 53, 38, 31), 0.045),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.hc-atc-wrap {
    padding: 0;
}

.hc-atc-wrap .button {
    padding: 0.68rem 0.95rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    background: rgba(var(--color-primary-rgb, 53, 38, 31), 0.94);
    color: var(--color-bg, #F5F0E8);
}

.hc-atc-wrap .button:hover {
    background: rgba(var(--color-primary-rgb, 53, 38, 31), 1);
    color: var(--color-bg, #F5F0E8);
}

.hc--image .hc-tasting-strip,
.hc--editorial .he-top {
    min-height: 2.45rem;
    padding-inline: 0.95rem;
}

.hc--image .hc-tasting-strip {
    padding-top: 0.78rem;
    padding-bottom: 0.72rem;
    font-size: 0.61rem;
    color: rgba(var(--color-secondary-rgb, 118, 113, 84), 0.88);
    border-bottom-color: rgba(var(--color-border-rgb, 216, 207, 196), 0.72);
    background: rgba(var(--color-bg-rgb, 245, 240, 232), 0.78);
}

.hc--image .hc-image-frame {
    aspect-ratio: 1 / 1.02;
    background:
        linear-gradient(180deg, rgba(var(--color-surface-rgb, 237, 231, 218), 0.92) 0%, rgba(var(--color-bg-rgb, 245, 240, 232), 0.72) 100%);
}

.hc--image .hc-img {
    transform: scale(0.92);
    transform-origin: center center;
}

.hc--image:hover .hc-img {
    transform: scale(0.945);
}

.hc--image .hc-img-placeholder {
    background:
        linear-gradient(180deg, rgba(var(--color-surface-rgb, 237, 231, 218), 0.96) 0%, rgba(var(--color-bg-rgb, 245, 240, 232), 0.72) 100%);
}

.hc--image .hc-placeholder-text {
    font-size: clamp(1.15rem, 2vw, 1.75rem);
    color: rgba(var(--color-primary-rgb, 53, 38, 31), 0.12);
    line-height: 1.2;
}

.hc--image .hc-name-overlay {
    padding: 3.2rem 0.95rem 0.85rem;
    background: linear-gradient(to top, rgba(var(--color-primary-rgb, 53, 38, 31), 0.78) 0%, rgba(var(--color-primary-rgb, 53, 38, 31), 0.06) 100%);
}

.hc--image .hc-title {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.18rem;
}

.hc--image .hc-origin-tag {
    font-size: 0.62rem;
    line-height: 1.5;
    color: rgba(var(--color-bg-rgb, 245, 240, 232), 0.8);
}

.hc-badge {
    top: 0.8rem;
    inset-inline-end: 0.8rem;
    font-size: 0.54rem;
    padding: 0.22rem 0.42rem;
}

.hc--image .hc-body {
    padding: 0;
    gap: 0;
}

.hc--image .hc-footer,
.hc--editorial .he-footer {
    align-items: end;
    padding-inline: 0.95rem;
}

.hc--image .hc-footer {
    padding-top: 0.82rem;
    padding-bottom: 0.88rem;
    margin-top: 0;
    border-top-color: rgba(var(--color-border-rgb, 216, 207, 196), 0.66);
}

.hc--image .hc-price .price,
.hc--editorial .he-price .price {
    font-size: 0.98rem;
}

.hc--image .hc-cta-btn,
.hc--editorial .he-cta-btn {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
}

.hc--editorial {
    background:
        linear-gradient(180deg, rgba(var(--color-bg-rgb, 245, 240, 232), 0.98) 0%, rgba(var(--color-surface-rgb, 237, 231, 218), 0.9) 100%);
}

.hc--editorial.hc--dark {
    background:
        linear-gradient(180deg, rgba(var(--color-primary-rgb, 53, 38, 31), 0.98) 0%, rgba(var(--color-primary-rgb, 53, 38, 31), 0.94) 100%);
}

.he-top {
    padding-top: 0.8rem;
    padding-bottom: 0.68rem;
    border-bottom-color: rgba(var(--color-border-rgb, 216, 207, 196), 0.66);
}

.he-brand,
.he-origin-tag {
    font-size: 0.57rem;
    letter-spacing: 0.03em;
}

.he-ghost-region {
    padding: 1rem 0.95rem 0;
    font-size: clamp(1.4rem, 2vw, 2rem);
    color: rgba(var(--color-primary-rgb, 53, 38, 31), 0.08);
}

.he-info {
    padding: 0.7rem 0.95rem 0.4rem;
}

.he-title {
    font-size: 0.94rem;
    line-height: 1.6;
    margin-bottom: 0.14rem;
}

.he-location {
    font-size: 0.63rem;
    line-height: 1.55;
}

.he-tasting {
    padding: 0 0.95rem 0.75rem;
    font-size: 0.64rem;
    line-height: 1.7;
    min-height: 2rem;
}

.he-footer {
    padding-top: 0.82rem;
    padding-bottom: 0.88rem;
    border-top-color: rgba(var(--color-border-rgb, 216, 207, 196), 0.66);
}

.he-cta-btn {
    padding: 0;
    color: var(--color-secondary, #767154);
    background: transparent;
    border-bottom: 1px solid rgba(var(--color-secondary-rgb, 118, 113, 84), 0.3);
}

.hc--editorial:hover .he-cta-btn,
.hc--dark:hover .he-cta-btn {
    background: transparent;
    color: var(--color-primary, #35261F);
    border-bottom-color: rgba(var(--color-primary-rgb, 53, 38, 31), 0.42);
}

.hc--dark .he-cta-btn {
    color: var(--color-accent, #C1B094);
    border-bottom-color: rgba(var(--color-accent-rgb, 193, 176, 148), 0.3);
}

body.hatan-palette-yogurt .hc,
body.hatan-palette-yogurt .hc--editorial,
body.hatan-palette-yogurt .hc--image .hc-tasting-strip {
    background: rgba(var(--color-bg-rgb, 245, 240, 232), 0.96);
}

body.hatan-palette-yogurt .hc {
    border-color: rgba(var(--color-border-rgb, 216, 207, 196), 0.92);
}

body.hatan-palette-yogurt .hc--image .hc-image-frame,
body.hatan-palette-yogurt .hc--image .hc-img-placeholder,
body.hatan-palette-yogurt .hc--editorial {
    background:
        linear-gradient(180deg, rgba(var(--color-bg-rgb, 245, 240, 232), 0.98) 0%, rgba(var(--color-surface-rgb, 237, 231, 218), 0.82) 100%);
}

@media (max-width: 640px) {
    ul.products,
    .products-grid.woocommerce-loop,
    .related.products ul.products,
    .upsells.products ul.products {
        gap: 0.8rem;
    }

    .hc--image .hc-tasting-strip,
    .hc--editorial .he-top {
        min-height: 2.2rem;
        padding-inline: 0.8rem;
    }

    .hc--image .hc-name-overlay {
        padding: 2.6rem 0.8rem 0.7rem;
    }

    .hc--image .hc-title,
    .he-title {
        font-size: 0.82rem;
    }

    .hc--image .hc-origin-tag,
    .he-location,
    .he-tasting {
        font-size: 0.59rem;
    }

    .hc--image .hc-footer,
    .hc--editorial .he-footer,
    .he-info,
    .he-tasting {
        padding-inline: 0.8rem;
    }

    .he-ghost-region {
        padding-inline: 0.8rem;
        font-size: 1.15rem;
    }
}