@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================= RESET ============================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  color: #111214;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select { font-family: inherit; }
:focus-visible { outline: 2px solid #111214; outline-offset: 2px; }

/* ============================= TOKENS ============================= */
:root {
  --black: #0A0A0A;
  --white: #ffffff;
  --gray-50: #FAFAFA;
  --gray-100: #F2F0F1;
  --gray-200: #E8E6E6;
  --gray-300: #D6D3D3;
  --gray-500: #8C8888;
  --gray-600: #6B6767;
  --gray-900: #171717;
  --red: #FF3333;
  --red-light: #FFECEC;
  --yellow: #FFC633;
  --green: #219653;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 62px;
  --maxw: 1240px;
}

h1, h2, h3, .display {
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
@media (min-width: 1280px) { .wrap { padding: 0 80px; max-width: 1440px; } }

.section { padding: 56px 0; }
@media (min-width: 900px) { .section { padding: 80px 0; } }

.section-title {
  font-size: 32px;
  text-align: center;
  margin-bottom: 32px;
}
@media (min-width: 900px) { .section-title { font-size: 40px; } }

/* ============================= BUTTONS ============================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 15px;
  transition: opacity .15s ease, transform .1s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--black); color: var(--white); }
.btn-primary:hover { opacity: 0.85; }
.btn-outline { background: transparent; color: var(--black); border: 1px solid var(--gray-300); }
.btn-outline:hover { background: var(--gray-100); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gray-300); background: var(--white);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--gray-100); }
.icon-btn svg { width: 18px; height: 18px; }

/* ============================= ANNOUNCEMENT + HEADER ============================= */
.announce {
  background: var(--black); color: var(--white);
  text-align: center; font-size: 13px; padding: 10px 40px;
  position: relative;
}
.announce u { cursor: pointer; }
.announce .close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--white); font-size: 18px; line-height: 1; opacity: .8;
}
.announce .close:hover { opacity: 1; }

header.site-header {
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; background: var(--white); z-index: 200;
}
.nav-row {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 20px;
  max-width: 1440px; margin: 0 auto;
}
@media (min-width: 1280px) { .nav-row { padding: 18px 80px; } }

.logo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.nav-links { display: none; align-items: center; gap: 28px; margin-right: auto; }
.nav-links a { font-size: 15px; display: flex; align-items: center; gap: 4px; }
.nav-links a:hover { opacity: .6; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-search {
  display: none; flex: 1; max-width: 560px; margin: 0 24px;
  background: var(--gray-100); border-radius: var(--radius-pill);
  align-items: center; padding: 12px 18px; gap: 10px;
}
.nav-search input { background: none; border: none; width: 100%; font-size: 14px; }
.nav-search input::placeholder { color: var(--gray-500); }
.nav-search svg { flex-shrink: 0; opacity: .5; }
@media (min-width: 1024px) { .nav-search { display: flex; } }

.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.hamburger { display: flex; }
@media (min-width: 1024px) { .hamburger { display: none; } }
.mobile-search-btn { display: flex; }
@media (min-width: 1024px) { .mobile-search-btn { display: none; } }

.cart-link { position: relative; }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--red); color: var(--white);
  font-size: 10px; font-weight: 600;
  width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* Mobile menu drawer */
.mobile-drawer {
  position: fixed; inset: 0; background: var(--white); z-index: 400;
  display: none; flex-direction: column; overflow-y: auto;
}
.mobile-drawer.open { display: flex; }
.mobile-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--gray-200);
}
.mobile-drawer-search {
  margin: 16px 20px 0; background: var(--gray-100); border-radius: var(--radius-pill);
  display: flex; align-items: center; padding: 12px 18px; gap: 10px;
}
.mobile-drawer-search input { border: none; background: none; width: 100%; font-size: 14px; }
.mobile-drawer nav { padding: 8px 20px; }
.mobile-drawer nav a {
  display: block; padding: 16px 0; font-size: 16px; border-bottom: 1px solid var(--gray-100);
}

/* ============================= BREADCRUMB ============================= */
.breadcrumb {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .01em;
  color: var(--gray-600);
  padding: 18px 0;
}
.breadcrumb a { display: inline-flex; align-items: center; gap: 6px; transition: color .15s ease; }
.breadcrumb a:hover { color: var(--black); }
.breadcrumb .crumb-sep { width: 14px; height: 14px; flex: none; color: var(--gray-400, #b5b5b5); }
.breadcrumb .current { color: var(--black); font-weight: 600; }

/* ============================= HERO ============================= */
.hero { background: var(--gray-100); overflow: hidden; position: relative; }
.hero::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(36% 36% at 18% 28%, #FBDCB8 0%, transparent 70%),
    radial-gradient(30% 30% at 82% 18%, #C7E1F2 0%, transparent 70%),
    radial-gradient(38% 38% at 68% 82%, #F1D4DE 0%, transparent 70%),
    radial-gradient(26% 26% at 12% 82%, #D8E7D3 0%, transparent 70%);
  filter: blur(70px) saturate(115%);
  opacity: .6;
  animation: heroDrift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-3%, 2%) scale(1.08) rotate(4deg); }
  100% { transform: translate(2%, -3%) scale(1.05) rotate(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}
.hero .wrap { position: relative; z-index: 1; }
.hero .wrap {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  padding-top: 40px; padding-bottom: 0;
  position: relative;
}
@media (min-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr 1fr; align-items: center; padding-top: 56px; }
}
.hero h1 { font-size: 34px; margin-bottom: 16px; }
@media (min-width: 640px) { .hero h1 { font-size: 46px; } }
@media (min-width: 960px) { .hero h1 { font-size: 56px; } }
.hero p { color: var(--gray-600); font-size: 15px; max-width: 460px; margin-bottom: 24px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.hero-stats div strong { font-family: 'Archivo Black'; font-size: 26px; display: block; }
@media (min-width: 640px) { .hero-stats div strong { font-size: 32px; } }
.hero-stats div span { color: var(--gray-600); font-size: 13px; }
.hero-stats div:not(:last-child) { border-right: 1px solid var(--gray-300); padding-right: 24px; }

.hero-art { position: relative; }
.hero-art img { width: 100%; border-radius: 0; }
.hero-star { position: absolute; color: var(--black); }
.hero-star.s1 { top: 8%; right: 8%; font-size: 48px; }
.hero-star.s2 { bottom: 30%; left: -4%; font-size: 30px; }

.brand-strip {
  background: var(--black); padding: 28px 0;
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-around; align-items: center;
}
.brand-strip .wrap { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-around; align-items: center; width: 100%; }
.brand-strip span { color: var(--white); font-size: 20px; font-weight: 700; opacity: .9; letter-spacing: 0.02em; }
@media (max-width: 640px) { .brand-strip span { font-size: 15px; } }

/* ============================= PRODUCT CARD ============================= */
.product-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px;
}
@media (min-width: 640px) { .product-grid { gap: 24px; } }
@media (min-width: 900px) { .product-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.product-card { display: block; }
.product-card .thumb {
  background: var(--gray-100); border-radius: var(--radius-md);
  overflow: hidden; margin-bottom: 12px; aspect-ratio: 4/5; position: relative;
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.product-card:hover .thumb img { transform: scale(1.04); }
.product-card h3 {
  font-family: 'Poppins'; text-transform: none; font-weight: 500; font-size: 15px;
  margin-bottom: 6px; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.rating { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
.rating .stars { color: var(--yellow); letter-spacing: 1px; font-size: 13px; }
.rating .num { color: var(--gray-600); }
.price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.price-row .price { font-weight: 600; font-size: 17px; }
.price-row .was { color: var(--gray-500); text-decoration: line-through; font-size: 15px; }
.badge-discount { background: var(--red-light); color: var(--red); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 30px; }

.view-all-wrap { text-align: center; margin-top: 36px; }

/* ============================= DRESS STYLE ============================= */
.style-block { background: var(--gray-100); border-radius: var(--radius-lg); padding: 32px 16px; }
@media (min-width: 900px) { .style-block { padding: 48px; } }
.style-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
@media (min-width: 700px) { .style-grid { grid-template-columns: repeat(2, 1fr); } }
.style-card {
  position: relative; background: var(--white); border-radius: var(--radius-md);
  overflow: hidden; min-height: 160px; display: flex; align-items: flex-start; padding: 24px;
}
.style-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.style-card span {
  position: relative; z-index: 1; font-family: 'Archivo Black'; font-size: 24px; text-transform: uppercase;
  background: rgba(255,255,255,.85); padding: 4px 10px; border-radius: 6px;
}
@media (min-width: 700px) { .style-card:nth-child(1), .style-card:nth-child(2) { min-height: 200px; } }

/* ============================= TESTIMONIALS ============================= */
.testi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.testi-head h2 { font-size: 28px; }
.testi-arrows { display: flex; gap: 10px; }
.testi-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.testi-track::-webkit-scrollbar { display: none; }
.testi-card {
  min-width: 280px; max-width: 320px; scroll-snap-align: start; flex-shrink: 0;
  border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 24px;
}
.testi-card .stars { color: var(--yellow); margin-bottom: 12px; }
.testi-card .who { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 10px; }
.testi-card .who .check { color: var(--green); }
.testi-card p { color: var(--gray-600); font-size: 14px; }

/* ============================= NEWSLETTER ============================= */
.newsletter {
  background: var(--black); color: var(--white);
  border-radius: var(--radius-lg); padding: 36px 24px;
  display: flex; flex-direction: column; gap: 20px; align-items: stretch;
  margin: 0 20px;
}
@media (min-width: 1024px) {
  .newsletter { margin: 0 auto; max-width: 1240px; flex-direction: row; align-items: center; justify-content: space-between; padding: 48px; }
}
.newsletter h2 { font-size: 28px; max-width: 420px; }
@media (min-width: 1024px) { .newsletter h2 { font-size: 32px; } }
.newsletter-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
@media (min-width: 1024px) { .newsletter-form { width: 360px; } }
.newsletter-form input {
  border-radius: var(--radius-pill); border: none; padding: 14px 20px; font-size: 14px;
}
.newsletter-form .msg { font-size: 13px; color: #9BE29B; min-height: 16px; }

/* ============================= FOOTER ============================= */
footer { background: var(--gray-100); padding: 48px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 20px; } }
.footer-grid h4 { font-size: 13px; letter-spacing: .08em; margin-bottom: 18px; color: var(--gray-600); font-weight: 600; }
.footer-grid li { margin-bottom: 12px; font-size: 14px; color: var(--gray-600); }
.footer-grid li a:hover { color: var(--black); }
.footer-brand p { color: var(--gray-600); font-size: 14px; margin: 14px 0 18px; max-width: 260px; }
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 34px; height: 34px; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray-300);
}
.footer-bottom {
  border-top: 1px solid var(--gray-300); margin-top: 40px; padding: 20px 0;
  display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
}
@media (min-width: 700px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
.footer-bottom span { font-size: 13px; color: var(--gray-600); }
.payment-icons { display: flex; gap: 8px; }
.payment-icons div {
  width: 42px; height: 26px; background: var(--white); border: 1px solid var(--gray-300); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--gray-600);
}

/* ============================= SHOP / CATEGORY PAGE ============================= */
.shop-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 60px; }
@media (min-width: 960px) { .shop-layout { grid-template-columns: 270px 1fr; } }

.filters-panel { background: var(--white); }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.filters-head h3 { font-family: 'Poppins'; text-transform: none; font-weight: 600; font-size: 20px; }
.filters-close { display: none; }

.filter-block { border-bottom: 1px solid var(--gray-200); padding: 18px 0; }
.filter-block:first-of-type { padding-top: 18px; }
.cat-list li { border-bottom: 1px solid var(--gray-100); }
.cat-list li:last-child { border-bottom: none; }
.cat-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 0; font-size: 15px; color: var(--gray-600);
}
.cat-row:hover { color: var(--black); }
.cat-row.active { color: var(--black); font-weight: 600; }
.cat-row svg { opacity: .5; }

.filter-block summary, .filter-toggle {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; margin-bottom: 14px;
}
.filter-toggle::-webkit-details-marker { display: none; }
.filter-block[open] .chev { transform: rotate(180deg); }
.chev { transition: transform .2s ease; }

.price-slider { padding: 10px 4px 0; }
.range-wrap { position: relative; height: 34px; }
.range-wrap input[type=range] {
  position: absolute; width: 100%; top: 12px; height: 4px;
  -webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.range-wrap input[type=range]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.range-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: all; width: 18px; height: 18px; border-radius: 50%;
  background: var(--black); cursor: pointer; margin-top: -7px; border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--black);
}
.range-wrap input[type=range]::-moz-range-thumb {
  pointer-events: all; width: 18px; height: 18px; border-radius: 50%;
  background: var(--black); cursor: pointer; border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--black);
}
.range-track { position: absolute; top: 15px; left: 0; right: 0; height: 4px; background: var(--gray-200); border-radius: 4px; }
.range-fill { position: absolute; top: 15px; height: 4px; background: var(--black); border-radius: 4px; }
.price-values { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray-600); margin-top: 6px; }

.color-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.08); position: relative;
}
.swatch.selected::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; }
.swatch[data-light="1"].selected::after { color: #111; }

.size-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.size-pill {
  padding: 9px 16px; border-radius: var(--radius-pill); background: var(--gray-100);
  font-size: 13px; color: var(--gray-600);
}
.size-pill.selected { background: var(--black); color: var(--white); }

.apply-filter-btn { width: 100%; margin-top: 8px; }

.shop-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-bottom: 24px;
}
.shop-head h1 { font-size: 30px; }
.shop-head .count { color: var(--gray-600); font-size: 14px; margin-top: 6px; }
.shop-head-right { display: flex; align-items: center; gap: 12px; }
.sort-select {
  border: 1px solid var(--gray-300); border-radius: var(--radius-pill); padding: 10px 16px; font-size: 14px; background: var(--white);
}
.mobile-filter-btn {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border: 1px solid var(--gray-300); border-radius: 50%;
}
@media (min-width: 960px) { .mobile-filter-btn { display: none; } }

.empty-state { text-align: center; padding: 60px 20px; color: var(--gray-600); }

.pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
.pagination button {
  min-width: 40px; height: 40px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--gray-300); font-size: 14px; display: flex; align-items: center; gap: 6px; justify-content:center;
}
.pagination button.active { background: var(--black); color: var(--white); border-color: var(--black); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.pagination button.nav { padding: 0 18px; }
.pagination .dots { padding: 0 6px; color: var(--gray-500); }

/* Mobile filter drawer */
.filters-panel.drawer {
  position: fixed; inset: 0; background: var(--white); z-index: 500; overflow-y: auto;
  padding: 20px; transform: translateX(-100%); transition: transform .25s ease;
}
.filters-panel.drawer.open { transform: translateX(0); }
@media (min-width: 960px) {
  .filters-panel.drawer { position: static; transform: none; padding: 0; z-index: auto; }
  .filters-close { display: none !important; }
}
@media (max-width: 959px) { .filters-close { display: flex; } }

/* ============================= PRODUCT DETAIL PAGE ============================= */
.pdp-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 60px; }
@media (min-width: 900px) { .pdp-layout { grid-template-columns: 0.9fr 1.1fr; gap: 48px; } }

.gallery { display: flex; flex-direction: column-reverse; gap: 14px; }
@media (min-width: 640px) { .gallery { flex-direction: row; } }
.gallery-thumbs { display: flex; flex-direction: row; gap: 12px; }
@media (min-width: 640px) { .gallery-thumbs { flex-direction: column; width: 100px; } }
.gallery-thumbs button {
  border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100);
  aspect-ratio: 1/1; flex: 1; border: 2px solid transparent;
}
.gallery-thumbs button.active { border-color: var(--black); }
.gallery-main { flex: 1; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-100); aspect-ratio: 4/5; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info h1 { font-size: 26px; margin-bottom: 10px; }
@media (min-width: 640px) { .pdp-info h1 { font-size: 32px; } }
.pdp-info .price-row { margin: 14px 0 18px; }
.pdp-info .price-row .price { font-size: 26px; }
.pdp-info .desc { color: var(--gray-600); font-size: 14px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-200); }

.option-block { padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.option-block h4 { font-size: 14px; color: var(--gray-600); font-weight: 500; margin-bottom: 12px; }

.buy-row { display: flex; gap: 14px; padding-top: 20px; }
.qty-stepper {
  display: flex; align-items: center; background: var(--gray-100); border-radius: var(--radius-pill);
  padding: 4px; gap: 4px; flex-shrink: 0;
}
.qty-stepper button {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.qty-stepper span { width: 32px; text-align: center; font-weight: 600; }
.buy-row .btn-primary { flex: 1; }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--black); color: var(--white); padding: 14px 24px; border-radius: var(--radius-pill);
  font-size: 14px; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 999;
  display: flex; align-items: center; gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.tabs-row { display: flex; gap: 32px; border-bottom: 1px solid var(--gray-200); overflow-x: auto; margin-top: 16px; }
.tab-btn { padding: 16px 4px; font-size: 15px; color: var(--gray-500); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-btn.active { color: var(--black); font-weight: 600; border-color: var(--black); }
.tab-panel { display: none; padding: 28px 0; }
.tab-panel.active { display: block; }
.tab-panel.pane-details p { color: var(--gray-600); font-size: 14px; margin-bottom: 10px; }
.tab-panel.pane-details li { color: var(--gray-600); font-size: 14px; margin-bottom: 8px; padding-left: 18px; position: relative; }
.tab-panel.pane-details li::before { content: "•"; position: absolute; left: 0; }
.faq-item { border-bottom: 1px solid var(--gray-200); padding: 14px 0; }
.faq-item summary { font-weight: 500; cursor: pointer; list-style: none; display:flex; justify-content:space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { color: var(--gray-600); font-size: 14px; margin-top: 10px; }

.reviews-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.reviews-head h3 { font-family: 'Poppins'; text-transform: none; font-size: 20px; font-weight: 600; }
.reviews-head-right { display: flex; align-items: center; gap: 10px; }
.reviews-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 800px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
.review-card { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 20px; position: relative; }
.review-card .stars { color: var(--yellow); margin-bottom: 10px; }
.review-card .who { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 8px; }
.review-card .who .check { color: var(--green); font-size: 13px; }
.review-card p { color: var(--gray-600); font-size: 14px; margin-bottom: 10px; }
.review-card .date { color: var(--gray-500); font-size: 12px; }
.load-more-wrap { text-align: center; margin-top: 28px; }

/* ============================= CART PAGE ============================= */
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 24px; padding-bottom: 60px; }
@media (min-width: 960px) { .cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.cart-title { font-size: 32px; margin-bottom: 24px; }
.cart-box { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 8px 20px; }
.cart-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.cart-item:last-child { border-bottom: none; }
.cart-item .thumb { width: 100px; height: 100px; border-radius: var(--radius-sm); overflow: hidden; background: var(--gray-100); flex-shrink: 0; }
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-body { flex: 1; display: flex; flex-direction: column; }
.cart-item-top { display: flex; justify-content: space-between; gap: 10px; }
.cart-item-top h4 { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.cart-item-top .meta { font-size: 13px; color: var(--gray-600); }
.cart-item-top .meta span { color: var(--black); }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.cart-item-bottom .price { font-weight: 600; font-size: 17px; }
.remove-btn { color: var(--red); flex-shrink: 0; }
.remove-btn:hover { opacity: .7; }

.summary-box { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 24px; }
.summary-box h3 { font-family: 'Poppins'; text-transform: none; font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; font-size: 15px; padding: 10px 0; color: var(--gray-600); }
.summary-row.total { border-top: 1px solid var(--gray-200); margin-top: 8px; padding-top: 16px; font-size: 18px; font-weight: 700; color: var(--black); }
.summary-row .discount { color: var(--red); }
.promo-row { display: flex; gap: 10px; margin: 18px 0; }
.promo-row input {
  flex: 1; background: var(--gray-100); border: none; border-radius: var(--radius-pill); padding: 13px 18px; font-size: 14px;
}
.promo-row .btn { padding: 13px 20px; }
.promo-msg { font-size: 13px; margin: -8px 0 14px; min-height: 16px; }
.promo-msg.ok { color: var(--green); }
.promo-msg.err { color: var(--red); }

.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty p { color: var(--gray-600); margin: 12px 0 24px; }

/* ============================= UTILITY ============================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.mt-lg { margin-top: 40px; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================= REVIT CATEGORY FILTER ============================= */
.category-filter-block { padding-top: 4px; }
.filter-category-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.category-filter-list { display: flex; flex-direction: column; gap: 2px; }
.category-filter-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 0; background: transparent; padding: 10px 4px;
  font-family: inherit; font-size: 14px; color: var(--gray-700); text-align: left;
  border-radius: 6px; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.category-filter-row:hover { background: var(--gray-100); color: var(--black); }
.category-filter-row.active { background: var(--gray-100); color: var(--black); font-weight: 600; }
.category-count { color: var(--gray-500); font-size: 12px; min-width: 22px; text-align: right; }
.category-filter-row.active .category-count { color: var(--black); }
.category-help { border-top: 1px solid var(--gray-200); margin-top: 8px; padding-top: 18px; }
.category-help p { color: var(--gray-600); font-size: 12px; line-height: 1.6; margin: 0; }

/* Multi-category Revit family filter: preserve the existing visual language. */
.category-filter-row.active {
  font-weight: 600;
}
.category-filter-row.active::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1;
}


.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-drop-btn{
display:flex;align-items:center;gap:6px;padding:10px 12px;font:inherit;
background:none;border:none;cursor:pointer;font-weight:500
}
.nav-drop-btn svg{transition:.25s}
.nav-dropdown:hover .nav-drop-btn svg,
.nav-dropdown.open .nav-drop-btn svg{transform:rotate(180deg)}
.nav-dropdown-menu{
opacity:0;visibility:hidden;pointer-events:none;
position:absolute;top:100%;left:0;min-width:260px;
background:#fff;border:1px solid #e5e5e5;border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.12);padding:10px;z-index:9999
}
.nav-dropdown-menu a{
display:block;padding:12px 14px;border-radius:8px
}
.nav-dropdown-menu a:hover{background:#f5f5f5}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto}

.mega-menu{
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:18px 28px;
  padding:20px;
  width:min(920px,calc(100vw - 32px));
  min-width:0;
  max-height:calc(100vh - 92px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.mega-menu div{display:flex;flex-direction:column;min-width:0}
.mega-menu strong{margin-bottom:10px}
.mega-menu a{padding:4px 0}
.mega-menu a:hover{background:transparent;text-decoration:underline}
@media (max-width:1100px) and (min-width:901px){
  .mega-menu{grid-template-columns:repeat(2,minmax(190px,1fr));}
}
@media (max-width:900px){
  .nav-dropdown-menu.mega-menu{width:calc(100vw - 24px);max-height:calc(100vh - 110px);}
}


/* ============ GROUPED FILTER SIDEBAR ============ */
.filter-groups { display: flex; flex-direction: column; gap: 18px; }
.filter-group {
  --accent: var(--gray-500);
  --accent-soft: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 14px 14px 12px;
}
.filter-group--blue   { --accent: #2563EB; --accent-soft: #EAF1FF; }
.filter-group--green  { --accent: #219653; --accent-soft: #E7F7EE; }
.filter-group--orange { --accent: #F2994A; --accent-soft: #FFF2E4; }
.filter-group--yellow { --accent: #E0A800; --accent-soft: #FFF7DF; }
.filter-group--purple { --accent: #8B5CF6; --accent-soft: #F2ECFF; }
.filter-group-title {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.filter-group .category-filter-list { gap: 4px; }
.filter-group .category-filter-row:hover { background: var(--accent-soft); }
.filter-group .category-filter-row.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.filter-group .category-filter-row.active .category-count { color: var(--accent); }
.filter-group .category-filter-row.active::before { border-color: var(--accent); color: var(--accent); }

/* ============ DOWNLOAD COUNT BADGE ============ */
.dl-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  background: var(--gray-100); border-radius: var(--radius-pill);
  padding: 4px 10px; line-height: 1;
}
.product-card .dl-badge { margin-top: 6px; }
.dl-badge--lg { font-size: 14px; padding: 8px 14px; color: var(--black); background: #EAF1FF; }
.dl-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 6px 12px;
  border-radius: var(--radius-pill); background: #FFF2E4; color: #B4661B;
}


/* ===================== HOME PAGE ORGANISATION (v2) ===================== */
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray-600); margin-bottom: 12px;
}
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 32px;
  padding-bottom: 20px; border-bottom: 1px solid var(--gray-200);
}
.sec-head .eyebrow { margin-bottom: 6px; }
.sec-head .section-title { font-size: 28px; }
@media (min-width: 900px) { .sec-head .section-title { font-size: 36px; } }
.section-alt { background: var(--gray-50); }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.hero-panel {
  background: var(--gray-900); color: #fff; border-radius: var(--radius-lg);
  padding: 32px; display: grid; gap: 14px; align-content: start;
}
.hero-panel .eyebrow { color: rgba(255,255,255,.6); margin: 0; }
.hero-panel h3 { font-size: 24px; }
.hero-panel p { color: rgba(255,255,255,.75); font-size: 14px; }
.hero-list { display: grid; gap: 8px; font-size: 14px; color: rgba(255,255,255,.85); }
.hero-list li { position: relative; padding-left: 18px; }
.hero-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--yellow); border-radius: 50%;
}
.hero-panel .btn-primary { background: #fff; color: var(--gray-900); margin-top: 8px; }

.cat-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-card {
  border: 1px solid var(--gray-200); border-radius: var(--radius-md);
  background: var(--white); padding: 18px; display: grid; gap: 12px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat-card:hover {
  border-color: var(--gray-900); transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.07);
}
.cat-card img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--gray-100); border-radius: var(--radius-sm); padding: 10px;
}
.cat-card span { font-weight: 600; font-size: 15px; }

.brand-strip span { text-transform: none; }

.payment-icons div svg { display: block; color: var(--gray-900); }
.payment-icons .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ===== Content pages (about / faq / legal) ===== */
.announce a { color: inherit; text-decoration: underline; }
.page-title { font-family: var(--font-display, inherit); font-size: clamp(30px, 5vw, 46px); line-height: 1.05; margin: 8px 0 12px; text-transform: uppercase; }
.lede { max-width: 68ch; color: #4B4747; font-size: 17px; line-height: 1.6; margin: 0 0 8px; }
.info-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 20px; }
.info-card { border: 1px solid var(--gray-200, #E7E5E5); border-radius: 16px; padding: 20px; background: #fff; }
.info-card strong { display: block; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
.info-card p { margin: 0; color: #4B4747; line-height: 1.6; }
.legal-list { margin: 12px 0 0; padding-left: 20px; color: #4B4747; line-height: 1.7; }
.legal-list li { margin-bottom: 6px; }


/* ===== Layout polish ===== */
.nav-search { display: none; min-width: 220px; margin: 0 16px; }
@media (min-width: 1024px) and (max-width: 1279px) { .nav-search { display: none; } }
@media (min-width: 1280px) { .nav-search { display: flex; } }
@media (min-width: 1024px) and (max-width: 1279px) { .mobile-search-btn { display: flex; } }
.nav-links { gap: 20px; }
.hero { padding-bottom: 36px; }
@media (min-width: 960px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.badge-discount.is-free { background: #E8F7EC; color: #1B7F3B; }
.nav-links a, .nav-drop-btn { white-space: nowrap; }
@media (min-width: 1280px) { .nav-links { gap: 18px; } .nav-search { min-width: 180px; max-width: 320px; margin: 0 14px; } }


/* ---- Revit 3D Families mega-menu: category icons + colors ---- */
:root{
  --cat-architecture:#3b6fd4;
  --cat-interior:#d9713d;
  --cat-commercial:#1f8fa4;
  --cat-landscape:#3f9a5c;
  --cat-sports:#c9902a;
  --cat-transportation:#8256d0;
  --cat-browse:#d1495b;
}
.mega-menu{grid-template-columns:repeat(3,minmax(190px,1fr));gap:26px 40px;padding:28px 32px;min-width:860px;border-radius:16px;box-shadow:0 24px 60px rgba(15,23,42,.14)}
.mega-menu .mm-col{display:flex;flex-direction:column;gap:2px}
.mega-menu .mm-head{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin-bottom:10px}
.mega-menu .mm-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;flex:0 0 auto}
.mega-menu .mm-icon svg{width:17px;height:17px}
.mega-menu .mm-architecture .mm-icon{color:var(--cat-architecture);background:color-mix(in srgb,var(--cat-architecture) 12%,transparent)}
.mega-menu .mm-interior .mm-icon{color:var(--cat-interior);background:color-mix(in srgb,var(--cat-interior) 12%,transparent)}
.mega-menu .mm-commercial .mm-icon{color:var(--cat-commercial);background:color-mix(in srgb,var(--cat-commercial) 12%,transparent)}
.mega-menu .mm-landscape .mm-icon{color:var(--cat-landscape);background:color-mix(in srgb,var(--cat-landscape) 12%,transparent)}
.mega-menu .mm-sports .mm-icon{color:var(--cat-sports);background:color-mix(in srgb,var(--cat-sports) 12%,transparent)}
.mega-menu .mm-transportation .mm-icon{color:var(--cat-transportation);background:color-mix(in srgb,var(--cat-transportation) 12%,transparent)}
.mega-menu .mm-browse .mm-icon{color:var(--cat-browse);background:color-mix(in srgb,var(--cat-browse) 12%,transparent)}
.mega-menu .mm-col a{position:relative;padding:5px 0 5px 14px;font-size:14px}
.mega-menu .mm-col a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0;transition:opacity .15s ease}
.mega-menu .mm-col a:hover::before{opacity:1}
.mega-menu .mm-col-architecture a:hover{color:var(--cat-architecture)}
.mega-menu .mm-col-interior a:hover{color:var(--cat-interior)}
.mega-menu .mm-col-commercial a:hover{color:var(--cat-commercial)}
.mega-menu .mm-col-landscape a:hover{color:var(--cat-landscape)}
.mega-menu .mm-col-sports a:hover{color:var(--cat-sports)}
.mega-menu .mm-col-transportation a:hover{color:var(--cat-transportation)}
.mega-menu .mm-col-browse a:hover{color:var(--cat-browse)}
.mega-menu .mm-col-browse{grid-column:1 / -1}
@media (max-width:900px){.mega-menu{grid-template-columns:1fr;min-width:0}}

/* Clickable mega-menu category headings */
.mm-head-link{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;width:100%;}
.mm-head-link:hover{color:inherit;text-decoration:none;}

/* Production hardening — additive only; existing layout/categories/filters remain intact. */
img{max-width:100%;height:auto}.thumb img{aspect-ratio:4/3;object-fit:cover}.gallery-main img{aspect-ratio:4/3;object-fit:contain}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:9999;background:#fff;padding:10px 14px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}