/* ==========================================================================
   The Daily Key — premium.css  (gold + burgundy brand theme)
   Loaded AFTER style.css / responsive.css / animations.css: it re-themes the
   whole storefront through the existing design tokens, then adds the new
   header, homepage and footer. No backend or markup contracts are changed.
   ========================================================================== */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/cinzel-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/cinzel-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/cinzel-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/cinzel-latin-700-normal.woff2') format('woff2'); }

:root {
  /* brand palette sampled from the logo */
  --burgundy: #7A1230; --burgundy-d: #5A0A22; --burgundy-l: #A3203F; --wine: #3A0715;
  --g1: #F8EBC0; --g2: #E6C772; --g3: #C9A24B; --g4: #A67C2E; --g5: #7A5618;
  --pink: #F6EBDD; --blush: #FBF3E8; --pale: #FFFCF6; --ivory: #FFFDF8;
  --rose: #A3203F; --rose-deep: #7A1230; --rose-deeper: #5A0A22;
  --gold: #C9A24B; --gold-deep: #8F6B24; --champagne: #F0DFB5;
  --ink: #2B1519; --ink-2: #64494F; --ink-3: #7D656B;
  --line: rgba(201, 162, 75, .5); --line-soft: rgba(43, 21, 25, .1);
  --gold-grad: linear-gradient(135deg, #D8B35A 0%, #B58B31 38%, #8F6820 62%, #C79F48 100%);
  --gold-grad-soft: linear-gradient(135deg, #F8EBC0 0%, #E6C772 45%, #C9A24B 100%);
  --gold-grad-text: linear-gradient(180deg, #EFD58A 0%, #CFA445 42%, #946A1F 100%);
  --burgundy-grad: linear-gradient(135deg, #9A1B3E 0%, #7A1230 55%, #5A0A22 100%);
  --display: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --shadow-s: 0 8px 22px -12px rgba(90, 10, 34, .34);
  --shadow-m: 0 26px 52px -28px rgba(90, 10, 34, .42);
  --shadow-gold: 0 10px 26px -12px rgba(166, 124, 46, .55);
  --header-h: 82px; --wrap-pad: clamp(16px, 2.4vw, 40px);
}
body { background: var(--pale); }
::selection { background: var(--champagne); color: var(--ink); }
:focus-visible { outline-color: var(--burgundy); }
.gold-text { background: var(--gold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ---------- buttons ---------- */
.btn { border-radius: 3px; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; font-weight: 700; }
.btn-rose { --bg: var(--burgundy-grad); --fg: #fff; --bd: var(--burgundy-d); --hover: var(--ink); box-shadow: var(--shadow-s); }
.btn-gold { --bg: var(--gold-grad); --fg: #fff; --bd: #8F6820; --hover: var(--burgundy); text-shadow: 0 1px 1px rgba(60, 35, 5, .45); box-shadow: var(--shadow-gold); }
.btn-ghost { --fg: var(--ink); --bd: rgba(166, 124, 46, .75); --hover: var(--burgundy); }
.btn-outline { --bg: rgba(255, 253, 248, .55); --fg: var(--ink); --bd: var(--g4); --hover: var(--burgundy); }
.btn-light { --hover: var(--burgundy); }
.icon-btn:hover { background: var(--blush); color: var(--burgundy); }
.count { background: var(--burgundy-grad); box-shadow: 0 0 0 2px #fff; }
.badge { border: 1px solid var(--line); color: var(--burgundy-d); background: rgba(255, 253, 248, .95); font-family: var(--sans); }
.badge-sale { background: var(--burgundy-grad); border-color: var(--burgundy-d); color: #fff; }

/* ---------- product cards (shared by every page) ---------- */
.pcard-media { background: var(--blush); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset; transition: box-shadow .5s var(--ease), border-color .5s; }
.pcard:hover .pcard-media { border-color: var(--g3); box-shadow: var(--shadow-m); }
.pcard-img { object-position: center; }
.pcard-title { font-family: var(--serif); font-weight: 600; color: var(--ink); }
.pcard-title a:hover { color: var(--burgundy); }
.pcard-desc { font-size: .8rem; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.pcard-price { color: var(--burgundy); font-weight: 700; font-size: 1rem; }
.pcard-price .price-was { color: var(--ink-3); font-weight: 500; }
.btn-add { --fg: var(--burgundy-d); --bd: var(--g4); --hover: var(--burgundy); --hover-fg: #fff; border-radius: 3px; background: transparent; }
.btn-add.is-done { --bd: var(--burgundy); }
.wish-btn { background: rgba(255, 253, 248, .95); color: var(--burgundy-d); box-shadow: 0 4px 12px -6px rgba(90, 10, 34, .4); }
.wish-btn.is-on, .wish-btn:hover { color: var(--burgundy); }
.qv-btn { background: rgba(255, 253, 248, .97); color: var(--burgundy-d); border: 1px solid var(--line); }
.qv-btn:hover { background: var(--burgundy); color: #fff; }

/* section headings used across the site */
.eyebrow-gold, .sec-head .eyebrow { font-family: var(--display); letter-spacing: .24em; text-transform: uppercase; font-size: .72rem; color: var(--g4); }

/* ---------- HEADER ---------- */
.announce { display: none; }
.site-header.dkh { background: rgba(255, 253, 248, .95); border-bottom: 0; position: sticky; box-shadow: 0 1px 0 rgba(43, 21, 25, .06); }
.site-header.dkh::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--g3) 20%, var(--g2) 50%, var(--g3) 80%, transparent); opacity: .9; }
.site-header.dkh.is-scrolled { box-shadow: 0 14px 34px -24px rgba(90, 10, 34, .55); }
.dkh .header-inner { max-width: 1680px; padding: 10px var(--pad); gap: clamp(16px, 2.4vw, 40px); }
.dkh .logo { gap: 12px; }
.dkh .logo-badge { width: 60px; height: 60px; border-radius: 50%; filter: drop-shadow(0 4px 8px rgba(122, 86, 24, .35)); transition: transform .7s var(--ease); }
.dkh .logo:hover .logo-badge { transform: rotate(-6deg) scale(1.04); }
.dkh .logo-text { gap: 0; }
.dkh .logo-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 1.7vw, 1.55rem); letter-spacing: .16em; color: var(--burgundy-d); text-transform: uppercase; }
.dkh .logo-sub { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: .56rem; letter-spacing: .38em; color: var(--g4); margin-top: 5px; }
.dkh .logo-sub::before, .dkh .logo-sub::after { content: ''; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--g3)); }
.dkh .logo-sub::after { transform: scaleX(-1); }
.dkh .main-nav > ul { gap: clamp(12px, 1.9vw, 34px); }
.dkh .nav-link { font-family: var(--display); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.dkh .nav-link:hover, .dkh .has-mega.is-open > .nav-link { color: var(--burgundy); }
.dkh .nav-link span::after { height: 2px; bottom: -3px; background: var(--gold-grad); }
.dkh .nav-link[aria-current="page"] { color: var(--g5); }
.dkh .icon-btn { width: 42px; height: 42px; color: var(--ink); }
.mega { background: var(--ivory); border-top: 1px solid var(--line); box-shadow: 0 34px 50px -34px rgba(90, 10, 34, .5); }
.mega-list li a:hover, .mega-all { color: var(--burgundy); }
.mega-tile span { font-family: var(--display); letter-spacing: .06em; background: linear-gradient(0deg, rgba(58, 7, 21, .82), transparent); }
@media (min-width: 1280px) { .dkh .main-nav { display: flex; } .dkh .nav-toggle { display: none; } }
@media (max-width: 1279px) {
  .dkh .main-nav { display: none; }
  .dkh .nav-toggle { display: inline-grid; margin-left: -8px; }
  .dkh .header-inner { display: grid; grid-template-columns: 1fr auto 1fr; padding-block: 8px; }
  .dkh .logo { justify-self: center; }
  .dkh .logo-badge { width: 48px; height: 48px; }
  .dkh .logo-sub { display: none; }
  .dkh .logo-name { font-size: 1.05rem; letter-spacing: .14em; }
}
@media (max-width: 420px) { .dkh .logo-name { display: none; } }
.mobile-nav .ov-panel { background: var(--ivory); }
.mnav-list > li > a, .mnav-list summary { font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; font-size: .86rem; }
.mnav-list details ul a:hover { color: var(--burgundy); }

/* ---------- HERO ---------- */
.dkhero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(90deg, #FFFBF3 0%, #F8ECDD 28%, #F0DAC0 100%); min-height: max(340px, 20.4vw); max-height: 600px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.dkhero-media { position: absolute; top: 0; bottom: 0; right: 0; height: 100%; aspect-ratio: 976 / 312; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%); mask-image: linear-gradient(90deg, transparent 0, #000 15%); }
.dkhero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; will-change: transform; }
.dkhero-copy { position: relative; width: 100%; max-width: 1680px; padding-block: clamp(28px, 3vw, 52px); }
.dkhero-inner { max-width: min(37vw, 560px); }
.dkhero .eyebrow { font-family: var(--display); font-size: clamp(.62rem, .8vw, .84rem); letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); margin-bottom: clamp(8px, 1.1vw, 16px); }
.dkhero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.2rem, 3.35vw, 4.4rem); letter-spacing: .035em; line-height: 1.02; text-transform: uppercase; display: flex; align-items: flex-start; gap: .12em; white-space: nowrap; }
.dkhero h1 .gold-text { filter: drop-shadow(0 2px 1px rgba(255, 255, 255, .65)); }
.dkhero h1 svg { width: .62em; height: .9em; margin-top: -.14em; flex: none; filter: drop-shadow(0 2px 2px rgba(122, 86, 24, .35)); }
.dkhero .tagline { font-family: var(--display); font-weight: 500; font-size: clamp(.78rem, 1.18vw, 1.3rem); letter-spacing: .26em; text-transform: uppercase; color: var(--ink); margin: clamp(12px, 1.4vw, 22px) 0 clamp(10px, 1.2vw, 18px); line-height: 1.5; }
.dkhero .copy { font-size: clamp(.9rem, 1.1vw, 1.14rem); color: var(--ink); line-height: 1.6; max-width: 34ch; }
.dkhero .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(18px, 2vw, 30px); }
.dkhero .cta .btn { min-height: clamp(44px, 3.4vw, 52px); padding-inline: clamp(18px, 2vw, 32px); }
@media (max-width: 999px) {
  .dkhero { display: block; min-height: 0; max-height: none; background: linear-gradient(180deg, #F0DAC0 0%, #F8ECDD 22%, #FFFBF3 100%); }
  .dkhero-media { position: relative; display: block; width: 100%; height: clamp(250px, 62vw, 420px); aspect-ratio: auto; z-index: 0; -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%); mask-image: linear-gradient(0deg, transparent 0, #000 22%); }
  .dkhero-media img { object-position: 45% 40%; }
  .dkhero-copy { padding-block: 6px 34px; margin-top: -26px; text-align: center; }
  .dkhero-inner { max-width: 560px; margin-inline: auto; }
  .dkhero h1 { justify-content: center; font-size: clamp(2rem, 8.6vw, 3.4rem); }
  .dkhero .eyebrow { font-size: .62rem; letter-spacing: .24em; }
  .dkhero .tagline { font-size: clamp(.74rem, 2.9vw, 1rem); letter-spacing: .2em; }
  .dkhero .copy { margin-inline: auto; max-width: 36ch; font-size: .96rem; }
  .dkhero .cta { justify-content: center; }
}
@media (max-width: 420px) { .dkhero .cta .btn { width: 100%; } }

/* ---------- HOME LAYOUT ---------- */
.dkwrap { max-width: 1680px; margin-inline: auto; padding-inline: var(--pad); }
.dkhome { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(20px, 2.4vw, 40px); align-items: start; padding-block: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 44px); }
.dkmain { min-width: 0; }
.dkside { position: sticky; top: calc(var(--header-h) + 18px); display: grid; gap: 18px; }
@media (max-width: 1099px) { .dkhome { grid-template-columns: minmax(0, 1fr); } .dkside { position: static; } }

.dk-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.65rem); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); line-height: 1.15; }
.dk-sub { font-size: .96rem; color: var(--ink-2); margin-top: 6px; }
.dk-divider { display: flex; align-items: center; gap: 18px; justify-content: center; margin: clamp(22px, 2.6vw, 34px) 0 clamp(14px, 1.6vw, 22px); font-family: var(--display); font-weight: 600; font-size: .86rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); }
.dk-divider::before, .dk-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--g3)); }
.dk-divider::after { transform: scaleX(-1); }

/* feelings */
.say-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: clamp(6px, .7vw, 10px); margin-top: 16px; }
.say-tile { display: grid; justify-items: center; align-content: center; gap: 9px; padding: 14px 4px 12px; min-height: 96px; text-align: center; text-decoration: none; color: var(--ink); background: linear-gradient(180deg, #FCEFE9 0%, #F8E4DE 100%); border: 1px solid rgba(201, 162, 75, .35); border-radius: 6px; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, background-color .3s; }
.say-tile svg { width: 30px; height: 30px; color: var(--burgundy); stroke-width: 1.35; }
.say-tile:nth-child(3n+2) svg { color: var(--g4); }
.say-tile span { font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: 1.3; color: var(--ink); }
.say-tile:hover, .say-tile:focus-visible { transform: translateY(-4px); border-color: var(--g3); box-shadow: var(--shadow-gold); background: linear-gradient(180deg, #FFF6EA, #F8E4DE); }
@media (max-width: 1279px) {
  .say-grid { display: flex; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 2px 14px; margin-inline: calc(var(--wrap-pad) * -1); padding-inline: var(--wrap-pad); scrollbar-width: none; }
  .say-grid::-webkit-scrollbar { display: none; }
  .say-tile { flex: 0 0 96px; scroll-snap-align: start; }
}

/* category scroller */
.pick-wrap { position: relative; }
.pick-row { display: flex; gap: clamp(8px, 1vw, 16px); overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 4px 14px; scrollbar-width: none; scroll-behavior: smooth; }
.pick-row::-webkit-scrollbar { display: none; }
.pick-item { flex: 0 0 auto; width: clamp(86px, 8.4vw, 112px); display: grid; justify-items: center; gap: 10px; text-align: center; text-decoration: none; color: var(--ink); font-size: .74rem; font-weight: 600; letter-spacing: .02em; line-height: 1.25; scroll-snap-align: start; }
.pick-icon { width: clamp(58px, 5.2vw, 68px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #FFF8EA, #F6E3B9); border: 1px solid rgba(201, 162, 75, .6); box-shadow: inset 0 1px 0 #fff, 0 6px 14px -9px rgba(122, 86, 24, .6); color: var(--g5); transition: transform .5s var(--ease), box-shadow .5s, background .4s, color .3s; }
.pick-icon svg { width: 28px; height: 28px; stroke-width: 1.3; }
.pick-item small { display: block; font-weight: 500; color: var(--ink-3); font-size: .66rem; }
.pick-item:hover .pick-icon, .pick-item:focus-visible .pick-icon { transform: translateY(-4px) scale(1.05); background: var(--burgundy-grad); color: #F8EBC0; box-shadow: var(--shadow-m); }
.pick-arrow { position: absolute; top: 28px; z-index: 2; width: 38px; height: 38px; display: none; place-items: center; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--burgundy); box-shadow: var(--shadow-s); }
.pick-arrow.l { left: -14px; } .pick-arrow.r { right: -14px; }
.pick-wrap.can-scroll .pick-arrow { display: grid; }
.pick-arrow[disabled] { opacity: 0; pointer-events: none; }

/* gift your way */
.gyw { background: linear-gradient(180deg, #FFFDF8, #FCF3E4); border: 1px solid var(--g3); border-radius: 8px; padding: clamp(18px, 1.8vw, 26px); box-shadow: var(--shadow-s), inset 0 0 0 4px #FFFDF8, inset 0 0 0 5px rgba(201, 162, 75, .35); }
.gyw h2 { font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: .14em; text-transform: uppercase; }
.gyw > p { font-size: .88rem; color: var(--ink-2); margin: 4px 0 14px; }
.gyw-step { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(201, 162, 75, .28); }
.gyw-step svg { width: 28px; height: 28px; color: var(--g4); stroke-width: 1.3; justify-self: center; }
.gyw-step label { display: block; font-size: .78rem; font-weight: 700; margin-bottom: 4px; color: var(--ink); }
.gyw-step label b { color: var(--g4); font-family: var(--display); margin-right: 4px; }
.gyw select { width: 100%; min-height: 40px; padding: 0 32px 0 12px; border: 1px solid rgba(201, 162, 75, .55); border-radius: 4px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237A1230' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center; -webkit-appearance: none; appearance: none; font-size: .84rem; color: var(--ink); }
.gyw select:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 1px; }
.gyw .btn { width: 100%; margin-top: 12px; }
.gyw-note { font-size: .74rem; color: var(--ink-3); text-align: center; margin-top: 10px; }
.shipnote { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 8px; background: var(--burgundy-grad); color: #F8EBC0; box-shadow: var(--shadow-m); }
.shipnote svg { width: 36px; height: 36px; stroke-width: 1.2; color: #E6C772; }
.shipnote b { display: block; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: #fff; }
.shipnote span { font-size: .82rem; opacity: .9; }
@media (min-width: 700px) and (max-width: 1099px) { .gyw form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; } .gyw form .gyw-step:last-of-type, .gyw form .btn, .gyw form .gyw-note { grid-column: 1 / -1; } }

/* ---------- product shelves ---------- */
.shelf { padding-block: clamp(30px, 4vw, 60px) 0; }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(18px, 2vw, 28px); flex-wrap: wrap; }
.shelf-head .eyebrow-gold { display: block; margin-bottom: 6px; }
.shelf-head h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 2rem); letter-spacing: .1em; text-transform: uppercase; }
.shelf-head h2::after { content: ''; display: block; width: 64px; height: 2px; margin-top: 12px; background: var(--gold-grad); }
.shelf-link { font-family: var(--display); font-weight: 600; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--burgundy); display: inline-flex; gap: 8px; align-items: center; padding-bottom: 3px; border-bottom: 1px solid var(--g3); }
.shelf-link:hover { color: var(--burgundy-l); gap: 12px; }
.dk-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px) clamp(10px, 1.4vw, 20px); }
@media (min-width: 700px) { .dk-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dk-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dkhome .dk-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .dkhome .dk-pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .dkhome .dk-pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shelf-band { background: linear-gradient(180deg, var(--blush), #F8ECDB); border-block: 1px solid var(--line); margin-top: clamp(34px, 4vw, 64px); padding-bottom: clamp(34px, 4.4vw, 70px); }

/* occasions */
.occ-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px) { .occ-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.occ-tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; text-decoration: none; border: 1px solid var(--line); }
.occ-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.occ-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(58, 7, 21, .78) 0%, rgba(58, 7, 21, .05) 58%); }
.occ-tile span { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 14px 16px; color: #fff; font-family: var(--display); font-weight: 600; font-size: clamp(.82rem, 1.15vw, 1rem); letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.occ-tile:hover img { transform: scale(1.07); }

/* ---------- trio: brand · network · real gifts ---------- */
.trio { display: grid; gap: clamp(16px, 1.8vw, 26px); grid-template-columns: 1fr; padding-block: clamp(40px, 5vw, 80px) 0; }
@media (min-width: 1000px) { .trio { grid-template-columns: 1.05fr .9fr 1.15fr; } }
.tcard { position: relative; border: 1px solid var(--g3); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: var(--shadow-s); }
.tcard h2, .tcard h3 { font-family: var(--display); }
.brand-card { display: grid; grid-template-columns: 42% 1fr; background: linear-gradient(180deg, #fff, #FCF4E6); }
.brand-card .bimg { position: relative; background: var(--wine); min-height: 280px; }
.brand-card .bimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-card .btxt { padding: clamp(18px, 2vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.brand-card h2 { font-size: 1.12rem; font-weight: 500; letter-spacing: .02em; line-height: 1.3; }
.brand-card h2 em { display: block; font-style: normal; font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 2.3vw, 2.2rem); letter-spacing: 0; line-height: 1.05; margin-top: 6px; background: var(--gold-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-card p { font-size: .9rem; color: var(--ink-2); line-height: 1.6; }
.bfeat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; padding-top: 14px; }
.bfeat div { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: .66rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.bfeat i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #FFF8EA, #F6E3B9); border: 1px solid rgba(201, 162, 75, .6); color: var(--g5); }
.bfeat svg { width: 19px; height: 19px; stroke-width: 1.4; }
@media (max-width: 560px) { .brand-card { grid-template-columns: 1fr; } .brand-card .bimg { min-height: 240px; } }
.net-card { background: var(--burgundy-grad); color: #F8EBC0; border-color: var(--g4); }
.net-card::before { content: ''; position: absolute; right: -90px; top: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(230, 199, 114, .22), transparent 65%); }
.net-globe { position: absolute; right: -54px; top: 22px; width: 250px; height: 250px; color: rgba(230, 199, 114, .38); stroke-width: .7; pointer-events: none; }
.net-card .ntxt { position: relative; padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; gap: 12px; height: 100%; }
.net-card h2 { color: #fff; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; }
.net-card h2 + p { font-weight: 600; color: #fff; }
.net-card p { font-size: .9rem; opacity: .92; max-width: 30ch; line-height: 1.55; }
.net-card .btn { align-self: flex-start; margin-top: 4px; }
.net-icons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(230, 199, 114, .3); }
.net-icons div { display: grid; justify-items: center; gap: 6px; font-size: .68rem; letter-spacing: .06em; }
.net-icons svg { width: 24px; height: 24px; color: #E6C772; stroke-width: 1.3; }
.real-card { background: linear-gradient(180deg, #fff, #FCF4E6); padding: clamp(18px, 2vw, 26px); gap: 14px; }
.real-card h2 { font-size: .95rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.real-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.real-item { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; text-decoration: none; border: 1px solid var(--line); background: var(--blush); }
.real-item img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; transition: transform 1s var(--ease); }
.real-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(58, 7, 21, .78), transparent 52%); }
.real-item span { position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 8px; color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.real-item:hover img { transform: scale(1.08); }
@media (max-width: 560px) { .real-grid { grid-template-columns: repeat(2, 1fr); } }
.real-social { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(201, 162, 75, .35); font-size: .76rem; color: var(--ink-2); }
.real-social a { text-decoration: none; font-weight: 700; color: var(--burgundy); letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; }
.real-social a:hover { background: var(--burgundy); color: #fff; }
.real-social div { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- closing banner ---------- */
.dkbanner { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(44px, 5.4vw, 90px); background: linear-gradient(180deg, #FFF7E6 0%, #F7DFA8 42%, #E2B867 100%); text-align: center; padding: clamp(40px, 5vw, 70px) var(--pad) clamp(120px, 12vw, 190px); border-block: 1px solid var(--g3); }
.dkbanner .sun { position: absolute; left: 50%; bottom: 8%; width: min(80vw, 760px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 235, .95) 0%, rgba(255, 238, 190, .55) 38%, transparent 68%); z-index: -2; }
.dkbanner svg.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 14vw, 210px); z-index: -1; }
.dkbanner .bn-inner { display: grid; justify-items: center; gap: clamp(8px, 1vw, 14px); max-width: 880px; margin-inline: auto; }
.dkbanner img { width: clamp(84px, 8vw, 118px); filter: drop-shadow(0 8px 12px rgba(122, 86, 24, .4)); }
.dkbanner h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.9rem); letter-spacing: .12em; text-transform: uppercase; color: var(--burgundy-d); }
.dkbanner p { color: var(--ink); font-size: clamp(.92rem, 1.2vw, 1.12rem); }
.dkbanner .script { font-family: var(--script); font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.1; color: var(--burgundy); margin-top: 6px; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.dkbanner .btn { margin-top: 8px; }

/* ---------- FOOTER ---------- */
.site-footer.dkf { background: radial-gradient(1200px 400px at 85% -10%, rgba(201, 162, 75, .16), transparent 60%), linear-gradient(180deg, #4A0A1C 0%, #2E0612 100%); color: #EBD9C4; border-top: 0; padding-top: 0; position: relative; margin-top: 0; }
.site-footer.dkf::before { content: ''; display: block; height: 4px; background: var(--gold-grad); }
.dkf-top { padding-block: clamp(40px, 5vw, 76px); display: grid; gap: clamp(28px, 3vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .dkf-top { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; } }
.dkf .dkf-brand { display: grid; gap: 16px; justify-items: start; max-width: 340px; }
.dkf .dkf-brand img { width: 118px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.dkf .foot-lead { font-family: var(--serif); font-style: italic; font-size: 1.5rem; color: #F8EBC0; margin: 0; max-width: 22ch; line-height: 1.2; }
.dkf .foot-h { font-family: var(--display); font-size: .78rem; letter-spacing: .22em; color: #E6C772; margin-bottom: 18px; }
.dkf .foot-list a { color: #EBD9C4; }
.dkf .foot-list a:hover { color: #fff; text-decoration: none; padding-left: 4px; }
.dkf .foot-list { gap: 10px; transition: none; }
.dkf .foot-list .muted { color: rgba(235, 217, 196, .7); }
.dkf .news-mini input { background: rgba(255, 255, 255, .07); border: 1px solid rgba(230, 199, 114, .45); color: #fff; border-radius: 3px; padding: 0 14px; min-height: 46px; }
.dkf .news-mini input::placeholder { color: rgba(235, 217, 196, .65); }
.dkf .form-msg { color: #F8EBC0; }
.dkf .form-msg.is-err { color: #FFB9C6; }
.dkf-ship { border-top: 1px solid rgba(230, 199, 114, .25); padding-block: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: .78rem; letter-spacing: .04em; color: rgba(235, 217, 196, .85); }
.dkf-ship b { font-family: var(--display); letter-spacing: .16em; text-transform: uppercase; color: #E6C772; font-size: .72rem; display: inline-flex; align-items: center; gap: 8px; }
.dkf-ship svg { width: 18px; height: 18px; stroke-width: 1.4; }
.dkf-ship ul { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.dkf-ship li + li::before { content: '·'; margin-right: 14px; color: #E6C772; }
.dkf .foot-base { border-top: 1px solid rgba(230, 199, 114, .25); margin-top: 0; color: rgba(235, 217, 196, .75); }
.dkf .foot-base a { color: #F8EBC0; }
.dkf .foot-social a { color: #F8EBC0; }

/* ---------- global polish: forms, drawer, pages ---------- */
.drawer-sum b, .pdp-price .price-now { color: var(--burgundy); }
.filter-chip.is-on, .chip.is-on { background: var(--burgundy); border-color: var(--burgundy); }
a.link, .link-btn { color: var(--burgundy); }
.crumbs li + li::before { color: var(--g3); }
.pdp h1 { font-family: var(--serif); }
.co-top, .co-wrap .co-top { border-bottom: 1px solid var(--line); }

/* hero entrance (progressive: content is never hidden without JS or with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  html.dk-js:not(.dk-ready) .dkhero [data-h] { opacity: 0; }
  html.dk-js:not(.dk-ready) .dkhero-media { opacity: 0; }
}


/* ---------- refinements (round 2) ---------- */
.dkwrap { padding-inline: var(--wrap-pad); }
@media (min-width: 1000px) {
  .dkhero-inner { max-width: min(35vw, 560px); }
  .dkhero .tagline { font-size: clamp(.74rem, 1vw, 1.14rem); letter-spacing: .2em; }
  .dkhero .copy { max-width: 32ch; }
}
.dkhero h1 { gap: .06em; }
.dkhero h1 svg { width: .86em; height: 1.5em; margin: -.62em 0 0 .02em; transform: rotate(16deg); transform-origin: 50% 85%; filter: drop-shadow(0 2px 2px rgba(122, 86, 24, .4)); }
.say-tile span { letter-spacing: .05em; hyphens: auto; overflow-wrap: break-word; max-width: 100%; }
.pick-row { justify-content: safe center; }
.pcard-body { display: flex; flex-direction: column; gap: 4px; }
.pcard-price { margin-bottom: 8px; }
.btn-add { margin-top: auto; }
.brand-card h2 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.net-globe { opacity: .55; right: -70px; top: auto; bottom: 70px; width: 230px; height: 230px; }
.net-card h2 { font-size: 1rem; }
.real-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.real-item { aspect-ratio: 4 / 3; }
.real-item span { font-size: .72rem; left: 12px; bottom: 10px; }
@media (max-width: 560px) { .real-grid { grid-template-columns: repeat(2, 1fr); } }

.say-tile span { font-size: .57rem; }
@media (max-width: 999px) { .pick-arrow { display: none !important; } .dkhero h1 svg { width: .7em; height: 1.2em; margin-top: -.4em; } }

.dkh .nav-link { white-space: nowrap; }
.dkh .main-nav > ul { gap: clamp(10px, 1.45vw, 30px); }
@media (min-width: 1280px) and (max-width: 1499px) {
  .dkh .nav-link { font-size: .66rem; letter-spacing: .09em; }
  .dkh .logo-sub { display: none; }
  .dkh .logo-name { font-size: 1.02rem; }
  .dkh .header-inner { gap: 20px; }
}