/* The whole shop in the "Natural" look of the home page: light paper panels instead of the black wall,
   warm dark type, deep gold for headings, prices and lines, dark-mocha buttons. Loaded last on every subpage.
   Palette (from hero.css): cream #fef4ea, sand #ecdfcf, mocha #a38772, sage #b0b098, terracotta #d0a189, ink #4a3a2f. */

:root {
  --nat-paper: linear-gradient(165deg, #f6f1ea 0%, #ece9e2 50%, #e2d9cc 100%);
  --nat-gold: #6e5114;          /* deep gold for small text: 5:1 or better on the paper */
  --nat-gold-dark: #5a3f0b;
  --nat-line: 1px solid rgb(184 145 63 / .42);
  --nat-shadow: 0 22px 46px -30px rgb(80 60 40 / .45);
  --nat-well: rgb(255 255 255 / .55);   /* boxes and inputs inside a panel */
}

/* ---------------------------------------------------------------- panels */
.wall, .sub .wall, .banner, .listing, .product, .drawer__panel, .post__head, .sect {
  border: var(--nat-line);
  box-shadow: var(--nat-shadow);
  color: var(--nat-ink);
  background: var(--nat-paper);
}
.sect--text, .sect--faq { background: #fffdf9; }

/* Gold headings on the panels: the deep ramp. */
.banner h1, .post__head h1, .split__title, .stat b, .note h1, .done h1, .sect__title, .cat__all-k, .gold-text {
  background: var(--gold-deep);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.acct__head h1 { color: var(--nat-gold-dark); background: none; }

/* Light copy that sat on black, now warm dark. */
.banner__lead, .shopbar__count, .shopbar__sort, .pcard__name, .pgrid__empty, .product__info h1, .price small,
.product__short, .ship ul, .cline__name, .cline__opts, .cart__empty, .cart__hint, .cart__ship, .handover,
.post__meta, .bcard__title, .bcard__text, .stat > span, .duo__body h2, .duo__body p:not(.eyebrow),
.wall .split__copy p:not(.eyebrow), .company dd, .reach__v, .reach__hint, .note h2, .note p, .done p, .note__hint,
.acct__side h2, .acct__side p, .sumlines li, .check, .box__title, .box__hint, .orders__item a, .locker__picked,
.option, .perks-mini { color: var(--nat-ink); }
.cline__remove, .orders__date, .orders__items, .post__meta, .note__hint, .box__hint, .cart__hint, .reach__hint { color: #5c4a3d; }
.cline__remove:hover { color: #9a3b26; }
.reach__hint.is-open { color: #4f6b3a; }

/* Light gold that sat on black, now deep gold. */
.eyebrow, .banner .eyebrow, .listing__title, .shopbar__group legend, .shopbar__count b, .pcard__price, .price,
.pick legend, .qty button, .out, .out a, .buy__note, .perks-mini a, .perks-mini li::before, .ship summary, .ship b, .ship a,
.cline__opts b, .cline__price, .cart__row b, .drawer__head p, .drawer__head button, .cart__ship b, .cart__back,
.handover a, .bcard__meta, .duo__link, .company dt, .company a, .reach__k, .reach__card svg, .field span,
.note a:not(.btn), .done a:not(.btn), .box a, .check a, .option__price, .box__title span, .sumlines b,
.orders__no, .orders__total, .coupon__note, .step__no, .links__item span { color: var(--nat-gold); }
.eyebrow--ink { color: var(--nat-gold) !important; }

/* Inner boxes and fields: a lighter well inside the paper. */
.cart__sum, .company, .handover, .option, .locker, .toc {
  border: var(--nat-line);
  background: var(--nat-well);
}
.field input, .field textarea, .field select, .shopbar__sort select, .qty input {
  border: 1px solid rgb(110 81 20 / .3);
  color: var(--nat-ink);
  background: rgb(255 255 255 / .7);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--nat-gold); background: #fff; }
.qty { border-color: rgb(110 81 20 / .3); background: rgb(255 255 255 / .7); }
.option:hover { border-color: rgb(110 81 20 / .5); }
.option:has(input:checked) { border-color: var(--nat-gold); background: #fff8ef; }
.check input, .option input { accent-color: #6e5114; }
.company div { border-bottom-color: rgb(110 81 20 / .15); }
.sumlines li { border-bottom-color: rgb(110 81 20 / .15); }
.cart__row--total { border-top-color: rgb(110 81 20 / .25); }
.perks-mini { border-top-color: rgb(110 81 20 / .2); }

/* ---------------------------------------------------------------- chips (filters, sizes, colours) */
.chip span, .chip--link {
  border: 1px solid rgb(110 81 20 / .32);
  color: var(--nat-ink);
  background: rgb(255 255 255 / .5);
}
.chip span:hover, .chip--link:hover { border-color: var(--nat-gold); }
.chip input:checked + span, .chip--link.is-on { border-color: #3a2e25; color: #fef4ea; background: #3a2e25; }
.chip.is-gone span { opacity: .35; }

/* ---------------------------------------------------------------- buttons */
/* Primary: dark mocha with cream type; it warms to deep gold on hover. Secondary: a gold hairline. */
.btn { border-radius: 999px; letter-spacing: .14em; transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease); }
.btn--gold { color: #fef4ea; background: #3a2e25; border: 1px solid #3a2e25; }
.btn--gold:hover, .btn--gold:focus-visible { color: #fef4ea; background: #6e5114; border-color: #6e5114; filter: none; transform: translateY(-1px); }
.btn--line, .btn--ghost { color: var(--nat-gold-dark); border: 1px solid rgb(110 81 20 / .55); background: transparent; }
.btn--line:hover, .btn--ghost:hover, .btn--line:focus-visible, .btn--ghost:focus-visible { color: #fef4ea; background: #3a2e25; border-color: #3a2e25; }
.handover .btn { color: #fef4ea; }

/* ---------------------------------------------------------------- product cards and pictures */
.pcard__img, .bcard__img, .gallery__stage, .post__cover, .cline__img { border: 1px solid rgb(184 145 63 / .3); background: #e9e2d8; box-shadow: 0 18px 36px -26px rgb(60 45 30 / .45); }
.pcard__tag { color: var(--nat-gold-dark); background: #fef4ea; border: 1px solid rgb(184 145 63 / .5); }
.pcard__tag--out { color: #fef4ea; background: rgb(58 46 37 / .85); border: 0; }
.gallery__thumb { border-color: rgb(184 145 63 / .3); }
.gallery__thumb.is-on, .gallery__thumb:hover { border-color: var(--nat-gold); }
.shot { background: #e3d9cc; }

/* ---------------------------------------------------------------- messages */
.alert { border-color: rgb(166 64 44 / .4); color: #7a2a1a; background: #fbece7; }
.notice { border: var(--nat-line); color: var(--nat-ink); background: #fff8ef; }
.pick.is-missing legend { color: #a0402a; }
.pick.is-missing .chip span { border-color: #a0402a; }

/* ---------------------------------------------------------------- account */
.acct__nav a, .acct__nav button { border-color: rgb(74 58 47 / .3); color: var(--nat-ink); }
.acct__nav a.is-on { border-color: #3a2e25; color: #fef4ea; background: #3a2e25; }
.orders__status { border-color: rgb(110 81 20 / .4); color: var(--nat-ink); }
.orders__status--completed, .orders__status--shipped { border-color: #6f8a5a; color: #3f5a2e; }
.orders__status--cancelled, .orders__status--failed { border-color: #b35a48; color: #7a2a1a; }

/* ---------------------------------------------------------------- about and contact pages */
.duo__card .shot, .split .shot { border-color: rgb(184 145 63 / .3); }
.reach__card::before { background: radial-gradient(260px 260px at var(--gx) var(--gy), rgb(208 161 137 / .22), transparent 70%); }
.seal { color: #fef4ea; background: #3a2e25; }
.links__item { color: var(--nat-ink); }
.links__item:hover { color: var(--nat-gold); }
.step::before { background: var(--gold-deep); }

/* The map in light tones too: greyscale warmed with a little sepia, no inversion. */
.meet__map iframe { filter: grayscale(1) sepia(.28) contrast(.95) brightness(1.04); }