/* ========================================================================
   Creative Storefront commerce layout contract
   Shared settings-driven width, radii, theme and information hierarchy.
   ======================================================================== */

:root {
  --cps-commerce-gutter: clamp(14px, 2.2vw, 28px);
  --cps-commerce-section-gap: clamp(34px, 5vw, 64px);
  --cps-commerce-header-control: 48px;
}

/* ---- Settings must win over legacy fixed layout values ---------------- */
body.cps-eshop .kimo-wrap,
body.cps-eshop .kimo-inner,
body.cps-eshop .kimo-inner-wide,
body.cps-eshop .cps-pdp-root {
  inline-size: min(100%, var(--cps-container-max-width, 1680px));
  max-inline-size: var(--cps-container-max-width, 1680px) !important;
  margin-inline: auto !important;
  padding-inline: var(--cps-commerce-gutter);
}
body.cps-eshop .kimo-fullbleed { inline-size: 100%; }
body.cps-eshop .kimo-btn,
body.cps-eshop button.kimo-btn,
body.cps-eshop .cps-product-card__primary,
body.cps-eshop .cps-product-card__quick,
body.cps-eshop .cps-pdp-atc-btn { border-radius: var(--cps-button-radius, 12px); }
body.cps-eshop input,
body.cps-eshop select,
body.cps-eshop textarea,
body.cps-eshop .kimo-select { border-radius: var(--cps-input-radius, 12px); }
body.cps-eshop .kimo-card,
body.cps-eshop .cps-product-card,
body.cps-eshop .kimo-cart-section,
body.cps-eshop .kimo-summary-card { border-radius: var(--cps-card-radius, 16px); }

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  body.cps-eshop .kimo-mainbar .kimo-wrap { grid-template-columns:minmax(150px,210px) minmax(280px,1fr) auto; gap:14px; }
  body.cps-eshop .cps-home-products-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body.cps-eshop .cps-home-category-grid--rail { grid-template-columns:repeat(4,minmax(0,1fr)); }
  body.cps-eshop .cps-products-page .kimo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 992px) {
  body.cps-eshop .kimo-mainbar .kimo-wrap { display:flex; min-block-size:68px; gap:10px; }
  body.cps-eshop .kimo-mainbar .cps-header-search { display:none !important; }
  body.cps-eshop .kimo-brand { margin-inline-end:auto; }
  body.cps-eshop .cps-header-action > span:not(.kimo-badge), body.cps-eshop .kimo-language-code { display:none; }
  body.cps-eshop .cps-header-action, body.cps-eshop .kimo-language-toggle, body.cps-eshop .kimo-dark-toggle { inline-size:42px; min-inline-size:42px; block-size:42px; padding:0; }
  body.cps-eshop .kimo-nav { display:none; }
  body.cps-eshop .cps-home-products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.cps-eshop .cps-home-category-grid--rail { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-block-end:7px; }
  body.cps-eshop .cps-home-category-tile { flex:0 0 min(190px,58vw); scroll-snap-align:start; }
  body.cps-eshop .cps-products-page .kimo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.cps-eshop .kimo-cart-grid { grid-template-columns:1fr; }
  body.cps-eshop .kimo-cart-summary-col { position:static; }
}
@media (max-width: 640px) {
  :root { --cps-commerce-gutter: 12px; }
  body.cps-eshop .kimo-topbar-marquee span:nth-child(n+2) { display:none; }
  body.cps-eshop .kimo-brand-text span { display:none; }
  body.cps-eshop .kimo-brand img { max-inline-size:110px; max-block-size:42px; }
  body.cps-eshop .kimo-brand-mark { inline-size:40px; block-size:40px; }
  body.cps-eshop .cps-home-hero, body.cps-eshop .cps-home-hero-slide { min-block-size:450px; }
  body.cps-eshop .cps-home-hero-copy { width:100%; }
  body.cps-eshop .cps-home-products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  body.cps-eshop .cps-products-page .kimo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  body.cps-eshop .kimo-cart-header { align-items:flex-start; gap:12px; }
  body.cps-eshop .kimo-cart-item { grid-template-columns:76px minmax(0,1fr); gap:10px; padding:14px; }
}

@media (prefers-reduced-motion: reduce) {
  body.cps-eshop .cps-home-category-tile,
  body.cps-eshop .cps-product-card,
  body.cps-eshop .kimo-nav-link::after { transition:none !important; }
}

/* Shared form and live commercial-state surfaces. */
body.cps-eshop .form-control,
body.cps-eshop input:not([type="checkbox"]):not([type="radio"]),
body.cps-eshop select,
body.cps-eshop textarea {
  border-color: var(--cps-border);
  background: var(--cps-surface);
  color: var(--cps-text);
}
body.cps-eshop .form-control:focus,
body.cps-eshop input:not([type="checkbox"]):not([type="radio"]):focus,
body.cps-eshop select:focus,
body.cps-eshop textarea:focus {
  border-color: var(--cps-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cps-focus-ring, var(--cps-primary)) 18%, transparent);
  outline: 0;
}
body.cps-eshop .cps-search-noimage { display:grid; place-items:center; inline-size:100%; block-size:100%; color:var(--cps-muted-text); background:color-mix(in srgb,var(--cps-primary) 5%,var(--cps-background)); }
body.cps-eshop .cps-search-noimage svg { inline-size:26px; block-size:26px; fill:none; stroke:currentColor; stroke-width:1.5; }
body.cps-eshop .cps-search-stock { display:block; margin-block-start:3px; font-size:10px; font-weight:700; }
body.cps-eshop .cps-search-stock.is-available { color:var(--cps-success); }
body.cps-eshop .cps-search-stock.is-unavailable { color:var(--cps-danger); }
body.cps-eshop .kimo-modal-stock { display:inline-flex; align-items:center; gap:6px; margin-block:8px 2px; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:800; }
body.cps-eshop .kimo-modal-stock.is-available { color:var(--cps-success); background:color-mix(in srgb,var(--cps-success) 9%,var(--cps-surface)); }
body.cps-eshop .kimo-modal-stock.is-unavailable { color:var(--cps-danger); background:color-mix(in srgb,var(--cps-danger) 9%,var(--cps-surface)); }
body.cps-eshop .cps-home-category-icon-text { font-size: clamp(24px,3vw,38px); line-height:1; }

/* Shared storefront content/readability rules. */
:root { --cps-commerce-gutter: clamp(16px, 2vw, 36px); }

/* Keep commerce copy readable; display/section headings can retain the brand
   treatment, product names and controls should not inherit condensed faces. */
body.cps-eshop .cps-product-card__title,
body.cps-eshop .cps-product-card__meta,
body.cps-eshop .kimo-filters,
body.cps-eshop .cps-products-controls,
body.cps-eshop .cps-pdp-meta,
body.cps-eshop .cps-pdp-short-desc,
body.cps-eshop .cps-richtext,
body.cps-eshop .cps-specs-grid {
  font-family: var(--cps-font-body, Inter, Tajawal, system-ui, -apple-system, "Segoe UI", sans-serif) !important;
}

/* Product detail has one purchase CTA. Supporting actions stay visually
   secondary and cannot compete with Add to Cart. */
body.cps-eshop .cps-pdp-btn-row { grid-template-columns: minmax(0, 1fr) !important; }
body.cps-eshop .cps-pdp-order-note { margin-block-start: 10px; }

/* Broken media is removed instead of letting browsers paint filenames/alt
   text inside the gallery. */
body.cps-eshop [data-kimo-gallery-slide][hidden],
body.cps-eshop [data-kimo-gallery-thumb][hidden] { display: none !important; }

/* Large catalogue density. */
@media (min-width: 1500px) {
  body.cps-eshop .cps-products-page [data-kimo-grid],
  body.cps-eshop .cps-products-page .kimo-grid,
  body.cps-eshop .cps-products-page .kimo-grid-carousel {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (min-width: 1880px) {
  body.cps-eshop .cps-products-page [data-kimo-grid],
  body.cps-eshop .cps-products-page .kimo-grid,
  body.cps-eshop .cps-products-page .kimo-grid-carousel {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1499px) and (min-width: 1181px) {
  body.cps-eshop .cps-products-page [data-kimo-grid],
  body.cps-eshop .cps-products-page .kimo-grid,
  body.cps-eshop .cps-products-page .kimo-grid-carousel {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* Mobile commerce discovery exposes Search as a first-class header action. */
body.cps-eshop .cps-mobile-search-trigger { display: none; }
@media (max-width: 992px) {
  body.cps-eshop .cps-mobile-search-trigger { display: inline-flex; }
}

/* Below-the-fold commerce components share the configured content width. */
body.cps-eshop .kimo-reviews-section,
body.cps-eshop .cps-recent,
body.cps-eshop .kimo-mega-inner {
  inline-size: min(100%, var(--cps-container-max-width, 1680px));
  max-inline-size: var(--cps-container-max-width, 1680px) !important;
  margin-inline: auto;
  box-sizing: border-box;
}
body.cps-eshop .kimo-reviews-section,
body.cps-eshop .cps-recent { padding-inline: var(--cps-commerce-gutter) !important; }
body.cps-eshop .kimo-mega-inner { padding-inline: var(--cps-commerce-gutter) !important; }

/* On very large displays use the merchandising density the reference commerce
   layout expects without shrinking cards below a readable size. */
@media (min-width: 1880px) {
  body.cps-eshop .cps-home-products-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  body.cps-eshop .cps-home-category-grid--rail { grid-template-columns: repeat(7, minmax(0,1fr)); }
}

/* Neutral image fallback used by JS-rendered recent/compare/listing surfaces. */
body.cps-eshop .cps-js-image-placeholder {
  display:grid; inline-size:100%; block-size:100%; min-block-size:42px; place-items:center;
  color:var(--cps-muted-text,var(--cps-muted)); background:color-mix(in srgb,var(--cps-primary) 5%,var(--cps-background));
}
body.cps-eshop .cps-js-image-placeholder svg { inline-size:34px; block-size:34px; fill:none; stroke:currentColor; stroke-width:1.6; }