/* ==========================================================
   1. RESET & VARIABLES
   ========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#111111; --white:#FAFAFA; --cream:#F5F0EB; --accent:#C8A96E;
  --muted:#7A7A7A; --border:#E0DAD4; --red:#C92A2A; --green:#2B6E4E;
  --orange:#C96A0A; --lr:#FDF1F1; --lg:#EAF5EF; --lo:#FEF3E2;
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--black);overflow-x:hidden}

/* ==========================================================
   2. HEADER & PROMO TICKER
   ========================================================== */
.ticker-wrap{background:var(--black);color:var(--cream);overflow:hidden;padding:10px 0;z-index:100;position:relative}
.ticker-track{display:flex;white-space:nowrap;animation:tick 36s linear infinite;width:max-content}
.ticker-wrap:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;letter-spacing:.05em;padding:0 32px}
.ticker-dot svg{width:12px;height:12px;fill:var(--accent)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

header{background:var(--cream);border-bottom:1px solid var(--border);padding:13px 40px;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:50}
.logo{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;color:var(--black);text-decoration:none}
.logo span{color:var(--accent)}

/* ==========================================================
   3. PRODUCT PAGE LAYOUT & GALLERY (FIXED)
   ========================================================== */
.bc{padding:13px 40px;font-size:12px;color:var(--muted);letter-spacing:.04em}
.pg{display:grid;grid-template-columns:1fr 1fr;max-width:1280px;margin:0 auto;padding:0 40px 100px;gap:60px;}

/* Gallery Column Fix: min-width:0 is essential for sliders in Grid */
.gc{position:sticky;top:72px;align-self:start;padding-right:20px; min-width: 0; width: 100%;}

.mw{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--cream);cursor:zoom-in}
.mw img{width:100%;height:100%;object-fit:cover;transition:transform .08s ease;transform-origin:var(--ox,50%) var(--oy,50%);display:block;user-select:none}
.mw.z img{transform:scale(2)}
.zh{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;padding:5px 10px;border-radius:20px;pointer-events:none;transition:opacity .3s;display:flex;align-items:center;gap:4px}
.zh svg{width:12px;height:12px;fill:white}
.mw.z .zh{opacity:0}

/* Professional Thumbs Slider with Arrows */
.thumbs-wrapper { position: relative; margin-top: 16px; display: flex; align-items: center; width: 100%; }
.thumbs { display: flex; gap: 12px; overflow-x: auto; scroll-behavior: smooth; padding: 4px 0; flex: 1; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; width: 100%; }
.thumbs::-webkit-scrollbar { display: none; }

.th { width: 72px; height: 88px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); cursor: pointer; transition: all 0.2s ease; background: var(--cream); flex-shrink: 0; }
.th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th.a { border-color: var(--black); border-width: 2px; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.th:hover:not(.a) { border-color: var(--accent); transform: translateY(-1px); }

/* Navigation Arrows */
.thumb-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; background: var(--white);
    border: 1px solid var(--border); border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; z-index: 10; color: var(--black);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s ease;
}
.thumb-nav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.thumb-nav:hover { border-color: var(--black); background: var(--cream); }
.thumb-nav.prev { left: -10px; }
.thumb-nav.next { right: -10px; }
.thumbs-wrapper:hover .thumb-nav { opacity: 1; }

/* ==========================================================
   4. PRODUCT INFO, BUTTONS & MODALS
   ========================================================== */
.ic{padding-top:6px}
.bt{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.pt{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;line-height:1.18;margin-bottom:10px;letter-spacing:-.01em}
.rr{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;fill:var(--accent)}
.rc{font-size:13px;color:var(--muted)}
.pr{display:flex;align-items:baseline;gap:12px;margin-bottom:5px}
.pn{font-size:32px;font-weight:700;letter-spacing:-.02em}
.po{font-size:18px;color:var(--muted);text-decoration:line-through}
.pb{background:var(--lo);color:var(--orange);font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px}
.tn{font-size:12px;color:var(--muted);margin-bottom:16px}
.div{border:none;border-top:1px solid var(--border);margin:18px 0}

/* Descriptions */
.ds{margin-bottom:20px}
.dt{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.dtx{font-size:14px;color:#444;line-height:1.78;margin-bottom:12px}
.dfl{list-style:none;display:grid;gap:7px}
.dfl li{font-size:13.5px;color:#555;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.dfl li::before{content:"";display:inline-block;width:10px;height:10px;background:var(--accent);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;margin-top:5px;flex-shrink:0}
.long-desc{margin-top:28px;background:var(--cream);padding:18px 20px;border-radius:8px}
.long-desc h3{font-family:'Playfair Display',serif;font-size:18px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.long-desc h3 svg{width:20px;height:20px;stroke:var(--accent);fill:none}
.long-desc p{font-size:13.5px;line-height:1.7;color:#444}

/* Colors & Sizes */
.ol{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.os{font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0;font-size:13px}
.cols{display:flex;gap:10px;margin-bottom:22px}
.cs{width:34px;height:34px;border-radius:50%;cursor:pointer;transition:transform .2s;outline:2.5px solid transparent;outline-offset:3px}
.cs:hover{transform:scale(1.1)}
.cs.a{outline-color:var(--black)}
.csb{background:#1a1a1a}.csw{background:#f0ede8;box-shadow:inset 0 0 0 1px #c8c8c8}.csn{background:#1B3A5C}.css{background:#7D9E87}
.szrow{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.sb{min-width:52px;height:46px;padding:0 12px;border:1.5px solid var(--border);background:var(--white);border-radius:5px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;cursor:pointer;position:relative;transition:border-color .2s,background .2s,color .2s;overflow:hidden}
.sb:not(.oos):hover{border-color:var(--black)}
.sb.a{background:var(--black);color:var(--white);border-color:var(--black)}
.sb.oos{color:#c0bcb8;cursor:not-allowed;background:#F7F5F2}
.sb.oos::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:#d0ccc8;transform:rotate(-18deg)}
.sz-err{font-size:12.5px;color:var(--red);margin-top:-6px;margin-bottom:12px;display:none;font-weight:500;align-items:center;gap:4px;}
.sz-err.show{display:flex}
.sgl{font-size:12.5px;color:var(--muted);text-decoration:underline;cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;transition:color .2s}
.sgl svg{width:14px;height:14px;fill:none;stroke:currentColor}
.sgl:hover{color:var(--black)}

/* Stock & Buy */
.sts{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:5px 13px;border-radius:20px;margin-bottom:18px}
.sd{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.si{background:var(--lg);color:var(--green)}.si .sd{background:var(--green)}
.sl{background:var(--lo);color:var(--orange)}.sl .sd{background:var(--orange);animation:pulse 1.3s ease infinite}
.so{background:var(--lr);color:var(--red)}.so .sd{background:var(--red)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.5)}}
.qr{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.ql{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.qc{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:5px;overflow:hidden}
.qb{width:40px;height:44px;background:var(--cream);border:none;cursor:pointer;color:var(--black);display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.qb svg{width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none;}
.qb:hover{background:#e8e2db}
.qn{width:54px;height:44px;text-align:center;font-size:15px;font-weight:600;border:none;outline:none;font-family:'DM Sans',sans-serif;background:var(--white);-moz-appearance:textfield}
.qn::-webkit-outer-spin-button,.qn::-webkit-inner-spin-button{-webkit-appearance:none}
.tb{display:flex;border:1px solid var(--border);border-radius:7px;overflow:hidden;margin-bottom:20px}
.bg{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;text-align:center;font-size:11.5px;font-weight:500;color:var(--muted);line-height:1.45;border-right:1px solid var(--border)}
.bg:last-child{border-right:none}
.bg svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.7;margin-bottom:7px}
.bg strong{display:block;color:var(--black);font-size:12px;font-weight:700;margin-bottom:2px}
.buybtn{width:100%;padding:16px;background:var(--black);color:var(--white);border:none;border-radius:5px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s,transform .15s;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:8px;}
.buybtn svg{width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2;}
.buybtn:hover{background:#2c2c2c}

/* Mobile Sticky Bar */
.sticky{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--border);padding:12px 16px;z-index:200;box-shadow:0 -4px 24px rgba(0,0,0,.1)}
.si2{display:flex;align-items:center;gap:12px}
.spi{display:flex;flex-direction:column;flex-shrink:0}
.spm{font-size:18px;font-weight:700;line-height:1}
.sps{display:flex;align-items:center;gap:6px;margin-top:3px}
.sold{font-size:12px;color:var(--muted);text-decoration:line-through}
.soff{font-size:11px;font-weight:700;color:var(--orange);background:var(--lo);padding:2px 7px;border-radius:10px}
.sqc{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:5px;overflow:hidden;flex-shrink:0}
.sqb{width:34px;height:36px;background:var(--cream);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sqb svg{width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none;}
.sqn{width:36px;height:36px;text-align:center;font-size:13px;font-weight:700;line-height:36px;border:none;background:var(--white)}
.sbtn{flex:1;padding:12px;background:var(--black);color:var(--white);border:none;border-radius:5px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;}
.sbtn svg{width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2;}

/* Modals & Checkout */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:900;display:flex;align-items:flex-start;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto}
.ov.open{opacity:1;pointer-events:all}
.modal{background:var(--white);border-radius:10px;width:100%;max-width:560px;transform:translateY(30px);transition:transform .35s cubic-bezier(.22,1,.36,1);overflow:hidden;margin:auto;display:flex;flex-direction:column;max-height:90vh;position:relative}
.ov.open .modal{transform:translateY(0)}
.mh{background:var(--black);color:var(--white);padding:17px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:10}
.mh h2{font-family:'Playfair Display',serif;font-size:19px;font-weight:600}
.mc{background:none;border:none;color:rgba(255,255,255,.7);cursor:pointer;padding:4px;transition:color .2s;display:flex;align-items:center;justify-content:center;}
.mc svg{width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2;}
.mc:hover{color:#fff}
.mb {padding: 2px 24px;overflow-y: auto;flex: 1;margin: 1px;}
.svg-icon{display:inline-block;vertical-align:middle}
.err-icon{color:var(--red);margin-right:6px}
.fst{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--border)}
.fg{display:grid;gap:14px}
.fr3{display:grid;gap:14px}
.fm{display:flex;flex-direction:column;gap:5px}
.fm label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#666}
.fm input,.fm select{height:44px;border:1.5px solid var(--border);border-radius:5px;padding:0 12px;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--black);background:var(--white);outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.fm input:focus{border-color:var(--black);box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.fm input.ie{border-color:var(--red)!important;background:#fffafa}
.ferr{font-size:11.5px;color:var(--red);font-weight:500;display:none;margin-top:1px;align-items:center;gap:4px}
.ferr.show{display:flex}
.pw{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:5px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.pw:focus-within{border-color:var(--black);box-shadow:0 0 0 3px rgba(17,17,17,.06)}
.pw.pwe{border-color:var(--red)!important;background:#fffafa}
.pp{background:var(--cream);padding:0 12px;height:44px;display:flex;align-items:center;font-size:14px;font-weight:600;border-right:1.5px solid var(--border);color:var(--muted);flex-shrink:0}
.pw input{border:none!important;flex:1;height:44px;outline:none;font-size:14px;background:transparent;padding:0 12px}
.pinh{font-size:11.5px;margin-top:2px;display:flex;align-items:center;gap:4px}
.pio{color:var(--green);font-weight:500}
.pie{color:var(--red)}
.d-tail{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.payment-group{margin:18px 0 12px}
.payment-option{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px;padding:12px;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;transition:all .2s;position:relative;}
.payment-option.selected{border-color:var(--black);background:var(--cream)}
.payment-option input{width:18px;height:18px;margin-top:2px;accent-color:var(--black);cursor:pointer;pointer-events:none;}
.pay-detail{flex:1}
.pay-detail strong{font-size:14px;display:block;margin-bottom:4px}
.pay-detail small{font-size:12px;color:var(--muted);display:block;line-height:1.4}
.cod-confirm-container{margin-bottom:12px; background:#fff3e0; border-left:3px solid var(--orange); padding:14px; border-radius:6px; display:none;}
.cod-confirm-container p{font-size:13px; margin-bottom:12px; display:flex; align-items:center; color:var(--black); font-weight:500;}
.cod-confirm-buttons{display:flex; gap:10px; flex-wrap:wrap;}
.confirm-btn{flex:1; border:none; padding:10px 14px; border-radius:5px; font-size:13px; font-weight:600; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background .2s; white-space:nowrap;}
.confirm-btn.secondary{background:var(--black); color:white;}
.confirm-btn.highlight{background:#e8e2db; color:var(--black);}
.confirm-btn.highlight:hover{background:#dcd5cd;}
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
.shake{animation:shake .4s ease-in-out}
.order-summary-card{margin:18px 0;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.summary-header{background:var(--cream);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:600}
.summary-header svg{width:18px;height:18px;transition:transform .2s}
.summary-content{max-height:0;overflow:hidden;transition:max-height .3s ease;background:var(--white)}
.summary-content.open{max-height:600px;padding:16px}
.product-mini{display:flex;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.product-mini-img{width:64px;height:80px;object-fit:cover;border-radius:6px;background:var(--cream)}
.product-mini-details{flex:1}
.product-mini-name{font-weight:700;font-size:14px;margin-bottom:4px}
.product-mini-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.product-mini-price{font-weight:600;font-size:13px;margin-top:4px}
.summary-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:12px;color:#444}
.summary-row.total{font-weight:700;font-size:15px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);color:var(--black)}
.tax-note{font-size:11px;color:var(--muted);text-align:right;margin-top:4px}
.cod-breakdown{background:var(--lo);border-radius:6px;padding:12px;margin-top:12px}
.cod-breakdown-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:8px}
.cod-breakdown-row:last-child{margin-bottom:0;font-weight:600;color:var(--orange)}
.cod-breakdown-label{display:flex;align-items:center;gap:6px}
.toerr{background:var(--lr);border:1px solid #f5c0c0;border-radius:6px;padding:10px 14px;font-size:13px;color:var(--red);font-weight:500;display:none;margin-bottom:14px;line-height:1.5}
.toerr.show{display:flex; align-items:flex-start; gap:8px;}
.sticky-btn-container{position:sticky;bottom:0;background:var(--white);padding-top:12px;padding-bottom:12px;border-top:1px solid var(--border);margin-top:12px;z-index:20;}
.pb2{width:100%;padding:17px;background:var(--black);color:var(--white);border:none;font-size:14px;font-weight:700;letter-spacing:.05em;cursor:pointer;border-radius:5px;transition:background .2s;display:flex;align-items:center;justify-content:center;text-align:center;}
.pb2:hover{background:#2c2c2c}
.pb2:disabled{background:#888;cursor:not-allowed}
@keyframes spin{100%{transform:rotate(360deg)}}
.pb2 .ld{display:none; animation:spin 1s linear infinite; margin-left:10px;}
.pb2.loading .ld{display:inline-block;}
.succ-card{background:var(--white); border-radius:12px; padding:30px 20px; text-align:center; max-width:440px; width:100%; margin:auto; position:relative;}
.succ-icon{width:64px; height:64px; background:var(--lg); color:var(--green); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.succ-title{font-family:'Playfair Display',serif; font-size:26px; font-weight:700; margin-bottom:8px;}
.succ-sub{font-size:14px; color:var(--muted); margin-bottom:24px;}
.succ-details{text-align:left; background:var(--cream); padding:16px 20px; border-radius:8px; font-size:13.5px; line-height:1.7; color:#333; margin-bottom:24px;}
.succ-details strong{color:var(--black); min-width:80px; display:inline-block;}
.sov{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
.sov.open{opacity:1;pointer-events:all}
.sm{background:var(--white);border-radius:10px;width:100%;max-width:540px;transform:scale(.94);transition:transform .3s;overflow:hidden}
.sov.open .sm{transform:scale(1)}
.smh{padding:17px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.smh h3{font-family:'Playfair Display',serif;font-size:20px}
.stw{padding:20px;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;border:1px solid var(--border);}
th{background:var(--black);color:white;padding:12px;font-weight:600;}
td{padding:12px;border-bottom:1px solid var(--border);color:#444;}
tr:last-child td{border-bottom:none;}
tr:nth-child(even){background:var(--white);}
tr:hover{background:var(--cream);}

/* ==========================================================
   6. HOME PAGE & FOOTER
   ========================================================== */
.hero-banner { background: var(--cream); padding: 90px 40px; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 60px; }
.hero-title { font-family: 'Playfair Display', serif; font-size: 52px; font-weight: 700; color: var(--black); margin-bottom: 16px; letter-spacing: -0.02em; text-transform: uppercase; }
.hero-subtitle { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--muted); max-width: 500px; margin: 0 auto; line-height: 1.6; letter-spacing: 0.02em; }

.home-container { max-width: 1320px; margin: 0 auto; padding: 0 40px 100px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 60px 30px; }
.product-card { text-decoration: none; color: var(--black); display: flex; flex-direction: column; }
.product-img-wrap { width: 100%; aspect-ratio: 3/4; overflow: hidden; background: #f4f4f4; margin-bottom: 20px; position: relative; border-radius: 6px;}
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; }
.product-card:hover .product-img-wrap img { transform: scale(1.05); }

.badge-sale { position: absolute; top: 15px; left: 15px; background: var(--black); color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; padding: 5px 10px; text-transform: uppercase; z-index: 2; }
.quick-view { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); color: var(--black); text-align: center; padding: 15px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transform: translateY(100%); transition: transform 0.3s ease; z-index: 2; backdrop-filter: blur(4px); }
.product-card:hover .quick-view { transform: translateY(0); }

.product-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.product-brand { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.product-card-title { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--black); line-height: 1.3; }
.product-card-price { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px; color: var(--black); display: flex; gap: 10px; align-items: center; }
.product-card-original { font-size: 13px; color: var(--muted); text-decoration: line-through; font-weight: 400; }

.modern-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 80px; padding-top: 40px; border-top: 1px solid var(--border); }
.modern-pagination a, .modern-pagination span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--muted); transition: all 0.3s ease; }
.modern-pagination a:hover { color: var(--black); }
.modern-pagination .active { color: var(--black); border-bottom: 2px solid var(--black); pointer-events: none; border-radius: 0; height: auto; padding-bottom: 4px; margin-top: -4px; }
.modern-pagination .disabled { color: #e0e0e0; pointer-events: none; }
.modern-pagination svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* Footer Styles */
.site-footer { background: var(--black); color: var(--white); padding: 70px 40px 30px; font-family: 'DM Sans', sans-serif; margin-top: auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; max-width: 1280px; margin: 0 auto 50px; }
.footer-col h4 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--accent); letter-spacing: 0.05em; }
.footer-about p { font-size: 13.5px; line-height: 1.8; color: #ccc; margin-bottom: 12px; }
.footer-about strong { color: var(--white); font-weight: 600; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #ccc; text-decoration: none; font-size: 13px; transition: color 0.2s, padding-left 0.2s; display: inline-block; text-transform: capitalize; }
.footer-links a:hover { color: var(--accent); padding-left: 4px; }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: 13px; color: #888; }

/* ==========================================================
   7. RESPONSIVE MEDIA QUERIES
   ========================================================== */
@media(max-width:920px){
  .pg{grid-template-columns:1fr;padding:0 18px 140px; gap: 5px;}
  .gc{position:static;padding-right:0;margin-bottom:10px; max-width: 100%;}
  
  /* Thumbs Wrapper fix for Mobile Swiping */
  .thumbs-wrapper { margin-top: 12px; }
  .thumb-nav { display: none !important; }
  .thumbs { padding: 4px 18px; margin: 0 -18px; }
  
  .sticky{display:block}
  .buybtn.dn{display:none}
  header{padding:16px 18px}
  .bc{padding:10px 18px}
  .pt{font-size:27px}

  /* Home Page Fixes */
  .hero-banner { padding: 60px 20px; margin-bottom: 40px; }
  .home-container { padding: 0 20px 80px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 15px; }
  .quick-view { display: none; }
  
  /* Footer Fixes */
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
}

@media(max-width:600px){
  .modal{max-width:100%; border-radius:14px 14px 0 0;}
  .ov{padding:0;align-items:flex-end}
  .fr3,.d-tail{grid-template-columns:1fr}
  .bg{border-bottom:1px solid var(--border)}
  .bg:last-child{border-bottom:none}
  .cod-confirm-buttons{flex-direction:column;}
  
  /* Home Page Grid Single Column */
  .product-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ==========================================================
   PREMIUM VIDEO INTEGRATION
   ========================================================== */
/* Main Video Styling */
.m-vid { width: 100%; height: 100%; object-fit: cover; display: none; }

/* Disable zoom cursor when video is active */
.mw.is-video { cursor: default; }
.mw.is-video img { display: none; }
.mw.is-video .m-vid { display: block; }

/* Thumbnail Video Play Overlay */
.th { position: relative; } /* Ensure .th is relative */
.vid-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    pointer-events: none; /* So clicks pass through to thumbnail */
    backdrop-filter: blur(2px);
    transition: all 0.2s ease;
}
.th.a .vid-icon { background: var(--accent); color: var(--black); }
.vid-icon svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }
/* ==========================================================
   PREMIUM VIDEO PLAYER & SPECIFIC SKIP BUTTONS
   ========================================================== */
.vid-wrapper { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: var(--black); }
.mw.is-video { cursor: default; background: var(--black); }
.mw.is-video .vid-wrapper { display: block; }
.mw.is-video img, .mw.is-video .zh { display: none; }
.m-vid { width: 100%; height: 100%; object-fit: contain; outline: none; }

/* 🔥 HIDE 3-DOT OVERFLOW MENU (Forcefully in all WebKit browsers) */
video::-webkit-media-controls-overflow-button,
video::-internal-media-controls-overflow-button {
    display: none !important;
}
video::-webkit-media-controls-enclosure {
    overflow: hidden !important;
}


/* 🔥 Specific Floating Skip Buttons */
.vid-skip-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 15px; 
    pointer-events: none; 
    z-index: 10;
}

.skip-btn {
    background: rgba(0, 0, 0, 0.5);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    
    /* DEFAULT HIDDEN STATE */
    opacity: 0;
    pointer-events: none; /* Gayab hone par click block nahi karega */
}

.skip-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* 🔥 SHOW BUTTONS ON HOVER OR WHEN PAUSED */
.vid-wrapper:hover .skip-btn,
.vid-wrapper.is-paused .skip-btn {
    opacity: 0.9;
    pointer-events: auto; /* Dikhne par clickable ho jayega */
}

.skip-btn:hover { background: rgba(0, 0, 0, 0.8); opacity: 1 !important; transform: scale(1.05); }
.skip-btn:active { transform: scale(0.95); }


/* Thumbnail Video Icon */
.th { position: relative; }
.vid-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; background: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); pointer-events: none; backdrop-filter: blur(2px); transition: all 0.2s ease; border: 1.5px solid rgba(255,255,255,0.3); }
.th.a .vid-icon { background: var(--accent); color: var(--black); border-color: var(--black); }
.vid-icon svg { width: 12px; height: 12px; fill: currentColor; margin-left: 2px; }