/* ============================================================================
   RaptorLabs replica — SITEWIDE CHROME + SHARED COMPONENTS
   Loaded on EVERY page (including /cart/, which does not load shop CSS).
   Depends on rl-tokens.css.

   Two Woo traps are neutralised at the bottom of this file, deliberately HERE
   and not in a shop-only stylesheet:
     (1) ul.products::before becoming a real grid item
     (2) Woo's a.button skin outranking .rl-card-cta
   The shared card also renders on the PDP related row and in cart cross-sells,
   so a shop-only override would leave those surfaces repainted grey.
   ========================================================================= */

/* ======================== WAVE DIVIDER (§6 rhythm) ======================
   The decorative full-width SVG wave sits between sections 2>3, around 7,
   and above the footer. Extracted verbatim from home.html (a 2730x410
   repeating <pattern>); only its random id was renamed to #rl-wave.
   ====================================================================== */
.rl-wave{position:absolute;left:0;right:0;z-index:10;pointer-events:none;
  line-height:0;overflow:hidden;
  height:70px}
@media (min-width:640px){.rl-wave{height:80px}}
@media (min-width:768px){.rl-wave{height:90px}}
@media (min-width:1024px){.rl-wave{height:110px}}
@media (min-width:1280px){.rl-wave{height:150px}}
.rl-wave img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.rl-wave--bottom{bottom:0;margin-bottom:-40px}
@media (min-width:1280px){.rl-wave--bottom{margin-bottom:-100px}}
.rl-wave--top{top:0;transform:rotate(180deg);margin-top:-40px}
@media (min-width:1280px){.rl-wave--top{margin-top:-100px}}

/* ============================== HEADER ==================================
   <nav class="h-16 px-6 md:px-8 grid grid-cols-3 items-center sticky top-0
   z-50 bg-primary-foreground border-b-2 border-border">
   Measured: 64px tall, white, 2px solid rgb(231,230,228) bottom rule.
   Breakpoint is xl (1280px) — TABLETS GET THE DRAWER. Mirrored exactly.
   There is NO mega-menu and NO hover panel at source; none is built here.
   ====================================================================== */
.rl-header{
  position:sticky;top:0;z-index:50;height:64px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:hsl(var(--primary-foreground));
  color:hsl(var(--foreground));
  border-bottom:2px solid hsl(var(--border));
  padding-inline:1.5rem;
  transition:transform .2s;
}
@media (min-width:768px){.rl-header{padding-inline:2rem}}

.rl-header__left{display:flex;align-items:center;justify-self:start}
.rl-header__centre{justify-self:center}
.rl-header__right{display:flex;align-items:center;gap:.25rem;justify-self:end}

.rl-hamburger{display:inline-flex;align-items:center;justify-content:center;
  padding:.5rem;margin-left:-.5rem;border:0;background:transparent;
  border-radius:var(--radius-full);cursor:pointer;transition:background-color .2s}
.rl-hamburger:hover{background:hsl(var(--secondary))}
.rl-hamburger svg{width:1.25rem;height:1.25rem}
@media (min-width:1280px){.rl-hamburger{display:none}}

/* desktop link row — hidden below xl */
.rl-mainnav{display:none}
@media (min-width:1280px){
  .rl-mainnav{display:flex;align-items:center;gap:1.5rem}
}
@media (min-width:1536px){.rl-mainnav{gap:1.75rem}}
.rl-mainnav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:1.5rem}
@media (min-width:1536px){.rl-mainnav ul{gap:1.75rem}}
.rl-mainnav li{margin:0}
/* Keep the .main-nav1 li.group > a + ul.sub-menu DOM shape so a mobile-drawer
   script can derive the drawer from the same markup. The source nav is a flat
   6-item array, so no sub-menu is emitted — but the hook survives. */
.rl-mainnav a{color:hsl(var(--muted-foreground));transition:color .2s;
  position:relative;display:inline-block;padding-bottom:2px}
.rl-mainnav a:hover,.rl-mainnav a:focus-visible{color:hsl(var(--foreground))}
/* the framer-motion underline: h-[3px] w-full bg-primary rounded-full,
   scaleX 0 -> 1 from the left */
.rl-mainnav a::after{content:"";position:absolute;left:0;bottom:0;
  height:3px;width:100%;background:hsl(var(--primary));border-radius:9999px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.rl-mainnav a:hover::after,.rl-mainnav a:focus-visible::after{transform:scaleX(1)}
.rl-mainnav ul.sub-menu{display:none}

/* centre logo chip */
.rl-logo{display:inline-flex;align-items:center;
  background:hsl(var(--primary-foreground));
  border:2px solid hsl(var(--primary-foreground));
  border-radius:var(--radius-full);padding:.25rem 0}
@media (min-width:768px){.rl-logo{padding:.25rem .75rem}}
.rl-logo img{height:1.25rem;width:auto}

/* right-hand actions */
.rl-header__shop{display:none}
@media (min-width:640px){.rl-header__shop{display:block}}
.rl-iconlink{position:relative;display:inline-flex;align-items:center;
  justify-content:center;padding:.5rem;border-radius:var(--radius-full);
  transition:background-color .2s;border:0;background:transparent;cursor:pointer}
.rl-iconlink:hover{background:hsl(var(--secondary))}
.rl-iconlink svg{width:1.25rem;height:1.25rem}
.rl-cart-count{position:absolute;top:.5rem;right:0;
  width:1rem;height:1rem;padding:.5rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-full);border:1px solid transparent;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  font-family:var(--font-ui);font-size:10px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ========================== MOBILE DRAWER ==============================
   Radix Sheet, side="left", "flex flex-col p-0 sm:max-w-sm w-full".
   Derived from the same nav markup — no second hard-coded menu.
   ====================================================================== */
.rl-drawer-scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.rl-drawer{position:fixed;top:0;left:0;bottom:0;z-index:81;
  display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;
  background:hsl(var(--background));
  border-right:2px solid hsl(var(--border));
  transform:translateX(-100%);transition:transform .25s ease}
@media (min-width:640px){.rl-drawer{max-width:24rem}}
body.rl-drawer-open .rl-drawer{transform:translateX(0)}
body.rl-drawer-open .rl-drawer-scrim{opacity:1;visibility:visible}
body.rl-drawer-open{overflow:hidden}
.rl-drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;border-bottom:1px solid hsl(var(--border))}
.rl-drawer__body{flex:1;display:flex;flex-direction:column;
  padding:2rem 1.5rem;gap:.25rem;overflow-y:auto}
.rl-drawer__body a{padding:.75rem 0;font-size:1.125rem;
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:var(--tracking-wider);
  border-bottom:1px solid hsl(var(--border));transition:color .2s}
.rl-drawer__body a:hover{color:hsl(var(--primary))}
.rl-drawer__foot{position:relative;z-index:10;padding:1.5rem;
  border-top:1px solid hsl(var(--border))}
.rl-drawer__close{border:0;background:transparent;cursor:pointer;padding:.5rem;
  border-radius:var(--radius-full)}
.rl-drawer__close:hover{background:hsl(var(--secondary))}
@media (min-width:1280px){
  .rl-drawer,.rl-drawer-scrim{display:none}
}

/* ============================== FOOTER ==================================
   <footer class="relative border-t-4 border-primary-foreground bg-primary
   pb-0 text-primary-foreground"> — black, 4px white top rule.
   EXACTLY TWO LINK COLUMNS at source: Shop (2) and Explore (7). No social
   icons, no payment badges, no legal links. See the LEGAL SLOT marker in
   footer.php for where tuju-pages hangs Terms / Privacy / Shipping.
   ====================================================================== */
.rl-footer{position:relative;overflow:visible;padding-bottom:0;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border-top:4px solid hsl(var(--primary-foreground))}
.rl-footer__inner{position:relative;z-index:10;margin-inline:auto;max-width:80rem;
  padding:3.5rem 1rem 2.5rem}
@media (min-width:640px){.rl-footer__inner{padding:4rem 2rem 4rem}}
@media (min-width:768px){.rl-footer__inner{padding:5rem 2.5rem 7rem}}
@media (min-width:1024px){.rl-footer__inner{padding:6rem 2.5rem 12rem}}
@media (min-width:1280px){.rl-footer__inner{padding:7rem 2.5rem 14rem}}
.rl-footer a{color:hsl(var(--primary-foreground));padding-block:.25rem;
  transition:opacity .2s,color .2s}
.rl-footer a:hover{opacity:.9}

/* band 1 — newsletter */
.rl-footer__news{display:flex;flex-direction:column;gap:1.5rem;
  margin-bottom:2.5rem;padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.1)}
@media (min-width:1024px){
  .rl-footer__news{flex-direction:row;align-items:center;
    justify-content:space-between;gap:4rem;padding-bottom:5rem}
}
.rl-footer__news h2{color:hsl(var(--primary-foreground));
  font-family:var(--font-heading);font-weight:900;text-transform:uppercase;
  letter-spacing:var(--tracking-title);font-size:2.25rem;line-height:1}
@media (min-width:1024px){.rl-footer__news h2{font-size:3rem}}

/* band 2 — brand + link columns */
.rl-footer__cols{display:flex;flex-direction:column;justify-content:space-between;
  gap:2rem}
@media (min-width:640px){
  .rl-footer__cols{flex-direction:row;align-items:flex-start;gap:3rem}
}
@media (min-width:768px){.rl-footer__cols{gap:4rem}}
.rl-footer__brand{display:flex;flex-direction:column;gap:.75rem;max-width:24rem}
@media (min-width:640px){.rl-footer__brand{gap:1rem}}
@media (min-width:768px){.rl-footer__brand{gap:1.25rem}}
.rl-footer__brand img{height:1.5rem;width:auto}
.rl-footer__links{margin-top:1.5rem;display:grid;grid-template-columns:1fr;
  gap:1.5rem}
@media (min-width:640px){
  .rl-footer__links{margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2.5rem}
}
@media (min-width:768px){.rl-footer__links{gap:3.5rem}}
@media (min-width:1024px){.rl-footer__links{gap:4rem}}
.rl-footer__links h4{font-size:.75rem;letter-spacing:var(--tracking-widest);
  color:rgba(255,255,255,.4)}
.rl-footer__links ul{list-style:none;margin:.75rem 0 0;padding:0}
.rl-footer__links li{margin:0}
.rl-footer__links li a{display:inline-flex;width:fit-content;position:relative;
  color:rgba(255,255,255,.6);transition:color .2s}
.rl-footer__links li a:hover{color:#fff;opacity:1}
.rl-footer__links li a::after{content:"";position:absolute;left:0;bottom:0;
  height:3px;width:100%;background:currentColor;border-radius:9999px;
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
.rl-footer__links li a:hover::after{transform:scaleX(1)}

/* band 3 — the giant clipped wordmark */
.rl-footer__wordmark{pointer-events:none;position:absolute;left:0;right:0;bottom:0;
  z-index:0;overflow:hidden;height:min(42svh,11rem)}
@media (min-width:640px){.rl-footer__wordmark{height:min(38svh,13rem)}}
@media (min-width:768px){.rl-footer__wordmark{height:min(34svh,17rem)}}
@media (min-width:1024px){.rl-footer__wordmark{height:min(30svh,21rem)}}
@media (min-width:1280px){.rl-footer__wordmark{height:min(28svh,25rem)}}
.rl-footer__wordmark p{
  position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:var(--font-heading);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-title);line-height:1;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  background-image:linear-gradient(to bottom,#262626,#525252);
  user-select:none;pointer-events:none;
  transform:translateY(42%);font-size:2.75rem}
@media (min-width:380px){.rl-footer__wordmark p{font-size:3.1rem}}
@media (min-width:640px){.rl-footer__wordmark p{transform:translateY(36%);font-size:3rem}}
@media (min-width:768px){.rl-footer__wordmark p{transform:translateY(32%);font-size:4.5rem}}
@media (min-width:1024px){.rl-footer__wordmark p{transform:translateY(28%);font-size:6rem}}
@media (min-width:1280px){.rl-footer__wordmark p{transform:translateY(24%);font-size:11rem}}
@media (min-width:1536px){.rl-footer__wordmark p{font-size:12rem}}

/* ======================= NEWSLETTER FORM (shared) =======================
   Underline-only field. The submit button ships DISABLED at source and this
   build reproduces it NON-FUNCTIONAL: nothing receives the address, and no
   mailing-list service is wired. Do not make it look functional.
   ====================================================================== */
.rl-news-form{display:flex;flex-direction:column;row-gap:.75rem;
  width:100%;max-width:28rem;align-items:stretch;text-align:left}
.rl-news-form input[type="email"]{
  height:auto;width:100%;border:0;border-bottom:2px solid rgba(255,255,255,.2);
  border-radius:0;background:var(--rl-ink-27);padding:1rem;
  font-family:var(--font-ui);font-size:.875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-widest);color:#fff}
.rl-news-form input[type="email"]::placeholder{color:rgba(255,255,255,.35)}
.rl-news-form input[type="email"]:focus{outline:none;border-bottom-color:#fff}

/* ==================== SHARED PRODUCT CARD COMPONENT =====================
   ONE component, reused by every carousel, grid, search result, the PDP
   related row and cart cross-sells. Structure:
     image . entry id . title . price . badge . add-to-cart
   ====================================================================== */
.rl-pc{position:relative;isolation:isolate;z-index:0;display:flex;
  flex-direction:column;height:100%;min-width:0;padding:1.5rem;
  background:rgb(var(--surface-container));
  box-shadow:0 0 0 2px hsl(var(--primary-foreground)),0 0 0 4px var(--rl-card-ring);
  transition:box-shadow .2s,background-color .2s}
@media (min-width:768px){.rl-pc{padding:2rem}}
.rl-pc:hover{z-index:10;background:#fff;
  box-shadow:0 0 0 2px hsl(var(--primary)),0 0 0 4px hsl(var(--primary))}
.rl-pc__media{position:relative;display:block;width:100%;aspect-ratio:1/1;
  overflow:hidden;background:#fff;border:2px solid hsl(var(--border))}
.rl-pc__media img,.rl-pc .pc-img{width:100%;height:100%;object-fit:contain;
  transition:transform .3s}
.rl-pc:hover .pc-img{transform:scale(1.03)}
.rl-pc__body{display:flex;flex-direction:column;flex:1;margin-top:1rem;gap:.5rem}
.rl-pc__entry{font-family:var(--font-ui);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:var(--tracking-widest);
  color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.rl-pc .pc-title{margin:0;font-family:var(--font-heading);font-weight:900;
  text-transform:uppercase;letter-spacing:var(--tracking-title);
  font-size:1.25rem;line-height:1.15;color:hsl(var(--foreground));
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:break-word;transition:color .2s}
@media (min-width:640px){.rl-pc .pc-title{font-size:1.5rem}}
.rl-pc__specs{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.125rem}
.rl-pc__spec{font-family:var(--font-ui);font-size:.625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-chip);
  padding:.25rem .5rem;border:2px solid var(--rl-zinc-200);border-radius:0;
  background:hsl(var(--primary-foreground));color:hsl(var(--foreground))}
.rl-pc .pc-price{margin-top:auto;padding-top:.75rem;
  font-family:var(--font-heading);font-weight:900;font-size:1.5rem;
  color:hsl(var(--foreground));font-variant-numeric:tabular-nums}
.rl-pc .pc-price .woocommerce-Price-amount{font:inherit;color:inherit}
.rl-pc .pc-price del{opacity:.45;font-size:.75em;margin-right:.35em}
.rl-pc .pc-price ins{text-decoration:none}
.rl-pc__from{font-family:var(--font-ui);font-size:.6875rem;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--tracking-chip);
  color:hsl(var(--muted-foreground));display:block}
.rl-pc__badges{display:flex;flex-wrap:wrap;gap:.375rem;min-height:0}
.rl-pc__actions{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.rl-pc .pc-cta-lab{align-self:flex-start}
/* Placeholder used when a product has no image — the source's own
   "item coming soon" placeholder, reproduced as the theme fallback. */
.rl-pc__media--placeholder{display:flex;align-items:center;justify-content:center;
  background:rgb(var(--surface-container-low));
  font-family:var(--font-ui);font-size:.625rem;font-weight:700;
  letter-spacing:var(--tracking-chip);text-transform:uppercase;
  color:hsl(var(--muted-foreground))}

/* ---------------- the card CTA -----------------------------------------
   TRAP: Woo's `.woocommerce :where(...) a.button` computes (0,2,1) and would
   otherwise repaint this as Woo's grey pill on every page whose <body>
   carries the `woocommerce` class. The tripled class below computes (0,3,0),
   which outranks it, and it lives in the SITEWIDE sheet so it also wins on
   /cart/ (which loads base CSS but not shop CSS).
   ---------------------------------------------------------------------- */
.rl-card-cta.rl-card-cta.rl-card-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;white-space:nowrap;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  border:2px solid transparent;border-radius:0;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:.875rem;letter-spacing:var(--tracking-widest);
  padding:.75rem 1.5rem;line-height:1.2;text-decoration:none;
  transition:all .2s;cursor:pointer;text-shadow:none;
}
.rl-card-cta.rl-card-cta.rl-card-cta:hover{
  color:hsl(var(--primary));background:hsl(var(--primary-foreground));
  border-color:hsl(var(--foreground));box-shadow:var(--shadow-hard-4)}
.rl-card-cta.rl-card-cta.rl-card-cta:active{box-shadow:none;transform:translate(4px,4px)}
.rl-card-cta.rl-card-cta.rl-card-cta.loading{opacity:.6;pointer-events:none}
.rl-card-cta.rl-card-cta.rl-card-cta::after{display:none}
.rl-card-cta.rl-card-cta.rl-card-cta.added::after{display:none}
/* Woo appends a "View cart" link after an AJAX add — keep it in the system. */
.rl-pc .added_to_cart{margin-top:.5rem;font-family:var(--font-ui);
  font-size:.6875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-chip);text-decoration:underline;
  text-underline-offset:4px}

/* =================== WOO GRID CLEARFIX TRAP ============================
   `.woocommerce ul.products::before{content:" ";display:table}` is a float
   clearfix from the pre-grid era. Inside a display:grid container it becomes
   a REAL GRID ITEM, occupying cell 1 and shifting the whole catalogue one
   cell right. The card COUNT stays correct, so no count-based test catches
   it. Assert firstCell.offsetLeft === 0.
   ====================================================================== */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.products::before,ul.products::after{content:none;display:none}

/* ===================== CART DRAWER (shared chrome) =====================
   Opened ONLY by an explicit user action. The open state is a body class,
   never a server-rendered default — see rl-app.js for the flag-parsing note.
   ====================================================================== */
.rl-cart-scrim{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.rl-cart-drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:100%;
  max-width:26rem;display:flex;flex-direction:column;
  background:hsl(var(--background));border-left:2px solid hsl(var(--foreground));
  transform:translateX(100%);transition:transform .25s ease}
body.rl-cart-open .rl-cart-drawer{transform:translateX(0)}
body.rl-cart-open .rl-cart-scrim{opacity:1;visibility:visible}
.rl-cart-drawer__head{display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid hsl(var(--foreground));
  background:hsl(var(--foreground));color:hsl(var(--background));
  padding:.75rem 1rem}
.rl-cart-drawer__head h2{color:inherit;font-size:1rem;
  font-family:var(--font-ui);font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-chip)}
.rl-cart-drawer__body{flex:1;overflow-y:auto;padding:1rem}
.rl-cart-drawer__foot{border-top:2px solid hsl(var(--foreground));padding:1rem;
  display:flex;flex-direction:column;gap:.5rem}
.rl-cart-drawer__close{border:0;background:transparent;color:inherit;
  cursor:pointer;padding:.25rem;line-height:0}

/* ========================== SKIP LINK =================================== */
.rl-skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:hsl(var(--primary));color:hsl(var(--primary-foreground));
  padding:.75rem 1.25rem;font-family:var(--font-display);text-transform:uppercase}
.rl-skip:focus{left:.5rem;top:.5rem}