.category-section{
  max-width:1200px;margin:0 auto 30px;
}
.category-label{
  margin-bottom:11px;
  font-size:9px;
  font-weight:900;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#6b3715;
}
.category-filter{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.category-chip{
  border:1px solid #76501f;
  background:#f3d58b;
  color:#25170c;
  padding:10px 14px;
  cursor:pointer;
  font:800 9px "Montserrat";
  text-transform:uppercase;
  letter-spacing:.8px;
  box-shadow:2px 2px 0 rgba(77,37,7,.15);
  transition:.15s;
}
.category-chip:hover{
  transform:translateY(-1px);
}
.category-chip.active{
  background:#17110a;
  color:#efca73;
  border-color:#17110a;
  box-shadow:3px 3px 0 #97501a;
}
.shop-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 10px;
}
.shop-card-tag{
  display:inline-block;
  padding:4px 6px;
  background:rgba(66,34,8,.1);
  border:1px solid rgba(66,34,8,.24);
  color:#6e3d17;
  font-size:7px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
}


.shop-hero{
  min-height:430px;position:relative;overflow:hidden;display:grid;place-items:center;
  background:
    radial-gradient(circle at 15% 30%,rgba(255,244,196,.65),transparent 35%),
    linear-gradient(120deg,#efcf80,#dda344 62%,#bd7224);
  border-bottom:5px solid var(--ink);
}
.shop-hero::before{content:"";position:absolute;inset:15px;border:1px solid rgba(74,39,8,.35)}
.shop-hero-inner{position:relative;z-index:2;text-align:center;max-width:900px;padding:65px 20px}
.shop-hero h1{
  margin:0;font:900 clamp(62px,8vw,116px)/.82 "Cinzel Decorative",serif;
  text-transform:uppercase;letter-spacing:-2px
}
.shop-hero h1 em{
  display:inline-block;font:400 italic clamp(70px,8vw,110px)/.8 "IM Fell English",serif;
  text-transform:none;letter-spacing:2px;color:#6f2b10
}
.shop-hero p:last-child{
  max-width:670px;margin:28px auto 0;font:400 19px/1.6 "IM Fell English",serif;color:#503316
}
.shop-map span{position:absolute;color:rgba(91,45,8,.34);font-size:38px}
.shop-map span:nth-child(1){left:8%;top:22%}
.shop-map span:nth-child(2){right:10%;top:18%;font-size:58px}
.shop-map span:nth-child(3){left:16%;bottom:16%;font-size:52px}
.shop-map span:nth-child(4){right:14%;bottom:18%;font-size:47px}

.shop-section{padding:75px clamp(18px,5vw,72px) 100px}
.shop-toolbar{
  display:grid;grid-template-columns:1fr 240px;gap:20px;align-items:end;
  max-width:1200px;margin:0 auto 24px
}
.search-wrap,.sort-wrap{display:flex;flex-direction:column;gap:8px}
.search-wrap label,.sort-wrap label{
  font-size:9px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:#6b3715
}
.search-wrap input,.sort-wrap select{
  width:100%;height:50px;border:1px solid #77501f;background:#f7e4ab;padding:0 15px;
  font:600 14px "Montserrat";color:#21140b;box-shadow:3px 3px 0 rgba(77,37,7,.18)
}
.shop-count-row{
  max-width:1200px;margin:0 auto 24px;display:flex;justify-content:space-between;gap:20px;
  border-top:1px solid rgba(79,42,11,.3);padding-top:18px;color:#684620
}
.shop-count-row p,.shop-count-row span{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:1px}

.shop-grid{
  max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.shop-card{
  appearance:none;border:1px solid #72501f;background:#e1ae55;padding:9px;text-align:left;cursor:pointer;
  box-shadow:6px 6px 0 rgba(84,41,8,.24);transition:.18s
}
.shop-card:hover{transform:translateY(-4px)}
.shop-card-art{
  aspect-ratio:1/1.08;display:grid;place-items:center;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#f1d486,#cf8c31);
  border:1px solid rgba(60,31,7,.4)
}
.shop-card-art::after{content:"";position:absolute;inset:9px;border:1px dashed rgba(64,35,9,.24)}
.shop-card-art img{position:relative;z-index:2;width:58%;height:58%;object-fit:contain;filter:drop-shadow(0 6px 4px rgba(60,26,4,.18))}
.shop-card-body{padding:15px 7px 7px}
.shop-card-body h3{font:900 17px/1.08 "Cinzel Decorative";text-transform:uppercase;margin:0}
.shop-card-body p{font:400 14px/1.35 "IM Fell English";color:#603f1d;margin:8px 0 12px;min-height:38px}
.shop-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px}
.shop-card-price{font-size:15px;font-weight:900}
.shop-card-cta{font-size:8px;font-weight:900;letter-spacing:1px;text-transform:uppercase}
.empty-state{text-align:center;padding:80px 20px;color:#6a421d}
.empty-state div{font-size:50px}.empty-state h2{font:900 34px "Cinzel Decorative";text-transform:uppercase}

.product-modal{
  width:min(1080px,94vw);max-width:none;padding:0;border:2px solid #6d4418;background:#e9c979;
  box-shadow:14px 14px 0 rgba(22,12,5,.48);overflow:visible
}
.product-modal::backdrop{background:rgba(10,7,4,.76);backdrop-filter:blur(4px)}
.modal-close{
  position:absolute;right:-14px;top:-14px;width:42px;height:42px;border-radius:50%;z-index:10;
  background:#17110a;color:#efc86e;border:1px solid #aa7628;font-size:25px;cursor:pointer
}
.modal-grid{display:grid;grid-template-columns:.95fr 1.05fr;min-height:660px}
.modal-preview{
  display:flex;flex-direction:column;position:relative;overflow:hidden;padding:36px;
  background:#2c3c37;color:#eed9a3
}
.modal-preview::before{content:"";position:absolute;inset:13px;border:1px solid rgba(236,202,126,.3)}
.modal-badge{position:relative;z-index:2;font-size:8px;font-weight:900;letter-spacing:2.5px;color:#e5b759}
.modal-stage{position:relative;flex:1;display:grid;place-items:center}
.modal-moon{position:absolute;width:330px;height:330px;background:#dba443;border-radius:50%}
.modal-shirt{z-index:2;width:320px;height:375px}
.modal-config{padding:46px;position:relative}
.modal-config h2{
  margin:0;font:900 clamp(32px,4vw,52px)/.98 "Cinzel Decorative",serif;text-transform:uppercase;letter-spacing:-1px
}
.modal-description{font:400 16px/1.5 "IM Fell English";color:#69451f;margin:12px 0 0}
.modal-option{margin-top:26px}
.modal-option-title{
  display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:11px;
  font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.6px
}
.modal-option-title strong{font-size:9px;color:#744216}
.modal-summary{
  border-top:3px double rgba(67,36,8,.42);border-bottom:3px double rgba(67,36,8,.42);
  margin-top:28px;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:20px
}
.modal-summary>div{display:flex;flex-direction:column}
.modal-summary small{font-size:7px;letter-spacing:2px;font-weight:900;color:#82471c}
.modal-summary div strong{font:900 17px "Cinzel Decorative";text-transform:uppercase;margin:4px 0}
.modal-summary span{font:400 14px "IM Fell English";color:#6d481f}
.modal-summary>strong{font:900 26px "Cinzel Decorative"}
.modal-checkout{
  width:100%;margin-top:19px;background:#15100a;color:#efcc78;box-shadow:5px 5px 0 #99521c
}
body.modal-open{overflow:hidden}

@media(max-width:1050px){
  .shop-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:850px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .modal-grid{grid-template-columns:1fr}
  .modal-preview{min-height:500px}.modal-config{padding:38px 24px}
  .product-modal{max-height:92vh;overflow:auto}
}
@media(max-width:600px){
  .shop-hero{min-height:350px}.shop-hero-inner{padding:55px 20px}
  .shop-toolbar{grid-template-columns:1fr}
  .shop-count-row{flex-direction:column}
  .shop-grid{grid-template-columns:1fr}
  .shop-card-art{aspect-ratio:1/0.9}
  .modal-preview{min-height:430px;padding:28px 20px}
  .modal-shirt{width:270px;height:315px}.modal-moon{width:275px;height:275px}
}


.turnaround-ack{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:14px 0;
  padding:12px 14px;
  border:1px solid rgba(76,48,19,.35);
  background:rgba(255,248,224,.62);
  font:600 12px/1.45 "Montserrat",sans-serif;
  color:#352516;
  cursor:pointer
}
.turnaround-ack input{
  margin-top:2px;
  width:17px;
  height:17px;
  accent-color:#17110a;
  flex:0 0 auto
}
.turnaround-ack strong{font-weight:800}
.turnaround-ack.needs-attention{
  outline:2px solid #8c2f1e;
  outline-offset:2px
}
.custom-quote-note{
  margin:14px 0;
  padding:14px;
  border:1px dashed #76501f;
  background:rgba(239,202,115,.16);
  font:600 12px/1.55 "Montserrat",sans-serif;
  color:#352516
}
.custom-quote-note strong{
  display:block;
  margin-bottom:4px;
  font-family:"Cinzel Decorative",serif;
  font-size:13px
}

.custom-upload-panel{margin:14px 0;padding:16px;border:1px solid rgba(76,48,19,.35);background:rgba(255,248,224,.58)}
.upload-label{display:block;margin-bottom:8px;font:800 12px/1.3 "Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.6px;color:#2a1d10}
.upload-label span{color:#8c2f1e}
.artwork-input{display:block;width:100%;padding:10px;border:1px solid rgba(76,48,19,.45);background:#fffaf0;font:600 12px "Montserrat",sans-serif;color:#2a1d10}
.upload-help{margin:8px 0 0;font:500 11px/1.45 "Montserrat",sans-serif;color:#67523b}
.artwork-file-status{margin:9px 0 14px;font:700 11px/1.4 "Montserrat",sans-serif;color:#352516;word-break:break-word}
.artwork-file-status.ready{color:#315b35}
.final-sale-notice{margin:14px 0;padding:13px 14px;border-left:4px solid #8c2f1e;background:rgba(140,47,30,.07);color:#352516}
.final-sale-notice strong{display:block;margin-bottom:5px;font:800 12px/1.3 "Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.5px}
.final-sale-notice p{margin:0;font:600 11px/1.55 "Montserrat",sans-serif}
.custom-policy-ack{margin-bottom:0}


/* v13: keep the product configurator inside the viewport and make it scrollable. */
.product-modal{
  box-sizing:border-box;
  width:min(1080px,calc(100vw - 32px));
  max-height:92dvh;
  overflow:hidden;
}
.modal-close{
  right:10px;
  top:10px;
}
.modal-grid{
  min-height:min(660px,calc(92dvh - 4px));
  max-height:calc(92dvh - 4px);
}
.modal-preview{
  min-width:0;
  min-height:0;
}
.modal-stage{
  min-width:0;
  min-height:0;
}
.modal-config{
  min-width:0;
  min-height:0;
  max-height:calc(92dvh - 4px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.modal-summary{
  min-width:0;
  flex-wrap:wrap;
}
.artwork-input{
  box-sizing:border-box;
  max-width:100%;
  min-width:0;
}

/* On narrower screens, scroll the whole modal instead of only the config column. */
@media(max-width:850px){
  .product-modal{
    width:min(94vw,760px);
    max-height:92dvh;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .modal-grid{
    min-height:0;
    max-height:none;
  }
  .modal-config{
    max-height:none;
    overflow:visible;
  }
}

@media(max-width:600px){
  .product-modal{
    width:calc(100vw - 20px);
    max-height:94dvh;
  }
  .modal-preview{
    min-height:360px;
  }
  .modal-config{
    padding:30px 18px 34px;
  }
  .modal-config h2{
    font-size:clamp(28px,10vw,42px);
    padding-right:42px;
  }
}


/* v15: give shirt-color swatches more breathing room. */
.color-row,
.color-options,
.swatch-row,
.swatches,
.modal-color-options,
#color-options,
#modal-color-options {
  gap: 14px;
  column-gap: 14px;
  row-gap: 12px;
  flex-wrap: wrap;
}

/* Extra breathing room on the homepage customizer where the color circles were crowded. */
.builder .color-row,
.builder .color-options,
.builder .swatch-row,
.builder .swatches {
  gap: 16px;
}

/* Combined turnaround + final-sale acknowledgement. */
.combined-order-ack {
  align-items: flex-start;
  gap: 12px;
  line-height: 1.45;
}

.combined-order-ack input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.combined-order-ack span {
  display: block;
}


/* v17: warmer Pirates & Pixies preview treatment; replaces the old green panels. */
.preview-pane,
.modal-preview {
  background:
    radial-gradient(circle at 50% 42%, rgba(190,125,38,.18) 0, rgba(190,125,38,.07) 28%, transparent 57%),
    radial-gradient(circle at 18% 82%, rgba(115,68,26,.22) 0, transparent 35%),
    linear-gradient(145deg, #211910 0%, #17130f 52%, #0e0d0b 100%);
  color:#eed9a3;
}

.preview-pane::before,
.modal-preview::before {
  border-color:rgba(236,202,126,.38);
}

/* v17: color choices need obvious separation, including the selected outline. */
.swatches {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  column-gap:24px;
  row-gap:18px;
  padding:7px 5px 9px;
}

.swatch {
  flex:0 0 auto;
  margin:0;
  outline-offset:3px;
}

.swatch.active {
  outline-offset:4px;
}

@media(max-width:600px){
  .swatches{
    gap:20px;
    column-gap:20px;
    row-gap:17px;
  }
}


/* v18: lighter warm preview scene + realistic recolorable garment mockup. */
.preview-pane,
.modal-preview {
  background:
    radial-gradient(circle at 72% 20%, rgba(255,239,186,.72) 0 7%, rgba(255,220,145,.22) 20%, transparent 38%),
    linear-gradient(180deg, #d9bd83 0%, #c79758 43%, #9a6538 72%, #674126 100%);
  color:#261a10;
}

.preview-pane::after,
.modal-preview::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(79,43,22,.20), transparent 45%),
    linear-gradient(180deg, transparent 0 64%, rgba(69,39,24,.20) 100%);
}

.preview-pane::before,
.modal-preview::before {
  z-index:1;
  border-color:rgba(82,47,18,.34);
}

.preview-pane > *,
.modal-preview > * {
  position:relative;
  z-index:2;
}

.preview-pane .pane-label,
.modal-preview .modal-badge {
  color:#5e3718;
}

.preview-pane .fine-print,
.modal-preview .fine-print {
  color:#3f2a1b;
}

.moon,
.modal-moon {
  background:rgba(248,216,149,.40);
  box-shadow:0 0 0 18px rgba(255,234,180,.11);
}

/* Replace the old polygon shirt with a photographic garment template.
   The tint layer uses the garment alpha as a mask; texture preserves seams/folds. */
.real-shirt {
  --shirt-color:#181816;
  position:relative;
  display:block;
  aspect-ratio:1 / 1;
  background:transparent !important;
  clip-path:none !important;
  filter:drop-shadow(0 24px 18px rgba(55,31,18,.28));
  isolation:isolate;
}

.real-shirt .shirt-tint {
  position:absolute;
  inset:0;
  background:var(--shirt-color);
  -webkit-mask-image:url("assets/ui/shirt-template.png");
  mask-image:url("assets/ui/shirt-template.png");
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  z-index:1;
}

.real-shirt .shirt-texture {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:2;
  opacity:.82;
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.real-shirt .shirt-design-overlay {
  position:absolute;
  z-index:3;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  width:32%;
  max-width:32%;
  height:auto;
  max-height:34%;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.08));
}

.preview-shirt {
  width:min(440px,82vw);
  height:auto;
  transition:none;
}

.modal-shirt {
  width:min(365px,76vw);
  height:auto;
}

/* The old fake collar is no longer used. */
.real-shirt .neck {
  display:none;
}

@media(max-width:700px){
  .preview-shirt{width:min(390px,90vw)}
  .modal-shirt{width:min(330px,84vw)}
}


/* =========================================================
   v19 — full-site warm parchment / nautical boutique theme
   Inspired by the approved Pirates & Pixies customizer look.
   ========================================================= */

:root{
  --ink:#1b140d;
  --ink-soft:#2d2116;
  --parchment:#ead09a;
  --parchment-light:#f3dfb2;
  --parchment-pale:#f8ecd1;
  --old-gold:#b98935;
  --rust:#9a5a27;
  --wine:#63311f;
  --sea:#6b7a73;
  --cream:#fff7df;
  --muted:#735b3a;
  --line:rgba(91,59,25,.28);
}

/* Base page: creamy antique paper instead of saturated yellow/orange. */
body{
  background:
    radial-gradient(circle at 16% 11%,rgba(255,255,255,.62),transparent 27%),
    radial-gradient(circle at 84% 72%,rgba(168,112,47,.08),transparent 30%),
    linear-gradient(90deg,rgba(93,61,28,.035) 1px,transparent 1px),
    linear-gradient(180deg,#f7ecd4 0%,#eed8aa 48%,#e7c98e 100%);
  background-size:auto,auto,180px 180px,auto;
}

body::before{
  box-shadow:
    inset 0 0 85px rgba(77,47,19,.12),
    inset 0 0 0 1px rgba(105,72,34,.08);
}

.page-grain{
  opacity:.08;
}

/* Header becomes parchment with dark ink, matching the reference instead of a black bar. */
.site-header{
  color:var(--ink);
  background:rgba(247,236,211,.95);
  border-bottom:1px solid rgba(105,70,28,.34);
  box-shadow:0 5px 20px rgba(71,43,17,.08);
  backdrop-filter:blur(12px);
}

.brand-icon{color:#9a6d2d}
.brand-copy i,.footer-brand i{color:#9a6d2d}
.brand-copy small,.footer-brand small{color:#74542d}
nav a{color:#3a2918}
nav a:hover{color:#8c5b20}
.header-cta{
  border-color:#6d4a21;
  color:#2c2014;
  background:rgba(255,250,235,.34);
}
.header-cta:hover{background:#21170f;color:#f4dfb2}

/* Homepage hero: pale parchment and restrained nautical warmth. */
.hero{
  background:
    radial-gradient(circle at 77% 23%,rgba(255,250,229,.82),transparent 23%),
    radial-gradient(circle at 15% 80%,rgba(152,94,38,.11),transparent 34%),
    linear-gradient(115deg,#f5e8c9 0%,#edd6a5 55%,#e3be7c 100%);
  border-bottom:1px solid rgba(87,55,23,.42);
}
.hero::after{border-color:rgba(105,70,31,.28)}
.route{border-top-color:rgba(102,68,30,.22)}
.x-mark{color:rgba(112,65,24,.32)}
.spark{color:rgba(132,92,37,.34)}
.eyebrow{color:#7b4f23}
.hero h1{text-shadow:none}
.hero-copy p{color:#503b28}

/* Feature/design area: use paper cards instead of bright mustard blocks. */
.featured,
.designs-wrap{
  background:
    radial-gradient(circle at 22% 12%,rgba(255,255,255,.52),transparent 25%),
    linear-gradient(180deg,#f4e6c6,#ead1a0);
}

.section-head>p{color:#624a30}

.design-card{
  background:#f4e4bd;
  border:1px solid #9c7847;
  box-shadow:0 9px 22px rgba(75,46,19,.12);
}
.design-card:hover{box-shadow:0 13px 28px rgba(75,46,19,.17)}
.design-card.active{outline:3px solid #24180f;outline-offset:4px}

.design-art{
  background:
    radial-gradient(circle at 50% 40%,#fff7dc 0%,#f0ddb4 68%,#e2c18a 100%);
  border-color:rgba(86,57,25,.28);
}
.design-art::before{border-color:rgba(95,65,31,.18)}
.design-meta small{color:#685033}

/* Entire builder section now shares the approved parchment/seaside palette. */
.builder-wrap{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.34),transparent 31%),
    linear-gradient(180deg,#ead4aa 0%,#dfbd82 100%);
  color:var(--ink);
  border-top:1px solid rgba(94,63,29,.24);
  border-bottom:1px solid rgba(94,63,29,.24);
}
.builder-wrap::before{
  opacity:.07;
  background-image:
    radial-gradient(circle at 15% 20%,#67451f 0 1px,transparent 1.5px),
    radial-gradient(circle at 75% 70%,#67451f 0 1px,transparent 1.5px);
}
.builder-heading .eyebrow{color:#825522}
.builder-heading h2{color:#21170f}
.builder-heading p:not(.eyebrow){color:#664d32}
.ornament{color:#a8782f}
.builder{
  border:1px solid #967143;
  box-shadow:0 18px 38px rgba(66,39,15,.16);
}

/* Approved light nautical preview treatment. */
.preview-pane,
.modal-preview{
  background:
    radial-gradient(circle at 72% 18%,rgba(255,246,214,.75) 0 8%,rgba(248,222,171,.20) 20%,transparent 38%),
    linear-gradient(180deg,#e8d3aa 0%,#d8b47f 48%,#b47c4b 73%,#7c5637 100%);
  color:#281b12;
}
.preview-pane::after,
.modal-preview::after{
  background:
    radial-gradient(ellipse at 48% 82%,rgba(92,54,29,.14),transparent 45%),
    linear-gradient(180deg,transparent 0 65%,rgba(74,43,26,.16) 100%);
}
.preview-pane::before,
.modal-preview::before{border-color:rgba(92,59,25,.32)}
.preview-pane .pane-label,
.modal-preview .modal-badge{color:#6d4724}
.preview-pane .fine-print,
.modal-preview .fine-print{color:#4b3625}
.corner{color:#a77331}
.moon,.modal-moon{
  background:rgba(245,218,164,.32);
  box-shadow:0 0 0 18px rgba(255,241,207,.08);
}

/* Order panels mirror the reference's pale paper. */
.config-pane,
.modal-config,
.product-modal{
  background:
    radial-gradient(circle at 90% 8%,rgba(255,255,255,.45),transparent 20%),
    linear-gradient(180deg,#f5e6c2 0%,#edd5a3 100%);
}
.config-pane::before{border-color:rgba(87,56,24,.20)}
.option-heading strong,
.modal-option-title strong{color:#73502c}

/* Controls throughout the site. */
.brand-button,
.size-button,
.quantity-control,
textarea,
input,
select,
.category-chip,
.search-wrap input,
.sort-wrap select{
  background:#f8edd3;
  border-color:#9c7948;
  color:#21170f;
}

.brand-button.active,
.size-button.active,
.category-chip.active{
  background:#21170f;
  color:#f4dfb2;
  border-color:#21170f;
  box-shadow:3px 3px 0 rgba(148,98,35,.45);
}

.swatch{
  border-color:#d4b477;
  outline-color:#6e4d27;
}

.swatch.active{
  outline-color:#21170f;
}

.final-sale-notice,
.combined-order-ack,
.turnaround-ack{
  background:rgba(255,248,226,.48);
  border-color:rgba(112,75,34,.38);
}

/* Main buttons: near-black with antique gold, like the approved screenshot. */
.primary-button,
.checkout-button,
.modal-checkout,
.shop-card-cta,
button[type="submit"]{
  background:#21170f;
  color:#f3ddb0;
  border-color:#21170f;
}

/* Shop page. */
.shop-hero{
  background:
    radial-gradient(circle at 72% 20%,rgba(255,255,255,.62),transparent 25%),
    radial-gradient(circle at 15% 75%,rgba(145,87,34,.10),transparent 34%),
    linear-gradient(115deg,#f5e8cb 0%,#ecd5a5 58%,#dfba78 100%);
  border-bottom:1px solid rgba(88,56,24,.38);
}
.shop-hero::before{border-color:rgba(95,62,28,.26)}
.shop-hero h1 em{color:#78502b}
.shop-hero p:last-child{color:#5b432d}
.shop-map span{color:rgba(93,62,29,.22)}

.shop-section{
  background:
    radial-gradient(circle at 13% 8%,rgba(255,255,255,.38),transparent 25%),
    linear-gradient(180deg,#f6ead0,#ead2a2);
}

.search-wrap label,.sort-wrap label,.category-label{color:#6d4927}
.search-wrap input,.sort-wrap select{
  background:#fbf0d7;
  box-shadow:0 4px 12px rgba(70,43,18,.08);
}
.shop-count-row{color:#654b31;border-color:rgba(88,57,26,.22)}

.category-chip{
  background:#f4e2ba;
  border-color:#a47d47;
  box-shadow:none;
}
.category-chip.active{
  background:#21170f;
  color:#efd7a4;
  border-color:#21170f;
}

.shop-card{
  background:#f3e2bc;
  border-color:#a17c49;
  box-shadow:0 8px 20px rgba(70,43,17,.12);
}
.shop-card:hover{box-shadow:0 12px 26px rgba(70,43,17,.16)}
.shop-card-art{
  background:
    radial-gradient(circle at 50% 42%,#fff6dc 0%,#edd9ae 72%,#dfbd82);
  border-color:rgba(83,54,23,.26);
}
.shop-card-art::after{border-color:rgba(88,59,28,.16)}
.shop-card-body p{color:#674f34}
.shop-card-tag{
  background:rgba(112,75,34,.06);
  border-color:rgba(112,75,34,.22);
  color:#74512c;
}

/* Modal itself gets a refined frame, no harsh orange slab. */
.product-modal{
  border:1px solid #8d683c;
  box-shadow:0 22px 55px rgba(30,18,8,.36);
}
.product-modal::backdrop{
  background:rgba(37,27,17,.58);
  backdrop-filter:blur(5px);
}
.modal-close{
  background:#21170f;
  color:#efd7a4;
  border-color:#9c7136;
}

/* Footer + closing areas: paper on top, dark nautical band only at the very bottom. */
.closing-banner{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.42),transparent 32%),
    linear-gradient(180deg,#ead3a7,#ddb87f);
  color:#21170f;
  border-top:1px solid rgba(92,61,29,.24);
}
.closing-banner .eyebrow{color:#7b5128}

.site-footer{
  background:#241a12;
  color:#ead7ae;
  border-top:1px solid #9a733c;
}
.site-footer a{color:#ead7ae}
.site-footer a:hover{color:#fff0c9}
.footer-copy{color:#bca77e}

/* Order complete screen no longer uses its own bright gold radial panel. */
.order-complete-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:30px;
  background:
    radial-gradient(circle at 50% 18%,rgba(255,255,255,.55),transparent 28%),
    linear-gradient(180deg,#f6ead0,#e6c891);
}
.order-complete-card{
  max-width:760px;
  text-align:center;
  border:1px solid #8d6738;
  padding:clamp(35px,7vw,70px);
  background:rgba(250,239,211,.86);
  box-shadow:0 18px 42px rgba(65,39,16,.16);
}

/* Subtle responsive polish matching the cleaner reference layout. */
@media(max-width:850px){
  .site-header{background:rgba(247,236,211,.98)}
}