/* ==========================================================================
   REUSABLE COMPONENTS
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: 0.01em;
  padding: 15px 28px;
  border-radius: var(--radius-btn);
  border: 1.5px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .08s ease;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  max-width: 100%;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-red); color: var(--color-white); }
.btn-primary:hover { background: var(--color-red-deep); }
.btn-primary:disabled { background: var(--color-border); color: var(--color-grey-text); cursor: not-allowed; }
.btn-secondary { background: var(--color-white); color: var(--color-blue); border-color: var(--color-blue); }
.btn-secondary:hover { background: var(--color-blue); color: var(--color-white); }
/* On dark (Corporate Blue) backgrounds: solid light background + dark text, per button-hierarchy rule —
   this replaces ad hoc inline white-border overrides so every dark-section button reads clearly at rest. */
.btn-on-dark { background: var(--color-white); color: var(--color-blue); border-color: var(--color-white); }
.btn-on-dark:hover { background: var(--color-grey-light); border-color: var(--color-grey-light); }
.btn-text { background: transparent; color: var(--color-blue); padding: 8px 4px; border-radius: 0; position: relative; white-space: normal; }
.btn-text::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--color-blue);
  transition: right .15s ease;
}
.btn-text:hover::after { right: 0; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: var(--fs-caption); }

/* ---- Cards ---- */
.card {
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card--hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* ---- Top Utility Bar ---- */
.utility-bar {
  background: var(--color-blue);
  color: var(--color-white);
  font-size: var(--fs-caption);
  padding: 10px 0;
}
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }
.utility-bar a { color: var(--color-white); opacity: .92; }
.utility-bar span { margin-right: var(--sp-3); }
@media (max-width: 640px) { .utility-bar { display: none; } }

/* ---- Header ---- */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 200;
  transition: box-shadow .2s ease, padding .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; gap: var(--sp-4);
}
.site-header.is-scrolled .header-inner { padding: 10px 0; }
.logo { display: flex; align-items: center; gap: 8px; }
.logo img { height: 50px; transition: height .2s ease; }
.site-header.is-scrolled .logo img { height: 40px; }

.main-nav { display: flex; align-items: center; gap: var(--sp-4); flex: 1; justify-content: center; }
.main-nav > ul { display: flex; gap: var(--sp-4); }
.main-nav > ul > li { position: relative; }
.main-nav > ul > li > a, .main-nav > ul > li > button.nav-toggle {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small);
  color: var(--color-charcoal); background: none; border: none; padding: 10px 2px;
  display: inline-flex; align-items: center; gap: 4px; position: relative;
}
.main-nav > ul > li > a::after, .main-nav > ul > li > button.nav-toggle::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 4px; height: 2px; background: var(--color-blue);
  transition: right .15s ease;
}
.main-nav > ul > li > a:hover::after, .main-nav > ul > li:hover > button.nav-toggle::after { right: 0; }

.dropdown { position: relative; }
.dropdown-panel {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: var(--color-white); border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift); border: 1px solid var(--color-border);
  padding: var(--sp-2); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 50;
}
.dropdown:hover .dropdown-panel,
.dropdown.is-open .dropdown-panel { opacity: 1; visibility: visible; transform: translateY(8px); }
.dropdown-panel a {
  display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; font-size: var(--fs-small);
}
.dropdown-panel a:hover { background: var(--color-grey-light); }
.dropdown-panel a small { color: var(--color-grey-text); font-size: var(--fs-caption); font-weight: 400; }
.dropdown-panel .badge-note { color: var(--color-blue); font-weight: 600; font-size: 12px; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.icon-btn {
  background: none; border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; position: relative; color: var(--color-charcoal);
}
.icon-btn:hover { background: var(--color-grey-light); }
.cart-count {
  position: absolute; top: 0; right: 0; background: var(--color-red); color: var(--color-white);
  font-size: 11px; font-weight: 700; border-radius: 999px; min-width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  transform: translate(30%, -30%);
}

.search-box { display: flex; align-items: center; overflow: hidden; width: 0; transition: width .2s ease; }
.search-box.is-open { width: 240px; }
.search-box input {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: 8px 12px; font-size: 16px;
}

@media (max-width: 640px) {
  .search-box {
    position: absolute; top: 100%; left: 0; right: 0; width: auto !important;
    background: var(--color-white); border-bottom: 1px solid var(--color-border);
    max-height: 0; padding: 0 5%; transition: max-height .2s ease;
  }
  .search-box.is-open { max-height: 64px; padding: 12px 5%; }
  .search-box input { font-size: 16px; }
}

.hamburger { display: none; }

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .header-actions > a.btn { display: none; }
  .header-actions .icon-btn[aria-label="My Account"] { display: none; }
}
@media (max-width: 380px) {
  .header-actions { gap: 2px; }
  .icon-btn { width: 36px; height: 36px; }
  .logo img { height: 34px; }
}

/* ---- Mobile Menu ---- */
.mobile-menu-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 300; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
.mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; }
.mobile-menu {
  position: fixed; top: 0; right: 0; height: 100%; width: min(88vw, 380px);
  background: var(--color-white); z-index: 310; padding: var(--sp-3);
  transform: translateX(100%); transition: transform .25s ease; overflow-y: auto;
  display: flex; flex-direction: column;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-3); }
.mobile-menu ul { display: flex; flex-direction: column; }
.mobile-menu > ul > li > a, .mobile-menu > ul > li > button.mm-toggle {
  display: flex; justify-content: space-between; width: 100%; text-align: left; background: none; border: none;
  padding: 16px 4px; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--color-border);
}
.mobile-submenu { display: none; padding-left: var(--sp-2); }
.mobile-submenu.is-open { display: block; }
.mobile-submenu li a { padding: 12px 4px; font-size: var(--fs-small); color: var(--color-grey-text); display: block; }
.mobile-menu-footer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--color-border); font-size: var(--fs-caption); color: var(--color-grey-text); }
.mobile-menu-footer p { margin-bottom: 6px; }

/* ---- Hero ---- */
.hero { padding: var(--sp-7) 0; background: var(--color-white); }
.hero .container { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-6); align-items: center; }
.hero-eyebrow { color: var(--color-red); font-weight: 600; font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-2); display: block; }
.hero h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.1; margin-bottom: var(--sp-3); }
.hero p.lead { font-size: var(--fs-body); color: var(--color-grey-text); margin-bottom: var(--sp-4); max-width: 520px; }
.hero-ctas { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-card); box-shadow: var(--shadow-lift); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hero--compact .container { grid-template-columns: 1fr; text-align: center; }
.hero--compact p.lead { margin-left: auto; margin-right: auto; }
.hero--compact .hero-ctas { justify-content: center; }
.hero--dark { background: var(--color-blue); color: var(--color-white); }
.hero--dark p.lead { color: rgba(255,255,255,.82); }

@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-ctas { justify-content: center; }
  .hero p.lead { margin-left: auto; margin-right: auto; }
}

/* ---- Business Pillar / Company Cards ---- */
.pillar-grid, .company-grid, .feature-grid { display: grid; gap: var(--sp-4); }
.pillar-grid { grid-template-columns: repeat(3, 1fr); }
.company-grid { grid-template-columns: repeat(2, 1fr); }
.feature-grid { grid-template-columns: repeat(4, 1fr); }

.pillar-card, .company-card { overflow: hidden; display: flex; flex-direction: column; }
.pillar-card img, .company-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.pillar-card-body, .company-card-body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.pillar-card-body h3, .company-card-body h3 { font-size: var(--fs-h4); margin-bottom: 6px; }
.pillar-card-body p, .company-card-body p { color: var(--color-grey-text); font-size: var(--fs-small); margin-bottom: var(--sp-2); flex: 1; }

.feature-card { padding: var(--sp-3); text-align: left; }
.feature-card .icon { width: 32px; height: 32px; color: var(--color-blue); margin-bottom: var(--sp-2); }
.feature-card h4 { font-size: var(--fs-h4); margin-bottom: 4px; }
.feature-card p { color: var(--color-grey-text); font-size: var(--fs-small); }

@media (max-width: 1024px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

.pillar-card--lg img { aspect-ratio: 16/10; }
.pillar-card--lg .pillar-card-body { padding: var(--sp-4); }
.pillar-card--lg h3 { font-size: var(--fs-h3); margin-bottom: 8px; }
.pillar-card--lg p { font-size: var(--fs-body); margin-bottom: var(--sp-3); }
@media (max-width: 640px) {
  .company-grid, .feature-grid { grid-template-columns: 1fr; }
}

/* ---- Product / Commodity Cards ----
   Third pass: dial the card back toward restraint. Percentage-based image
   staging (so the product occupies the same visual proportion of the card
   regardless of column width), a soft contact-shadow to ground the product
   photography instead of hard rule-lines, and hierarchy carried by spacing
   and weight rather than borders. Cascades everywhere product-card /
   commodity-card is used. ---- */

:root {
  --stage-start: #FBFBFA;
  --stage-end: #F3F1EE;
  --card-border: #EEECE7;
  --card-border-hover: #D8D3C9;
  --card-shadow-hover: 0 20px 40px -18px rgba(24, 22, 18, 0.16);
}

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.commodity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }

.product-card, .commodity-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  background: var(--color-white);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: none;
  transition: transform .45s cubic-bezier(.19,.83,.24,1), box-shadow .45s cubic-bezier(.19,.83,.24,1), border-color .45s ease;
}

/* The generic .card--hover lift (used by company/pillar cards elsewhere)
   is intentionally overridden here so product cards keep their own,
   quieter interaction instead of the site-wide default. */
.product-card.card--hover:hover, .commodity-card.card--hover:hover {
  transform: none;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .product-card:hover, .commodity-card:hover {
    transform: translateY(-2px);
    border-color: var(--card-border-hover);
    box-shadow: var(--card-shadow-hover);
  }
}

/* ---- Image stage ---- */
.product-card .card-image, .commodity-card .card-image {
  position: relative;
  background: linear-gradient(180deg, var(--stage-start) 0%, var(--stage-end) 100%);
  overflow: hidden;
}
.product-card .card-image { aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; padding: 13%; }
.commodity-card .card-image { aspect-ratio: 4/3; }

.product-card .card-image img, .commodity-card .card-image img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform .6s cubic-bezier(.19,.83,.24,1);
}
.commodity-card .card-image img { object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .card-image img { transform: scale(1.025); }
  .commodity-card:hover .card-image img { transform: scale(1.04); }
}

/* ---- Body / type hierarchy ----
   PRODUCT → DESCRIPTION → PRICE → ACTION, carried entirely by spacing and
   weight — the gap widens right before price to mark it as the next
   decision point, rather than a drawn line. */
.card-body { padding: var(--sp-3); display: flex; flex-direction: column; flex: 1; }
.card-category {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-grey-text); font-weight: 500; margin: 0 0 8px;
}
.card-tag-blue {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--color-blue); font-weight: 600; margin: 0 0 8px;
}

.card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.32;
  color: var(--color-charcoal);
  margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(var(--fs-h4) * 1.32 * 2);
}
.card-title a:hover { color: var(--color-blue); }

.card-desc {
  color: var(--color-grey-text);
  font-size: var(--fs-caption);
  line-height: 1.55;
  margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.card-price-row { display: flex; align-items: baseline; gap: var(--sp-1); flex-wrap: wrap; }
.card-price {
  font-family: var(--font-heading);
  font-size: 20px; font-weight: 700; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--color-charcoal);
}
.card-price.tbc { color: var(--color-grey-text); font-style: italic; font-weight: 400; font-size: var(--fs-caption); letter-spacing: normal; }
.tbc-card-badge { display: inline-block; font-size: 11px; font-weight: 600; color: var(--color-warning); background: #FBF3E7; padding: 3px 8px; border-radius: 5px; width: fit-content; margin-top: 6px; }

.card-cta { margin-top: auto; padding-top: var(--sp-3); }
.card-cta .btn {
  width: 100%; min-height: 48px; padding: 14px 24px;
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: .01em;
}
.card-cta .btn:active { transform: scale(0.98); }

.tbc-image-placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 100%; background: var(--color-grey-light); color: var(--color-grey-text);
  font-size: var(--fs-caption); text-align: center; border-radius: 8px; border: 1px dashed var(--color-border);
}

/* Tablet: let cards size themselves to available width instead of forcing a
   fixed column count, so a 3-up grid never gets cramped just because the
   breakpoint says "tablet". */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-3); }
  .commodity-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-3); }
}

/* Mobile: one product card per row — unchanged from previous passes. The
   percentage-based stage padding above already scales gracefully to full
   card width, so only type and CTA proportions need adjusting here. */
@media (max-width: 640px) {
  .product-grid, .commodity-grid { grid-template-columns: 1fr; gap: var(--sp-3); }

  .card-body { padding: var(--sp-3); }

  /* Let longer product names wrap naturally instead of clamping to two lines
     and reserving a fixed height for them. */
  .card-title { -webkit-line-clamp: unset; overflow: visible; min-height: 0; margin-bottom: 8px; }

  /* Slightly more room for the description now that the card is full width. */
  .card-desc { -webkit-line-clamp: 3; margin-bottom: 20px; }

  .card-price { font-size: 22px; }

  /* Comfortable, easy-to-tap CTA. */
  .card-cta { padding-top: var(--sp-3); }
  .card-cta .btn { min-height: 52px; padding: 15px 24px; font-size: var(--fs-small); }
}

/* ---- Filters / Toolbar ---- */
.catalogue-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.filter-pills { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.filter-pill {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-white);
  font-size: var(--fs-caption); color: var(--color-grey-text); font-weight: 500;
}
.filter-pill.is-active { background: var(--color-blue); color: var(--color-white); border-color: var(--color-blue); }
.sort-select { border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 8px 12px; font-size: var(--fs-caption); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: var(--fs-caption); color: var(--color-grey-text); margin-bottom: var(--sp-3); }
.breadcrumb a { color: var(--color-grey-text); }
.breadcrumb a:hover { color: var(--color-blue); }
.breadcrumb span[aria-current] { color: var(--color-charcoal); font-weight: 500; }

/* ---- Product Detail ----
   Same visual language as the product cards: warm-neutral stage, restrained
   borders, hierarchy carried by spacing and weight. Reading order is
   category → name → price → description → purchase action, then the
   deeper feature/spec detail underneath. On wide screens the gallery
   is pinned (position: sticky below) so the image stays in view while
   the longer info column scrolls beside it. */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }

.gallery-main {
  background: linear-gradient(180deg, var(--stage-start, #FBFBFA) 0%, var(--stage-end, #F3F1EE) 100%);
  border-radius: var(--radius-card);
  border: 1px solid var(--card-border, var(--color-border));
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  padding: 9%;
  overflow: hidden; position: relative; cursor: zoom-in;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s cubic-bezier(.19,.83,.24,1); }
@media (hover: hover) and (pointer: fine) {
  .gallery-main:hover img { transform: scale(1.02); }
}
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 1px solid var(--card-border, var(--color-border)); display: flex; align-items: center; justify-content: center;
  color: var(--color-charcoal); transition: background-color .2s ease, box-shadow .2s ease;
}
.gallery-arrow--prev { left: 14px; }
.gallery-arrow--next { right: 14px; }
.gallery-arrow:hover { background: var(--color-white); box-shadow: var(--shadow-soft); }
.gallery-arrow .icon { width: 18px; height: 18px; }

.gallery-thumbs { display: flex; gap: 10px; margin-top: var(--sp-2); overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs button {
  width: 68px; height: 68px; flex-shrink: 0; border-radius: 8px; padding: 4px;
  background: linear-gradient(180deg, var(--stage-start, #FBFBFA) 0%, var(--stage-end, #F3F1EE) 100%);
  border: 1px solid var(--card-border, var(--color-border));
  opacity: .55;
  transition: opacity .25s ease, border-color .25s ease;
}
.gallery-thumbs button:hover { opacity: .85; }
.gallery-thumbs button.is-active { opacity: 1; border-color: var(--color-charcoal); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(20,22,26,.94); z-index: 600; display: none; align-items: center; justify-content: center;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-img { max-width: 88vw; max-height: 82vh; object-fit: contain; }
.lightbox-close { position: absolute; top: 20px; right: 20px; background: none; border: none; }
.lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; padding: var(--sp-2); }
.lightbox-arrow--prev { left: 12px; }
.lightbox-arrow--next { right: 12px; }
.lightbox-arrow .icon, .lightbox-close .icon { width: 28px; height: 28px; }

.product-info .card-category { margin-bottom: 10px; }
.product-info h1 {
  font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.015em; line-height: 1.18;
  margin-bottom: 6px;
}
.product-info .text-muted { color: var(--color-grey-text); font-size: var(--fs-caption); margin-bottom: var(--sp-3); }
.product-price {
  font-family: var(--font-heading); font-size: 28px; font-weight: 700; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums; color: var(--color-charcoal);
  margin-bottom: var(--sp-3);
}
.product-price.tbc { font-family: var(--font-body); font-size: var(--fs-body); color: var(--color-grey-text); font-style: italic; font-weight: 400; letter-spacing: normal; }
.product-desc { color: var(--color-grey-text); line-height: 1.65; max-width: 62ch; margin: 0 0 var(--sp-4); }

.qty-selector { display: inline-flex; align-items: center; border: 1px solid var(--card-border, var(--color-border)); border-radius: var(--radius-input); overflow: hidden; height: 52px; }
.qty-selector button { width: 44px; height: 100%; background: var(--color-white); border: none; font-size: 18px; color: var(--color-charcoal); }
.qty-selector button:hover { background: var(--color-grey-light); }
.qty-selector input { width: 48px; height: 100%; border: none; text-align: center; border-left: 1px solid var(--card-border, var(--color-border)); border-right: 1px solid var(--card-border, var(--color-border)); font-variant-numeric: tabular-nums; }

.add-to-cart-row { display: flex; align-items: stretch; gap: var(--sp-2); margin: 0 0 var(--sp-2); flex-wrap: wrap; }
.add-to-cart-row .btn { min-height: 52px; min-width: 200px; font-weight: 600; }
.ask-question-link { display: inline-block; margin-top: var(--sp-2); font-size: var(--fs-caption); }

.info-block { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--card-border, var(--color-border)); }
.info-block h3 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--sp-2); }
.feature-list li { display: flex; gap: 8px; padding: 6px 0; color: var(--color-grey-text); font-size: var(--fs-small); }
.feature-list li::before { content: '✓'; color: var(--color-blue); font-weight: 700; }

.spec-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.spec-table tr:nth-child(odd) { background: var(--color-grey-light); }
.spec-table td { padding: 10px 12px; }
.spec-table td:first-child { color: var(--color-grey-text); width: 40%; }

.tbc-note { display: inline-block; background: #FBF3E7; color: var(--color-warning); font-size: var(--fs-caption); padding: 6px 12px; border-radius: 6px; margin-top: var(--sp-1); }

/* Wide screens: a touch more air between the two columns, and the
   gallery stays put while the (often taller) info column scrolls past
   it, so the image never gets left behind on long product pages. */
@media (min-width: 1025px) {
  .product-detail { gap: var(--sp-6); }
  .gallery { position: sticky; top: var(--sp-4); }
}
@media (max-width: 1024px) { .product-detail { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .product-info h1 { font-size: var(--fs-h2); }
  .product-price { font-size: 26px; }
  .add-to-cart-row .btn { flex: 1; min-width: 160px; }
  .qty-selector { height: 52px; }
  .gallery-thumbs button { width: 60px; height: 60px; }
}

/* ---- Export Specification Band (signature element) ---- */
.spec-band {
  border-top: 1px solid var(--color-blue); border-bottom: 1px solid var(--color-blue);
  padding: var(--sp-4) 0; margin: var(--sp-4) 0;
}
.spec-band .spec-label { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--color-blue); font-weight: 700; margin-bottom: var(--sp-1); }
.spec-band ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.spec-band ul li { background: var(--color-grey-light); border: 1px solid var(--color-border); padding: 6px 14px; border-radius: 6px; font-size: var(--fs-caption); }

/* ---- FAQ Accordion ---- */
.faq-category-tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
  background: none; border: none; padding: 20px 4px; text-align: left; font-family: var(--font-heading);
  font-weight: 600; font-size: var(--fs-body); color: var(--color-charcoal);
}
.accordion-trigger .chev { transition: transform .2s ease; flex-shrink: 0; color: var(--color-blue); }
.accordion-item.is-open .accordion-trigger .chev { transform: rotate(180deg); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.accordion-item.is-open .accordion-panel { max-height: 600px; }
.accordion-panel-inner { padding: 0 4px 20px; color: var(--color-grey-text); }

/* ---- Forms ---- */
.form-group { margin-bottom: var(--sp-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.form-group label { display: block; font-weight: 500; font-size: var(--fs-caption); margin-bottom: 6px; }
.form-group label .req { color: var(--color-red); margin-left: 2px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  padding: 12px 14px; height: 48px; background: var(--color-white); font-size: 16px; color: var(--color-charcoal);
}
.form-group input::placeholder, .form-group textarea::placeholder { color: #6B7078; }
.form-group textarea { height: auto; min-height: 120px; padding-top: 12px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px rgba(27,58,107,.12);
}
.form-group.has-error input, .form-group.has-error select, .form-group.has-error textarea { border-color: var(--color-error); }
.form-error-msg { display: none; color: var(--color-error); font-size: var(--fs-caption); margin-top: 6px; }
.form-group.has-error .form-error-msg { display: block; }
.form-fieldset-label { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .05em; color: var(--color-grey-text); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); }
.form-fieldset-label:first-child { margin-top: 0; }
.required-note { font-size: var(--fs-caption); color: var(--color-grey-text); margin-bottom: var(--sp-3); }

.form-card { max-width: 720px; margin: 0 auto; padding: var(--sp-5); }

.form-success {
  text-align: center; padding: var(--sp-5) var(--sp-3);
}
.form-success .success-icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--color-success-bg); color: var(--color-success);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3); font-size: 32px;
}

@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } .form-card { padding: var(--sp-3); } }

/* ---- FAQ + Testimonials + Newsletter placeholders (structural only) ---- */
.stat-band { background: var(--color-blue); color: var(--color-white); padding: var(--sp-5) 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); text-align: center; gap: var(--sp-3); }
.stat-grid .stat-num { font-family: var(--font-heading); font-size: 40px; font-weight: 700; }
.stat-grid .stat-label { font-size: var(--fs-caption); opacity: .85; }
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2,1fr); } }

.market-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.market-pill { background: var(--color-grey-light); padding: 8px 16px; border-radius: 999px; font-size: var(--fs-caption); color: var(--color-charcoal); }

/* ---- CTA Band ---- */
.cta-band { text-align: center; padding: var(--sp-6) 0; }
.cta-band h2 { color: var(--color-white); margin-bottom: var(--sp-1); }
.cta-band p { color: rgba(255,255,255,.85); margin-bottom: var(--sp-3); }
.cta-band .hero-ctas { justify-content: center; }

/* ---- Footer ---- */
.site-footer { background: var(--color-blue); color: var(--color-white); }
.footer-main { padding: var(--sp-6) 0 var(--sp-4); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-4); }
.footer-col h4 { color: var(--color-white); font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.footer-col p, .footer-col a, .footer-col li { color: rgba(255,255,255,.8); font-size: var(--fs-small); }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a:hover { color: var(--color-white); }
.footer-logo { height: 40px; margin-bottom: var(--sp-2); background: var(--color-white); display: inline-block; padding: 6px 10px; border-radius: 8px; }
.footer-logo img { height: 28px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding: var(--sp-2) 0; font-size: var(--fs-caption); }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: rgba(255,255,255,.75); margin-right: var(--sp-2); }

@media (max-width: 1024px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-main { grid-template-columns: 1fr; } .footer-bottom .container { flex-direction: column; align-items: flex-start; } }

/* ---- Floating: WhatsApp + Chatbot + Back-to-top (single stacked column so they never collide) ---- */
.float-stack { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column-reverse; gap: 14px; z-index: 400; align-items: flex-end; }
.float-btn {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lift); border: none; transition: transform .15s ease, box-shadow .15s ease; flex-shrink: 0;
}
.float-btn:hover { transform: scale(1.05); }
.float-btn--chat { background: var(--color-blue); color: var(--color-white); }
.float-btn--whatsapp { background: var(--color-white); color: #22262B; border: 1px solid var(--color-border); }
.back-to-top {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--color-charcoal); color: var(--color-white); display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft); border: none;
}
.back-to-top.is-visible { display: flex; }

/* ---- Chatbot window ---- */
.chat-window {
  position: fixed; right: 24px; bottom: 96px; width: 380px; max-width: 90vw; height: 520px; max-height: 75vh;
  background: var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; overflow: hidden; z-index: 401;
  opacity: 0; visibility: hidden; transform: scale(.96) translateY(8px); transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.chat-window.is-open { opacity: 1; visibility: visible; transform: scale(1) translateY(0); }
.chat-header { background: var(--color-blue); color: var(--color-white); padding: var(--sp-2) var(--sp-3); display: flex; align-items: center; gap: 10px; }
.chat-header img { height: 24px; }
.chat-header .chat-title { font-weight: 600; font-size: var(--fs-small); flex: 1; }
.chat-header button { background: none; border: none; color: var(--color-white); }
.chat-body { flex: 1; overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: 10px; }
.chat-bubble { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: var(--fs-small); line-height: 1.45; }
.chat-bubble.bot { align-self: flex-start; background: var(--color-grey-light); color: var(--color-charcoal); border-bottom-left-radius: 4px; }
.chat-bubble.user { align-self: flex-end; background: var(--color-blue); color: var(--color-white); border-bottom-right-radius: 4px; }
.chat-bubble.escalate { align-self: flex-start; background: var(--color-white); border: 1px dashed var(--color-border); color: var(--color-charcoal); }
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--sp-2) var(--sp-2); }
.chat-suggestion-pill {
  border: 1px solid var(--color-blue); color: var(--color-blue); background: var(--color-white);
  border-radius: 999px; padding: 6px 12px; font-size: var(--fs-caption);
}
.chat-suggestion-pill:hover { background: var(--color-blue); color: var(--color-white); }
.chat-input-row { display: flex; gap: 8px; padding: var(--sp-2); border-top: 1px solid var(--color-border); }
.chat-input-row input { flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius-input); padding: 10px 12px; font-size: var(--fs-small); }
.chat-send { width: 40px; height: 40px; border-radius: 50%; background: var(--color-red); color: var(--color-white); border: none; flex-shrink: 0; }

@media (max-width: 640px) {
  .chat-window { right: 12px; left: 12px; width: auto; bottom: 84px; height: 78vh; max-height: 78vh; }
  .float-stack { right: 16px; bottom: 16px; }
}

/* ---- Toast ---- */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 500; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--color-white); border-left: 4px solid var(--color-success); box-shadow: var(--shadow-lift);
  border-radius: 10px; padding: 14px 18px; font-size: var(--fs-small); min-width: 260px;
  animation: toast-in .2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast strong { display: block; margin-bottom: 2px; }

/* ---- Modal ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 450; display: none; align-items: center; justify-content: center; padding: var(--sp-2); }
.modal-backdrop.is-open { display: flex; }
.modal { background: var(--color-white); border-radius: var(--radius-card); padding: var(--sp-4); max-width: 480px; width: 100%; box-shadow: var(--shadow-lift); animation: modal-in .18s ease; }
@keyframes modal-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.modal-close { float: right; background: none; border: none; font-size: 20px; }

/* ---- Empty state ---- */
.empty-state { text-align: center; padding: var(--sp-6) var(--sp-2); color: var(--color-grey-text); }
.empty-state .icon { font-size: 40px; margin-bottom: var(--sp-2); }
.empty-state h3 { color: var(--color-charcoal); margin-bottom: 6px; }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Icons (inline SVG utility) ---- */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }