/* Mobile refinements loaded after the typography layer. */
@media (max-width: 960px) {
  .gandi-header__main > *,
  .gandi-hero__inner > *,
  .gandi-catalog-toolbar > *,
  .gandi-single-product__main > * { min-inline-size: 0; }
  .gandi-header .custom-logo { max-inline-size: 150px; max-block-size: 48px; inline-size: auto; block-size: auto; }
}
@media (max-width: 760px) {
  body.gandi-shiraz-theme { font-size: 1rem; padding-block-end: calc(72px + env(safe-area-inset-bottom)); }
  .gandi-container { width: min(calc(100% - 28px), var(--gandi-container)); }
  .gandi-main { --gandi-section-space: 42px; }
  .gandi-announcement { font-size: .75rem; }
  .gandi-hero__media { aspect-ratio: 16 / 10; margin-inline: 0; }
  .gandi-hero__copy { padding-block: 26px 32px; }
  .gandi-hero__copy h1 { font-size: clamp(1.6rem, 6.8vw, 2rem); line-height: 1.55; }
  .gandi-hero__text { font-size: .95rem; }
  .gandi-hero__actions { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .gandi-hero__actions .gandi-button { padding-inline: 16px; min-block-size: 44px; font-size: .85rem; }
  .gandi-section-heading { flex-wrap: wrap; margin-block-end: 20px; }
  .gandi-section-heading h2 { font-size: clamp(1.35rem, 5.5vw, 1.7rem); }
  .gandi-section-heading > * { min-inline-size: 0; }
  .gandi-kicker { font-size: .75rem; }
  .gandi-editorial-card { block-size: auto; aspect-ratio: 4 / 3; }
  .gandi-editorial-card__overlay { padding: 20px; }
  .gandi-editorial-card__overlay h2 { font-size: 1.5rem; }
  .gandi-category-card__copy { flex-wrap: wrap; gap: 4px; }
  .gandi-category-card__copy strong { font-size: .9rem; }
  .gandi-category-card--large .gandi-category-card__copy strong { font-size: 1.2rem; }
  .gandi-product-grid, .gandi-product-grid--archive { gap: 10px; }
  .gandi-product-card__body { padding: 12px 10px; min-block-size: 160px; }
  .gandi-product-card__title { font-size: .9rem; line-height: 1.65; }
  .gandi-product-card__category { font-size: .7rem; }
  .gandi-sale-badge, .gandi-stock-badge { font-size: .68rem; padding: 4px 6px; }
  .gandi-product-card__footer { flex-wrap: wrap; align-items: center; gap: 8px; }
  .gandi-product-card__price { min-inline-size: 0; max-inline-size: 100%; flex: 1 1 100%; line-height: 1.8; }
  .gandi-product-card__price .price,
  .gandi-product-card__price > span,
  .gandi-product-card__price .amount { font-size: .82rem; white-space: normal; overflow-wrap: anywhere; }
  .gandi-product-card__price del { font-size: .72rem; }
  .gandi-product-card__price .woocommerce-Price-currencySymbol { font-size: .72rem; }
  .gandi-card-link { inline-size: 40px; block-size: 40px; }
  .gandi-brand-story__media { min-block-size: 0; aspect-ratio: 4 / 3; }
  .gandi-brand-story__copy { padding: 28px 20px; }
  .gandi-brand-story__copy h2 { font-size: 1.6rem; }
  .gandi-catalog-toolbar { gap: 10px; }
  .gandi-catalog-toolbar select { inline-size: 100%; }
  .gandi-shiraz-theme input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  .gandi-shiraz-theme select,
  .gandi-shiraz-theme textarea { font-size: 16px; max-inline-size: 100%; }
  .gandi-product-page .summary .price { font-size: 1.25rem; overflow-wrap: anywhere; }
  .gandi-product-page .summary .price .amount { white-space: normal; }
  .gandi-mobile-bottom-nav { padding-block-end: calc(8px + env(safe-area-inset-bottom)); }
  .gandi-mobile-bottom-nav a { font-size: .7rem; min-block-size: 44px; }
  .gandi-page-hero h1 { font-size: 1.65rem; }
}
@media (max-width: 360px) {
  .gandi-header__main { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 6px; }
  .gandi-wordmark strong { font-size: 1.05rem; letter-spacing: .1em; }
  .gandi-product-card__body { padding-inline: 8px; }
}

/*
 * Banner artwork fix.
 *
 * The category grid sets its own row height (grid-auto-rows: 250px in
 * storefront.css) and .gandi-category-card__media uses block-size:100%. That
 * makes the media height *definite*, and a definite height silently disables
 * aspect-ratio -- so the portrait ratios declared for the small screen never
 * took effect. The tiles stayed 250px tall whatever the column width, and
 * because the banner images are landscape (1000x760) object-fit:cover was
 * cutting 26-30% of the artwork away on tablets and laptops, and 47% on
 * phones.
 *
 * Letting the media size itself from the image ratio instead keeps the whole
 * artwork at every width, and gives the large tile the same aspect as the
 * small ones -- exactly what the desktop grid already produced above 1400px.
 */
.gandi-category-grid { grid-auto-rows: auto; }
.gandi-category-card__media,
.gandi-category-card--large .gandi-category-card__media {
  block-size: auto;
  aspect-ratio: 1000 / 760;
}

/*
 * Hero: below 760px it becomes a full-width stacked banner, so let the
 * picture define its own height and stop cover-cropping it.
 * (Above 760px the hero is an intentional fixed-height panel with a covering
 * image and is left exactly as designed.)
 */
@media (max-width: 760px) {
  .gandi-hero__media { aspect-ratio: auto; block-size: auto; }
  .gandi-hero__media picture,
  .gandi-hero__media img { block-size: auto; max-block-size: none; }
}

/*
 * Mobile opening: run the hero banner edge-to-edge.
 *
 * The hero sits in .gandi-container, so the banner was inset 14px either side
 * with cream strips around it -- it read as a small framed photo rather than
 * the opening of the page. Give the hero container the full viewport width and
 * put the inset back on the copy, so the artwork is full-bleed while the
 * headline keeps the page's normal margins.
 */
@media (max-width: 760px) {
  .gandi-hero__inner { width: 100%; margin-inline: 0; }
  .gandi-hero__copy { padding-inline: 14px; }
}
@media (max-width: 520px) {
  .gandi-hero__copy { padding-inline: 10px; }
}

/*
 * Cart count badge.
 *
 * Below 1181px .gandi-action-link collapses to a fixed 44px (40px under 520px)
 * square, but .gandi-cart-count stayed an inline flex item. It could not grow
 * past its 18px minimum, so the pill kept its size and the number spilled out
 * of it -- and because icon + gap + badge no longer fit the square, the row
 * overflowed on BOTH sides: the badge went outside the button's outer edge and
 * the cart icon was pushed past the opposite edge.
 *
 * Keep the pill at its natural width, and anchor it to the button's inline-end
 * corner so it is taken out of the row entirely.
 */
.gandi-cart-count { flex: 0 0 auto; }

@media (max-width: 1180px) {
  .gandi-action-link.gandi-cart-link { position: relative; }
  .gandi-action-link.gandi-cart-link .gandi-cart-count {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    min-inline-size: 16px;
    block-size: 16px;
    padding-inline: 0.25rem;
    font-size: 0.6rem;
    line-height: 1;
    z-index: 2;
  }
}