/* ═══════════════════════════════════════════════════════════
   PRODUCT CARDS — Artisan Duka (v1.9.0)
   One card system for every grid: shop, category, homepage rails,
   infinite scroll, and WooCommerce loops (related / upsells).

   Principles: the photo is the card (no borders, boxes, gradient
   rings or lifts) · one badge max · category eyebrow for context ·
   clear price hierarchy · quiet add-to-cart · visible focus state.
   ═══════════════════════════════════════════════════════════ */

:root {
    --adk-ink:        #1F1B16;
    --adk-muted:      #6B645B;
    --adk-surface:    #F4F1EC;
    --adk-sale:       #B3400D;
    --adk-focus:      var(--ad-teal, #0F4747);
    --adk-card-radius: 10px;
    --adk-card-ratio:  1 / 1;
    --adk-ease:       cubic-bezier(.2, .7, .2, 1);
}

.adk-card,
.adk-card *,
.adk-card *::before,
.adk-card *::after { box-sizing: border-box; }

/* ── Card ───────────────────────────────────────────────── */
.adk-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--adk-ink);
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    scroll-snap-align: start;
}

/* ── Media ──────────────────────────────────────────────── */
.adk-card__media {
    position: relative;
    aspect-ratio: var(--adk-card-ratio);
    border-radius: var(--adk-card-radius);
    overflow: hidden;
    background: var(--adk-surface);
    /* No isolation/transform here: the quick-add button must share the card's
       stacking context so it sits above the full-card link overlay. */
}
.adk-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit; /* keeps corners clean in Safari while scaling */
    transition: transform .7s var(--adk-ease), opacity .4s var(--adk-ease);
}
.adk-card__img--swap { opacity: 0; }

@media (hover: hover) {
    .adk-card:hover .adk-card__img { transform: scale(1.035); }
    .adk-card--swap:hover .adk-card__img:not(.adk-card__img--swap) { opacity: 0; }
    .adk-card--swap:hover .adk-card__img--swap { opacity: 1; }
}

.adk-card--soldout .adk-card__img { opacity: .72; filter: saturate(.6); }

/* ── Badge (one max) ────────────────────────────────────── */
.adk-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .02em;
    background: rgba(255, 255, 255, .94);
    color: var(--adk-ink);
    pointer-events: none;
}
.adk-card__badge--sale  { background: var(--adk-sale); color: #fff; }
.adk-card__badge--low   { color: var(--adk-sale); }
.adk-card__badge--muted { background: rgba(31, 27, 22, .78); color: #fff; }

/* ── Quick add ──────────────────────────────────────────── */
.adk-card__add {
    position: absolute;
    z-index: 3;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    color: var(--adk-ink);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(31, 27, 22, .10);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s var(--adk-ease), transform .2s var(--adk-ease), background .2s, color .2s;
}
.adk-card__add:hover { background: var(--adk-ink); color: #fff; }
.adk-card__add.is-busy { opacity: 1; transform: none; cursor: progress; }
.adk-card__add.is-done { opacity: 1; transform: none; background: var(--ad-green, #40864C); color: #fff; }

@media (hover: hover) {
    .adk-card:hover .adk-card__add,
    .adk-card:focus-within .adk-card__add { opacity: 1; transform: none; }
}
.adk-card__add:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--adk-focus); outline-offset: 2px; }

/* Touch: compact "+" instead of a hover bar */
@media (hover: none) {
    .adk-card__add {
        left: auto;
        right: 8px;
        bottom: 8px;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 50%;
        opacity: 1;
        transform: none;
        font-size: 0;
        color: transparent;
    }
    .adk-card__add::before {
        content: '+';
        font-size: 22px;
        line-height: 36px;
        font-weight: 400;
        color: var(--adk-ink);
    }
    .adk-card__add.is-busy::before { content: '…'; }
    .adk-card__add.is-done::before { content: '✓'; color: #fff; font-size: 16px; }
}

/* ── Body ───────────────────────────────────────────────── */
.adk-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 2px 0;
}
.adk-card__eyebrow {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--adk-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adk-card__title {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--adk-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.adk-card .adk-card__link,
.adk-card .adk-card__link:visited,
.adk-card .adk-card__link:hover,
.adk-card .adk-card__link:focus {
    color: var(--adk-ink);
    text-decoration: none;
}
/* Whole card is clickable through the title link (one tab stop). */
.adk-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--adk-card-radius);
}
.adk-card__link:focus-visible { outline: none; }
.adk-card__link:focus-visible::after {
    outline: 2px solid var(--adk-focus);
    outline-offset: 4px;
}
@media (hover: hover) {
    .adk-card:hover .adk-card__link {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        text-decoration-color: rgba(31, 27, 22, .35);
    }
}

/* ── Price ──────────────────────────────────────────────── */
.adk-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 2px;
    margin-top: 2px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--adk-ink);
    font-variant-numeric: tabular-nums;
}
.adk-card__price ins { order: 1; text-decoration: none; color: var(--adk-sale); background: none; }
.adk-card__price del { order: 2; font-size: 13px; font-weight: 400; color: var(--adk-muted); opacity: 1; }
.adk-card__price .adk-card__save { order: 3; font-size: 12px; font-weight: 600; color: var(--adk-sale); }
.adk-card__from { font-weight: 400; color: var(--adk-muted); font-size: 13px; }

.adk-card__rating {
    font-size: 12.5px;
    color: var(--adk-muted);
}
.adk-card__rating span:first-child { color: var(--adk-ink); font-weight: 500; }

/* Infinite-scroll entrance */
.adk-card--lazy-new { animation: adk-card-in .35s var(--adk-ease) both; }
@keyframes adk-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .adk-card__img, .adk-card__add, .adk-card--lazy-new { transition: none; animation: none; }
    .adk-card:hover .adk-card__img { transform: none; }
}

/* ── Grids ──────────────────────────────────────────────── */
.adk-archive-grid { column-gap: 20px; row-gap: 36px; }
.adk-product-grid { column-gap: 20px; row-gap: 32px; }
@media (max-width: 768px) {
    .adk-archive-grid,
    .adk-product-grid { column-gap: 12px; row-gap: 28px; }
    .adk-card__title { font-size: 14px; }
    .adk-card__price { font-size: 14.5px; }
}

/* ═══════════════════════════════════════════════════════════
   WooCommerce default loops (related, upsells, search, tags)
   Blocksy markup: li.product > figure, h2.title, .price,
   ul.entry-meta, .ct-woo-card-actions
   ═══════════════════════════════════════════════════════════ */
.woocommerce ul.products li.product,
ul.products li.product {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
ul.products li.product figure {
    margin: 0 0 12px;
    border-radius: var(--adk-card-radius);
    overflow: hidden;
    background: var(--adk-surface);
    aspect-ratio: var(--adk-card-ratio);
}
ul.products li.product figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform .7s var(--adk-ease);
}
@media (hover: hover) {
    ul.products li.product:hover figure img { transform: scale(1.035); }
}
ul.products li.product .woocommerce-loop-product__title {
    margin: 0 0 6px;
    font-size: 14.5px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--adk-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
ul.products li.product .woocommerce-loop-product__title a { color: inherit; text-decoration: none; }
ul.products li.product .price {
    font-size: 15px;
    font-weight: 600;
    color: var(--adk-ink);
}
ul.products li.product .price del { font-size: 13px; font-weight: 400; color: var(--adk-muted); }
ul.products li.product .price ins { text-decoration: none; color: var(--adk-sale); }
ul.products li.product ul.entry-meta { display: none; }
ul.products li.product .ct-woo-card-actions { margin-top: 10px; }
ul.products li.product .ct-woo-card-actions .button {
    width: 100%;
    min-height: 40px;
    border: 0 !important;
    border-radius: 8px !important;
    background: var(--adk-surface) !important;
    color: var(--adk-ink) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: .01em;
    box-shadow: none !important;
    transition: background .2s, color .2s;
}
ul.products li.product .ct-woo-card-actions .button:hover {
    background: var(--adk-ink) !important;
    color: #fff !important;
}
section.related.products > h2,
section.up-sells > h2 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 20px;
}