:root{
    --ink:#12181A;
    --surface:#FFFFFF;
    --surface-2:#F6F8F8;
    --teal:#0E7C86;
    --teal-dark:#0A5960;
    --teal-tint:#E8F5F6;
    --gold:#C29D59;
    --gold-bright:#8E6C2D;
    --bone:#FAF9F6;
    --bone-dim:#5C6A67;
    --line:rgba(18, 24, 26, 0.08);
    --line-strong:rgba(18, 24, 26, 0.14);
    --heading:'El Messiri', sans-serif;
    --body:'Cairo', sans-serif;
    --wordmark:'Poppins', sans-serif;
    --cream:var(--bone); --white:#fff; --muted:var(--bone-dim);
    --shadow:0 24px 70px rgba(17,57,60,.10); --radius:26px; --gold-light:#f5dfae;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bone); color:var(--ink); font-family:var(--body); line-height:1.7;
    overflow-x:hidden; -webkit-font-smoothing:antialiased; padding-bottom:78px;
  }
  a{color:inherit; text-decoration:none;}
  ::selection{background:var(--teal); color:#fff;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  /* ===== TOP NOTICE ===== */
  .top-notice{ background:var(--teal-dark); color:#fff; font-size:13px; padding:8px 0; text-align:center;}
  .top-notice b{ color:var(--gold);}

  /* ===== NAV ===== */
  header{ position:sticky; top:0; z-index:40; background:rgba(250,249,246,.92); backdrop-filter:blur(10px); padding:15px 0; border-bottom:1px solid var(--line); transition:all .3s;}
  header.scrolled{ padding:10px 0; background:rgba(255,255,255,.98); box-shadow:0 4px 20px rgba(0,0,0,.03);}
  nav{display:flex; align-items:center; justify-content:space-between;}
  .logo{display:flex; align-items:center; gap:9px;}
  .logo .ring{ width:38px; height:38px; border-radius:50%; border:1.5px solid var(--teal); display:flex; align-items:center; justify-content:center;}
  .logo .ring svg{width:17px; height:17px; color:var(--gold);}
  .logo .word{font-family:var(--wordmark); font-weight:800; font-size:19px; letter-spacing:.2px;}
  .logo .word .jo{color:var(--teal);} .logo .word .teeth{color:var(--gold);}
  .nav-links{display:flex; gap:34px; font-size:14.5px; font-weight:600; color:var(--bone-dim);}
  .nav-links a:hover{color:var(--teal);}
  .cart-nav-btn{
    background:var(--teal-tint); border:1px solid rgba(14,124,134,.2); color:var(--teal-dark); padding:8px 18px;
    border-radius:50px; font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; cursor:pointer; transition:all .3s;
  }
  .cart-nav-btn:hover{ background:var(--teal); color:#fff;}
  .cart-nav-count{ background:var(--ink); color:#fff; font-size:11px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;}

  /* ===== HERO (brand-level, not product-level) ===== */
  .hero{ padding:76px 0 56px; text-align:center; position:relative; overflow:hidden;}
  .hero-blob{ position:absolute; border-radius:50%; z-index:0; filter:blur(30px); opacity:.35;}
  .hero-blob.b1{ width:260px; height:260px; background:var(--teal-tint); top:-60px; right:-80px;}
  .hero-blob.b2{ width:180px; height:180px; background:var(--gold-light,#fbeed4); bottom:0; left:-60px;}
  .hero > .wrap{ position:relative; z-index:1;}
  .icon-btn{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface);
    display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
  }
  .icon-btn .badge{
    position:absolute; top:-6px; right:-6px; background:var(--gold); color:#fff; font-size:10px; font-weight:800;
    width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  }
  .nav-icons{ display:flex; gap:10px; align-items:center;}
  .hero-ctas{ display:flex; gap:12px; justify-content:center; margin-bottom:34px; flex-wrap:wrap;}
  .btn-pill{ padding:14px 26px; border-radius:50px; font-size:14.5px; font-weight:700; display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;}
  .btn-pill.outline{ background:var(--surface); border:1.5px solid var(--line-strong); color:var(--ink);}
  .btn-pill.solid{ background:var(--teal); color:#fff;}
  .btn-pill.solid:hover{ background:var(--teal-dark);}
  .btn-pill.outline:hover{ border-color:var(--teal); color:var(--teal);}
  .hero-badge{
    display:inline-flex; align-items:center; gap:10px; color:var(--teal-dark);
    font-size:13px; font-weight:700; margin-bottom:22px;
  }
  .hero-badge::before{ content:''; width:26px; height:2px; background:var(--gold);}
  h1.hero-title{
    font-family:var(--body); font-weight:800; font-size:clamp(32px,5vw,52px); line-height:1.25;
    max-width:780px; margin:0 auto 18px; color:var(--ink);
  }
  h1.hero-title em{ color:var(--teal); font-style:normal;}
  .hero-sub{ font-size:16px; color:var(--bone-dim); max-width:540px; margin:0 auto 34px;}
  .hero-pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:820px; margin:0 auto;}
  .pillar{
    background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 10px;
    display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px; font-weight:700;
  }
  .pillar svg{ width:20px; height:20px; color:var(--teal);}

  /* ===== BRAND MARK MOMENT ===== */
  .mark-moment{ display:flex; justify-content:center; padding:20px 0 10px;}
  .mark-badge{
    width:190px; height:190px; border-radius:50%; border:2px solid var(--teal); background:var(--surface);
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
    box-shadow:0 30px 60px rgba(18,24,26,.08); position:relative; animation:float 6s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}
  .mark-badge::before{ content:''; position:absolute; inset:10px; border-radius:50%; border:1px solid var(--gold); opacity:.4;}
  .mark-badge .ring{ width:56px; height:56px; border-radius:50%; border:1.5px solid var(--teal); display:flex; align-items:center; justify-content:center; margin-bottom:8px;}
  .mark-badge .ring svg{ width:24px; height:24px; color:var(--gold);}
  .mark-badge .word{ font-family:var(--wordmark); font-weight:800; font-size:22px;}
  .mark-badge .word .jo{color:var(--teal);} .mark-badge .word .teeth{color:var(--gold);}
  .mark-badge .caption{ font-size:8.5px; letter-spacing:1.6px; color:var(--teal); text-transform:uppercase; font-weight:700; margin-top:3px;}

  section{ padding:86px 0; position:relative;}
  .section-head{ margin-bottom:44px; max-width:600px;}
  .section-head.center{ margin-inline:auto; text-align:center;}
  .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; letter-spacing:1px; color:var(--teal); text-transform:uppercase; font-weight:700; margin-bottom:12px;}
  .eyebrow::before{ content:''; width:22px; height:2px; background:var(--teal);}
  .section-head.center .eyebrow::before{ display:none;}
  .section-head h2{ font-family:var(--heading); font-weight:700; font-size:clamp(26px,3vw,36px); line-height:1.35;}
  .section-head p{ color:var(--bone-dim); margin-top:10px; font-size:15.5px;}

  /* ===== PRODUCTS ===== */
  .products-section{ background:var(--surface-2);}
  .filter-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
  .filter-btn{
    background:var(--surface); border:1px solid var(--line-strong); color:var(--bone-dim); padding:9px 20px;
    border-radius:30px; font-size:13px; font-weight:700; font-family:var(--body); cursor:pointer; transition:all .3s;
  }
  .filter-btn.active, .filter-btn:hover{ background:var(--teal); color:#fff; border-color:var(--teal);}
  .product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:26px;}
  .product-card{
    background:var(--surface); border:1px solid var(--line-strong); border-radius:20px; overflow:hidden;
    display:flex; flex-direction:column; position:relative; transition:all .3s cubic-bezier(.25,1,.5,1);
  }
  .product-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(18,24,26,.08); border-color:rgba(14,124,134,.35);}
  .product-tag{
    position:absolute; top:16px; inset-inline-start:16px; z-index:2; background:var(--ink); color:var(--gold);
    font-size:10.5px; font-weight:700; padding:5px 13px; border-radius:20px;
  }
  .product-tag.gold{ background:linear-gradient(135deg, var(--gold-bright), var(--gold)); color:#fff;}
  .product-image-box{ height:190px; background:var(--surface-2); display:flex; align-items:center; justify-content:center;}
  .product-visual{
    width:104px; height:104px; border-radius:50%; background:linear-gradient(145deg,#fff,#EEF3F3);
    display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(18,24,26,.06);
    transition:transform .35s cubic-bezier(.25,1,.5,1); border:1px solid rgba(255,255,255,.8);
  }
  .product-card:hover .product-visual{ transform:scale(1.08) rotate(-3deg);}
  .product-visual svg{ width:30px; height:30px; color:var(--teal); margin-bottom:5px;}
  .product-visual span{ font-size:9.5px; font-weight:700; color:var(--gold-bright);}
  .product-details{ padding:20px 22px 22px; display:flex; flex-direction:column; flex-grow:1;}
  .category-label{ font-size:11px; letter-spacing:.4px; text-transform:uppercase; color:var(--teal); font-weight:700; margin-bottom:7px;}
  .product-title{ font-family:var(--heading); font-weight:700; font-size:18px; margin-bottom:7px; line-height:1.35;}
  .product-desc{ font-size:13.3px; color:var(--bone-dim); margin-bottom:18px; flex-grow:1;}
  .product-footer{ display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:14px;}
  .price-box{ display:flex; flex-direction:column;}
  .old-price{ font-size:12px; color:#A0AEC0; text-decoration:line-through;}
  .current-price{ font-size:18px; font-weight:800; font-family:var(--heading);}
  .btn-add-round{
    background:var(--teal); color:#fff; border:none; width:42px; height:42px; border-radius:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .3s;
  }
  .btn-add-round:hover{ background:var(--teal-dark); transform:scale(1.06);}
  .btn-add-round svg{ width:16px; height:16px;}

  /* ===== TRUST ===== */
  .trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .trust-card{ text-align:center; padding:16px;}
  .trust-card .icon{
    width:66px; height:66px; margin:0 auto 18px; border:1.5px solid var(--teal); border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--teal); background:var(--teal-tint);
  }
  .trust-card .icon svg{ width:26px; height:26px;}
  .trust-card h4{ font-family:var(--heading); font-weight:700; font-size:17px; margin-bottom:7px;}
  .trust-card p{ font-size:13.5px; color:var(--bone-dim);}

  /* ===== STORY ===== */
  .story-section{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .story-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}
  .story-mark{ width:100%; max-width:280px; aspect-ratio:1/1; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; margin:0 auto; position:relative;}
  .story-mark svg{ width:40%; height:40%; color:var(--gold);}
  .story-mark::before{ content:''; position:absolute; inset:12%; border-radius:50%; border:1px dashed var(--teal); opacity:.4;}
  .story-copy h2{ font-family:var(--heading); font-weight:700; font-size:clamp(24px,3vw,34px); margin-bottom:16px; line-height:1.4;}
  .story-copy p{ color:var(--bone-dim); font-size:15px; margin-bottom:13px; max-width:520px;}
  .story-copy .sign{ font-family:var(--wordmark); font-weight:700; font-size:16px; margin-top:16px; color:var(--teal);}

  /* ===== CART DRAWER ===== */
  .cart-drawer-mask{ position:fixed; inset:0; background:rgba(18,24,26,.45); backdrop-filter:blur(4px); z-index:1000; opacity:0; visibility:hidden; transition:.3s;}
  .cart-drawer-mask.open{ opacity:1; visibility:visible;}
  .cart-drawer-sheet{
    position:fixed; top:0; left:-420px; width:100%; max-width:390px; height:100%; background:#fff; z-index:1001;
    padding:26px; display:flex; flex-direction:column; justify-content:space-between;
    transition:cubic-bezier(.16,1,.3,1) .4s; box-shadow:10px 0 35px rgba(0,0,0,.08); overflow-y:auto;
  }
  .cart-drawer-mask.open .cart-drawer-sheet{ left:0;}
  .cart-drawer-header{ display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid var(--line);}
  .cart-drawer-header h3{ font-family:var(--heading); font-size:1.2rem; font-weight:700;}
  .cart-items-box{ flex-grow:1; margin:18px 0; display:flex; flex-direction:column; gap:12px;}
  .cart-entry-row{ background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center;}

  /* ===== MOBILE DOCK ===== */
  .mobile-bottom-dock{
    position:fixed; bottom:12px; left:4%; right:4%; background:var(--surface); border:1.5px solid var(--line-strong);
    border-radius:100px; padding:8px 16px; display:flex; justify-content:space-between; align-items:center; z-index:900;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
  .dock-price{ font-family:var(--heading); font-size:1.1rem; font-weight:700;}
  .dock-sub{ font-size:11px; color:var(--bone-dim); margin-top:2px;}
  .btn-solid{ background:var(--teal); color:#fff; padding:10px 22px; border-radius:50px; font-weight:700; font-size:13.5px; border:none; cursor:pointer; transition:all .3s;}
  .btn-solid:hover{ background:var(--teal-dark);}
  .btn-solid.full{ width:100%; padding:15px; font-size:14.5px;}

  /* ===== FOOTER ===== */
  footer{ background:var(--ink); color:#fff; padding:64px 0 24px;}
  .footer-grid{ display:grid; grid-template-columns:1.3fr .7fr .7fr; gap:46px; margin-bottom:46px;}
  .footer-grid > div{ min-width:0; }
  .footer-brand .logo .word span{color:#fff;}
  .footer-brand .logo .word .jo{color:var(--teal);} .footer-brand .logo .word .teeth{color:var(--gold);}
  .footer-brand p{ color:rgba(255,255,255,.65); font-size:13.5px; max-width:300px; margin-top:12px;}
  footer h5{ font-size:12.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
  footer ul{ list-style:none;}
  footer li{ margin-bottom:9px; font-size:13.5px; color:rgba(255,255,255,.65);}
  footer a:hover{ color:var(--teal-tint);}
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:20px; display:flex; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:8px;}
  @media (max-width:700px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:24px; }
    .footer-brand{ grid-column:1 / -1; }
    .footer-brand p{ max-width:100%; }
  }

  /* ===== ported from base design (hero/trust-bar/products) ===== */
  .container{width:min(1180px,calc(100% - 40px));margin:auto}
  .hero{padding:74px 0 55px;overflow:hidden;position:relative}.hero:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:rgba(12,137,145,.06);left:-260px;top:-100px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--teal);font-size:13px;font-weight:800;letter-spacing:.5px;margin-bottom:20px}.hero-copy .eyebrow:before{content:"";width:34px;height:2px;background:var(--gold)}.hero-copy h1{font-family:'Playfair Display',serif;font-size:clamp(45px,5.4vw,78px);line-height:1.12;font-weight:700;letter-spacing:-2px;color:var(--ink)}.hero-copy h1 span{color:var(--teal)}.hero-copy p{color:var(--muted);font-size:17px;max-width:610px;margin:24px 0 30px}.cta-row{display:flex;gap:12px;flex-wrap:wrap}.cta-row .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 24px;border-radius:14px;font-weight:800;font-size:14px;transition:.25s;border:1px solid transparent;cursor:pointer}.btn-primary{background:var(--teal);color:#fff;box-shadow:0 12px 25px rgba(12,137,145,.20)}.btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px)}.btn-outline{background:white;border-color:#dce5e3;color:var(--ink)}.btn-outline:hover{border-color:var(--teal);color:var(--teal)}.hero-card{position:relative;min-height:540px;display:grid;place-items:center}.hero-ring{position:absolute;width:490px;height:490px;border-radius:50%;border:1px solid rgba(216,154,33,.35)}.hero-ring:before{content:"";position:absolute;inset:18px;border:1px solid rgba(12,137,145,.18);border-radius:50%}.product-showcase{position:relative;width:min(390px,78vw);aspect-ratio:1;background:white;border-radius:50%;box-shadow:var(--shadow);display:grid;place-items:center;border:8px solid #fff}.product-showcase:after{content:"NATURAL\A TOOTH CARE";white-space:pre;text-align:center;position:absolute;bottom:35px;color:var(--teal);font-weight:800;font-size:11px;letter-spacing:2px}.product-showcase img{width:78%;height:78%;object-fit:contain;border-radius:50%}.hero-card .badge{position:absolute;top:34px;right:8px;background:white;border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.08);padding:12px 16px;border-radius:16px;font-size:12px;font-weight:800}.hero-card .badge b{color:var(--gold);display:block;font-size:16px}
  .trust-bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;background:white}.trust-bar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.trust-bar-item{display:flex;align-items:center;justify-content:center;gap:10px;color:#526668;font-size:13px;font-weight:700}.trust-bar-item strong{color:var(--teal);font-size:20px}
  .base-section{padding:100px 0}.base-section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.kicker{color:var(--gold);font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase}.base-section-head h2{font-family:'Playfair Display',serif;font-size:clamp(34px,4vw,52px);line-height:1.2;margin-top:7px;color:var(--ink)}.base-section-head p{max-width:500px;color:var(--muted);font-size:14px}
  .products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s;position:relative}.product:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.product-img{height:290px;background:#f3f7f4;display:grid;place-items:center;position:relative}.product-img .jar{width:100%;height:100%;border-radius:0;background:#fff;display:grid;place-items:center;padding:0;overflow:hidden}.product-img .jar img{width:100%;height:100%;object-fit:cover;border-radius:0}.product-img .tag{position:absolute;top:16px;right:16px;background:var(--teal);color:white;padding:6px 10px;border-radius:9px;font-size:10px;font-weight:800}.product-body{padding:22px}.product-body h3{font-size:18px;margin-bottom:7px;font-family:var(--body)}.product-body p{font-size:13px;color:var(--muted);min-height:52px;max-height:52px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}.price-row{display:flex;align-items:center;justify-content:space-between;margin-top:17px}.price-row .price{font-weight:800;color:var(--teal);font-size:20px}.price-row .add{width:43px;height:43px;border-radius:13px;border:0;background:var(--gold);color:#fff;cursor:pointer;font-size:20px;transition:.2s}.price-row .add:hover{transform:scale(1.06)}
  @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-copy{text-align:center;} .hero-copy p{margin-left:auto;margin-right:auto;} .hero-copy .eyebrow{justify-content:center;} .cta-row{justify-content:center;} .hero-card{min-height:420px;} .hero-ring{width:380px;height:380px;} .products{grid-template-columns:repeat(2,1fr);} .base-section-head{display:block;} .base-section-head p{margin-top:12px;} .trust-bar-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:600px){ .products{grid-template-columns:1fr;} .product-img{height:250px;} .hero-ring{width:300px;height:300px;} .product-showcase{width:260px;}}

  @media (max-width:880px){
    .nav-links{
      display:none; position:absolute; top:100%; inset-inline:0; background:var(--surface); flex-direction:column;
      padding:14px 20px; border-bottom:1px solid var(--line); gap:14px; text-align:center;
    }
    .nav-links.open{ display:flex;}
    header{ position:relative;}
    .hero-pillars{ grid-template-columns:repeat(2,1fr);}
    .story-grid{ grid-template-columns:1fr; text-align:center;}
    section{ padding:60px 0;}
    .wrap{ padding:0 20px;}
  }