/* Mobile audit: readable commerce copy, comfortable controls, and intrinsic-safe grids.
   Loaded after component styles so narrow-screen rules have one clear owner. */
.product-card .product-brand { white-space: normal; overflow: visible; }
.product-brand .product-label {
  position: static; display: block; max-width: none; margin-top: 4px; padding: 0;
  font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: 0;
  text-transform: none; background: transparent; border: 0;
}
@media (max-width: 760px) {
  .site-header .header-main { column-gap: 8px; }
  .site-header .header-main .mobile-toggle,
  .site-header .header-actions .icon-button {
    width: 44px; min-width: 44px; height: 44px; padding: 10px; flex: none;
  }
  .site-header .header-actions .language-control select { min-height: 44px; }
  .site-header .header-main .header-actions { gap: 4px; }
  .site-header .header-search button { width: 44px; height: 44px; top: 2px; }
  .site-header .header-search input { min-height: 48px; padding-right: 48px !important; }

  .product-card .product-save { width: 44px; height: 44px; }
  .product-card .product-quick { min-height: 44px; font-size: 12px; line-height: 1.4; }
  .product-card .compare-toggle { min-height: 44px; font-size: 12px; padding-block: 10px; }
  .product-card .product-copy h3 { font-size: 14px; line-height: 1.5; display: block; height: auto; min-height: 0; max-height: none; overflow: visible; -webkit-line-clamp: unset; }
  .product-card .product-brand { font-size: 11px; }
  .product-card .product-meta { font-size: 12px; line-height: 1.6; max-height: none; overflow: visible; }
  .product-card .price-prefix { font-size: 12px; }
  .product-card .price-amount { font-size: 16px; }
  .product-card .product-label { font-size: 11px; }

  :is(.customer-online-links,.faq-list) summary,
  .text-button, .shop-price-apply, .shop-price-reset { min-height: 44px; }
  .customer-online-links summary { padding-block: 12px; }
  .shop-price-apply, .shop-price-reset { font-size: 13px; }
  .product-section-nav button { min-height: 44px; font-size: 13px; }
  .quantity, .cart-line .quantity, .cart-item .quantity { min-height: 44px; }
  .quantity button, .cart-line .quantity button, .cart-item .quantity button {
    width: 44px; min-width: 44px; min-height: 42px;
  }

  .utility-layout { grid-template-columns: minmax(0,1fr); }
  .utility-layout > *, .utility-card form, .utility-card .form-field { min-width: 0; }
  .utility-card { padding: 20px; }
  .utility-card h2 { font-size: 24px; }
  .utility-card :is(input,select,textarea) { width: 100%; min-width: 0; max-width: 100%; }
  .customer-hub-grid { grid-template-columns: minmax(0,1fr); }
  .customer-hub-grid h3 { font-size: 18px; }
  .customer-hub-grid p { font-size: 14px; }
  .customer-hub-grid > a > span { font-size: 13px; }

  #main :is(.catalog-note,.care-small,.customer-small,.checkout-note,.checkout-consent,
    .product-preview-note,.product-gallery-note,.product-price-note,.product-assurance,
    .account-preview-note,.explore-disclaimer,.adviser-small,.adviser-sources p,
    .customer-hub-note p,.customer-account-availability p,.customer-online-links > p),
  #overlay-root :is(.catalog-note,.checkout-note,.product-preview-note),
  #footer .customer-small { font-size: 13px; line-height: 1.65; }
  .form-field, .form-field label, .form-field > span,
  .checkout-layout .form-field, .filter-field > span { font-size: 14px; }
  .checkout-choice, .checkout-choice strong, .checkout-steps { font-size: 14px; }
  .checkout-choice small, .checkout-section > small, .checkout-draft-note small,
  .checkout-section .checkout-delivery-note { font-size: 13px; }
  .shop-home-hero .hero-copy p { font-size: 15px; line-height: 1.65; }
  .footer-legal nav a { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }

  /* Long values (INCI names, shared URLs, customer text) need an emergency break.
     Ordinary headings and prose keep their natural word boundaries. */
  body :is(.product-inci,.product-source-details dd,.adviser-generated,.adviser-asked p,
    .adviser-evidence-links a,.adviser-sources a,.customer-message,.receipt .section-head h3) {
    overflow-wrap: anywhere !important;
  }
}
@media (max-width: 520px) {
  /* These destinations remain in the menu; preserve full-size primary controls. */
  .site-header .header-actions a[href$="#/account"],
  .site-header .header-actions a[href$="#/saved"] { display: none; }
  .site-header .header-main .wordmark > .kcj-logo { width: clamp(120px,37vw,170px); }
  .empty-state h1 { font-size: 30px; }
}

@media (max-width: 360px) {
  .catalog-head h1 { font-size: 28px; line-height: 1.2; }
}

@media (max-width: 760px) {
  .modal-close.icon-button, .bag-drawer .modal-close, .shop-filter-close {
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  }
}
@media (max-width: 520px) {
  .cart-line, .bag-lines .cart-line {
    position: relative; grid-template-columns: 60px minmax(0,1fr); gap: 12px;
  }
  .cart-line-info > .eyebrow { display: block; padding-right: 76px; min-height: 20px; font-size: 11px; }
  .cart-line > strong { position: absolute; top: 23px; right: 0; padding-top: 0; font-size: 13px; }
  .cart-line-info > a, .bag-lines .cart-line-info > a { font-size: 14px; }
  .cart-line-info > small { font-size: 12px; }
  .cart-line-info .text-button { font-size: 13px; }
}
/* Douglas/Sephora mobile benchmark: quiet imagery, clear text hierarchy,
   two-column browsing and separate secondary actions. */
@media (max-width: 760px) {
  .catalog-head h1 { font-size: clamp(26px,7vw,30px); line-height: 1.2; }
  .product-card .product-visual { display: grid; grid-template-rows: auto auto; aspect-ratio: auto; }
  .product-card .product-image-link { aspect-ratio: 1; height: auto; }
  .product-card .product-quick {
    position: static; width: 100%; border: 0; border-top: 1px solid var(--line);
    border-radius: 0; margin: 0; background: #fff; opacity: 1; transform: none;
  }
  .product-card .product-brand { font-size: 12px; }
  .product-card .product-copy h3 { font-size: clamp(14px,3.8vw,16px); }
  .product-card .product-bottom { gap: 8px; }
}