:root{
    --ink:#0B0B0B;
    --ink-soft:#161616;
    --orange:#F2380A;
    --orange-deep:#B82A06;
    --orange-glow:#FF6A2B;
    --white:#FAF8F5;
    --grey:#9C9C96;
    --line:#2A2A28;
    --radius:14px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:#3a3a38;
    font-family:'Inter',system-ui,sans-serif;
    color:var(--white);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:32px 12px 60px;
  }
  h1,h2,h3,.display{
    font-family:'Anton',sans-serif;
    font-weight:400;
    letter-spacing:0.5px;
    text-transform:uppercase;
    margin:0;
  }
  .switcher{
    display:flex;
    gap:8px;
    margin-bottom:18px;
    background:#222220;
    padding:6px;
    border-radius:999px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .switcher button{
    border:none;
    background:transparent;
    color:var(--grey);
    padding:8px 16px;
    border-radius:999px;
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    transition:.2s;
  }
  .switcher button.active{
    background:var(--orange);
    color:var(--white);
  }
  .phone{
    width:390px;
    max-width:100%;
    background:var(--ink);
    border-radius:36px;
    border:8px solid #000;
    overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    position:relative;
  }
  .screen{
    display:none;
    min-height:780px;
    max-height:780px;
    overflow-y:auto;
    padding-bottom:70px;
  }
  .screen.active{display:block;}

  header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 18px;
    background:var(--ink);
    position:sticky;
    top:0;
    z-index:5;
    border-bottom:1px solid var(--line);
  }
  .menu-btn{display:flex;align-items:center;gap:6px;color:var(--white);font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer;border:none;background:none;}
  .menu-btn .bars{display:flex;flex-direction:column;gap:3px;}
  .menu-btn .bars span{width:18px;height:2px;background:var(--white);display:block;}
  .back-btn{
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;border-radius:50%;
    border:1px solid var(--line);background:var(--ink-soft);
    color:var(--white);font-size:16px;cursor:pointer;flex:0 0 auto;
  }
  .header-left{display:flex;align-items:center;gap:8px;}
  .logo{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:1px;display:flex;align-items:center;gap:6px;}
  .logo .sp{color:var(--orange);}
  .cart{position:relative;color:var(--white);cursor:pointer;border:none;background:none;}
  .cart .dot{
    position:absolute;top:-6px;right:-8px;
    background:var(--orange);color:var(--white);font-size:9px;font-weight:800;
    width:16px;height:16px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }

  .banner{
    margin:14px;background:var(--ink-soft);border-radius:var(--radius);padding:18px;
    position:relative;overflow:hidden;border:1px solid var(--line);
    clip-path:polygon(0 0,100% 0,100% 100%,4% 100%);
  }
  .banner .eyebrow{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:2px;}
  .banner h2{font-size:26px;line-height:1;margin-top:6px;}
  .banner h2 span{color:var(--orange);}
  .banner p{font-size:12px;color:var(--grey);margin:10px 0 0;line-height:1.5;}
  .banner .tag{
    display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:var(--white);
    font-size:11px;font-weight:800;padding:6px 10px;border-radius:6px;margin-top:12px;
  }

  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 18px;}
  .cat-card{
    position:relative;aspect-ratio:1/1.05;border-radius:var(--radius);overflow:hidden;
    background:linear-gradient(160deg,#3d3d3a,#1c1c1a);
    display:flex;align-items:flex-end;justify-content:center;border:1px solid var(--line);cursor:pointer;
  }
  .cat-card .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#5c5c58;}
  .cat-card .ph svg{width:34px;height:34px;opacity:.5;}
  .cat-card .pill{
    position:relative;margin:0 0 12px;background:var(--white);color:var(--ink);
    font-size:12px;font-weight:800;padding:8px 14px;border-radius:999px;text-align:center;max-width:88%;
  }

  .section-title{padding:6px 14px 10px;display:flex;align-items:center;justify-content:space-between;}
  .section-title h3{font-size:15px;}

  .band{background:var(--ink);padding:26px 18px 20px;text-align:center;border-bottom:2px solid var(--orange);}
  .band h1{font-size:28px;color:var(--white);}
  .band .cats{margin-top:8px;display:inline-flex;align-items:center;gap:6px;color:var(--orange);font-size:12px;font-weight:700;letter-spacing:1px;}
  .breadcrumb{padding:12px 18px;font-size:11px;background:var(--white);color:#555;}
  .breadcrumb b{color:var(--ink);}
  .breadcrumb .orange{color:var(--orange);}

  .chip-row{display:flex;gap:8px;overflow-x:auto;padding:12px 14px 4px;background:var(--white);scroll-behavior:smooth;}
  .chip-row::-webkit-scrollbar{display:none;}
  .chip-nav-wrap{position:relative;background:var(--white);}
  .chip-arrow{
    position:absolute;top:0;bottom:4px;width:28px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(90deg, var(--white) 60%, rgba(255,255,255,0));
    border:none;z-index:2;cursor:pointer;color:var(--ink);font-size:16px;font-weight:800;
  }
  .chip-arrow.left{left:0;}
  .chip-arrow.right{right:0;background:linear-gradient(270deg, var(--white) 60%, rgba(255,255,255,0));}
  .chip{
    flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1.5px solid var(--ink);
    color:var(--ink);font-size:11px;font-weight:800;background:#fff;cursor:pointer;white-space:nowrap;
  }
  .chip.active{background:var(--orange);border-color:var(--orange);color:#fff;}

  .prod-grid{background:var(--white);padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .prod-card{background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;cursor:pointer;}
  .prod-card .ph{aspect-ratio:1/1;background:#f2f2ef;display:flex;align-items:center;justify-content:center;color:#c7c7c2;}
  .prod-card .ph svg{width:36px;height:36px;}
  .prod-card .info{padding:10px;text-align:center;}
  .prod-card .info .name{color:var(--ink);font-size:12px;font-weight:700;line-height:1.3;}
  .prod-card .info .price{color:var(--orange);font-size:12px;font-weight:800;margin-top:4px;}

  .price-table{background:var(--white);color:var(--ink);margin:14px;border-radius:12px;overflow:hidden;border:1px solid #eee;}
  .price-table .cap{text-align:center;font-size:12px;font-weight:800;color:var(--ink);padding:12px 0 4px;letter-spacing:.5px;}
  .price-table .hint{text-align:center;font-size:10px;color:#999;padding:0 10px 8px;}
  .price-table table{width:100%;border-collapse:collapse;font-size:13px;}
  .price-table th{background:#f4f4f1;color:#777;font-size:10px;text-transform:uppercase;letter-spacing:.5px;padding:10px 8px;font-weight:700;}
  .price-table td{padding:10px 8px;text-align:center;border-top:1px solid #f0f0ed;}
  .price-table tr[data-min]{cursor:pointer;}
  .price-table tr[data-min]:hover td{background:#faf7f4;}
  .price-table tr.active-tier{background:#FFF1EC;}
  .price-table tr.active-tier td{font-weight:800;}
  .price-table td.qty{color:#555;}
  .price-table td.price{color:var(--orange);font-weight:800;font-size:15px;}

  .variants{
    padding:2px 14px 2px;
    display:flex;flex-direction:column;gap:4px;
    max-width:220px;margin:0;
  }
  .size-row{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--ink-soft);border:1px solid var(--line);border-radius:8px;
    padding:4px 10px;
  }
  .size-row.has-qty{border-color:var(--orange);}
  .size-row .who{display:flex;align-items:baseline;gap:6px;}
  .size-row .letter{font-family:'Anton',sans-serif;font-size:13px;color:var(--white);min-width:18px;}
  .size-row .lbl{font-size:9px;color:var(--grey);font-weight:700;}
  .mini-stepper{display:flex;align-items:center;gap:0;background:var(--ink);border:1px solid var(--line);border-radius:6px;overflow:hidden;}
  .mini-stepper button{width:22px;height:22px;background:none;border:none;color:var(--orange);font-size:12px;font-weight:800;cursor:pointer;}
  .mini-stepper input{
    width:26px;text-align:center;background:none;border:none;color:var(--white);
    font-family:'Anton',sans-serif;font-size:11px;outline:none;-moz-appearance:textfield;
  }
  .mini-stepper input::-webkit-outer-spin-button,.mini-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

  .qty-summary{padding:10px 14px 4px;text-align:center;}
  .qty-summary .total-pieces{font-family:'Anton',sans-serif;font-size:22px;color:var(--white);}
  .qty-summary .total-pieces span{color:var(--orange);}
  .qty-summary .warn{font-size:11px;color:var(--orange-glow);margin-top:4px;}
  .qty-summary .total-line{margin-top:6px;font-size:12px;color:var(--grey);}
  .qty-summary .total-line b{color:var(--white);font-size:14px;}

  .photo-gallery{padding:10px 14px 2px;}
  .photo-gallery .cap{font-size:11px;color:var(--grey);font-weight:700;margin-bottom:8px;text-align:center;text-transform:uppercase;letter-spacing:.5px;}
  .photo-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;}
  .photo-strip::-webkit-scrollbar{display:none;}
  .photo-thumb{
    flex:0 0 auto;width:84px;height:84px;border-radius:10px;overflow:hidden;
    background:var(--ink-soft);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;color:#5c5c58;
  }
  .photo-thumb svg{width:28px;height:28px;opacity:.5;}
  .photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer;}

  .lightbox{
    position:fixed;inset:0;background:rgba(0,0,0,.92);
    z-index:9999;display:none;align-items:center;justify-content:center;
    padding:24px;
  }
  .lightbox.open{display:flex;}
  .lightbox img{max-width:100%;max-height:100%;border-radius:10px;object-fit:contain;}
  .lightbox-close{
    position:absolute;top:18px;right:18px;
    width:40px;height:40px;border-radius:50%;
    background:rgba(255,255,255,.12);color:#fff;border:none;
    font-size:18px;cursor:pointer;
  }
  .lightbox-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    width:44px;height:44px;border-radius:50%;
    background:rgba(255,255,255,.12);color:#fff;border:none;
    font-size:22px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .lightbox-arrow.prev{left:14px;}
  .lightbox-arrow.next{right:14px;}
  .lightbox-counter{
    position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
    color:rgba(255,255,255,.7);font-size:12px;font-weight:700;
    background:rgba(255,255,255,.12);padding:4px 12px;border-radius:999px;
  }

  .cta-row{padding:4px 14px 16px;text-align:center;}
  .cta-row p{font-size:11px;color:var(--grey);margin:0 0 4px;}
  .btn-cta{
    display:inline-block;width:100%;background:linear-gradient(180deg,var(--orange-glow),var(--orange));
    color:var(--white);font-family:'Anton',sans-serif;letter-spacing:1px;font-size:18px;
    padding:14px;border-radius:10px;border:none;margin-top:8px;cursor:pointer;
  }
  .btn-cta:disabled{opacity:.4;cursor:not-allowed;}
  .btn-outline{
    display:inline-block;width:100%;background:none;border:2px dashed var(--orange);color:var(--orange);
    font-family:'Anton',sans-serif;letter-spacing:1px;font-size:15px;
    padding:12px;border-radius:10px;margin-top:8px;cursor:pointer;
  }
  .btn-outline:disabled{opacity:.5;cursor:not-allowed;border-style:solid;}
  .btn-secondary{
    display:inline-block;width:100%;background:none;border:1.5px solid var(--line);color:var(--grey);
    font-family:'Inter',sans-serif;font-weight:700;font-size:12px;padding:11px;border-radius:10px;margin-top:8px;cursor:pointer;
  }

  .variants{padding:6px 14px 20px;display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .variant{
    background:var(--ink-soft);border:1px solid var(--line);border-radius:10px;aspect-ratio:1/1;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  }
  .variant.selected{border-color:var(--orange);background:linear-gradient(160deg,#2a1a12,#1c1210);box-shadow:0 0 0 1px var(--orange) inset;}
  .variant .letter{font-family:'Anton',sans-serif;font-size:34px;color:var(--white);}
  .variant .lbl{font-size:11px;color:var(--grey);font-weight:700;}

  footer{background:var(--ink);text-align:center;padding:20px 14px;font-size:11px;color:var(--grey);border-top:1px solid var(--line);}
  footer a{color:var(--orange);text-decoration:none;font-weight:700;}
  .bottom-nav{position:absolute;bottom:0;left:0;right:0;background:var(--white);display:flex;border-top:1px solid #eee;}
  .bottom-nav .item{flex:1;text-align:center;padding:9px 0 8px;color:#888;font-size:10px;font-weight:700;}
  .bottom-nav .item.active{color:var(--orange);}
  .bottom-nav .item svg{width:18px;height:18px;display:block;margin:0 auto 3px;}
  .bottom-nav .item .badge{
    background:var(--orange);color:#fff;font-size:8px;border-radius:50%;width:13px;height:13px;
    display:inline-flex;align-items:center;justify-content:center;position:relative;top:-14px;left:10px;
  }

  .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:15;opacity:0;pointer-events:none;transition:opacity .25s ease;}
  .backdrop.show{opacity:1;pointer-events:auto;}
  #menu{
    position:absolute;top:0;left:0;bottom:0;width:40%;min-width:180px;background:var(--white);color:var(--ink);
    z-index:16;transform:translateX(-100%);transition:transform .28s ease;box-shadow:8px 0 30px rgba(0,0,0,.4);
    overflow-y:auto;display:block;
  }
  #menu.open{transform:translateX(0);}
  .drawer-top{padding:12px 10px;display:flex;align-items:center;gap:6px;}
  .search-box{
    flex:1;display:flex;align-items:center;justify-content:space-between;border:1px solid #e6e6e2;border-radius:8px;
    padding:8px 8px;color:#999;font-size:10px;overflow:hidden;white-space:nowrap;
  }
  .drawer-close{border:none;background:#f2f2ef;color:#666;width:26px;height:26px;border-radius:50%;font-size:13px;cursor:pointer;flex:0 0 auto;}
  .drawer-tabs{display:flex;border-bottom:1px solid #eee;flex-wrap:wrap;}
  .drawer-tabs div{flex:1 1 auto;text-align:center;padding:10px 2px;font-size:10px;font-weight:800;color:#aaa;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;}
  .drawer-tabs div.active{color:var(--ink);border-color:var(--orange);}
  .drawer-tabs div.home-tab{color:var(--orange);}
  .drawer-list div.row{padding:13px 10px;border-bottom:1px solid #f2f2ef;font-size:11px;font-weight:700;color:var(--orange);cursor:pointer;}

  /* ---------- CART / VENDOR SCREEN ---------- */
  .summary-card{
    background:var(--white);color:var(--ink);margin:14px;border-radius:12px;padding:16px;border:1px solid #eee;
  }
  .summary-card .row{display:flex;justify-content:space-between;font-size:12px;padding:6px 0;border-bottom:1px solid #f2f2ef;}
  .summary-card .row:last-child{border-bottom:none;}
  .summary-card .row b{color:var(--ink);}
  .summary-card .row .v{color:var(--orange);font-weight:800;}
  .remove-btn{
    border:none;background:#f2f2ef;color:#a33;width:20px;height:20px;border-radius:50%;
    font-size:11px;font-weight:800;cursor:pointer;line-height:1;flex:0 0 auto;
  }
  .add-insurance{
    border:1.5px dashed var(--orange);background:none;color:var(--orange);
    font-size:10px;font-weight:800;padding:4px 10px;border-radius:8px;cursor:pointer;
  }
  .vendor-list{padding:0 14px 16px;display:flex;flex-direction:column;gap:10px;}
  .shipping-note{
    margin:0 14px 14px;padding:10px 12px;
    border:2px dashed var(--orange);border-radius:10px;
    color:var(--orange-glow);font-size:11px;font-weight:700;text-align:center;
  }
  .vendor-card{
    background:var(--ink-soft);border:1px solid var(--line);border-radius:12px;
    padding:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .vendor-card .who{display:flex;align-items:center;gap:10px;}
  .vendor-card .avatar{
    width:38px;height:38px;border-radius:50%;background:var(--orange);
    display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:15px;
  }
  .vendor-card .meta .name{font-size:13px;font-weight:800;}
  .vendor-card .meta .tag{font-size:10px;color:var(--grey);}
  .vendor-card a{
    background:#25D366;color:#fff;font-size:11px;font-weight:800;padding:9px 12px;border-radius:8px;
    text-decoration:none;white-space:nowrap;
  }
  .empty-cart{padding:40px 20px;text-align:center;color:var(--grey);font-size:12px;}

  .note{max-width:390px;color:#c9c9c6;font-size:12px;text-align:center;margin-top:16px;line-height:1.5;}