/* ============================================================
   EUREKA HUB - Pro Max storefront skin  (Zid Custom CSS)
   Paste into: Partner Dashboard -> Custom CSS (or App snippet, type CSS)
   Pairs with the JS snippet. General brand (not just fidgets). Data-driven.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Fraunces:opsz,wght@9..144,500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --eh-navy:#1D1F2A; --eh-navy2:#262A3A;
  --eh-terra:#DE754C; --eh-terra-deep:#C85E36;
  --eh-yellow:#FFB83F; --eh-yellow-soft:#FFD98A;
  --eh-paper:#FFF8F0; --eh-paper2:#FFEFE0; --eh-cream:#FFFCF7;
  --eh-mut:#6E6B73;
}
body{ background:var(--eh-paper) !important; font-family:'Inter',system-ui,sans-serif !important; }
h1,h2,h3,h4,[class*="title"]{ font-family:'Fraunces',serif !important; letter-spacing:-.01em; }

/* hide the old Zid home content the JS marks (only on home) */
.eh-hide{ display:none !important; }

/* ===== injected app ===== */
#eh-app *{ box-sizing:border-box; }
#eh-app .eh-wrap{ max-width:1200px; margin:0 auto; padding:0 26px; }
#eh-app .eh-eyebrow{ font-family:'Space Grotesk';font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--eh-terra-deep); }

#eh-progress{position:fixed;top:0;left:0;height:4px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--eh-terra),var(--eh-yellow));z-index:99999}
#eh-glow{position:fixed;width:440px;height:440px;border-radius:50%;pointer-events:none;z-index:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,184,63,.16),transparent 60%);transition:opacity .4s}

/* HERO */
#eh-hero{position:relative;overflow:hidden;padding:80px 0 70px;background:radial-gradient(ellipse 70% 60% at 80% 20%,var(--eh-yellow-soft),transparent 60%),var(--eh-paper)}
#eh-hero .eh-mesh{position:absolute;inset:0;z-index:0}
#eh-hero .eh-mesh span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:eh-drift 16s ease-in-out infinite}
#eh-hero .eh-mesh .a{width:520px;height:520px;background:var(--eh-yellow-soft);top:-120px;right:-60px}
#eh-hero .eh-mesh .b{width:420px;height:420px;background:rgba(222,117,76,.35);bottom:-140px;left:-100px;animation-delay:-5s}
@keyframes eh-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-26px)}}
#eh-hero .eh-grid{position:relative;z-index:3;display:grid;grid-template-columns:1.04fr .96fr;gap:50px;align-items:center}
#eh-hero .eh-utilbar{position:relative;z-index:5;display:flex;justify-content:flex-end;gap:20px;padding:0 6px 8px}
#eh-hero .eh-util{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.86rem;color:var(--eh-navy);text-decoration:none;transition:color .2s}
#eh-hero .eh-util svg{width:18px;height:18px}
#eh-hero .eh-util:hover{color:var(--eh-terra)}
#eh-hero .eh-logobar{position:relative;z-index:4;text-align:center;padding-bottom:26px}
#eh-hero .eh-logobar img{height:50px;width:auto;display:inline-block}
#eh-hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(3rem,7vw,6rem);line-height:.95;color:var(--eh-navy);margin:18px 0 22px}
#eh-hero h1 em{font-style:normal;color:var(--eh-terra);position:relative;white-space:nowrap}
#eh-hero h1 em::after{content:"";position:absolute;left:-2%;right:-2%;bottom:8%;height:26%;background:var(--eh-yellow);opacity:.55;z-index:-1;border-radius:5px;transform:rotate(-1.5deg)}
#eh-hero p{font-size:1.12rem;line-height:1.6;color:var(--eh-mut);max-width:440px;margin-bottom:26px;font-weight:500}

/* TRUST */
#eh-trust{background:var(--eh-navy);color:var(--eh-cream);padding:20px 0}
#eh-trust .eh-wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
#eh-trust .t{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.9rem}
#eh-trust svg{width:22px;height:22px;color:var(--eh-yellow);flex-shrink:0}

/* MARQUEE */
#eh-marquee{background:var(--eh-terra);overflow:hidden;white-space:nowrap;padding:12px 0;border-block:3px solid var(--eh-navy)}
#eh-marquee div{display:inline-block;animation:eh-scroll 26s linear infinite;font-family:'Fraunces',serif;font-weight:600;font-size:1.1rem;color:#fff}
#eh-marquee span{margin:0 22px}#eh-marquee b{color:var(--eh-navy)}
@keyframes eh-scroll{to{transform:translateX(-50%)}}

/* SECTION SHELL */
.eh-sec{padding:80px 0}
.eh-sec .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;flex-wrap:wrap;gap:16px}
.eh-sec .head .t{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.9rem,4.2vw,3rem);color:var(--eh-navy);margin-top:8px}
.eh-sec .head .t em{font-style:normal;color:var(--eh-terra)}
.eh-link{font-weight:700;font-size:.9rem;color:var(--eh-terra-deep);background:var(--eh-paper2);padding:10px 18px;border-radius:100px;text-decoration:none;transition:.2s}
.eh-link:hover{background:var(--eh-yellow-soft)}

/* COLLECTIONS (auto grid, any count) — magical animated cards */
#eh-cols .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.eh-col{position:relative;border-radius:24px;overflow:hidden;min-height:280px;border:3px solid var(--eh-navy);box-shadow:0 10px 0 var(--eh-navy);display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;text-decoration:none;transition:transform .3s}
.eh-col:hover{transform:translateY(-7px)}
.eh-col .bg{position:absolute;inset:0;z-index:0;background:linear-gradient(135deg,var(--c1),var(--c2),var(--c1));background-size:220% 220%;animation:eh-grad 9s ease infinite}
@keyframes eh-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.eh-col .grid-tex{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.10) 1px,transparent 1px);background-size:22px 22px;opacity:.55;transition:transform .6s}
.eh-col:hover .grid-tex{transform:translateY(-8px)}
.eh-col .emblem{position:absolute;right:-12px;top:-12px;z-index:1;width:128px;height:128px;color:#fff;opacity:.20;transition:transform .4s,opacity .4s}
.eh-col:hover .emblem{opacity:.30;transform:rotate(8deg) scale(1.06)}
.eh-col::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(29,31,42,.85),rgba(29,31,42,.1) 62%,transparent)}
.eh-col .tag{position:relative;z-index:3;font-family:'Space Grotesk';font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--eh-yellow);margin-bottom:6px}
.eh-col h3{position:relative;z-index:3;font-family:'Fraunces',serif;font-weight:600;font-size:1.7rem;color:#fff}
.eh-col .go{position:relative;z-index:3;margin-top:10px;font-weight:700;font-size:.86rem;color:#fff}

/* PRODUCTS (auto grid) */
#eh-prods .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.eh-card2{background:#fff;border:3px solid var(--eh-navy);border-radius:20px;overflow:hidden;box-shadow:0 8px 0 var(--eh-navy);transition:transform .25s;text-decoration:none;position:relative;display:block}
.eh-card2:hover{transform:translateY(-8px) rotate(-1deg)}
.eh-card2 .img{aspect-ratio:1;overflow:hidden;background:linear-gradient(135deg,var(--eh-paper2),var(--eh-yellow-soft));position:relative}
.eh-card2 .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s, clip-path 1.1s cubic-bezier(.16,1,.3,1);clip-path:inset(100% 0 0 0)}
.eh-card2.eh-in .img img{clip-path:inset(0 0 0 0)}
.eh-card2:hover .img img{transform:scale(1.08)}
.eh-card2 .printline{position:absolute;left:0;right:0;height:4px;top:100%;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,var(--eh-yellow),#fff,var(--eh-yellow),transparent);box-shadow:0 0 14px 2px rgba(255,184,63,.8)}
.eh-card2.eh-in .printline{animation:eh-print 1.1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes eh-print{0%{top:100%;opacity:1}90%{opacity:1}100%{top:0;opacity:0}}
.eh-card2 .quick{position:absolute;bottom:12px;right:12px;z-index:2;width:42px;height:42px;border-radius:50%;border:2.5px solid var(--eh-navy);background:var(--eh-yellow);color:var(--eh-navy);font-size:1.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(8px);transition:.25s}
.eh-card2:hover .quick{opacity:1;transform:none}
.eh-card2 .quick:hover{background:var(--eh-terra);color:#fff;transform:rotate(90deg) scale(1.08)}
.eh-card2 .b{padding:16px 18px 20px}
.eh-card2 .cl{font-family:'Space Grotesk';font-size:.7rem;color:var(--eh-terra-deep);letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.eh-card2 h4{font-weight:700;font-size:1rem;color:var(--eh-navy);margin-bottom:12px;line-height:1.25}
.eh-card2 .price{font-family:'Fraunces',serif;font-size:1.18rem;font-weight:600;color:var(--eh-navy)}

/* STORY */
#eh-story .box{display:grid;grid-template-columns:1.25fr 1fr;gap:50px;align-items:center;border-radius:30px;padding:54px 48px;background:var(--eh-navy);position:relative;overflow:hidden;box-shadow:0 14px 0 var(--eh-terra-deep)}
#eh-story .box::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:var(--eh-terra);opacity:.22}
#eh-story .eh-eyebrow{color:var(--eh-yellow)}
#eh-story h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(1.8rem,3.8vw,2.7rem);line-height:1.1;margin:10px 0 16px;color:#fff;position:relative;z-index:2}
#eh-story h2 em{font-style:normal;color:var(--eh-yellow)}
#eh-story p{font-size:1.04rem;line-height:1.65;color:rgba(255,252,247,.82);position:relative;z-index:2;font-weight:500}
#eh-story .stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px;position:relative;z-index:2}
#eh-story .n{font-family:'Fraunces',serif;font-size:2.5rem;color:var(--eh-yellow);line-height:1;font-weight:600}
#eh-story .l{font-size:.84rem;color:rgba(255,252,247,.72);margin-top:6px}

/* CTA */
#eh-cta .box{border-radius:30px;padding:64px 36px;text-align:center;position:relative;overflow:hidden;background:var(--eh-yellow);border:3px solid var(--eh-navy);box-shadow:0 14px 0 var(--eh-navy)}
#eh-cta h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2rem,5vw,3.4rem);color:var(--eh-navy);margin-bottom:12px;position:relative;z-index:2}
#eh-cta p{color:var(--eh-navy);opacity:.82;margin-bottom:28px;font-weight:600;position:relative;z-index:2}
#eh-cta .eh-btn{background:var(--eh-navy);box-shadow:0 7px 0 #000;position:relative;z-index:2}

/* reveal + toast */
.eh-reveal{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.eh-reveal.eh-in{opacity:1;transform:none}
#eh-toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);background:var(--eh-navy);color:#fff;font-weight:600;padding:13px 24px;border-radius:100px;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);opacity:0;transition:.3s;z-index:99999}
#eh-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:980px){
  #eh-hero .eh-grid,#eh-story .box{grid-template-columns:1fr;gap:40px}
  #eh-hero .eh-stage{order:-1;max-width:320px;margin:0 auto;width:100%}
}
/* ---- phones ---- */
@media(max-width:680px){
  #eh-hero{padding:54px 0 56px}
  #eh-hero .eh-utilbar{gap:16px;padding:0 2px 6px}
  #eh-hero .eh-logobar{padding-bottom:20px}
  #eh-hero .eh-logobar img{height:40px}
  #eh-hero h1{font-size:clamp(2.6rem,13vw,3.4rem);margin:14px 0 18px}
  #eh-hero p{font-size:1.04rem;margin-bottom:22px}
  #eh-hero .eh-stage{max-width:250px}
  .eh-orbit .track .bub{width:42px;height:42px;margin-left:-21px}
  .eh-orbit .track .bub svg{width:20px;height:20px}
  #eh-trust .eh-wrap{justify-content:flex-start;gap:14px 20px}
  #eh-trust .t{font-size:.82rem;flex:0 0 calc(50% - 14px)}
  .eh-sec{padding:48px 0}
  .eh-sec .head{margin-bottom:24px}
  .eh-sec .head .t{font-size:1.7rem}
  .eh-sec .head{align-items:flex-start;flex-direction:column}
  .eh-link{font-size:.84rem;padding:8px 14px}
  #eh-app .eh-wrap{padding:0 18px}

  /* collections: 2 across, shorter */
  #eh-cols .grid{grid-template-columns:1fr 1fr;gap:12px}
  .eh-col{min-height:158px;padding:14px;border-width:2.5px;border-radius:18px;box-shadow:0 6px 0 var(--eh-navy)}
  .eh-col h3{font-size:1.12rem}
  .eh-col .go{font-size:.74rem;margin-top:6px}
  .eh-col .tag{font-size:.6rem;margin-bottom:3px}
  .eh-col .emblem{width:78px;height:78px;right:-8px;top:-8px}
  .eh-col .grid-tex{background-size:16px 16px}

  /* products: 2 across, compact */
  #eh-prods .grid{grid-template-columns:1fr 1fr;gap:12px}
  .eh-card2{border-width:2.5px;border-radius:16px;box-shadow:0 6px 0 var(--eh-navy)}
  .eh-card2 .b{padding:11px 12px 14px}
  .eh-card2 .cl{font-size:.62rem;margin-bottom:4px}
  .eh-card2 h4{font-size:.86rem;margin-bottom:7px;line-height:1.2}
  .eh-card2 .price{font-size:1rem}
  .eh-card2 .quick{width:34px;height:34px;font-size:1.2rem;bottom:9px;right:9px;opacity:1;transform:none}

  #eh-story .box{padding:34px 22px}
  #eh-story .stats{gap:18px 14px}
  #eh-story .n{font-size:2rem}
  #eh-cta .box{padding:46px 22px}
  #eh-marquee div{font-size:1rem}
}
@media(max-width:380px){
  #eh-hero h1{font-size:2.4rem}
  #eh-hero .eh-stage{max-width:220px}
  #eh-trust .t{flex:0 0 100%}
  .eh-col{min-height:144px}
  .eh-card2 h4{font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  #eh-app *{animation:none!important;transition:none!important}
  .eh-reveal{opacity:1!important;transform:none!important}
  .eh-card2 .img img{clip-path:none!important}
  .eh-card2 .printline{display:none!important}
  #eh-glow{display:none}
}

/* ============================================================
   GLOBAL BRAND RESKIN — applies to ALL pages
   (product, category, cart, search, account, etc.)
   Restyles Zid's EXISTING pages to match the brand. Does NOT
   rebuild functionality (add-to-cart / variants / checkout stay native).
   Uses resilient [class*=] selectors; tune if a page needs it.
   ============================================================ */

/* primary buttons / add-to-cart across the store */
.btn:not(.eh-btn), a.button, button.button,
[class*="add-to-cart"], [class*="add_to_cart"], [class*="addToCart"],
[type="submit"]:not([class*="search"]){
  background:var(--eh-terra) !important;
  color:#fff !important;
  border:none !important;
  border-radius:100px !important;
  font-weight:700 !important;
  box-shadow:0 5px 0 0 var(--eh-terra-deep) !important;
  transition:transform .15s, box-shadow .15s !important;
}
.btn:not(.eh-btn):hover, [class*="add-to-cart"]:hover, [class*="add_to_cart"]:hover, [type="submit"]:hover{
  transform:translateY(-2px) !important; box-shadow:0 7px 0 0 var(--eh-terra-deep) !important;
}
.btn:not(.eh-btn):active, [class*="add-to-cart"]:active{ transform:translateY(2px) !important; box-shadow:0 2px 0 0 var(--eh-terra-deep) !important; }

/* secondary / outline buttons */
[class*="btn-outline"], [class*="button--secondary"]{
  background:#fff !important; color:var(--eh-navy) !important;
  border:2.5px solid var(--eh-navy) !important; border-radius:100px !important; font-weight:700 !important;
}

/* product cards on listing & category pages -> sticker style */
[class*="product-card"], [class*="product__item"], [class*="product-item"],
[class*="products-item"], [class*="productCard"], li[class*="product"]{
  border:2.5px solid var(--eh-navy) !important;
  border-radius:18px !important;
  box-shadow:0 8px 0 0 var(--eh-navy) !important;
  overflow:hidden !important;
  background:#fff !important;
  transition:transform .25s !important;
}
[class*="product-card"]:hover, [class*="product-item"]:hover, [class*="productCard"]:hover{
  transform:translateY(-6px) rotate(-1deg) !important;
}

/* prices everywhere */
[class*="price"]{ font-family:'Fraunces',serif !important; color:var(--eh-navy) !important; font-weight:600 !important; }
[class*="old-price"], [class*="price--old"], del{ color:var(--eh-mut) !important; }

/* product detail: round the gallery + tidy spacing */
[class*="product-detail"] img, [class*="product-page"] img, [class*="single-product"] img, [class*="product-gallery"] img{
  border-radius:16px !important;
}

/* inputs / selects / quantity boxes */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  border-radius:12px !important;
}

/* cart rows / summary */
[class*="cart-item"], [class*="cart__item"], [class*="cart-product"]{
  border:2px solid var(--eh-navy) !important; border-radius:16px !important; background:#fff !important;
}
[class*="cart-summary"], [class*="order-summary"], [class*="cart-total"]{
  border-radius:18px !important;
}

/* breadcrumbs / section titles -> brand type */
[class*="breadcrumb"]{ font-family:'Space Grotesk',sans-serif !important; }

/* page section headings -> serif (covers category titles, "all products" etc.) */
[class*="section-title"], [class*="page-title"], [class*="category-title"]{
  font-family:'Fraunces',serif !important; color:var(--eh-navy) !important;
}