/* ============================================================
   COMPONENTS.CSS — Buttons, Cards, Badges, Modal, Drawer
   Light · Elegant · Classy
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────────── */
.dm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 28px;
    border: 0;
    border-radius: var(--dm-radius-pill);
    font-family: var(--dm-font-body);
    font-weight: 500;
    font-size: var(--dm-fs-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    position: relative;
    overflow: hidden;
    transition: transform var(--dm-dur-1) var(--dm-ease),
                box-shadow var(--dm-dur-1) var(--dm-ease),
                background var(--dm-dur-1), color var(--dm-dur-1);
}
.dm-btn:hover { transform: translateY(-2px); box-shadow: var(--dm-shadow-elev); }
.dm-btn:active { transform: translateY(0); box-shadow: var(--dm-shadow-soft); }

.dm-btn--primary {
    background: var(--dm-maroon);
    color: #fff;
    box-shadow: 0 4px 16px rgba(123,31,31,0.22);
}
.dm-btn--primary:hover { background: var(--dm-maroon-rich); color: #fff; box-shadow: 0 8px 24px rgba(123,31,31,0.30); }

.dm-btn--saffron {
    background: var(--dm-grad-saffron);
    color: #fff;
    box-shadow: 0 4px 16px rgba(200,130,27,0.24);
}
.dm-btn--saffron:hover { color: #fff; box-shadow: var(--dm-shadow-saffron); }

.dm-btn--dark {
    background: transparent;
    color: var(--dm-primary-dark);
    border: 1px solid var(--dm-primary-dark);
}
.dm-btn--dark:hover { background: var(--dm-primary-dark); color: var(--dm-gold-light); }

.dm-btn--ghost {
    background: transparent;
    color: var(--dm-maroon);
    border: 1px solid var(--dm-maroon);
}
.dm-btn--ghost:hover { background: var(--dm-maroon); color: #fff; }

.dm-btn--outline-gold {
    background: transparent;
    color: var(--dm-saffron);
    border: 1px solid var(--dm-gold);
}
.dm-btn--outline-gold:hover { background: var(--dm-saffron); color: #fff; border-color: var(--dm-saffron); }

.dm-btn--block { width: 100%; }
.dm-btn--sm  { padding: 9px 18px; font-size: var(--dm-fs-xs); }
.dm-btn--lg  { padding: 16px 36px; font-size: var(--dm-fs-base); }

/* ── Badges ──────────────────────────────────────────────────── */
.dm-badge {
    display: inline-flex; align-items: center;
    padding: 3px 10px;
    border-radius: var(--dm-radius-pill);
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase;
}
.dm-badge--sale { background: var(--dm-offer); color: #fff; }
.dm-badge--cert { background: var(--dm-success); color: #fff; }
.dm-badge--gold { background: var(--dm-beige); color: var(--dm-saffron); border: 1px solid var(--dm-line-gold); }
.dm-badge--new  { background: rgba(200,130,27,0.12); color: var(--dm-saffron); border: 1px solid rgba(200,130,27,0.35); }

/* ── Generic card ────────────────────────────────────────────── */
.dm-card {
    background: var(--dm-surface);
    border-radius: var(--dm-radius-md);
    border: 1px solid var(--dm-line-gold);
    box-shadow: var(--dm-shadow-soft);
    overflow: hidden;
    transition: box-shadow var(--dm-dur-2) var(--dm-ease), transform var(--dm-dur-2) var(--dm-ease);
}
.dm-card:hover { box-shadow: var(--dm-shadow-elev); transform: translateY(-3px); }

/* ── Product card · Minimal · Classy ─────────────────────────── */
.dm-prod {
    background: var(--dm-glass-bg);
    backdrop-filter: var(--dm-glass-blur);
    border-radius: var(--dm-radius-md);
    border: 1px solid var(--dm-glass-border);
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
    padding-bottom: var(--dm-space-3);
    transition: border-color var(--dm-dur-2) var(--dm-ease),
                box-shadow var(--dm-dur-2) var(--dm-ease),
                transform var(--dm-dur-2) var(--dm-ease);
}
.dm-prod:hover {
    border-color: var(--dm-gold);
    box-shadow: var(--dm-shadow-elev);
    transform: translateY(-4px) scale(1.01);
}

/* Media (image + overlays) */
.dm-prod__media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--dm-beige);
    border-radius: var(--dm-radius-sm);
}
.dm-prod__media-link {
    display: block;
    width: 100%; height: 100%;
}
.dm-prod__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 600ms var(--dm-ease);
}
.dm-prod:hover .dm-prod__media img { transform: scale(1.04); }

/* Single discount pill — top-left, pill-shaped */
.dm-prod__pct {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--dm-maroon);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--dm-radius-pill);
    font-family: var(--dm-font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: var(--dm-shadow-soft);
}

/* Sold-out badge */
.dm-prod__soldout {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26,15,10,0.85);
    color: #fff;
    padding: 6px 16px;
    border-radius: 2px;
    font-family: var(--dm-font-display);
    font-style: italic;
    font-size: var(--dm-fs-sm);
    letter-spacing: 0.08em;
    z-index: 3;
}

/* Wishlist icon — top-right, hover-revealed */
.dm-prod__wish {
    position: absolute;
    top: 10px; right: 10px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    color: var(--dm-text-mute);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity var(--dm-dur-2), transform var(--dm-dur-2),
                background var(--dm-dur-1), color var(--dm-dur-1);
    z-index: 2;
}
.dm-prod:hover .dm-prod__wish { opacity: 1; transform: translateY(0); }
.dm-prod__wish:hover { background: var(--dm-maroon); color: #fff; }
.dm-prod__wish[aria-pressed="true"] { opacity: 1; transform: translateY(0); background: var(--dm-maroon); color: #fff; }

/* Body */
.dm-prod__body {
    padding: var(--dm-space-4) var(--dm-space-4) 0;
    display: flex; flex-direction: column;
    gap: 8px;
    flex: 1;
}
.dm-prod__cat {
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--dm-text-light);
    font-weight: 600;
    margin-bottom: 0;
}
.dm-prod__title {
    font-family: var(--dm-font-display);
    font-style: italic;
    font-size: var(--dm-fs-lg);
    font-weight: 500;
    line-height: 1.3;
    color: var(--dm-primary-dark);
    margin: 0;
    /* Clamp to 2 lines for consistent height */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dm-prod__title a { color: inherit; text-decoration: none; }
.dm-prod__title a:hover { color: var(--dm-maroon); }

.dm-prod__rating {
    color: var(--dm-saffron);
    font-size: 11px;
    letter-spacing: 1px;
    display: flex; align-items: center; gap: 4px;
    margin-top: 2px;
}
.dm-prod__rating small { color: var(--dm-text-light); font-size: 10px; }

/* Footer row: price (left) + add icon (right) */
.dm-prod__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding: 12px var(--dm-space-4) 0;
    border-top: 1px solid var(--dm-glass-border);
}
.dm-prod__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--dm-font-body);
    font-size: var(--dm-fs-md);
    font-weight: 700;
    color: var(--dm-primary-dark);
    line-height: 1;
}
.dm-prod__price del {
    color: var(--dm-text-light);
    font-weight: 400;
    font-size: 11px;
    text-decoration: line-through;
}
.dm-prod__price ins { background: transparent; text-decoration: none; }
.dm-prod__price .amount,
.dm-prod__price .woocommerce-Price-amount { color: var(--dm-primary-dark); }
.dm-prod__price del .amount,
.dm-prod__price del .woocommerce-Price-amount { color: var(--dm-text-light); }

/* Add-to-cart icon — circle, classy */
.dm-prod__add {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--dm-primary-dark);
    background: transparent;
    color: var(--dm-primary-dark);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--dm-dur-1), color var(--dm-dur-1),
                border-color var(--dm-dur-1), transform var(--dm-dur-1);
}
.dm-prod__add:hover {
    background: var(--dm-primary-dark);
    color: var(--dm-gold-light);
    transform: scale(1.06);
}
.dm-prod__add--view { border-style: dashed; }

/* Responsive grid */
.dm-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dm-space-5);
}
@media (max-width: 1024px) {
    .dm-product-grid { grid-template-columns: repeat(3, 1fr); gap: var(--dm-space-5); }
}
@media (max-width: 768px) {
    .dm-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--dm-space-4); }
    .dm-prod__body { padding: var(--dm-space-3) var(--dm-space-3) 0; gap: 4px; }
    .dm-prod__foot { padding: 10px var(--dm-space-3) 0; }
    .dm-prod__title { font-size: var(--dm-fs-md); }
    .dm-prod__price { font-size: var(--dm-fs-sm); }
}
@media (max-width: 480px) {
    .dm-product-grid { gap: var(--dm-space-3); }
    .dm-prod__title { font-size: var(--dm-fs-sm); }
    .dm-prod__cat { font-size: 9px; letter-spacing: 0.1em; }
}

/* Generic icon button kept for other uses (drawer, etc.) */
.dm-icon-btn {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--dm-line-gold);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(4px);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: var(--dm-text-mute);
    transition: background var(--dm-dur-1), color var(--dm-dur-1), border-color var(--dm-dur-1);
}
.dm-icon-btn:hover { background: var(--dm-maroon); color: #fff; border-color: var(--dm-maroon); }
.dm-icon-btn[aria-pressed="true"] { background: var(--dm-maroon); color: #fff; border-color: var(--dm-maroon); }

/* ── WooCommerce price global overrides ──────────────────────── */
.woocommerce-Price-amount.amount,
.woocommerce .amount { color: var(--dm-maroon); font-weight: 700; }
.woocommerce-Price-currencySymbol { font-size: 0.75em; }
del .woocommerce-Price-amount.amount { color: var(--dm-text-light); font-weight: 400; }
ins .woocommerce-Price-amount.amount { color: var(--dm-maroon); }
del { color: var(--dm-text-light); text-decoration: line-through; }
ins { background: transparent !important; text-decoration: none !important; }

/* ── Stars ───────────────────────────────────────────────────── */
.dm-stars { color: var(--dm-saffron); letter-spacing: 1px; }
.dm-star--empty { color: rgba(200,130,27,0.22); }

/* ── Forms ───────────────────────────────────────────────────── */
.dm-input, .dm-select, .dm-textarea {
    width: 100%; padding: 11px 16px;
    border: 1px solid var(--dm-line-gold);
    border-radius: var(--dm-radius-sm);
    background: #fff; color: var(--dm-text);
    font-size: var(--dm-fs-sm); font-family: var(--dm-font-body);
    transition: border-color var(--dm-dur-1), box-shadow var(--dm-dur-1);
}
.dm-input::placeholder, .dm-textarea::placeholder { color: var(--dm-text-light); }
.dm-input:focus, .dm-select:focus, .dm-textarea:focus {
    outline: none;
    border-color: var(--dm-saffron);
    box-shadow: 0 0 0 3px rgba(200,130,27,0.12);
}
.dm-label { font-weight: 600; font-size: var(--dm-fs-sm); margin-bottom: 6px; display: block; color: var(--dm-text); }

/* ── Modal ───────────────────────────────────────────────────── */
.dm-modal {
    position: fixed; inset: 0;
    background: rgba(20, 17, 14, 0.45);
    backdrop-filter: var(--dm-glass-blur);
    z-index: var(--dm-z-modal);
    display: none; align-items: center; justify-content: center;
    padding: var(--dm-space-5);
}
.dm-modal.is-open { display: flex; }
.dm-modal__panel {
    background: #fff;
    border-radius: var(--dm-radius-lg);
    border: 1px solid var(--dm-line-gold);
    max-width: 980px; width: 100%;
    max-height: 90vh; overflow: auto;
    position: relative;
    box-shadow: var(--dm-shadow-deep);
}
.dm-modal__close {
    position: absolute; top: 12px; right: 12px;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--dm-line-gold);
    background: #fff; color: var(--dm-text-mute);
    cursor: pointer; font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dm-dur-1), color var(--dm-dur-1);
}
.dm-modal__close:hover { background: var(--dm-maroon); color: #fff; border-color: transparent; }

/* ── Drawer ──────────────────────────────────────────────────── */
.dm-drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(420px, 100vw);
    background: var(--dm-glass-bg);
    backdrop-filter: var(--dm-glass-blur);
    border-left: 1px solid var(--dm-glass-border);
    z-index: var(--dm-z-drawer);
    transform: translateX(100%);
    transition: transform var(--dm-dur-2) var(--dm-ease);
    display: flex; flex-direction: column;
    box-shadow: -16px 0 48px rgba(20, 17, 14, 0.15);
}
.dm-drawer.is-open { transform: translateX(0); }
.dm-drawer__overlay {
    position: fixed; inset: 0;
    background: rgba(26,15,10,0.40);
    z-index: calc(var(--dm-z-drawer) - 1);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dm-dur-2);
}
.dm-drawer__overlay.is-open { opacity: 1; pointer-events: auto; }
.dm-drawer__head {
    padding: var(--dm-space-5);
    border-bottom: 1px solid var(--dm-line-gold);
    display: flex; align-items: center; justify-content: space-between;
    background: var(--dm-ivory);
}
.dm-drawer__head h3 { font-family: var(--dm-font-display); font-style: italic; color: var(--dm-primary-dark); margin: 0; }
.dm-drawer__body { flex: 1; overflow: auto; padding: var(--dm-space-4) var(--dm-space-5); }
.dm-drawer__foot { padding: var(--dm-space-5); border-top: 1px solid var(--dm-line-gold); background: var(--dm-ivory); }
.dm-drawer--left { right: auto; left: 0; transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--dm-line-gold); }
.dm-drawer--left.is-open { transform: translateX(0); }

/* ── Accordion ───────────────────────────────────────────────── */
.dm-accordion details { border-bottom: 1px solid var(--dm-line); }
.dm-accordion summary {
    cursor: pointer; padding: 18px 0;
    font-family: var(--dm-font-display);
    font-size: var(--dm-fs-md); font-weight: 600;
    color: var(--dm-primary-dark);
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
}
.dm-accordion summary::-webkit-details-marker { display: none; }
.dm-accordion summary::after { content: '+'; color: var(--dm-saffron); font-size: 20px; font-family: var(--dm-font-body); font-weight: 300; }
.dm-accordion details[open] summary::after { content: '−'; }
.dm-accordion details > *:not(summary) { padding-bottom: 18px; color: var(--dm-text-mute); line-height: 1.8; font-size: var(--dm-fs-sm); }

/* ── Free shipping bar ───────────────────────────────────────── */
.dm-shipping-bar {
    padding: 12px 16px;
    background: var(--dm-ivory);
    border-radius: var(--dm-radius-sm);
    border: 1px solid var(--dm-line-gold);
    margin-bottom: var(--dm-space-4);
}
.dm-shipping-bar__msg { font-size: var(--dm-fs-sm); margin-bottom: 8px; color: var(--dm-text); }
.dm-shipping-bar__msg strong { color: var(--dm-maroon); }
.dm-shipping-bar__msg--win { color: var(--dm-success); font-weight: 600; }
.dm-shipping-bar__track { height: 4px; background: var(--dm-line-gold); border-radius: 999px; overflow: hidden; }
.dm-shipping-bar__fill { display: block; height: 100%; background: var(--dm-grad-saffron); transition: width var(--dm-dur-3) var(--dm-ease); }

/* ── Toast ───────────────────────────────────────────────────── */
.dm-toast {
    position: fixed; bottom: 24px; left: 50%;
    transform: translate(-50%, 20px);
    background: var(--dm-primary-dark);
    color: var(--dm-gold-light);
    padding: 12px 22px;
    border-radius: var(--dm-radius-pill);
    box-shadow: var(--dm-shadow-deep);
    z-index: var(--dm-z-toast);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dm-dur-2), transform var(--dm-dur-2);
    font-size: var(--dm-fs-sm); font-weight: 600;
}
.dm-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* ── Cart-add toast ──────────────────────────────────────────── */
.dm-cart-toast {
    position: fixed; top: 24px; right: 24px;
    width: min(380px, calc(100vw - 48px));
    background: #fff;
    border: 1px solid var(--dm-line-gold);
    border-radius: var(--dm-radius-md);
    box-shadow: 0 16px 48px rgba(32,23,19,0.14);
    z-index: var(--dm-z-toast);
    opacity: 0; transform: translateY(-12px);
    transition: opacity var(--dm-dur-2), transform var(--dm-dur-2);
    overflow: hidden;
}
.dm-cart-toast.is-show { opacity: 1; transform: translateY(0); }
.dm-cart-toast__check {
    position: absolute; top: 12px; left: 12px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--dm-success); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 4px 12px rgba(31,122,77,0.30);
    animation: dmPop 0.4s var(--dm-ease) both;
}
@keyframes dmPop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.18); } 100% { transform: scale(1); opacity: 1; } }
.dm-cart-toast__body { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 52px; }
.dm-cart-toast__body img { width: 60px; height: 60px; border-radius: var(--dm-radius-sm); object-fit: cover; background: var(--dm-beige); }
.dm-cart-toast__body small { color: var(--dm-saffron); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; display: block; }
.dm-cart-toast__body strong {
    display: -webkit-box; font-family: var(--dm-font-display); font-style: italic;
    font-size: var(--dm-fs-md); color: var(--dm-primary-dark); margin-top: 2px;
    -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.dm-cart-toast__cta { padding: 0 14px 14px; }
.dm-cart-toast__view {
    width: 100%; background: var(--dm-maroon); color: #fff;
    border: 0; padding: 12px 18px; border-radius: var(--dm-radius-pill);
    font-weight: 700; cursor: pointer; letter-spacing: 0.06em;
    font-size: var(--dm-fs-xs); text-transform: uppercase;
    transition: background var(--dm-dur-1);
}
.dm-cart-toast__view:hover { background: var(--dm-maroon-rich); }
.dm-cart-toast__close {
    position: absolute; top: 8px; right: 8px;
    background: transparent; border: 0; color: var(--dm-text-light);
    cursor: pointer; width: 28px; height: 28px;
    font-size: 18px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.dm-cart-toast__close:hover { color: var(--dm-maroon); }
@media (max-width: 480px) { .dm-cart-toast { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; } }

/* ── Quick-view ──────────────────────────────────────────────── */
.dm-quick-view { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dm-space-6); padding: var(--dm-space-6); }
.dm-quick-view__media { background: var(--dm-beige); border-radius: var(--dm-radius-md); aspect-ratio: 1; overflow: hidden; border: 1px solid var(--dm-line-gold); }
.dm-quick-view__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── Tabs ────────────────────────────────────────────────────── */
.dm-tabs { display: flex; gap: var(--dm-space-3); border-bottom: 1px solid var(--dm-line-gold); flex-wrap: wrap; }
.dm-tabs__btn {
    background: none; border: 0; padding: 14px 4px;
    font-weight: 600; color: var(--dm-text-mute); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    font-size: var(--dm-fs-sm); letter-spacing: 0.04em;
    transition: color var(--dm-dur-1), border-color var(--dm-dur-1);
}
.dm-tabs__btn:hover { color: var(--dm-saffron); }
.dm-tabs__btn[aria-selected="true"] { color: var(--dm-primary-dark); border-color: var(--dm-saffron); }
.dm-tabs__panel { padding: var(--dm-space-5) 0; color: var(--dm-text-mute); line-height: 1.85; }

/* ── Cat card grid ───────────────────────────────────────────── */
.dm-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--dm-space-4); }
.dm-cat-card {
    background: #fff; border: 1px solid var(--dm-line-gold);
    border-radius: var(--dm-radius-md); text-align: center;
    padding: var(--dm-space-4) var(--dm-space-3);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    transition: transform var(--dm-dur-2), box-shadow var(--dm-dur-2), border-color var(--dm-dur-2);
    color: var(--dm-primary-dark);
}
.dm-cat-card:hover { transform: translateY(-4px); box-shadow: var(--dm-shadow-elev); border-color: var(--dm-gold); color: var(--dm-saffron); }
.dm-cat-card__img { width: 100%; aspect-ratio: 1; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--dm-line-gold); }
.dm-cat-card:hover .dm-cat-card__img { border-color: var(--dm-gold); }
.dm-cat-card__title { font-family: var(--dm-font-display); font-weight: 600; font-size: var(--dm-fs-sm); }

/* ── Pagination ──────────────────────────────────────────────── */
.dm-pagination, .woocommerce-pagination { margin-top: var(--dm-space-7); text-align: center; }
.woocommerce-pagination ul.page-numbers { display: flex; gap: 8px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.woocommerce-pagination ul.page-numbers li { margin: 0; display: inline-flex; }
.dm-pagination a, .dm-pagination span,
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 12px;
    border: 1px solid var(--dm-line-gold);
    border-radius: var(--dm-radius-md);
    color: var(--dm-text-mute); background: #fff; text-decoration: none;
    font-size: var(--dm-fs-sm); font-weight: 500;
    transition: background var(--dm-dur-1), color var(--dm-dur-1), border-color var(--dm-dur-1), box-shadow var(--dm-dur-1);
}
.dm-pagination a:hover, .woocommerce-pagination ul.page-numbers li a:hover { 
    background: var(--dm-ivory); color: var(--dm-saffron); border-color: var(--dm-gold); box-shadow: var(--dm-shadow-soft); 
}
.dm-pagination .current, .woocommerce-pagination ul.page-numbers li span.current {
    background: var(--dm-maroon); color: #fff; border-color: transparent; font-weight: 700; box-shadow: var(--dm-shadow-soft);
}

/* ── Category Tiles (Shop by Tradition grid) ─────────────────── */
.dm-cats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--dm-space-5);
}
.dm-cat-tile {
    border-radius: var(--dm-radius-md); overflow: hidden;
    background: #fff; border: 1px solid var(--dm-line-gold);
    text-decoration: none; display: flex; flex-direction: column;
    transition: box-shadow var(--dm-dur-2), transform var(--dm-dur-2), border-color var(--dm-dur-2);
}
.dm-cat-tile:hover { box-shadow: var(--dm-shadow-elev); transform: translateY(-4px); border-color: var(--dm-gold); }
.dm-cat-tile__media {
    aspect-ratio: 1; overflow: hidden; position: relative; background: var(--dm-beige);
}
.dm-cat-tile__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dm-dur-3) var(--dm-ease);
}
.dm-cat-tile:hover .dm-cat-tile__media img { transform: scale(1.07); }
.dm-cat-tile__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(145deg, var(--dm-beige) 0%, #EFE0C2 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 80px; line-height: 1;
    transition: transform var(--dm-dur-3) var(--dm-ease);
}
.dm-cat-tile:hover .dm-cat-tile__placeholder { transform: scale(1.08); }
.dm-cat-tile__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(26,15,10,0.40) 0%, transparent 55%);
    transition: opacity var(--dm-dur-2); pointer-events: none;
}
.dm-cat-tile:hover .dm-cat-tile__overlay { opacity: 0 ; }
.dm-cat-tile__icon { display: none; } /* icon is shown in placeholder only */
.dm-cat-tile__body {
    padding: var(--dm-space-3) var(--dm-space-4) var(--dm-space-4);
    background: #fff; border-top: 1px solid var(--dm-line-gold);
    display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.dm-cat-tile__name {
    font-family: var(--dm-font-display); font-style: italic; font-size: var(--dm-fs-md);
    color: var(--dm-primary-dark); margin: 0; font-weight: 600;
}
.dm-cat-tile__count { font-size: var(--dm-fs-xs); color: var(--dm-text-light); letter-spacing: 0.06em; }
.dm-cat-tile__btn {
    font-size: var(--dm-fs-sm); color: var(--dm-saffron); font-weight: 600; margin-top: var(--dm-space-2);
    transition: color var(--dm-dur-1);
}
.dm-cat-tile:hover .dm-cat-tile__btn { color: var(--dm-maroon); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .dm-product-grid { grid-template-columns: repeat(3, 1fr); }
    .dm-cat-grid { grid-template-columns: repeat(4, 1fr); }
    .dm-cats-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px)  {
    .dm-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--dm-space-3); }
    .dm-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .dm-cats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--dm-space-3); }
    .dm-quick-view { grid-template-columns: 1fr; }
}
@media (max-width: 480px)  {
    .dm-product-grid { gap: var(--dm-space-2); }
    .dm-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .dm-cats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--dm-space-2); }
}