/* V17 US BASED PRODUCTS — approved rendering browser implementation.
   Independent from the locked V16 homepage. */
.products-page{
  margin:0; min-height:100vh; color:#f5f2eb;
  background:
    radial-gradient(circle at 50% 22%,rgba(46,42,32,.24),transparent 40%),
    radial-gradient(circle at 50% 55%,rgba(28,28,25,.24),transparent 58%),
    #050505;
  font-family:Arial,Helvetica,sans-serif;
}
.products-shell{position:relative;min-height:100vh;overflow-x:hidden;padding-top:86px;box-sizing:border-box}
.products-shell:before,.products-shell:after{
  content:"";position:fixed;z-index:0;pointer-events:none;top:70px;bottom:0;width:22vw;min-width:230px;
  background:url("../images/home/gold-splatter-smokefree-v11.png") left center/auto 100% no-repeat;
  opacity:.78;filter:saturate(1.25) contrast(1.12);
}
.products-shell:before{left:-2.5vw}
.products-shell:after{right:-2.5vw;transform:scaleX(-1)}
.products-page .top-nav{z-index:50}
.products-page .products-menu{position:relative}
.products-page .products-toggle{color:#d7a324}
.products-page .products-dropdown{display:none;position:absolute;top:42px;left:50%;transform:translateX(-50%);min-width:185px;padding:8px;background:#080808;border:1px solid #8f6818;box-shadow:0 16px 35px #000}
.products-page .products-menu.open .products-dropdown{display:block}
.products-page .products-dropdown a{display:block;padding:12px 14px;color:#eee;text-decoration:none;white-space:nowrap}
.products-page .products-dropdown a:hover,.products-page .products-dropdown a.current{color:#e0aa2c;background:rgba(214,161,43,.08)}
.catalog{position:relative;z-index:2;width:min(1080px,calc(100% - 70px));margin:0 auto;padding:22px 0 70px}
.catalog-header{text-align:center;margin:0 auto 22px}
.catalog-header .eyebrow{display:none}
.catalog-header h1{
  margin:0;color:#dda72c;font-family:"Brush Script MT","Segoe Print","Arial Black",sans-serif;
  font-size:clamp(50px,6.5vw,92px);font-weight:900;font-style:italic;line-height:.95;
  letter-spacing:-.045em;text-transform:uppercase;
  text-shadow:0 5px 0 #755112,0 10px 18px rgba(0,0,0,.75);
}
.gold-rule{width:110px;height:3px;margin:17px auto 15px;background:#d7a324}
.catalog-intro{margin:0;color:#eee;font-size:15px;letter-spacing:.015em}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:24px 0 13px;padding:0 4px}
.product-count{color:#d6a12b;font-size:11px;font-weight:800;letter-spacing:.2em}
.search-box{display:flex;align-items:center;gap:12px;color:#d6a12b;font-size:10px;font-weight:800;letter-spacing:.16em}
.search-box input{width:230px;height:35px;border:1px solid #795817;outline:none;padding:0 38px 0 12px;color:#eee;background:rgba(5,5,5,.88)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.product-card{min-width:0;background:linear-gradient(180deg,rgba(14,14,13,.97),rgba(4,4,4,.98));border:1px solid #9b721b;box-shadow:0 8px 16px rgba(0,0,0,.34);position:relative}
.product-card:before,.product-card:after{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.product-card:before{left:4px;top:4px;border-left:1px solid #e3aa26;border-top:1px solid #e3aa26}
.product-card:after{right:4px;bottom:4px;border-right:1px solid #e3aa26;border-bottom:1px solid #e3aa26}
.product-art{height:145px;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid rgba(214,161,43,.28);background:radial-gradient(ellipse at 50% 90%,rgba(218,159,26,.27),transparent 50%),#090909}
.product-art:before{content:"";position:absolute;inset:0;background:url("../images/products/us-vial-placeholder-v17.png") center/contain no-repeat;filter:saturate(1.15)}
.product-art span{display:none}
.product-info{padding:12px 14px 14px}
.product-info h2{margin:0 0 5px;color:#dfa92f;font-family:"Brush Script MT","Segoe Print","Arial Black",sans-serif;font-size:20px;font-weight:900;font-style:italic;letter-spacing:-.02em}
.strength{margin:0 0 12px;color:#ddd;font-size:10px}
.product-buy{display:flex;align-items:center;justify-content:space-between;gap:10px}
.product-buy strong{color:#fff;font-size:16px}
.add-cart{border:1px solid #a97c1f;padding:9px 11px;color:#dda72c;background:transparent;cursor:pointer;font-size:9px;font-weight:900;letter-spacing:.06em}
.add-cart:hover{background:#d6a12b;color:#050505}
@media(max-width:1050px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog{width:min(90%,850px)}}
@media(max-width:800px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-toolbar{align-items:flex-start;flex-direction:column}.search-box,.search-box input{width:100%}.products-shell:before,.products-shell:after{opacity:.42}}
@media(max-width:520px){.catalog{width:calc(100% - 24px)}.product-grid{grid-template-columns:1fr}.catalog-header h1{font-size:48px}}


/* =========================================================
   V17 BROWSER-TUNED PASS
   Matches the approved rendering more closely at desktop size.
   ========================================================= */

@media (min-width:1201px){
  .products-shell{
    padding-top:82px;
  }

  .catalog{
    width:min(1280px, calc(100% - 150px));
    padding-top:14px;
  }

  .catalog-header{
    margin-bottom:16px;
  }

  .catalog-header h1{
    font-family:"Segoe Print","Arial Black",Impact,sans-serif;
    font-size:clamp(62px,5.4vw,96px);
    font-weight:900;
    font-style:italic;
    letter-spacing:-.075em;
    transform:skewX(-5deg) scaleY(1.08);
    text-shadow:
      0 3px 0 #7a5410,
      0 7px 0 #4d350b,
      0 12px 20px rgba(0,0,0,.72);
  }

  .gold-rule{
    margin-top:19px;
    margin-bottom:15px;
  }

  .catalog-intro{
    font-size:16px;
  }

  .catalog-toolbar{
    margin-top:27px;
    margin-bottom:14px;
  }

  .product-grid{
    gap:16px;
  }

  .product-art{
    height:205px;
  }

  .product-info{
    padding:14px 16px 16px;
  }

  .product-info h2{
    font-family:"Segoe Print","Arial Black",Impact,sans-serif;
    font-size:19px;
    font-weight:900;
    font-style:italic;
    letter-spacing:-.055em;
    transform:skewX(-4deg);
    transform-origin:left center;
  }

  .strength{
    margin-bottom:15px;
    font-size:11px;
  }

  .product-buy strong{
    font-size:18px;
  }

  .add-cart{
    min-width:112px;
    padding:10px 12px;
    font-size:9px;
  }

  .products-shell::before,
  .products-shell::after{
    width:29vw;
    min-width:390px;
    top:52px;
    opacity:.96;
    filter:saturate(1.55) contrast(1.25) brightness(1.10);
    background-size:auto 112%;
  }

  .products-shell::before{
    left:-7.5vw;
  }

  .products-shell::after{
    right:-7.5vw;
  }
}

/* Keep the cart transparent/black-and-gold like the approved V16 homepage. */
.products-page .cart{
  background:rgba(0,0,0,.28) !important;
  border:1px solid #d6a12b !important;
  box-shadow:none !important;
}
.products-page .cart svg{
  fill:none !important;
  stroke:#d6a12b !important;
}
.products-page .cart-count{
  background:#d6a12b !important;
  color:#080808 !important;
}

/* More substantial card frame. */
.product-card{
  border-color:rgba(211,157,37,.78);
}
.product-card:hover{
  border-color:#e0aa2c;
  box-shadow:0 13px 30px rgba(0,0,0,.46),0 0 16px rgba(214,161,43,.08);
}


/* =========================================================
   V19 FINAL VISUAL PASS
   Scope: title/product typography + side gold splatter only.
   Existing layout, sizing, cards, search, nav and cart remain.
   ========================================================= */

/* Pull the gold decoration farther into the viewport so it visibly
   frames the catalog instead of disappearing beyond the screen edge. */
@media (min-width:1201px){
  .products-shell::before,
  .products-shell::after{
    width:34vw;
    min-width:500px;
    top:58px;
    bottom:0;
    opacity:1;
    filter:saturate(1.7) contrast(1.32) brightness(1.18);
    background-size:auto 108%;
    background-position:left center;
  }

  .products-shell::before{
    left:-3.0vw;
  }

  .products-shell::after{
    right:-3.0vw;
    transform:scaleX(-1);
  }

  /* Sharper, more aggressive brush-style treatment without changing
     the approved title dimensions or its position. */
  .catalog-header h1{
    font-family:Impact,"Arial Black","Segoe Print",sans-serif;
    font-weight:900;
    font-style:italic;
    letter-spacing:-.055em;
    transform:skewX(-8deg) scaleY(1.08);
    -webkit-text-stroke:.35px rgba(224,170,44,.75);
    text-shadow:
      -2px 1px 0 rgba(77,53,11,.65),
       0 4px 0 #76510f,
       0 8px 0 #49320a,
       0 13px 20px rgba(0,0,0,.76);
  }

  .product-info h2{
    font-family:Impact,"Arial Black","Segoe Print",sans-serif;
    font-weight:900;
    font-style:italic;
    letter-spacing:.005em;
    transform:skewX(-8deg);
    -webkit-text-stroke:.18px rgba(224,170,44,.7);
  }
}

/* At intermediate widths keep the decoration visible but behind content. */
@media (max-width:1200px) and (min-width:801px){
  .products-shell::before,
  .products-shell::after{
    width:36vw;
    min-width:320px;
    opacity:.78;
    filter:saturate(1.55) contrast(1.25) brightness(1.12);
  }
  .products-shell::before{left:-5vw}
  .products-shell::after{right:-5vw}
}


/* =========================================================
   V22 TYPOGRAPHY CORRECTION
   Scope intentionally limited to US BASED PRODUCTS heading
   and product-name typography. All V19 layout/splatter/card
   positioning remains unchanged.
   ========================================================= */

@media (min-width:1201px){
  .catalog-header h1{
    font-family:"Segoe Print","Brush Script MT","Arial Black",sans-serif;
    font-size:clamp(62px,5.4vw,96px);
    font-weight:900;
    font-style:italic;
    letter-spacing:-.075em;
    transform:skewX(-5deg) scaleY(1.08);
    -webkit-text-stroke:0;
    text-shadow:
      0 3px 0 #7a5410,
      0 7px 0 #4d350b,
      0 12px 20px rgba(0,0,0,.72);
  }

  .product-info h2{
    font-family:"Segoe Print","Brush Script MT","Arial Black",sans-serif;
    font-size:19px;
    font-weight:900;
    font-style:italic;
    letter-spacing:-.055em;
    transform:skewX(-4deg);
    transform-origin:left center;
    -webkit-text-stroke:0;
  }
}

/* Maintain the same brush-oriented hierarchy on smaller screens. */
@media (max-width:1200px){
  .catalog-header h1{
    font-family:"Segoe Print","Brush Script MT","Arial Black",sans-serif;
    font-weight:900;
    font-style:italic;
    letter-spacing:-.055em;
    -webkit-text-stroke:0;
  }

  .product-info h2{
    font-family:"Segoe Print","Brush Script MT","Arial Black",sans-serif;
    font-weight:900;
    font-style:italic;
    letter-spacing:-.04em;
    -webkit-text-stroke:0;
  }
}


/* =========================================================
   V23 FIXED WORDMARK
   The page heading is now a raster graphic, preventing browser
   font substitution from altering the approved brush lettering.
   ========================================================= */
.catalog-header h1.catalog-title-v23{
  margin:0 auto;
  width:min(950px, 74vw);
  max-width:100%;
  transform:none !important;
  font-size:0 !important;
  line-height:0 !important;
  text-shadow:none !important;
  -webkit-text-stroke:0 !important;
}
.catalog-header h1.catalog-title-v23 img{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}
@media (max-width:800px){
  .catalog-header h1.catalog-title-v23{
    width:min(94vw, 950px);
  }
}


/* =========================================================
   V25 APPROVED WORDMARK
   Extra horizontal breathing room prevents the first/last
   brush strokes from being clipped in browser rendering.
   ========================================================= */
.catalog-header h1.catalog-title-v23{
  width:min(1030px, 80vw);
  overflow:visible !important;
}
.catalog-header h1.catalog-title-v23 img{
  width:100%;
  max-width:none;
  overflow:visible;
}


/* =========================================================
   V27 — APPROVED PRODUCT CATALOG DIRECTION
   ========================================================= */
.catalog-page{
  background:
    radial-gradient(circle at 50% 100%, rgba(214,153,0,.18), transparent 30%),
    #050505;
}
.catalog-header h1.catalog-title-v23{
  width:min(1030px,80vw);
}
.product-grid{
  gap:14px;
}
.product-card{
  border:1px solid #d89b00;
  box-shadow:0 0 18px rgba(216,155,0,.08);
  background:linear-gradient(180deg,#090909 0%,#050505 100%);
}
.product-card .product-art{
  min-height:190px;
  background:
    radial-gradient(circle at 50% 70%, rgba(224,160,0,.34), transparent 34%),
    #080808;
}
.product-card .product-art span{
  font-size:0;
}
.product-card .product-art::before{
  content:"";
  display:block;
  width:92px;
  height:160px;
  margin:auto;
  border-radius:17px 17px 13px 13px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.12),transparent 18%,transparent 78%,rgba(255,255,255,.08)),
    linear-gradient(#161616,#050505);
  border:2px solid #d6d6d6;
  box-shadow:0 0 18px rgba(220,156,0,.45);
}
.product-card .product-art::after{
  content:"BLACK HAT";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-5%);
  color:#e0a400;
  font-weight:800;
  font-size:10px;
  letter-spacing:.5px;
  text-align:center;
}
.product-card h2{
  color:#e4a600;
  font-size:18px;
}
.product-buy strong{
  color:#e7a600;
  font-size:24px;
}
.add-cart{
  border-color:#e0a000;
  color:#e0a000;
}

.product-card .product-art{position:relative;display:flex;align-items:center;justify-content:center;}

/* V28 branded vial artwork */
.product-card .product-art::before,.product-card .product-art::after{display:none!important;content:none!important}
.product-card .product-art img{display:block;height:150px;width:auto;max-width:50%;object-fit:contain;margin:auto;filter:drop-shadow(0 0 10px rgba(220,155,0,.28))}
.product-card .product-art{min-height:175px;overflow:hidden}


/* =========================================================
   V29 — PRODUCT VIAL SIZE + LABEL CORRECTION
   ========================================================= */
.product-card .product-art{
  min-height:215px !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-card .product-art img{
  height:215px !important;
  width:auto !important;
  max-width:72% !important;
  object-fit:contain !important;
  margin:auto !important;
  filter:drop-shadow(0 0 14px rgba(220,155,0,.38)) !important;
}
@media(max-width:800px){
  .product-card .product-art{min-height:195px !important;}
  .product-card .product-art img{height:195px !important;}
}


/* =========================================================
   V30 — APPROVED CATALOG RENDERING
   ========================================================= */
.product-grid{
  gap:8px !important;
}
.product-card{
  border-color:#d89b00 !important;
  box-shadow:0 0 10px rgba(216,155,0,.10);
}
.product-card .product-art{
  min-height:205px !important;
}
.product-card .product-art img{
  height:205px !important;
  max-width:70% !important;
}
.product-card h2{
  color:#e5a500 !important;
}
.catalog-page{
  background:
    radial-gradient(circle at 50% 96%,rgba(190,130,0,.12),transparent 28%),
    #050505 !important;
}