/* =========================================================
   CASINOIRE — HOME PAGE 3D "FELT & BRASS" THEME
   Scoped entirely under .home-content so header.php, footer.php
   and every other page keep using css/style.css untouched.
   Targets the ACTUAL markup/classes in index.html (product-card,
   products-grid, brand-card, filter-tabs, tab, tab-panel, etc.)
   so every Add to Cart / Wishlist / Tab button keeps working.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --hc-ink:         #0b0f0d;
  --hc-ink-2:       #10151f;
  --hc-ink-3:       #161c18;
  --hc-felt:        #1d4433;
  --hc-felt-deep:   #0f271c;
  --hc-felt-light:  #2f6b4d;

  --hc-brass:       #c1974f;
  --hc-brass-light: #e0bc7c;
  --hc-brass-dark:  #8a6a34;

  --hc-walnut:      #2a1b10;
  --hc-walnut-2:    #1a1009;
  --hc-parchment:   #f3ecdb;
  --hc-parchment-2: #e7dabd;

  --hc-text:        #f1ede3;
  --hc-smoke:       #a79f92;

  --hc-red:         #9a3e3e;
  --hc-red-dk:      #5e2222;
  --hc-green-ok:    #3f8c63;
  --hc-green-ok-dk: #235c3f;

  --hc-border:       rgba(193,151,79,0.18);
  --hc-border-hover: rgba(193,151,79,0.5);

  --hc-font-display: "Fraunces", serif;
  --hc-font-body:    "Inter", sans-serif;
  --hc-font-mono:    "Space Grotesk", sans-serif;

  --hc-transition: all 0.28s cubic-bezier(0.34,1.4,0.64,1);

  --hc-sh-card:        0 9px 0 -1px var(--hc-walnut-2), 0 22px 38px rgba(0,0,0,0.55);
  --hc-sh-card-hover:  0 15px 0 -1px var(--hc-walnut-2), 0 32px 52px rgba(0,0,0,0.6);
  --hc-sh-btn:         0 6px 0 var(--hc-brass-dark), 0 12px 20px rgba(0,0,0,0.45);
  --hc-sh-btn-active:  0 2px 0 var(--hc-brass-dark), 0 4px 10px rgba(0,0,0,0.35);
  --hc-sh-inset:       inset 0 2px 5px rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.05);
}

/* ============================================================
   GLOBAL (scoped) TYPE + BUTTON OVERRIDES
   ============================================================ */
.home-content { font-family: var(--hc-font-body); }
.home-content .section-tag{
  font-family: var(--hc-font-mono); font-size:.72rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; color: var(--hc-brass);
  display:flex; align-items:center; gap:.6rem; margin-bottom:.85rem;
}
.home-content .section-tag::before{
  content:''; width:26px; height:3px; background: var(--hc-brass); border-radius:2px;
  box-shadow: 0 2px 0 var(--hc-brass-dark);
}
.home-content .section-title{
  font-family: var(--hc-font-display); font-weight:600;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height:1.12; letter-spacing:-0.01em;
}
.home-content .section-title em{
  font-style:italic; font-weight:500; color: var(--hc-brass-light);
}

.home-content .btn-primary{
  display:inline-flex; align-items:center; gap:.55rem;
  background: linear-gradient(180deg, var(--hc-brass-light), var(--hc-brass));
  color: var(--hc-walnut-2);
  font-family: var(--hc-font-mono); font-weight:700; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:15px 32px; border-radius:10px; border:1px solid var(--hc-brass-dark);
  box-shadow: var(--hc-sh-btn); transition: var(--hc-transition);
}
.home-content .btn-primary:hover{ transform: translateY(-2px); }
.home-content .btn-primary:active{ transform: translateY(4px); box-shadow: var(--hc-sh-btn-active); }

.home-content .btn-outline{
  display:inline-flex; align-items:center; gap:.55rem;
  background: var(--hc-ink-3); color: var(--hc-text);
  font-family: var(--hc-font-mono); font-weight:600; font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:14px 31px; border-radius:10px; border:1px solid rgba(241,237,227,.16);
  box-shadow: 0 6px 0 rgba(241,237,227,.14), 0 12px 20px rgba(0,0,0,.4);
  transition: var(--hc-transition);
}
.home-content .btn-outline:hover{ border-color: var(--hc-brass); color: var(--hc-brass-light); transform: translateY(-2px); }
.home-content .btn-outline:active{ transform: translateY(4px); box-shadow: 0 2px 0 rgba(241,237,227,.14); }

.home-content .btn-outline-light{
  display:inline-flex; align-items:center; background: var(--hc-parchment); color: var(--hc-walnut-2);
  font-family: var(--hc-font-mono); font-weight:700; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 31px; border-radius:10px; border:1px solid #b8a066;
  box-shadow: 0 6px 0 #b8a066, 0 12px 18px rgba(0,0,0,.3); transition: var(--hc-transition);
}
.home-content .btn-outline-light:hover{ transform: translateY(-2px); }
.home-content .btn-outline-light:active{ transform: translateY(4px); box-shadow: 0 2px 0 #b8a066; }

/* ============================================================
   HERO — deep 3D staging
   ============================================================ */
.home-content .hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; padding:130px 8vw 170px; background: var(--hc-felt-deep);
}
.home-content .hero-bg-wrap{ position:absolute; inset:0; z-index:0; }
.home-content .hero-bg-image{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-color: var(--hc-felt-deep);
  background-image:
    linear-gradient(160deg, rgba(9,15,12,.55) 0%, rgba(15,39,28,.4) 50%, rgba(9,15,12,.6) 100%),
    url('../img/hero-bg.jpg');
  transform: scale(1.06);
  animation: hcHeroPan 22s ease-in-out infinite alternate;
}
@keyframes hcHeroPan{ from{ transform: scale(1.06) translateX(0); } to{ transform: scale(1.1) translateX(-1.5%); } }
.home-content .hero-video-overlay{
  position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(9,15,12,.82) 0%, rgba(29,68,51,.42) 45%, rgba(9,15,12,.78) 100%),
              linear-gradient(to top, rgba(9,15,12,.96) 0%, transparent 46%);
}
.home-content .hero-vignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 30%, rgba(6,10,8,.8) 100%);
}
.home-content .hero-scanlines{
  position:absolute; inset:0; pointer-events:none;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(193,151,79,.025) 3px, rgba(193,151,79,.025) 4px);
}
.home-content .hero-glow{
  position:absolute; border-radius:50%; filter: blur(90px); pointer-events:none; z-index:1;
}
.home-content .hero-glow.g1{ width:520px; height:520px; background: radial-gradient(circle, rgba(193,151,79,.28), transparent 70%); top:-10%; right:-6%; }
.home-content .hero-glow.g2{ width:420px; height:420px; background: radial-gradient(circle, rgba(47,107,77,.35), transparent 70%); bottom:-12%; left:-8%; }

/* floating suit particles */
.home-content .hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.home-content .particle{
  position:absolute; font-size:1.6rem; color: rgba(193,151,79,.35);
  animation: hcDrift 12s ease-in-out infinite;
}
.home-content .particle.p1{ top:12%; left:8%;  animation-delay:0s;   font-size:1.4rem; }
.home-content .particle.p2{ top:70%; left:14%; animation-delay:1.5s; font-size:1.1rem; color: rgba(154,62,62,.4); }
.home-content .particle.p3{ top:22%; left:88%; animation-delay:.7s;  font-size:1.8rem; color: rgba(154,62,62,.35); }
.home-content .particle.p4{ top:60%; left:92%; animation-delay:2.2s; font-size:1.2rem; }
.home-content .particle.p5{ top:85%; left:60%; animation-delay:3s;   font-size:1.3rem; }
.home-content .particle.p6{ top:6%;  left:55%; animation-delay:1s;   font-size:1rem;   color: rgba(154,62,62,.35); }
@keyframes hcDrift{
  0%,100%{ transform: translateY(0) rotate(0deg); opacity:.5; }
  50%{ transform: translateY(-26px) rotate(12deg); opacity:1; }
}

/* floating cards */
.home-content .hero-float-cards{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.home-content .hfc{
  width:150px; height:220px; position:absolute;
  background: linear-gradient(160deg, var(--hc-parchment), #e6d9bd);
  border:3px solid var(--hc-walnut); border-radius:14px;
  box-shadow: 0 10px 0 -2px #c9b988, 0 30px 55px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
}
.home-content .hfc-val{ position:absolute; top:14px; left:14px; font-family: var(--hc-font-display); font-size:20px; font-weight:700; color: var(--hc-walnut); }
.home-content .hfc-suit{ font-size:64px; color: var(--hc-felt); }
.home-content .hfc-suit.red{ color: var(--hc-red); }
.home-content .hfc1{ right:15%; top:20%; transform: rotate(-12deg); animation: hcFloat1 6s ease-in-out infinite; }
.home-content .hfc2{ right:24%; top:34%; transform: rotate(6deg);   animation: hcFloat2 7.5s ease-in-out infinite .4s; z-index:3; }
.home-content .hfc3{ right:6%;  top:52%; transform: rotate(9deg);   animation: hcFloat1 8s ease-in-out infinite .8s; }
.home-content .hfc4{ right:33%; top:14%; transform: rotate(-4deg);  animation: hcFloat2 6.6s ease-in-out infinite 1.1s; }
@keyframes hcFloat1{ 0%,100%{ transform: rotate(-12deg) translateY(0); } 50%{ transform: rotate(-12deg) translateY(-18px); } }
@keyframes hcFloat2{ 0%,100%{ transform: rotate(6deg) translateY(0); }   50%{ transform: rotate(6deg) translateY(-14px); } }
@media (max-width:900px){ .home-content .hero-float-cards{ display:none; } }

.home-content .hero-content{ position:relative; z-index:3; max-width:720px; }

/* Glass panel */
.home-content .hero-glass{
  position:relative;
  background: linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 26px;
  padding: 3rem 3.2rem;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.2);
  overflow:hidden;
}
.home-content .hero-glass::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(115deg, rgba(193,151,79,.16) 0%, transparent 30%);
}
.home-content .hero-medallion{
  position:absolute; top:-38px; right:-30px; width:130px; height:130px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:2.6rem; color: rgba(193,151,79,.5);
  background: radial-gradient(circle at 35% 30%, rgba(193,151,79,.22), transparent 65%);
  border: 1px solid rgba(193,151,79,.18); filter: blur(.2px); pointer-events:none;
}
@media (max-width:768px){ .home-content .hero-glass{ padding:2.2rem 1.6rem; border-radius:20px; } .home-content .hero-medallion{ display:none; } }

.home-content .hero-badge{
  display:inline-flex; align-items:center; gap:.6rem;
  background: rgba(255,255,255,.06); border:1px solid rgba(193,151,79,.4); color: var(--hc-brass-light);
  font-family: var(--hc-font-mono); font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:9px 18px; margin-bottom:1.75rem; border-radius:999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 8px 16px rgba(0,0,0,.35);
}
.home-content .badge-dot{ width:7px; height:7px; border-radius:50%; background: var(--hc-brass); flex-shrink:0; animation: hcPulse 1.6s ease-in-out infinite; }
@keyframes hcPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(193,151,79,.7);} 50%{ box-shadow:0 0 0 7px rgba(193,151,79,0);} }

.home-content .hero-title{
  font-family: var(--hc-font-display); font-size: clamp(3rem,7vw,5.6rem); font-weight:600; line-height:1.03;
  margin-bottom:1.5rem; color: var(--hc-text);
  text-shadow: 0 4px 0 rgba(0,0,0,.3), 0 12px 30px rgba(0,0,0,.5);
}
.home-content .hero-title .line1, .home-content .hero-title .line2{ display:block; }
.home-content .hero-title em{ font-style:italic; font-weight:500; color: var(--hc-brass-light); }
.home-content .hero-sub{ font-size:1.08rem; color: rgba(241,237,227,.82); line-height:1.8; margin-bottom:2.5rem; max-width:520px; }
.home-content .hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3.5rem; }

.home-content .hero-stats{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.home-content .stat{
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.9rem 1.3rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 14px 24px rgba(0,0,0,.35);
  transition: var(--hc-transition);
}
.home-content .stat:hover{ transform: translateY(-3px); border-color: var(--hc-border-hover); }
.home-content .stat strong{ display:block; font-family: var(--hc-font-display); font-size:1.6rem; font-weight:600; color: var(--hc-brass-light); }
.home-content .stat span{ font-family: var(--hc-font-mono); font-size:.65rem; color: rgba(241,237,227,.65); text-transform:uppercase; letter-spacing:.1em; }
.home-content .stat-div{ display:none; }

.home-content .hero-scroll{
  position:absolute; bottom:9rem; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; color: rgba(193,151,79,.55);
  font-family: var(--hc-font-mono); font-size:.64rem; letter-spacing:.25em; text-transform:uppercase;
}
.home-content .scroll-line{ width:1px; height:40px; background: linear-gradient(to bottom, var(--hc-brass), transparent); animation: hcScroll 1.6s ease-in-out infinite; }
@keyframes hcScroll{ 0%,100%{ opacity:1; transform: scaleY(1) translateY(0);} 50%{ opacity:.3; transform: scaleY(.6) translateY(6px);} }

.home-content .hero-waves{ position:absolute; bottom:-1px; left:0; right:0; height:150px; z-index:5; overflow:hidden; line-height:0; }
.home-content .wave-svg{ position:absolute; bottom:0; left:0; width:200%; height:100%; }
.home-content .wave1{ fill: var(--hc-ink); animation: hcWave 20s linear infinite; opacity:.95; }
.home-content .wave2{ fill: rgba(193,151,79,.5); animation: hcWave 14s linear infinite reverse; }
.home-content .wave3{ fill: var(--hc-ink-2); animation: hcWave 9s linear infinite; }
@keyframes hcWave{ 0%{ transform: translateX(0) scaleY(1);} 50%{ transform: translateX(-25%) scaleY(.75);} 100%{ transform: translateX(-50%) scaleY(1);} }
@media (max-width:768px){ .home-content .hero-waves{ height:90px; } .home-content .hero-title{ font-size:2.6rem; } }
@media (max-width:480px){
  .home-content .hero{ padding:100px 16px 60px; }
  .home-content .hero-stats{ gap:.75rem; }
}

/* ============================================================
   MARQUEE (light touch — already fine, just a gold bar)
   ============================================================ */
.home-content .marquee-wrap{
  background: var(--hc-brass); padding:12px 0; overflow:hidden;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.15), inset 0 -4px 0 var(--hc-brass-dark);
}
.home-content .marquee-track span{
  font-family: var(--hc-font-mono); font-weight:700; font-size:.78rem; letter-spacing:.15em;
  text-transform:uppercase; color: var(--hc-walnut-2);
}

/* ============================================================
   OUR BRANDS — pressed chip cards
   ============================================================ */
.home-content .brands-section{ padding:90px 24px 110px; background: var(--hc-ink); position:relative; }
.home-content .brands-section .section-title{ margin-bottom:3rem; }
.home-content .brands-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }

.home-content .brand-card{
  --acc: var(--hc-brass); --acc-dk: var(--hc-brass-dark); --acc-glow: rgba(193,151,79,.28);
  background: linear-gradient(165deg, var(--hc-ink-3) 0%, var(--hc-ink-2) 100%);
  padding:3.2rem 2.4rem 2.6rem; cursor:pointer; position:relative; overflow:hidden;
  border-radius:20px; border:1px solid var(--hc-border); box-shadow: var(--hc-sh-card);
  transition: var(--hc-transition); isolation:isolate;
}
.home-content .brand-card::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition: opacity .4s ease;
  background: radial-gradient(circle at 30% 0%, var(--acc-glow), transparent 60%);
}
.home-content .brand-card:hover{ transform: translateY(-12px); box-shadow: var(--hc-sh-card-hover); border-color: var(--acc); }
.home-content .brand-card:hover::before{ opacity:1; }

.home-content .brand-card.featured{
  background: linear-gradient(165deg, var(--hc-ink-3) 0%, var(--hc-felt-deep) 130%);
  border-color: var(--acc-dk); transform: translateY(-14px);
}
.home-content .brand-card.featured:hover{ transform: translateY(-22px); }

.home-content .brand-spade{ --acc: var(--hc-brass); --acc-dk: var(--hc-brass-dark); --acc-glow: rgba(193,151,79,.26); }
.home-content .brand-heart{ --acc: #c96363; --acc-dk: var(--hc-red-dk); --acc-glow: rgba(201,99,99,.28); }
.home-content .brand-diamond{ --acc: var(--hc-green-ok); --acc-dk: var(--hc-green-ok-dk); --acc-glow: rgba(63,140,99,.28); }

.home-content .brand-watermark{
  position:absolute; top:-30px; right:-20px; font-size:11rem; line-height:1; color: var(--acc);
  opacity:.06; pointer-events:none; z-index:0; transition: var(--hc-transition);
}
.home-content .brand-card:hover .brand-watermark{ opacity:.12; transform: scale(1.05) rotate(-4deg); }

.home-content .brand-badge-top{
  position:absolute; top:1.1rem; right:1.1rem; background: var(--acc); color: var(--hc-walnut-2);
  font-family: var(--hc-font-mono); font-size:.63rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px; box-shadow: 0 3px 0 var(--acc-dk); z-index:2;
}

.home-content .brand-icon{
  position:relative; z-index:1; font-size:2.2rem; color: var(--acc);
  display:inline-flex; width:66px; height:66px; align-items:center; justify-content:center;
  background: rgba(255,255,255,.04); border-radius:50%; border:2px solid var(--acc-dk);
  box-shadow: 0 4px 0 -1px var(--hc-walnut-2), 0 0 0 6px rgba(255,255,255,.02);
  margin-bottom:1.6rem;
}
.home-content .brand-card h3{ position:relative; z-index:1; font-family: var(--hc-font-display); font-size:1.7rem; font-weight:600; margin-bottom:.8rem; color: var(--hc-text); }
.home-content .brand-card p{ position:relative; z-index:1; color: var(--hc-parchment-2); line-height:1.7; font-size:.94rem; margin-bottom:1.4rem; min-height:4.7em; }

.home-content .brand-meta{
  position:relative; z-index:1; list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin-bottom:2rem; padding:0;
}
.home-content .brand-meta li{
  font-family: var(--hc-font-mono); font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--hc-parchment-2); background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  padding:5px 11px; border-radius:999px;
}

.home-content .brand-link{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:.7rem;
  font-family: var(--hc-font-mono); color: var(--hc-text); font-weight:700; font-size:.82rem; letter-spacing:.05em;
}
.home-content .brand-arrow{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background: var(--acc); color: var(--hc-walnut-2); box-shadow: 0 3px 0 var(--acc-dk);
  transition: var(--hc-transition);
}
.home-content .brand-card:hover .brand-arrow{ transform: translateX(5px); }
.home-content .brand-link:hover{ color: var(--acc); }

@media (max-width:900px){
  .home-content .brands-grid{ grid-template-columns:1fr; }
  .home-content .brand-card, .home-content .brand-card.featured{ transform:none; }
}

/* ============================================================
   HOT PICKS / PRODUCTS — the main focus: chip-stack 3D cards
   ============================================================ */
.home-content .products-section{ padding:20px 24px 100px; background: var(--hc-ink); }
.home-content .section-header{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.home-content .view-all{ font-family: var(--hc-font-mono); color: var(--hc-brass-light); font-weight:600; font-size:.82rem; letter-spacing:.05em; }
.home-content .view-all:hover{ letter-spacing:.1em; }

/* Tabs — pressable pill chips */
.home-content .filter-tabs{
  display:flex; gap:.7rem; margin-bottom:2.5rem; flex-wrap:wrap;
  border-bottom:1px solid var(--hc-border); padding-bottom:1.4rem;
}
.home-content .tab{
  background: var(--hc-ink-3); border:2px solid var(--hc-walnut); color: var(--hc-smoke);
  font-family: var(--hc-font-mono); font-weight:600; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:10px 22px; border-radius:999px; box-shadow: 0 4px 0 -1px var(--hc-walnut-2);
  transition: var(--hc-transition); cursor:pointer;
}
.home-content .tab:hover{ color: var(--hc-brass-light); transform: translateY(-2px); }
.home-content .tab.active{
  background: var(--hc-brass); color: var(--hc-walnut-2); border-color: var(--hc-brass-dark);
  box-shadow: 0 4px 0 var(--hc-brass-dark); transform: translateY(-1px);
}

.home-content .tab-panel{ display:none; }
.home-content .tab-panel.active{ display:block; animation: hcFadeIn .4s ease; }
@keyframes hcFadeIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform: translateY(0);} }

/* grid with a light stagger for visual rhythm */
.home-content .products-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 34px 26px; padding-top:8px;
}
.home-content .products-grid .product-card:nth-child(3n+2){ transform: translateY(16px); }

.home-content .product-card{
  background: var(--hc-ink-3); position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:16px; border:3px solid var(--hc-walnut); box-shadow: var(--hc-sh-card);
  transition: var(--hc-transition); cursor:pointer;
}
.home-content .product-card:hover{
  transform: translateY(-10px) !important; box-shadow: var(--hc-sh-card-hover); border-color: var(--hc-brass-dark);
}

.home-content .product-img{
  height:230px; position:relative; overflow:hidden;
  background: linear-gradient(150deg, var(--hc-ink-2), var(--hc-ink));
  border-bottom:3px solid var(--hc-walnut);
}
.home-content .product-img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.4,0,.2,1); filter: saturate(.92) brightness(.9); }
.home-content .product-card:hover .product-img img{ transform: scale(1.07); filter: saturate(1) brightness(.8); }

.home-content .product-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family: var(--hc-font-mono); font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px; color: var(--hc-text);
}
.home-content .badge-new{ background: var(--hc-green-ok); box-shadow: 0 3px 0 var(--hc-green-ok-dk); }
.home-content .badge-sale{ background: var(--hc-red); box-shadow: 0 3px 0 var(--hc-red-dk); }
.home-content .badge-hot{ background: var(--hc-brass); color: var(--hc-walnut-2); box-shadow: 0 3px 0 var(--hc-brass-dark); }

.home-content .product-info{ padding:1.25rem 1.4rem .25rem; flex:1; display:flex; flex-direction:column; }
.home-content .product-brand{ font-family: var(--hc-font-mono); font-size:.63rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color: var(--hc-brass-light); margin-bottom:.35rem; }
.home-content .product-name{ font-family: var(--hc-font-display); font-size:1.02rem; font-weight:600; color: var(--hc-text); margin-bottom:.5rem; line-height:1.3; }
.home-content .product-desc{ font-size:.82rem; color: var(--hc-smoke); line-height:1.55; margin-bottom:1rem; flex:1; }

.home-content .product-footer{ display:flex; align-items:center; justify-content:space-between; padding-bottom:1.1rem; border-top:1px dashed var(--hc-border); padding-top:.9rem; }
.home-content .product-price strong{ font-family: var(--hc-font-display); font-size:1.12rem; font-weight:600; color: var(--hc-brass-light); }
.home-content .product-price del{ font-size:.76rem; color: var(--hc-smoke); margin-left:6px; }
.home-content .product-stars{ font-size:.72rem; color: var(--hc-brass); letter-spacing:.06em; }

.home-content .product-actions{ display:flex; gap:.55rem; padding:0 1.4rem 1.4rem; }
.home-content .add-to-cart{
  flex:1; background: linear-gradient(180deg, var(--hc-brass-light), var(--hc-brass)); color: var(--hc-walnut-2);
  font-family: var(--hc-font-mono); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:12px; border-radius:8px; border:none; box-shadow: 0 4px 0 var(--hc-brass-dark); cursor:pointer;
  transition: var(--hc-transition);
}
.home-content .add-to-cart:hover{ transform: translateY(-2px); }
.home-content .add-to-cart:active{ transform: translateY(3px); box-shadow: 0 1px 0 var(--hc-brass-dark); }
.home-content .wishlist-btn{
  background: var(--hc-ink-2); color: var(--hc-text); padding:12px 15px; font-size:1rem; border-radius:8px;
  border:1px solid var(--hc-border); cursor:pointer; transition: var(--hc-transition);
}
.home-content .wishlist-btn:hover{ background: var(--hc-ink); border-color: var(--hc-brass); color: var(--hc-brass-light); transform: translateY(-2px); }
.home-content .wishlist-btn:active{ transform: translateY(1px); }

@media (max-width:700px){ .home-content .products-grid .product-card:nth-child(3n+2){ transform:none; } }

/* ============================================================
   WHY US, TABLES, COMPARE, TESTIMONIALS, FAQ, CTA
   Light polish only — layout/content left as-is per request
   ============================================================ */
.home-content .why-section{ display:grid; grid-template-columns:1fr 1fr; min-height:600px; background: var(--hc-ink-2); }
.home-content .why-visual{ background: linear-gradient(150deg, var(--hc-felt-deep), var(--hc-ink)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; min-height:400px; }
.home-content .why-visual img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.home-content .why-chip-art{ position:absolute; bottom:15%; right:10%; }
.home-content .chip-ring{ position:absolute; border-radius:50%; border:3px solid rgba(193,151,79,.35); }
.home-content .r1{ width:100px; height:100px; top:-50px; left:-50px; }
.home-content .r2{ width:80px; height:80px; top:-40px; left:-40px; animation: hcSpin 10s linear infinite; }
.home-content .chip-center{
  width:64px; height:64px; background: linear-gradient(180deg, var(--hc-brass-light), var(--hc-brass)); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color: var(--hc-walnut-2);
  font-family: var(--hc-font-mono); box-shadow: 0 6px 0 var(--hc-brass-dark), 0 14px 24px rgba(0,0,0,.5); border:3px solid var(--hc-walnut);
}
@keyframes hcSpin{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
.home-content .why-content{ padding:5rem 4rem; display:flex; flex-direction:column; justify-content:center; }
.home-content .why-features{ margin:2rem 0 2.5rem; }
.home-content .feature-item{
  display:flex; gap:1.25rem; padding:1.25rem 1.4rem; margin-bottom:.9rem; background: var(--hc-ink-3);
  border-radius:12px; border:2px solid var(--hc-walnut); box-shadow: 0 5px 0 -1px var(--hc-walnut-2), 0 10px 18px rgba(0,0,0,.35);
}
.home-content .feature-icon{ color: var(--hc-brass); font-size:.8rem; margin-top:4px; flex-shrink:0; }
.home-content .feature-item h4{ font-family: var(--hc-font-display); font-size:1.02rem; font-weight:600; margin-bottom:.35rem; color: var(--hc-text); }
.home-content .feature-item p{ color: var(--hc-parchment-2); font-size:.9rem; line-height:1.6; }
@media (max-width:1024px){ .home-content .why-section{ grid-template-columns:1fr; } .home-content .why-visual{ min-height:300px; } }
@media (max-width:768px){ .home-content .why-content{ padding:3rem 2rem; } }

.home-content .tables-section{ padding:100px 0; background: var(--hc-ink); overflow:hidden; }
.home-content .tables-scroll{ display:flex; gap:24px; overflow-x:auto; padding:14px 6px 30px; }
.home-content .table-card{
  flex:0 0 270px; background: var(--hc-ink-3); border:3px solid var(--hc-walnut); border-radius:16px;
  padding:2.4rem 1.8rem; text-align:center; box-shadow: var(--hc-sh-card); transition: var(--hc-transition); cursor:pointer;
}
.home-content .table-card:nth-child(odd){ transform: translateY(-10px); }
.home-content .table-card:hover{ transform: translateY(-16px) !important; border-color: var(--hc-brass-dark); box-shadow: var(--hc-sh-card-hover); }
.home-content .table-img{ font-size:2.6rem; color: var(--hc-brass); margin-bottom:1.2rem; text-shadow: 0 3px 0 var(--hc-brass-dark); }
.home-content .table-card h4{ font-family: var(--hc-font-display); font-size:1.15rem; font-weight:600; margin-bottom:.4rem; color: var(--hc-text); }
.home-content .table-card p{ color: var(--hc-smoke); font-size:.82rem; margin-bottom:1.1rem; text-transform:uppercase; letter-spacing:.06em; }
.home-content .table-price{
  display:inline-block; background: var(--hc-ink-2); color: var(--hc-brass-light); padding:8px 18px; border-radius:999px;
  font-family: var(--hc-font-mono); font-weight:700; font-size:.85rem; border:2px solid var(--hc-brass-dark);
}
@media (max-width:640px){ .home-content .table-card{ transform:none !important; } }

.home-content .compare-table-wrap{ overflow-x:auto; background: var(--hc-ink-3); border-radius:16px; border:3px solid var(--hc-walnut); box-shadow: var(--hc-sh-card); padding:.5rem 1rem; }
.home-content .compare-table{ width:100%; border-collapse:collapse; }
.home-content .compare-table th, .home-content .compare-table td{ padding:15px 20px; text-align:center; border-bottom:1px solid var(--hc-border); font-size:.9rem; }
.home-content .compare-table th{ font-family: var(--hc-font-mono); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--hc-smoke); }
.home-content .compare-table td:first-child, .home-content .compare-table th:first-child{ text-align:left; }
.home-content .compare-table th.us{ color: var(--hc-brass); }
.home-content .compare-table td.us{ color: var(--hc-brass-light); font-weight:700; font-size:1.1rem; font-family: var(--hc-font-display); }

.home-content .testimonial-card{
  background: var(--hc-parchment); color: var(--hc-walnut); padding:2.4rem 2rem; border-radius:14px; border:3px solid var(--hc-walnut);
  box-shadow: 0 9px 0 -1px #c9b988, 0 22px 38px rgba(0,0,0,.45); transform: rotate(-1.5deg); transition: var(--hc-transition);
}
.home-content .testimonials-grid .testimonial-card:nth-child(2){ transform: translateY(-14px) rotate(1deg); }
.home-content .testimonials-grid .testimonial-card:nth-child(3){ transform: rotate(-.8deg); }
.home-content .testimonial-card:hover{ transform: translateY(-10px) rotate(0deg) !important; }
.home-content .stars{ color: var(--hc-brass-dark); }
.home-content .avatar{
  width:42px; height:42px; border-radius:50%; background: linear-gradient(180deg, var(--hc-felt-light), var(--hc-felt));
  display:flex; align-items:center; justify-content:center; font-family: var(--hc-font-mono); font-weight:700; font-size:.75rem;
  color: var(--hc-text); box-shadow: 0 3px 0 var(--hc-felt-deep);
}
@media (max-width:900px){ .home-content .testimonials-grid .testimonial-card{ transform:none !important; } }

.home-content .faq-item{ background: var(--hc-ink-3); border:2px solid var(--hc-walnut); border-radius:12px; margin-bottom:.8rem; padding:0 1.25rem; transition: var(--hc-transition); }
.home-content .faq-item.active{ border-color: var(--hc-brass-dark); box-shadow: 0 5px 0 -1px var(--hc-walnut-2), 0 10px 18px rgba(0,0,0,.35); }
.home-content .faq-q{ width:100%; background:none; border:none; text-align:left; color: var(--hc-text); font-size:.95rem; font-weight:600; padding:1.15rem 0; display:flex; justify-content:space-between; gap:1rem; cursor:pointer; }
.home-content .faq-q:hover, .home-content .faq-item.active .faq-q{ color: var(--hc-brass-light); }
.home-content .faq-q span{ color: var(--hc-brass); font-size:1.2rem; transition: var(--hc-transition); }
.home-content .faq-item.active .faq-q span{ transform: rotate(45deg); }
.home-content .faq-a{ color: var(--hc-parchment-2); font-size:.9rem; line-height:1.7; padding-bottom:1.15rem; display:none; }
.home-content .faq-item.active .faq-a{ display:block; }

.home-content .cta-banner{
  background: linear-gradient(180deg, var(--hc-brass-light), var(--hc-brass)); padding:80px 40px; text-align:center;
  position:relative; overflow:hidden; box-shadow: inset 0 4px 0 rgba(255,255,255,.2), inset 0 -6px 0 var(--hc-brass-dark);
}
.home-content .cta-content h2{ font-family: var(--hc-font-display); font-weight:600; font-size: clamp(1.8rem,3.5vw,2.8rem); color: var(--hc-walnut-2); }
.home-content .cta-banner .btn-primary{
  background: linear-gradient(180deg, #22302a, var(--hc-ink)); color: var(--hc-brass-light); border-color: var(--hc-walnut-2);
  box-shadow: 0 6px 0 var(--hc-walnut-2), 0 12px 20px rgba(0,0,0,.4);
}
.home-content .cta-banner .btn-primary:active{ box-shadow: 0 2px 0 var(--hc-walnut-2); }
@media (max-width:480px){ .home-content .cta-banner{ padding:60px 24px; } .home-content .cta-suit{ display:none; } }