/* ===== Responsive Layout ===== */
@media (max-width: 1180px) {
	:root {
		--header-height: 82px;
	}

	.navbar-main {
		grid-template-columns: minmax(132px, 200px) minmax(240px, 1fr) auto;
		gap: 14px;
	}

	.header-actions {
		gap: 6px;
	}

	.product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	:root {
		--header-height: 82px;
	}

	.navbar {
		gap: 8px;
	}

	.navbar-main {
		grid-template-columns: minmax(126px, 188px) minmax(220px, 1fr) auto;
	}

	.brand-logo--header {
		--brand-logo-font-size: clamp(0.96rem, 1.55vw, 1.08rem);
		--brand-logo-tracking: 0.21em;
	}

	.header-action,
	.cart-icon {
		--tap-size: 40px;
	}

	.section-header {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.product-detail-view {
		grid-template-columns: 1fr;
	}

	.product-detail-media .product-image-container {
		min-height: auto;
	}
}

@media (max-width: 768px) {
	:root {
		--header-height: 142px;
		--container-padding: 16px;
	}

	.header {
		height: var(--header-height);
		min-height: var(--header-height);
	}

	.navbar {
		position: relative;
		gap: 10px;
		padding-block: 10px;
	}

	.navbar-main {
		grid-template-columns: minmax(112px, 1fr) auto;
		grid-template-areas: "logo actions" "search search";
		gap: 10px 12px;
	}

	.navbar-main > .brand-logo {
		grid-area: logo;
	}

	.header-search {
		grid-area: search;
		width: 100%;
		height: 40px;
		justify-self: stretch;
	}

	.header-actions {
		grid-area: actions;
		justify-self: end;
	}

	.mobile-menu-toggle {
		position: relative;
		display: inline-grid;
	}

	.mobile-menu-toggle i {
		display: none;
	}

	.mobile-menu-toggle::before,
	.mobile-menu-toggle::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 18px;
		height: 2px;
		border-radius: var(--radius-pill);
		background: currentColor;
		transition: transform var(--duration-base) var(--ease-smooth), box-shadow var(--duration-base) var(--ease-smooth);
	}

	.mobile-menu-toggle::before {
		transform: translate(-50%, -6px);
		box-shadow: 0 6px 0 currentColor;
	}

	.mobile-menu-toggle::after {
		transform: translate(-50%, 6px);
	}

	.mobile-menu-toggle.active::before {
		transform: translate(-50%, 0) rotate(45deg);
		box-shadow: 0 0 0 currentColor;
	}

	.mobile-menu-toggle.active::after {
		transform: translate(-50%, 0) rotate(-45deg);
	}

	.nav-links,
	.header-menu {
		width: min(88vw, 360px);
	}

	.nav-links a {
		min-height: 56px;
	}

	.hero.hero--banner {
		aspect-ratio: 4 / 3;
		min-height: 0;
		padding: 0;
	}

	.product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.catalog-card-meta {
		min-height: 36px;
		padding: 7px 6px 0;
	}

	.product-detail-page {
		padding-block: calc(var(--header-height-live, var(--header-height)) + 22px) 72px;
	}

	.product-detail-view {
		gap: 24px;
	}

	.product-detail-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.product-detail-main-media .product-placeholder {
		width: min(72%, 260px);
	}

	.product-gallery-thumbs {
		gap: 9px;
	}

	.add-to-cart-btn {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.hero.hero--banner {
		aspect-ratio: 3 / 4;
	}

	.product-detail-rating {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}
}

@media (max-width: 480px) {
	:root {
		--header-height: 136px;
		--tap-size: 38px;
	}

	.navbar-main {
		gap: 8px 10px;
	}

	.brand-logo--header {
		--brand-logo-font-size: clamp(0.86rem, 3.6vw, 0.98rem);
		--brand-logo-tracking: 0.19em;
	}

	.header-actions {
		gap: 4px;
	}

	.header-search-input {
		font-size: 0.88rem;
		padding-left: 12px;
	}

	.products {
		padding-block: 50px 70px;
	}

	.section-title h2 {
		font-size: 2rem;
	}

	.product-grid {
		gap: 10px;
	}

	.product-image-container {
		aspect-ratio: 1 / 1;
	}

	.product-placeholder {
		width: min(76%, 170px);
		gap: 8px;
	}

	.product-placeholder-logo {
		width: clamp(42px, 44%, 78px);
	}

	.product-price {
		font-size: 0.9rem;
	}

	.size-options {
		gap: 6px;
	}

	.size-btn {
		min-width: 58px;
		height: 36px;
		padding-inline: 10px;
		font-size: 0.78rem;
	}

	.product-status-chip {
		min-height: 18px;
		padding: 3px 6px;
		font-size: 0.54rem;
	}

	.product-gallery-thumbs {
		gap: 7px;
	}

	.cart-sidebar {
		width: 100%;
		max-width: 100%;
	}

	.cart-header,
	.cart-footer,
	.cart-items {
		padding-inline: 16px;
	}

	.cart-item {
		grid-template-columns: 68px minmax(0, 1fr) 32px;
	}

	.cart-item-visual {
		width: 68px;
		height: 78px;
	}

	.cart-item-logo {
		width: 32px;
	}

	.account-auth-popup {
		place-items: center;
		padding: 12px;
	}

	.account-auth-card {
		width: min(100%, 420px);
		max-height: min(680px, calc(100dvh - 24px));
		padding: 24px 18px 18px;
		border-radius: 22px;
	}

	.account-auth-identity {
		gap: 4px;
		padding: 12px 30px 2px;
	}

	.account-auth-logo {
		width: 50px;
		height: 50px;
	}

	.account-auth-wordmark {
		width: min(180px, 74%);
	}

	.account-auth-input,
	.account-auth-submit,
	.account-google-fallback {
		min-height: 44px;
	}
}

@media (max-width: 360px) {
	:root {
		--container-padding: 12px;
	}

	.header-action,
	.cart-icon {
		--tap-size: 36px;
	}

	.header-actions {
		gap: 2px;
	}

	.brand-logo--header {
		--brand-logo-font-size: clamp(0.8rem, 3.8vw, 0.9rem);
		--brand-logo-tracking: 0.17em;
	}

	.header-search {
		height: 38px;
	}

	.product-grid {
		gap: 8px;
	}
}

@media (max-width: 480px) {
	.nav-links,
	.header-menu {
		width: min(90vw, 330px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.account-auth-popup,
	.account-auth-card,
	.account-auth-close,
	.account-auth-input,
	.account-auth-submit,
	.account-google-fallback,
	.nav-links,
	.mobile-menu-toggle::before,
	.mobile-menu-toggle::after,
	.cart-sidebar,
	.cart-scrim {
		transition: none;
	}
}


/* ===== Cross-device stability guards ===== */

@media (max-width: 768px) {
	.header {
		height: var(--header-height);
		min-height: var(--header-height);
		background: var(--header-surface-solid);
		transition: none;
	}

	.header.is-scrolled,
	.header.is-compact {
		background: var(--header-surface-solid);
		border-color: var(--header-divider);
		box-shadow: none;
	}

	.navbar {
		min-height: 100%;
	}

	.navbar-main {
		min-width: 0;
	}

	.navbar-main > .brand-logo,
	.header-actions,
	.header-search {
		min-width: 0;
	}

	.header .logo-wordmark-img {
		overflow: hidden;
		text-overflow: clip;
	}

	.section-header {
		gap: 10px;
		margin-bottom: 26px;
	}

	.product-card-link,
	.product-detail-view,
	.product-detail-info {
		min-width: 0;
	}
}

@media (max-width: 520px) {
	.header-search-input {
		padding-right: 78px;
	}

	.header-search-clear {
		right: 48px;
	}

	.header-search-button {
		right: 5px;
		width: 34px;
	}
}

@media (max-width: 390px) {
	:root {
		--container-padding: 12px;
	}

	.navbar-main {
		gap: 8px;
	}

	.header-action,
	.cart-icon {
		--tap-size: 35px;
	}

	.header-action-icon {
		width: 20px;
		height: 20px;
	}

	.cart-icon .header-action-icon {
		width: 21px;
		height: 21px;
	}

	.cart-count,
	.header-action-count {
		top: -1px;
		right: -2px;
		min-width: 16px;
		height: 16px;
		font-size: 0.6rem;
	}
}

@media (max-width: 340px) {
	.product-grid {
		grid-template-columns: 1fr;
	}

	.product-placeholder {
		width: min(68%, 190px);
	}
}

/* Guest mobile header: no reserved search row before Google login. */
@media (max-width: 768px) {
	html:not(.is-google-authenticated) {
		--header-height: 74px;
	}

	html:not(.is-google-authenticated) .navbar-main {
		grid-template-areas: "logo actions";
		grid-template-columns: minmax(112px, 1fr) auto;
		gap: 0 12px;
	}

	html:not(.is-google-authenticated) .navbar {
		gap: 0;
	}
}

@media (max-width: 390px) {
	html:not(.is-google-authenticated) {
		--header-height: 70px;
	}
}

/* Guest desktop/tablet header keeps actions pinned right when search is locked. */
@media (min-width: 769px) {
	html:not(.is-google-authenticated) .navbar-main {
		grid-template-columns: minmax(140px, 230px) minmax(0, 1fr) auto;
	}

	html:not(.is-google-authenticated) .header-actions {
		grid-column: 3;
	}
}

@media (min-width: 769px) and (max-width: 1180px) {
	html:not(.is-google-authenticated) .navbar-main {
		grid-template-columns: minmax(126px, 200px) minmax(0, 1fr) auto;
	}
}


/* ===== Ultra Minimal Global Mobile Safeguards ===== */
@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  main,
  section,
  article,
  aside,
  header,
  footer,
  nav,
  div {
    min-width: 0;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  .section,
  .product-section,
  .product-detail-section,
  .cart-page,
  .account-page,
  .static-page {
    padding-top: clamp(22px, 7vw, 42px);
    padding-bottom: clamp(32px, 9vw, 56px);
  }

  .section-header,
  .product-section-header,
  .static-page-header,
  .account-page-header {
    gap: 10px;
    margin-bottom: 18px;
  }

  .section-header h1,
  .section-header h2,
  .product-section-header h1,
  .product-section-header h2,
  .static-page-header h1,
  .account-page-header h1 {
    line-height: 0.98;
    letter-spacing: -0.06em;
  }

  .section-header p,
  .product-section-header p,
  .static-page-header p,
  .account-page-header p {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  .btn,
  button,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  .btn {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 0.78rem;
  }

  .cart-sidebar,
  .account-auth-card,
  .modal-content,
  .drawer-panel {
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 390px) {
  :root {
    --container-padding: 12px;
  }

  .container {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .section-header p,
  .product-section-header p,
  .static-page-header p,
  .account-page-header p {
    font-size: 0.76rem;
  }

  .btn {
    min-height: 38px;
    padding-inline: 12px;
  }
}