/* ==============================
   Base
============================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:var(--text-primary);
  background:var(--background);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Global page container centered on all screens */
.container{
  width:100%;
  max-width:1400px;
  margin:0 auto;           /* center container */
  padding:0 16px;          /* mobile gutters */
}

.grid{display:grid;gap:20px}

.chips{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}
.chips{ accent-color: var(--brand); }

/* ==============================
   Tags / Badges
============================== */
.badges .tag,
.tag{
  display:inline-block;
  padding:5px 10px;
  border-radius:0px;
  border:1px solid var(--border);
  font-size:14px;
  color:#000000;
  background:var(--border);
  cursor:pointer;
  text-decoration:none;
}
.badges .tag:hover{opacity:.9}

/* ==============================
   Buttons
============================== */
.btn{padding:12px 16px;border:none;border-radius:10px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--text-light)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--secondary);color:var(--text-light)}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-primary)}

/* ==============================
   Cards
============================== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.card .cover{/*background:var(--secondary);*/height:250px}
.card .body{padding:14px}
.meta{font-size:12px;color:var(--text-secondary)}

/* ==============================
   Product layout (centered everywhere)
============================== */
/* Mobile-first: stacked & centered */
.product-wrap{
  display:flex;
  flex-direction:column;
  gap:0px;
  align-items:center;
  width:100%;
  max-width:1200px;              /* center the whole product section */
  margin-left:auto;
  margin-right:auto;
}

/* NEW: Keep 2 columns between 768–1023px with smaller left column */
@media (min-width:768px) and (max-width:1023px){
  .product-wrap{
    display:grid;
    grid-template-columns:0.8fr 1.2fr;  /* image/info */
    gap:24px;
    align-items:start;
    justify-content:center;
    justify-items:stretch;
  }
  /* gallery tighter so two columns fit well */
  .photo-wrap, .thumbs-wrapper, .main-photo{ max-width:460px; }
  .product-info{ font-size:15px; line-height:1.5; }
}

/* Desktop: two columns, centered grid */
@media (min-width:1024px){
  .product-wrap{
    display:grid;
    grid-template-columns:1.1fr 0.9fr; /* balanced ratio */
    gap:16px;
    align-items:start;
    justify-content:center;   /* center the grid tracks */
    justify-items:center;     /* center children in tracks */
  }
  .product-wrap > *{ width:100%; min-width:0; } /* avoid content-based min size issues */
}

/* Right column text scale for <1024px (fallback for smaller screens) */
@media (max-width:1023px){
  .product-info{ font-size:14px; line-height:1.4; }
  .product-info h1, .product-info .title{ font-size:18px; }
  .product-info table td, .product-info table th{ font-size:13px; padding:6px 8px; }
  .product-info .btn{ font-size:14px; padding:10px 14px; }
}

/* Specs table */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid var(--border);padding:10px;text-align:left}
.table th{background:#f2f6fb}

/* ==============================
   Gallery (image + thumbs + arrows)
============================== */
.gallery{ display:grid; justify-items:center; }

/* Wrappers */
.photo-wrap,
.thumbs-wrapper{
  width:100%;
  max-width:100%;
  margin:0 auto;
  position:relative;
}

/* Main image */
.main-photo{
  width:100%;
  max-width:100%;
  display:block;
  margin:0 auto;
  border-radius:12px;
  object-fit:cover;
  cursor:pointer;
}

/* Tighten space between image and thumbs */
.photo-wrap{ margin-bottom:8px; }
.thumbs-wrapper{ margin-top:8px; }

/* Thumbnails area */
.thumbs-wrapper{
  position:relative;
}
.thumbs{
  display:flex;
  gap:8px;
  overflow-x:auto;                 /* enable scroll/swipe */
  padding:6px 0;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  justify-content:flex-start;
  max-width:calc((92px + 8px) * 4);/* show 4 thumbs; rest scroll */
  flex-wrap:nowrap;
}
.thumbs::-webkit-scrollbar{height:6px}

.thumb{
  flex:0 0 92px;
  height:100px;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  cursor:pointer;
  scroll-snap-align:start;
  background:#fff;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.active{outline:2px solid rgba(1,62,116,.25)}

/* Scroll arrows (centered on the thumbnail strip) */
.thumbs-wrapper .scroll-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.55);
  color:#fff;
  border:0;
  border-radius:50%;
  cursor:pointer;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  z-index:5;line-height:1;
  transition:opacity .18s ease, transform .18s ease;
}
.thumbs-wrapper .scroll-btn.left{ left:-18px }
.thumbs-wrapper .scroll-btn.right{ right:-18px }
.thumbs-wrapper .scroll-btn.disabled{ opacity:0; pointer-events:none }
.thumbs-wrapper .scroll-btn:not(.disabled):hover{ transform:translateY(-50%) scale(1.05) }

/* ---- Responsive gallery widths ---- */
/* Desktop ≥1200px → slightly wider to reduce blank space */
@media (min-width:1200px){
  .photo-wrap, .thumbs-wrapper, .main-photo{ max-width:500px; }
}

/* Small desktop 900–1199px */
@media (min-width:900px) and (max-width:1199px){
  .photo-wrap, .thumbs-wrapper, .main-photo{ max-width:480px; }
}

/* Fallback desktop floor ≥1024px (if above rules don't hit) */
@media (min-width:1024px){
  .photo-wrap, .thumbs-wrapper, .main-photo{ max-width:450px; }
}

/* Small tablets / large phones 481–767px — stacked & centered */
@media (min-width:481px) and (max-width:899px){
  .gallery{ align-items:center; }
  .photo-wrap, .thumbs-wrapper, .main-photo{ max-width:480px; margin:0 auto; }
  .thumbs-wrapper{ display:block; overflow-x:auto; }
}

/* Phones ≤480px — full width & swipe; hide arrows */
@media (max-width:480px){
  .gallery{ align-items:center; }
  .photo-wrap, .thumbs-wrapper, .main-photo{ max-width:100%; margin:0 auto; }
  .thumbs-wrapper{ display:block; overflow-x:auto; }
  .thumbs-wrapper .scroll-btn{ display:none; }
}

/* Center the thumbnails row itself under the image (when there is extra space) */
.thumbs{
  max-width: min( calc((92px + 8px) * 4), 100% );
  margin-left:auto;
  margin-right:auto;
}

/* ==============================
   Drawer (quote cart)
============================== */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:40}
.drawer{position:fixed;top:0;right:-420px;width:420px;max-width:100vw;height:100vh;background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 20px rgba(0,0,0,.08);transition:right .25s ease;z-index:41;display:flex;flex-direction:column}
.drawer.open{right:0}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.drawer header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.drawer .content{padding:14px 16px;overflow:auto;/*flex:1;*/display:grid;gap:10px}
.drawer .footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* Force both buttons to same height and alignment */
.drawer .footer button {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}



.success {
  font-size: 14px;
  color: green;
}
.item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;border:1px solid var(--border);border-radius:10px;padding:8px;margin: 5px 0 5px 0;}
.item img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.item .title{font-weight:700}
.qty{display:flex;align-items:center;gap:8px}
.qty input{width:64px;padding:8px;border:1px solid var(--border);border-radius:8px}

/* Drawer form */
#googleForm{display:grid;gap:10px}
#googleForm input{padding:10px;border:1px solid var(--border);border-radius:8px}
.button-row{display:flex;gap:10px;justify-content:flex-end}
.success{color:var(--success);font-weight:700;text-align:center}
.empty{color:var(--text-secondary);text-align:center;padding:16px;border:1px dashed var(--border);border-radius:10px;background: var(--border);}

/* ==============================
   Lightbox (fullscreen image)
============================== */
.lightbox-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.8);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60}
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:61}
.lightbox.open,.lightbox-backdrop.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:92vh;display:block;border-radius:12px}
.lightbox .close{position:absolute;top:85px;right:20px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:700}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.60);color:#000000;border-radius:50%;cursor:pointer;font-size:32px;user-select:none}
.lightbox .nav.prev{left:20px}
.lightbox .nav.next{right:20px}
@media (max-width:768px){
  .lightbox img{max-width:96vw;max-height:86vh}
}

/* for you might like this*/
.scroll-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

.scroll-grid {
  display: flex;
  gap: 1rem;
}

.scroll-grid .card {
  min-width: 250px;
  flex: 0 0 auto;
  border: 1px solid #ddd;
  border-radius: 8px;
/* background: #fff; */
  overflow: hidden;
}

.card .cover img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}
.card a {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

.card a:hover {
  text-decoration: none;
}


.scroll-container {
  scroll-snap-type: x mandatory;
}
.scroll-grid .card {
  scroll-snap-align: start;
}
/* ApparelsPage*/
.apparel-grid {
    display: grid
;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 16px;
}
.apparel-card {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: 0 6px 16px rgba(13, 38, 63, 0.04);
    display: flex
;
    gap: 12px;
    align-items: flex-start;
}

.apparel-btn {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

@media (max-width: 426px) {

  .product-info {
    display: flex;
    flex-direction: column;
  }

  /* Title stays on top */
  .product-info .title {
    order: 1;
  }

  /* Qty / Add to Quote block */
  .product-info div[style*="display:flex"] {
    order: 2;
  }

  /* Description */
  .product-info p {
    order: 3;
  }

  /* Quick specs */
  .product-info h6,
  .product-info table {
    order: 4;
  }

  /* BADGES BLOCK (Screen Print / DTF / Embroidery) */
  .product-info .badges {
    order: 99;   /* push it to absolute bottom */
    margin-top: 15px;
  }
}

@media (max-width: 426px) { .product-info { display: flex; flex-direction: column; } /* Title stays on top */ .product-info .title { order: 1; } /* Qty / Add to Quote block */ .product-info div[style*="display:flex"] { order: 2; } /* Description */ .product-info p { order: 3; } /* Quick specs */ .product-info h6, .product-info table { order: 4; } /* BADGES BLOCK (Screen Print / DTF / Embroidery) */ .product-info .badges { order: 99; /* push it to absolute bottom */ margin-top: 15px; } }