/* ===== NORMALIZE / CROSS-BROWSER RESET ===== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; text-size-adjust:100%; }
body { font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif; color:var(--text-dark); background:var(--bg-white); overflow-x:hidden; line-height:1.5; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
img { max-width:100%; height:auto; display:block; border:0; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; background:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
input, textarea, select { font-family:inherit; font-size:inherit; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; }
ul, ol { list-style:none; }
table { border-collapse:collapse; border-spacing:0; }
svg { display:inline-block; vertical-align:middle; }
/* Safari flex gap fix */
@supports not (gap: 1px) {
  .sub-nav-links a { margin-right:24px; }
  .header-center > * { margin-right:32px; }
}

:root {
  --bg-dark:#1a1a1a; --bg-black:#000; --bg-white:#fff; --bg-light:#f5f5f5;
  --bg-cream:#faf8f4; --text-dark:#1a1a1a; --text-light:#fff; --text-muted:#777;
  --accent:#e8c63e; --accent-red:#d4382c; --border:#e0e0e0; --star:#f5a623;
}

@keyframes fadeInUp { from{opacity:0;-webkit-transform:translateY(40px);transform:translateY(40px)} to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideDown { from{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)} to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }
@keyframes scaleIn { from{opacity:0;-webkit-transform:scale(.9);transform:scale(.9)} to{opacity:1;-webkit-transform:scale(1);transform:scale(1)} }
@keyframes float { 0%,100%{-webkit-transform:translateY(0);transform:translateY(0)} 50%{-webkit-transform:translateY(-8px);transform:translateY(-8px)} }
@keyframes marquee { 0%{-webkit-transform:translateX(0);transform:translateX(0)} 100%{-webkit-transform:translateX(-50%);transform:translateX(-50%)} }
@keyframes fadePageIn { from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)} to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)} }

.anim { opacity:0; -webkit-transform:translateY(40px); transform:translateY(40px); -webkit-transition:opacity .7s ease,transform .7s ease; transition:opacity .7s ease,transform .7s ease; }
.anim.vis { opacity:1; -webkit-transform:translateY(0); transform:translateY(0); }

/* Scroll reveal variants */
.anim-left { opacity:0; -webkit-transform:translateX(-50px); transform:translateX(-50px); -webkit-transition:opacity .7s ease,transform .7s ease; transition:opacity .7s ease,transform .7s ease; }
.anim-left.vis { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); }

.anim-right { opacity:0; -webkit-transform:translateX(50px); transform:translateX(50px); -webkit-transition:opacity .7s ease,transform .7s ease; transition:opacity .7s ease,transform .7s ease; }
.anim-right.vis { opacity:1; -webkit-transform:translateX(0); transform:translateX(0); }

.anim-scale { opacity:0; -webkit-transform:scale(.85); transform:scale(.85); -webkit-transition:opacity .6s ease,transform .6s ease; transition:opacity .6s ease,transform .6s ease; }
.anim-scale.vis { opacity:1; -webkit-transform:scale(1); transform:scale(1); }

.anim-fade { opacity:0; -webkit-transition:opacity .8s ease; transition:opacity .8s ease; }
.anim-fade.vis { opacity:1; }

/* Stagger delays for children */
.stagger-1 { -webkit-transition-delay:.1s; transition-delay:.1s; }
.stagger-2 { -webkit-transition-delay:.2s; transition-delay:.2s; }
.stagger-3 { -webkit-transition-delay:.3s; transition-delay:.3s; }
.stagger-4 { -webkit-transition-delay:.4s; transition-delay:.4s; }
.stagger-5 { -webkit-transition-delay:.5s; transition-delay:.5s; }
.stagger-6 { -webkit-transition-delay:.6s; transition-delay:.6s; }

/* PROMO */
.promo-strip { background:var(--accent); color:#000; overflow:hidden; white-space:nowrap; padding:7px 0; font-size:12px; font-weight:600; letter-spacing:.5px; }
.promo-track { display:inline-block; animation:marquee 28s linear infinite; }
.promo-track span { display:inline-block; padding:0 40px; }
.promo-track span::before { content:'✦'; margin-right:10px; opacity:.5; }

/* HEADER */
.top-header { background:var(--bg-black); color:var(--text-light); display:-webkit-flex; display:flex; -webkit-align-items:center; align-items:center; -webkit-justify-content:space-between; justify-content:space-between; padding:14px 30px; position:-webkit-sticky; position:sticky; top:0; z-index:1000; }
.logo { font-size:24px; font-weight:700; letter-spacing:3px; text-transform:uppercase; cursor:pointer; white-space:nowrap; }
.logo span { font-weight:400; }
.logo .logo-slogan, .footer-logo .logo-slogan { font-size:9px; font-weight:500; letter-spacing:2.5px; color:rgba(255,255,255,.55); margin-top:3px; font-family:'DM Sans',sans-serif; line-height:1; }
.header-center { display:flex; align-items:center; gap:32px; }
.header-highlight { display:flex; align-items:center; gap:8px; font-size:12px; color:#aaa; }
.header-highlight svg { width:16px; height:16px; stroke:var(--accent); fill:none; stroke-width:1.8; flex-shrink:0; }
.header-highlight strong { color:#fff; font-weight:600; }
.header-actions { display:flex; align-items:center; gap:22px; }
.header-actions a { color:var(--text-light); text-decoration:none; font-size:12px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; transition:opacity .3s; }
.header-actions a:hover { opacity:.7; }
.header-actions>a>svg { width:22px; height:22px; stroke:#fff; fill:none; stroke-width:1.5; }

.sub-nav { background:var(--bg-dark); padding:10px 30px; display:flex; align-items:center; justify-content:space-between; }
.sub-nav-links { display:flex; gap:24px; }
.sub-nav-links a { color:#ccc; text-decoration:none; font-size:13px; cursor:pointer; position:relative; transition:color .3s; }
.sub-nav-links a:hover,.sub-nav-links a.active { color:#fff; }
.sub-nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--accent); transition:width .3s; }
.sub-nav-links a:hover::after,.sub-nav-links a.active::after { width:100%; }
.inquiry-badge { background:transparent; border:1px solid #555; color:#ccc; padding:6px 16px; border-radius:4px; font-size:13px; cursor:pointer; transition:all .3s; font-family:'DM Sans',sans-serif; }
.inquiry-badge:hover { background:var(--accent); color:#000; border-color:var(--accent); }

/* PAGE */
.page { animation:fadePageIn .5s ease; }

/* HERO */
.hero { position:relative; height:520px; overflow:hidden; display:flex; align-items:center; }
.hero-bg { position:absolute; top:0;right:0;bottom:0;left:0; background-size:cover; background-position:center; z-index:0; transition:transform 8s ease; }
.hero:hover .hero-bg { transform:scale(1.03); }
.hero-overlay { position:absolute; top:0;right:0;bottom:0;left:0; z-index:1; background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.1) 100%); }
.hero-content { position:relative; z-index:2; padding:0 60px; max-width:650px; }
.hero h1 { font-family:'Playfair Display',serif; font-size:50px; font-weight:400; color:var(--text-light); line-height:1.18; margin-bottom:16px; animation:fadeInUp 1s ease .3s both; text-shadow:0 2px 20px rgba(0,0,0,.4); }
.hero-sub { font-size:16px; color:rgba(255,255,255,.8); margin-bottom:28px; line-height:1.6; animation:fadeInUp 1s ease .5s both; }
.hero-cta { display:inline-block; padding:14px 38px; background:var(--accent); color:#000; font-size:15px; font-weight:600; border-radius:4px; cursor:pointer; border:none; transition:all .3s; animation:fadeInUp 1s ease .7s both; font-family:'DM Sans',sans-serif; }
.hero-cta:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,198,62,.35); }

/* INNER HERO */
.page-hero { position:relative; height:340px; overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; }
.page-hero .hero-bg { position:absolute; top:0;right:0;bottom:0;left:0; background-size:cover; background-position:center; }
.page-hero .hero-overlay { position:absolute; top:0;right:0;bottom:0;left:0; background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.45) 100%); }
.page-hero-content { position:relative; z-index:2; }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:46px; font-weight:700; color:#fff; margin-bottom:12px; animation:fadeInUp .8s ease both; }
.page-hero p { color:rgba(255,255,255,.8); font-size:16px; max-width:500px; margin:0 auto; animation:fadeInUp .8s ease .2s both; }
.breadcrumb { position:relative; z-index:2; font-size:13px; color:rgba(255,255,255,.6); margin-bottom:12px; animation:fadeInUp .8s ease both; }
.breadcrumb a { color:var(--accent); text-decoration:none; cursor:pointer; }
.breadcrumb a:hover { text-decoration:underline; }

/* SECTIONS */
.section { padding:60px 30px; max-width:1200px; margin:0 auto; }
.section-title { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; text-align:center; margin-bottom:40px; }

/* PRODUCT GRIDS */
.product-grid-5 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product-grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.product-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.product-card { cursor:pointer; transition:transform .4s ease,box-shadow .4s ease; border-radius:10px; overflow:hidden; background:var(--bg-white); border:1px solid #eee; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.12); }
.product-img { width:100%; aspect-ratio:3/4; background:var(--bg-light); overflow:hidden; position:relative; }
@supports not (aspect-ratio:1) { .product-img { padding-top:133.33%; height:0; } .product-img img { position:absolute; top:0; left:0; } }
.product-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .product-img img { transform:scale(1.06); }
.product-img-overlay { position:absolute; top:0;right:0;bottom:0;left:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; transition:background .3s; }
.product-card:hover .product-img-overlay { background:rgba(0,0,0,.3); }
.inquire-btn { padding:12px 28px; background:var(--accent); color:#000; border:none; border-radius:5px; font-size:14px; font-weight:600; cursor:pointer; opacity:0; transform:translateY(10px); transition:all .3s; font-family:'DM Sans',sans-serif; }
.product-card:hover .inquire-btn { opacity:1; transform:translateY(0); }
.inquire-btn:hover { background:#fff; }
.product-info { padding:16px 18px; }
.product-name { font-size:15px; font-weight:600; margin-bottom:8px; line-height:1.4; color:var(--text-dark); }
.product-stars { color:var(--star); font-size:13px; margin-bottom:6px; letter-spacing:1px; }
.product-price { font-size:18px; font-weight:700; color:var(--accent-red); }

/* PRODUCT DETAIL */
.product-detail-section { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start; max-width:1200px; margin:0 auto; padding:30px 30px 0; }
.pd-breadcrumb { max-width:1200px; margin:0 auto; padding:16px 30px 0; font-size:13px; color:var(--text-muted); }
.pd-breadcrumb a { color:var(--text-muted); text-decoration:none; cursor:pointer; }
.pd-breadcrumb a:hover { color:var(--accent); }
.pd-breadcrumb span { color:var(--text-dark); }
.pd-gallery { position:sticky; top:80px; }
.pd-slider { position:relative; width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--bg-light); border:1px solid #eee; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
@supports not (aspect-ratio:1) { .pd-slider { padding-top:100%; height:0; } }
.pd-slider img { position:absolute; top:0;right:0;bottom:0;left:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s ease, transform .4s ease; }
.pd-slider img.active { opacity:1; }
.pd-slider:hover img.active { transform:scale(1.04); }
.pd-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.85); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.15); opacity:0; transition:opacity .3s;
}
.pd-slider:hover .pd-arrow { opacity:1; }
.pd-arrow:hover { background:#fff; }
.pd-arrow svg { width:18px; height:18px; stroke:#333; fill:none; stroke-width:2.5; }
.pd-arrow-prev { left:12px; }
.pd-arrow-next { right:12px; }
.pd-dots { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.pd-dot {
  width:8px; height:8px; border-radius:50%; background:#ddd; border:none;
  cursor:pointer; transition:all .3s; padding:0;
}
.pd-dot.active { background:var(--accent); width:24px; border-radius:4px; }
.pd-thumbs { display:flex; gap:10px; margin-top:10px; }
.pd-thumb { width:80px; height:80px; border-radius:8px; overflow:hidden; cursor:pointer; border:2px solid transparent; transition:border-color .3s; background:var(--bg-light); }
.pd-thumb:hover,.pd-thumb.active { border-color:var(--accent); }
.pd-thumb img { width:100%; height:100%; object-fit:cover; }

.pd-info h1 { font-family:'Playfair Display',serif; font-size:28px; font-weight:700; margin-bottom:6px; line-height:1.3; }
.pd-rating { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.pd-rating .stars { color:var(--star); font-size:14px; letter-spacing:1px; }
.pd-rating .review-count { font-size:13px; color:var(--text-muted); }
.pd-price { font-size:28px; font-weight:700; color:var(--accent-red); margin-bottom:18px; }
.pd-price .original { text-decoration:line-through; color:#bbb; font-size:18px; font-weight:400; margin-left:10px; }

.pd-specs { margin-bottom:22px; }
.pd-specs-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-dark); margin-bottom:10px; }
.pd-specs-list { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.pd-specs-list li { font-size:13px; padding:9px 0; border-bottom:1px solid #f0f0f0; display:flex; align-items:center; gap:8px; color:#555; }
.pd-specs-list li strong { color:var(--text-dark); min-width:80px; }

.pd-size-selector { margin-bottom:22px; }
.pd-size-selector label { display:block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.size-options { display:flex; flex-wrap:wrap; gap:8px; }
.size-opt { padding:10px 18px; border:1px solid #ddd; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; background:#fff; font-family:'DM Sans',sans-serif; }
.size-opt:hover { border-color:var(--accent); }
.size-opt.active { background:var(--bg-black); color:#fff; border-color:var(--bg-black); }

.pd-cta-row { display:flex; gap:12px; margin-bottom:20px; }
.pd-cta { flex:1; padding:16px; background:var(--bg-black); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:all .3s; font-family:'DM Sans',sans-serif; }
.pd-cta:hover { background:#333; transform:translateY(-1px); }
.pd-cta-secondary { padding:16px 20px; background:transparent; color:var(--text-dark); border:1px solid #ddd; border-radius:8px; font-size:15px; cursor:pointer; transition:all .3s; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:6px; }
.pd-cta-secondary:hover { border-color:var(--accent); color:var(--accent); }
.pd-cta-secondary svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }

.pd-trust { display:flex; align-items:center; gap:6px; margin-bottom:20px; padding:12px 16px; background:var(--bg-light); border-radius:8px; }
.pd-trust svg { width:18px; height:18px; stroke:#27ae60; fill:none; stroke-width:2; flex-shrink:0; }
.pd-trust span { font-size:12px; color:#27ae60; font-weight:600; }

.pd-badges { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.pd-badge { text-align:center; padding:14px 8px; background:var(--bg-light); border-radius:8px; }
.pd-badge svg { width:24px; height:24px; stroke:#333; fill:none; stroke-width:1.4; margin-bottom:6px; }
.pd-badge p { font-size:11px; color:var(--text-muted); line-height:1.4; }
.pd-badge strong { display:block; font-size:12px; color:var(--text-dark); margin-bottom:2px; }

/* PDP TABS */
.pd-tabs-section { max-width:1200px; margin:0 auto; padding:40px 30px 20px; }
.pd-tabs-nav { display:flex; gap:0; border-bottom:2px solid #eee; margin-bottom:24px; }
.pd-tab-btn { padding:12px 24px; font-size:14px; font-weight:600; color:var(--text-muted); cursor:pointer; border:none; background:none; border-bottom:2px solid transparent; margin-bottom:-2px; transition:all .3s; font-family:'DM Sans',sans-serif; }
.pd-tab-btn:hover { color:var(--text-dark); }
.pd-tab-btn.active { color:var(--text-dark); border-bottom-color:var(--accent); }
.pd-tab-content { display:none; }
.pd-tab-content.active { display:block; }
.pd-tab-content p { font-size:14px; color:#555; line-height:1.85; margin-bottom:14px; }
.pd-tab-content ul { margin:10px 0 18px 20px; }
.pd-tab-content ul li { font-size:14px; color:#555; line-height:1.85; margin-bottom:6px; }

/* WHY */
.why-section { background:var(--bg-light); padding:60px 30px; }
.why-inner { max-width:1200px; margin:0 auto; }
.why-subtitle { text-align:center; color:var(--text-muted); font-size:14px; margin-bottom:40px; max-width:620px; margin-left:auto; margin-right:auto; line-height:1.7; }
.why-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:10px; }
.why-card { text-align:center; padding:30px 20px; transition:transform .4s; }
.why-card:hover { transform:translateY(-4px); }
.why-icon { width:80px; height:80px; margin:0 auto 20px; background:var(--bg-white); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(0,0,0,.06); animation:float 3s ease-in-out infinite; }
.why-icon svg { width:36px; height:36px; stroke:#333; fill:none; stroke-width:1.2; }
.why-card:nth-child(2) .why-icon { animation-delay:.5s; }
.why-card:nth-child(3) .why-icon { animation-delay:1s; }
.why-card h3 { font-family:'Playfair Display',serif; font-size:18px; margin-bottom:12px; }
.why-card p { font-size:13px; color:var(--text-muted); line-height:1.7; }

/* ABOUT */
.about-story { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1100px; margin:0 auto; padding:70px 30px; }
.about-story-img { border-radius:12px; overflow:hidden; }
.about-story-img img { width:100%; height:400px; object-fit:cover; display:block; }
.about-story-text h2 { font-family:'Playfair Display',serif; font-size:32px; margin-bottom:20px; }
.about-story-text p { font-size:14px; color:var(--text-muted); line-height:1.8; margin-bottom:16px; }
.values-section { background:var(--bg-cream); padding:70px 30px; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; max-width:1100px; margin:0 auto; }
.value-card { text-align:center; padding:0; background:#fff; border-radius:12px; box-shadow:0 2px 16px rgba(0,0,0,.04); transition:transform .3s; overflow:hidden; }
.value-card:hover { transform:translateY(-4px); }
.value-card .v-img { width:100%; height:180px; overflow:hidden; }
.value-card .v-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.value-card:hover .v-img img { transform:scale(1.06); }
.value-card .v-text { padding:20px 18px 24px; }
.value-card .v-icon { width:56px; height:56px; margin:0 auto 16px; background:var(--bg-light); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.value-card .v-icon svg { width:26px; height:26px; stroke:var(--accent); fill:none; stroke-width:1.5; }
.value-card h4 { font-family:'Playfair Display',serif; font-size:16px; margin-bottom:8px; }
.value-card p { font-size:12px; color:var(--text-muted); line-height:1.6; }
.team-section { padding:70px 30px; max-width:1100px; margin:0 auto; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; }
.team-card { text-align:center; }
.team-card img { width:100%; height:320px; object-fit:cover; border-radius:12px; margin-bottom:16px; filter:grayscale(30%); transition:filter .4s; }
.team-card:hover img { filter:grayscale(0); }
.team-card h4 { font-family:'Playfair Display',serif; font-size:18px; margin-bottom:4px; }
.team-card p { font-size:13px; color:var(--text-muted); }

/* CONTACT */
.contact-section { display:grid; grid-template-columns:1fr 1fr; gap:50px; max-width:1100px; margin:0 auto; padding:60px 30px; }
.contact-info h2 { font-family:'Playfair Display',serif; font-size:30px; margin-bottom:20px; }
.contact-info>p { font-size:14px; color:var(--text-muted); line-height:1.7; margin-bottom:30px; }
.contact-detail { display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; }
.contact-detail .cd-icon { width:44px; height:44px; background:var(--bg-light); border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-detail .cd-icon svg { width:20px; height:20px; stroke:#333; fill:none; stroke-width:1.5; }
.contact-detail h4 { font-size:14px; font-weight:600; margin-bottom:4px; }
.contact-detail p { font-size:13px; color:var(--text-muted); line-height:1.5; }
.contact-form-box { background:var(--bg-light); border-radius:16px; padding:36px; }
.contact-form-box h3 { font-family:'Playfair Display',serif; font-size:22px; margin-bottom:24px; }
.cf-group { margin-bottom:16px; }
.cf-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.cf-group input,.cf-group textarea,.cf-group select { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .3s,box-shadow .3s; background:#fff; }
.cf-group input:focus,.cf-group textarea:focus,.cf-group select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,198,62,.15); }
.cf-group textarea { resize:vertical; min-height:90px; }
.cf-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cf-submit { width:100%; padding:14px; background:var(--bg-black); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:all .3s; font-family:'DM Sans',sans-serif; margin-top:4px; }
.cf-submit:hover { background:#333; }


/* POLICY PAGES */
.policy-content { max-width:860px; margin:0 auto; padding:60px 30px 80px; }
.policy-content h2 { font-family:'Playfair Display',serif; font-size:26px; margin:36px 0 16px; color:var(--text-dark); }
.policy-content h2:first-of-type { margin-top:0; }
.policy-content p { font-size:14px; color:#555; line-height:1.85; margin-bottom:14px; }
.policy-content ul { margin:10px 0 18px 20px; }
.policy-content ul li { font-size:14px; color:#555; line-height:1.85; margin-bottom:8px; }
.policy-content .policy-highlight {
  background:var(--bg-light); border-left:4px solid var(--accent);
  padding:18px 22px; border-radius:0 8px 8px 0; margin:20px 0;
}
.policy-content .policy-highlight p { margin:0; font-weight:500; color:var(--text-dark); }
.policy-content .last-updated { font-size:12px; color:var(--text-muted); margin-bottom:30px; }
.policy-content a { color:var(--accent); cursor:pointer; }
.policy-content a:hover { text-decoration:underline; }

/* FAQ ACCORDION */
.faq-list { display:flex; flex-direction:column; gap:0; }
.faq-item { border-bottom:1px solid #eee; }
.faq-q {
  display:flex; justify-content:space-between; align-items:center; padding:20px 0;
  cursor:pointer; font-size:15px; font-weight:600; color:var(--text-dark); transition:color .3s;
}
.faq-q:hover { color:var(--accent); }
.faq-chevron { width:20px; height:20px; stroke:#999; fill:none; stroke-width:2; flex-shrink:0; transition:transform .3s; }
.faq-chevron.open { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s ease, padding .3s ease; padding:0 0; }
.faq-a.open { max-height:500px; padding:0 0 20px; }
.faq-a p { font-size:14px; color:#555; line-height:1.85; }
.faq-a a { color:var(--accent); cursor:pointer; }

/* PROCESS TIMELINE */
.process-timeline { position:relative; padding-left:40px; }
.process-timeline::before {
  content:''; position:absolute; left:16px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--accent) 0%, #ddd 100%);
}
.process-step {
  position:relative; margin-bottom:40px; display:grid;
  grid-template-columns:auto 1fr; gap:0 20px; align-items:start;
}
.step-num {
  position:absolute; left:-40px; top:0;
  width:34px; height:34px; border-radius:50%; background:var(--accent);
  color:#000; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.step-icon { display:none; }
.process-step h3 { font-family:'Playfair Display',serif; font-size:20px; margin-bottom:10px; }
.process-step p { font-size:14px; color:#555; line-height:1.85; }

/* BEST SELLERS */
.best-sellers-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }

/* FOOTER */
.footer { background:var(--bg-dark); color:#ccc; padding:50px 30px 0; }
.footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid #333; }
.footer-logo { font-size:22px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:3px; margin-bottom:20px; }
.footer-logo span { font-weight:400; }
.footer-info p { font-size:13px; line-height:1.7; margin-bottom:6px; }
.footer-info .label { font-weight:600; color:#fff; }
.footer-callback { display:inline-block; margin-top:10px; padding:8px 18px; background:var(--accent-red); color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer; transition:all .3s; font-family:'DM Sans',sans-serif; }
.footer-callback:hover { background:#b42e24; }
.footer-col h4 { color:#fff; font-size:14px; font-weight:700; text-transform:uppercase; margin-bottom:16px; letter-spacing:1px; }
.footer-col a { display:block; color:#999; text-decoration:none; font-size:13px; margin-bottom:8px; transition:color .3s; cursor:pointer; }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { max-width:1200px; margin:0 auto; padding:20px 0; display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:12px; color:#666; }
.payment-icons { display:flex; gap:6px; }
.pay-badge { display:inline-flex; align-items:center; justify-content:center; padding:0 10px; height:28px; background:#2a2a2a; border-radius:4px; font-size:10px; color:#bbb; font-weight:700; letter-spacing:.5px; border:1px solid #3a3a3a; }
.pay-visa { color:#1a1f71; background:#fff; border-color:#ddd; }
.pay-mc { background:#ff5f00; color:#fff; border-color:#ff5f00; }
.pay-amex { background:#006fcf; color:#fff; border-color:#006fcf; }
.pay-disc { background:#ff6000; color:#fff; border-color:#ff6000; }
.pay-gpay { background:#fff; color:#333; border-color:#ddd; }

/* MODAL */
.modal-overlay { position:fixed; top:0;right:0;bottom:0;left:0; background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:9999; display:none; -webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center; }
.modal-overlay.active { display:-webkit-flex; display:flex; -webkit-animation:fadeIn .3s ease; animation:fadeIn .3s ease; }
.modal { background:#fff; border-radius:14px; width:92%; max-width:480px; padding:40px; position:relative; animation:scaleIn .4s ease; box-shadow:0 24px 64px rgba(0,0,0,.3); max-height:92vh; overflow-y:auto; }
.modal-close { position:absolute; top:14px; right:18px; font-size:22px; background:none; border:none; cursor:pointer; color:#999; transition:color .3s; line-height:1; }
.modal-close:hover { color:#333; }
.modal h2 { font-family:'Playfair Display',serif; font-size:24px; margin-bottom:6px; }
.modal .modal-subtitle { color:var(--text-muted); font-size:14px; margin-bottom:24px; }
.product-ref { display:flex; align-items:center; gap:12px; background:var(--bg-light); padding:10px 14px; border-radius:8px; font-size:13px; font-weight:500; margin-bottom:20px; }
.product-ref img { width:52px; height:52px; object-fit:cover; border-radius:6px; }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-family:'DM Sans',sans-serif; outline:none; transition:border-color .3s,box-shadow .3s; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,198,62,.15); }
.form-group textarea { resize:vertical; min-height:70px; }

/* Form validation styles */
.form-group .field-error,.cf-group .field-error { color:#d4382c; font-size:11px; margin-top:4px; display:none; line-height:1.4; }
.form-group .field-error.show,.cf-group .field-error.show { display:block; }
.form-group input.invalid,.form-group textarea.invalid,.form-group select.invalid,
.cf-group input.invalid,.cf-group textarea.invalid,.cf-group select.invalid { border-color:#d4382c; box-shadow:0 0 0 3px rgba(212,56,44,.1); }
.form-group input.valid,.form-group textarea.valid,
.cf-group input.valid,.cf-group textarea.valid { border-color:#27ae60; }
.form-submit-status { text-align:center; padding:8px 0; font-size:13px; display:none; }
.form-submit-status.show { display:block; }
.form-submit-status.error { color:#d4382c; }
.form-submit-status.success { color:#27ae60; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.submit-btn { width:100%; padding:14px; background:var(--bg-black); color:var(--text-light); border:none; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer; transition:all .3s; margin-top:4px; font-family:'DM Sans',sans-serif; }
.submit-btn:hover { background:#333; transform:translateY(-1px); }
.success-msg { display:none; text-align:center; padding:30px 0; }
.success-msg.show { display:block; }
.success-msg .check { width:64px; height:64px; background:#27ae60; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:28px; color:#fff; animation:scaleIn .4s ease; }
.success-msg h3 { font-family:'Playfair Display',serif; font-size:20px; margin-bottom:8px; }
.success-msg p { color:var(--text-muted); font-size:14px; }

/* RESPONSIVE */
/* DROPDOWN SUBMENU */
.nav-item { position:relative; }
.nav-item > a { display:flex; align-items:center; gap:4px; }
.nav-item > a .chevron { width:12px; height:12px; stroke:#999; fill:none; stroke-width:2.5; transition:transform .3s; flex-shrink:0; }
.nav-item:hover > a .chevron { transform:rotate(180deg); stroke:var(--accent); }
.dropdown {
  display:none; position:absolute; top:100%; left:-16px; padding-top:12px; z-index:100;
}
.nav-item:hover .dropdown { display:block; }
.dropdown-inner {
  background:#1a1a1a; border:1px solid #333; border-radius:8px; padding:16px 0;
  min-width:440px; display:grid; grid-template-columns:1fr 1fr; gap:0;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.dropdown-col { padding:0 20px; }
.dropdown-col:first-child { border-right:1px solid #2a2a2a; }
.dropdown-col h5 {
  font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--accent);
  margin-bottom:10px; padding:0 0 8px; border-bottom:1px solid #2a2a2a; font-weight:700;
}
.dropdown-col a {
  display:block; padding:7px 0; color:#bbb; font-size:13px; text-decoration:none;
  cursor:pointer; transition:color .2s, padding-left .2s;
}
.dropdown-col a:hover { color:#fff; padding-left:6px; }

/* MOBILE NAV TOGGLE */
.mobile-menu-btn { display:none; background:none; border:none; cursor:pointer; padding:4px; }
.mobile-menu-btn svg { width:26px; height:26px; stroke:#fff; fill:none; stroke-width:2; }

@media(max-width:1024px) {
  .product-grid-5{grid-template-columns:repeat(3,1fr)} .product-grid-3{grid-template-columns:repeat(3,1fr)}
  .best-sellers-grid{grid-template-columns:repeat(2,1fr)} .header-center{gap:20px}
  .header-highlight:nth-child(3){display:none} .values-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px) {
  .top-header{flex-wrap:wrap;gap:10px;padding:12px 16px}
  .header-center{display:none}
  .logo{font-size:18px;letter-spacing:2px}
  .header-actions a span{display:none}
  .header-actions{gap:14px}
  .header-actions>a>svg{width:20px;height:20px}

  .mobile-menu-btn{display:block}
  .sub-nav{flex-wrap:wrap;gap:8px;padding:10px 16px;position:relative}
  .sub-nav-links{
    display:none;flex-direction:column;width:100%;gap:0;
    background:var(--bg-dark);border-top:1px solid #333;padding-top:8px;
  }
  .sub-nav-links.open{display:flex}
  .sub-nav-links a{padding:10px 0;border-bottom:1px solid #2a2a2a;font-size:14px}
  .sub-nav-links a::after{display:none}

  .nav-item{position:static}
  .dropdown{display:none;position:static;padding-top:0;width:100%}
  .nav-item.mob-open .dropdown{display:block}
  .dropdown-inner{min-width:100%;grid-template-columns:1fr;border:none;border-radius:0;background:#111;padding:8px 0;box-shadow:none}
  .dropdown-col{padding:0 16px;border-right:none !important}
  .dropdown-col:first-child{border-right:none;margin-bottom:8px}
  .dropdown-col h5{font-size:10px;margin-bottom:6px;padding-bottom:6px}
  .dropdown-col a{font-size:13px;padding:6px 0;padding-left:8px}
  .inquiry-badge{width:100%;text-align:center;margin-top:8px;padding:10px}

  .hero{height:360px}
  .hero h1{font-size:30px}
  .hero-sub{font-size:14px}
  .hero-content{padding:0 20px;max-width:100%}
  .hero-cta{padding:12px 28px;font-size:14px}

  .page-hero{height:240px}
  .page-hero h1{font-size:28px}
  .page-hero p{font-size:14px;padding:0 16px}
  .breadcrumb{font-size:12px}

  .section{padding:36px 16px}
  .section-title{font-size:22px;margin-bottom:28px}

  .product-grid-5,.product-grid-4,.product-grid-3{grid-template-columns:repeat(2,1fr);gap:14px}
  .best-sellers-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .product-name{font-size:14px}
  .product-price{font-size:15px}
  .product-info{padding:12px 14px}
  .inquire-btn{padding:10px 20px;font-size:13px}

  .product-detail-section{grid-template-columns:1fr;gap:24px;padding:20px 16px 0}
  .pd-breadcrumb{padding:12px 16px 0}
  .pd-gallery{position:static}
  .pd-info h1{font-size:22px}
  .pd-price{font-size:24px}
  .pd-thumbs{gap:8px}
  .pd-thumb{width:60px;height:60px}
  .pd-specs-list{grid-template-columns:1fr}
  .pd-badges{grid-template-columns:repeat(3,1fr);gap:8px}
  .pd-tabs-section{padding:30px 16px 10px}
  .pd-tab-btn{padding:10px 16px;font-size:13px}
  .pd-cta-row{flex-direction:column}

  .why-section{padding:40px 16px}
  .why-cards{grid-template-columns:1fr;gap:16px}
  .why-card{padding:20px 16px}
  .why-icon{width:64px;height:64px}
  .why-icon svg{width:28px;height:28px}

  .about-story{grid-template-columns:1fr;gap:24px;padding:40px 16px}
  .about-story-img img{height:280px}
  .about-story-text h2{font-size:26px}

  .values-section{padding:40px 16px}
  .values-grid{grid-template-columns:1fr 1fr;gap:16px}

  .team-section{padding:40px 16px}
  .team-grid{grid-template-columns:1fr 1fr;gap:16px}
  .team-card img{height:220px}

  .contact-section{grid-template-columns:1fr;gap:30px;padding:40px 16px}
  .contact-form-box{padding:24px 18px}
  .contact-info h2{font-size:24px}


  .footer{padding:40px 16px 0}
  .footer-inner{grid-template-columns:1fr 1fr;gap:24px}
  .footer-logo{font-size:18px}

  .modal{padding:24px 18px;width:95%;max-width:440px}
  .modal h2{font-size:20px}

  .policy-content{padding:36px 16px 50px}
  .policy-content h2{font-size:22px;margin:28px 0 12px}
  .policy-content p{font-size:13px}
  .policy-content ul li{font-size:13px}
  .policy-content .policy-highlight{padding:14px 16px}

  .faq-q{font-size:14px;padding:16px 0}
  .faq-q span{padding-right:12px}

  .process-timeline{padding-left:32px}
  .step-num{left:-32px;width:28px;height:28px;font-size:11px}
  .process-step h3{font-size:17px}
  .process-step p{font-size:13px}
}
@media(max-width:480px) {
  .logo{font-size:16px;letter-spacing:1.5px}
  .hero{height:320px}
  .hero h1{font-size:24px}
  .hero-sub{font-size:13px;margin-bottom:20px}
  .hero-cta{padding:11px 24px;font-size:13px}

  .page-hero{height:200px}
  .page-hero h1{font-size:24px}

  .product-grid-5,.product-grid-4,.product-grid-3{grid-template-columns:1fr 1fr;gap:10px}
  .best-sellers-grid{grid-template-columns:1fr 1fr;gap:10px}
  .product-info{padding:10px 12px}
  .product-name{font-size:13px}
  .product-price{font-size:14px}

  .section-title{font-size:20px;margin-bottom:20px}

  .footer-inner{grid-template-columns:1fr;gap:20px}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}

  .form-row,.cf-row{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr}
  .team-card img{height:280px}
  .values-grid{grid-template-columns:1fr}

  .about-story-img img{height:220px}
  .about-story-text h2{font-size:22px}

  .pd-info h1{font-size:20px}
  .pd-price{font-size:20px}
  .pd-badges{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .pd-badge{padding:10px 6px}
  .pd-badge strong{font-size:11px}
  .pd-badge p{font-size:10px}

  .contact-form-box{padding:20px 14px}
  .contact-form-box h3{font-size:18px}

  .policy-content h2{font-size:20px}
  .process-timeline{padding-left:28px}
  .step-num{left:-28px;width:24px;height:24px;font-size:10px}
}
/* Ultra-small screens (iPhone SE, Galaxy Fold) */
@media(max-width:360px) {
  .logo{font-size:14px;letter-spacing:1px}
  .hero{height:280px}
  .hero h1{font-size:20px}
  .hero-sub{font-size:12px}
  .hero-cta{padding:10px 20px;font-size:12px}
  .page-hero{height:180px}
  .page-hero h1{font-size:20px}
  .section{padding:28px 12px}
  .section-title{font-size:18px;margin-bottom:16px}
  .product-grid-5,.product-grid-4,.product-grid-3,.best-sellers-grid{gap:8px}
  .product-name{font-size:12px}
  .product-price{font-size:13px}
  .product-info{padding:8px 10px}
  .footer{padding:30px 12px 0}
  .footer-col h4{font-size:12px}
  .footer-col a{font-size:12px}
  .modal{padding:20px 14px;width:96%}
  .pd-info h1{font-size:18px}
  .pd-price{font-size:18px}
  .size-opt{padding:8px 12px;font-size:12px}
  .pd-tabs-section{padding:20px 12px 10px}
  .pd-tab-btn{padding:8px 10px;font-size:12px}
  .policy-content{padding:28px 12px 40px}
  .policy-content h2{font-size:18px}
  .policy-content p,.policy-content ul li{font-size:12px}
  .promo-strip{font-size:10px}
  .promo-track span{padding:0 24px}
}
/* Print styles */
@media print {
  .promo-strip,.top-header,.sub-nav,.footer,.modal-overlay,.hero-cta,.inquire-btn,.pd-cta,.pd-cta-secondary,.inquiry-badge,.footer-callback{display:none!important}
  body{color:#000;background:#fff}
  .hero{height:auto;min-height:200px}
  .product-card{break-inside:avoid;page-break-inside:avoid}
}
/* Reduced motion preference */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after{-webkit-animation-duration:0.01ms!important;animation-duration:0.01ms!important;-webkit-transition-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .anim,.anim-left,.anim-right,.anim-scale,.anim-fade{opacity:1;-webkit-transform:none;transform:none}
  .promo-track{-webkit-animation:none;animation:none}
  .why-icon{-webkit-animation:none;animation:none}
}
/* High contrast mode */
@media(prefers-contrast:high) {
  :root{--border:#000;--text-muted:#333}
  .product-card{border:2px solid #000}
  .pd-thumb{border:2px solid #666}
  .pd-thumb.active{border-color:#000}
}