/* Shared chrome for the SAURO shop pages (shop.html + each category page):
   palette, header bar, full-bleed hero, cart drawer, and footer bar. Pulled
   into its own file once the shop grew past a single page, so every shop
   page stays in sync instead of six copies of the same CSS drifting apart.

   Layout modeled on rodencrater.com: a solid white/cream header bar (logo
   left, nav + a filled button right) sitting directly on top of a full-bleed
   dramatic photo, with a matching solid footer bar — rather than the
   earlier version's floating centered title over a soft abstract gradient. */
:root{
  /* a lighter, pastel-earth palette for the shop specifically — the rest
     of the site is deliberately dark/void, but the header/footer bars here
     lean into soft desert-dawn tones (blush, clay, sage, cream) instead of
     matching the main site's void black */
  --cream: #f4ecdf;
  --blush: #e9c7b8;
  --clay: #cf9d7c;
  --sage: #cdd0b4;
  --ink: #3a2e22;
  --umber: #6b5744;
}
html,body{margin:0;padding:0;background:var(--ink);min-height:100%;}
body{
  font-family:'EB Garamond', serif;
  min-height:100vh;
}

/* ============== HEADER: transparent, sits directly on the video —========
   no bar, no fill, nothing but the video itself as the page's background.
   Text carries its own shadow for legibility instead of a solid backdrop. */
.shop-header{
  position:fixed;
  top:0; left:0; right:0;
  min-height:104px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  /* sides brought in from the edges — logo and nav now sit with real
     breathing room instead of crowding the browser edge */
  padding:16px 64px;
  box-sizing:border-box;
  flex-wrap:wrap;
}
.shop-header-left{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.shop-mark{
  /* centered on the header itself, not just .shop-header-left — .shop-header
     is position:fixed, so it's the containing block this positions against */
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  font-family:'EB Garamond', serif;
  font-weight:600;
  font-size:clamp(26px, 3.2vw, 37px);
  letter-spacing:.2em;
  line-height:1;
  color:var(--cream);
  text-shadow:0 2px 18px rgba(10,9,8,0.65);
  text-decoration:none;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .25s ease;
}
.shop-mark:hover{ color:var(--blush); }

/* index.html's own hero mark — the shop header/nav bar is gone from that
   page entirely (no cart, no category links yet), so SAURO stands alone as
   a big centered wordmark instead of living in a compact top bar. Plain
   text, not a link — Bodoni's sharp thick/thin contrast reads as an actual
   fashion-label wordmark rather than the body copy's book-serif EB Garamond. */
.home-mark{
  position:fixed;
  left:50%; top:45%;
  transform:translate(-50%, -50%);
  font-family:'Bodoni Moda', serif;
  font-weight:600;
  font-size:clamp(42px, 8vw, 104px);
  letter-spacing:.2em;
  line-height:1;
  color:var(--cream);
  text-shadow:0 2px 24px rgba(10,9,8,0.65), 0 0 60px rgba(10,9,8,0.35);
  text-transform:uppercase;
  white-space:nowrap;
  z-index:2;
}

.shop-header-nav{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.cart-link{
  /* outlined rather than a solid fill — a button still needs to read as
     clickable, but a filled block would be exactly the "other color" this
     page is trying to avoid */
  display:flex; align-items:center;
  gap:8px;
  font-family:'EB Garamond', serif;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cream);
  background:rgba(10,9,8,0.22);
  border:1px solid rgba(244,236,223,0.55);
  padding:10px 18px;
  cursor:pointer;
  transition:background-color .25s ease, border-color .25s ease;
  z-index:22;
}
.cart-link:hover{ background:rgba(10,9,8,0.4); border-color:var(--cream); }
.cart-link svg{ width:16px; height:16px; display:block; }

/* ============== FULL-BLEED HERO ============== */
.shop-hero{
  position:fixed;
  inset:0;
  background-color:var(--ink);
  background-image:var(--hero-image, none);
  background-size:cover;
  background-position:center;
  z-index:1;
}
.shop-hero::after{
  /* even without any text on top, a faint darkening keeps the header/footer
     bars reading clearly against whatever the photo is doing at the edges */
  content:'';
  position:absolute; inset:0;
  background:rgba(10,9,8,0.22);
}

/* shop.html's hero specifically: the Arizona flag video, playing clearly
   (not a still image) — shop.html is the SAURO shop's one and only page, so
   this plays the role .shop-hero plays elsewhere, just with motion */
.shop-hero-video{
  position:fixed;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:brightness(0.78) saturate(1.05);
  z-index:1;
}

.brand-hero{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  text-align:center;
  padding:0 24px 96px;
  box-sizing:border-box;
  z-index:2;
}
.brand-statement{
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-size:clamp(16px, 2vw, 21px);
  line-height:1.6;
  color:var(--cream);
  text-shadow:0 2px 16px rgba(10,9,8,0.55);
  max-width:480px;
  margin:0;
}
/* the shop's one piece of live content for now: local time + date, read
   straight from the visitor's own browser/OS clock — no geolocation or IP
   lookup needed, that's already "wherever they are in the world". Sits as a
   small readout up top, out of the way of the SAURO mark below it. */
.shop-clock{
  position:fixed;
  left:50%; top:18px;
  transform:translateX(-50%);
  text-align:center;
  z-index:2;
  pointer-events:none;
}
.shop-clock-time{
  font-family:'EB Garamond', serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(13px, 1.6vw, 18px);
  letter-spacing:.01em;
  color:var(--cream);
  text-shadow:0 2px 24px rgba(10,9,8,0.6), 0 0 44px rgba(10,9,8,0.35);
  white-space:nowrap;
}
.shop-clock-date{
  margin-top:4px;
  font-family:'EB Garamond', serif;
  font-size:clamp(9px, 1vw, 10px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 2px 16px rgba(10,9,8,0.55);
  white-space:nowrap;
}

/* ============== CART DRAWER: pops out from the left ============== */
.cart-drawer-backdrop{
  position:fixed; inset:0;
  background:rgba(58,46,34,0.32);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:20;
}
.cart-drawer-backdrop.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed;
  top:0; left:0; bottom:0;
  width:min(360px, 86vw);
  background:var(--cream);
  border-right:1px solid rgba(58,46,34,0.14);
  box-shadow:16px 0 48px rgba(58,46,34,0.2);
  transform:translateX(-100%);
  transition:transform .4s ease;
  z-index:21;
  display:flex;
  flex-direction:column;
  padding:26px 28px;
  box-sizing:border-box;
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
}
.cart-drawer-title{
  font-family:'EB Garamond', serif;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}
.cart-drawer-close{
  background:none; border:none; padding:0;
  font-family:'EB Garamond', serif;
  font-size:22px;
  line-height:1;
  color:var(--umber);
  cursor:pointer;
  transition:color .25s ease;
}
.cart-drawer-close:hover{ color:var(--ink); }
.cart-drawer-body{
  font-family:'EB Garamond', serif;
  font-size:15px;
  letter-spacing:0;
  color:var(--umber);
  line-height:1.7;
  flex:1;
}

/* ============== FOOTER: solid bar, copyright left, social right ============== */
.shop-footer{
  position:fixed;
  bottom:0; left:0; right:0;
  min-height:64px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 64px;
  box-sizing:border-box;
  flex-wrap:wrap;
}
.footer-copy{
  font-family:'EB Garamond', serif;
  font-size:13px;
  line-height:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 2px 12px rgba(10,9,8,0.6);
}
.footer-ig{
  display:flex; align-items:center;
  gap:8px;
  font-family:'EB Garamond', serif;
  font-size:13px;
  line-height:16px;
  color:var(--cream);
  text-shadow:0 2px 12px rgba(10,9,8,0.6);
  text-decoration:none;
  cursor:pointer;
  transition:color .25s ease;
}
.footer-ig:hover{ color:var(--blush); }
.footer-ig svg{ width:16px; height:16px; display:block; }
.footer-ig span{ letter-spacing:.06em; text-transform:uppercase; }