/*
Theme Name: Jabal Al Wadi Printing
Theme URI: https://jabalalwadiprinting.ae
Author: Jabal Al Wadi Printing
Description: Custom WooCommerce theme for Jabal Al Wadi Printing — UAE print shop. Ported 1:1 from the approved static prototype. Note: duplicate :root / reset rules appear once per source page block below (harmless — later identical rules simply re-apply); kept intact rather than risking a broken dedup.
Version: 1.3.0
Requires PHP: 7.4
Text Domain: jabal-alwadi
*/

  /* ===================== FROM HOME PAGE ===================== */
  :root{
    --cream:#ffffff;
    --cream-soft:#f2e9d8;
    --cream-soft-2:#ece0c9;
    --purple-900:#341759;
    --purple-800:#432171;
    --purple-700:#5b2a86;
    --purple-600:#7238a3;
    --purple-500:#8a4fbd;
    --purple-300:#b98fdc;
    --purple-100:#e9dcf5; --gray-100:#f0f0f0;
    --pink-500:#c65fa6;
    --blue-500:#3f6fc0;
    --orange-700:#d85a2a;
    --orange-600:#e8672f;
    --orange-500:#f2854f;
    --orange-300:#ffb27a;
    --ink:#121212;
    --ink-soft:#5c5c5c;
    --ink-faint:#999999;
    --line:#e6d9c3;
    --line-strong:#d8c4a3;
    --radius:16px;
    --radius-sm:10px;
    --container:1240px;
    --grad-brand: linear-gradient(100deg, var(--purple-700) 0%, var(--purple-500) 45%, var(--orange-500) 100%);
    --grad-brand-soft: linear-gradient(120deg, var(--purple-100) 0%, #fbe6d8 100%);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Plus Jakarta Sans', sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  .wrap{max-width:var(--container); margin:0 auto; padding:0 32px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  h1,h2,h3{font-weight:800; letter-spacing:-0.02em; line-height:1.05;}
  ul{list-style:none;}

  /* ===== buttons ===== */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-weight:700; font-size:15px;
    padding:14px 26px;
    border-radius:999px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    white-space:nowrap;
  }
  .btn--primary{ background:#0a0a0a; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .btn--primary:hover{ background:#222; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.24); }
  .btn--outline{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
  .btn--outline:hover{ border-color:var(--ink); transform:translateY(-1px); }
  .btn--sm{ padding:10px 18px; font-size:13.5px; }
  .btn--white{ background:#fff; color:var(--ink); }
  .btn--white:hover{ background:#fdf6ea; transform:translateY(-2px); }
  .btn--ghost-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
  .btn--ghost-dark:hover{ border-color:#fff; }

  /* ===== announcement bar ===== */
  .announce{
    background:var(--grad-brand); color:#fff; text-align:center;
    font-size:13px; font-weight:600; letter-spacing:.01em;
    padding:10px 20px;
  }
  .announce span{ color:rgba(255,255,255,.82); font-weight:500; }

  /* brand mark: mountain logo */
  .brand-mark{ width:38px; height:38px; flex-shrink:0; }

  /* ===== header ===== */
  header{
    position:sticky; top:0; z-index:200;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0 12px; }
  .nav-bottom{ display:flex; align-items:center; justify-content:flex-start; padding:9px 0; border-top:1px solid var(--line); }
  .nav-bottom .wrap{ max-width:none; }
  .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .brand-name{ font-weight:800; font-size:16px; letter-spacing:-0.01em; white-space:nowrap; color:var(--ink); }
  .brand-name small{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-600); }

  .search-bar{
    flex:1; max-width:400px;
    display:flex; align-items:center; gap:10px;
    background:#fff; border:1px solid var(--line);
    border-radius:999px; padding:10px 16px;
    color:var(--ink-faint); font-size:14px;
  }
  .search-bar svg{ width:16px; height:16px; flex-shrink:0; color:var(--ink); }

  .nav-links{ display:flex; align-items:center; justify-content:flex-start; gap:20px; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ font-size:13.5px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; transition:color .15s ease; flex-shrink:0; }
  .nav-links a.deals{ color:var(--orange-600); font-weight:700; }
  .nav-links a.deals:hover{ color:var(--orange-700); }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links svg{ width:13px; height:13px; }
  .nav-dropdown{ position:static; flex-shrink:0; }
  .nav-bottom{ position:relative; }
  .mega-panel{
    position:absolute; top:100%; left:0; width:100%;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 28px 56px rgba(0,0,0,.14);
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .mega-panel, .nav-dropdown:focus-within .mega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .mega-inner{ max-width:1520px; margin:0 auto; padding:36px 32px 40px; display:flex; gap:40px; overflow-x:auto; }
  .mega-col{ min-width:150px; flex-shrink:0; }
  .mega-col:last-of-type{ border-left:1px solid var(--line); padding-left:28px; }
  .mega-col h4{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:14px; }
  .mega-group{ margin-bottom:22px; }
  .mega-group:last-child{ margin-bottom:0; }
  .mega-standalone{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); }
  .mega-standalone:hover{ color:var(--purple-700); }
  .mega-col a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; font-weight:500; white-space:nowrap; }
  .mega-col a:hover{ color:var(--purple-700); }
  .mega-feature{ flex-shrink:0; width:200px; margin-left:auto; display:block; }
  .mega-feature .thumb{ width:200px; height:140px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-feature .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-feature .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .thumb.thumb-placeholder{ background:var(--gray-100); }
  .thumb.thumb-placeholder::after{ display:none; }
  .thumb.thumb-placeholder svg{ color:var(--ink-faint); width:30px; height:30px; }
  .mega-feature .cap-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-feature .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .mega-cards{ gap:28px; }
  .mega-card{ width:200px; flex-shrink:0; display:block; }
  .mega-card .thumb{ width:200px; height:150px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-card .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-card .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .mega-card .cap-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-card .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .dropdown-panel{
    position:absolute; top:100%; left:0; margin-top:16px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 24px 48px rgba(0,0,0,.14); padding:22px;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 30px; width:520px; }
  .dd-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .dd-item .ic{ width:52px; height:52px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; transition:background .18s ease; }
  .dd-item .ic svg{ width:22px; height:22px; color:var(--ink); transition:color .18s ease; }
  .dd-item:hover .ic{ background:#0a0a0a; }
  .dd-item:hover .ic svg{ color:#fff; }
  .dd-item .lbl{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; }
  .util-link{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
  .util-link svg{ width:16px; height:16px; flex-shrink:0; }
  .util-link:hover{ color:var(--ink); }

  .nav-actions{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
  .nav-actions .signin{ font-size:14.5px; font-weight:600; color:var(--ink-soft); }
  .nav-actions .signin:hover{ color:var(--ink); }
  .icon-btn{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--ink-soft); transition:border-color .15s ease, color .15s ease; }
  .icon-btn:hover{ border-color:var(--ink); color:var(--ink); }
  .icon-btn svg{ width:17px; height:17px; }
  .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
  .burger span{ width:22px; height:2px; background:var(--ink); }

  /* ===== hero ===== */
  .hero{ padding:64px 0 88px; position:relative; overflow:hidden; }
  .hero-waves{
    position:absolute; top:-10%; right:-10%; width:60%; height:120%;
    background-image: repeating-radial-gradient(circle at 30% 40%, transparent 0, transparent 18px, rgba(114,56,163,.05) 19px, rgba(114,56,163,.05) 20px);
    pointer-events:none; z-index:0;
  }
  .hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; position:relative; z-index:1; }
  .eyebrow-chip{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--line);
    border-radius:999px; padding:7px 14px;
    font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink);
    margin-bottom:22px;
  }
  .eyebrow-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--grad-brand); }
  .hero h1{ font-size:clamp(38px, 4.4vw, 58px); margin-bottom:20px; color:var(--ink); }
  .hero h1 .hl{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.lead{ font-size:17px; color:var(--ink-soft); max-width:460px; margin-bottom:32px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
  .hero-fine{ font-size:13.5px; color:var(--ink-faint); margin-bottom:40px; }
  .hero-fine b{ color:var(--ink); font-weight:700; }

  .live-orders{ display:flex; gap:34px; flex-wrap:wrap; }
  .live-orders .label{ font-size:12.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; width:100%; margin-bottom:14px; }
  .order-item{ display:flex; align-items:center; gap:10px; }
  .order-item .pin{
    width:30px; height:30px; border-radius:50%; background:var(--purple-100); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .order-item .pin svg{ width:14px; height:14px; color:var(--purple-700); }
  .order-item .city{ font-size:13.5px; font-weight:700; }
  .order-item .time{ font-size:12px; color:var(--ink-faint); }

  /* hero visual collage */
  .collage{
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:14px;
    aspect-ratio:1/0.95;
  }
  .collage-card{
    border-radius:var(--radius); position:relative; overflow:hidden;
    display:flex; align-items:flex-end; padding:18px;
    border:1px solid var(--line); box-shadow:0 14px 30px rgba(67,33,113,.1);
  }
  .collage-card .tag{
    background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:999px;
    padding:6px 12px; font-size:11.5px; font-weight:700; color:var(--purple-800);
  }
  .collage-card.bcards{ background:#fff; align-items:stretch; justify-content:center; padding:22px;}
  .bc-stack{ position:relative; width:100%; height:100%; }
  .bc{
    position:absolute; width:78%; aspect-ratio:1.6/1; border-radius:8px;
    left:11%; box-shadow:0 10px 22px rgba(67,33,113,.18);
    padding:12px 14px; display:flex; flex-direction:column; justify-content:space-between;
  }
  .bc.b1{ top:6%; transform:rotate(-6deg); background:#fff; border:1.5px solid var(--purple-300); z-index:1;}
  .bc.b2{ top:30%; transform:rotate(3deg); background:var(--grad-brand); z-index:2;}
  .bc .yourlogo{ font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
  .bc.b1 .yourlogo{ color:var(--purple-700);}
  .bc.b2 .yourlogo{ color:#fff;}
  .bc .line{ height:3px; border-radius:2px; }
  .bc.b1 .line{ background:var(--line-strong); width:60%;}
  .bc.b2 .line{ background:rgba(255,255,255,.45); width:50%;}

  .collage-card.banner{ background:var(--grad-brand); align-items:flex-start;}
  .banner-roll{ width:52px; height:100%; background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.15)); border-radius:26px; margin:0 auto; }
  .collage-card.banner .tag{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#fff;}

  .collage-card.box{ justify-content:center; background:linear-gradient(135deg, var(--orange-300), var(--orange-600)); }
  .box-shape{
    width:74%; aspect-ratio:1/1; border:2px solid #fff; border-radius:6px; position:relative;
    background:repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 2px, transparent 2px 14px);
  }
  .box-shape::before{ content:""; position:absolute; inset:14%; border:1.5px dashed rgba(255,255,255,.6); border-radius:4px;}
  .collage-card.box .tag{ position:absolute; top:16px; left:16px; }

  .collage-card.sticker{ justify-content:center; background:linear-gradient(135deg, var(--purple-100), #fff); }
  .sticker-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:80%;}
  .sticker-grid span{ aspect-ratio:1/1; border-radius:50%; border:1.5px solid var(--purple-500); background:#fff;}
  .sticker-grid span:nth-child(3n+1){ background:var(--purple-500);}
  .sticker-grid span:nth-child(3n+2){ background:var(--orange-500); border-color:var(--orange-500);}
  .collage-card.sticker .tag{ position:absolute; top:16px; left:16px; }

  /* ===== explore all categories ===== */
  .explore{ padding:56px 0 60px; border-top:1px solid var(--line); }
  .explore-head{ margin-bottom:24px; }
  .explore-head h2{ font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-0.02em; }
  .explore-wrap{ position:relative; padding:0 32px; }
  .explore-strip{ display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:4px; }
  .explore-strip::-webkit-scrollbar{ display:none; }
  .explore-card{ flex-shrink:0; width:210px; }
  .explore-thumb{ width:210px; height:190px; border-radius:14px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; margin-bottom:12px; transition:transform .2s ease; }
  .explore-card:hover .explore-thumb{ transform:translateY(-4px); }
  .explore-thumb svg{ width:34px; height:34px; color:var(--ink-faint); }
  .explore-label{ font-size:14px; font-weight:700; color:var(--ink); }
  .explore-next{ position:absolute; right:0; top:75px; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px rgba(0,0,0,.10); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2; transition:background .18s ease, border-color .18s ease; }
  .explore-next:hover{ background:#0a0a0a; border-color:transparent; }
  .explore-next:hover svg{ color:#fff; }
  .explore-next svg{ width:16px; height:16px; color:var(--ink); }

  /* ===== business essentials ===== */
  .biz-essentials{ padding:60px 0 70px; border-top:1px solid var(--line); }
  .biz-essentials .wrap > h2{ font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-0.02em; margin-bottom:24px; }
  .biz-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
  .biz-card{ display:block; }
  .biz-thumb{ width:100%; aspect-ratio:1/0.9; border-radius:14px; background:var(--gray-100); display:flex; align-items:center; justify-content:center; margin-bottom:12px; transition:transform .2s ease; }
  .biz-card:hover .biz-thumb{ transform:translateY(-4px); }
  .biz-thumb svg{ width:32px; height:32px; color:var(--ink-faint); }
  .biz-label{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.3; }

  /* ===== best sellers ===== */
  .bestsellers{ padding:70px 0; background:linear-gradient(120deg, var(--purple-900), var(--purple-700) 60%, var(--orange-600) 130%); color:#fff; }
  .bestsellers .wrap > h2{ font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-0.02em; margin-bottom:24px; color:#fff; }
  .bs-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
  .bs-card{ display:block; }
  .bs-thumb{ width:100%; aspect-ratio:1/0.9; border-radius:14px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; margin-bottom:12px; transition:transform .2s ease; }
  .bs-card:hover .bs-thumb{ transform:translateY(-4px); }
  .bs-thumb svg{ width:32px; height:32px; color:rgba(255,255,255,.65); }
  .bs-label{ font-size:13.5px; font-weight:700; color:#fff; line-height:1.3; margin-bottom:4px; }
  .bs-price{ font-size:12px; color:rgba(255,255,255,.7); font-weight:600; }

  /* ===== product grid ===== */
  .products{ padding:100px 0; }
  .section-head{ text-align:center; max-width:560px; margin:0 auto 56px; }
  .section-head .eyebrow-chip{ margin-bottom:16px; }
  .section-head h2{ font-size:clamp(30px,3.6vw,44px); margin-bottom:14px; }
  .section-head p{ color:var(--ink-soft); font-size:15.5px; }

  .product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
  .product-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  }
  .product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(67,33,113,.16); }
  .product-thumb{
    aspect-ratio:1/0.82; position:relative; display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .product-thumb svg{ width:44px; height:44px; color:#fff; position:relative; z-index:1; }
  .product-thumb .price-tag{
    position:absolute; top:12px; right:12px; background:rgba(255,255,255,.92); color:var(--purple-800);
    font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; z-index:2;
  }
  .product-thumb::after{
    content:""; position:absolute; inset:0; opacity:.5;
    background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px);
    background-size:14px 14px;
  }
  .thumb-1{ background:linear-gradient(135deg, var(--purple-600), var(--purple-800)); }
  .thumb-2{ background:linear-gradient(135deg, var(--orange-500), var(--orange-700)); }
  .thumb-3{ background:linear-gradient(135deg, var(--pink-500), var(--purple-700)); }
  .thumb-4{ background:linear-gradient(135deg, var(--blue-500), var(--purple-700)); }
  .thumb-5{ background:linear-gradient(135deg, var(--purple-500), var(--orange-500)); }
  .thumb-6{ background:linear-gradient(135deg, var(--orange-300), var(--pink-500)); }
  .thumb-7{ background:linear-gradient(135deg, var(--purple-700), var(--blue-500)); }
  .thumb-8{ background:linear-gradient(135deg, var(--pink-500), var(--orange-500)); }

  .product-body{ padding:18px 20px 20px; }
  .product-body h3{ font-size:15.5px; font-weight:700; margin-bottom:4px; letter-spacing:-0.01em; }
  .product-body .desc{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }
  .product-footer{ display:flex; align-items:center; justify-content:space-between; }
  .product-footer .from{ font-size:11.5px; color:var(--ink-faint); font-weight:600; }
  .product-footer .price{ font-size:16px; font-weight:800; color:var(--ink); }
  .order-link{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%; background:var(--gray-100); color:var(--ink);
    transition:background .18s ease, color .18s ease;
  }
  .order-link:hover{ background:#0a0a0a; color:#fff; }
  .order-link svg{ width:15px; height:15px; }

  .products-cta{ text-align:center; margin-top:48px; }

  /* ===== bold statement section ===== */
  .statement{ padding:100px 0; background:#fff; position:relative; }
  .statement-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:70px; align-items:center; }
  .statement h2{ font-size:clamp(34px,4vw,50px); margin-bottom:22px; }
  .statement p.desc{ font-size:16px; color:var(--ink-soft); max-width:420px; margin-bottom:36px; }
  .stat-list{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .stat-item .num{ font-size:30px; font-weight:800; letter-spacing:-0.02em; color:var(--ink); }
  .stat-item .lbl{ font-size:13px; color:var(--ink-soft); font-weight:600; margin-top:4px; }

  .quad{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .quad-card{
    aspect-ratio:1/1; border-radius:var(--radius); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
    box-shadow:0 14px 30px rgba(67,33,113,.12);
  }
  .quad-card.q1{ background:linear-gradient(135deg, var(--purple-100), #fff); }
  .quad-card.q2{ background:var(--grad-brand); }
  .quad-card.q3{ background:#fff; }
  .quad-card.q4{ background:linear-gradient(135deg, var(--orange-300), var(--orange-600)); }
  .quad-card .badge{
    position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); border-radius:999px;
    padding:5px 11px; font-size:10.5px; font-weight:700; color:var(--purple-800);
  }
  .quad-card.q2 .badge{ background:rgba(255,255,255,.18); color:#fff; }
  .quad-card.q4 .badge{ background:rgba(255,255,255,.85); }
  .flag{ width:60%; height:80%; background:repeating-linear-gradient(45deg, var(--purple-500) 0 6px, transparent 6px 12px); border:2px solid var(--purple-600); border-radius:4px;}
  .mug-shape{ width:52%; height:62%; border:3px solid #fff; border-radius:6px; position:relative;}
  .mug-shape::after{ content:""; position:absolute; right:-16px; top:20%; width:16px; height:40%; border:3px solid #fff; border-left:none; border-radius:0 20px 20px 0;}
  .tote-shape{ width:56%; height:66%; border:2px solid #fff; border-radius:4px; position:relative;}
  .tote-shape::before{ content:""; position:absolute; top:-14px; left:20%; width:60%; height:20px; border:2px solid #fff; border-bottom:none; border-radius:14px 14px 0 0;}
  .doc-shape{ width:50%; height:70%; background:var(--cream); border:2px solid var(--purple-600); border-radius:4px; padding:10px; display:flex; flex-direction:column; gap:6px; justify-content:center;}
  .doc-shape span{ height:3px; background:var(--line-strong); border-radius:2px; }
  .doc-shape span:nth-child(1){ width:80%; background:var(--purple-600); }

  /* ===== how it works ===== */
  .how{ padding:100px 0; background:#fff; }
  .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .step-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; }
  .step-card .num{
    width:38px; height:38px; border-radius:50%; background:#0a0a0a; color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; margin-bottom:20px;
  }
  .step-card h3{ font-size:17px; font-weight:700; margin-bottom:8px; letter-spacing:-0.01em;}
  .step-card p{ font-size:13.5px; color:var(--ink-soft); }

  /* ===== ratings ===== */
  .ratings{ padding:100px 0; }
  .rating-top{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:52px; flex-wrap:wrap; }
  .stars{ display:flex; gap:3px; }
  .stars svg{ width:20px; height:20px; color:var(--orange-500); }
  .rating-top .score{ font-weight:800; font-size:18px; }
  .rating-top .of{ color:var(--ink-faint); font-size:14px; }
  .testimonials{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .t-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
  .t-card p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:20px; line-height:1.6; }
  .t-who{ display:flex; align-items:center; gap:12px; }
  .t-avatar{ width:38px; height:38px; border-radius:50%; background:#0a0a0a; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
  .t-name{ font-size:13.5px; font-weight:700; }
  .t-role{ font-size:12px; color:var(--ink-faint); }

  /* ===== dark CTA ===== */
  .cta-dark{ background:linear-gradient(120deg, var(--purple-900), var(--purple-700) 60%, var(--orange-600) 130%); color:#fff; padding:90px 0; position:relative; overflow:hidden; }
  .cta-dark-inner{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; z-index:1; }
  .cta-dark h2{ color:#fff; font-size:clamp(30px,3.6vw,44px); max-width:520px; }
  .cta-dark p{ color:rgba(255,255,255,.72); margin:14px 0 0; max-width:420px; font-size:15px; }
  .cta-actions{ display:flex; gap:14px; flex-wrap:wrap; }

  /* ===== footer ===== */
  footer{ padding:70px 0 0; background:var(--purple-900); color:#fff; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:56px; }
  .foot-brand p{ color:rgba(255,255,255,.6); font-size:13.5px; margin-top:14px; max-width:260px; }
  .foot-brand .brand-name{ color:#fff; }
  .foot-brand .brand-name small{ color:var(--orange-300); }
  .foot-col h4{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--orange-300); margin-bottom:18px; }
  .foot-col a{ display:block; font-size:13.5px; color:rgba(255,255,255,.72); margin-bottom:12px; }
  .foot-col a:hover{ color:#fff; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.14); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
  .foot-bottom p{ font-size:12.5px; color:rgba(255,255,255,.5); }

  /* ===== reveal ===== */
  [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
  [data-reveal].in{ opacity:1; transform:translateY(0); }

  /* ===== responsive ===== */
  @media (max-width: 980px){
    .hero-grid{ grid-template-columns:1fr; }
    .nav-bottom, .util-link{ display:none; }
    .burger{ display:flex; }
    .statement-grid{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:repeat(2,1fr); }
    .testimonials{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .biz-grid, .bs-grid{ grid-template-columns:repeat(3,1fr); }
  }
  @media (max-width:560px){
    .wrap{ padding:0 20px; }
    .steps{ grid-template-columns:1fr; }
    .stat-list{ grid-template-columns:1fr 1fr; }
    .foot-grid{ grid-template-columns:1fr; }
    .biz-grid, .bs-grid{ grid-template-columns:repeat(2,1fr); }
    .cta-dark-inner{ flex-direction:column; align-items:flex-start; }
    .product-grid{ grid-template-columns:1fr; }
  }

  /* ===================== FROM PRODUCTS LISTING PAGE ===================== */
  :root{
    --cream:#ffffff; --cream-soft:#f2e9d8; --cream-soft-2:#ece0c9;
    --purple-900:#341759; --purple-800:#432171; --purple-700:#5b2a86; --purple-600:#7238a3; --purple-500:#8a4fbd; --purple-300:#b98fdc; --purple-100:#e9dcf5; --gray-100:#f0f0f0;
    --pink-500:#c65fa6; --blue-500:#3f6fc0;
    --orange-700:#d85a2a; --orange-600:#e8672f; --orange-500:#f2854f; --orange-300:#ffb27a;
    --ink:#121212; --ink-soft:#5c5c5c; --ink-faint:#999999;
    --line:#e6d9c3; --line-strong:#d8c4a3;
    --radius:16px; --radius-sm:10px; --container:1240px;
    --grad-brand: linear-gradient(100deg, var(--purple-700) 0%, var(--purple-500) 45%, var(--orange-500) 100%);
    --grad-brand-soft: linear-gradient(120deg, var(--purple-100) 0%, #fbe6d8 100%);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{ font-family:'Plus Jakarta Sans', sans-serif; color:var(--ink); background:var(--cream); line-height:1.5; -webkit-font-smoothing:antialiased; }
  .wrap{max-width:var(--container); margin:0 auto; padding:0 32px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  h1,h2,h3{font-weight:800; letter-spacing:-0.02em; line-height:1.05;}
  ul{list-style:none;}

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap; }
  .btn--primary{ background:#0a0a0a; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .btn--primary:hover{ background:#222; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.24); }
  .btn--outline{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
  .btn--outline:hover{ border-color:var(--ink); transform:translateY(-1px); }
  .btn--sm{ padding:10px 18px; font-size:13.5px; }

  .announce{ background:var(--grad-brand); color:#fff; text-align:center; font-size:13px; font-weight:600; padding:10px 20px; }
  .announce span{ color:rgba(255,255,255,.82); font-weight:500; }
  .brand-mark{ width:38px; height:38px; flex-shrink:0; }

  header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .nav-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0 12px; }
  .nav-bottom{ display:flex; align-items:center; justify-content:flex-start; padding:9px 0; border-top:1px solid var(--line); }
  .nav-bottom .wrap{ max-width:none; }
  .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .brand-name{ font-weight:800; font-size:16px; letter-spacing:-0.01em; white-space:nowrap; color:var(--ink); }
  .brand-name small{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-600); }
  .search-bar{ flex:1; max-width:400px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--ink-faint); font-size:14px; }
  .search-bar svg{ width:16px; height:16px; flex-shrink:0; color:var(--ink); }
  .nav-links{ display:flex; align-items:center; justify-content:flex-start; gap:20px; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ font-size:13.5px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; transition:color .15s ease; flex-shrink:0; }
  .nav-links a.deals{ color:var(--orange-600); font-weight:700; }
  .nav-links a.deals:hover{ color:var(--orange-700); }
  .nav-links svg{ width:13px; height:13px; }
  .nav-dropdown{ position:static; flex-shrink:0; }
  .nav-bottom{ position:relative; }
  .mega-panel{
    position:absolute; top:100%; left:0; width:100%;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 28px 56px rgba(0,0,0,.14);
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .mega-panel, .nav-dropdown:focus-within .mega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .mega-inner{ max-width:1520px; margin:0 auto; padding:36px 32px 40px; display:flex; gap:40px; overflow-x:auto; }
  .mega-col{ min-width:150px; flex-shrink:0; }
  .mega-col:last-of-type{ border-left:1px solid var(--line); padding-left:28px; }
  .mega-col h4{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:14px; }
  .mega-group{ margin-bottom:22px; }
  .mega-group:last-child{ margin-bottom:0; }
  .mega-standalone{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); }
  .mega-standalone:hover{ color:var(--purple-700); }
  .mega-col a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; font-weight:500; white-space:nowrap; }
  .mega-col a:hover{ color:var(--purple-700); }
  .mega-feature{ flex-shrink:0; width:200px; margin-left:auto; display:block; }
  .mega-feature .thumb{ width:200px; height:140px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-feature .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-feature .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .thumb.thumb-placeholder{ background:var(--gray-100); }
  .thumb.thumb-placeholder::after{ display:none; }
  .thumb.thumb-placeholder svg{ color:var(--ink-faint); width:30px; height:30px; }
  .mega-feature .cap-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-feature .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .mega-cards{ gap:28px; }
  .mega-card{ width:200px; flex-shrink:0; display:block; }
  .mega-card .thumb{ width:200px; height:150px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-card .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-card .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .mega-card .cap-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-card .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .dropdown-panel{
    position:absolute; top:100%; left:0; margin-top:16px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 24px 48px rgba(0,0,0,.14); padding:22px;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 30px; width:520px; }
  .dd-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .dd-item .ic{ width:52px; height:52px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; transition:background .18s ease; }
  .dd-item .ic svg{ width:22px; height:22px; color:var(--ink); transition:color .18s ease; }
  .dd-item:hover .ic{ background:#0a0a0a; }
  .dd-item:hover .ic svg{ color:#fff; }
  .dd-item .lbl{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; }
  .nav-links a.active{ color:var(--ink); }
  .nav-links a:hover{ color:var(--ink); }
  .util-link{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
  .util-link svg{ width:16px; height:16px; flex-shrink:0; }
  .util-link:hover{ color:var(--ink); }
  .nav-actions{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
  .nav-actions .signin{ font-size:14.5px; font-weight:600; color:var(--ink-soft); }
  .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
  .burger span{ width:22px; height:2px; background:var(--purple-700); }

  /* breadcrumb */
  .crumb{ padding:22px 0 0; font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
  .crumb a{ color:var(--purple-600); }
  .crumb a:hover{ color:var(--purple-800); }

  .page-head{ padding:18px 0 8px; }
  .page-head h1{ font-size:clamp(30px,3.6vw,42px); }
  .page-head p{ color:var(--ink-soft); font-size:15px; margin-top:8px; max-width:520px; }

  /* category filter row */
  .cat-filter{ padding:32px 0; }
  .cat-filter-inner{ display:flex; gap:14px; flex-wrap:wrap; }
  .cat-chip{
    display:flex; align-items:center; gap:10px; padding:10px 18px 10px 10px;
    border-radius:999px; border:1.5px solid var(--line); background:#fff; cursor:pointer;
    font-size:13px; font-weight:700; color:var(--ink-soft); transition:border-color .18s ease, background .18s ease, color .18s ease;
  }
  .cat-chip .ic{ width:30px; height:30px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .cat-chip .ic svg{ width:15px; height:15px; color:var(--ink); }
  .cat-chip.active, .cat-chip:hover{ border-color:transparent; background:#0a0a0a; color:#fff; }
  .cat-chip.active .ic, .cat-chip:hover .ic{ background:rgba(255,255,255,.2); }
  .cat-chip.active .ic svg, .cat-chip:hover .ic svg{ color:#fff; }

  /* search/sort/filter bar */
  .toolbar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 0 8px; border-top:1px solid var(--line); }
  .toolbar-search{ flex:1; min-width:220px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:12px 18px; }
  .toolbar-search svg{ width:16px; height:16px; color:var(--ink); flex-shrink:0; }
  .toolbar-search input{ border:none; outline:none; background:none; font-family:inherit; font-size:14px; width:100%; color:var(--ink); }
  .toolbar-search input::placeholder{ color:var(--ink-faint); }
  select.sortsel{
    appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236d5c82" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 14px center/14px;
    border:1px solid var(--line); border-radius:999px; padding:12px 40px 12px 18px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;
  }
  .result-count{ font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); padding:18px 0 26px; }

  /* ===== products layout + filter sidebar ===== */
  .products-layout{ display:grid; grid-template-columns:1fr 280px; gap:40px; align-items:start; }
  .products-main{ min-width:0; }
  .filter-sidebar{ position:sticky; top:100px; border:1px solid var(--line); border-radius:var(--radius); padding:22px; max-height:calc(100vh - 120px); overflow-y:auto; }
  .filter-sidebar-head{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
  .filter-sidebar-head h3{ font-size:14.5px; font-weight:800; }
  .filter-item{ display:flex; align-items:center; justify-content:space-between; padding:13px 4px; border-bottom:1px solid var(--line); cursor:pointer; font-weight:700; font-size:13.5px; color:var(--ink); transition:color .15s ease; }
  .filter-item:last-child{ border-bottom:none; }
  .filter-item svg{ width:13px; height:13px; flex-shrink:0; color:var(--ink-faint); transform:rotate(-90deg); transition:color .15s ease; }
  .filter-item:hover{ color:var(--purple-700); }
  .filter-item:hover svg{ color:var(--purple-700); }
  .filter-item.active{ color:var(--purple-700); }
  .filter-item.active svg{ color:var(--purple-700); }
  @media (max-width:980px){
    .products-layout{ grid-template-columns:1fr; }
    .filter-sidebar{ position:static; max-height:none; order:-1; }
  }


  /* product grid (shared with home) */
  .product-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; padding-bottom:90px; }
  .product-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
  .product-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(67,33,113,.16); }
  .product-thumb{ aspect-ratio:1/0.82; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .product-thumb svg{ width:44px; height:44px; color:#fff; position:relative; z-index:1; }
  .product-thumb .price-tag{ position:absolute; top:12px; right:12px; background:rgba(255,255,255,.92); color:var(--purple-800); font-size:11px; font-weight:800; padding:5px 10px; border-radius:999px; z-index:2; }
  .product-thumb.badge-new .price-tag{ background:var(--purple-700); color:#fff; }
  .product-thumb.badge-best .price-tag{ background:var(--orange-600); color:#fff; }
  .product-thumb.badge-trend .price-tag{ background:#fff; color:var(--purple-800); }
  .product-thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .thumb-1{ background:linear-gradient(135deg, var(--purple-600), var(--purple-800)); }
  .thumb-2{ background:linear-gradient(135deg, var(--orange-500), var(--orange-700)); }
  .thumb-3{ background:linear-gradient(135deg, var(--pink-500), var(--purple-700)); }
  .thumb-4{ background:linear-gradient(135deg, var(--blue-500), var(--purple-700)); }
  .thumb-5{ background:linear-gradient(135deg, var(--purple-500), var(--orange-500)); }
  .thumb-6{ background:linear-gradient(135deg, var(--orange-300), var(--pink-500)); }
  .thumb-7{ background:linear-gradient(135deg, var(--purple-700), var(--blue-500)); }
  .thumb-8{ background:linear-gradient(135deg, var(--pink-500), var(--orange-500)); }
  .thumb-9{ background:linear-gradient(135deg, var(--purple-300), var(--purple-700)); }
  .thumb-10{ background:linear-gradient(135deg, var(--orange-600), var(--purple-600)); }
  .thumb-11{ background:linear-gradient(135deg, var(--blue-500), var(--pink-500)); }
  .thumb-12{ background:linear-gradient(135deg, var(--purple-800), var(--orange-500)); }
  .thumb-13{ background:linear-gradient(135deg, var(--purple-600), var(--pink-500)); }
  .thumb-14{ background:linear-gradient(135deg, var(--orange-700), var(--purple-600)); }
  .thumb-15{ background:linear-gradient(135deg, var(--pink-500), var(--purple-300)); }
  .thumb-16{ background:linear-gradient(135deg, var(--blue-500), var(--purple-500)); }
  .thumb-17{ background:linear-gradient(135deg, var(--orange-500), var(--purple-800)); }
  .thumb-18{ background:linear-gradient(135deg, var(--purple-700), var(--pink-500)); }
  .thumb-19{ background:linear-gradient(135deg, var(--orange-600), var(--orange-300)); }
  .thumb-20{ background:linear-gradient(135deg, var(--purple-500), var(--blue-500)); }
  .product-body{ padding:18px 20px 20px; }
  .product-body h3{ font-size:15.5px; font-weight:700; margin-bottom:4px; letter-spacing:-0.01em; }
  .product-body .desc{ font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; }
  .product-footer{ display:flex; align-items:center; justify-content:space-between; }
  .product-footer .from{ font-size:11.5px; color:var(--ink-faint); font-weight:600; }
  .product-footer .price{ font-size:16px; font-weight:800; color:var(--ink); }
  .order-link{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--gray-100); color:var(--ink); transition:background .18s ease, color .18s ease; }
  .order-link:hover{ background:#0a0a0a; color:#fff; }
  .order-link svg{ width:15px; height:15px; }
  .product-card{ display:none; }
  .product-card.show{ display:block; }

  .empty-state{ display:none; text-align:center; padding:60px 20px; color:var(--ink-soft); }
  .empty-state.show{ display:block; }

  footer{ padding:60px 0 0; background:var(--purple-900); color:#fff; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; }
  .foot-brand p{ color:rgba(255,255,255,.6); font-size:13.5px; margin-top:14px; max-width:260px; }
  .foot-brand .brand-name{ color:#fff; }
  .foot-brand .brand-name small{ color:var(--orange-300); }
  .foot-col h4{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--orange-300); margin-bottom:18px; }
  .foot-col a{ display:block; font-size:13.5px; color:rgba(255,255,255,.72); margin-bottom:12px; }
  .foot-col a:hover{ color:#fff; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.14); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
  .foot-bottom p{ font-size:12.5px; color:rgba(255,255,255,.5); }

  @media (max-width:980px){
    .nav-bottom, .util-link{ display:none; }
    .burger{ display:flex; }
    .product-grid{ grid-template-columns:repeat(2,1fr); }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px){
    .wrap{ padding:0 20px; }
    .product-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; }
  }

  /* ===================== FROM PRODUCT DETAIL PAGE ===================== */
  :root{
    --cream:#ffffff; --cream-soft:#f2e9d8; --cream-soft-2:#ece0c9;
    --purple-900:#341759; --purple-800:#432171; --purple-700:#5b2a86; --purple-600:#7238a3; --purple-500:#8a4fbd; --purple-300:#b98fdc; --purple-100:#e9dcf5; --gray-100:#f0f0f0;
    --pink-500:#c65fa6; --blue-500:#3f6fc0;
    --orange-700:#d85a2a; --orange-600:#e8672f; --orange-500:#f2854f; --orange-300:#ffb27a;
    --ink:#121212; --ink-soft:#5c5c5c; --ink-faint:#999999;
    --line:#e6d9c3; --line-strong:#d8c4a3;
    --radius:16px; --radius-sm:10px; --container:1240px;
    --grad-brand: linear-gradient(100deg, var(--purple-700) 0%, var(--purple-500) 45%, var(--orange-500) 100%);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{ font-family:'Plus Jakarta Sans', sans-serif; color:var(--ink); background:var(--cream); line-height:1.5; -webkit-font-smoothing:antialiased; }
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  h1,h2,h3{font-weight:800; letter-spacing:-0.02em; line-height:1.05;}
  ul{list-style:none;}
  button{ font-family:inherit; }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap; }
  .btn--primary{ background:#0a0a0a; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .btn--primary:hover{ background:#222; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.24); }
  .btn--outline{ background:#fff; color:var(--ink); border-color:var(--line-strong); }
  .btn--outline:hover{ border-color:var(--ink); transform:translateY(-1px); }
  .btn--sm{ padding:10px 18px; font-size:13.5px; }
  .btn--block{ width:100%; }

  .announce{ background:var(--grad-brand); color:#fff; text-align:center; font-size:13px; font-weight:600; padding:10px 20px; }
  .announce span{ color:rgba(255,255,255,.82); font-weight:500; }
  .brand-mark{ width:38px; height:38px; flex-shrink:0; }

  header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .nav-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0 12px; }
  .nav-bottom{ display:flex; align-items:center; justify-content:flex-start; padding:9px 0; border-top:1px solid var(--line); }
  .nav-bottom .wrap{ max-width:none; }
  .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .brand-name{ font-weight:800; font-size:16px; letter-spacing:-0.01em; white-space:nowrap; color:var(--ink); }
  .brand-name small{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-600); }
  .search-bar{ flex:1; max-width:400px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--ink-faint); font-size:14px; }
  .search-bar svg{ width:16px; height:16px; flex-shrink:0; color:var(--ink); }
  .nav-links{ display:flex; align-items:center; justify-content:flex-start; gap:20px; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ font-size:13.5px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; transition:color .15s ease; flex-shrink:0; }
  .nav-links a.deals{ color:var(--orange-600); font-weight:700; }
  .nav-links a.deals:hover{ color:var(--orange-700); }
  .nav-links svg{ width:13px; height:13px; }
  .nav-dropdown{ position:static; flex-shrink:0; }
  .nav-bottom{ position:relative; }
  .mega-panel{
    position:absolute; top:100%; left:0; width:100%;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 28px 56px rgba(0,0,0,.14);
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .mega-panel, .nav-dropdown:focus-within .mega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .mega-inner{ max-width:1520px; margin:0 auto; padding:36px 32px 40px; display:flex; gap:40px; overflow-x:auto; }
  .mega-col{ min-width:150px; flex-shrink:0; }
  .mega-col:last-of-type{ border-left:1px solid var(--line); padding-left:28px; }
  .mega-col h4{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:14px; }
  .mega-group{ margin-bottom:22px; }
  .mega-group:last-child{ margin-bottom:0; }
  .mega-standalone{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); }
  .mega-standalone:hover{ color:var(--purple-700); }
  .mega-col a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; font-weight:500; white-space:nowrap; }
  .mega-col a:hover{ color:var(--purple-700); }
  .mega-feature{ flex-shrink:0; width:200px; margin-left:auto; display:block; }
  .mega-feature .thumb{ width:200px; height:140px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-feature .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-feature .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .thumb.thumb-placeholder{ background:var(--gray-100); }
  .thumb.thumb-placeholder::after{ display:none; }
  .thumb.thumb-placeholder svg{ color:var(--ink-faint); width:30px; height:30px; }
  .mega-feature .cap-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-feature .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .mega-cards{ gap:28px; }
  .mega-card{ width:200px; flex-shrink:0; display:block; }
  .mega-card .thumb{ width:200px; height:150px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-card .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-card .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .mega-card .cap-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-card .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .dropdown-panel{
    position:absolute; top:100%; left:0; margin-top:16px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 24px 48px rgba(0,0,0,.14); padding:22px;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 30px; width:520px; }
  .dd-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .dd-item .ic{ width:52px; height:52px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; transition:background .18s ease; }
  .dd-item .ic svg{ width:22px; height:22px; color:var(--ink); transition:color .18s ease; }
  .dd-item:hover .ic{ background:#0a0a0a; }
  .dd-item:hover .ic svg{ color:#fff; }
  .dd-item .lbl{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; }
  .nav-links a.active{ color:var(--ink); }
  .nav-links a:hover{ color:var(--ink); }
  .util-link{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
  .util-link svg{ width:16px; height:16px; flex-shrink:0; }
  .util-link:hover{ color:var(--ink); }
  .nav-actions{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
  .nav-actions .signin{ font-size:14.5px; font-weight:600; color:var(--ink-soft); }
  .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
  .burger span{ width:22px; height:2px; background:var(--purple-700); }

  .crumb{ padding:22px 0 0; font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .crumb a{ color:var(--purple-600); }
  .crumb a:hover{ color:var(--purple-800); }

  /* ===== product layout ===== */
  .product-main{ padding:30px 0 90px; }
  .product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:flex-start; }

  /* gallery */
  .gallery-main{
    aspect-ratio:1/0.86; border-radius:var(--radius); background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; padding:40px; position:relative; overflow:hidden;
    box-shadow:0 20px 40px rgba(67,33,113,.1); margin-bottom:16px;
  }
  .gallery-main .bc-preview{
    width:82%; aspect-ratio:1.6/1; border-radius:12px; background:var(--grad-brand);
    box-shadow:0 20px 44px rgba(67,33,113,.32); padding:26px 30px; display:flex; flex-direction:column; justify-content:space-between; color:#fff;
    transform:rotate(-2deg);
  }
  .gallery-main .bc-preview .mk{ width:30px; height:30px; }
  .gallery-main .bc-preview .name{ font-weight:800; font-size:16px; letter-spacing:-0.01em; }
  .gallery-main .bc-preview .role{ font-size:11px; opacity:.8; letter-spacing:.04em; text-transform:uppercase; }
  .gallery-main .bc-preview .contact{ font-size:10.5px; opacity:.75; margin-top:14px; line-height:1.6; }
  .gallery-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .g-thumb{ aspect-ratio:1/0.8; border-radius:var(--radius-sm); border:1.5px solid var(--line); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .18s ease; }
  .g-thumb.active, .g-thumb:hover{ border-color:var(--ink); }
  .g-thumb .mini{ width:70%; aspect-ratio:1.6/1; border-radius:5px; }
  .g-thumb.t1 .mini{ background:var(--grad-brand); }
  .g-thumb.t2 .mini{ background:#fff; border:1.5px solid var(--purple-300); }
  .g-thumb.t3 .mini{ background:linear-gradient(135deg, var(--orange-500), var(--orange-700)); }
  .g-thumb.t4 .mini{ background:linear-gradient(135deg, var(--ink), #000); }

  /* info column */
  .p-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:10px; }
  .p-title{ font-size:clamp(28px,3.2vw,38px); margin-bottom:12px; }
  .p-rating{ display:flex; align-items:center; gap:8px; margin-bottom:18px; }
  .p-rating .stars{ display:flex; gap:2px; }
  .p-rating .stars svg{ width:15px; height:15px; color:var(--orange-500); }
  .p-rating span{ font-size:13px; color:var(--ink-soft); font-weight:600; }
  .p-desc{ font-size:15px; color:var(--ink-soft); margin-bottom:26px; max-width:480px; }

  .price-box{ display:flex; align-items:baseline; gap:10px; margin-bottom:28px; }
  .price-box .amount{ font-size:32px; font-weight:800; color:var(--ink); }
  .price-box .unit{ font-size:13px; color:var(--ink-faint); font-weight:600; }

  .opt-group{ margin-bottom:26px; }
  .opt-label{ font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink); margin-bottom:12px; display:flex; justify-content:space-between; }
  .opt-label .sel{ color:var(--ink); font-weight:700; text-transform:none; letter-spacing:0; }
  .pill-row{ display:flex; gap:10px; flex-wrap:wrap; }
  .pill-opt{
    padding:10px 18px; border-radius:999px; border:1.5px solid var(--line); background:#fff;
    font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; transition:all .15s ease;
  }
  .pill-opt.sel, .pill-opt:hover{ border-color:transparent; background:#0a0a0a; color:#fff; }
  .pill-opt .extra{ font-weight:600; opacity:.75; font-size:11.5px; }
  .opt-select{
    width:100%; appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236d5c82" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 16px center/14px;
    border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:13px 40px 13px 16px; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer;
  }
  .opt-select:focus{ outline:none; border-color:var(--purple-500); }
  .opt-toggle-row{ display:flex; flex-wrap:wrap; gap:16px 24px; margin-bottom:26px; }
  .opt-toggle{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
  .opt-toggle input{ accent-color:#0a0a0a; width:15px; height:15px; cursor:pointer; }
  .opt-toggle:hover{ color:var(--ink); }

  .qty-table{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; }
  .qty-opt{
    padding:12px 8px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:#fff;
    text-align:center; cursor:pointer; transition:all .15s ease;
  }
  .qty-opt .n{ font-size:15px; font-weight:800; }
  .qty-opt .u{ font-size:11px; color:var(--ink-faint); font-weight:600; margin-top:2px; }
  .qty-opt.sel, .qty-opt:hover{ border-color:transparent; background:#0a0a0a; }
  .qty-opt.sel .n, .qty-opt.sel .u, .qty-opt:hover .n, .qty-opt:hover .u{ color:#fff; }

  .upload-box{
    border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm); padding:18px 20px;
    display:flex; align-items:center; gap:14px; margin-bottom:26px; background:#fff;
  }
  .upload-box .ic{ width:38px; height:38px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .upload-box .ic svg{ width:17px; height:17px; color:var(--ink); }
  .upload-box .txt{ font-size:13.5px; font-weight:700; }
  .upload-box .sub{ font-size:11.5px; color:var(--ink-faint); font-weight:500; }
  .upload-box .browse{ margin-left:auto; }

  .p-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
  .trust-row{ display:flex; gap:22px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); }
  .trust-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
  .trust-item svg{ width:16px; height:16px; color:var(--ink); }

  /* ===== tabs ===== */
  .tabs{ margin-top:70px; }
  .tab-heads{ display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:30px; }
  .tab-head{ padding:14px 22px; font-size:14px; font-weight:700; color:var(--ink-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
  .tab-head.active{ color:var(--ink); border-color:var(--ink); }
  .tab-panel{ display:none; max-width:720px; }
  .tab-panel.active{ display:block; }
  .tab-panel p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:14px; line-height:1.7; }
  .spec-row{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-size:14px; }
  .spec-row .k{ color:var(--ink-faint); font-weight:600; }
  .spec-row .v{ font-weight:700; }

  /* ===== related ===== */
  .related{ padding:90px 0; background:#fff; border-top:1px solid var(--line); }
  .section-head{ margin-bottom:40px; }
  .section-head h2{ font-size:clamp(26px,3vw,34px); }
  .related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
  .rp-card{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--cream); transition:transform .2s ease; }
  .rp-card:hover{ transform:translateY(-4px); }
  .rp-thumb{ aspect-ratio:1/0.8; display:flex; align-items:center; justify-content:center; }
  .rp-thumb svg{ width:34px; height:34px; color:#fff; }
  .rp-body{ padding:14px 16px 16px; }
  .rp-body h4{ font-size:14px; font-weight:700; margin-bottom:4px; }
  .rp-body .price{ font-size:13px; color:var(--ink); font-weight:800; }
  .rt1{ background:linear-gradient(135deg, var(--orange-500), var(--orange-700)); }
  .rt2{ background:linear-gradient(135deg, var(--pink-500), var(--purple-700)); }
  .rt3{ background:linear-gradient(135deg, var(--blue-500), var(--purple-700)); }
  .rt4{ background:linear-gradient(135deg, var(--purple-500), var(--orange-500)); }

  footer{ padding:60px 0 0; background:var(--purple-900); color:#fff; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; }
  .foot-brand p{ color:rgba(255,255,255,.6); font-size:13.5px; margin-top:14px; max-width:260px; }
  .foot-brand .brand-name{ color:#fff; }
  .foot-brand .brand-name small{ color:var(--orange-300); }
  .foot-col h4{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--orange-300); margin-bottom:18px; }
  .foot-col a{ display:block; font-size:13.5px; color:rgba(255,255,255,.72); margin-bottom:12px; }
  .foot-col a:hover{ color:#fff; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.14); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
  .foot-bottom p{ font-size:12.5px; color:rgba(255,255,255,.5); }

  @media (max-width:980px){
    .nav-bottom, .util-link{ display:none; }
    .burger{ display:flex; }
    .product-grid{ grid-template-columns:1fr; }
    .related-grid{ grid-template-columns:repeat(2,1fr); }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px){
    .wrap{ padding:0 20px; }
    .qty-table{ grid-template-columns:repeat(3,1fr); }
    .related-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr; }
  }

  /* ===================== FROM BULK ORDER PAGE ===================== */
  :root{
    --cream:#ffffff; --cream-soft:#f2e9d8; --cream-soft-2:#ece0c9;
    --purple-900:#341759; --purple-800:#432171; --purple-700:#5b2a86; --purple-600:#7238a3; --purple-500:#8a4fbd; --purple-300:#b98fdc; --purple-100:#e9dcf5; --gray-100:#f0f0f0;
    --pink-500:#c65fa6; --blue-500:#3f6fc0;
    --orange-700:#d85a2a; --orange-600:#e8672f; --orange-500:#f2854f; --orange-300:#ffb27a;
    --ink:#121212; --ink-soft:#5c5c5c; --ink-faint:#999999;
    --line:#e6d9c3; --line-strong:#d8c4a3;
    --radius:16px; --radius-sm:10px; --container:1240px;
    --grad-brand: linear-gradient(100deg, var(--purple-700) 0%, var(--purple-500) 45%, var(--orange-500) 100%);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{ font-family:'Plus Jakarta Sans', sans-serif; color:var(--ink); background:var(--cream); line-height:1.5; -webkit-font-smoothing:antialiased; }
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
  a{color:inherit; text-decoration:none;}
  h1,h2,h3{font-weight:800; letter-spacing:-0.02em; line-height:1.05;}
  ul{list-style:none;}
  button, input, select, textarea{ font-family:inherit; }

  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:15px; padding:14px 26px; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; white-space:nowrap; }
  .btn--primary{ background:#0a0a0a; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.18); }
  .btn--primary:hover{ background:#222; transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.24); }
  .btn--sm{ padding:10px 18px; font-size:13.5px; }
  .btn--block{ width:100%; }

  .announce{ background:var(--grad-brand); color:#fff; text-align:center; font-size:13px; font-weight:600; padding:10px 20px; }
  .announce span{ color:rgba(255,255,255,.82); font-weight:500; }
  .brand-mark{ width:38px; height:38px; flex-shrink:0; }

  header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .nav-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0 12px; }
  .nav-bottom{ display:flex; align-items:center; justify-content:flex-start; padding:9px 0; border-top:1px solid var(--line); }
  .nav-bottom .wrap{ max-width:none; }
  .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .brand-name{ font-weight:800; font-size:16px; letter-spacing:-0.01em; white-space:nowrap; color:var(--ink); }
  .brand-name small{ display:block; font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-600); }
  .search-bar{ flex:1; max-width:400px; display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:var(--ink-faint); font-size:14px; }
  .search-bar svg{ width:16px; height:16px; flex-shrink:0; color:var(--ink); }
  .nav-links{ display:flex; align-items:center; justify-content:flex-start; gap:20px; width:100%; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; -ms-overflow-style:none; }
  .nav-links::-webkit-scrollbar{ display:none; }
  .nav-links a{ font-size:13.5px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; transition:color .15s ease; flex-shrink:0; }
  .nav-links a.deals{ color:var(--orange-600); font-weight:700; }
  .nav-links a.deals:hover{ color:var(--orange-700); }
  .nav-links svg{ width:13px; height:13px; }
  .nav-dropdown{ position:static; flex-shrink:0; }
  .nav-bottom{ position:relative; }
  .mega-panel{
    position:absolute; top:100%; left:0; width:100%;
    background:#fff; border-top:1px solid var(--line);
    box-shadow:0 28px 56px rgba(0,0,0,.14);
    opacity:0; visibility:hidden; transform:translateY(8px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .mega-panel, .nav-dropdown:focus-within .mega-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .mega-inner{ max-width:1520px; margin:0 auto; padding:36px 32px 40px; display:flex; gap:40px; overflow-x:auto; }
  .mega-col{ min-width:150px; flex-shrink:0; }
  .mega-col:last-of-type{ border-left:1px solid var(--line); padding-left:28px; }
  .mega-col h4{ font-size:14.5px; font-weight:700; color:var(--ink); margin-bottom:14px; }
  .mega-group{ margin-bottom:22px; }
  .mega-group:last-child{ margin-bottom:0; }
  .mega-standalone{ display:block; font-size:14.5px; font-weight:700; color:var(--ink); }
  .mega-standalone:hover{ color:var(--purple-700); }
  .mega-col a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; font-weight:500; white-space:nowrap; }
  .mega-col a:hover{ color:var(--purple-700); }
  .mega-feature{ flex-shrink:0; width:200px; margin-left:auto; display:block; }
  .mega-feature .thumb{ width:200px; height:140px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-feature .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-feature .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .thumb.thumb-placeholder{ background:var(--gray-100); }
  .thumb.thumb-placeholder::after{ display:none; }
  .thumb.thumb-placeholder svg{ color:var(--ink-faint); width:30px; height:30px; }
  .mega-feature .cap-title{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-feature .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .mega-cards{ gap:28px; }
  .mega-card{ width:200px; flex-shrink:0; display:block; }
  .mega-card .thumb{ width:200px; height:150px; border-radius:12px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
  .mega-card .thumb::after{ content:""; position:absolute; inset:0; opacity:.5; background-image: radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.4px); background-size:14px 14px; }
  .mega-card .thumb svg{ width:38px; height:38px; color:#fff; position:relative; z-index:1; }
  .mega-card .cap-title{ font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:4px; }
  .mega-card .cap-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }
  .dropdown-panel{
    position:absolute; top:100%; left:0; margin-top:16px;
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:0 24px 48px rgba(0,0,0,.14); padding:22px;
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:300;
  }
  .nav-dropdown:hover .dropdown-panel, .nav-dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
  .dropdown-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px 30px; width:520px; }
  .dd-item{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .dd-item .ic{ width:52px; height:52px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; transition:background .18s ease; }
  .dd-item .ic svg{ width:22px; height:22px; color:var(--ink); transition:color .18s ease; }
  .dd-item:hover .ic{ background:#0a0a0a; }
  .dd-item:hover .ic svg{ color:#fff; }
  .dd-item .lbl{ font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.02em; }
  .nav-links a.active{ color:var(--ink); }
  .nav-links a:hover{ color:var(--ink); }
  .util-link{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
  .util-link svg{ width:16px; height:16px; flex-shrink:0; }
  .util-link:hover{ color:var(--ink); }
  .nav-actions{ display:flex; align-items:center; gap:18px; flex-shrink:0; }
  .nav-actions .signin{ font-size:14.5px; font-weight:600; color:var(--ink-soft); }
  .burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
  .burger span{ width:22px; height:2px; background:var(--purple-700); }

  .crumb{ padding:22px 0 0; font-size:13px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
  .crumb a{ color:var(--purple-600); }

  /* hero */
  .bulk-hero{ padding:34px 0 10px; }
  .eyebrow-chip{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); margin-bottom:18px; }
  .eyebrow-chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--grad-brand); }
  .bulk-hero h1{ font-size:clamp(32px,4vw,48px); max-width:640px; }
  .bulk-hero p{ color:var(--ink-soft); font-size:15.5px; max-width:560px; margin-top:14px; }

  /* layout */
  .bulk-main{ padding:44px 0 100px; }
  .bulk-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:56px; align-items:flex-start; }

  .form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px; box-shadow:0 20px 40px rgba(67,33,113,.08); }
  .form-row{ margin-bottom:22px; }
  .form-row-split{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  label{ display:block; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:8px; }
  input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea{
    width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm);
    font-size:14.5px; color:var(--ink); background:var(--cream); outline:none; transition:border-color .15s ease;
  }
  input:focus, select:focus, textarea:focus{ border-color:var(--ink); }
  textarea{ resize:vertical; min-height:100px; }
  select{
    appearance:none; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%236d5c82" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');
    background-repeat:no-repeat; background-position:right 16px center; background-size:14px;
  }
  .upload-drop{
    border:1.5px dashed var(--line-strong); border-radius:var(--radius-sm); padding:26px; text-align:center;
    background:var(--cream); cursor:pointer;
  }
  .upload-drop .ic{ width:42px; height:42px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
  .upload-drop .ic svg{ width:19px; height:19px; color:var(--ink); }
  .upload-drop .txt{ font-size:13.5px; font-weight:700; }
  .upload-drop .sub{ font-size:12px; color:var(--ink-faint); margin-top:4px; }

  .form-note{ font-size:12.5px; color:var(--ink-faint); margin-top:14px; text-align:center; }

  /* sidebar */
  .side-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin-bottom:22px; }
  .side-card h3{ font-size:16px; margin-bottom:16px; }
  .perk{ display:flex; gap:12px; margin-bottom:16px; }
  .perk:last-child{ margin-bottom:0; }
  .perk .ic{ width:34px; height:34px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .perk .ic svg{ width:16px; height:16px; color:var(--ink); }
  .perk .t{ font-size:13.5px; font-weight:700; }
  .perk .d{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

  .tier-table{ width:100%; border-collapse:collapse; }
  .tier-table th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); padding-bottom:10px; border-bottom:1px solid var(--line); }
  .tier-table td{ padding:10px 0; font-size:13.5px; font-weight:700; border-bottom:1px solid var(--line); }
  .tier-table tr:last-child td{ border-bottom:none; }
  .tier-table .disc{ color:var(--purple-700); }

  .quote-card{ background:var(--grad-brand); border-radius:var(--radius); padding:28px; color:#fff; }
  .quote-card p{ font-size:14px; opacity:.92; line-height:1.6; margin-bottom:16px; }
  .quote-card .who{ font-size:12.5px; font-weight:700; opacity:.85; }

  footer{ padding:60px 0 0; background:var(--purple-900); color:#fff; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:32px; padding-bottom:44px; }
  .foot-brand p{ color:rgba(255,255,255,.6); font-size:13.5px; margin-top:14px; max-width:260px; }
  .foot-brand .brand-name{ color:#fff; }
  .foot-brand .brand-name small{ color:var(--orange-300); }
  .foot-col h4{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--orange-300); margin-bottom:18px; }
  .foot-col a{ display:block; font-size:13.5px; color:rgba(255,255,255,.72); margin-bottom:12px; }
  .foot-col a:hover{ color:#fff; }
  .foot-bottom{ border-top:1px solid rgba(255,255,255,.14); padding:22px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
  .foot-bottom p{ font-size:12.5px; color:rgba(255,255,255,.5); }

  @media (max-width:980px){
    .nav-bottom, .util-link{ display:none; }
    .burger{ display:flex; }
    .bulk-grid{ grid-template-columns:1fr; }
    .foot-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px){
    .wrap{ padding:0 20px; }
    .form-row-split{ grid-template-columns:1fr; }
    .form-card{ padding:24px; }
    .foot-grid{ grid-template-columns:1fr; }
  }
  /* ===================== WORDPRESS NAV MENU / MEGA MENU (dynamic) ===================== */
  /* Renders from a real wp-admin Navigation Menu instead of hardcoded links.
     .mega-groups auto-flows menu-item groups into columns via CSS multi-column,
     so admins can add/remove menu items without touching column layout. */
  .mega-groups{ flex:1; column-width:170px; column-gap:40px; }
  .mega-group{ break-inside:avoid-column; -webkit-column-break-inside:avoid; page-break-inside:avoid; margin-bottom:22px; display:inline-block; width:100%; }
  .mega-group h4{ font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:14px; }
  .mega-group h4 a{ font-weight:800; color:var(--ink); }
  .mega-group a{ display:block; font-size:13.5px; color:var(--ink-soft); margin-bottom:12px; font-weight:500; white-space:nowrap; }
  .mega-group a:hover{ color:var(--purple-700); }
  .mega-feature{ border-left:1px solid var(--line); padding-left:32px; }
  .no-js .mega-panel{ display:none; }
  .menu-item-has-children > a > .caret{ width:12px; height:12px; margin-left:2px; }

  /* burger / mobile menu (progressive enhancement over existing .burger button) */
  .mobile-menu{ display:none; position:fixed; inset:0; z-index:900; background:#fff; overflow-y:auto; padding:24px; }
  .mobile-menu.is-open{ display:block; }
  .mobile-menu-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
  .mobile-menu-close{ width:36px; height:36px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; }
  .mobile-menu ul{ list-style:none; }
  .mobile-menu li{ border-bottom:1px solid var(--line); }
  .mobile-menu li a{ display:block; padding:14px 4px; font-weight:700; font-size:15px; color:var(--ink); }
  .mobile-menu li li a{ font-weight:500; font-size:13.5px; color:var(--ink-soft); padding-left:16px; }
  .mobile-menu .sub-menu{ display:none; padding-left:8px; }
  .mobile-menu .menu-item-has-children.is-open > a{ color:var(--purple-700); }

  /* ===================== WOOCOMMERCE COMPATIBILITY ===================== */
  .woocommerce, .woocommerce-page{ color:var(--ink); font-family:'Plus Jakarta Sans', sans-serif; }
  .woocommerce-Price-currencySymbol{ margin-right:3px; font-size:.9em; }
  .woocommerce ul.products{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; list-style:none; padding:0; margin:0; }
  /* WooCommerce core ships a float-era clearfix (content:" "; display:table) on this same
     selector for its default float-based grid. Once we switch to display:grid that clearfix
     pseudo-element becomes a real (invisible) grid item and eats the first cell, pushing every
     product one column to the right. Kill it explicitly. */
  .woocommerce ul.products::before, .woocommerce ul.products::after{ content:none !important; display:none !important; }
  .woocommerce ul.products li.product{ width:100% !important; float:none !important; margin:0 !important; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; padding:0 !important; transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
  .woocommerce ul.products li.product:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(67,33,113,.16); }
  .woocommerce ul.products li.product a.product-card-link{ display:block; color:inherit; text-decoration:none; }
  .woocommerce ul.products li.product .product-card-media{ position:relative; background:var(--gray-100); }
  .woocommerce ul.products li.product img{ width:100%; aspect-ratio:1/0.82; object-fit:cover; display:block; }
  .woocommerce ul.products li.product .wishlist-toggle{
    position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:none;
    background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,.12); color:var(--ink-soft); transition:color .15s ease, transform .15s ease; z-index:2;
  }
  .woocommerce ul.products li.product .wishlist-toggle svg{ width:16px; height:16px; }
  .woocommerce ul.products li.product .wishlist-toggle:hover{ transform:scale(1.08); }
  .woocommerce ul.products li.product .wishlist-toggle.is-active{ color:var(--orange-600); }
  .woocommerce ul.products li.product .wishlist-toggle.is-active svg{ fill:currentColor; }
  .woocommerce ul.products li.product .product-card-body{ padding:16px 20px 20px; }
  .woocommerce ul.products li.product .product-card-title{ font-size:15.5px; font-weight:700; letter-spacing:-0.01em; margin-bottom:6px; }
  .woocommerce ul.products li.product .product-card-desc{ font-size:13px; color:var(--ink-soft); line-height:1.5; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .woocommerce ul.products li.product .product-card-rating{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
  .woocommerce ul.products li.product .product-card-rating .star-rating{ color:var(--orange-500); font-size:13px; }
  .woocommerce ul.products li.product .product-card-rating .rating-count{ font-size:12px; color:var(--ink-faint); }
  .woocommerce ul.products li.product .product-card-price{ padding-top:2px; }
  .woocommerce ul.products li.product .price-from{ display:block; font-size:16px; font-weight:800; color:var(--ink); }
  .woocommerce ul.products li.product .price-each{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
  .woocommerce span.onsale{ background:var(--orange-600); color:#fff; font-size:11px; font-weight:800; border-radius:999px; padding:5px 10px; top:12px; right:12px; left:auto; min-height:0; min-width:0; line-height:1; }
  .woocommerce div.product .product_title{ font-size:clamp(26px,3vw,36px); margin-bottom:10px; }
  .woocommerce div.product p.price{ font-size:22px; font-weight:800; color:var(--ink); margin-bottom:18px; }
  .woocommerce div.product p.price ins{ text-decoration:none; }
  .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
    background:var(--grad-brand); color:#fff; border:none; border-radius:999px; padding:14px 28px; font-weight:700; font-size:14px; cursor:pointer; transition:opacity .15s ease; font-family:inherit;
  }
  .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ opacity:.9; background:var(--grad-brand); color:#fff; }
  .woocommerce div.product form.cart .quantity{ margin-right:12px; }
  .woocommerce div.product form.cart .quantity input.qty{ border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:13px 14px; font-family:inherit; font-size:14px; width:70px; }
  .woocommerce .quantity .qty{ border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px; font-family:inherit; }
  table.shop_table{ border-collapse:collapse; width:100%; }
  table.shop_table th, table.shop_table td{ padding:12px; border-bottom:1px solid var(--line); text-align:left; }
  .woocommerce-message, .woocommerce-info, .woocommerce-error{ background:var(--gray-100); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 20px; list-style:none; margin-bottom:20px; }
  .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{ display:none; }
  .woocommerce-breadcrumb{ font-size:13px; color:var(--ink-faint); margin-bottom:24px; }
  .woocommerce-breadcrumb a{ color:var(--ink-soft); }
  .wc-page-wrap{ padding:60px 0 100px; }

  @media (max-width:980px){
    .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:560px){
    .woocommerce ul.products{ grid-template-columns:1fr; }
  }

  /* ===================== SINGLE PRODUCT PAGE (WooCommerce default markup, restyled) ===================== */
  .product-main{ padding:32px 0 0; }
  .product-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .jabal-gallery .woocommerce-product-gallery{ border-radius:var(--radius); overflow:hidden; background:var(--gray-100); }
  .jabal-gallery .woocommerce-product-gallery__image img{ width:100%; height:auto; display:block; border-radius:var(--radius); }
  .jabal-gallery .flex-control-thumbs{ display:flex; gap:10px; margin-top:12px; list-style:none; padding:0; }
  .jabal-gallery .flex-control-thumbs li{ width:72px; }
  .jabal-gallery .flex-control-thumbs img{ width:72px; height:72px; object-fit:cover; border-radius:10px; border:1.5px solid transparent; cursor:pointer; }
  .jabal-gallery .flex-control-thumbs img.flex-active{ border-color:var(--purple-600); }

  .summary.entry-summary{ padding-top:4px; }
  .summary .product_title{ font-size:clamp(26px,3vw,36px); margin-bottom:10px; letter-spacing:-0.02em; }
  .summary .woocommerce-product-rating{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .summary .star-rating{ color:var(--orange-500); }
  .summary .woocommerce-product-details__short-description{ color:var(--ink-soft); font-size:15px; line-height:1.6; margin-bottom:22px; }
  .summary p.price{ font-size:26px; font-weight:800; color:var(--ink); margin-bottom:26px; display:block; }
  .summary p.price ins{ text-decoration:none; }
  .summary p.price del{ font-size:16px; color:var(--ink-faint); margin-right:8px; }

  /* Product Add-Ons plugin fields (WooCommerce Product Add-Ons) restyled to match .opt-group look.
     Class names below are the plugin's documented public hooks — verify once installed and adjust if a
     newer plugin version renamed anything. */
  .summary .wc-pao-addon-container{ margin-bottom:22px; }
  .summary .wc-pao-addon{ margin-bottom:22px; }
  .summary .wc-pao-addon-name, .summary .product-addon-name{ display:block; font-size:12.5px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px; }
  .summary select.wc-pao-select, .summary .wc-pao-addon select{
    width:100%; appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 16px center/14px;
    border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:13px 40px 13px 16px; font-family:inherit; font-size:14px; color:var(--ink); cursor:pointer;
  }
  .summary .wc-pao-addon-checkbox-container label, .summary .wc-pao-addon-radio-container label{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink); margin-bottom:10px; font-weight:600; }
  .product-addon-totals, .summary .wc-pao-addon-price{ font-size:12.5px; color:var(--ink-faint); font-weight:700; }

  .summary form.cart{ margin-bottom:24px; }
  .summary .quantity{ display:inline-block; margin-right:12px; margin-bottom:14px; }
  .summary .quantity .qty{ border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:13px 14px; font-family:inherit; font-size:14px; width:80px; }
  .summary .single_add_to_cart_button{ width:100%; margin-bottom:12px; }
  .summary .product_meta{ font-size:12.5px; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }
  .summary .product_meta > span{ display:block; margin-bottom:4px; }
  .summary .product_meta a{ color:var(--ink-soft); }

  .trust-row{ display:flex; gap:20px; flex-wrap:wrap; margin-top:22px; padding-top:22px; border-top:1px solid var(--line); }
  .trust-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
  .trust-item svg{ width:16px; height:16px; color:var(--purple-600); flex-shrink:0; }

  /* Tabs (Description / Specifications / Shipping & Delivery) */
  .tabs-wrap{ margin-top:64px; }
  .woocommerce-tabs ul.tabs{ display:flex; gap:8px; list-style:none; padding:0; margin:0 0 -1px; border-bottom:1.5px solid var(--line); }
  .woocommerce-tabs ul.tabs li{ padding:14px 22px; font-size:14px; font-weight:700; color:var(--ink-faint); cursor:pointer; border-bottom:2.5px solid transparent; }
  .woocommerce-tabs ul.tabs li.active{ color:var(--ink); border-bottom-color:var(--purple-600); }
  .woocommerce-tabs .panel{ padding:32px 4px; color:var(--ink-soft); font-size:14.5px; line-height:1.7; max-width:760px; }
  .woocommerce-tabs .panel h2{ display:none; } /* WC repeats the tab title inside the panel; the tab label above already shows it */
  .woocommerce-tabs table.shop_attributes{ margin-top:8px; }
  .woocommerce-tabs table.shop_attributes th{ width:200px; font-weight:700; color:var(--ink); background:transparent; }

  /* Related products ("You may also need") reuses .woocommerce ul.products styling already defined above */
  .related.products{ margin-top:80px; padding-top:56px; border-top:1px solid var(--line); }
  .related.products > h2{ font-size:clamp(26px,3vw,34px); margin-bottom:32px; text-align:center; }

  @media (max-width:980px){
    .product-grid{ grid-template-columns:1fr; }
  }

  /* ===================== SHOP / CATEGORY: FULL-WIDTH GRID + FILTER DRAWER ===================== */
  .page-head--compact{ padding:14px 0 22px; }
  .page-head--compact h1{ font-size:clamp(28px,3.4vw,40px); }

  .toolbar{ justify-content:space-between; }
  .filter-toggle{
    display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border:1.5px solid var(--line-strong);
    border-radius:999px; background:#fff; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink);
    cursor:pointer; transition:border-color .15s ease, background .15s ease;
  }
  .filter-toggle:hover{ border-color:var(--ink); }
  .filter-toggle svg{ width:16px; height:16px; }

  /* Full-width product grid (no sidebar column) */
  .woocommerce ul.products{ grid-template-columns:repeat(4, 1fr); }
  @media (max-width:1100px){
    .woocommerce ul.products{ grid-template-columns:repeat(3, 1fr); }
  }
  @media (max-width:760px){
    .woocommerce ul.products{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:480px){
    .woocommerce ul.products{ grid-template-columns:1fr; }
  }

  /* Filter drawer */
  .filter-backdrop{
    position:fixed; inset:0; background:rgba(18,18,18,.42); z-index:998; opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility .2s ease;
  }
  .filter-backdrop.is-open{ opacity:1; visibility:visible; }

  .filter-drawer{
    position:fixed; top:0; left:0; height:100%; width:360px; max-width:88vw; background:#fff; z-index:999;
    box-shadow:24px 0 48px rgba(0,0,0,.16); transform:translateX(-100%); transition:transform .25s cubic-bezier(.2,.8,.2,1);
    display:flex; flex-direction:column;
  }
  .filter-drawer.is-open{ transform:translateX(0); }
  .filter-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); flex-shrink:0; }
  .filter-drawer-head h3{ font-size:19px; font-weight:800; }
  .filter-drawer-close{ width:34px; height:34px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; color:var(--ink); }
  .filter-drawer-close svg{ width:16px; height:16px; }
  .filter-drawer-body{ padding:20px 24px 40px; overflow-y:auto; flex:1; }

  .filter-group-label{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin-bottom:6px; }

  .widget-accordion{ border-bottom:1px solid var(--line); padding:18px 0; }
  .widget-accordion-head{
    display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:700; color:var(--ink);
    cursor:pointer; user-select:none;
  }
  .widget-accordion-head svg{ width:14px; height:14px; color:var(--ink-faint); transition:transform .18s ease; flex-shrink:0; }
  .widget-accordion.is-open .widget-accordion-head svg{ transform:rotate(180deg); }
  .widget-accordion-body{ display:none; padding-top:14px; }
  .widget-accordion.is-open .widget-accordion-body{ display:block; }

  .price-bucket-list{ list-style:none; }
  .price-bucket-item{ display:flex; align-items:center; justify-content:space-between; padding:9px 2px; font-size:14px; color:var(--ink-soft); font-weight:600; }
  .price-bucket-item:hover{ color:var(--purple-700); }
  .price-bucket-item.active{ color:var(--purple-700); font-weight:800; }
  .price-bucket-item .count{ color:var(--ink-faint); font-weight:500; font-size:13px; }
  .price-bucket-clear{ display:inline-block; margin-top:8px; font-size:12.5px; font-weight:700; color:var(--orange-600); }

  /* WooCommerce layered nav (attribute filters e.g. Print Location, Corner Type) */
  .widget_layered_nav ul.woocommerce-widget-layered-nav-list{ list-style:none; }
  .widget_layered_nav .woocommerce-widget-layered-nav-list__item{ padding:9px 2px; font-size:14px; }
  .widget_layered_nav .woocommerce-widget-layered-nav-list__item a{ color:var(--ink-soft); font-weight:600; }
  .widget_layered_nav .woocommerce-widget-layered-nav-list__item a:hover{ color:var(--purple-700); }
  .widget_layered_nav .woocommerce-widget-layered-nav-list__item .count{ color:var(--ink-faint); font-weight:500; font-size:13px; }
  .widget_layered_nav .woocommerce-widget-layered-nav-list__item--chosen a{ color:var(--purple-700); font-weight:800; }

  /* Native price slider fallback styling, in case it's used elsewhere */
  .widget_price_filter .price_slider_amount{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
  .widget_price_filter .button{ background:var(--ink); color:#fff; border:none; border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:700; cursor:pointer; }

  /* ===================== COLLECTION PRODUCT CONFIGURATOR ===================== */
  /* Option dropdown -> quantity/price tiles -> logo & contact info -> CTAs,
     each step revealed once the previous one is completed (see
     assets/js/collection-configurator.js). */
  form.jconf{ margin-top:8px; }
  .jconf-step{ margin-bottom:28px; opacity:0; transform:translateY(6px); animation:jconfIn .3s ease forwards; }
  .jconf-step[hidden]{ display:none; }
  @keyframes jconfIn{ to{ opacity:1; transform:translateY(0); } }
  .jconf-label{ display:block; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin-bottom:10px; }
  .jconf-label-sm{ margin-bottom:8px; }
  .jconf-select{ max-width:420px; }

  .jconf-tiers{ display:flex; flex-direction:column; gap:10px; max-width:460px; }
  .jconf-tier{
    display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px;
    border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); cursor:pointer; transition:border-color .15s ease, background .15s ease;
  }
  .jconf-tier input[type=radio]{ position:absolute; opacity:0; width:0; height:0; }
  .jconf-tier-qty{ font-weight:700; color:var(--ink); }
  .jconf-tier-price{ font-weight:800; color:var(--purple-700); }
  .jconf-tier:hover{ border-color:var(--ink); }
  .jconf-tier.is-selected{ border-color:var(--purple-700); background:var(--purple-50, #f5f0fa); }

  .jconf-social-rows{ display:flex; flex-direction:column; gap:10px; margin-bottom:10px; }
  .jconf-social-row{ display:grid; grid-template-columns:150px 1fr auto; gap:10px; align-items:center; }
  .jconf-social-row select, .jconf-social-row input{ margin:0; }
  .jconf-remove-social{
    width:38px; height:38px; border-radius:var(--radius-sm); border:1.5px solid var(--line); background:#fff;
    color:var(--ink-faint); cursor:pointer; font-size:18px; line-height:1;
  }
  .jconf-remove-social:hover{ border-color:var(--ink); color:var(--ink); }
  .jconf-add-social{
    background:none; border:none; color:var(--purple-700); font-weight:700; font-size:13.5px; cursor:pointer; padding:4px 0; margin-bottom:22px;
  }
  .jconf-social{ margin-bottom:22px; }

  .jconf-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .jconf-cta-row .btn{ flex:1; min-width:180px; justify-content:center; display:inline-flex; align-items:center; gap:8px; }
  .jconf-whatsapp{
    background:#25D366; color:#fff; border:none; border-radius:999px; padding:14px 28px; font-weight:700; font-size:14px;
    cursor:pointer; transition:opacity .15s ease; font-family:inherit;
  }
  .jconf-whatsapp:hover{ opacity:.9; }

  @media (max-width:560px){
    .jconf-social-row{ grid-template-columns:1fr; }
  }