/*
 * Commerce Starter — components.css
 *
 * Owns reusable shared components: announcement bar, header, navigation,
 * buttons/text links, generic image-placeholder cards, the shared
 * `.cs-home-section` shell, footer, newsletter, and non-WooCommerce
 * notices/shared page shells.
 *
 * Loads after foundation.css and before homepage.css: any homepage-scoped
 * correction to a shared component (declared in homepage.css) intentionally
 * relies on loading after this file to win the cascade for the homepage
 * context only, exactly reproducing the override relationship that
 * previously existed between style.css and storefront-reference.css.
 *
 * See docs/PRESENTATION-LAYER-CSS-OWNERSHIP.md for the full ownership model,
 * including the `.cs-header`/`.cs-campaign` legacy persisted-content
 * compatibility families below: they are not current canonical markup, but
 * are retained (not dead code) because earlier releases could have
 * serialized them into stored WordPress content. Do not reintroduce either
 * name as new canonical markup.
 */

/* Announcement bar (rendered by the commerce-starter/announcement block). */
.cs-announcement {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--paper);
  font-size: 0.8125rem;
  padding: 0.55rem clamp(1rem, 4vw, 4rem);
  text-align: center;
}

.cs-announcement p {
  margin: 0;
}

@media (max-width: 767px) {
  .cs-announcement {
    font-size: 0.75rem;
  }
}

/*
 * Legacy persisted-content compatibility.
 * Earlier Commerce Starter versions serialized these classes into templates,
 * template parts and inserted pattern content. Retain until Site Readiness and
 * an approved migration path can prove that stored legacy markup is absent or
 * has been migrated.
 *
 * These are NOT current canonical selectors. The live header markup
 * (parts/header.html) uses .cs-reference-header*; these .cs-header* rules
 * exist only so that a site whose database still contains this earlier
 * header markup (a customized wp_template_part, or pattern content copied
 * into a page before this class name changed) does not lose its layout and
 * responsive styling after upgrading. Do not add .cs-header* to any current
 * template, template part or pattern, and do not merge these declarations
 * with .cs-reference-header* -- their equivalence has not been established
 * and either family could change independently in the future.
 *
 * This block is deliberately positioned before .cs-reference-header* below:
 * the true pre-refactor cascade always loaded style.css (source of
 * .cs-header*) before storefront-reference.css (source of
 * .cs-reference-header*), so any real element that happened to match both a
 * legacy and a live selector must keep resolving the same way. Do not move
 * this block after .cs-reference-header* -- see
 * scripts/check-presentation-css-parity.mjs.
 *
 * Values below are byte-identical to the resolved baseline cascade at
 * commit a809afebf1fabca92787bc71e9b3454b4106e1d2 (the last commit before
 * the parent-neutralization extraction, and the same commit
 * scripts/check-modern-indian-parity.mjs uses as its own BASELINE_SHA) --
 * corrected from an earlier, stale citation of 6ffc04a7664c4c863a384207
 * f9b72e073b1069ce (a superseded milestone commit predating the CSS
 * modularization, whose content does not actually match) by a follow-up
 * focused review of PR #11; independently re-verified via a full-block
 * diff against a809afe with zero differences.
 */
.cs-header {
  border-bottom: 1px solid #e4dacd;
  padding-inline: 0;
  position: relative;
  z-index: 20;
}

.cs-header__utility {
  min-height: 5rem;
  padding-block: 0.75rem;
}

.cs-header__brand {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.cs-header__brand a,
.cs-header__actions a {
  color: var(--wp--preset--color--charcoal);
  text-decoration: none;
}

.cs-header__actions {
  gap: 1rem;
}

.cs-header__actions .wp-block-search {
  margin: 0;
}

.cs-header__search .wp-block-search__inside-wrapper {
  border: 0;
  width: auto;
}

.cs-header__search .wp-block-search__input {
  background: transparent;
  border-width: 0 0 1px;
  min-width: clamp(8rem, 15vw, 14rem);
}

.cs-header__account {
  font-size: 0.875rem;
  margin: 0;
}

.cs-header__primary {
  background: #fff;
  border-top: 1px solid #e4dacd;
  padding-block: 0.8rem;
}

.cs-header__desktop-nav {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-transform: none;
}

.cs-header__mobile-nav {
  display: none;
}

.cs-header__utility,
.cs-header__primary {
  padding-inline: clamp(1rem, 4vw, 4rem);
}

@media (max-width: 1024px) {
  .cs-header__primary,
  .cs-header__account {
    display: none;
  }

  .cs-header__mobile-nav {
    display: flex;
  }

  .cs-header__search .wp-block-search__input {
    min-width: 8rem;
  }
}

@media (max-width: 767px) {
  .cs-header__utility {
    min-height: 3.75rem;
  }

  .cs-header__brand {
    font-size: 1.45rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
  }

  .cs-header__desktop-nav,
  .cs-header__search {
    display: none;
  }

  .cs-header__mobile-nav {
    display: flex;
  }

  .cs-header__actions {
    gap: 0.35rem;
  }

  .cs-header__account {
    display: none;
  }

  .cs-header__search .wp-block-search__input {
    display: none;
  }
}

/* Header (parts/header.html: .cs-reference-header is the live, rendered
 * header). The rules below are this component's SHARED MECHANICS --
 * grid structure, alignment, touch-target sizing, responsive visibility
 * behaviour -- deliberately kept flexible rather than locked to any
 * skin's exact binding-spec dimensions (an independent review of PR #11,
 * finding H3, found this block previously carried the Modern Indian
 * Fashion (AAVANI) binding spec's exact 88px/64px, 76px/32px, 64px/16px
 * row-height/padding sequence -- docs/CLAUDE-DESIGN-IMPLEMENTATION.md's
 * homepage geometry table, Header row -- unconditionally, in the
 * supposedly-neutral parent, with no child override; that exact
 * geometry now lives only in theme/commerce-starter-modern-indian/
 * assets/css/skin.css, restated as a genuine skin-owned design
 * decision, not inherited by a future skin merely by extending this
 * parent).
 *
 * A follow-up focused review of the H3 correction found the same problem
 * one level down, in typography: `.cs-reference-header__brand`'s 28px/
 * 22px font-size and .02em letter-spacing, `.cs-reference-header__nav`'s
 * 13px font-size and .04em letter-spacing, `.cs-reference-header__actions`'
 * 22px gap, and the account/mini-cart 13px font-size were traced to exact,
 * literal values in the original AAVANI binding design source
 * (reference-input/AAVANI-claude-design.zip, "AAVANI Storefront.dc.html"),
 * not independently-chosen neutral defaults -- the same ownership problem
 * as the geometry above, just not itemized in docs/CLAUDE-DESIGN-
 * IMPLEMENTATION.md's summary table. Those exact values now live only in
 * the Modern Indian child's skin.css; the values below are restrained
 * neutral defaults. The tablet/mobile actions gap (12px) was checked
 * against the same AAVANI source and does NOT match it (the source's
 * mobile actions gap is 4px) -- it is a pre-existing, genuinely neutral
 * value and was left unchanged. */
.cs-reference-header {
  align-items: center;
  border-bottom: 1px solid var(--wp--custom--border--subtle);
  box-sizing: border-box;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(9rem, auto) minmax(0, 1fr) minmax(12rem, auto);
  min-height: 3.5rem;
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.5rem, 4vw, 3rem);
  position: relative;
  z-index: 20;
}

.cs-reference-header__brand {
  font-family: var(--wp--preset--font-family--editorial);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
  margin: 0;
}

.cs-reference-header__brand a,
.cs-reference-header__nav a {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
}

.cs-reference-header__nav {
  font-family: var(--wp--preset--font-family--interface);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: uppercase;
}

.cs-reference-header__nav .wp-block-navigation-item__content {
  border-bottom: 2px solid transparent;
  padding: 4px 0;
}

.cs-reference-header__nav .wp-block-navigation-item__content:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

.cs-reference-header__actions {
  gap: 1rem;
  margin: 0;
}

.cs-reference-header__search {
  margin: 0;
}

.cs-reference-header__search .wp-block-search__button {
  box-sizing: border-box;
  min-height: 44px;
  min-width: 44px;
  padding: 10px;
}

.cs-reference-header__search .wp-block-search__inside-wrapper {
  border: 0;
  padding: 0;
}

.cs-reference-header__search .wp-block-search__input {
  border-width: 0 0 1px;
  min-width: 8rem;
  width: 10rem;
}

.cs-reference-header__account,
.cs-reference-header__actions .wc-block-mini-cart {
  font-family: var(--wp--preset--font-family--interface);
  font-size: .875rem;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .cs-reference-header {
    gap: 1rem;
    grid-template-columns: auto 1fr auto;
    min-height: 3rem;
    padding: clamp(.75rem, 2vw, 1rem) clamp(1rem, 3vw, 2rem);
  }

  .cs-reference-header__actions {
    gap: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-reference-header__nav:has(.wp-block-navigation__responsive-container-open) {
    display: none;
  }

  .cs-reference-header__actions {
    grid-column: 3;
  }
}

@media (max-width: 767px) {
  .cs-reference-header {
    grid-template-columns: 1fr auto 1fr;
    min-height: 2.75rem;
    padding: clamp(.5rem, 2vw, .75rem) 1rem;
  }

  .cs-reference-header__brand {
    font-size: 1.125rem;
    grid-column: 2;
    grid-row: 1;
  }

  .cs-reference-header__nav {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .cs-reference-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  .cs-reference-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    align-items: center;
    display: flex;
    min-height: 44px;
    min-width: 44px;
  }

  .cs-reference-header__actions {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .cs-reference-header__account {
    display: none;
  }
}

/* Buttons and text links (commerce-starter/shop-link block; also used outside the homepage). */
.cs-shop-link--text {
  border-bottom: 1.5px solid currentColor;
  color: var(--wp--preset--color--ink);
  font-size: .875rem;
  font-weight: 700;
  padding-block: .75rem .2rem;
  text-decoration: none;
}

.cs-shop-link--button {
  background: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--radius--control);
  color: var(--wp--preset--color--paper);
  display: inline-block;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}

/* Generic image-placeholder card (reused wherever a preset image has no merchant asset yet). */
.cs-image-placeholder {
  align-items: center;
  background-image: linear-gradient(135deg, rgba(255,255,255,.12) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.12) 75%, transparent 75%);
  background-size: 28px 28px;
  display: flex;
  justify-content: center;
  text-align: center;
}

.cs-image-placeholder p,
.cs-image-placeholder--hero p {
  background: color-mix(in srgb, var(--wp--preset--color--paper) 88%, transparent);
  font-size: .75rem;
  margin: 1rem;
  padding: .55rem .75rem;
}

.cs-preset-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.cs-preset-image--hero,
.cs-image-placeholder--hero {
  min-height: min(74vh, 760px);
}

.cs-preset-image--hero {
  object-position: center;
}

/* Shared homepage section shell (padding rhythm + inner max-width, reused by every homepage section). */
.cs-home-section h2 {
  font-size: clamp(2rem, 3vw, 3rem);
}

.cs-home-section > :first-child {
  margin-block-start: 0;
}

.cs-home-section > :last-child {
  margin-block-end: 0;
}

.cs-home-section > :where(.wp-block-heading, .wp-block-group, .wp-block-columns, .woocommerce, .cs-catalog-placeholder),
.cs-social > :where(.wp-block-heading, p, .wp-block-columns),
.cs-stories > :where(.wp-block-heading, .wp-block-columns) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 1280px;
  width: 100%;
}

.cs-catalog-placeholder {
  color: var(--wp--preset--color--muted);
  margin-block: 2rem 0;
  text-align: center;
}

@media (max-width: 767px) {
  .cs-home-section {
    padding-block: 3.25rem;
  }

  .cs-home-section > :where(.wp-block-heading, .wp-block-group, .wp-block-columns, .woocommerce, .cs-catalog-placeholder),
  .cs-social > :where(.wp-block-heading, p, .wp-block-columns),
  .cs-stories > :where(.wp-block-heading, .wp-block-columns) {
    max-width: 100%;
  }
}

/* Must stay after the max-width:767px block above: the true baseline
 * cascade declared this later (in a trailing corrections section), so it
 * wins over the mobile override above at every width, including narrow
 * ones. Do not move earlier -- see scripts/check-presentation-css-parity.mjs. */
.cs-home-section {
  padding-block: clamp(3.25rem, 5vw, 4.5rem);
}

/* Newsletter (commerce-starter/newsletter-action block; base component, corrected for the homepage in homepage.css). */
.cs-newsletter {
  padding: clamp(2.5rem, 5vw, 4.5rem) max(clamp(1rem, 4vw, 4rem), calc((100vw - 1280px) / 2));
}

.cs-newsletter h2,
.cs-newsletter p {
  margin-left: 0 !important;
  max-width: 38rem;
}

.cs-newsletter__actions {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cs-newsletter__field-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cs-newsletter__input {
  background: var(--wp--preset--color--white, #fff);
  border: 1px solid currentColor;
  border-radius: var(--wp--custom--radius--control, 4px);
  color: var(--wp--preset--color--ink, #1e1e1e);
  flex: 1 1 auto;
  font: inherit;
  min-height: 2.75rem;
  min-width: 0;
  padding-inline: 0.9rem;
  width: 100%;
}

.cs-newsletter__submit {
  white-space: nowrap;
  width: 100%;
}

@media (min-width: 768px) {
  .cs-newsletter__field-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cs-newsletter__input {
    flex: 1 1 10rem;
    min-width: 10rem;
    width: auto;
  }

  .cs-newsletter__submit {
    width: auto;
  }
}

.cs-newsletter__hp {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.cs-newsletter__notice {
  font-size: 0.875rem;
  margin: 0;
}

.cs-newsletter__notice--error {
  color: var(--wp--preset--color--error, #b3261e);
}

/* Footer. */
.cs-footer {
  margin-block-start: 0;
  padding: 56px 64px 32px;
}

.cs-footer__grid {
  align-items: flex-start;
  display: grid;
  gap: 32px;
  grid-template-columns: 1.4fr 1fr 1fr;
  max-width: none !important;
}

.cs-footer__grid:has(> .cs-footer__contact) {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}

.cs-footer__navigation {
  font-size: .8rem;
}

.cs-footer__contact ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cs-footer__contact li + li {
  margin-top: .65rem;
}

.cs-footer__contact a {
  color: inherit;
}

.cs-footer__legal {
  color: color-mix(in srgb, var(--wp--preset--color--paper) 62%, transparent);
  gap: 1rem;
  max-width: none !important;
}

.cs-footer__legal p {
  margin: 0;
}

.cs-footer .wp-block-navigation {
  align-items: flex-start;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .cs-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }

  .cs-footer__contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .cs-footer {
    padding: 36px 16px 24px;
  }

  .cs-footer__grid {
    grid-template-columns: 1fr;
  }

  .cs-footer__grid > :first-child {
    grid-column: auto;
  }

  .cs-footer__contact {
    grid-column: auto;
  }
}

/* Shared generic content-page shell (support centre, FAQ, policy pages,
 * and the plain WordPress page template). Guest order tracking is
 * WooCommerce-visible and is owned by commerce.css instead. */
.cs-info-page {
  padding-block: clamp(2rem, 6vw, 5rem);
}

.cs-info-page > h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
}

.cs-page {
  padding-block: clamp(2rem, 6vw, 5rem);
}

.cs-page > .wp-block-post-title {
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}

.cs-support-options {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: 2rem;
}

.cs-support-option {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--custom--border--subtle);
  color: var(--wp--preset--color--ink);
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  text-decoration: none;
}

.cs-support-option strong {
  font-family: var(--wp--preset--font-family--editorial);
  font-size: 1.35rem;
}

.cs-support-option span,
.cs-support-options__empty {
  color: var(--wp--preset--color--muted);
  font-size: 0.875rem;
}

.cs-faq .wp-block-details {
  border-bottom: 1px solid var(--wp--custom--border--subtle);
  margin: 0;
  padding-block: 1rem;
}

.cs-faq .wp-block-details summary {
  cursor: pointer;
  font-weight: 700;
  padding-inline-end: 2rem;
}

.cs-policy h2 {
  margin-block-start: 2.5rem;
}

@media (max-width: 767px) {
  .cs-support-options {
    grid-template-columns: 1fr;
  }
}

/*
 * Carousel primitive: shared corrections to Commerce Starter Core's
 * generic `.cs-carousel__track` progressive enhancement (plugins/
 * commerce-starter-core/assets/css/carousel.css), which every skin's New
 * Arrivals, Bestsellers, Customer Stories, Social gallery and Related
 * Products sections share via the same enhance() pass (carousel.js).
 * Loads after carousel.css (see the enqueue order in class-storefront-
 * blocks.php), so this plain rule wins the cascade without needing
 * !important -- neither declaration below carries it upstream.
 *
 * Root cause this fixes: `.cs-carousel__track` sets `overflow-x: auto`
 * with `scrollbar-width: thin`, so on any section genuinely wider than
 * its visible-card count (for example New Arrivals/Bestsellers at tablet
 * widths, where 4 cards are seeded but only 2 are configured visible),
 * Chromium and Firefox both paint a native horizontal scrollbar directly
 * beneath the track -- a second, visually competing navigation affordance
 * alongside the carousel's own prev/next buttons ("double navigation
 * mechanism", confirmed live at 768/1024px). The track must stay
 * genuinely scrollable (touch drag, keyboard, and the existing buttons
 * all still call track.scrollLeft) -- only the native browser scrollbar
 * chrome is hidden, on both the modern standard property and the
 * WebKit/Blink-specific pseudo-element older engines still require.
 */
.cs-carousel__track {
  scrollbar-width: none;
}

.cs-carousel__track::-webkit-scrollbar {
  display: none;
}