/* Gift Tag style (locked 2026-10-18, office desk 2026-10-18-amz-gift-page-styles, design profile round 4).
   Each product is a gift tag tied to the present. Palette = "Evergreen" (Gil's pick, color round 2,
   replacing the kraft/cranberry of round 1): white page, pine title, gold string.
   Button = GOLDEN #d9a62e, squared 10px (Gil's pick 2026-10-19). BORDERLINE, compliance D13:
   never Amazon's #FFD814/#FFA41C and never their pill shape; reverting is the --btn token.
   One seasonal look: the colors are explicit, no dark variant by choice. */
:root{--bg:#ffffff;--tag:#f3f8f4;--ink:#10241a;--muted:#4f6157;--pine:#0f6b3d;--btn:#d9a62e;--btn-ink:#10241a;--string:#d9a62e;--dash:#cfe0d4;--ph:#e4efe7;
  /* role tokens */--bar:#0f3d27;--bar-ink:#fff;--kick:#0f6b3d;--head:#0f3d27;--head-muted:#4f6157;--to:#0f6b3d;--shadow:0 2px 0 rgba(0,0,0,.06);--tag-lift:none;--btn-radius:10px;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:inherit}
.disclosure{background:var(--bar);color:var(--bar-ink);font-size:12.5px;text-align:center;padding:7px max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:560px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
.kicker{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--kick);margin:0}
h1{font-size:32px;line-height:1.1;margin:6px 0 8px;text-wrap:balance;color:var(--head)}
.intro{margin:0;color:var(--head-muted);text-wrap:balance}
.byline{font-size:13px;color:var(--head-muted);margin:8px 0 0}
.disc-line{font-size:12px;color:var(--head-muted);margin:6px 0 0}
.tagw{position:relative;margin-top:30px;padding-top:18px;filter:var(--tag-lift)}
.string{position:absolute;left:50%;top:-10px;width:2px;height:40px;background:var(--string);transform:translateX(-50%)}
.tag{position:relative;background:var(--tag);border-radius:16px;padding:48px 18px 18px;box-shadow:var(--shadow);clip-path:polygon(44px 0,calc(100% - 44px) 0,100% 44px,100% 100%,0 100%,0 44px)}
.hole{position:absolute;left:50%;top:12px;width:14px;height:14px;border-radius:50%;background:var(--bg);transform:translateX(-50%);box-shadow:inset 0 0 0 2px var(--string)}
.to{display:flex;justify-content:space-between;gap:8px;font-size:13px;border-bottom:1.5px dashed var(--dash);padding-bottom:8px;margin-bottom:12px}
.to b{color:var(--to)}
.photo img,.ph{width:100%;aspect-ratio:1/1;border-radius:12px;object-fit:cover;display:block}
.ph{background:var(--ph);display:grid;place-items:center;color:var(--muted);font-size:13px;text-align:center;padding:16px}
.tag h2{font-size:22px;margin:14px 0 2px;line-height:1.2}
.to + h2{margin-top:4px}
.name{font-size:14px;color:var(--muted);margin:0 0 8px}
.body{margin:0 0 8px;font-size:15.5px}
.note{font-size:13px;color:var(--muted);margin:0 0 14px}
.btn{display:block;text-align:center;background:var(--btn);color:var(--btn-ink);font-weight:700;font-size:16px;padding:14px;border-radius:var(--btn-radius);text-decoration:none}
.btn:focus-visible{outline:3px solid var(--pine);outline-offset:3px}
.where{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0;white-space:nowrap;font-size:12.5px;color:var(--muted);margin-top:8px}
.where span+span::before{content:"·";margin:0 7px}
.paid{margin:2px 0 0;text-align:center;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.foot{text-align:center;font-size:12px;color:var(--head-muted);padding:24px 16px 96px}
.foot p{margin:4px 0}.tm{font-size:11px}
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;background:var(--tag);border:1px solid var(--dash);border-radius:12px;padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.18);font-size:14px}
.consent[hidden]{display:none}.consent p{margin:0 0 10px}
.consent button{font:inherit;font-weight:600;border:0;border-radius:999px;padding:8px 16px;background:var(--pine);color:#fff;margin-right:8px;cursor:pointer}
.consent button.ghost{background:transparent;color:var(--ink);border:1px solid var(--dash)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Responsive layout (2026-10-19, Gil: "dont looks good, we need to adjust it for mobile and for desktop").
   Phone: one column, tighter. Tablet: 2 tags per row. Desktop: 3 per row, bigger header.
   Tags in a row share one height; the button sits at the bottom of every tag so buttons line up. */
main.wrap{display:grid;grid-template-columns:1fr;column-gap:24px;align-items:stretch}
main.wrap>header{grid-column:1/-1}
.tagw{display:flex;flex-direction:column}
.tag{flex:1;display:flex;flex-direction:column}
.tag .btn{margin-top:auto}
.tag .note{margin-bottom:16px}
@media (max-width:599px){
  body{font-size:15.5px}
  h1{font-size:29px}
  .wrap{padding-top:18px}
  .tagw{margin-top:22px}
  .tag{padding:44px 16px 16px}
  .tag h2{font-size:21px}
}
@media (min-width:700px){
  .wrap{max-width:780px}
  main.wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:42px}
  .intro{font-size:18px}
  main.wrap>header{padding:16px 0 4px}
}
@media (min-width:1080px){
  .wrap{max-width:1160px}
  main.wrap{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
  main.wrap>header{padding:36px 0 8px;max-width:820px}
  .kicker{font-size:13px}
  h1{font-size:54px;letter-spacing:-.01em}
  .intro{font-size:20px}
  .byline,.disc-line{font-size:13.5px}
  .tagw{margin-top:40px}
  .consent{max-width:640px}
}


/* ---- Palette "Winter Cabin" (round 5, Gil's pick 2026-10-19: "NUMBER 5 looks the best").
   Deep pine page, warm white tags, gold string + golden button, cranberry "To:", and a full-bleed
   photo hero (snowy cabin at night, Unsplash; public/img/cabin-*.jpg). The hero image is set per theme
   via the header's --hero / --hero-sm custom properties (render.js), so another theme can bring
   its own photo. */
:root{--bg:#0e2219;--tag:#fff8ec;--ink:#1f2a22;--muted:#5b5a50;--dash:#e6d7bd;--string:#e9b949;--btn:#d9a62e;--btn-ink:#10241a;--to:#9a2a2a;--head:#ffffff;--head-muted:rgba(255,255,255,.88);--kick:#f2cf73}
main.wrap{padding-top:0}
main.wrap>header.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);max-width:none;
  padding:72px max(16px,calc(50vw - 580px)) 56px;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(180deg,rgba(8,20,14,.05),rgba(8,20,14,.85)),var(--hero-sm,var(--hero)) center 70%/cover;background-color:#0e2219}
@media (min-width:800px){main.wrap>header.hero{background-image:linear-gradient(180deg,rgba(8,20,14,.05),rgba(8,20,14,.85)),var(--hero)}}
@media (max-width:599px){main.wrap>header.hero{min-height:400px;padding:48px 16px 24px;background:linear-gradient(180deg,rgba(8,20,14,0) 20%,rgba(8,20,14,.55) 48%,rgba(8,20,14,.95) 72%),var(--hero-sm,var(--hero)) center 18%/cover;background-color:#0e2219}}
main.wrap>header.hero h1{text-shadow:0 2px 18px rgba(0,0,0,.3)}
.foot{color:#cfe0d4}.foot a{color:#fff}