/*
 * Decor Livings, Concept 2 "Colour Gallery" design system (Stage 6 Task 1).
 * Values copied from plans/design/mockups2/Tokens.dc.html, Main.dc.html, HomePhone.dc.html.
 * Loaded after Savoy (dependency savoy-child -> nm-core). Specificity kept as low as works.
 */

/* ---------- 1. Fonts (self-hosted, latin subset, variable) ---------- */
@font-face {
    font-family: 'Bodoni Moda';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/bodoni-moda-latin-var.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bodoni Moda';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/bodoni-moda-latin-var-italic.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Google serves Jost 300/400/500 as one variable file. */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url(fonts/jost-latin-var.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Tokens ---------- */
:root {
    /* Brand, from the logo */
    --dl-teal: #144F57;
    --dl-sage: #668A85;
    --dl-blush: #E3A590;
    --dl-mist: #F4F6F5;
    --dl-paper: #FFFFFF;
    --dl-charcoal: #1F2A2C;
    --dl-stone: #7F8B89;
    --dl-whatsapp: #25D366;
    --dl-whatsapp-ink: #1F2A2C; /* text on the WhatsApp green: Charcoal (fix round 1, M-1: the mockup ink colour was off-palette) */
    /* Collection colours and their tints */
    --dl-cream: #EDE5D8;        --dl-cream-tint: #F6F1E8;
    --dl-sage-velvet: #8FA38C;  --dl-sage-tint: #DCE6E1;
    --dl-blush-velvet: #E9B6AC; --dl-blush-tint: #F6DDD3;
    --dl-lavender: #C4B3DB;     --dl-lavender-tint: #E9E2F2;
    --dl-navy: #1E2E52;
    --dl-glow: #F0C27B;         /* only behind LED mirrors on the navy band */

    /* Type */
    --dl-font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
    --dl-font-text: 'Jost', 'Helvetica Neue', Arial, sans-serif;
    /* Fluid sizes: phone mockup (390 px) to desktop mockup (1440 px) */
    --dl-size-display: clamp(2.625rem, 1.4625rem + 4.76vw, 5.75rem);  /* 42 -> 92 */
    --dl-size-h1: clamp(2.25rem, 1.694rem + 2.286vw, 3.75rem);         /* 36 -> 60 */
    --dl-size-h2: clamp(1.875rem, 1.457rem + 1.714vw, 3rem);           /* 30 -> 48 */
    --dl-size-h3: clamp(1.0625rem, 0.946rem + 0.476vw, 1.375rem);      /* 17 -> 22 */
    --dl-size-footer-line: clamp(2.25rem, 1.6rem + 2.667vw, 4rem);     /* 36 -> 64 */
    --dl-size-lead: clamp(0.9375rem, 0.87rem + 0.286vw, 1.125rem);     /* 15 -> 18 */
    --dl-size-body: 1rem;      /* 16 */
    --dl-size-small: 0.875rem; /* 14: the floor, nothing smaller */

    /* Shapes */
    --dl-radius-arch: 999px 999px 0 0;
    --dl-radius-tile: 200px 200px 16px 16px;
    --dl-radius-pill: 999px;
    --dl-btn-height: 50px;

    /* Spacing */
    --dl-gutter: clamp(16px, 4.2vw, 60px);
    --dl-section-y: clamp(44px, 6vw, 88px);
    --dl-wave-height: clamp(34px, 4.4vw, 64px);
}

/* No text below 14 px: lift Savoy's "x-small" size (12 px in its options). */
html:root { --nm--font-size-xsmall: 14px; }

/* ---------- 3. Base ---------- */
body {
    font-family: var(--dl-font-text);
    font-weight: 400;
    background-color: var(--dl-mist);
    color: var(--dl-charcoal);
}
a { color: var(--dl-teal); }
a:hover { color: var(--dl-charcoal); }
:focus-visible {
    outline: 2px solid var(--dl-teal);
    outline-offset: 2px;
}

h1, h2, h3,
.h1, .h2, .h3,
.product_title,
.woocommerce-loop-product__title,
.nm-shop-loop-title-link,
.dl-display {
    font-family: var(--dl-font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}
h1, .h1 { font-size: var(--dl-size-h1); line-height: 1.02; color: var(--dl-teal); }
h2, .h2 { font-size: var(--dl-size-h2); line-height: 1.05; color: var(--dl-teal); }
h3, .h3 { font-size: var(--dl-size-h3); line-height: 1.2; }
h1 i, h2 i, h1 em, h2 em, .dl-display i { font-style: italic; font-weight: 400; }
.dl-display { font-size: var(--dl-size-display); line-height: 0.98; color: var(--dl-teal); margin: 0; }
.dl-lead { font-size: var(--dl-size-lead); line-height: 1.5; font-weight: 300; }
.dl-small { font-size: var(--dl-size-small); }

/* ---------- 4. Buttons and badges (pills) ---------- */
.button,
.single_add_to_cart_button,
.checkout-button,
.wc-block-components-button,
.dl-btn {
    border-radius: var(--dl-radius-pill);
    font-family: var(--dl-font-text);
    font-weight: 500;
}
.dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--dl-btn-height);
    padding: 0 24px;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: background-color .2s, color .2s, border-color .2s;
}
.dl-btn--primary { background: var(--dl-teal); color: var(--dl-paper); }
.dl-btn--primary:hover { background: var(--dl-charcoal); color: var(--dl-paper); }
.dl-btn--outline { background: transparent; color: var(--dl-teal); border-color: var(--dl-teal); }
.dl-btn--outline:hover { background: var(--dl-teal); color: var(--dl-paper); }
.dl-btn--paper { background: var(--dl-paper); color: var(--dl-teal); border-color: var(--dl-teal); }
.dl-btn--whatsapp { background: var(--dl-whatsapp); color: var(--dl-whatsapp-ink); }
.dl-btn--whatsapp:hover { background: var(--dl-whatsapp); color: var(--dl-whatsapp-ink); border-color: var(--dl-whatsapp-ink); }
.dl-btn--glow { background: var(--dl-glow); color: var(--dl-navy); }
.dl-icon { flex-shrink: 0; }

.dl-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: var(--dl-radius-pill);
    font-size: var(--dl-size-small);
    font-weight: 500;
    line-height: 1.2;
    background: var(--dl-blush);
    color: var(--dl-charcoal);
}
.dl-badge--sage { background: var(--dl-sage); color: var(--dl-paper); }
.dl-badge--led { background: var(--dl-navy); color: var(--dl-glow); }
.dl-badge--outline { background: transparent; border: 1px solid var(--dl-sage); color: var(--dl-teal); }

/* ---------- 5. Arches, tiles, cards (no shadows) ---------- */
.dl-arch {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--dl-radius-arch);
}
.dl-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: clamp(12px, 1.7vw, 24px) clamp(12px, 1.7vw, 24px) clamp(14px, 1.8vw, 26px);
    border-radius: var(--dl-radius-tile);
    color: var(--dl-charcoal);
    text-align: center;
    box-shadow: none;
    text-decoration: none;
}
.dl-tile:hover { color: var(--dl-charcoal); }
.dl-tile .dl-arch { border-radius: var(--dl-radius-arch); }
.dl-tile__name { font-family: var(--dl-font-display); font-size: clamp(1.0625rem, 0.83rem + 0.95vw, 1.625rem); line-height: 1.15; }
.dl-tile__meta { font-size: var(--dl-size-small); }
.dl-tile--cream    { background: var(--dl-cream-tint); }
.dl-tile--sage     { background: var(--dl-sage-tint); }
.dl-tile--blush    { background: var(--dl-blush-tint); }
.dl-tile--lavender { background: var(--dl-lavender-tint); }
.dl-tile--paper    { background: var(--dl-paper); }
.dl-tile--navy     { background: var(--dl-navy); color: var(--dl-mist); }
.dl-tile--navy:hover { color: var(--dl-mist); }

/* Section colours */
.dl-bg-mist { background: var(--dl-mist); }
.dl-bg-paper { background: var(--dl-paper); }
.dl-bg-cream { background: var(--dl-cream-tint); }
.dl-bg-sage { background: var(--dl-sage-tint); }
.dl-bg-blush { background: var(--dl-blush-tint); }
.dl-bg-lavender { background: var(--dl-lavender-tint); }
.dl-bg-navy { background: var(--dl-navy); color: var(--dl-mist); }
.dl-bg-navy h2, .dl-bg-navy h3 { color: var(--dl-mist); }
/* The LED glow: the one place a gradient is allowed */
.dl-glow { position: relative; }
.dl-glow::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 20%;
    width: min(300px, 100%);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 194, 123, 0.5) 0%, rgba(240, 194, 123, 0) 70%);
    pointer-events: none;
}
.dl-glow > * { position: relative; }

/* ---------- 6. Wave edge ---------- */
/* PHP prints dl_wave_svg() (one path, preserveAspectRatio="none") as the first child. */
.dl-wave-top { position: relative; }
.dl-wave {
    display: block;
    width: 100%;
    height: var(--dl-wave-height);
}

/* ---------- 7. Layout utilities for the page builds ---------- */
.dl-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--dl-gutter);
    padding-right: var(--dl-gutter);
    box-sizing: border-box;
}
.dl-section { padding-top: var(--dl-section-y); padding-bottom: var(--dl-section-y); }
.dl-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px 24px;
    margin-bottom: clamp(20px, 2.5vw, 36px);
}
.dl-section-head h2 { margin: 0; }
.dl-link-underline { font-size: 1rem; border-bottom: 1px solid var(--dl-teal); text-decoration: none; }
.dl-grid { display: grid; gap: clamp(12px, 2vw, 28px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 360px) { .dl-grid--products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .dl-grid--products, .dl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dl-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Opened folds (673 / 720): keep the two-column gutter clear of the hinge */
@media (min-width: 660px) and (max-width: 767px) {
    .dl-grid--products { column-gap: 40px; }
}
@media (horizontal-viewport-segments: 2) {
    .dl-container { max-width: env(viewport-segment-width 0 0, 100%); margin-left: 0; }
}
.dl-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ---------- 8. Announcement bar (Savoy top bar) ---------- */
.nm-top-bar {
    background: var(--dl-blush);
    border-bottom-color: var(--dl-blush);
    color: var(--dl-teal);
    font-size: var(--dl-size-small);
    font-weight: 500;
    line-height: 1.3;
}
.nm-top-bar .nm-row { min-height: 40px; display: flex; align-items: center; }
.nm-top-bar-left { width: 100%; justify-content: center; }
.nm-top-bar-right { display: none; }
.nm-top-bar-text { width: 100%; text-align: center; padding: 8px 0; color: var(--dl-charcoal); }
/* Fix round 1 (I-1): small text on Blush is Charcoal (7.05:1); teal on Blush is only 4.40:1. */
.nm-top-bar .nm-top-bar-text,
.nm-top-bar .nm-top-bar-text a { color: var(--dl-charcoal); }
.dl-announce--wide { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 28px; }
.dl-announce--short { display: none; }
.dl-announce__sep {
    display: inline-block;
    width: 22px;
    height: 10px;
    background: url(img/wave-sep.svg) no-repeat center / contain;
}
@media (max-width: 991px) {
    .dl-announce--wide { display: none; }
    .dl-announce--short { display: inline; }
}

/* ---------- 9. Header ---------- */
.nm-header,
.header-on-scroll .nm-header { background-color: var(--dl-mist); }
.nm-header .nm-menu li a,
.nm-main-menu .nm-menu > li > a {
    font-family: var(--dl-font-text);
    font-size: 1rem;
    color: var(--dl-charcoal);
}
.nm-header .nm-menu li a:hover { color: var(--dl-teal); }
#nm-header { transition: box-shadow .2s, border-color .2s; }
#nm-header .nm-header-logo img { transition: height .2s ease; }
#nm-header.dl-header--compact { border-bottom: 1px solid var(--dl-sage-tint); }
@media (min-width: 992px) {
    #nm-header.dl-header--compact .nm-header-logo img { height: 42px; }
}
/* Menu icons and the cart count: tap targets and the blush count */
#nm-right-menu-ul > li > a { min-height: 44px; display: inline-flex; align-items: center; }
.nm-menu-cart .nm-menu-cart-count,
.nm-menu-cart-count { background: var(--dl-blush); color: var(--dl-charcoal); }

/* WhatsApp "Chat" pill in the header (desktop; phones have the float) */
#nm-right-menu-ul > li.dl-menu-whatsapp > a.dl-chat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--dl-radius-pill);
    background: var(--dl-whatsapp);
    color: var(--dl-whatsapp-ink);
    font-size: 15px;
    font-weight: 500;
}
#nm-right-menu-ul > li.dl-menu-whatsapp > a.dl-chat-pill:hover { color: var(--dl-whatsapp-ink); }
@media (max-width: 991px) {
    #nm-right-menu-ul > li.dl-menu-whatsapp { display: none; }
}

/* Mega menu (Savoy "megamenu full col-6" on the Shop item, thumbnails from inc/menu.php) */
.nm-menu .megamenu.full.dl-mega > .sub-menu { background: var(--dl-mist); }
.nm-menu .megamenu.dl-mega > .sub-menu > ul > li.nm-menu-item-has-image { border-right: 0; }
.nm-menu .megamenu.dl-mega > .sub-menu > ul > li > a img.nm-menu-item-image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--dl-radius-arch);
    background: var(--dl-paper);
}
.nm-menu .megamenu.dl-mega > .sub-menu > ul > li > a .nm-menu-item-image-title {
    display: block;
    margin-top: 10px;
    font-family: var(--dl-font-display);
    font-size: 1.0625rem;
    line-height: 1.2;
    text-align: center;
    color: var(--dl-charcoal);
}

/* ---------- 10. Footer ---------- */
.dl-site-footer { background: var(--dl-mist); }
.dl-footer { display: flex; flex-direction: column; }
.dl-footer__blush { background: var(--dl-blush); }
.dl-footer__wave { margin-top: -1px; }
.dl-footer__inner {
    max-width: 1440px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: clamp(16px, 2.8vw, 40px) var(--dl-gutter) clamp(32px, 4.4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}
.dl-footer__lead { display: flex; flex-direction: column; gap: clamp(16px, 1.5vw, 22px); min-width: 0; }
.dl-footer__headline {
    margin: 0;
    font-family: var(--dl-font-display);
    font-weight: 400;
    font-size: var(--dl-size-footer-line);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--dl-teal);
}
.dl-footer__headline i { font-style: italic; }
.dl-footer__text {
    margin: 0;
    max-width: 560px;
    font-size: var(--dl-size-lead);
    line-height: 1.5;
    font-weight: 300;
    color: var(--dl-charcoal);
}
.dl-footer__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dl-footer__actions .dl-btn { min-height: 50px; }
.dl-footer .dl-btn--outline { color: var(--dl-charcoal); border-color: var(--dl-teal); } /* I-1: Charcoal text on Blush */
.dl-footer .dl-btn--outline:hover { background: var(--dl-teal); color: var(--dl-paper); }
.dl-footer__insta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dl-footer__insta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, 0.7vw, 10px); }
.dl-footer__insta-item { display: block; }
.dl-footer__insta-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 52px 52px 8px 8px;
    background: var(--dl-paper);
}
.dl-footer__insta-caption { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: var(--dl-size-small); color: var(--dl-charcoal); text-align: center; text-decoration: none; } /* M-3: 44 px tap target */
.dl-footer__insta-caption:hover { color: var(--dl-teal); }

.dl-footer__bar {
    background: var(--dl-teal);
    color: var(--dl-mist);
    padding: clamp(20px, 2vw, 28px) var(--dl-gutter);
    padding-bottom: calc(clamp(20px, 2vw, 28px) + env(safe-area-inset-bottom, 0px));
}
.dl-footer__bar-top,
.dl-footer__bottom { max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
.dl-footer__bar-top { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.dl-footer__logo { display: inline-block; line-height: 0; }
.dl-footer__logo-img {
    display: block;
    height: 40px;
    width: auto;
    background: var(--dl-mist);
    padding: 6px 10px;
    border-radius: 20px;
    box-sizing: content-box;
}
.dl-footer__nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.dl-footer__nav a,
.dl-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--dl-mist);
    font-size: var(--dl-size-small);
    font-weight: 300;
    text-decoration: none;
}
.dl-footer__nav a:hover,
.dl-footer__legal a:hover { color: var(--dl-blush); }
.dl-footer__bottom {
    margin-top: 14px;
    border-top: 1px solid rgba(244, 246, 245, 0.25);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px 24px;
    font-size: var(--dl-size-small);
    font-weight: 300;
    line-height: 1.5;
}
.dl-footer__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.dl-site-footer :focus-visible { outline-color: var(--dl-charcoal); }
.dl-footer__bar :focus-visible { outline-color: var(--dl-blush); }

@media (min-width: 768px) {
    .dl-footer__nav a, .dl-footer__legal a { font-size: 15px; }
    .dl-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
    .dl-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 56px; }
    .dl-footer__bar-top { flex-direction: row; justify-content: space-between; align-items: center; gap: 24px; }
    .dl-footer__nav { justify-content: flex-end; gap: 0 26px; }
}
@media (max-width: 400px) {
    .dl-footer__actions .dl-btn { width: 100%; }
}

/* ---------- 11. Third-party floats ---------- */
/* Sales pop-up (Live Sales Notifications, .pi-popup): on phones and small tablets the plugin
   pins it full-width at bottom 0, over the Click to Chat float (50 px icon at bottom/right 15 px,
   so it reaches 65 px). Lift it above the float with a 15 px gap. */
@media (max-width: 768px) {
    body .pi-popup {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px);
        border-radius: 16px !important;
    }
}

/* ---------- 11b. Fix round 1 (Task 1 review) ---------- */
/* I-1 + M-6: cart count badge, Charcoal on Blush, 18 px minimum, centred.
   (Savoy colours `.nm-menu-cart a .count` teal; the ID beats it.) */
#nm-menu-cart-btn .nm-menu-cart-count,
#nm-mobile-menu-cart-btn .nm-menu-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    min-height: 18px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    line-height: 1;
    text-align: center;
    background: var(--dl-blush);
    color: var(--dl-charcoal);
}

/* M-5: on the narrowest phones let the announcement line wrap instead of being cut. */
@media (max-width: 320px) {
    .nm-top-bar .nm-top-bar-text {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.3;
    }
    .dl-announce--short { display: inline-block; max-width: 100%; }
}

/* M-7: keep the WhatsApp float (50 px at 15 px from the right) off the footer's bottom links. */
@media (min-width: 1024px) {
    .dl-footer__bottom { padding-right: 80px; }
}

/* M-4: respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
    #nm-header,
    #nm-header .nm-header-logo img,
    .dl-btn,
    .dl-footer a {
        transition: none !important;
    }
}

/* =====================================================================
   12. Stage 6 Task 2: product cards + category/shop band (Shop.dc.html)
   ===================================================================== */

/* --- 12a. Product card: Savoy's own <li class="product"> gets "dl-tile
   dl-tile--<colour>" from inc/cards.php (woocommerce_post_class filter). Savoy's
   grid is float/percentage-width block-grid (li at 50%/33.33%/25%, gutter from
   8px of padding on the li - see grid.css), not CSS grid/flexbox, so the coloured
   tile background cannot live on the <li> itself: a li-level background would fill
   that 8px padding too and two adjacent tiles would visually touch with no gap.
   Instead the tile (background, radius, inner padding, centred text) is put on
   .nm-shop-loop-product-wrap - the li's one child div, width:auto by default, so
   MARGIN on it (rather than padding on the li) creates a real transparent gutter
   between tiles without changing the li's own 50/33/25% column width and without
   any box-sizing/overflow risk (an auto-width block always shrinks for its margin).
   The generic ".dl-tile" rule (section 5) is a flex column for a different,
   hand-built card shape; its flex/gap is reset back to block for the li here. --- */
.products li.product.dl-tile {
    display: block;
    box-shadow: none;
    background: none;
    padding: 0;
}
/* Fix round 1 (I-5): Global Constraint "1 column under 360 px" - Savoy's own
   xsmall-block-grid-2 (shop_columns_mobile = 2) applies unconditionally, so it is
   overridden here for the shop/category grid specifically (both classes together
   only match the WooCommerce product loop, not any other block-grid use on the
   site). 359 px, not 360, so 360 itself still gets Savoy's normal 2 columns. */
@media (max-width: 359px) {
    ul.products.xsmall-block-grid-2 > li.product {
        width: 100%;
    }
}
.products li.product.dl-tile .nm-shop-loop-product-wrap {
    margin: 0 clamp(4px, 1vw, 10px) 14px;
    padding: clamp(12px, 1.7vw, 24px) clamp(12px, 1.7vw, 24px) clamp(14px, 1.8vw, 26px);
    border-radius: var(--dl-radius-tile);
    text-align: center;
    box-sizing: border-box;
}
.dl-tile--cream    .nm-shop-loop-product-wrap { background: var(--dl-cream-tint); }
.dl-tile--sage     .nm-shop-loop-product-wrap { background: var(--dl-sage-tint); }
.dl-tile--blush    .nm-shop-loop-product-wrap { background: var(--dl-blush-tint); }
.dl-tile--lavender .nm-shop-loop-product-wrap { background: var(--dl-lavender-tint); }
.dl-tile--paper    .nm-shop-loop-product-wrap { background: var(--dl-paper); }
.dl-tile--navy     .nm-shop-loop-product-wrap { background: var(--dl-navy); }
/* Fold-safe gutter: 673 / 720 open with two columns and a clear 40 px hinge gap. */
@media (min-width: 660px) and (max-width: 767px) {
    .products li.product.dl-tile .nm-shop-loop-product-wrap { margin-left: 20px; margin-right: 20px; }
}
.products li.product.dl-tile .nm-shop-loop-thumbnail {
    aspect-ratio: 4 / 5;
    border-radius: var(--dl-radius-arch);
    background: transparent;
}
/* The <a> (not just its parent div) needs its own definite aspect-ratio too: a
   percentage height on the in-flow base <img> only resolves against a containing
   block whose height is "specified" rather than auto-from-content, and the <a> is
   the img's immediate parent. */
.products li.product.dl-tile .nm-shop-loop-thumbnail-link {
    aspect-ratio: 4 / 5;
    display: block;
}
.products li.product.dl-tile .nm-shop-loop-thumbnail img.wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.products li.product.dl-tile .nm-shop-loop-details { margin-top: 12px; }
.products li.product.dl-tile .nm-shop-loop-title-link,
.products li.product.dl-tile .woocommerce-loop-product__title {
    color: var(--dl-charcoal);
    margin: 0 0 2px;
}
.products li.product.dl-tile .price,
.products li.product.dl-tile .woocommerce-Price-amount {
    color: var(--dl-charcoal);
    font-weight: 500;
}
.products li.product.dl-tile--navy .nm-shop-loop-title-link,
.products li.product.dl-tile--navy .woocommerce-loop-product__title,
.products li.product.dl-tile--navy .price,
.products li.product.dl-tile--navy .woocommerce-Price-amount,
.products li.product.dl-tile--navy a {
    color: var(--dl-mist);
}

/* Badge pill, over the top-left of the tile. Fix round 1 (I-1): printed as a
   preceding sibling of .nm-shop-loop-thumbnail now (inc/cards.php), not inside it,
   because that thumbnail div is clipped (overflow: hidden) to the arch curve and
   was cutting the badge's own top-left corner off. .nm-shop-loop-product-wrap is
   Savoy's own position: relative context for it; z-index keeps it above the photo. */
.dl-tile .dl-card-badge {
    position: absolute;
    top: clamp(10px, 1.8vw, 20px);
    left: clamp(10px, 1.8vw, 20px);
    z-index: 2;
}
/* Fix round 1 (I-3): white text on the Sage badge measured 3.79:1 (fails 4.5:1).
   Charcoal on Paper, with a Sage border for definition on the paper tile (where the
   badge would otherwise sit paper-on-paper), passes at 14.73:1 on every tile colour
   this badge appears on. Scoped here (not section 4's shared .dl-badge--sage, which
   other pages may still use as designed) via a more specific selector. */
.dl-tile .dl-card-badge.dl-badge--sage {
    background: var(--dl-paper);
    color: var(--dl-charcoal);
    border: 1px solid var(--dl-sage);
}

/* Size line, right under the product name. Fix round 1 (I-2): Stone measured 2.72
   to 3.53:1 on the tile tints (fails 4.5:1); Charcoal passes at 11.36 to 14.73:1.
   The mockup's #3E4A4C is off-palette, so Charcoal is used instead, per the ruling. */
.dl-tile .dl-card-size {
    display: block;
    margin-top: 2px;
    color: var(--dl-charcoal);
}
.products li.product.dl-tile--navy .dl-card-size { color: var(--dl-mist); }

/* Fix round 1 (I-4): the "From" prefix on a shortened variable-product price
   (inc/cards.php, woocommerce_get_price_html, cards only). */
.dl-tile .dl-price-from { font-weight: 400; margin-right: 3px; }

/* --- 12b. Category/shop page band: H1 + intro + room image + child-collection
   chips, printed above the filter bar on /shop/ and every /product-category/. --- */
.dl-cat-band {
    margin: var(--dl-gutter) var(--dl-gutter) 0;
    padding: clamp(24px, 3.5vw, 44px) clamp(20px, 3.5vw, 48px);
    border-radius: 28px;
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
}
.dl-cat-band--blush { background: var(--dl-blush-tint); }
.dl-cat-band--cream { background: var(--dl-cream-tint); }
.dl-cat-band__intro { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 16px); min-width: 0; }
.dl-cat-band__crumb { display: flex; gap: 10px; font-size: var(--dl-size-small); color: var(--dl-charcoal); }
.dl-cat-band__crumb a { color: var(--dl-charcoal); }
.dl-cat-band__crumb a:hover { color: var(--dl-teal); }
.dl-cat-band__title { margin: 0; }
.dl-cat-band__text { margin: 0; max-width: 62ch; }
.dl-cat-band__text p { margin: 0 0 0.6em; }
.dl-cat-band__text p:last-child { margin-bottom: 0; }
.dl-cat-band__chips { display: flex; gap: 10px; flex-wrap: wrap; }
.dl-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* Fix round 1 (M-10): 44 px tap target (was 42, matching the mockup) */
    padding: 0 18px;
    border-radius: var(--dl-radius-pill);
    border: 1px solid var(--dl-teal);
    color: var(--dl-teal);
    font-size: var(--dl-size-small);
    text-decoration: none;
}
.dl-chip:hover { background: rgba(20, 79, 87, 0.08); color: var(--dl-teal); }
.dl-chip.is-active { background: var(--dl-teal); color: var(--dl-paper); }
.dl-cat-band__image {
    display: block;
    width: 100%;
    max-width: 380px;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--dl-radius-tile);
    justify-self: end;
}
@media (min-width: 1024px) {
    .dl-cat-band { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* =====================================================================
   13. Stage 6 Task 3: product page (Product.dc.html)
   Markup from inc/product-page.php; the main product's <div> carries
   "dl-pdp dl-pdp--<colour>". Nothing here applies outside .dl-pdp except
   the buy bar and the float offsets it needs.
   ===================================================================== */

/* 13a. Gallery: the main photo is an arch on its collection-colour tile. */
.dl-pdp { --dl-pdp-tile: var(--dl-paper); }
.dl-pdp--cream    { --dl-pdp-tile: var(--dl-cream-tint); }
.dl-pdp--sage     { --dl-pdp-tile: var(--dl-sage-tint); }
.dl-pdp--blush    { --dl-pdp-tile: var(--dl-blush-tint); }
.dl-pdp--lavender { --dl-pdp-tile: var(--dl-lavender-tint); }
.dl-pdp--navy     { --dl-pdp-tile: var(--dl-navy); }
.dl-pdp .woocommerce-product-gallery__wrapper {
    background: var(--dl-pdp-tile);
    border-radius: 999px 999px 24px 24px;
    padding: clamp(14px, 2vw, 28px) clamp(14px, 2vw, 28px) clamp(12px, 1.7vw, 24px);
    box-sizing: border-box;
}
.dl-pdp .woocommerce-product-gallery__image img {
    border-radius: var(--dl-radius-arch);
}

/* Savoy pads the summary column 79 / 102 px on desktop; the mockup's column is wider. */
@media (min-width: 1024px) {
    .dl-pdp .summary.entry-summary { padding-left: clamp(32px, 3.4vw, 56px); padding-right: clamp(0px, 1.5vw, 24px); }
}

/* Fix round 1. Savoy stacks the product page at 1080 px and below, and pulls the gallery
   30 px past its column on each side (so the tile ran 15 px off-screen). Keep the gallery
   inside the page gutter at every stacked width... */
@media (max-width: 1080px) {
    .dl-pdp.nm-single-product .woocommerce-product-gallery {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .dl-pdp.nm-single-product .woocommerce-product-gallery__wrapper { max-width: 100%; }
}
/* ...and from 660 px (opened folds 673 / 720, tablets, 1024) use two columns, gallery left and
   summary right, with a 40 px gap centred on the page, so nothing crosses the hinge. */
@media (min-width: 660px) and (max-width: 1080px) {
    .dl-pdp.nm-single-product .nm-single-product-summary-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 40px;
        align-items: start;
        float: none;
    }
    .dl-pdp.nm-single-product .nm-single-product-summary-col > * { grid-column: 1; }
    .dl-pdp.nm-single-product .nm-single-product-summary-col > .summary.entry-summary {
        grid-column: 2;
        grid-row: 1 / span 20;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    .dl-pdp.nm-single-product .woocommerce-product-gallery__wrapper { margin-left: 0; margin-right: 0; }
    /* Savoy paints a full-width band behind the phone thumbnails (ol::before, ~2x viewport wide);
       in two columns it would cover the summary's Height buttons. */
    .dl-pdp.nm-single-product .flex-control-thumbs::before { display: none; }
}
/* Dual-screen devices that report two segments: the same two columns, one per pane. */
@media (horizontal-viewport-segments: 2) {
    .dl-pdp.nm-single-product .nm-single-product-summary-col {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: calc(env(viewport-segment-left 1 0, 50vw) - env(viewport-segment-right 0 0, 50vw) + 40px);
    }
    .dl-pdp.nm-single-product .nm-single-product-summary-col > * { grid-column: 1; }
    .dl-pdp.nm-single-product .nm-single-product-summary-col > .summary.entry-summary { grid-column: 2; grid-row: 1 / span 20; width: auto; max-width: none; margin: 0; padding: 0; }
    .dl-pdp.nm-single-product .flex-control-thumbs::before { display: none; }
}

/* 13b. Title, full name, stars, price, delivery line */
.dl-pdp .summary .product_title.dl-pdp__title {
    margin: 0 0 8px;
    font-family: var(--dl-font-display);
    font-weight: 400;
    font-size: clamp(2.125rem, 1.6rem + 1.6vw, 3rem); /* 34 -> 48 */
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: var(--dl-teal);
}
.dl-pdp .summary .dl-pdp__title i { font-style: italic; }
.dl-pdp .dl-longname {
    margin: 0 0 12px;
    font-size: var(--dl-size-small);
    line-height: 1.45;
    color: var(--dl-charcoal);
}
.dl-pdp .summary .woocommerce-product-rating { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.dl-pdp .summary .woocommerce-product-rating .star-rating { color: var(--dl-blush); }
.dl-pdp .summary .woocommerce-review-link { font-size: var(--dl-size-small); border-bottom: 1px solid var(--dl-teal); }
.dl-pdp .summary p.price.dl-price {
    margin: 6px 0;
    font-family: var(--dl-font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 1.5rem + 0.95vw, 2.25rem); /* 28 -> 36 */
    line-height: 1.1;
    color: var(--dl-charcoal);
}
.dl-pdp .summary p.price.dl-price .amount,
.dl-pdp .summary p.price.dl-price bdi { color: var(--dl-charcoal); font-weight: 400; }
.dl-pdp .dl-delivery-line {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--dl-charcoal);
}

/* 13c. "Also in" swatches */
.dl-also { display: flex; flex-direction: column; gap: 10px; margin: 0 0 22px; }
.dl-also__label { font-size: 15px; font-weight: 500; color: var(--dl-charcoal); }
.dl-also__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dl-swatch {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--dl-paper);
    box-shadow: 0 0 0 1px rgba(127, 139, 137, 0.5);
    box-sizing: border-box;
    flex-shrink: 0;
}
a.dl-swatch:hover { box-shadow: 0 0 0 2px var(--dl-sage); }
.dl-swatch.is-current { box-shadow: 0 0 0 2px var(--dl-teal); }
.dl-swatch--cream    { background: var(--dl-cream); }
.dl-swatch--sage     { background: var(--dl-sage-velvet); }
.dl-swatch--blush    { background: var(--dl-blush-velvet); }
.dl-swatch--lavender { background: var(--dl-lavender); }
.dl-swatch--navy     { background: var(--dl-navy); }
.dl-also__name { margin-left: 6px; font-size: var(--dl-size-small); color: var(--dl-charcoal); }

/* 13d. Variation form: Height first, then Placement, options as pill buttons */
.dl-pdp .variations_form table.variations,
.dl-pdp .variations_form table.variations tbody { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.dl-pdp .variations_form table.variations { margin: 0 0 6px; border: 0; }
.dl-pdp .variations_form table.variations tr { display: flex; flex-direction: column; gap: 10px; border: 0; }
.dl-pdp .variations_form table.variations th.label,
.dl-pdp .variations_form table.variations td.value { display: block; padding: 0; border: 0; text-align: left; width: auto; }
.dl-pdp .variations_form table.variations th.label label {
    font-family: var(--dl-font-text);
    font-size: 15px;
    font-weight: 500;
    color: var(--dl-charcoal);
    text-transform: none;
    letter-spacing: 0;
}
.dl-pdp .nm-variation-control {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dl-pdp .nm-variation-control > li,
.dl-pdp .nm-variation-control.nm-variation-control-size > li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 48px;
    height: auto;
    margin: 0;
    padding: 0 20px;
    border: 1px solid rgba(127, 139, 137, 0.6);
    border-radius: 24px;
    background: var(--dl-paper);
    color: var(--dl-charcoal);
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    box-sizing: border-box;
    opacity: 1;
}
.dl-pdp .nm-variation-control > li span { font-size: 1rem; color: inherit; border: 0; padding: 0; line-height: 1.2; }
.dl-pdp .nm-variation-control > li:hover { border-color: var(--dl-teal); }
.dl-pdp .nm-variation-control > li.selected,
.dl-pdp .nm-variation-control.nm-variation-control-size > li.selected {
    border: 2px solid var(--dl-teal);
    color: var(--dl-teal);
    font-weight: 500;
    padding: 0 19px;
}
.dl-pdp .nm-variation-control > li.disabled { opacity: 0.45; text-decoration: line-through; }
.dl-pdp .nm-variation-control > li.hidden { display: none; }
.dl-pdp .nm-variation-control > li:focus-visible { outline: 2px solid var(--dl-teal); outline-offset: 2px; }
.dl-pdp .variations_form .reset_variations { display: none !important; }
.dl-pdp .dl-placement-note {
    margin: 10px 0 18px;
    font-size: var(--dl-size-small);
    line-height: 1.45;
    color: var(--dl-charcoal);
}
/* The summary price already shows the chosen variation's price. */
.dl-pdp .single_variation .woocommerce-variation-price { display: none; }

/* 13e. Add to cart row: quantity, button, "Ask on WhatsApp" */
.dl-pdp .summary .woocommerce-variation-add-to-cart,
.dl-pdp .summary form.cart:not(.variations_form) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.dl-pdp .summary .single_add_to_cart_button {
    flex: 1 1 180px;
    min-height: 58px;
    margin: 0;
    padding: 0 24px;
    border-radius: 29px;
    font-size: 17px;
    background: var(--dl-teal);
    color: var(--dl-paper);
}
.dl-pdp .summary .single_add_to_cart_button:hover { background: var(--dl-charcoal); }
.dl-pdp .summary .dl-ask-wa {
    flex: 1 1 180px;
    min-height: 58px;
    border-radius: 29px;
    padding: 0 22px;
    white-space: nowrap;
}
.dl-pdp .summary .nm-quantity-wrap { margin: 0; }
.dl-pdp .summary .woocommerce-product-details__short-description { margin-top: 22px; }

/* 13f. Content + accordions */
.dl-pdp .dl-pdp__content { margin-top: 22px; }
.dl-pdp .dl-pdp__content > p { font-size: 1rem; line-height: 1.55; font-weight: 300; }
.dl-pdp .dl-pdp__content .dl-answer { font-weight: 400; }
.dl-accs { margin: 22px 0; border-bottom: 1px solid rgba(127, 139, 137, 0.35); }
.dl-acc { border-top: 1px solid rgba(127, 139, 137, 0.35); }
.dl-acc__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 6px 0;
    cursor: pointer;
    list-style: none;
}
.dl-acc__summary::-webkit-details-marker { display: none; }
.dl-acc__summary::marker { content: ""; }
.dl-acc__summary:focus-visible { outline: 2px solid var(--dl-teal); outline-offset: 2px; }
.dl-pdp .dl-acc__title,
.dl-acc__title {
    margin: 0;
    font-family: var(--dl-font-text);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--dl-charcoal);
}
.dl-acc__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.dl-acc__icon::before,
.dl-acc__icon::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 2px;
    background: var(--dl-charcoal);
}
.dl-acc__icon::after { transform: rotate(90deg); }
.dl-acc[open] .dl-acc__icon::after { display: none; }
.dl-acc__body { padding: 0 0 18px; font-size: 15px; line-height: 1.55; }
.dl-acc__body p { margin: 0 0 0.8em; }
.dl-acc__body p:last-child { margin-bottom: 0; }
.dl-pdp table.dl-specs { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 15px; }
.dl-pdp table.dl-specs th,
.dl-pdp table.dl-specs td {
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid rgba(127, 139, 137, 0.2);
    text-align: left;
    vertical-align: top;
    background: none;
    line-height: 1.45;
}
.dl-pdp table.dl-specs th { width: 38%; padding-right: 16px; font-weight: 500; color: var(--dl-charcoal); }
.dl-pdp table.dl-specs td { font-weight: 300; }
.dl-acc .schema-faq-section { padding: 10px 0; border-bottom: 1px solid rgba(127, 139, 137, 0.2); }
.dl-acc .schema-faq-section:last-child { border-bottom: 0; }
.dl-acc .schema-faq-question { display: block; margin-bottom: 4px; font-weight: 500; }
.dl-acc .schema-faq-answer { margin: 0; }
.dl-pdp .dl-links { font-size: var(--dl-size-small); line-height: 1.5; }

/* 13g. Reviews section */
.dl-reviews {
    max-width: 1440px;
    margin: clamp(40px, 5vw, 64px) auto 0;
    padding: 0 var(--dl-gutter);
    box-sizing: border-box;
}
.dl-reviews__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3.3vw, 48px);
    padding: clamp(24px, 3vw, 40px) clamp(20px, 3.3vw, 48px);
    border-radius: 28px;
    background: var(--dl-paper);
}
.dl-reviews__intro { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.dl-reviews__title { margin: 0; font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem); line-height: 1; color: var(--dl-teal); }
.dl-reviews__sub { margin: 0; font-size: 15px; color: var(--dl-charcoal); }
.dl-reviews__write { min-height: 48px; }
.dl-reviews__list { min-width: 0; }
.dl-reviews #comments > h2.woocommerce-Reviews-title { display: none; }
.dl-reviews .woocommerce-noreviews {
    margin: 0 0 8px;
    font-family: var(--dl-font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
    line-height: 1.25;
    color: var(--dl-charcoal);
}
.dl-reviews .comment-reply-title { font-family: var(--dl-font-display); font-size: 1.375rem; color: var(--dl-teal); }
.dl-reviews--collapsible:not(.is-open) #review_form_wrapper { display: none; }
.dl-reviews .star-rating { color: var(--dl-blush); }
@media (min-width: 1024px) {
    .dl-reviews__inner { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); align-items: start; }
}

/* 13h. "Goes with this mirror" (Savoy's related grid with the Task 2 cards) */
.dl-goes-with { margin-top: clamp(40px, 5vw, 64px); }
.dl-goes-with__title { margin: 0 0 clamp(20px, 2vw, 28px); font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem); color: var(--dl-teal); }
.dl-goes-with #nm-related { padding-top: 0; margin-top: 0; }
/* Price ranges ("Rs 10,500 – Rs 11,500") wrap inside narrow 2-column cards on folded phones. */
.dl-goes-with .nm-shop-loop-title-price .price { white-space: normal; overflow-wrap: anywhere; }

/* 13i. Sticky buy bar (phones only) */
.dl-buybar { display: none; }
@media (max-width: 767px) {
    .dl-buybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--dl-paper);
        border-top: 1px solid var(--dl-sage-tint);
        box-sizing: border-box;
        transform: translateY(110%);
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }
    .dl-buybar.is-visible { transform: none; visibility: visible; transition: transform .2s ease; }
    .dl-buybar__thumb { display: block; width: 44px; height: 55px; }
    .dl-buybar__img { display: block; width: 44px; height: 55px; object-fit: cover; border-radius: 22px 22px 6px 6px; }
    .dl-buybar__text { display: flex; flex-direction: column; min-width: 0; }
    .dl-buybar__name {
        font-family: var(--dl-font-display);
        font-size: 1rem;
        line-height: 1.2;
        color: var(--dl-charcoal);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dl-buybar__price { font-size: var(--dl-size-small); font-weight: 500; color: var(--dl-charcoal); }
    .dl-buybar__price .amount { color: var(--dl-charcoal); }
    .dl-buybar__btn { min-height: 48px; padding: 0 18px; border: 0; font-size: 15px; cursor: pointer; }
    /* Keep the footer's last line clear of the bar (body padding does not add scroll room here). */
    body.dl-buybar-on .dl-footer__bar { padding-bottom: calc(20px + var(--dl-buybar-h, 76px) + env(safe-area-inset-bottom, 0px)); }
    body.dl-buybar-on #ht-ctc-chat { bottom: calc(15px + var(--dl-buybar-h, 76px)) !important; }
    body.dl-buybar-on .pi-popup { bottom: calc(80px + var(--dl-buybar-h, 76px) + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .dl-buybar, .dl-buybar.is-visible { transition: none; }
}
@media (max-width: 340px) {
    .dl-buybar { gap: 8px; padding-left: 10px; padding-right: 10px; }
    .dl-buybar__thumb, .dl-buybar__img { width: 36px; height: 45px; }
    .dl-buybar__btn { padding: 0 14px; }
}

/* =====================================================================
   14. Stage 6 Task 4: cart, checkout, thank-you (6C)
   Cart = page 10 (WooCommerce cart block), Checkout = page 11 (WooCommerce
   checkout block); classic woocommerce_checkout_fields filters do not reach
   either. Markup for the thank-you steps is from inc/thankyou.php; the gift
   checkbox and every checkout field come from WooCommerce Blocks itself
   (inc/checkout.php only relabels/reorders/hides via the locale filter and
   the Additional Checkout Fields API).
   ===================================================================== */

/* 14a. Cart block: keep the delivery/cross-sells area inside the page's max width
   and on the same fonts/colours as the rest of the site. */
.wc-block-cart,
.wc-block-checkout {
    font-family: var(--dl-font-text);
    color: var(--dl-charcoal);
}
/* Fix round 1 (Important 3): WordPress's own global-styles stylesheet sets
   --wp--preset--font-size--small to 13px (the block CSS's own fallback is 14px, used only
   when the variable is unset); that 13px value is what checkbox labels, the guest-checkout
   notice, "Add coupons", the shipping/subtotal rows and the terms line all read from. This
   single override lifts every one of them to the 14px floor at once. Checkout only: the
   cart already measured 14px+ everywhere in review and is left alone. */
.wc-block-checkout,
.wc-block-cart,
.wc-block-components-sidebar-layout {
    --wp--preset--font-size--small: 14px;
}
/* Supervisor fix after re-review: cart cross-sell price/button, "Add coupons" and the
   cash-on-delivery description were still 12–13 px. */
.wc-block-cart .wc-block-components-product-price,
.wc-block-cart .wc-block-cart__cross-sells .wc-block-components-button,
.wc-block-cart .wc-block-components-totals-coupon-link,
.wc-block-checkout .wc-block-components-totals-coupon-link,
.wc-block-components-radio-control-accordion-content,
.wc-block-components-radio-control-accordion-content p {
    font-size: 14px !important;
}
.wc-block-cart .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-product-name {
    color: var(--dl-charcoal);
    font-weight: 500;
}
.wc-block-cart .wc-block-components-totals-item__value,
.wc-block-cart .wc-block-components-totals-item,
.wc-block-checkout .wc-block-components-totals-item__value,
.wc-block-checkout .wc-block-components-totals-item {
    color: var(--dl-charcoal);
}
.wc-block-cart .wc-block-components-checkbox svg,
.wc-block-checkout .wc-block-components-checkbox svg,
.wc-block-cart .wc-block-components-radio-control__input:checked,
.wc-block-checkout .wc-block-components-radio-control__input:checked {
    color: var(--dl-teal);
}
.wc-block-cart a,
.wc-block-checkout a { color: var(--dl-teal); }
.wc-block-cart a:hover,
.wc-block-checkout a:hover { color: var(--dl-charcoal); }
.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-button:not(.is-link) {
    border-radius: var(--dl-radius-pill);
    font-family: var(--dl-font-text);
    font-weight: 500;
}
.wc-block-cart .wc-block-components-button.wp-element-button:not(.is-link),
.wc-block-checkout .wc-block-components-button.wp-element-button:not(.is-link) {
    background: var(--dl-teal);
}
.wc-block-cart .wc-block-components-button.wp-element-button:not(.is-link):hover,
.wc-block-checkout .wc-block-components-button.wp-element-button:not(.is-link):hover {
    background: var(--dl-charcoal);
}

/* Shipping row label: the free-shipping method's own title is already
   "Free delivery across Pakistan" (WooCommerce > Settings > Shipping > Pakistan
   zone), so nothing renames it here; this only styles the row so it reads as a
   confirmation line, not a form control. */
.wc-block-components-totals-shipping .wc-block-components-totals-item__value {
    color: var(--dl-teal);
    font-weight: 500;
}

/* "Goes with" cross-sells under the cart (WooCommerce's own cross-sells block,
   default heading "You may be interested in…"; left as WooCommerce's own text,
   only styled here). */
.wc-block-cart .wc-block-cart-cross-sells-block,
.wc-block-cart .wp-block-woocommerce-product-collection {
    margin-top: clamp(32px, 4vw, 56px);
    padding-top: clamp(24px, 3vw, 40px);
    border-top: 1px solid var(--dl-sage-tint);
}
.wc-block-cart .wc-block-cart-cross-sells-block h2,
.wc-block-cart .wp-block-woocommerce-product-collection > h2 {
    font-family: var(--dl-font-display);
    color: var(--dl-teal);
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}
/* Fix round 1 (Important 1): the cross-sell items are WooCommerce's own product-collection
   markup (li.wc-block-product), not the Task 2 card build, so they need their own rules
   here rather than inheriting section 12's .dl-tile classes. Paper tile (no per-product
   colour reachable from plain CSS on this block's generic markup, so no off-palette guess);
   arch image radius; pill button in Deep teal, >= 44 px tall. Titles already print through
   the core Query Loop's the_title() call, which inc/short-names.php filters the same way
   as every other loop card, so the short name shows here too (confirmed in the browser:
   "Cream Velvet Wave Mirror", not the long product title). */
.wc-block-cart .wp-block-woocommerce-product-collection li.wc-block-product {
    background: var(--dl-paper);
    border-radius: var(--dl-radius-tile);
    padding: clamp(12px, 1.7vw, 24px) clamp(12px, 1.7vw, 24px) clamp(14px, 1.8vw, 26px);
    box-sizing: border-box;
    text-align: center;
}
.wc-block-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image {
    margin: 0 0 12px;
}
.wc-block-cart .wp-block-woocommerce-product-collection .wc-block-components-product-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--dl-radius-arch);
}
.wc-block-cart .wp-block-woocommerce-product-collection .wp-block-post-title {
    margin: 0 0 4px;
    font-family: var(--dl-font-display);
    font-weight: 400;
    font-size: 1.0625rem;
    color: var(--dl-charcoal);
}
.wc-block-cart .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price {
    color: var(--dl-charcoal);
    font-weight: 500;
    font-size: var(--dl-size-small);
}
.wc-block-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 10px;
    padding: 0 20px;
    border-radius: var(--dl-radius-pill);
    background: var(--dl-teal);
    color: var(--dl-paper);
    font-family: var(--dl-font-text);
    font-weight: 500;
    font-size: var(--dl-size-small);
}
.wc-block-cart .wp-block-woocommerce-product-collection .wc-block-components-product-button__button:hover {
    background: var(--dl-charcoal);
    color: var(--dl-paper);
}

/* 14b. Checkout block: field order, hint text, gift tick box, total label. */
.wc-block-checkout .wc-block-components-checkout-step__title {
    font-family: var(--dl-font-display);
    color: var(--dl-teal);
}
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-address-form select,
.wc-block-checkout select.wc-block-components-country-input,
.wc-block-checkout .wc-block-components-combobox-control input {
    border-radius: 12px;
}
/* Below 700px container width WooCommerce's own checkout.css drops the address form back
   to plain `display: block` (its flex rules only exist inside three @container min-width
   rules: 700px, 520-699px, 400-519px; under 400px there is none at all), so CSS `order`
   would do nothing there. A column flex forces the same one-field-per-row look (the
   default `align-items: stretch` on a column flex container already fills the width, so
   nothing else changes) while keeping `order` active at every width. */
@media (max-width: 699px) {
    .wc-block-checkout__shipping-fields .wc-block-components-address-form,
    .wc-block-checkout__billing-fields .wc-block-components-address-form {
        display: flex;
        flex-direction: column;
    }
}

/* Phone field: moved first (the address form is a flex row on every width now; the block
   does not expose field order to PHP for a core field). Own full row on wider screens, no
   leftover top gap from its normal (non-first) flex position. The WhatsApp hint line ("no
   `description` slot for a core field: CheckoutFields::get_core_fields()") is printed with
   ::after so it reads right under the input, checkout page only. */
.wc-block-checkout .wc-block-components-address-form__phone {
    order: -1;
    flex: 0 0 100% !important;
    margin-top: 0 !important;
    margin-bottom: 8px !important; /* Fix round 1 (Minor 7): gap between the hint and Country/Region */
}
.wc-block-checkout .wc-block-components-address-form__phone::after {
    content: "We confirm your order on WhatsApp before dispatch";
    display: block;
    margin-top: 4px;
    font-size: var(--dl-size-small);
    line-height: 1.4;
    color: var(--dl-charcoal);
}
/* Gift tick box (Additional Checkout Fields API, location "order"). Fix round 1
   (Important 2): the real container is fieldset.wc-block-checkout__order-fields (checked
   in the browser), not .wc-block-checkout__additional-information-fields (that class does
   not exist on this markup - the CSS never applied). The checkbox itself is
   .wc-block-components-address-form__decor-livings-gift. */
.wc-block-checkout .wc-block-checkout__order-fields .wc-block-components-checkbox {
    margin: 0 0 16px;
}
/* Fix round 1 (Important 2 + 3): every checkbox label on checkout (gift, "Use same
   address for billing", CusRev's review-invite, "Add a note to your order") at 15 px -
   above the 14 px floor and the gift box's asked-for 15-16 px range. The text itself is a
   <span class="wc-block-components-checkbox__label"> inside a bare, unclassed <label>. */
.wc-block-checkout .wc-block-components-checkbox__label {
    font-size: 15px;
    color: var(--dl-charcoal);
}
/* Fix round 1 (Important 4): the whole label (checkbox mark + text) is the clickable
   element (a <label for="...">, block-level); it was only 20 px tall (the mark's own
   height). Grown to a 44 px row with the mark/text vertically centred inside it - the
   visual checkbox itself is untouched. */
.wc-block-checkout .wc-block-components-checkbox label,
.wc-block-cart .wc-block-components-checkbox label {
    display: flex;
    align-items: center;
    min-height: 44px;
}
/* Fix round 1 (Important 4): the Privacy Policy link was only 18.4 px tall. Padding grows
   the clickable/tappable box to >= 44 px; the negative margin keeps the terms paragraph's
   own line height and surrounding spacing unchanged. */
.wc-block-checkout .wc-block-checkout__terms a {
    display: inline-block;
    padding: 13px 0;
    margin: -13px 0;
    line-height: 1.4;
}
/* Fix round 1 (Important 3): the guest-checkout notice, the shipping option's own label
   and secondary ("Free") text, "Add coupons", and the Subtotal/shipping amounts in the
   order summary - all still under 14 px even with the --wp--preset--font-size--small fix
   above where the block hard-codes a size instead of reading that variable. The footer
   total row ("Total to pay after confirmation") is excluded on purpose: its value stays at the block's own
   larger (20 px) size, and its label is handled separately (see the JS total-label filter
   below - the old CSS font-size:0 rule that lived here is gone, see inc/checkout.php). */
.wc-block-checkout .wc-block-checkout__guest-checkout-notice,
.wc-block-checkout .wc-block-components-radio-control__label,
.wc-block-checkout .wc-block-components-radio-control__secondary-label,
.wc-block-checkout .wc-block-components-totals-item__label,
.wc-block-checkout .wc-block-checkout__terms,
.wc-block-checkout .wc-block-checkout__terms a,
.wc-block-checkout .wc-block-components-panel__button {
    font-size: var(--dl-size-small);
}
.wc-block-checkout .wc-block-components-totals-item:not(.wc-block-components-totals-footer-item) .wc-block-components-totals-item__value {
    font-size: var(--dl-size-small);
}

/* Fix round 1 (Important 5) - ATTEMPTED, REVERTED, see s6-task-4-report.md: forcing
   .wc-block-components-sidebar-layout to a row with a 40 px gap at 660-767px did split the
   box into two 294 px columns (confirmed: main 15-309, sidebar 349-643 at 673 px, a clean
   40 px gutter over the fold). But below WooCommerce's own 700px CONTAINER breakpoint, the
   "sidebar" column's own React state renders only the collapsed "Order summary Rs N ⌄"
   toggle, not the totals panel (that panel is a separate render branch, not a CSS-hidden
   one) - a CSS position/display change cannot make it render the desktop panel instead.
   The result was a short toggle pill on the right with a tall empty column under it, next
   to the full-height form on the left: worse than the single column it replaced. Checkout
   is left at WooCommerce's own default here (single column, collapsed summary at the top)
   for widths under ~700px container, same as it was when the review noted this width as
   "consistent with the other one-column pages" (not flagged as broken on its own). Above
   ~700px container WooCommerce's own two-column layout already applies correctly (that
   part passed review at 768/1024/1440 untouched). */

/* 14c. Thank-you page (inc/thankyou.php, woocommerce_thankyou; prints inside
   WooCommerce's own classic order-received template, above/below its order table). */
.dl-thankyou {
    max-width: 1440px;
    margin: clamp(28px, 3.5vw, 44px) auto;
    padding: 0 var(--dl-gutter);
    box-sizing: border-box;
}
.dl-thankyou__steps {
    list-style: none;
    margin: 0 0 clamp(24px, 3vw, 36px);
    padding: 0;
    display: grid;
    gap: clamp(16px, 2vw, 24px);
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
    .dl-thankyou__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dl-thankyou__step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--dl-cream-tint);
    border-radius: 20px;
    padding: 18px 20px;
    box-sizing: border-box;
}
.dl-thankyou__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--dl-teal);
    color: var(--dl-paper);
    font-family: var(--dl-font-display);
    font-size: 1.0625rem;
}
.dl-thankyou__text {
    font-size: var(--dl-size-small);
    line-height: 1.45;
    color: var(--dl-charcoal);
}
.dl-thankyou__whatsapp {
    min-height: 50px;
    background: var(--dl-whatsapp);
    color: var(--dl-whatsapp-ink);
}
.dl-thankyou__whatsapp:hover { background: var(--dl-whatsapp); color: var(--dl-whatsapp-ink); opacity: 0.9; }

/* Fix round 1 (Minor 8): the site-wide WhatsApp float (Click to Chat, #ht-ctc-chat) sits at
   bottom/right 15 px and was covering part of the last step card at 390. Lifted clear on
   the order-received page only (this is the one page where inc/thankyou.php's own content
   sits this close to the bottom of a short page); the general float-vs-sticky-bar handling
   for the rest of the site is section 13i's job, untouched here. */
@media (max-width: 767px) {
    body.woocommerce-order-received #ht-ctc-chat {
        bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Fix round 1 (Minor 9): gap above WooCommerce's own "Additional information" section
   (CusRev + the gift field) so it does not butt against the shipping-address block above
   it. The gift row itself is hidden server-side when unticked (see the
   woocommerce_filter_fields_for_order_confirmation filter in inc/checkout.php) rather than
   with CSS, since CSS cannot single out a row by its printed value ("No"). */
.wc-block-order-confirmation-additional-fields-wrapper {
    margin-top: clamp(20px, 3vw, 32px);
}
.woocommerce-order-details__line-item .wc-block-order-confirmation-additional-fields-wrapper,
dl.wc-block-components-additional-fields-list {
    font-size: var(--dl-size-small);
}

/* =====================================================================
   15. Stage 6 Task 5: Home page (Main.dc.html desktop, HomePhone.dc.html phone)
   Markup: inc/home.php shortcodes ([dl_hero], [dl_gallery], [dl_collections],
   [dl_led], [dl_reels], [dl_guides]) and the Home page's Elementor HTML widgets
   (trust pills, trending head, reviews head, "Why people buy from us").
   Scoped to body.dl-home-page (front page) or dl-home-* / dl-gallery classes.
   ===================================================================== */

/* 15a. Elementor wrappers: full bleed, no widget gaps (each section is one block). */
.dl-home-page .nm-page-full { padding-top: 0; padding-bottom: 0; }
.dl-home-page .elementor-section.dl-home-sec > .elementor-container { max-width: none; }
.dl-home-page .dl-home-sec .elementor-widget-wrap { padding: 0; }
.dl-home-page .dl-home-sec .elementor-widget:not(:last-child) { margin-bottom: 0; margin-block-end: 0; }
.dl-home-page .dl-home-sec ul,
.dl-home-page .dl-home-sec li { margin: 0; padding: 0; list-style: none; }
.dl-home-page .dl-home-sec .dl-link-underline { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; } /* 44 px tap target */

/* 15b. Hero: two-line headline, lead and buttons */
.dl-home-hero {
    display: grid;
    gap: 14px;
    align-items: end;
    padding-top: clamp(16px, 3.9vw, 56px);
    padding-bottom: clamp(20px, 2.8vw, 40px);
}
.dl-home-hero__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* Payment-model sweep (28 Sep 2026): keyword H1 plus the old headline kept as a styled sub-line. */
.dl-home-hero__head { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dl-home-hero__title { font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.5rem); line-height: 1; overflow-wrap: break-word; } /* 38 -> 72 */
.dl-home-hero__sub {
    margin: 0;
    font-family: var(--dl-font-display);
    font-size: var(--dl-size-h3);
    line-height: 1.2;
    color: var(--dl-teal);
}
.dl-home-hero__sub i { font-style: italic; }
.dl-home-hero__lead { margin: 0; color: var(--dl-charcoal); }
.dl-home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dl-home-hero__actions .dl-btn { min-height: 54px; padding: 0 30px; }
@media (max-width: 767px) {
    .dl-home-hero__actions { display: none; } /* phone: the button sits under the gallery (HomePhone) */
}
@media (max-width: 340px) {
    .dl-home-hero__title { font-size: 2.25rem; } /* 36 px on folded phones (280 / 320) so "colours" never clips */
}
@media (min-width: 1024px) {
    .dl-home-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 40px; }
    .dl-home-hero__side { padding-bottom: 10px; }
}

/* 15c. Colour gallery: five velvet columns (desktop), a swipe row under 768 px */
.dl-gallery {
    display: flex;
    gap: 10px;
    padding: 0 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dl-gallery::-webkit-scrollbar { display: none; }
.dl-col {
    flex: 0 0 min(200px, 72%);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 20px 12px 16px;
    border-radius: 16px;
    box-sizing: border-box;
    color: var(--dl-charcoal);
    text-align: center;
    text-decoration: none;
}
.dl-col:hover { color: var(--dl-charcoal); }
.dl-col:focus-visible { outline: 2px solid var(--dl-charcoal); outline-offset: -4px; }
.dl-col__img {
    display: block;
    width: 75%;
    max-width: 220px;
    height: auto;
    aspect-ratio: 1 / 2;
    object-fit: cover;
    border-radius: var(--dl-radius-arch);
}
.dl-col__name { font-family: var(--dl-font-display); font-size: clamp(1.125rem, 1.03rem + 0.38vw, 1.375rem); line-height: 1.15; }
.dl-col__price { font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); font-weight: 500; }
.dl-col__price .amount,
.dl-col__price bdi { color: inherit; }
.dl-col__price .dl-price-from { font-weight: 400; }
.dl-col--cream    { background: var(--dl-cream); }
.dl-col--sage     { background: var(--dl-sage-velvet); }
.dl-col--blush    { background: var(--dl-blush-velvet); }
.dl-col--lavender { background: var(--dl-lavender); }
.dl-col--navy     { background: var(--dl-navy); color: var(--dl-mist); }
.dl-col--navy:hover { color: var(--dl-mist); }
.dl-col--navy:focus-visible { outline-color: var(--dl-mist); }
.dl-gallery-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px 12px;
    padding-top: 10px;
}
.dl-gallery-foot__hint { font-size: var(--dl-size-small); color: var(--dl-charcoal); }
.dl-gallery-foot .dl-btn { min-height: 44px; padding: 0 22px; }
@media (max-width: 767px) {
    /* HomePhone order: blush, sage, lavender on screen; swipe for cream and navy. */
    .dl-col--blush { order: 1; }
    .dl-col--sage { order: 2; }
    .dl-col--lavender { order: 3; }
    .dl-col--cream { order: 4; }
    .dl-col--navy { order: 5; }
}
/* Opened folds (673 / 720): two columns per screen with a 40 px gap on the hinge. */
@media (min-width: 660px) and (max-width: 767px) {
    .dl-gallery { gap: 40px; }
    .dl-col { flex-basis: calc((100% - 40px) / 2); }
}
@media (min-width: 768px) {
    .dl-gallery {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        padding: 0;
        overflow: visible;
    }
    .dl-col {
        border-radius: 0;
        gap: 14px;
        padding: clamp(24px, 2.8vw, 40px) clamp(12px, 1.7vw, 24px) clamp(20px, 2.2vw, 32px);
    }
    .dl-gallery-foot { display: none; }
}

/* 15d. Trust pills band (sage tint) */
.dl-trust { margin: 24px 16px 0; padding: 14px; border-radius: 16px; }
.dl-home-page .dl-trust__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    max-width: 1440px;
    margin: 0 auto;
}
.dl-home-page .dl-trust__pill {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 20px;
    background: var(--dl-paper);
    box-sizing: border-box;
    font-size: var(--dl-size-small);
    line-height: 1.3;
    color: var(--dl-charcoal);
}
.dl-trust__pill .dl-icon { color: var(--dl-teal); display: none; }
.dl-trust__wide { display: none; }
@media (min-width: 660px) and (max-width: 767px) {
    .dl-home-page .dl-trust__list { column-gap: 40px; }
}
@media (min-width: 768px) {
    .dl-trust { margin: 0; padding: 22px var(--dl-gutter); border-radius: 0; }
    .dl-home-page .dl-trust__pill { padding: 12px 20px; border-radius: 28px; font-size: 15px; }
    .dl-trust__pill .dl-icon { display: block; }
    .dl-trust__wide { display: inline; }
    .dl-trust__short { display: none; }
}
@media (min-width: 1024px) {
    .dl-home-page .dl-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* 15e. Shop by collection: six arch tiles */
.dl-home-collections.dl-section { padding-top: clamp(44px, 6.1vw, 88px); padding-bottom: clamp(44px, 5vw, 72px); }
.dl-home-collections__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.dl-home-collections .dl-tile {
    gap: 8px;
    border-radius: clamp(80px, 13vw, 200px) clamp(80px, 13vw, 200px) 16px 16px;
}
.dl-home-collections .dl-tile .dl-arch { height: auto; }
.dl-home-collections .dl-tile__meta { color: var(--dl-charcoal); }
.dl-home-collections .dl-tile__meta .amount,
.dl-home-collections .dl-tile__meta bdi { color: inherit; }
@media (min-width: 660px) and (max-width: 767px) {
    .dl-home-collections__grid { column-gap: 40px; }
}
@media (min-width: 768px) {
    .dl-home-collections__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dl-home-collections .dl-tile { gap: 12px; }
}

/* 15f. Navy "Light, on your terms." band: the only place the glow is used */
.dl-home-led__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 2.8vw, 40px);
    padding-top: clamp(20px, 3.3vw, 48px);
    padding-bottom: clamp(40px, 6.1vw, 88px);
}
.dl-home-led__head { display: grid; gap: 14px; }
.dl-home-led h2 { margin: 0; font-size: clamp(2.125rem, 1.6rem + 2.1vw, 3.5rem); line-height: 1; color: var(--dl-mist); }
.dl-home-led__text { margin: 0; font-size: clamp(0.875rem, 0.82rem + 0.29vw, 1.0625rem); line-height: 1.5; font-weight: 300; color: var(--dl-mist); }
.dl-home-led__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(14px, 2vw, 28px); }
.dl-home-led__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--dl-mist);
    text-align: center;
    text-decoration: none;
}
.dl-home-led__item:hover { color: var(--dl-mist); }
.dl-home-led__item:hover .dl-home-led__name { text-decoration: underline; text-underline-offset: 4px; }
.dl-home-led__item:focus-visible { outline: 2px solid var(--dl-mist); outline-offset: 4px; }
.dl-home-led__img {
    display: block;
    width: min(240px, 100%);
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--dl-radius-arch);
}
.dl-home-led__name { font-family: var(--dl-font-display); font-size: clamp(1.0625rem, 0.946rem + 0.476vw, 1.375rem); line-height: 1.2; }
.dl-home-led__price { font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); font-weight: 500; }
.dl-home-led__price .amount,
.dl-home-led__price bdi { color: inherit; }
.dl-home-led__btn { align-self: center; min-height: 54px; padding: 0 30px; }
.dl-home-led__btn:hover { background: var(--dl-glow); color: var(--dl-navy); border-color: var(--dl-mist); }
.dl-home-led__btn:focus-visible { outline-color: var(--dl-mist); }
@media (min-width: 660px) and (max-width: 767px) {
    .dl-home-led__grid { column-gap: 40px; }
}
@media (min-width: 768px) {
    .dl-home-led__item { gap: 12px; }
}
@media (min-width: 1024px) {
    .dl-home-led__head { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); align-items: end; gap: 40px; }
    .dl-home-led__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 15g. Trending (WooCommerce [products] loop, cards from section 12) and Why/reviews: boxed */
.dl-home-page .elementor-section.dl-home-sec--trending > .elementor-container,
.dl-home-page .elementor-section.dl-home-sec--why > .elementor-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--dl-section-y) var(--dl-gutter) 0;
    box-sizing: border-box;
}
.dl-home-sec--trending .woocommerce ul.products { margin-bottom: 0; }

/* 15h. "In real homes": the three product videos, blush tint band */
.dl-home-reels { margin-top: clamp(32px, 4vw, 56px); }
.dl-home-reels__inner {
    display: grid;
    gap: 16px;
    align-items: center;
    padding-top: clamp(16px, 2.8vw, 40px);
    padding-bottom: clamp(36px, 5.6vw, 80px);
}
.dl-home-reels__intro { display: flex; flex-direction: column; gap: clamp(12px, 1.3vw, 18px); align-items: flex-start; min-width: 0; }
.dl-home-reels__intro h2 { margin: 0; }
.dl-home-reels__text { margin: 0; font-size: var(--dl-size-lead); line-height: 1.5; font-weight: 300; color: var(--dl-charcoal); }
.dl-home-reels__intro .dl-link-underline { display: inline-flex; align-items: center; min-height: 44px; }
.dl-home-reels__row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dl-home-reels__row::-webkit-scrollbar { display: none; }
.dl-reel { flex: 0 0 min(200px, 72%); margin: 0; display: flex; flex-direction: column; gap: 6px; scroll-snap-align: start; min-width: 0; }
.dl-reel__media { position: relative; }
.dl-reel__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 14;
    object-fit: cover;
    /* a true half-circle top at any width: 50% of the width across, 32% of the (14/9 taller) height down */
    border-radius: 50% 50% 16px 16px / 32% 32% 16px 16px;
    background: var(--dl-paper);
    cursor: pointer;
}
.dl-reel__play {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--dl-paper);
    color: var(--dl-teal);
    cursor: pointer;
    transition: opacity .2s;
}
.dl-reel__play:focus-visible { outline: 2px solid var(--dl-teal); outline-offset: 3px; }
.dl-reel.is-playing .dl-reel__play:not(:focus-visible) { opacity: 0; }
.dl-reel__icon-pause,
.dl-reel.is-playing .dl-reel__icon-play { display: none; }
.dl-reel.is-playing .dl-reel__icon-pause { display: block; }
.dl-reel__caption { font-size: 15px; }
.dl-reel__caption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dl-charcoal); }
.dl-reel__caption a:hover { color: var(--dl-teal); }
@media (min-width: 660px) and (max-width: 767px) {
    .dl-home-reels__row { gap: 40px; }
    .dl-reel { flex-basis: calc((100% - 40px) / 2); }
}
@media (min-width: 768px) {
    .dl-home-reels__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; }
}
@media (min-width: 1024px) {
    .dl-home-reels__inner { grid-template-columns: minmax(260px, 400px) minmax(0, 1fr); gap: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .dl-reel__play { transition: none; }
}

/* 15i. Customer reviews card + "Why people buy from us" */
.dl-home-page .elementor-section.dl-home-sec--why > .elementor-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(28px, 3.9vw, 56px);
    align-items: center;
}
.dl-home-page .dl-home-sec--why .elementor-column { width: 100%; }
.dl-home-page .dl-home-sec--why .dl-home-why__col { order: -1; } /* phone: the list first (HomePhone) */
.dl-home-page .dl-home-reviews > .elementor-widget-wrap {
    display: block;
    padding: clamp(20px, 2.5vw, 36px);
    border-radius: 24px;
    background: var(--dl-paper);
    border: 1px solid rgba(127, 139, 137, 0.25);
}
.dl-home-reviews__title { margin: 0 0 12px; font-size: clamp(1.375rem, 1.23rem + 0.6vw, 1.75rem); line-height: 1.2; color: var(--dl-teal); }
.dl-home-reviews .cr-no-reviews { font-size: 1rem; line-height: 1.5; color: var(--dl-charcoal); }
.dl-why__title { margin: 0 0 clamp(14px, 1.5vw, 22px); }
.dl-home-page .dl-why__list { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px); font-size: clamp(0.9375rem, 0.87rem + 0.286vw, 1.125rem); line-height: 1.5; font-weight: 300; color: var(--dl-charcoal); }
.dl-home-page .dl-why__list li { display: flex; gap: 12px; align-items: flex-start; }
.dl-why__dot { flex-shrink: 0; width: 10px; height: 10px; margin-top: 0.5em; border-radius: 50%; }
.dl-why__dot--blush { background: var(--dl-blush); }
.dl-why__dot--sage { background: var(--dl-sage-velvet); }
.dl-why__dot--lavender { background: var(--dl-lavender); }
.dl-why__dot--navy { background: var(--dl-navy); }
@media (min-width: 1024px) {
    .dl-home-page .elementor-section.dl-home-sec--why > .elementor-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dl-home-page .dl-home-sec--why .dl-home-why__col { order: 0; }
    .dl-why__dot { width: 12px; height: 12px; }
}
/* Proofread I13 (28 Sep 2026): hide the reviews card while the review plugin has nothing to show;
   it comes back by itself once real reviews exist. The "Why" list then takes the full width. */
.dl-home-page .dl-home-reviews:has(.cr-no-reviews) { display: none; }
@media (min-width: 1024px) {
    .dl-home-page .elementor-section.dl-home-sec--why:has(.cr-no-reviews) > .elementor-container { grid-template-columns: minmax(0, 1fr); }
}

/* 15j. Guides and ideas: the three newest posts */
.dl-home-guides.dl-section { padding-bottom: clamp(44px, 6.1vw, 88px); }
.dl-home-guides__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2vw, 28px); }
.dl-guide { display: flex; flex-direction: column; gap: 10px; color: var(--dl-charcoal); text-decoration: none; min-width: 0; }
.dl-guide:hover { color: var(--dl-charcoal); }
.dl-guide:hover .dl-guide__title { color: var(--dl-teal); }
.dl-guide__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.dl-guide__title { font-family: var(--dl-font-display); font-size: clamp(1.25rem, 1.11rem + 0.57vw, 1.625rem); line-height: 1.2; }
.dl-guide__excerpt { font-size: 15px; line-height: 1.5; font-weight: 300; }
.dl-guide__meta { font-size: var(--dl-size-small); color: var(--dl-charcoal); }
@media (min-width: 660px) and (max-width: 767px) {
    .dl-home-guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 768px) {
    .dl-home-guides__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dl-guide { gap: 14px; }
}

/* 15k. Dual-screen devices: keep the full-bleed bands in the first pane too. */
@media (horizontal-viewport-segments: 2) {
    .dl-gallery,
    .dl-trust { max-width: env(viewport-segment-width 0 0, 100%); }
}

/* =====================================================================
   16. Stage 6 Task 6: About (358), Contact (544), FAQ (379), Guides index
   (758, the posts page) and 404.php. About/Contact markup is one Elementor
   HTML widget per page (see plans/sdd/tmp/build-about-contact.php, run via
   wp eval-file); FAQ/Guides-intro/404 tiles come from inc/pages.php.
   ===================================================================== */

/* 16a. Shared */
.dl-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    font-size: var(--dl-size-small);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* Fix round 1 (I-1): sage on mist measured 3.49:1 (fails 4.5:1); teal passes. */
    color: var(--dl-teal);
}

/* 16b. About (358) */
.dl-about-hero__grid {
    display: grid;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding-top: clamp(8px, 1.5vw, 20px);
}
.dl-about-hero__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dl-about-hero__title { margin: 0; }
.dl-about-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.dl-about-hero__image { min-width: 0; }
.dl-about-hero__image .dl-arch { aspect-ratio: 4 / 5; max-width: 420px; margin: 0 auto; }
@media (min-width: 768px) {
    .dl-about-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); }
}

.dl-chapter { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dl-chapter__title { margin: 0; color: var(--dl-teal); }
.dl-chapter p { margin: 0; font-size: 1rem; line-height: 1.6; font-weight: 300; color: var(--dl-charcoal); }

.dl-about-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dl-stat { display: flex; flex-direction: column; gap: 6px; text-align: center; padding: 8px; }
.dl-stat__num { color: var(--dl-teal); font-size: clamp(1.75rem, 1.5rem + 1vw, 2.75rem); }
.dl-stat__label { font-size: var(--dl-size-small); line-height: 1.4; color: var(--dl-charcoal); }
@media (min-width: 660px) and (max-width: 767px) { .dl-about-numbers { column-gap: 40px; } }
@media (min-width: 768px) { .dl-about-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.dl-about-lahore { text-align: center; }
.dl-about-lahore__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 760px; }
.dl-about-lahore__line { margin: 0; color: var(--dl-mist); }
.dl-about-lahore .dl-lead { color: var(--dl-mist); font-weight: 300; }

.dl-why-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 28px;
}
.dl-why-grid li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--dl-charcoal);
}
.dl-why__mark {
    flex-shrink: 0;
    margin-top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dl-blush);
}
@media (min-width: 660px) and (max-width: 767px) { .dl-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 768px) { .dl-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dl-about-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3vw, 36px); }

/* 16c. Contact (544) */
.dl-contact-hero { text-align: left; }
.dl-contact-hero__text { max-width: 640px; }

.dl-contact-cards__grid { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin: 0 auto; }
@media (min-width: 660px) { .dl-contact-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 660px) and (max-width: 767px) { .dl-contact-cards__grid { column-gap: 40px; } }
.dl-contact-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: clamp(20px, 2.4vw, 30px);
    border-radius: 24px;
    background: var(--dl-cream-tint);
    box-shadow: none;
}
.dl-contact-card .dl-icon { color: var(--dl-teal); margin-bottom: 4px; }
.dl-contact-card--whatsapp { background: var(--dl-blush-tint); }
.dl-contact-card--whatsapp .dl-icon { color: var(--dl-whatsapp-ink); }
.dl-contact-card h3 { margin: 0; }
.dl-contact-card__num { margin: 0; font-size: 1.125rem; font-weight: 500; color: var(--dl-charcoal); }
.dl-contact-card__note { margin: 0 0 6px; font-size: var(--dl-size-small); color: var(--dl-charcoal); font-weight: 300; }
.dl-contact-card .dl-btn { margin-top: 4px; align-self: stretch; justify-content: center; }

.dl-contact-form-wrap { padding-bottom: clamp(12px, 1.6vw, 20px); }
.dl-contact-form-inner { max-width: 760px; text-align: center; margin-left: auto; margin-right: auto; }
.dl-contact-form-inner h2 { margin: 0 0 8px; }

/* The nm-cf7 widget's own section: no Elementor padding, Mist page background matches
   the intro section above it, form fields pulled to the same 760px measure and styled
   to the design system (pills, teal focus, no Savoy default borders/shadows). */
.elementor-widget-nm-cf7 { padding-top: 0 !important; }
.elementor-widget-nm-cf7 .elementor-widget-container { max-width: 760px; margin: 0 auto; padding: 0 var(--dl-gutter) clamp(32px, 4vw, 56px); box-sizing: border-box; }
body.page-id-544 .wpcf7-form { display: flex; flex-direction: column; gap: 16px; }
body.page-id-544 .wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: 6px; }
body.page-id-544 .wpcf7-form label { font-size: var(--dl-size-small); font-weight: 500; color: var(--dl-charcoal); }
body.page-id-544 .wpcf7-form input[type="text"],
body.page-id-544 .wpcf7-form input[type="tel"],
body.page-id-544 .wpcf7-form input[type="email"],
body.page-id-544 .wpcf7-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px;
    border: 1px solid rgba(127, 139, 137, 0.5);
    border-radius: 18px;
    background: var(--dl-paper);
    font-family: var(--dl-font-text);
    font-size: 1rem;
    color: var(--dl-charcoal);
}
body.page-id-544 .wpcf7-form textarea { border-radius: 20px; min-height: 140px; resize: vertical; }
body.page-id-544 .wpcf7-form input:focus,
body.page-id-544 .wpcf7-form textarea:focus { outline: 2px solid var(--dl-teal); outline-offset: 1px; border-color: var(--dl-teal); }
body.page-id-544 .wpcf7-form input[type="submit"] {
    align-self: flex-start;
    min-height: var(--dl-btn-height);
    padding: 0 30px;
    border: 0;
    border-radius: var(--dl-radius-pill);
    background: var(--dl-teal);
    color: var(--dl-paper);
    font-family: var(--dl-font-text);
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
}
body.page-id-544 .wpcf7-form input[type="submit"]:hover { background: var(--dl-charcoal); }
/* Fix round 1 (M-2): the previous red validation-tip colour was the only non-palette
   hex in this section. Charcoal text on a Blush pill (both palette tokens) reads as a
   validation tip, not plain text. */
body.page-id-544 .wpcf7-form .wpcf7-not-valid-tip {
    display: inline-block;
    margin-top: 4px;
    padding: 3px 10px;
    border-radius: var(--dl-radius-pill);
    background: var(--dl-blush);
    color: var(--dl-charcoal);
    font-size: var(--dl-size-small);
}
body.page-id-544 .wpcf7-response-output { border-radius: 14px; font-size: var(--dl-size-small); }

.dl-contact-wholesale { text-align: center; }
.dl-contact-wholesale__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 680px; }

/* 16d. FAQ (379): search box + <details> groups (inc/pages.php, dl_faq_group_content). */
.dl-faq-search { max-width: 640px; margin: 0 auto clamp(24px, 3vw, 36px); }
.dl-faq-search__input {
    width: 100%;
    box-sizing: border-box;
    min-height: var(--dl-btn-height);
    padding: 0 22px;
    border: 1px solid var(--dl-teal);
    border-radius: var(--dl-radius-pill);
    background: var(--dl-paper);
    font-family: var(--dl-font-text);
    font-size: 1rem;
    color: var(--dl-charcoal);
}
.dl-faq-search__input:focus { outline: 2px solid var(--dl-teal); outline-offset: 2px; }
.dl-faq-search__input::-webkit-search-cancel-button { cursor: pointer; }
.dl-faq-search__empty { max-width: 640px; margin: 0 auto clamp(20px, 2.6vw, 32px); text-align: center; font-size: var(--dl-size-small); color: var(--dl-charcoal); }
.dl-faq-search__empty a { color: var(--dl-teal); }

.dl-faq-groups { max-width: 900px; margin: 0 auto; }
.dl-faq-group.dl-acc { border-top-color: rgba(127, 139, 137, 0.35); }
.dl-faq-groups .dl-faq-group:last-child { border-bottom: 1px solid rgba(127, 139, 137, 0.35); }
.dl-faq-group .dl-acc__summary { min-height: 64px; }
.dl-faq-group .dl-acc__title { font-family: var(--dl-font-display); font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); color: var(--dl-teal); font-weight: 400; }
.dl-faq-group__body { padding: 0 0 22px; }
.dl-faq-group__body .schema-faq-section[hidden] { display: none; }

/* Container page-page: keep the page's page.php <div id="post-379"> at the same measure
   as everywhere else on the site (Savoy's default entry-content has no max-width). */
body.page-id-379 #post-379 { max-width: 1440px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--dl-gutter); box-sizing: border-box; }
body.page-id-379 #post-379 .dl-eyebrow,
body.page-id-379 .dl-faq-title,
body.page-id-379 .dl-faq-search { text-align: center; }
body.page-id-379 #post-379 .dl-eyebrow { display: block; }
body.page-id-379 .dl-faq-title { margin: 0 0 clamp(24px, 3vw, 36px); }

/* 16e. Guides index (758, the posts page): intro line + Savoy's own grid restyled. */
.dl-guides-intro { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(8px, 1.5vw, 16px); text-align: center; }
.dl-guides-intro h1 { margin: 8px 0; }
.dl-guides-intro .dl-lead { max-width: 640px; margin: 0 auto; }
body.blog .nm-blog-wrap,
body.page-id-758 .nm-blog-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--dl-gutter) clamp(40px, 5vw, 64px); box-sizing: border-box; }
body.blog #nm-blog-list,
body.page-id-758 #nm-blog-list { margin: 0 -12px; }
body.blog #nm-blog-list > li,
body.page-id-758 #nm-blog-list > li { padding: 12px; }
body.blog .nm-post-thumbnail,
body.page-id-758 .nm-post-thumbnail { border-radius: var(--dl-radius-arch); overflow: hidden; aspect-ratio: 4 / 3; }
body.blog .nm-post-thumbnail img,
body.page-id-758 .nm-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
body.blog .nm-post-thumbnail .nm-image-overlay,
body.page-id-758 .nm-post-thumbnail .nm-image-overlay { background: rgba(20, 79, 87, 0.12); }
/* Fix round 1 (I-2): Stone on Mist measured 3.25:1 (fails 4.5:1); Charcoal passes.
   Savoy's own ::before (a short dividers_color bar left of the date, generated from
   the dividers_color option - #DCE6E1 on Mist measured 1.18:1) is purely decorative;
   removed rather than recoloured, and its reserved padding-left removed with it. */
body.blog .nm-post-meta,
body.page-id-758 .nm-post-meta { color: var(--dl-charcoal); font-size: var(--dl-size-small); margin-top: 14px; padding-left: 0; }
body.blog .nm-post-meta::before,
body.page-id-758 .nm-post-meta::before { display: none; }
body.blog .nm-post-title,
body.page-id-758 .nm-post-title { margin: 4px 0 8px; }
/* Fix round 1 (M-3): title/More links measured 23-37 px tall (fail 44 px); padding
   brings the tap target to 44 px without changing the type size (min-height + centred
   padding, so a wrapped two-line title just gets a little breathing room instead). */
body.blog .nm-post-title a,
body.page-id-758 .nm-post-title a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--dl-font-display);
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    color: var(--dl-teal);
    text-decoration: none;
}
body.blog .nm-post-excerpt,
body.page-id-758 .nm-post-excerpt { font-size: 15px; line-height: 1.55; font-weight: 300; color: var(--dl-charcoal); }
body.blog .nm-post-read-more,
body.page-id-758 .nm-post-read-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--dl-teal);
    text-decoration: none;
    font-weight: 500;
}

/* 16f. 404.php */
.dl-404 { padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); text-align: center; }
.dl-404__inner { display: flex; flex-direction: column; align-items: center; }
/* Fix round 1 (M-5): 120 px wide with no stroke read as a hairline at 1440 (see the
   review screenshot). Wider, a fixed height (the wave's viewBox has no locked aspect
   ratio - preserveAspectRatio="none" - so height must be set explicitly, not "auto"),
   and a teal stroke over the blush fill so the curve itself reads as a mark. */
.dl-404__mark { width: 200px; height: 48px; margin: 0 auto 16px; transform: rotate(180deg); }
.dl-404__mark path { stroke: var(--dl-teal); stroke-width: 3; }
.dl-404__title { margin: 0 0 10px; }
.dl-404__text { max-width: 560px; margin: 0 auto clamp(24px, 3vw, 36px); }
.dl-404__search { width: 100%; max-width: 480px; margin: 0 auto clamp(36px, 4.5vw, 56px); }
.dl-404 .search { display: flex; align-items: center; gap: 8px; }
.dl-404 .search-input {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-height: var(--dl-btn-height);
    padding: 0 20px;
    border: 1px solid var(--dl-teal);
    border-radius: var(--dl-radius-pill);
    background: var(--dl-paper);
    font-family: var(--dl-font-text);
    font-size: 1rem;
    color: var(--dl-charcoal);
}
.dl-404 .search-input:focus { outline: 2px solid var(--dl-teal); outline-offset: 2px; }
.dl-404 .search-submit {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: var(--dl-teal);
    color: var(--dl-paper);
    cursor: pointer;
}
.dl-404 .search-submit:hover { background: var(--dl-charcoal); }
.dl-404__cats-title { margin: 0 0 clamp(20px, 2.5vw, 28px); }
/* Fix round 1 (M-4): the shared .dl-grid--products utility (1/2/3/4 columns at
   360/768/1280) left 4 columns at 1440 with 2 orphan tiles on their own row for a
   6-item grid. 1 column under 673, 2 from 673 to 1023, 3 from 1024 - a clean 3x2/2x3
   layout with no leftover row. (404.php no longer carries the dl-grid--products class,
   only dl-grid dl-404__grid, so nothing here fights that utility's own breakpoints.) */
.dl-404__grid {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 673px) and (max-width: 1023px) {
    .dl-404__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}
@media (min-width: 1024px) {
    .dl-404__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dl-404-tile { background: var(--dl-cream-tint); }
.dl-404-tile .dl-arch { aspect-ratio: 4 / 5; }
.dl-404__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(36px, 4.5vw, 56px); }

/* =====================================================================
   17. Stage 6 Task 7 (6F): final responsive, performance and accessibility pass
   ===================================================================== */

/* 17a. 14 px text floor (re-measured on all 12 pages at 390 and 1440).
   - Checkout order-summary quantity badge ("1" on the thumbnail) read 12.25 px (WooCommerce block).
   - Savoy's product-page breadcrumb read 12 px on phones.
   - Guide posts: Savoy's "Previous" / "Next" labels read 13 px at 1440. */
/* "body" prefix: WooCommerce's block stylesheet prints after design.css with the same selector. */
body .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    font-size: 14px;
    line-height: 1;
    min-width: 24px;
    min-height: 24px;
}
#nm-breadcrumb,
#nm-breadcrumb a,
#nm-breadcrumb .delimiter { font-size: var(--dl-size-small); }
.nm-post-pagination a .short-title { font-size: var(--dl-size-small); }

/* 17b. 44 px tap targets without changing the look: padding grows the hit area and an equal
   negative margin gives the space back, so the icon/text stays exactly where it was.
   - Savoy card wishlist heart (16x18) and "Show more" Quick View link (67x21), every product grid.
   - Product-page wishlist (32x18) and share icons (10-18 x 20).
   - Shop toolbar "Categories" / "Filter" (23 px), Guides index category links (23 px).
   - Header search close (16x16), mobile-menu close (20x23), cart-panel remove (28x28). */
.nm-shop-loop-details .nm-wishlist-button,
#nm-header-search-close {
    display: inline-block;
    padding: 13px 14px;
    margin: -13px -14px;
}
/* Product-page heart (32 px wide already): grow up/down and to the left only, so the share
   icons that follow it on the same line do not move. */
.nm-product-wishlist-button-wrap .nm-wishlist-button {
    display: inline-block;
    padding: 13px 0 13px 14px;
    margin: -13px 0 -13px -14px;
}
/* Share icons (product page and guide posts) keep Savoy's 15 px gap: right margin is 15 - 14 = 1 px. */
.nm-product-share a,
.nm-post-share a { padding: 12px 14px; margin: -12px 1px -12px -14px; }
.nm-product-share a:last-child,
.nm-post-share a:last-child { margin-right: -14px; }
/* Mobile-menu close stays a block (Savoy), only the hit area grows. */
#nm-mobile-menu-close-button { padding: 11px 12px; margin: -11px -12px; }
/* Cart panel remove "x": Savoy fixes it at 28x28 (right-aligned text, line-height 30).
   Grow it to 44x44 leftwards and 8 px up/down; the x stays in the same spot. */
#nm-cart-panel .product_list_widget .remove { width: 44px; height: 44px; line-height: 46px; top: -1px; }
#nm-cart-panel .product_list_widget .woocommerce-mini-cart-item:first-child .remove { top: -15px; }
.products .nm-shop-loop-actions > a.nm-quickview-btn, /* beats Savoy's ".attributes-position-details .nm-shop-loop-actions > a { padding-bottom: 2px }" */
.nm-shop-filter-menu a.invert-color,
#nm-blog-categories-list a {
    display: inline-block;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-top: -12px;
    margin-bottom: -12px;
}
#nm-blog-categories-list a { padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
/* Breadcrumb links (category band and Savoy's product breadcrumb): 22-28 px tall. */
.dl-cat-band__crumb a,
#nm-breadcrumb a {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: -10px;
    margin-bottom: -10px;
}
/* Savoy's previous/next product arrows (12x18 at 1440; axe target-size). */
.nm-single-product-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}
/* Product quantity box: 42 px tall next to the 50 px pill button. */
.dl-pdp .summary .quantity .qty { min-height: 44px; }
/* Guide post Previous / Next (43 px) and the cart's "Add coupons" panel toggle (21 px). */
.nm-post-pagination a { min-height: 44px; }
.wc-block-components-panel__button {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* 17b2. LCP on the product page: WooCommerce prints the gallery with an inline "opacity: 0" and
   only fades it in after its deferred slider script has run, so the main photo (the LCP element)
   waited ~0.9 s after it had downloaded. Show it at once; before the slider initialises only the
   first photo is shown (the rest are inside .flex-viewport afterwards), so nothing jumps. */
.dl-pdp .woocommerce-product-gallery { opacity: 1 !important; }
.dl-pdp .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) { display: none; }

/* 17c. Links inside running text are underlined, not colour-only (axe link-in-text-block:
   Deep teal vs Charcoal body text is only 1.6:1, under the 3:1 needed without an underline). */
:is(.entry-content, .dl-cat-band__text, .term-description, .dl-category-bottom, .schema-faq-answer, .nm-post-content) :is(p, li, td) a:not([class*="button"]):not(.dl-btn):not(.dl-chip):not(li.product *):not(.dl-home-trending *):not(.dl-guides-cards *),
.nm-single-post-meta a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* 17e. Keyboard access to the mega menu (final review I1): Savoy opens sub-menus on hover only.
   Keep them open while any link inside has focus, so Tab reaches the six category links. */
.nm-menu li:not(.no-hover):focus-within > .sub-menu {
    display: block;
}
@media (prefers-reduced-motion: no-preference) {
    .nm-menu li:focus-within > .sub-menu { transition: none; }
}

/* 17d. Opened folds (660-767 px, i.e. 673 and 720): nothing with text or a card crosses the hinge.
   - Category/shop band: intro left, room image right, 40 px gutter (the band is centred, so the
     gutter sits on the centre line). The image used to sit across the centre (241-621 at 673).
   - About hero: copy left, arch image right (the image was centred across the hinge, 127-547).
   - Cart "You may be interested in": 2 columns with a 40 px gutter instead of 3 (the middle card
     sat across the hinge, 235-438 at 673). */
@media (min-width: 660px) and (max-width: 767px) {
    .dl-cat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
    .dl-cat-band__image { max-width: none; }
    .dl-about-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: center; }
    .wc-block-cart .wp-block-woocommerce-product-collection .wc-block-product-template {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }
}

/* Proofread M11 (28 Sep 2026): the empty-wishlist line is now a paragraph (inc/pages.php), not a second H1. */
#nm-wishlist-empty .dl-wishlist-empty__title {
    margin: 0 0 8px;
    font-family: var(--dl-font-display);
    font-size: var(--dl-size-h3);
    line-height: 1.2;
    color: var(--dl-teal);
}