/* RITE CLOTHING — shared site styles
   layout: full-bleed photo hero (Scuffers-style) under a transparent
   3-column header. Buttons get a "liquid glass" pill only while hovered. */

:root{
  --white:#FFFFFF;
  --paper:#F4F3F0;
  --ink:#0D1C38;   /* RITE navy: text, logo, icons, buttons, footer */
  --navy:#1D3A63;
  --line:#E3E1DC;
  --muted:#5E6779;
  --font:'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --hdr-h:64px;
  --gutter:20px;
  /* one caps style for the whole site, like the footer */
  --fs:12px;
  --fs-s:11px;
  --track:.1em;

  /* liquid glass (frosted, light) */
  --glass-blur:18px;
  --glass-bg:rgba(255,255,255,.18);
  --glass-edge:rgba(255,255,255,.34);
  --glass-hi:rgba(255,255,255,.55);

  /* pop-ups (search, cart, menu): dark navy see-through glass with white text */
  --pop-a:.88;
  --pop-bg:rgba(13,28,56,var(--pop-a));
  --pop-blur:blur(28px) saturate(160%);
  --pop-soft:rgba(255,255,255,.66);
  --pop-line:rgba(255,255,255,.16);
  color-scheme: light;
}
@media (max-width:899px){
  :root{ --hdr-h:56px; --gutter:14px; }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--fs);
  line-height:1.5;
  letter-spacing:var(--track);
  text-transform:uppercase;
  -webkit-font-smoothing:antialiased;
  /* footer always sits at the bottom of the window */
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
}
body > main{flex:1 0 auto}
body > .site-footer{flex:none}
/* running text and what people type keep normal case */
.copy, input, textarea, .confirm-recap{text-transform:none;letter-spacing:normal}
input::placeholder{text-transform:uppercase;letter-spacing:var(--track)}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}
button{font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--gutter);top:-60px;z-index:100;
  background:var(--ink);color:var(--white);padding:10px 14px;text-decoration:none;
}
.skip-link:focus{top:calc(10px + env(safe-area-inset-top,0px))}

.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  box-shadow:inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-hi);
}

@media (max-width:899px){ .desktop-only{display:none!important} }
@media (min-width:900px){ .mobile-only{display:none!important} }

/* ---------------- header ---------------- */
.site-header{
  /* overlay (transparent) state */
  --hdr-bg:transparent;
  --hdr-fg:var(--white);
  --hdr-line:transparent;
  --logo-filter:brightness(0) invert(1);
  --count-fg:var(--ink);

  position:fixed;top:0;left:0;right:0;z-index:50;
  padding-top:env(safe-area-inset-top,0px);
  background:var(--hdr-bg);
  color:var(--hdr-fg);
  border-bottom:1px solid var(--hdr-line);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* solid state: scrolled past the hero, or a page whose header has no data-overlay.
   On the photo the header stays transparent with white text, also on hover. */
.site-header.is-solid,
.site-header:not([data-overlay]){
  --hdr-bg:var(--white);
  --hdr-fg:var(--ink);
  --hdr-line:var(--line);
  --logo-filter:none;
  --count-fg:var(--white);
  --glass-bg:rgba(13,28,56,.05);
  --glass-edge:rgba(13,28,56,.06);
  --glass-hi:rgba(255,255,255,.6);
}
/* product page, and home past the photo: header floats on the grey background */
.site-header[data-overlay].is-solid,
.site-header.on-grey{
  --hdr-bg:rgba(229,229,229,.72);
  --hdr-line:transparent;
  --glass-bg:rgba(255,255,255,.5);
  --glass-edge:rgba(255,255,255,.8);
  --glass-hi:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
}
/* other pages: <main class="page-main"> starts below the solid header */
.page-main{padding-top:calc(var(--hdr-h) + env(safe-area-inset-top,0px))}

.hdr{
  height:var(--hdr-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 var(--gutter);
}
.hdr-left{display:flex;align-items:center;gap:4px;justify-self:start;min-width:0}
.hdr-right{display:flex;align-items:center;gap:4px;justify-self:end;min-width:0}
@media (min-width:900px){
  .hdr-right{gap:8px}
}

.primary-nav{display:flex;gap:6px;margin-left:-12px}
.primary-nav a{
  font-weight:400;text-decoration:none;
  padding:8px 12px;border-radius:999px;
  transition:background-color .2s ease, box-shadow .2s ease;
}
/* liquid glass appears only behind the hovered button */
.primary-nav a:hover,
.primary-nav a:focus-visible,
.icon-btn:hover,
.icon-btn:focus-visible{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  backdrop-filter:blur(var(--glass-blur)) saturate(170%);
  box-shadow:inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-hi);
  outline:none;
}

.logo{display:block;line-height:0;padding:6px 0}
.logo img{
  height:22px;width:auto;
  filter:var(--logo-filter);
  transition:filter .25s ease;
}
@media (max-width:899px){ .logo img{height:18px} }

.icon-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;margin:0;border-radius:50%;
  background:none;border:0;cursor:pointer;color:inherit;text-decoration:none;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.icon-btn svg{
  width:21px;height:21px;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.hdr-left .icon-btn:first-child{margin-left:-10px}
.hdr-right .icon-btn:last-child{margin-right:-10px}


.cart-count{
  position:absolute;top:5px;right:3px;
  min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--hdr-fg);color:var(--count-fg);
  font-size:10px;font-weight:600;line-height:16px;text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ---------------- dropdown panels ---------------- */
.panel{
  position:absolute;left:0;right:0;top:100%;
  color:var(--white);
  padding:20px var(--gutter) 28px;
}
/* the glass sheet reaches up behind the header, so header + search read as one pane */
.panel::before{
  content:"";position:absolute;left:0;right:0;bottom:0;z-index:-1;
  top:calc(-1 * (var(--hdr-h) + env(safe-area-inset-top,0px)));
  background:var(--pop-bg);
  -webkit-backdrop-filter:var(--pop-blur);backdrop-filter:var(--pop-blur);
}
/* while search is open the header itself turns into that pane: white text and logo */
.site-header.search-open{
  --hdr-bg:transparent;--hdr-fg:var(--white);--hdr-line:transparent;
  --logo-filter:brightness(0) invert(1);--count-fg:var(--ink);
  --glass-bg:rgba(255,255,255,.14);--glass-edge:rgba(255,255,255,.3);--glass-hi:rgba(255,255,255,.4);
  -webkit-backdrop-filter:none;backdrop-filter:none;   /* lets the pane blur the page itself */
}
.panel-label{
  margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--pop-soft);
}

.search-form{
  display:flex;align-items:center;gap:12px;
  border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:12px;margin-bottom:26px;
  max-width:760px;
}
.search-form svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.search-form input{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:none;
  font-family:var(--font);font-size:16px;color:var(--white);padding:4px 0;
}
.search-form input::placeholder{color:var(--pop-soft)}
.search-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.text-btn{
  background:none;border:0;padding:6px 0;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;
}

.search-results{
  list-style:none;margin:0;padding:0 0 4px;
  display:grid;grid-template-columns:repeat(4, 150px);gap:24px 20px;
}
.search-results a{display:flex;flex-direction:column;gap:10px;text-decoration:none}
/* whole photo, never cropped */
.search-results img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:#E5E5E5}
.search-results .r-row{display:flex;justify-content:space-between;gap:8px}
.search-results .r-price{color:var(--pop-soft);white-space:nowrap}
.search-results a:hover .r-name{text-decoration:underline;text-underline-offset:4px}
.search-empty{grid-column:1/-1;color:var(--pop-soft);margin:0}
@media (max-width:599px){
  .search-results{grid-template-columns:repeat(2, minmax(0,1fr));gap:18px 12px;max-width:320px}
  .search-results li:nth-child(n+5){display:none}
}

/* ---------------- mobile drawer ---------------- */
.drawer{
  position:fixed;top:0;bottom:0;left:0;z-index:60;
  width:min(100%, 420px);
  background:var(--pop-bg);color:var(--white);
  -webkit-backdrop-filter:var(--pop-blur);backdrop-filter:var(--pop-blur);
  box-shadow:inset -1px 0 0 var(--pop-line);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;
  visibility:hidden;transform:translateX(-100%);
  transition:transform .32s ease, visibility 0s linear .32s;
}
.drawer.is-open{visibility:visible;transform:none;transition:transform .32s ease}
.drawer-top{height:var(--hdr-h);display:flex;align-items:center}
.drawer-top .icon-btn{margin-left:-10px}
.drawer-nav{display:flex;flex-direction:column;gap:2px;padding:16px 0 32px}
.drawer-nav a{
  text-decoration:none;padding:9px 0;
}
.drawer-nav .nav-small{color:var(--pop-soft)}
.drawer-nav a:not(.nav-small) + .nav-small{margin-top:14px}
.nav-count{font-size:var(--fs-s);vertical-align:super;color:var(--white)}
.drawer-bottom{margin-top:auto;display:flex;flex-direction:column;gap:20px;border-top:1px solid var(--pop-line);padding-top:20px}
.drawer-ig{font-size:var(--fs-s);color:var(--pop-soft);text-decoration:none}

.scrim{position:fixed;inset:0;z-index:40;background:rgba(13,28,56,.16)}
/* search over the home photo: a little lighter, the photo behind it is already dark */
.site-header[data-overlay]:not(.is-solid){--pop-bg:rgba(13,28,56,.62)}
body.menu-open .scrim{z-index:55}
body.lock{overflow:hidden}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  height:100vh;height:100svh;min-height:540px;
  overflow:hidden;
  background:#26341f; /* forest tone while the photo loads */
}
.hero picture,
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;
}
.hero-img{object-fit:cover;object-position:50% 26%}
.hero-link{position:absolute;inset:0;display:block}
.hero-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.32) 0, rgba(0,0,0,0) 170px);
}

/* ---------------- home: current drop ---------------- */
.drop{
  background:#E5E5E5;   /* same grey as the product photos, so the clothes float */
  padding:clamp(72px, 16vh, 160px) var(--gutter) clamp(56px, 12vh, 120px);
}
.drop-grid{
  list-style:none;margin:0 auto;padding:0;
  display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:24px clamp(16px, 3vw, 44px);
  max-width:900px;
}
.drop-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none}
.drop-item img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  transform:scale(var(--s,1));transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.drop-name{font-size:var(--fs-s);opacity:0;transition:opacity .2s ease}
@media (hover:hover){
  .drop-item:hover img{transform:scale(calc(var(--s,1) * 1.06))}
  .drop-item:hover .drop-name,
  .drop-item:focus-visible .drop-name{opacity:1}
}
.drop-bar{
  max-width:900px;margin:clamp(40px, 8vh, 80px) auto 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.drop-title{margin:0;font-size:var(--fs);font-weight:500}
.btn-box{
  display:inline-block;padding:9px 16px;border:1px solid var(--ink);text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}
.btn-box:hover{background:var(--ink);color:var(--white)}
@media (max-width:699px){
  .drop-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:28px 16px}
  .drop-name{opacity:1}
}

/* ---------------- footer (all pages) ---------------- */
.site-footer{
  background:var(--ink);color:var(--white);
  padding:44px var(--gutter) calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:44px;
}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.sf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px 48px;flex-wrap:wrap}
.sf-title{margin:0;font-size:15px;font-weight:400;letter-spacing:.08em;line-height:1.3}
.sf-news{width:min(100%, 460px);display:flex;flex-direction:column;gap:12px}
.sf-lead{margin:0;font-size:var(--fs-s);color:rgba(255,255,255,.72);line-height:1.6;text-wrap:balance}
.sf-field{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:8px}
.sf-field input{
  flex:1 1 auto;min-width:0;border:0;outline:0;background:none;color:var(--white);
  font-family:var(--font);font-size:16px;padding:4px 0;
}
.sf-field input::placeholder{color:rgba(255,255,255,.55);font-size:var(--fs)}
.sf-submit{background:none;border:0;padding:4px 0;cursor:pointer;color:var(--white);font-size:var(--fs-s)}
.sf-submit:hover{text-decoration:underline;text-underline-offset:4px}
.sf-check{display:flex;align-items:center;gap:9px;font-size:var(--fs-s);color:rgba(255,255,255,.72);cursor:pointer}
.sf-check input{
  appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:12px;height:12px;border:1px solid rgba(255,255,255,.7);display:grid;place-content:center;cursor:pointer;
}
.sf-check input:checked{background:var(--white)}
.sf-check input:checked::after{content:"";width:6px;height:6px;background:var(--ink)}
.sf-msg{margin:0;font-size:var(--fs-s)}
.sf-msg:empty{display:none}
.sf-msg.warn{color:#F0A4A4}
.sf-bottom{display:flex;flex-direction:column;gap:18px;font-size:var(--fs-s)}
.sf-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.sf-legal{display:flex;justify-content:space-between;gap:16px;white-space:nowrap;color:rgba(255,255,255,.6)}

/* phone: one calm column. Newsletter first, a hairline, the links in two
   columns with room between the rows, then the small legal line. */
@media (max-width:699px){
  .site-footer{padding:52px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));gap:52px}
  .sf-top{flex-direction:column;gap:14px}
  .sf-news{gap:0}
  .sf-lead{margin-bottom:30px}
  .sf-check{margin-top:18px;line-height:1.5}
  .sf-msg{margin-top:12px}
  .sf-bottom{gap:44px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
  .sf-links{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:22px 16px}
  .sf-links a{white-space:nowrap}
  .sf-legal{font-size:clamp(10px, 2.8vw, 11px)}
}

/* ---------------- cart drawer (all pages) ---------------- */
.cart-backdrop{position:fixed;inset:0;z-index:70;background:rgba(13,28,56,.16)}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:71;
  width:min(100%, 420px);
  background:var(--pop-bg);color:var(--white);
  -webkit-backdrop-filter:var(--pop-blur);backdrop-filter:var(--pop-blur);
  box-shadow:inset 1px 0 0 var(--pop-line);
  display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
  visibility:hidden;transform:translateX(100%);
  transition:transform .32s ease, visibility 0s linear .32s;
}
.cart-drawer.is-open{visibility:visible;transform:none;transition:transform .32s ease}
.cd-head{
  height:var(--hdr-h);flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);border-bottom:1px solid var(--pop-line);
}
.cd-title{margin:0;font-size:var(--fs);font-weight:400}
.cd-count{color:var(--pop-soft);font-weight:400}
.cd-close{width:40px;height:40px;margin-right:-10px;border:0;border-radius:50%;background:none;color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cd-close:hover,.cd-close:focus-visible{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);outline:none}
.cd-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.cd-lines{flex:1 1 auto;overflow-y:auto;padding:0 var(--gutter)}
.cd-empty{padding:28px 0;display:flex;flex-direction:column;gap:10px}
.cd-empty p{margin:0;color:var(--pop-soft)}
.cd-empty a{text-underline-offset:3px}
.cd-foot{flex:none;border-top:1px solid var(--pop-line);padding:16px var(--gutter) 18px}
.cd-checkout{
  display:block;margin-top:14px;padding:10px 14px;text-align:center;text-decoration:none;
  background:var(--white);color:var(--ink);line-height:20px;
}

/* cart lines + totals (drawer and checkout) */
.cl{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.cl:last-child{border-bottom:0}
.cl-img{flex:none;width:68px;display:block;background:#E5E5E5}
.cl-img img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.cl-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
.cl-top{display:flex;justify-content:space-between;gap:10px}
.cl-name{text-decoration:none}
.cl-name:hover{text-decoration:underline;text-underline-offset:3px}
.cl-meta{font-size:var(--fs-s);color:var(--muted);margin-top:2px}
.cl-price{white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cl-remove{background:none;border:0;padding:0;cursor:pointer;font-size:var(--fs-s);color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cl-remove:hover{color:var(--ink)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line)}
.stepper button{width:26px;height:26px;border:0;background:none;cursor:pointer;font-size:14px;color:var(--ink)}
.stepper button:hover{background:var(--paper)}
.stepper .qty{min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.ct{display:flex;flex-direction:column;gap:6px}
.ct-row{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.ct-disc{color:var(--navy)}
.ct-old{color:var(--muted);margin-right:4px}
.ct-total{font-weight:500;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
/* cart lines inside the dark glass drawer */
.cart-drawer .cl{border-bottom-color:var(--pop-line)}
.cart-drawer .cl-meta,
.cart-drawer .cl-remove,
.cart-drawer .ct-old{color:var(--pop-soft)}
.cart-drawer .cl-remove:hover{color:var(--white)}
.cart-drawer .stepper{border-color:rgba(255,255,255,.3)}
.cart-drawer .stepper button{color:var(--white)}
.cart-drawer .stepper button:hover{background:rgba(255,255,255,.12)}
.cart-drawer .ct-disc{color:#A9C2F0}
.cart-drawer .ct-total{border-top-color:var(--pop-line)}
.cart-drawer .cl-img{background:#E5E5E5}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}