:root{--bg:#0b0c10;--card:#111218;--muted:#1a1c24;--text:#eaeaf0;--sub:#c7c9d1;--accent:#00e090;--accent-2:#36d7ff;--border:#232534}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1150px;margin:0 auto;padding:20px}
.site-header{position:sticky;top:0;z-index:10;background:rgba(11,12,16,.9);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;font-size:20px}
.brand-logo{filter:drop-shadow(0 0 6px rgba(0,224,144,.6))}
.nav a{padding:10px 14px;border-radius:10px;border:1px solid transparent}
.nav a:hover{background:var(--muted);border-color:var(--border)}
.filters{display:grid;grid-template-columns:1fr 160px 160px;gap:10px;margin:14px 0 24px}
.search,.select{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:950px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--card),#0f1016);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.card-media{position:relative;aspect-ratio:1/1.05;background:#0a0b0e;display:flex;align-items:center;justify-content:center}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:8px}
.card-title{font-weight:800}.card-sub{color:var(--sub);font-size:14px}.price{font-size:18px}
.badge{border:1px solid var(--border);padding:4px 8px;border-radius:999px;background:var(--muted);font-size:12px}
.breadcrumbs{display:flex;gap:8px;align-items:center;color:var(--sub);font-size:14px;margin:8px 0 14px}
.product{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
@media(max-width:950px){.product{grid-template-columns:1fr;gap:12px}}
.gallery{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:10px}
.main-image{aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:#0a0b0e;display:flex;align-items:center;justify-content:center}
.main-image img,.main-image video,.main-image iframe{width:100%;height:100%;object-fit:cover;border-radius:12px}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumb{aspect-ratio:1/1;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;background:#0a0b0e}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.active{border-color:var(--accent)}
.product-panel{display:flex;flex-direction:column;gap:14px}
.product-title{font-size:28px;font-weight:900;letter-spacing:.3px}
.product-desc{color:var(--sub)}
.qty{display:flex;gap:10px;align-items:center}
.qty input{width:86px;padding:10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--muted);cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#031018;border:none;font-weight:800}
.btn-ghost{background:transparent;border-color:var(--border)}
.meta{display:flex;gap:12px;color:var(--sub);font-size:14px}.badge{border:1px solid var(--border);padding:4px 8px;border-radius:999px;background:var(--muted);font-size:12px}
.alert{background:#1b1f2a;border:1px dashed var(--border);border-radius:12px;padding:12px;color:#1fb990}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.chip{padding:10px 14px;border:2px solid var(--border);border-radius:12px;background:#1c2029;color:#dfe6ee;cursor:pointer;font-weight:800;letter-spacing:.4px;transition:transform .06s ease,border-color .2s ease,background .2s ease}
.chip:hover{transform:translateY(-1px);border-color:var(--accent)}
.chip.active{border-color:var(--accent);background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#031018;box-shadow:0 0 0 3px rgba(0,224,144,.15)}
.video-thumb{position:relative}
.video-thumb::after{content:'▶';position:absolute;inset:0;margin:auto;width:32px;height:32px;display:grid;place-items:center;background:rgba(0,0,0,.55);border-radius:50%;color:#fff;font-weight:900;left:50%;top:50%;transform:translate(-50%,-50%)}
.site-footer{border-top:1px solid var(--border);margin-top:40px}.site-footer p{color:var(--sub);font-size:14px}
/* link cards */
.links-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:950px){.links-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.links-grid{grid-template-columns:1fr}}
.link-card{display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,var(--card),#0f1016);border:1px solid var(--border);border-radius:16px;padding:14px;transition:transform .08s ease, border-color .2s ease, box-shadow .2s ease}
.link-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 22px rgba(0,0,0,.25)}
.link-host{font-size:12px;color:var(--sub)}
.link-title{font-weight:800}
.link-actions{display:flex;gap:8px;align-items:center}
.ext{margin-left:6px;opacity:.8}
.page-title{font-size:28px;font-weight:900;margin:10px 0 12px}
.page-sub{color:var(--sub);margin-bottom:14px}
.section{margin:18px 0}
.section h3{margin:0 0 8px}
.section p{color:var(--sub);line-height:1.6}
ul.clean{margin:6px 0 0 18px;color:var(--sub);line-height:1.6}

/* Size chart table */
.sizechart{margin-top:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.sizechart h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--border);font-size:16px}
.sizechart small{color:var(--sub)}
.sizechart table{width:100%;border-collapse:collapse}
.sizechart th,.sizechart td{padding:10px 12px;border-top:1px solid var(--border);text-align:left}
.sizechart tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* Size chart table */
.sizechart{margin-top:10px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.sizechart h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--border);font-size:16px}
.sizechart table{width:100%;border-collapse:collapse}
.sizechart th,.sizechart td{padding:10px 12px;border-top:1px solid var(--border);text-align:left}
.sizechart tr:nth-child(even) td{background:rgba(255,255,255,.02)}

/* Size warning shown under the size chips on all product pages */
#sizeChips::after{
  content: '⚠️ Sizes are custom for each jacket — please measure and confirm before ordering.';
  display: block;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,214,102,.4);
  background: rgba(255,214,102,.08);
  color: #ffd166;
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference){
  #sizeChips::after{
    animation: pulse 1.6s ease-out 1;
  }
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,214,102,.35); }
  100% { box-shadow: 0 0 0 10px rgba(255,214,102,0); }
}


/*--- mobile pass 2 ---*/
/* base fluid */
img, video, iframe { max-width: 100%; height: auto; }
/* fix container padding on small screens */
.container{ padding-left: 14px; padding-right: 14px; }

/* Header becomes 2-row on small screens; nav is horizontal-scroll */
@media (max-width: 720px){
  .header-inner{ height: auto; padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
  .brand-name{ font-size: 18px; }
  .nav{ width: 100%; display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .nav a{ flex: 0 0 auto; font-size: 14px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; }
}

/* Controls stack and fill */
.controls{ display: flex; gap: 10px; flex-wrap: wrap; }
.controls .input{ width: 100%; }
.controls .btn, .controls select{ width: 100%; max-width: 100%; }

/* Grid & card sizing */
@media (max-width: 900px){
  .grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
  .card img{ height: 210px; }
  .card-body{ padding: 10px 12px; }
}

/* Product page layout */
@media (max-width: 900px){
  .product{ grid-template-columns: 1fr; }
  .main-image{ height: 50vh; }
  .thumbs{ display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .thumb{ flex: 0 0 74px; height: 74px; }
  .chips{ flex-wrap: wrap; gap: 8px; }
  .product-panel .btn, .product-panel .btn-primary, .product-panel .btn-ghost{ width: 100%; }
  .qty input{ height: 44px; }
}

/* Table text size */
@media (max-width: 520px){
  .sizechart th, .sizechart td{ padding: 8px 10px; font-size: 14px; }
  .product-title{ font-size: 22px; }
}


/*--- mobile image contain fix ---*/
@media (max-width: 560px){
  /* Show full product card images on phones without cropping */
  .card img{
    aspect-ratio: 4 / 3;
    height: auto;           /* let height be computed from aspect-ratio */
    object-fit: contain;    /* letterbox to show entire image */
    background: #0b0c0f;
  }
}



/*--- mobile image contain tuning (portrait 3:4) ---*/
@media (max-width: 560px){
  .card img{
    aspect-ratio: 3 / 4;   /* make the image box taller so content looks larger */
    object-fit: contain;
  }
}



/* --- Video thumbnail highlights --- */
.thumb[data-type="video"] { position: relative; }
.thumb[data-type="video"]::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(rgba(0,0,0,.2), rgba(0,0,0,.5));
}
.thumb .thumb-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 42px; line-height: 1;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6);
  pointer-events: none;
}
.thumb .thumb-badge {
  position: absolute; left: 8px; top: 8px;
  font-size: 12px; line-height: 1; padding: 6px 8px;
  background: linear-gradient(90deg,#1f2937,#111827);
  color: #fff; border-radius: 999px; border: 1px solid var(--border);
}
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(54,215,255,0.00); }
  50%  { box-shadow: 0 0 16px 0 rgba(54,215,255,0.45); }
  100% { box-shadow: 0 0 0 0 rgba(54,215,255,0.00); }
}
.thumb[data-type="video"] { border-color: var(--accent-2); animation: glowPulse 2s ease-in-out infinite; }
.watch-video-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; font-size:14px; letter-spacing:.2px;
  border-radius:12px; padding:12px 14px;
  border:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#031018; cursor:pointer;
}
.watch-video-cta:hover { transform: translateY(-1px); }





/* WhatsApp green */
  color:#ffffff; font-weight:800; font-size:13px; letter-spacing:.2px;
  border:1px solid rgba(0,0,0,.15);
}
.wh-cta:hover { transform: translateY(-1px); filter:saturate(108%); background:#1ebe5d; }
.wh-cta svg { width:16px; height:16px; display:block; }
@media (max-width:560px){ .wh-cta span.label { display:none; } .wh-cta { padding:8px; } }


/* === WhatsApp community CTA === */
.wh-cta {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  background:transparent;
  color:#25D366;  /* icon + text inherit this */
  font-weight:800; font-size:13px; letter-spacing:.2px;
  border:1px solid rgba(37,211,102,.55);
  transition: all .18s ease;
}
.wh-cta:hover { background:rgba(37,211,102,.10); border-color:#25D366; transform:translateY(-1px); }
.wh-cta:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(37,211,102,.25); }
.wh-cta svg { width:16px; height:16px; display:block; }
@media (max-width:560px){ .wh-cta span.label { display:none; } .wh-cta { padding:8px; } }


/* === Override: Keep WhatsApp CTA full (desktop-style) on mobile === */
@media (max-width: 560px) {
  .wh-cta span.label { 
    display: inline !important;
  }
  .wh-cta { 
    padding: 8px 10px !important; 
    gap: 8px !important;
  }
  /* If the header wraps, keep good spacing */
  .header-inner { 
    row-gap: 8px;
  }
}


/* ===== Mobile responsiveness pass ===== */

/* Make form controls fluid */
.search, .select { width: 100%; }

/* Container breathing room on smaller screens */
@media (max-width: 900px) {
  .container { padding: 16px; }
}

/* Filters: 3 -> 2 cols with full-width search */
@media (max-width: 720px) {
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .search { grid-column: 1 / -1; }
}

/* Filters: stack everything on very small screens */
@media (max-width: 520px) {
  .filters { grid-template-columns: 1fr; }
}

/* Header: keep things compact while allowing wrap */
@media (max-width: 720px) {
  .brand { font-size: 18px; }
  .nav a { padding: 8px 10px; }
}

/* Card text sizing on mobile */
@media (max-width: 620px) {
  .card-title { font-size: 15px; }
  .price { font-size: 16px; }
}

/* Make the size chart / any wide tables scroll horizontally */
.sizechart, .table-scroll {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* Keep images contained safely */
img { max-width: 100%; height: auto; }


/* ===== Deep mobile header + overall responsiveness improvements ===== */

/* Let brand text truncate gracefully */
.brand { max-width: 50vw; min-width: 0; }
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block; max-width: 46vw; }

/* Make the nav a pill bar that scrolls horizontally on small screens */
.nav { display:flex; gap: 8px; align-items:center; }
@media (max-width: 768px) {
  .header-inner { flex-wrap: nowrap; gap: 8px; padding: 8px 10px; }
  .nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .nav a, .nav .wh-cta { flex: 0 0 auto; white-space: nowrap; }
  /* Optional: slight bottom padding so chips don't get clipped */
  .nav { padding-bottom: 2px; }
  /* Tighter brand text */
  .brand { font-size: 18px; }
}

/* Even narrower phones */
@media (max-width: 380px) {
  .brand { font-size: 16px; }
  .brand-name { max-width: 42vw; }
}

/* Page titles & subtitles scale down */
@media (max-width: 560px) {
  .page-title { font-size: 22px; }
  .page-sub { font-size: 14px; }
}

/* Keep WhatsApp CTA desktop-like but ensure it can scroll with nav */
@media (max-width: 560px) {
  .wh-cta span.label { display: inline !important; }
  .wh-cta { padding: 8px 10px !important; gap: 8px !important; }
}

/* Product card tweaks */
@media (max-width: 420px) {
  .card-body { padding: 12px; }
  .card-sub { font-size: 13px; }
  .price { font-size: 16px; }
}

/* Prevent layout jump on iOS address bar show/hide */
:root { height: 100%; }
body { min-height: 100%; }

/* Nice thin scrollbars for the horizontal nav (WebKit) */
.nav::-webkit-scrollbar { height: 6px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.nav::-webkit-scrollbar-track { background: transparent; }


/* === Mobile header layout: stack and push WhatsApp CTA below === */
@media (max-width: 720px) {
  .header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .nav a { text-align: center; }
  /* Make the WhatsApp CTA occupy its own full row below */
  .nav .wh-cta {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}



/* === Mobile fixes (2025-10-04) === */

/* Make header flexible and allow wrapping */
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Filters go single column on smaller screens */
@media (max-width: 760px){
  .filters{grid-template-columns:1fr;gap:10px}
}

/* Put WhatsApp button on its own row and make it prominent on mobile */
@media (max-width: 820px){
  .nav a:last-child{flex-basis:100%;text-align:center;border-color:var(--accent);background:rgba(0,224,144,.08)}
}

/* Ensure product card images show fully on mobile */
@media (max-width: 700px){
  .card-media img{object-fit:contain}
  .main-image img,.main-image video{object-fit:contain}
}

/* Safer image defaults */
img{max-width:100%;height:auto}

/* Avoid 100vh issues on mobile browsers */
:root{--vh:100dvh}
.full-viewport{min-height:var(--vh)}

.no-size-warning #sizeChips::after{content:none !important; display:none !important;}


/* Make pressed size chips visibly active without changing JS */
.chip[aria-pressed="true"]{
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #031018;
  box-shadow: 0 0 0 3px rgba(0,224,144,.15);
}