/* Un Pedacito De Ella — site styles.
   Consumes tokens from design-system.css. Do not hardcode colour or type here. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--upde-cream);color:var(--upde-ink);
  font-family:var(--upde-font-body);font-weight:300;font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--upde-font-display);font-weight:400;line-height:1.15;margin:0}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--upde-maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.eyebrow{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--upde-muted);font-weight:400;margin:0 0 .75rem}
.btn{display:inline-block;background:var(--upde-terra);color:#fff;text-decoration:none;
  font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;padding:.85rem 1.9rem;
  border-radius:var(--upde-radius);transition:background .18s ease}
.btn:hover{background:var(--upde-terra-dark)}
.btn-ghost{background:transparent;border:1px solid var(--upde-line);color:var(--upde-ink)}
.btn-ghost:hover{background:var(--upde-white);border-color:var(--upde-terra)}
.btn-light{background:var(--upde-white);color:var(--upde-brown)}
section{padding:var(--upde-section-y) 0}
.section-head{margin-bottom:clamp(1.75rem,3vw,2.75rem)}
.section-head h2{font-size:var(--upde-h2)}
.section-head .link{float:right;font-size:.8125rem;letter-spacing:.04em;
  color:var(--upde-terra);text-decoration:none;margin-top:.75rem}

/* ---- image placeholder: shows what belongs here and at what size ---- */
.ph{position:relative;background:
    repeating-linear-gradient(45deg,#EFE6D8 0 12px,#EAE0D0 12px 24px);
  border:1px dashed #CBB89E;border-radius:var(--upde-radius);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#8B7657;font-family:var(--upde-font-body);font-size:.75rem;line-height:1.5;
  letter-spacing:.02em;padding:1rem;min-height:120px}
.ph b{display:block;font-weight:500;color:#6E5A3F;letter-spacing:.06em;
  text-transform:uppercase;font-size:.6875rem;margin-bottom:.3rem}
.ph span{opacity:.75;font-size:.6875rem}


/* ---- announcement + header ---- */
.announce{background:var(--upde-brown);color:#EDE2D2;font-size:.75rem;letter-spacing:.04em}
.announce .wrap{display:flex;justify-content:space-between;gap:1rem;
  padding-top:.6rem;padding-bottom:.6rem;flex-wrap:wrap}
.announce nav{display:flex;gap:1.25rem}
.announce a{text-decoration:none;opacity:.8}
.announce a:hover{opacity:1}
header.site{background:var(--upde-cream);border-bottom:1px solid var(--upde-line);
  position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding-top:1.1rem;padding-bottom:1.1rem}
.brand{font-family:var(--upde-font-display);font-size:1.25rem;letter-spacing:.04em;
  text-decoration:none;white-space:nowrap}
header.site nav{display:flex;gap:clamp(.9rem,2vw,1.6rem);font-size:.8125rem;
  letter-spacing:.04em;flex:1}
header.site nav a{text-decoration:none;color:var(--upde-ink);opacity:.85}
header.site nav a:hover{opacity:1;color:var(--upde-terra)}
.search{display:flex;border:1px solid var(--upde-line);border-radius:var(--upde-radius);
  overflow:hidden;background:#fff}
.search input{border:0;padding:.5rem .8rem;font-family:inherit;font-size:.8125rem;
  width:clamp(90px,14vw,180px);outline:0;font-weight:300}
.search button{border:0;background:var(--upde-gold);color:#3D2314;font-family:inherit;
  font-size:.75rem;letter-spacing:.05em;padding:0 .9rem;cursor:pointer}
.cart{text-decoration:none;font-size:1.1rem;line-height:1}

/* ---- hero ---- */
.hero{position:relative;background:var(--upde-forest);min-height:clamp(340px,46vw,520px);
  display:flex;align-items:flex-end;overflow:hidden}
.hero .ph{position:absolute;inset:0;border:0;border-radius:0;background:
  repeating-linear-gradient(45deg,#46523A 0 14px,#3F4A33 14px 28px);color:#B9C3A8}
.hero .ph b{color:#CBD4BB}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(1.75rem,4vw,3rem);
  padding-top:clamp(4rem,10vw,7rem)}
.hero-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  width:clamp(150px,20vw,230px);aspect-ratio:1;border:2px solid rgba(255,255,255,.85);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;font-family:var(--upde-font-display);
  font-size:clamp(1.05rem,2vw,1.6rem);line-height:1.25;letter-spacing:.05em;z-index:2}
.hero h1{color:#fff;font-size:var(--upde-h1);max-width:14ch;margin:.4rem 0 1.25rem}
.hero .eyebrow{color:rgba(255,255,255,.72)}

/* ---- category grid ---- */
.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--upde-gap)}
.cat{position:relative;aspect-ratio:16/10;border-radius:var(--upde-radius);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.9rem;text-align:center}
.cat .ph{position:absolute;inset:0;border-radius:0;min-height:0}
.cat-label{position:relative;z-index:2;color:#fff;font-family:var(--upde-font-display);
  font-size:var(--upde-h3);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.cat .btn{position:relative;z-index:2}
.cat::after{content:"";position:absolute;inset:0;background:rgba(61,35,20,.28);z-index:1}

/* ---- trust bar ---- */
.trust{background:var(--upde-cream-dk);padding:clamp(2rem,4vw,3rem) 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--upde-gap);
  text-align:center}
.trust-item .ico{width:34px;height:34px;margin:0 auto .7rem;border:1px solid var(--upde-gold);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:var(--upde-terra)}
.trust-item h4{font-size:1rem;margin-bottom:.2rem}
.trust-item p{margin:0;font-size:.75rem;color:var(--upde-muted)}
.trust-item.unverified{position:relative}
.trust-item.unverified::after{content:"needs sign-off";position:absolute;top:-.35rem;left:50%;
  transform:translateX(-50%);background:#B4482F;color:#fff;font-size:.5625rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.1rem .45rem;border-radius:2px}

/* ---- mosaic ---- */
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;
  grid-template-areas:"big a b" "big c d";gap:var(--upde-gap)}
.tile{position:relative;border-radius:var(--upde-radius);overflow:hidden;
  min-height:190px;display:flex;align-items:flex-end}
.tile.big{grid-area:big;min-height:400px}
.tile .ph{position:absolute;inset:0;border-radius:0;min-height:0}
.tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(61,35,20,.62),transparent 55%);z-index:1}
.tile-body{position:relative;z-index:2;padding:1.1rem;color:#fff}
.tile-body .eyebrow{color:rgba(255,255,255,.7);margin-bottom:.25rem}
.tile-body h3{font-size:var(--upde-h3);margin-bottom:.6rem}

/* ---- custom orders banner ---- */
.custom{background:var(--upde-cream-dk)}
.custom .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center}
.custom h2{font-size:var(--upde-h2);margin-bottom:.9rem}
.custom p{color:var(--upde-muted);margin:0 0 1.5rem;max-width:46ch}
.custom .ph{aspect-ratio:4/3}

/* ---- reviews ---- */
.reviews{background:var(--upde-brown);color:#F3E9DA}
.reviews h2{color:#fff}
.reviews .eyebrow{color:var(--upde-gold)}
.reviews .link{color:var(--upde-gold)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--upde-gap)}
.review{background:rgba(255,255,255,.05);border:1px solid rgba(201,169,110,.28);
  border-radius:var(--upde-radius);padding:1.6rem}
.stars{color:var(--upde-gold);letter-spacing:.14em;font-size:.8125rem;margin-bottom:.8rem}
.review h4{font-size:1.0625rem;color:#fff;margin-bottom:.55rem}
.review p{font-size:.875rem;margin:0 0 1rem;color:#E3D7C4;font-style:italic}
.review cite{font-size:.75rem;letter-spacing:.06em;color:var(--upde-gold);font-style:normal}

/* ---- story ---- */
.story .wrap{display:grid;grid-template-columns:1fr 1.1fr;
  gap:clamp(1.5rem,5vw,4rem);align-items:center}
.story h2{font-size:var(--upde-h2);margin-bottom:1rem}
.story p{color:var(--upde-muted);max-width:48ch}
.story .ph{aspect-ratio:1/1}

/* ---- questions ---- */
.questions{background:var(--upde-cream-dk);text-align:center}
.questions h2{font-size:var(--upde-h2);margin-bottom:.7rem}
.questions p{color:var(--upde-muted);max-width:52ch;margin:0 auto 1.75rem}
.qbtns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

/* ---- footer ---- */
footer.site{background:var(--upde-brown);color:#D8CBB8;font-size:.8125rem;
  padding:clamp(2.5rem,5vw,4rem) 0 0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--upde-gap)}
footer.site h4{font-family:var(--upde-font-body);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--upde-gold);margin-bottom:.9rem;font-weight:500}
footer.site .brandname{font-family:var(--upde-font-display);font-size:1.15rem;
  color:#fff;margin-bottom:.6rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:.45rem}
footer.site a{text-decoration:none;opacity:.8}
footer.site a:hover{opacity:1;color:var(--upde-gold)}
footer.site p{margin:0;max-width:34ch;opacity:.8}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:clamp(2rem,4vw,3rem);
  padding:1.25rem 0;font-size:.75rem;opacity:.6;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

@media(max-width:860px){
  .mosaic{grid-template-columns:1fr 1fr;grid-template-areas:"big big" "a b" "c d"}
  .tile.big{min-height:280px}
  .trust-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem}
  .review-grid{grid-template-columns:1fr}
  .custom .wrap,.story .wrap{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  header.site nav{display:none}
}
@media(max-width:520px){
  .cat-grid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr;grid-template-areas:"big" "a" "b" "c" "d"}
  .footer-grid{grid-template-columns:1fr}
  .search input{width:100px}
}

/* ==========================================================================
   Custom Orders page
   Rebuilt from the recorded structure of the original Shopify page; that
   page's markup was lost when the store closed.
   Contact is Instagram DM only — no phone, no email. This is deliberate and
   was true of the original page. Do not "helpfully" add a phone number.
   ========================================================================== */

.urgency{background:linear-gradient(90deg,var(--upde-terra),#D08B67);color:#fff;
  text-align:center;font-size:.8125rem;letter-spacing:.04em;padding:.7rem 1rem}
.urgency strong{font-weight:500}

.co-hero{background:var(--upde-cream-dk);text-align:center;
  padding:clamp(3rem,7vw,5.5rem) 0}
.co-hero h1{font-size:var(--upde-h1);max-width:16ch;margin:.4rem auto 1rem}
.co-hero p{color:var(--upde-muted);max-width:52ch;margin:0 auto 1.75rem}

.co-trust{border-bottom:1px solid var(--upde-line);padding:clamp(1.75rem,3vw,2.5rem) 0}
.co-trust .trust-grid{grid-template-columns:repeat(4,1fr)}

.occ-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--upde-gap)}
.occ{background:var(--upde-white);border:1px solid var(--upde-line);
  border-radius:var(--upde-radius);padding:1.75rem 1.25rem;text-align:center;
  transition:border-color .18s ease,transform .18s ease}
.occ:hover{border-color:var(--upde-terra);transform:translateY(-2px)}
/* line-height:1 keeps the glyph optically centred in its circle — without it
   the emoji sits high-left. This was a real defect on the original page. */
.occ-ico{width:46px;height:46px;margin:0 auto .9rem;border-radius:50%;
  background:var(--upde-cream-dk);display:flex;align-items:center;
  justify-content:center;font-size:1.25rem;line-height:1}
.occ h3{font-size:1.0625rem;margin-bottom:.3rem}
.occ p{margin:0;font-size:.75rem;color:var(--upde-muted)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,3vw,2.25rem)}
.step{text-align:center}
.snum{width:52px;height:52px;margin:0 auto 1rem;border-radius:50%;
  background:var(--upde-terra);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--upde-font-display);font-size:1.4rem;
  line-height:1}
.step h3{font-size:1.0625rem;margin-bottom:.4rem}
.step p{margin:0;font-size:.8125rem;color:var(--upde-muted)}

.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--upde-line);padding:1.1rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:1rem;align-items:center;font-family:var(--upde-font-display);
  font-size:var(--upde-h3);color:var(--upde-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--upde-terra);font-size:1.4rem;
  line-height:1;flex:none;transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:.85rem 0 0;color:var(--upde-muted);font-size:.9375rem;max-width:64ch}

.co-contact{background:var(--upde-brown);color:#F3E9DA;text-align:center}
.co-contact h2{color:#fff;font-size:var(--upde-h2);margin-bottom:.7rem}
.co-contact p{color:#DCCFBB;max-width:50ch;margin:0 auto 1.75rem}
.co-handle{font-family:var(--upde-font-display);font-size:1.5rem;
  color:var(--upde-gold);display:block;margin-bottom:1.5rem;text-decoration:none}

@media(max-width:860px){
  .occ-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .co-trust .trust-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem}
}
@media(max-width:520px){
  .occ-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
}

/* ==========================================================================
   Shop archive + product card
   ========================================================================== */

.shop-head{background:var(--upde-cream-dk);padding:clamp(2.5rem,5vw,4rem) 0;text-align:center}
.shop-head h1{font-size:var(--upde-h1);margin-bottom:.5rem}
.shop-head p{color:var(--upde-muted);max-width:52ch;margin:0 auto}
.shop-bar{border-bottom:1px solid var(--upde-line);padding:1rem 0;font-size:.8125rem}
.shop-bar .wrap{display:flex;justify-content:space-between;gap:1rem;
  align-items:center;flex-wrap:wrap}
.shop-bar .cats{display:flex;gap:1.25rem}
.shop-bar a{text-decoration:none;color:var(--upde-muted)}
.shop-bar a.on,.shop-bar a:hover{color:var(--upde-terra)}
.shop-bar select{font-family:inherit;font-size:.8125rem;padding:.4rem .6rem;
  border:1px solid var(--upde-line);border-radius:var(--upde-radius);background:#fff;
  color:var(--upde-ink)}

.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--upde-gap)}
.pcard{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.pcard .shot{aspect-ratio:1;border-radius:var(--upde-radius);overflow:hidden;
  margin-bottom:.85rem;position:relative}
.pcard .ph{position:absolute;inset:0;border-radius:0;min-height:0}
.pcard h3{font-size:1.0625rem;margin-bottom:.2rem;font-weight:400}
.pcard .price{font-size:.875rem;color:var(--upde-terra);margin:0}
.pcard .opts{font-size:.6875rem;color:var(--upde-muted);letter-spacing:.04em;
  text-transform:uppercase;margin:.35rem 0 0}
.pcard:hover h3{color:var(--upde-terra)}

/* ==========================================================================
   Single product
   ========================================================================== */

.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.75rem,5vw,4rem);
  align-items:start}
.pdp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.pdp-gallery .main{grid-column:1/-1;aspect-ratio:1;border-radius:var(--upde-radius);
  overflow:hidden;position:relative}
.pdp-gallery .thumb{aspect-ratio:1;border-radius:var(--upde-radius);overflow:hidden;
  position:relative}
.pdp-gallery .ph{position:absolute;inset:0;border-radius:0;min-height:0;font-size:.625rem}
.crumb{font-size:.75rem;color:var(--upde-muted);margin:0 0 .9rem}
.crumb a{text-decoration:none;color:var(--upde-muted)}
.crumb a:hover{color:var(--upde-terra)}
.pdp h1{font-size:clamp(1.75rem,3.2vw,2.5rem);margin-bottom:.4rem}
.pdp .price-lg{font-size:1.375rem;color:var(--upde-terra);margin:0 0 1.1rem}
.pdp .lede{color:var(--upde-muted);margin:0 0 1.75rem;max-width:52ch}

.opt{margin-bottom:1.5rem}
.opt-label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--upde-muted);margin-bottom:.6rem;display:block}
.opt-label b{color:var(--upde-ink);font-weight:400;letter-spacing:0;text-transform:none;
  font-size:.8125rem}
.swatches{display:flex;gap:.5rem;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:50%;border:1px solid var(--upde-line);
  cursor:pointer;position:relative;padding:0;background-clip:padding-box}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--upde-white),0 0 0 3px var(--upde-terra)}
.pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{font-family:inherit;font-size:.8125rem;padding:.5rem 1rem;border-radius:var(--upde-radius);
  border:1px solid var(--upde-line);background:#fff;color:var(--upde-ink);cursor:pointer}
.pill[aria-pressed="true"]{border-color:var(--upde-terra);color:var(--upde-terra);
  background:var(--upde-cream-dk)}

.qty-row{display:flex;gap:.75rem;align-items:stretch;margin-bottom:1.25rem}
.qty{display:flex;border:1px solid var(--upde-line);border-radius:var(--upde-radius);
  background:#fff}
.qty button{border:0;background:none;font-family:inherit;font-size:1rem;width:38px;
  cursor:pointer;color:var(--upde-muted)}
.qty input{border:0;width:44px;text-align:center;font-family:inherit;font-size:.9375rem;
  outline:0}
.qty-row .btn{flex:1;text-align:center}

.pdp-meta{border-top:1px solid var(--upde-line);margin-top:1.5rem;padding-top:1.25rem;
  font-size:.8125rem;color:var(--upde-muted)}
.pdp-meta li{margin-bottom:.4rem;list-style:none}
.pdp-meta ul{margin:0;padding:0}

@media(max-width:860px){
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .pdp{grid-template-columns:1fr}
}
@media(max-width:520px){
  .shop-grid{grid-template-columns:1fr 1fr;gap:1rem}
}

/* ==========================================================================
   Content pages (Our Story, FAQ, Shipping, Contact, Privacy, Terms)
   ========================================================================== */

.page-head{background:var(--upde-cream-dk);padding:clamp(2.5rem,5vw,4rem) 0;text-align:center}
.page-head h1{font-size:var(--upde-h1);margin-bottom:.5rem}
.page-head p{color:var(--upde-muted);max-width:54ch;margin:0 auto}

.prose{max-width:68ch;margin:0 auto}
.prose h2{font-size:var(--upde-h2);margin:2.5rem 0 .85rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--upde-h3);margin:1.75rem 0 .5rem}
.prose p{margin:0 0 1.1rem;color:#463A2E}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.25rem;color:#463A2E}
.prose li{margin-bottom:.5rem}
.prose a{color:var(--upde-terra)}
.prose strong{font-weight:500}
.prose .lead{font-size:1.125rem;color:var(--upde-muted)}
.prose hr{border:0;border-top:1px solid var(--upde-line);margin:2.5rem 0}
.prose .updated{font-size:.8125rem;color:var(--upde-muted);font-style:italic}

/* Marks copy the client still has to confirm. The check script counts these,
   and they must be zero before launch. */
.confirm{background:#FBE9E2;border-left:3px solid #B4482F;padding:.15rem .45rem;
  border-radius:2px;font-size:.9375rem;color:#8A3520}

.story-split{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,5vw,4rem);align-items:center;max-width:var(--upde-maxw);margin:0 auto}
.story-split .ph{aspect-ratio:4/5}

/* --- contact form ------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1.15fr 1fr;
  gap:clamp(1.75rem,5vw,3.5rem);align-items:start}
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--upde-muted);margin-bottom:.4rem}
.field input,.field textarea,.field select{width:100%;font-family:inherit;font-size:.9375rem;
  font-weight:300;padding:.75rem .9rem;border:1px solid var(--upde-line);
  border-radius:var(--upde-radius);background:#fff;color:var(--upde-ink);outline:0}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--upde-terra)}
.field textarea{min-height:150px;resize:vertical}
.contact-aside{background:var(--upde-cream-dk);border-radius:var(--upde-radius);
  padding:clamp(1.5rem,3vw,2.25rem)}
.contact-aside h3{font-size:var(--upde-h3);margin-bottom:.6rem}
.contact-aside p{font-size:.875rem;color:var(--upde-muted);margin:0 0 1.25rem}
.contact-aside .handle{font-family:var(--upde-font-display);font-size:1.25rem;
  color:var(--upde-terra);text-decoration:none;display:block;margin-bottom:1.5rem}

@media(max-width:860px){
  .story-split,.contact-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   Cart & checkout
   Woo's defaults are functional but visually unrelated to the rest of the
   site. These restyle them without changing the markup Woo depends on.
   ========================================================================== */

.cart-layout{display:grid;grid-template-columns:1.6fr 1fr;
  gap:clamp(1.75rem,4vw,3rem);align-items:start}

.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-family:var(--upde-font-body);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--upde-muted);
  font-weight:500;padding:0 0 .9rem;border-bottom:1px solid var(--upde-line)}
.cart-table td{padding:1.1rem 0;border-bottom:1px solid var(--upde-line);
  vertical-align:top}
.cart-item{display:flex;gap:1rem;align-items:flex-start}
.cart-item .shot{width:78px;flex:none;aspect-ratio:1;border-radius:var(--upde-radius);
  overflow:hidden;position:relative}
.cart-item .ph{position:absolute;inset:0;border-radius:0;min-height:0;font-size:.5625rem}
.cart-item h3{font-size:1rem;margin-bottom:.2rem;font-weight:400}
.cart-item .variant{font-size:.75rem;color:var(--upde-muted);margin:0}
.cart-item .remove{font-size:.75rem;color:var(--upde-muted);text-decoration:underline;
  display:inline-block;margin-top:.5rem}
.cart-table .num{text-align:right;white-space:nowrap;font-size:.9375rem}
.cart-table .qty{display:inline-flex}

.summary{background:var(--upde-cream-dk);border-radius:var(--upde-radius);
  padding:clamp(1.5rem,3vw,2rem);position:sticky;top:96px}
.summary h2{font-size:var(--upde-h3);margin-bottom:1.1rem}
.summary .line{display:flex;justify-content:space-between;gap:1rem;
  font-size:.875rem;margin-bottom:.7rem;color:var(--upde-muted)}
.summary .line span:last-child{color:var(--upde-ink)}
.summary .total{border-top:1px solid var(--upde-line);margin-top:1rem;padding-top:1rem;
  font-size:1.125rem;color:var(--upde-ink)}
.summary .total span:last-child{color:var(--upde-terra)}
.summary .btn{display:block;text-align:center;margin-top:1.25rem}
.summary .note{font-size:.75rem;color:var(--upde-muted);margin:1rem 0 0;text-align:center}

.co-cols{display:grid;grid-template-columns:1.3fr 1fr;
  gap:clamp(1.75rem,4vw,3.5rem);align-items:start}
.co-step{margin-bottom:2.25rem}
.co-step h2{font-size:var(--upde-h3);margin-bottom:1rem;
  display:flex;align-items:center;gap:.7rem}
.co-step h2 .n{width:26px;height:26px;flex:none;border-radius:50%;
  background:var(--upde-terra);color:#fff;font-family:var(--upde-font-body);
  font-size:.75rem;display:flex;align-items:center;justify-content:center;line-height:1}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.pay-method{border:1px solid var(--upde-line);border-radius:var(--upde-radius);
  padding:1rem;background:#fff;margin-bottom:.75rem}
.pay-method.on{border-color:var(--upde-terra);background:var(--upde-cream-dk)}
.pay-method label{display:flex;gap:.6rem;align-items:center;font-size:.9375rem;cursor:pointer}
.pay-method p{margin:.6rem 0 0 1.5rem;font-size:.8125rem;color:var(--upde-muted)}

@media(max-width:860px){
  .cart-layout,.co-cols{grid-template-columns:1fr}
  .summary{position:static}
  .row2{grid-template-columns:1fr}
}

/* ==========================================================================
   MODERN LAYER
   The base above is structurally sound but visually flat. This adds the three
   things it was missing: depth, motion, and scale contrast. Class names are
   unchanged - the markup is fixed and already published.
   ========================================================================== */

/* --- full-bleed helper --------------------------------------------------
   Astra is set to page-builder (no container), so sections span the viewport
   and each .wrap re-establishes the reading measure inside. */
.wrap { max-width: var(--upde-maxw); }

/* --- header: sticky, translucent, settles on scroll --------------------- */
header.site {
  background: color-mix(in srgb, var(--upde-cream) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--upde-line) 60%, transparent);
  transition: box-shadow var(--upde-t-base) var(--upde-ease),
              background var(--upde-t-base) var(--upde-ease);
}
header.site:hover { box-shadow: var(--upde-shadow-sm); }
header.site nav a {
  position: relative;
  padding-block: .25rem;
}
/* underline grows from the left rather than fading in - reads as intent */
header.site nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--upde-terra);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--upde-t-base) var(--upde-ease-out);
}
header.site nav a:hover::after { transform: scaleX(1); }

/* --- buttons: lift, don't just recolour --------------------------------- */
.btn {
  position: relative;
  box-shadow: var(--upde-shadow-sm);
  transition: background var(--upde-t-fast) var(--upde-ease),
              transform var(--upde-t-fast) var(--upde-ease),
              box-shadow var(--upde-t-base) var(--upde-ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--upde-shadow-lg); }
.btn:active { transform: translateY(0); box-shadow: var(--upde-shadow-sm); }
.btn-ghost { box-shadow: none; backdrop-filter: blur(6px); }
.btn-ghost:hover { box-shadow: var(--upde-shadow-md); }

/* --- hero: taller, scrimmed, and the type finally has room -------------- */
/* two-stop scrim: darkens the bottom for legibility, leaves the top clean */

/* --- section headings: editorial scale contrast ------------------------- */
.section-head h2 { letter-spacing: -0.01em; line-height: 1.06; }
.section-head .eyebrow { color: var(--upde-terra); }

/* --- media: rounder, and they move ------------------------------------- */
.cat, .tile, .pcard .shot, .custom .ph, .story .ph,
.pdp-gallery .main, .pdp-gallery .thumb {
  border-radius: var(--upde-radius-lg);
  overflow: hidden;
}
.cat, .tile { box-shadow: var(--upde-shadow-md); }

/* zoom the image, not the card - the card's edges stay put */
.cat .ph, .tile .ph, .pcard .shot .ph {
  transition: transform var(--upde-t-slow) var(--upde-ease-out);
}
.cat:hover .ph, .tile:hover .ph, .pcard:hover .shot .ph { transform: scale(1.06); }

.cat, .tile {
  transition: transform var(--upde-t-base) var(--upde-ease),
              box-shadow var(--upde-t-base) var(--upde-ease);
}
.cat:hover, .tile:hover { transform: translateY(-4px); box-shadow: var(--upde-shadow-xl); }
.cat::after { transition: background var(--upde-t-base) var(--upde-ease); }
.cat:hover::after { background: rgba(61,35,20,.16); }
.cat-label { font-size: clamp(1.25rem, 2.2vw, 1.9rem); letter-spacing: -.005em; }

/* --- trust bar: give it a surface instead of a flat band ---------------- */
.trust {
  background: linear-gradient(180deg,
    var(--upde-cream-dk) 0%,
    color-mix(in srgb, var(--upde-cream-dk) 60%, var(--upde-cream)) 100%);
  border-block: 1px solid color-mix(in srgb, var(--upde-line) 70%, transparent);
}
.trust-item .ico {
  width: 46px; height: 46px; font-size: 1rem;
  background: var(--upde-white);
  border-color: color-mix(in srgb, var(--upde-gold) 55%, transparent);
  box-shadow: var(--upde-shadow-sm);
  transition: transform var(--upde-t-base) var(--upde-ease),
              box-shadow var(--upde-t-base) var(--upde-ease);
}
.trust-item:hover .ico { transform: translateY(-3px); box-shadow: var(--upde-shadow-md); }

/* --- product cards ------------------------------------------------------ */
.pcard .shot { box-shadow: var(--upde-shadow-sm); transition: box-shadow var(--upde-t-base) var(--upde-ease); }
.pcard:hover .shot { box-shadow: var(--upde-shadow-lg); }
.pcard h3 { transition: color var(--upde-t-fast) var(--upde-ease); }
.pcard .price { font-weight: 400; letter-spacing: .01em; }

/* --- reviews: depth on the dark ground ---------------------------------- */
.reviews {
  background:
    radial-gradient(120% 90% at 15% 0%, #4A2C1A 0%, transparent 55%),
    var(--upde-brown);
}
.review {
  background: rgba(255,255,255,.055);
  border-color: rgba(201,169,110,.22);
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  transition: transform var(--upde-t-base) var(--upde-ease),
              background var(--upde-t-base) var(--upde-ease);
}
.review:hover { transform: translateY(-4px); background: rgba(255,255,255,.085); }

/* --- occasions & steps: editorial numerals ------------------------------ */
.occ {
  border-radius: var(--upde-radius-md);
  box-shadow: var(--upde-shadow-sm);
  transition: transform var(--upde-t-base) var(--upde-ease),
              box-shadow var(--upde-t-base) var(--upde-ease),
              border-color var(--upde-t-fast) var(--upde-ease);
}
.occ:hover { transform: translateY(-4px); box-shadow: var(--upde-shadow-lg); }
.occ-ico { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--upde-gold) 40%, transparent); }
.snum {
  width: 62px; height: 62px; font-size: 1.7rem;
  background: linear-gradient(150deg, var(--upde-terra), #A85E3F);
  box-shadow: var(--upde-shadow-md);
}

/* --- custom orders + story: full-bleed alternating ---------------------- */
.custom { background: linear-gradient(180deg, var(--upde-cream-dk), var(--upde-cream)); }
.custom .ph, .story .ph { box-shadow: var(--upde-shadow-lg); }

/* --- FAQ ---------------------------------------------------------------- */
.faq details {
  border-bottom-color: color-mix(in srgb, var(--upde-line) 80%, transparent);
  transition: background var(--upde-t-fast) var(--upde-ease);
  padding-inline: .75rem;
  border-radius: var(--upde-radius);
}
.faq details[open] { background: color-mix(in srgb, var(--upde-cream-dk) 55%, transparent); }
.faq summary:hover { color: var(--upde-terra); }

/* --- accessibility ------------------------------------------------------ */
:where(a, button, summary, .sw, .pill, input, select, textarea):focus-visible {
  outline: 2px solid var(--upde-terra);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cat:hover, .tile:hover, .occ:hover, .review:hover, .btn:hover { transform: none; }
  .cat:hover .ph, .tile:hover .ph, .pcard:hover .shot .ph { transform: none; }
}

/* ==========================================================================
   ASTRA + WOOCOMMERCE
   Astra ships its own type and colour, and WooCommerce renders shop, category,
   product, cart and checkout from its own templates. Neither knows about the
   brand, so both get bridged onto the tokens here.
   ========================================================================== */

body, button, input, select, textarea { font-family: var(--upde-font-body); }
body { background: var(--upde-cream); color: var(--upde-ink); }
.ast-container, .site-content, .site { background: transparent; }

h1, h2, h3, h4, h5, h6,
.entry-title, .woocommerce-loop-product__title, .product_title,
.woocommerce-Reviews h2, .cross-sells h2, .up-sells h2, .related h2 {
  font-family: var(--upde-font-display) !important;
  font-weight: 400;
  letter-spacing: -.008em;
}
a { color: var(--upde-terra); }
a:hover { color: var(--upde-terra-dark); }

/* Astra's own header/footer, used on WooCommerce pages */
.ast-primary-header-bar, .site-header {
  background: color-mix(in srgb, var(--upde-cream) 88%, transparent) !important;
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--upde-line);
}
.site-footer, .ast-small-footer, .site-below-footer-wrap, .site-above-footer-wrap {
  background: var(--upde-brown) !important;
  color: #D8CBB8;
}
.site-footer a, .ast-small-footer a { color: #D8CBB8; }
.site-footer a:hover, .ast-small-footer a:hover { color: var(--upde-gold); }

/* --- shop + archive ----------------------------------------------------- */
.woocommerce ul.products { gap: var(--upde-gap); }
.woocommerce ul.products li.product img {
  border-radius: var(--upde-radius-lg);
  box-shadow: var(--upde-shadow-sm);
  transition: transform var(--upde-t-slow) var(--upde-ease-out),
              box-shadow var(--upde-t-base) var(--upde-ease);
}
.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
  box-shadow: var(--upde-shadow-lg);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.0625rem !important;
  margin-top: .85rem;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--upde-terra) !important;
  font-family: var(--upde-font-body);
  font-size: .9375rem;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-size: .8125rem; color: var(--upde-muted);
}

/* --- buttons ------------------------------------------------------------ */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .wc-block-components-button {
  background: var(--upde-terra) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--upde-radius) !important;
  font-family: var(--upde-font-body) !important;
  font-size: .8125rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 400 !important;
  padding: .85rem 1.9rem !important;
  box-shadow: var(--upde-shadow-sm);
  transition: background var(--upde-t-fast) var(--upde-ease),
              transform var(--upde-t-fast) var(--upde-ease),
              box-shadow var(--upde-t-base) var(--upde-ease);
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
  background: var(--upde-terra-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--upde-shadow-lg);
}

/* --- single product ----------------------------------------------------- */
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--upde-radius-lg); }
.woocommerce div.product .product_title { font-size: var(--upde-h1); line-height: 1.05; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border-color: var(--upde-line); border-radius: var(--upde-radius) var(--upde-radius) 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--upde-cream-dk); }
.woocommerce table.variations { border: 0; }
.woocommerce table.variations th.label { font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--upde-muted); font-weight: 500; }
.woocommerce .quantity .qty {
  border: 1px solid var(--upde-line); border-radius: var(--upde-radius);
  padding: .6rem; background: #fff;
}
.woocommerce span.onsale { background: var(--upde-gold); color: var(--upde-brown); }

/* swatches from the variation plugin */
.tawcvs-swatches .swatch {
  box-shadow: 0 0 0 1px var(--upde-line);
  transition: transform var(--upde-t-fast) var(--upde-ease),
              box-shadow var(--upde-t-fast) var(--upde-ease);
}
.tawcvs-swatches .swatch:hover { transform: translateY(-2px); }
.tawcvs-swatches .swatch.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--upde-terra);
}

/* --- cart, checkout, notices -------------------------------------------- */
.woocommerce table.shop_table {
  border: 1px solid var(--upde-line); border-radius: var(--upde-radius-md);
  overflow: hidden; background: #fff;
}
.woocommerce table.shop_table th { font-family: var(--upde-font-body);
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--upde-muted); }
.woocommerce-checkout #payment { background: var(--upde-cream-dk); border-radius: var(--upde-radius-md); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce form .form-row select {
  border: 1px solid var(--upde-line); border-radius: var(--upde-radius);
  padding: .75rem .9rem; background: #fff; font-family: var(--upde-font-body);
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--upde-terra); outline: none; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--upde-terra); background: var(--upde-cream-dk); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--upde-terra); }
.woocommerce-error { border-top-color: #B4482F; }

/* ==========================================================================
   FULL WIDTH
   Astra's own layout options were set to full-width, but the front end kept
   reporting ast-plain-container. Rather than reverse-engineer which of its
   option keys the installed version reads, the container is released here.
   CSS is deterministic; the settings schema changes between Astra versions.

   Sections span the viewport; each .wrap re-establishes the reading measure
   inside, so text never runs edge to edge on a wide monitor.
   ========================================================================== */

.site-content .ast-container,
.ast-plain-container .site-content > .ast-container,
.ast-separate-container .site-content > .ast-container,
.ast-page-builder-template .site-content > .ast-container {
  max-width: 100% !important;
  padding-inline: 0 !important;
  width: 100%;
}
.ast-plain-container.ast-no-sidebar .entry-content > *,
.ast-separate-container .ast-article-single { padding: 0; }
.ast-separate-container .site-main > article,
.ast-plain-container .site-main > article { background: transparent; }
.entry-header, .ast-single-entry-banner { display: none; }   /* our pages carry their own headers */
.entry-content > .hero:first-child { margin-top: 0; }

/* WooCommerce archives and product pages keep a measure - a 14-across product
   grid on a wide monitor is worse, not better. */
.woocommerce .site-content .ast-container,
.woocommerce-page .site-content .ast-container {
  max-width: var(--upde-maxw) !important;
  padding-inline: clamp(1rem, 4vw, 2rem) !important;
  margin-inline: auto;
}

/* ==========================================================================
   CLIENT PHOTOGRAPHY
   Real images replace the placeholder blocks. Everything Linda supplied is
   portrait phone photography, so images are object-fit cover inside fixed
   aspect frames rather than laid out by their own dimensions.
   ========================================================================== */

.hero-img, .ph-img, .story-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cat .ph-img, .tile .ph-img {
  position: absolute; inset: 0;
  transition: transform var(--upde-t-slow) var(--upde-ease-out);
}
.cat:hover .ph-img, .tile:hover .ph-img, .pcard:hover .shot .ph-img { transform: scale(1.06); }

/* Custom-orders and story columns size to their own aspect */
.custom .ph-img { aspect-ratio: 4/3; height: auto; border-radius: var(--upde-radius-lg);
  box-shadow: var(--upde-shadow-lg); }

/* Line art on white - drop the shadow, it would look like a floating sticker,
   and let it sit slightly larger than its column for an editorial feel. */
.story-img {
  height: auto; object-fit: contain; background: transparent;
  box-shadow: none; max-width: 92%; margin-inline: auto;
  mix-blend-mode: multiply;   /* white margin disappears into the cream ground */
}

/* ==========================================================================
   EDITORIAL LAYER
   Structural moves taken from the reference (pfcandleco.com), applied to this
   brand's palette rather than theirs:
     - square everything; radius is 0
     - buttons are an inverted fill that swaps on hover, not a coloured pill
     - heading leading at 0.92, which is what makes large type look set
     - 1px warm rules used as structure
     - per-section colour schemes rather than one ground everywhere
   ========================================================================== */

/* --- buttons: inverted fill, square, swap on hover ---------------------- */
.btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .wc-block-components-button {
  background: var(--upde-brown) !important;
  color: var(--upde-cream) !important;
  border: 1px solid var(--upde-brown) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: .75rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1.05rem 2.25rem !important;
  transition: background var(--upde-t-fast) var(--upde-ease),
              color var(--upde-t-fast) var(--upde-ease),
              border-color var(--upde-t-fast) var(--upde-ease) !important;
}
.btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wc-block-components-button:hover {
  background: var(--upde-terra) !important;
  border-color: var(--upde-terra) !important;
  color: var(--upde-cream) !important;
  transform: none !important;          /* the lift belonged to the old style */
  box-shadow: none !important;
}
.btn:active { transform: none; }

/* Outline variant: same geometry, reversed weight */
.btn-ghost {
  background: transparent !important;
  color: var(--upde-brown) !important;
  border: 1px solid var(--upde-brown) !important;
  backdrop-filter: none;
}
.btn-ghost:hover {
  background: var(--upde-brown) !important;
  color: var(--upde-cream) !important;
}

/* On dark and photographic grounds the fill inverts the other way */
.hero .btn, .reviews .btn, .co-contact .btn, .btn-light,
.cat .btn, .tile .btn {
  background: var(--upde-cream) !important;
  color: var(--upde-brown) !important;
  border-color: var(--upde-cream) !important;
}
.hero .btn:hover, .reviews .btn:hover, .co-contact .btn:hover, .btn-light:hover,
.cat .btn:hover, .tile .btn:hover {
  background: var(--upde-terra) !important;
  border-color: var(--upde-terra) !important;
  color: var(--upde-cream) !important;
}

/* --- type: tight leading is the whole trick ----------------------------- */
h1, h2, h3, .hero h1, .section-head h2, .cat-label, .pdp h1,
.woocommerce div.product .product_title {
  line-height: var(--upde-lh-heading);
  letter-spacing: -.018em;
}
.hero h1, .page-head h1, .shop-head h1, .co-hero h1 {
  line-height: var(--upde-lh-display);
  letter-spacing: -.025em;
}
body, .prose p, .lede { line-height: var(--upde-lh-body); }

/* Eyebrows become small caps rules rather than coloured labels */
.eyebrow {
  font-size: .6875rem;
  color: var(--upde-muted);
  display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::after {
  content: ""; width: 42px; height: 1px; background: var(--upde-grid);
}
.reviews .eyebrow, .hero .eyebrow, .co-contact .eyebrow { color: rgba(255,255,255,.7); }
.reviews .eyebrow::after, .hero .eyebrow::after, .co-contact .eyebrow::after {
  background: rgba(255,255,255,.3);
}

/* --- gridlines as structure --------------------------------------------- */
section, .trust, .custom, .questions { border-top: 1px solid var(--upde-grid); }
.reviews, .co-contact, .hero { border-top: 0; }
.section-head { border-bottom: 1px solid var(--upde-grid); padding-bottom: 1.25rem; }
.reviews .section-head { border-bottom-color: rgba(201,169,110,.25); }

/* --- surfaces: square, flat, separated by rules not shadows ------------- */
.cat, .tile, .occ, .review, .pcard .shot,
.woocommerce ul.products li.product img,
.woocommerce div.product .woocommerce-product-gallery img,
.custom .ph-img, .pdp-gallery .main, .pdp-gallery .thumb {
  border-radius: 0 !important;
}
.cat, .tile { box-shadow: none; }
.cat:hover, .tile:hover, .occ:hover, .review:hover { transform: none; box-shadow: none; }
.occ {
  border: 1px solid var(--upde-grid);
  box-shadow: none;
  background: transparent;
}
.occ:hover { border-color: var(--upde-brown); background: var(--upde-cream-dk); }
.review { border-radius: 0; box-shadow: none; border-color: rgba(201,169,110,.24); }
.pcard .shot, .woocommerce ul.products li.product img { box-shadow: none !important; }
.pcard:hover .shot { box-shadow: none; }
.trust-item .ico {
  border-radius: 0; box-shadow: none;
  border: 1px solid var(--upde-grid); background: transparent;
}
.trust-item:hover .ico { transform: none; box-shadow: none; border-color: var(--upde-brown); }
.snum { border-radius: 0; background: var(--upde-brown); box-shadow: none; }
.sw { border-radius: 0; }

/* Hover now reads through the image, not the frame */
.cat:hover .ph-img, .tile:hover .ph-img,
.woocommerce ul.products li.product:hover img { transform: scale(1.03); }

/* --- alternating section grounds ---------------------------------------- */
.trust { background: var(--upde-cream-dk); border-block: 1px solid var(--upde-grid); }
.custom { background: var(--upde-cream-dk); }
.questions { background: var(--upde-cream-dk); }
.co-contact { background: var(--upde-brown); }

/* --- links: bottom rule rather than colour swap ------------------------- */
.prose a, .pdp-meta a {
  color: var(--upde-brown);
  text-decoration: none;
  border-bottom: 1px solid var(--upde-terra);
  padding-bottom: 1px;
  transition: border-color var(--upde-t-fast) var(--upde-ease),
              color var(--upde-t-fast) var(--upde-ease);
}
.prose a:hover, .pdp-meta a:hover { color: var(--upde-terra); border-color: var(--upde-brown); }

/* --- header ------------------------------------------------------------- */
header.site, .ast-primary-header-bar, .site-header {
  border-bottom: 1px solid var(--upde-grid) !important;
}
header.site nav a { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.search { border-radius: 0; }
.search button { border-radius: 0; background: var(--upde-brown); color: var(--upde-cream); }
.announce { background: var(--upde-brown); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; }

/* --- forms -------------------------------------------------------------- */
.field input, .field textarea, .field select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce .quantity .qty, .qty, .pill, .summary, .cart-table, .shop_table {
  border-radius: 0 !important;
}
.field input:focus, .field textarea:focus { border-color: var(--upde-brown); }

/* ==========================================================================
   MOBILE
   Most traffic to a handmade shop shared over Instagram arrives on a phone.
   The live header and footer are Astra's, so Astra's mobile menu is what gets
   styled here rather than a second one being built.
   ========================================================================== */

/* Never let anything push the page sideways. Full-bleed sections plus wide
   images make this easy to break and hard to notice on a desktop. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, table { max-width: 100%; }

@media (max-width: 900px) {
  :root {
    --upde-section-y: clamp(3rem, 8vw, 4.5rem);
    --upde-gap: 1rem;
  }
  .wrap { padding-inline: 1.15rem; }

  /* Long-form measure tightens rather than running to the screen edge */
  .prose, .faq { max-width: 100%; }
  .prose p, .prose li { font-size: 1rem; }          /* svh avoids the iOS toolbar jump */

  .section-head .link { float: none; display: block; margin: .75rem 0 0; }
}

@media (max-width: 640px) {
  /* Two across, not one. On a phone a single column of category cards means
     a lot of scrolling to see four things. */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .cat { aspect-ratio: 1; }
  .cat-label { font-size: 1rem; padding-inline: .5rem; }
  .cat .btn { padding: .7rem 1.1rem !important; font-size: .625rem !important; }

  .mosaic { grid-template-columns: 1fr 1fr; grid-template-areas: "big big" "a b" "c d"; }
  .tile.big { min-height: 260px; }
  .tile { min-height: 150px; }
  .tile-body { padding: .8rem; }
  .tile-body h3 { font-size: 1rem; }
  .tile-body .btn { padding: .6rem 1rem !important; font-size: .625rem !important; }

  .trust-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .occ-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .occ { padding: 1.25rem .75rem; }
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .review-grid { grid-template-columns: 1fr; }

  .qbtns { flex-direction: column; align-items: stretch; }
  .qbtns .btn { text-align: center; }

  .eyebrow::after { display: none; }    /* the rule crowds a narrow column */
}

/* --- touch targets ------------------------------------------------------
   44px minimum on anything tappable. Footer and nav links are the usual
   offenders: small text with tight line-height gives a ~20px target. */
@media (hover: none), (max-width: 900px) {
  .btn, .woocommerce a.button, .woocommerce button.button,
  .wc-block-components-button { min-height: 48px; display: inline-flex;
    align-items: center; justify-content: center; }
  footer.site li a, .site-footer li a, .ast-small-footer a,
  header.site nav a, .shop-bar a, .announce a {
    display: inline-block; padding-block: .6rem; min-height: 44px;
    line-height: 1.6;
  }
  .faq summary { min-height: 48px; align-items: center; }
  .qty button { min-width: 44px; min-height: 44px; }
  .sw { width: 42px; height: 42px; }
  .pill { min-height: 44px; display: inline-flex; align-items: center; }
  .remove, .cart-item .remove { padding-block: .5rem; display: inline-block; }
}

/* --- iOS zoom-on-focus --------------------------------------------------
   Safari zooms the viewport when a focused input is under 16px. Every form on
   the site had 15px inputs. */
@media (max-width: 900px) {
  input, select, textarea,
  .field input, .field textarea, .field select,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row textarea,
  .woocommerce form .form-row select,
  .search input, .woocommerce .quantity .qty {
    font-size: 16px !important;
  }
}

/* --- WooCommerce on small screens --------------------------------------- */
@media (max-width: 767px) {
  .woocommerce ul.products[class*="columns-"] li.product { width: 48% !important; margin: 0 4% 2rem 0; }
  .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n) { margin-right: 0; }

  /* The cart table becomes stacked rows; a 5-column table on a phone is
     unreadable and forces horizontal scrolling. */
  .woocommerce table.shop_table_responsive tr,
  .woocommerce-page table.shop_table_responsive tr { display: block; border-bottom: 1px solid var(--upde-grid); }
  .woocommerce table.shop_table_responsive td,
  .woocommerce-page table.shop_table_responsive td {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; text-align: right; border: 0; padding: .6rem 0;
  }
  .woocommerce table.shop_table_responsive td::before { font-weight: 400; color: var(--upde-muted); }

  .woocommerce div.product .product_title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .woocommerce #content div.product div.images,
  .woocommerce div.product div.images { margin-bottom: 1.5rem; }
  .woocommerce div.product form.cart .button { width: 100%; }

  .cart-layout, .co-cols, .contact-grid, .pdp { grid-template-columns: 1fr !important; }
  .summary { position: static; }
}

/* --- Astra's mobile menu ------------------------------------------------ */
.ast-mobile-menu-buttons-minimal .menu-toggle,
.ast-mobile-menu-trigger-minimal, .menu-toggle {
  color: var(--upde-brown) !important;
  background: transparent !important;
  min-width: 44px; min-height: 44px;
}
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-wrap .main-header-bar {
  background: var(--upde-cream) !important;
}
.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
  font-family: var(--upde-font-body);
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--upde-brown) !important;
  border-bottom: 1px solid var(--upde-grid);
  padding-block: 1rem;
}
.ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link:hover { color: var(--upde-terra) !important; }

/* ==========================================================================
   SWATCH COLOURS
   The swatches plugin renders `style="background:;"` - it reads a term-meta
   key other than the product_attribute_color this theme registers, and never
   substitutes its own $r,$g,$b placeholder. Colouring by the term slug class
   it does emit is deterministic and does not depend on the plugin's storage.

   PROVISIONAL. The recovered catalogue recorded colour NAMES only, never what
   they look like. Linda must confirm the real wax colours; a photo of the six
   side by side settles it.
   ========================================================================== */

.tawcvs-swatches .swatch-bean       { background: #6F4E37 !important; }
.tawcvs-swatches .swatch-white-sage { background: #D6D9C8 !important; }
.tawcvs-swatches .swatch-lilac      { background: #C8A9D4 !important; }
.tawcvs-swatches .swatch-brown      { background: #7A5236 !important; }
.tawcvs-swatches .swatch-pink       { background: #E8B4C2 !important; }
.tawcvs-swatches .swatch-baby-blue  { background: #A9C9E2 !important; }
.tawcvs-swatches .swatch { text-indent: -9999px; overflow: hidden; }
.tawcvs-swatches .swatch-item-wrapper { display: inline-block; }

/* ==========================================================================
   CONTRAST
   Measured, not eyeballed. Button text is 12px uppercase, which WCAG counts as
   normal text and so needs 4.5:1 - the old hover state (cream on #C1714F) was
   3.53:1 and failed.

   Rule: --upde-terra is a FILL colour for large areas only. Anything carrying
   text, or used as text, takes --upde-terra-dark.
   ========================================================================== */

.btn:hover, .btn:focus-visible,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.wc-block-components-button:hover,
.hero .btn:hover, .reviews .btn:hover, .co-contact .btn:hover,
.btn-light:hover, .cat .btn:hover, .tile .btn:hover {
  background: var(--upde-terra-dark) !important;
  border-color: var(--upde-terra-dark) !important;
  color: var(--upde-cream) !important;   /* 5.19:1 */
}

/* Terracotta as text anywhere becomes the accessible variant */
a, .prose a, .pdp-meta a, .section-head .link, .eyebrow,
.pcard:hover h3, .faq summary:hover, .co-handle,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price,
.contact-aside .handle, .story p[style] {
  color: var(--upde-terra-dark);
}
.prose a, .pdp-meta a { border-bottom-color: var(--upde-terra-dark); }
.section-head .eyebrow { color: var(--upde-terra-dark); }

/* On the dark grounds, gold and cream already clear AA - keep them */
.reviews a, .co-contact a, .reviews .link { color: var(--upde-gold); }
.reviews .stars { color: var(--upde-gold); }

/* Focus is a visible ring everywhere, not just on links */
:where(a, button, summary, input, select, textarea, .sw, .pill, [tabindex]):focus-visible {
  outline: 3px solid var(--upde-terra-dark);
  outline-offset: 2px;
}

/* ==========================================================================
   MOBILE, DEEPER PASS
   ========================================================================== */

@media (max-width: 767px) {

  /* --- product page: keep buying possible without scrolling back up ------
     On a phone the add-to-cart sits below the gallery, options and
     description. A persistent bar keeps the primary action in reach. */
  .woocommerce.single-product form.cart {
    position: sticky; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--upde-cream) 94%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--upde-grid);
    margin-inline: calc(50% - 50vw); padding: .9rem clamp(1rem, 4vw, 1.5rem);
    display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
  }
  .woocommerce.single-product form.cart .quantity { flex: 0 0 auto; }
  .woocommerce.single-product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
  .woocommerce.single-product form.cart .variations { flex: 1 1 100%; }

  /* Variation selects stack and fill the row rather than sitting in a table */
  .woocommerce div.product table.variations,
  .woocommerce div.product table.variations tbody,
  .woocommerce div.product table.variations tr,
  .woocommerce div.product table.variations th,
  .woocommerce div.product table.variations td { display: block; width: 100%; }
  .woocommerce div.product table.variations th.label { padding: 0 0 .4rem; }
  .woocommerce div.product table.variations td.value { padding: 0 0 1rem; }
  .woocommerce div.product .reset_variations { display: inline-block; margin-top: .5rem; }

  /* Gallery: one image, swipeable, no thumbnail strip eating the fold */
  .woocommerce div.product .flex-control-thumbs { gap: .4rem; }
  .woocommerce div.product .flex-control-thumbs li { width: 22%; margin: 0; }

  /* --- hero: the badge and headline were competing for the same space --- */

  /* --- sections: tighten the rhythm so the page is not endless ---------- */
  .section-head { margin-bottom: 1.5rem; padding-bottom: .9rem; }
  .steps .step { text-align: left; display: grid;
    grid-template-columns: 52px 1fr; gap: 0 1rem; align-items: start; }
  .steps .snum { margin: 0; width: 46px; height: 46px; font-size: 1.3rem; }
  .steps .step h3 { grid-column: 2; margin-top: .35rem; }
  .steps .step p { grid-column: 2; }

  /* --- contact + checkout forms ---------------------------------------- */
  .row2 { grid-template-columns: 1fr; }
  .contact-aside { margin-top: 1.5rem; }

  /* --- footer: columns stack, links get room --------------------------- */
  .site-footer .ast-builder-grid-row,
  .footer-grid { grid-template-columns: 1fr !important; gap: 2rem; }
}

/* --- landscape phones: the hero should not eat the whole screen --------- */
@media (max-width: 900px) and (orientation: landscape) {
  .hero { min-height: 100svh; }
}

/* --- coarse pointers: no hover-dependent affordances ------------------- */
@media (hover: none) {
  .cat .ph-img, .tile .ph-img,
  .woocommerce ul.products li.product img { transform: none !important; }
  header.site nav a::after { transform: scaleX(1); opacity: .35; }
  /* Anything that only appeared on hover must be visible by default */
  .cat .btn, .tile .btn { opacity: 1; }
}

/* --- respect the notch on full-bleed dark sections --------------------- */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(1.15rem, env(safe-area-inset-left));
    padding-right: max(1.15rem, env(safe-area-inset-right));
  }
  @media (max-width: 767px) {
    .woocommerce.single-product form.cart {
      padding-bottom: max(.9rem, env(safe-area-inset-bottom));
    }
  }
}

/* ==========================================================================
   OVERLAY LEGIBILITY  (fixes text going dark on photographic tiles)
   Astra colours headings from .entry-content with higher specificity than the
   component rules, so tile and category labels were inheriting dark ink over
   photographs. These force white and give it something to sit on.
   ========================================================================== */

.entry-content .cat-label,
.entry-content .tile-body,
.entry-content .tile-body h3,
.entry-content .tile-body .eyebrow,
.entry-content .tile-body p,
.cat-label, .tile-body, .tile-body h3, .tile-body p, .tile-body .eyebrow {
  color: #fff !important;
  text-shadow: 0 1px 16px rgba(20, 14, 8, .55), 0 1px 3px rgba(20, 14, 8, .4);
}
.entry-content .tile-body .eyebrow, .tile-body .eyebrow { color: rgba(255,255,255,.82) !important; }
.tile-body .eyebrow::after { background: rgba(255,255,255,.45); }

/* Stronger, more even scrims. The old gradient faded out too high, leaving
   labels sitting on bare photograph. */
.cat::after {
  background: linear-gradient(to top, rgba(28,20,12,.62) 0%, rgba(28,20,12,.28) 55%, rgba(28,20,12,.18) 100%);
}
.cat:hover::after {
  background: linear-gradient(to top, rgba(28,20,12,.7) 0%, rgba(28,20,12,.38) 55%, rgba(28,20,12,.26) 100%);
}
.tile::after {
  background: linear-gradient(to top, rgba(28,20,12,.78) 0%, rgba(28,20,12,.34) 52%, rgba(28,20,12,.12) 100%);
}

/* Buttons over photography: solid, not translucent, so they read at any size */
.cat .btn, .tile .btn {
  background: var(--upde-cream) !important;
  color: var(--upde-brown) !important;
  border-color: var(--upde-cream) !important;
  text-shadow: none !important;
  box-shadow: 0 2px 14px rgba(20,14,8,.28);
}
.cat .btn:hover, .tile .btn:hover {
  background: var(--upde-terra-dark) !important;
  border-color: var(--upde-terra-dark) !important;
  color: var(--upde-cream) !important;
}

/* Category cards need room for label AND button without crowding */
.cat { justify-content: flex-end; padding-bottom: 1.6rem; gap: 1rem; }
.cat-label { margin-bottom: .2rem; }

/* ==========================================================================
   HEADER  (logo removed from the nav per client)
   ========================================================================== */

.site-header .custom-logo-link,
.ast-primary-header-bar .custom-logo-link,
.site-logo-img, .astra-logo-svg { display: none !important; }

/* The wordmark carries the header instead, set in the brand serif */
.site-title, .ast-site-title-wrap .site-title {
  display: block !important;
  font-family: var(--upde-font-display) !important;
  font-size: clamp(1.15rem, 2vw, 1.6rem) !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  line-height: 1.1 !important;
  margin: 0;
}
.site-title a { color: var(--upde-brown) !important; text-decoration: none; }
.site-title a:hover { color: var(--upde-terra-dark) !important; }
.site-description, .ast-site-description { display: none !important; }

/* Nav: brand type, not Astra's default blue links */
.main-header-menu .menu-link, .ast-header-navigation-wrap .menu-link,
.main-navigation a {
  font-family: var(--upde-font-body) !important;
  font-size: .75rem !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--upde-brown) !important;
}
.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
  color: var(--upde-terra-dark) !important;
}


/* ==========================================================================
   POPULAR ITEMS: even 2x2
   The mosaic (one tall tile plus three) left a hole bottom-right once the
   fourth small tile was removed. Four equal tiles read cleaner and give each
   category the same weight.
   ========================================================================== */

.mosaic {
  grid-template-columns: 1fr 1fr;
  grid-template-areas: none;
  gap: var(--upde-gap);
}
.mosaic .tile {
  grid-area: auto !important;
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.mosaic .tile.big { grid-area: auto !important; min-height: 0; }

@media (max-width: 640px) {
  .mosaic { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .mosaic .tile { aspect-ratio: 1; }
  .mosaic .tile-body { padding: .75rem; }
  .mosaic .tile-body h3 { font-size: .95rem; }
  .mosaic .tile-body .eyebrow { display: none; }
  .mosaic .tile .btn { padding: .55rem .8rem !important; font-size: .5625rem !important; }
}

/* ==========================================================================
   HERO, CORRECTED
   The two-column grid was receiving four children (eyebrow, headline, button,
   badge) and alternating them across the columns. The copy is now one child.
   ========================================================================== */
/* the ground is dark enough on its own; keep the paper readable */

@media (max-width: 860px) {
}

/* ==========================================================================
   HERO — single definition
   Previously nine competing .hero-badge rules had accumulated from successive
   fixes, several inside media queries, and the cascade became unpredictable.
   This is the only place the hero is defined.

   Ground is a flat green sampled from the logo artwork. The paper texture was
   tried as an image and rejected: cropping and scaling it produced visible
   mirroring that read as wallpaper.
   ========================================================================== */

.hero {
  position: relative;
  min-height: clamp(460px, 68vh, 720px);
  display: flex;
  align-items: center;                     /* was flex-end, which sank content */
  background:
    radial-gradient(120% 90% at 72% 45%, rgba(255,255,255,.06) 0%, transparent 55%),
    linear-gradient(165deg, #4A5427 0%, var(--upde-forest) 45%, #333C25 100%);
  overflow: hidden;
}
.hero::after { content: none; }             /* no scrim needed on a flat ground */
.hero-img { display: none; }                /* texture image retired */

.hero-inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 6vw, 4rem); }

.hero-inner .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.hero-copy { min-width: 0; }
.hero .eyebrow { color: rgba(255,255,255,.72); }
.hero h1 {
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: var(--upde-lh-display);
  letter-spacing: -.025em;
  max-width: 13ch;
  margin: .55rem 0 1.75rem;
}
.hero-copy .btn { display: inline-flex; width: auto; }

/* Badge: centred in its own column, never over the copy */
.hero-badge {
  position: static;
  transform: none;
  justify-self: center;
  align-self: center;
  width: clamp(170px, 18vw, 250px);
  aspect-ratio: 1;
  border: 1.5px solid rgba(255,255,255,.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  font-family: var(--upde-font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: .04em;
  box-shadow: none;
  backdrop-filter: none;
}

@media (max-width: 860px) {
  /* Compact. The desktop min-height left a large empty band above the copy on
     a phone, and the hero is an introduction, not a destination. */
  .hero { min-height: 0; }
  .hero-inner { padding-block: clamp(1.75rem, 7vw, 2.75rem); }
  .hero-inner .wrap {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    justify-items: start;
  }
  .hero-badge {
    order: -1;                       /* wordmark sits above the headline */
    justify-self: start;
    width: clamp(96px, 24vw, 128px);
    font-size: .8125rem;
    line-height: 1.25;
    margin-bottom: .25rem;
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(1.9rem, 7.4vw, 2.6rem);
    margin: .35rem 0 1.25rem;
  }
  .hero .eyebrow { font-size: .625rem; }
  .hero-copy .btn { padding: .9rem 1.6rem !important; }
}

/* ==========================================================================
   FOOTER  (rendered by upde_footer() in functions.php)
   ========================================================================== */

.upde-footer {
  background: var(--upde-brown);
  color: #D8CBB8;
  padding: clamp(3rem, 6vw, 5rem) 0 0;
  font-size: .8125rem;
}
.upde-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}
.upde-footer .brandname {
  font-family: var(--upde-font-display);
  font-size: 1.3rem; color: #fff; margin-bottom: .7rem;
}
.upde-footer-brand p { margin: 0; max-width: 34ch; opacity: .8; line-height: 1.7; }
.upde-footer h4 {
  font-family: var(--upde-font-body) !important;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--upde-gold) !important; margin: 0 0 1rem; font-weight: 500;
}
.upde-footer-menu { list-style: none; margin: 0; padding: 0; }
.upde-footer-menu li { margin-bottom: .55rem; }
.upde-footer-menu a {
  color: #D8CBB8 !important; text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color var(--upde-t-fast) var(--upde-ease),
              border-color var(--upde-t-fast) var(--upde-ease);
}
.upde-footer-menu a:hover { color: var(--upde-gold) !important; border-bottom-color: var(--upde-gold); }
.upde-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding: 1.25rem 0; font-size: .75rem; opacity: .65;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
/* Astra's own copyright bar sits below ours; keep it quiet */
.site-below-footer-wrap { background: var(--upde-brown) !important; }
.ast-footer-copyright { font-size: .7rem; opacity: .5; }

@media (max-width: 860px) {
  .upde-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  .upde-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .upde-footer-grid { grid-template-columns: 1fr; }
}

/* Astra's own copyright bar duplicates ours and carries a "Powered by Astra"
   credit. The filter for it is unreliable across Astra versions; hiding the
   wrapper is deterministic. */
.site-below-footer-wrap, .ast-footer-copyright, .site-primary-footer-wrap { display: none !important; }

/* --- cart in the nav ----------------------------------------------------- */
.menu-item.upde-cart > .menu-link { position: relative; }
.upde-cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; margin-left: .4rem; padding: 0 4px;
  background: var(--upde-terra-dark); color: var(--upde-cream);
  border-radius: 999px;               /* the one round thing; it reads as a count */
  font-size: .5625rem; font-weight: 500; letter-spacing: 0; line-height: 1;
  vertical-align: middle;
}

/* --- category cards: centre the label and button ------------------------
   They were bottom-aligned, which reads as a caption sitting under a photo.
   Centred, the card reads as one unit and the scrim has something to do. */
.cat {
  justify-content: center;
  align-items: center;
  padding-bottom: 0;
  gap: 1.15rem;
  text-align: center;
}
.cat-label { margin: 0; }
/* Even scrim rather than bottom-weighted, now that content sits mid-card */
.cat::after {
  background: linear-gradient(to bottom, rgba(28,20,12,.34) 0%, rgba(28,20,12,.46) 50%, rgba(28,20,12,.38) 100%);
}
.cat:hover::after {
  background: linear-gradient(to bottom, rgba(28,20,12,.42) 0%, rgba(28,20,12,.56) 50%, rgba(28,20,12,.46) 100%);
}

/* ==========================================================================
   HERO ARTWORK
   The wordmark is composited into the supplied artwork, so the circle and the
   type can never drift apart as the viewport changes - which is exactly what
   went wrong when the badge was CSS positioned over a background image.

   The hero ground is #3A470F, sampled from the artwork's own border, so the
   image sits on matching green and its edges are invisible. Nothing is
   cropped and there is no seam to hide.
   ========================================================================== */

.hero {
  background:
    radial-gradient(130% 100% at 50% 40%, rgba(255,255,255,.05) 0%, transparent 60%),
    #3A470F;
}
.hero::after { content: none; }

.hero-mark {
  display: block;
  justify-self: center;
  align-self: center;
  width: 100%;
  max-width: 620px;
  height: auto;
  /* the artwork's own ground matches the hero, so no border or shadow */
}

@media (max-width: 860px) {
  .hero-inner { padding-block: clamp(1.5rem, 6vw, 2.5rem); }
  .hero-mark { order: -1; max-width: 100%; margin-inline: calc(50% - 50vw); width: 100vw; }
  .hero-copy { justify-self: start; }
  .hero h1 { font-size: clamp(1.9rem, 7.2vw, 2.5rem); margin: .35rem 0 1.15rem; }
}



/* ==========================================================================
   HERO ARTWORK
   Two different compositions, switched by media query rather than srcset.
   srcset chooses by resolution, so a high-DPR phone could pull the desktop
   artwork into the mobile layout - wrong mechanism for art direction. A
   background-image is only fetched when its rule applies, so neither device
   downloads the other's file.

   Desktop: the rebuilt full-bleed sheet, ring right of centre, copy on the
            clear left third.
   Mobile:  the supplied card at its own 1.6:1 ratio, in flow, copy beneath.
   ========================================================================== */

.hero {
  position: relative;
  background: #3A470F;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 62vh, 680px);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: url("https://unpedacitodeella.com/wp-content/uploads/2026/08/hero-desktop.webp") center / cover no-repeat;
}
.hero::after { content: none; }
.hero-inner { position: relative; z-index: 2; width: 100%;
  padding-block: clamp(2.5rem, 6vw, 4rem); }
.hero-inner .wrap { display: block; }
.hero-copy { max-width: 38%; }
.hero h1 { color: #fff; max-width: 12ch;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: var(--upde-lh-display); letter-spacing: -.025em;
  margin: .55rem 0 1.75rem; }
.hero .eyebrow { color: rgba(255,255,255,.72); }
.hero-copy .btn { display: inline-flex; width: auto; }

@media (max-width: 1100px) { .hero-copy { max-width: 46%; } }

@media (max-width: 860px) {
  .hero { display: block; min-height: 0; }
  /* the card sits in flow at its own ratio; nothing is cropped */
  .hero::before {
    position: static;
    display: block;
    aspect-ratio: 1586 / 992;
    background: url("https://unpedacitodeella.com/wp-content/uploads/2026/08/hero-mobile.jpg") center / cover no-repeat;
  }
  .hero-inner { padding-block: clamp(1.5rem, 6vw, 2.25rem) clamp(2rem, 8vw, 3rem); }
  .hero-copy { max-width: 100%; }
  .hero h1 { max-width: 100%; font-size: clamp(1.95rem, 7.4vw, 2.6rem);
    margin: .35rem 0 1.25rem; }
}

/* ==========================================================================
   MOBILE TYPE SCALE
   Several sizes were set at 12-13px, which reads fine on a desktop at arm's
   length and is genuinely small on a phone held closer but at a lower angle.
   Raised as a scale rather than piecemeal, so relative hierarchy is kept:
   body 17px, secondary 15px, eyebrows 12px, buttons 13px.
   ========================================================================== */

@media (max-width: 860px) {
  :root {
    --upde-body: 1.0625rem;      /* 17px */
    --upde-h3: 1.25rem;
  }

  body, .entry-content, .prose p, .prose li, .lede {
    font-size: 1.0625rem;
    line-height: 1.65;
  }
  .prose p, .prose li { margin-bottom: 1.15rem; }

  /* eyebrows and other all-caps labels: small caps need more size, not less,
     because letter-spacing already costs legibility */
  .eyebrow, .trust-item p, .shop-bar, .shop-bar a, .shop-bar select {
    font-size: .75rem !important;
    letter-spacing: .12em;
  }

  .btn, .woocommerce a.button, .woocommerce button.button,
  .woocommerce input.button, .wc-block-components-button {
    font-size: .8125rem !important;
    padding: 1rem 1.75rem !important;
  }
  .cat .btn, .tile .btn {
    font-size: .75rem !important;
    padding: .8rem 1.35rem !important;
  }

  .section-head h2 { font-size: clamp(1.75rem, 6.6vw, 2.3rem); }
  .cat-label { font-size: 1.2rem; }
  .mosaic .tile-body h3 { font-size: 1.1rem; }
  .occ h3 { font-size: 1.05rem; }
  .occ p { font-size: .8125rem; }
  .step h3 { font-size: 1.15rem; }
  .step p { font-size: .9375rem; }

  .trust-item h4 { font-size: 1.05rem; }

  .review p { font-size: 1rem; line-height: 1.7; }
  .review h4 { font-size: 1.1rem; }
  .review cite { font-size: .8125rem; }

  .faq summary { font-size: 1.15rem; }
  .faq p { font-size: 1rem; line-height: 1.65; }

  /* product and shop */
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.05rem !important;
  }
  .woocommerce ul.products li.product .price,
  .woocommerce div.product p.price, .woocommerce div.product span.price {
    font-size: 1rem !important;
  }
  .pcard h3 { font-size: 1.05rem; }
  .pcard .price { font-size: .9375rem; }
  .pcard .opts { font-size: .75rem; }

  /* footer was 13px throughout */
  .upde-footer { font-size: .9375rem; }
  .upde-footer h4 { font-size: .75rem; }
  .upde-footer-brand p { line-height: 1.75; }
  .upde-footer-bottom { font-size: .8125rem; }

  /* forms already forced to 16px to stop iOS zoom; labels follow */
  .field label { font-size: .75rem; }
}

/* ==========================================================================
   WOOCOMMERCE BLOCKS  (cart, checkout, and any block-based product listing)
   These render with alignfull/alignwide, which apply negative inline margins
   to break out of the content column. That is correct for a homepage banner
   and wrong for a form: combined with the container padding removed for the
   full-bleed homepage, the block lost its own gutters and copy ran off the
   left edge of the screen.
   ========================================================================== */

.woocommerce-page .entry-content .alignfull,
.woocommerce-page .entry-content .alignwide,
.woocommerce-cart .entry-content .alignfull,
.woocommerce-checkout .entry-content .alignfull,
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  margin-inline: auto !important;
  width: 100% !important;
  max-width: var(--upde-maxw) !important;
  padding-inline: clamp(1rem, 4vw, 2rem) !important;
  box-sizing: border-box;
}

/* Block buttons carry their own theme colour - brand them to match the rest */
.wp-block-button__link,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background: var(--upde-brown) !important;
  color: var(--upde-cream) !important;
  border: 1px solid var(--upde-brown) !important;
  border-radius: 0 !important;
  font-family: var(--upde-font-body) !important;
  font-size: .8125rem !important;
  font-weight: 400 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1rem 1.75rem !important;
  box-shadow: none !important;
  transition: background var(--upde-t-fast) var(--upde-ease),
              border-color var(--upde-t-fast) var(--upde-ease);
}
.wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background: var(--upde-terra-dark) !important;
  border-color: var(--upde-terra-dark) !important;
  color: var(--upde-cream) !important;
}
.wc-block-components-button.is-link { color: var(--upde-terra-dark) !important; }

/* Block typography and fields */
.wc-block-components-title, .wp-block-woocommerce-cart h2,
.wc-block-components-checkout-step__title {
  font-family: var(--upde-font-display) !important;
  font-weight: 400 !important;
}
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea {
  border-radius: 0 !important;
  border-color: var(--upde-line) !important;
}
.wc-block-components-product-name { color: var(--upde-brown) !important; }
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount { color: var(--upde-terra-dark) !important; }

@media (max-width: 767px) {
  .woocommerce-page .entry-content .alignfull,
  .woocommerce-page .entry-content .alignwide,
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout {
    padding-inline: 1.15rem !important;
  }
  /* the floating cookie and accessibility widgets sit over the submit button */
  .wc-block-cart__submit-container,
  .wc-block-components-checkout-place-order-button { margin-bottom: 4.5rem; }
}