/* ==========================================================================
   PATOTSALERA — responsive behaviour
   ========================================================================== */

@media (max-width: 1260px) {
  .container { width: calc(100% - 48px); }
  .desktop-nav { gap: 16px; }
  .nav-link { font-size: 11.5px; }
  .hero-title { font-size: clamp(48px, 5.5vw, 68px); }
  .hero-copy { padding-left: 8px; padding-right: 12px; }
  .hero-visual { min-height: 620px; }
  .floating-product { width: 168px; }
  .floating-product:nth-child(1) { left: 2.2%; }
  .floating-product:nth-child(2) { right: 2.2%; }
  .floating-product:nth-child(3) { left: 2%; }
  .floating-product:nth-child(4) { right: 2%; }
  .promo-copy { max-width: 56%; }
  .promo-collection-copy { max-width: 63%; }
  .best-info { padding-left: 12px; }
}

@media (max-width: 1100px) {
  .announcement-bar { font-size: 9px; }
  .header-inner { gap: 18px; }
  .desktop-nav { gap: 14px; }
  .brand-word { font-size: 14px; }
  .hero { gap: 22px; min-height: 590px; }
  .hero-title { font-size: clamp(47px, 5.4vw, 60px); }
  .hero-description { max-width: 410px; font-size: 12.5px; }
  .hero-visual { min-height: 590px; }
  .hero-copy { padding-bottom: 78px; }
  .benefit { padding: 10px 13px; gap: 9px; }
  .benefit-icon { width: 33px; height: 33px; }
  .benefit h3 { font-size: 10.5px; }
  .benefit p { font-size: 8px; }
  .best-info h3 { font-size: 16px; }
  .best-desc { display: none; }
  .best-card { min-height: 200px; }
  .best-add { padding: 0 9px; font-size: 7px; }
  .footer-main { grid-template-columns: 1.5fr 1fr 1fr; row-gap: 38px; }
  .footer-brand { grid-column: 1 / 2; }
  .footer-col:nth-of-type(4) { grid-column: 1 / 2; }
  .shop-layout { grid-template-columns: 215px 1fr; gap: 28px; }
  .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; }
}

@media (max-width: 1024px) {
  .container { width: calc(100% - 40px); }
  .desktop-nav { display: none; }
  .mobile-menu-button { display: inline-flex; }
  .header-inner { min-height: 71px; }
  .header-actions { margin-left: auto; }
  .brand { margin-right: auto; }
  .cart-button { display: none; }
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
  }
  .hero-copy { max-width: 740px; padding: 38px 0 50px; }
  .hero-title { max-width: 700px; font-size: clamp(53px, 7.5vw, 75px); }
  .hero-description { max-width: 530px; }
  .hero-social { margin-top: 33px; }
  .hero-visual { min-height: 610px; }
  .hero-model { height: 98%; }
  .hero-wordmark { font-size: 120px; }
  .floating-product { width: 178px; }
  .benefits-shell { margin-top: 24px; }
  .section { padding: 72px 0; }
  .categories-section { padding-top: 72px; }
  .bestsellers-section { padding-top: 16px; }
  .category-grid { grid-template-columns: repeat(3, 1fr); }
  .category-card { min-height: 270px; }
  .promo-grid { grid-template-columns: 1fr; }
  .promo-flash { min-height: 395px; }
  .promo-copy { max-width: 52%; }
  .promo-collection { min-height: 430px; }
  .promo-collection > img { width: 75%; right: -3%; }
  .promo-collection-copy { max-width: 55%; }
  .bestseller-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .bestseller-grid::-webkit-scrollbar { display: none; }
  .best-card { scroll-snap-align: start; min-height: 230px; }
  .best-desc { display: -webkit-box; }
  .story-grid { gap: 45px; }
  .story-media { min-height: 500px; }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonial-card:last-child { grid-column: 1 / -1; }
  .testimonial-featured { grid-column: auto; }
  .footer-newsletter { flex-direction: column; align-items: flex-start; gap: 25px; padding: 50px 0; }
  .newsletter-form { width: min(100%, 430px); }
  .shop-hero { padding: 42px 0; }
  .shop-layout { display: block; }
  .shop-filters {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 320;
    width: min(390px, 92vw);
    padding: 25px 22px;
    overflow-y: auto;
    background: var(--surface);
    border-radius: 0;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 0.42s var(--ease), visibility 0.42s;
    box-shadow: -20px 0 60px rgba(21, 20, 15, 0.16);
  }
  .shop-filters.is-open { transform: translateX(0); visibility: visible; }
  .filters-close { display: grid; }
  .filter-toggle { display: inline-flex; }
  .filters-apply { display: flex; }
  .shop-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 16px; }
  .checkout-dialog { max-width: 870px; }
  .checkout-main { padding: 31px 29px 33px; }
  .checkout-side { padding: 31px 22px 27px; }
}

@media (max-width: 840px) {
  .hero-title { font-size: clamp(50px, 8.4vw, 69px); }
  .hero-visual { min-height: 570px; }
  .hero-floating .floating-product { width: 165px; }
  .hero-floating .floating-product:nth-child(2) { top: 15%; }
  .hero-floating .floating-product:nth-child(3) { bottom: 18%; }
  .hero-floating .floating-product:nth-child(4) { bottom: 8%; }
  .benefits { grid-template-columns: 1fr 1fr; }
  .benefit { border-right: 1px solid var(--line-soft); }
  .benefit:nth-child(2) { border-right: 0; }
  .benefit:nth-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
  .category-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .category-card { min-height: 235px; }
  .product-rail-track { grid-auto-columns: calc((100% - 32px) / 3); }
  .story-grid { grid-template-columns: 1fr; gap: 38px; }
  .story-media { min-height: 480px; }
  .story-copy { max-width: 610px; }
  .promo-collection-copy { max-width: 63%; }
  .promo-collection > img { width: 67%; right: -1%; }
  .shop-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 31px 16px; }
  .shop-product-grid .product-name { font-size: 14.5px; }
  .shop-product-grid .product-price strong { font-size: 13px; }
  .quickview-grid { grid-template-columns: 0.85fr 1.15fr; min-height: 540px; }
  .quickview-media { border-radius: 27px 0 0 27px; }
  .quickview-info { padding: 39px 30px 30px; }
  .quickview-info h2 { font-size: 29px; }
  .modal { padding: 16px; }
  .modal-dialog { max-height: calc(100dvh - 32px); }
  .checkout-grid { grid-template-columns: 1fr; min-height: 0; }
  .checkout-side { border-left: 0; border-top: 1px solid var(--line-soft); border-radius: 0 0 27px 27px; }
  .checkout-items { max-height: 190px; }
  .checkout-totals { margin-top: 17px; }
  .footer-main { grid-template-columns: 1.5fr 1fr 1fr; gap: 28px; }
  .footer-col:nth-of-type(4) { grid-column: auto; }
  .footer-col:nth-of-type(5) { grid-column: 1 / -1; }
  .shop-hero-aside { width: 155px; }
}

@media (max-width: 700px) {
  .container { width: calc(100% - 32px); }
  .announcement-bar { min-height: 31px; padding: 7px 15px; font-size: 7.5px; letter-spacing: 0.09em; }
  .header-inner { min-height: 66px; gap: 8px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 9px; }
  .brand-mark svg { width: 19px; height: 19px; }
  .brand-word { font-size: 12.5px; letter-spacing: 0.11em; }
  .brand-word small { display: none; }
  .icon-button { width: 35px; height: 35px; }
  .hero-copy { padding: 31px 2px 37px; }
  .hero-eyebrow { margin-bottom: 20px; }
  .hero-title { font-size: clamp(43px, 10.8vw, 59px); }
  .hero-description { margin-top: 20px; font-size: 12px; line-height: 1.75; }
  .hero-actions { margin-top: 23px; gap: 7px; }
  .btn { min-height: 44px; padding-inline: 17px; font-size: 10px; }
  .hero-social { margin-top: 28px; }
  .hero-visual { min-height: 490px; border-radius: 25px; }
  .hero-wordmark { top: 17px; right: 14px; font-size: 72px; }
  .hero-badge-top { top: 16px; left: 16px; padding: 6px 9px; font-size: 6.5px; }
  .hero-model { height: 97%; }
  .hero-caption { display: none; }
  .hero-floating .floating-product { width: 148px; padding: 5px; gap: 7px; border-radius: 12px; }
  .floating-thumb { width: 36px; height: 36px; border-radius: 8px; }
  .floating-info small { font-size: 6.5px; }
  .floating-info strong { font-size: 8px; }
  .hero-floating .floating-product:nth-child(1) { left: 9px; top: 9%; }
  .hero-floating .floating-product:nth-child(2) { right: 9px; top: 16%; }
  .hero-floating .floating-product:nth-child(3) { left: 9px; bottom: 18%; }
  .hero-floating .floating-product:nth-child(4) { right: 9px; bottom: 8%; }
  .benefits { padding: 6px; border-radius: 15px; }
  .benefit { min-height: 59px; padding: 9px 10px; }
  .benefit-icon { width: 31px; height: 31px; }
  .benefit-icon .icon { width: 14px; height: 14px; }
  .benefit h3 { font-size: 9.5px; }
  .benefit p { font-size: 7.5px; }
  .section { padding: 58px 0; }
  .categories-section { padding-top: 58px; }
  .bestsellers-section { padding-top: 12px; }
  .section-head { align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .section-head h2 { font-size: clamp(25px, 7.5vw, 34px); }
  .section-head .text-link { display: none; }
  .arrivals-all { display: inline-flex !important; margin-right: auto; }
  .section-head-actions { flex-direction: column; align-items: flex-end; gap: 12px; }
  .section-head-actions .rail-controls { display: none; }
  .category-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .category-card { min-height: 206px; border-radius: 14px; }
  .category-info { left: 11px; right: 11px; bottom: 11px; }
  .category-info strong { font-size: 13px; }
  .category-arrow { display: none; }
  .product-rail-track { grid-auto-columns: calc((100% - 15px) / 2); gap: 15px; }
  .product-info { padding-top: 11px; }
  .product-name { font-size: 12.5px; }
  .product-quickview { display: none; }
  .product-price strong { font-size: 11px; }
  .product-add { width: 29px; height: 29px; }
  .product-media { border-radius: 15px; }
  .promo-flash { min-height: 462px; padding: 27px 22px; border-radius: 20px; }
  .promo-copy { max-width: 78%; }
  .promo-flash h2 { font-size: 38px; }
  .promo-flash p { max-width: 260px; font-size: 9.5px; }
  .promo-product { right: -8%; bottom: -2%; width: 65%; height: 61%; }
  .promo-product-ring { width: 250px; height: 250px; }
  .promo-product img { top: 23%; width: 90%; }
  .promo-product-label { display: none; }
  .promo-sale-word { font-size: 105px; bottom: -22px; }
  .countdown { margin-top: 19px; }
  .countdown div { min-width: 37px; }
  .countdown strong { height: 37px; font-size: 16px; }
  .promo-collection { min-height: 420px; border-radius: 20px; }
  .promo-collection > img { right: -15%; bottom: -4%; width: 79%; height: 88%; }
  .promo-collection-overlay { background: linear-gradient(0deg, #171610 18%, rgba(23, 22, 16, 0.7) 55%, transparent 100%); }
  .promo-collection-copy { left: 22px; right: 22px; bottom: 23px; max-width: 90%; }
  .promo-collection h2 { font-size: 36px; }
  .promo-collection p { max-width: 290px; font-size: 9px; }
  .promo-collection .promo-eyebrow { font-size: 6.5px; }
  .bestseller-grid { grid-auto-columns: minmax(294px, 82vw); gap: 10px; }
  .best-card { min-height: 218px; border-radius: 16px; }
  .best-info h3 { font-size: 17px; }
  .best-desc { display: none; }
  .story-media { min-height: 410px; border-radius: 20px; }
  .story-copy h2 { font-size: clamp(27px, 8vw, 38px); }
  .story-copy > p { font-size: 11.5px; }
  .story-stats { gap: 16px; }
  .story-stats strong { font-size: 20px; }
  .story-stats span { font-size: 7.5px; }
  .testimonial-grid { grid-template-columns: 1fr; margin-top: 44px; gap: 10px; }
  .testimonial-card { padding: 21px; }
  .testimonial-card:last-child { grid-column: auto; }
  .testimonial-featured { grid-column: auto; }
  .testimonial-card > p { font-size: 11px; }
  .marquee-band { padding: 18px 0; }
  .marquee-track span { font-size: 9px; }
  .footer-newsletter { padding: 42px 0; gap: 21px; }
  .footer-newsletter h2 { font-size: clamp(27px, 8vw, 37px); }
  .footer-newsletter p { font-size: 10px; }
  .newsletter-form { width: 100%; }
  .footer-main { grid-template-columns: 1fr 1fr; padding: 44px 0 36px; gap: 28px 20px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:nth-of-type(4) { grid-column: auto; }
  .footer-col:nth-of-type(5) { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; gap: 12px; }
  .footer-watermark { height: 47px; }
  .footer-watermark span { bottom: -10px; }
  .shop-hero { padding: 31px 0 35px; }
  .breadcrumb { margin-bottom: 20px; }
  .shop-hero-inner { display: block; }
  .shop-hero-copy h1 { font-size: clamp(41px, 12vw, 58px); }
  .shop-hero-copy p { max-width: 340px; margin-top: 13px; font-size: 10.5px; }
  .shop-hero-aside { display: none; }
  .shop-hero-word { font-size: 110px; bottom: 5px; right: -18%; }
  .shop-body { padding: 26px 0 65px; }
  .shop-toolbar { padding-bottom: 13px; }
  .shop-toolbar-left { gap: 10px; }
  .filter-toggle { font-size: 8px; }
  .sort-control > span:first-child { display: none; }
  .sort-control select { font-size: 8.5px; }
  .shop-product-grid { gap: 23px 12px; margin-top: 20px; }
  .shop-product-grid .product-info { padding: 10px 1px 0; }
  .shop-product-grid .product-category { font-size: 6.5px; }
  .shop-product-grid .product-name { font-size: 11.5px; }
  .shop-product-grid .product-rating { font-size: 7.5px; gap: 3px; }
  .shop-product-grid .product-price-row { margin-top: 7px; }
  .shop-product-grid .product-price strong { font-size: 10.5px; }
  .shop-product-grid .product-price del { font-size: 7.5px; }
  .shop-product-grid .product-add { width: 28px; height: 28px; }
  .shop-product-grid .product-add .icon { width: 12px; height: 12px; }
  .shop-product-grid .product-media { border-radius: 13px; }
  .product-badge { top: 8px; left: 8px; font-size: 6px; padding: 4px 6px; }
  .wishlist-btn { width: 28px; height: 28px; top: 7px; right: 7px; }
  .wishlist-btn .icon { width: 12px; height: 12px; }
  .shop-bottom-note { margin-top: 34px; }
  .active-filters { margin-top: 12px; }
  .modal { padding: 0; align-items: flex-end; }
  .modal-dialog { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; }
  .modal-close { top: 11px; right: 11px; }
  .quickview-grid { grid-template-columns: 1fr; min-height: 0; }
  .quickview-media { height: 355px; border-radius: 22px 22px 0 0; }
  .quickview-media img { object-position: center 25%; }
  .quickview-media .product-badge { top: 13px; left: 13px; }
  .quickview-info { padding: 27px 22px 25px; }
  .quickview-info h2 { font-size: 30px; }
  .quickview-desc { font-size: 10px; }
  .quickview-buy-row { position: sticky; bottom: 0; background: var(--surface); padding-top: 4px; }
  .quickview-perks { gap: 11px; }
  .quickview-divider { margin: 18px 0; }
  .checkout-main { padding: 28px 20px 26px; }
  .checkout-main h2 { font-size: 26px; }
  .checkout-side { padding: 25px 20px 24px; border-radius: 0 0 22px 22px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .payment-options { grid-template-columns: 1fr; }
  .payment-option label { min-height: 56px; flex-direction: row; align-items: center; gap: 9px; }
  .payment-option label span { margin-left: auto; text-align: right; }
  .checkout-success { padding: 47px 22px 42px; }
  .checkout-success h2 { font-size: 27px; }
  .success-actions { flex-direction: column; align-items: stretch; }
  .search-panel-inner { width: calc(100% - 32px); padding-top: 21px; }
  .search-results { grid-template-columns: 1fr; }
  .search-category-list { grid-template-columns: 1fr 1fr; }
  .search-form input { font-size: 21px; }
  .search-head { gap: 9px; }
  .drawer-head { padding: 20px; }
  .drawer-body { padding: 17px 20px; }
  .drawer-foot { padding: 16px 20px 20px; }
  .toast-stack { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; width: 100%; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 42px; }
  .hero-description { font-size: 11.5px; }
  .hero-visual { min-height: 420px; }
  .hero-floating .floating-product:nth-child(1),
  .hero-floating .floating-product:nth-child(2),
  .hero-floating .floating-product:nth-child(3) { display: none; }
  .hero-floating .floating-product:nth-child(4) { display: flex; right: 12px; bottom: 12px; width: 155px; }
  .hero-wordmark { font-size: 58px; top: 40px; }
  .hero-badge-top { top: 14px; }
  .benefit { padding: 8px 7px; gap: 7px; }
  .benefit-icon { width: 27px; height: 27px; }
  .benefit h3 { font-size: 8.5px; }
  .benefit p { font-size: 6.8px; }
  .category-grid { grid-template-columns: 1fr 1fr; }
  .category-card { min-height: 180px; }
  .category-info strong { font-size: 12px; }
  .category-info span { font-size: 6.5px; }
  .promo-copy { max-width: 84%; }
  .promo-flash h2 { font-size: 34px; }
  .promo-product { bottom: 0; width: 68%; height: 56%; }
  .promo-collection { min-height: 385px; }
  .promo-collection > img { width: 90%; height: 76%; right: -22%; }
  .promo-collection-copy { max-width: 95%; }
  .promo-collection h2 { font-size: 34px; }
  .story-stats { flex-wrap: wrap; row-gap: 15px; }
  .story-stats div { min-width: 28%; }
  .footer-main { grid-template-columns: 1fr; gap: 24px; }
  .footer-brand { grid-column: auto; }
  .footer-col:nth-of-type(4),
  .footer-col:nth-of-type(5) { grid-column: auto; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .footer-watermark { display: none; }
  .shop-product-grid .product-name { font-size: 10.5px; }
  .shop-product-grid { gap: 19px 10px; }
  .search-category-list { grid-template-columns: 1fr; }
  .payment-option label span { display: none; }
  .quickview-media { height: 300px; }
  .checkout-line { grid-template-columns: 42px 1fr auto; gap: 8px; }
  .checkout-line-img { width: 42px; height: 50px; }
  .shop-toolbar-left { gap: 8px; }
  .results-count { font-size: 8px; }
  .sort-control select { max-width: 116px; }
}

@media (hover: none) {
  .product-quickview {
    position: absolute;
    opacity: 0.96;
    transform: translate(-50%, 0);
    padding: 7px 10px;
  }
  .category-arrow { opacity: 1; transform: none; }
  .product-card:hover .product-media img { transform: none; }
}

/* ==========================================================================
   Mobile app-style storefront
   Reference treatment: compact header, search field, editorial hero card,
   trust strip, horizontal category/product rails, promo tiles, bottom tabs.
   Desktop and tablet layouts above remain untouched.
   ========================================================================== */

.mobile-search-bar,
.mobile-bottom-nav { display: none; }

@media (max-width: 700px) {
  body[data-page] { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

  #categories,
  #new-arrivals,
  #best-sellers,
  #journal { scroll-margin-top: 112px; }

  /* ---------- Compact app header ---------- */
  .announcement-bar { display: none; }

  body.mobile-nav-open #siteHeader { z-index: 230; }
  body.mobile-nav-open .site-header-main,
  body.mobile-nav-open .mobile-search-bar { visibility: hidden; }

  .site-header-main {
    background: rgba(250, 248, 243, 0.97);
    border-bottom: 1px solid var(--line-soft);
  }
  #siteHeader.is-scrolled .site-header-main {
    box-shadow: 0 6px 22px rgba(21, 20, 15, 0.05);
  }
  .header-inner {
    position: relative;
    min-height: 58px;
    gap: 0;
  }
  .header-inner > .brand {
    position: absolute;
    left: 50%;
    margin: 0;
    gap: 7px;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .header-inner > .brand .brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }
  .header-inner > .brand .brand-mark svg { width: 15px; height: 15px; }
  .header-inner > .brand .brand-word {
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  .header-inner > .brand .brand-word small { display: none; }
  .header-actions {
    margin-left: auto;
    gap: 1px;
  }
  .header-actions .account-button { display: none; }
  .header-actions .icon-button {
    width: 34px;
    height: 34px;
  }
  .header-actions .icon-button .count-badge {
    top: 1px;
    right: 0;
    min-width: 15px;
    height: 15px;
    border-width: 1.5px;
    font-size: 7px;
  }
  .mobile-menu-button {
    position: absolute;
    left: 0;
    top: 50%;
    display: inline-flex;
    width: 35px;
    height: 35px;
    transform: translateY(-50%);
  }

  .mobile-search-bar {
    display: block;
    padding: 0 16px 11px;
    background: var(--paper);
  }
  .mobile-search-form {
    height: 43px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 8px 0 14px;
    background: var(--surface);
    border: 1px solid rgba(21, 20, 15, 0.08);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(21, 20, 15, 0.05);
  }
  .mobile-search-form > .icon {
    flex: none;
    color: var(--ink-muted);
  }
  .mobile-search-form input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
  }
  .mobile-search-form input::placeholder { color: var(--ink-muted); font-weight: 500; }
  .mobile-search-form input::-webkit-search-cancel-button { display: none; }
  .mobile-search-form button {
    width: 29px;
    height: 29px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--ink);
    border-radius: 9px;
  }
  .mobile-search-form button .icon { width: 13px; height: 13px; }

  /* ---------- Hero as an app-style promo card ---------- */
  .hero-shell {
    padding: 10px 0 0;
    background: var(--paper);
  }
  .hero-shell > .container { width: calc(100% - 24px); }
  .hero {
    display: block;
    min-height: clamp(344px, 91vw, 392px);
    overflow: hidden;
    border-radius: 24px;
    background:
      radial-gradient(circle at 86% 12%, rgba(255, 205, 164, 0.52), transparent 30%),
      linear-gradient(148deg, #fcf7ed 0%, #f5eddf 50%, #ecdcc6 100%);
    box-shadow: 0 14px 36px rgba(21, 20, 15, 0.08);
  }
  .hero::before {
    content: "";
    position: absolute;
    top: -62px;
    right: -75px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255, 90, 31, 0.12);
    border-radius: 50%;
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10px;
    z-index: 8;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow:
      12px 0 0 rgba(21, 20, 15, 0.18),
      24px 0 0 rgba(21, 20, 15, 0.18);
    transform: translateX(-18px);
  }
  .hero-copy {
    position: relative;
    z-index: 6;
    width: 62%;
    max-width: none;
    margin: 0;
    padding: 22px 0 20px 18px;
    justify-content: flex-start;
  }
  .hero-eyebrow {
    margin-bottom: 10px;
    gap: 7px;
    color: #9d4f27;
    font-size: 6.8px;
    letter-spacing: 0.13em;
  }
  .hero-eyebrow .eyebrow-dot { width: 5px; height: 5px; }
  .hero-title {
    max-width: 238px;
    font-size: clamp(23px, 6.5vw, 28px);
    line-height: 1.02;
    letter-spacing: -0.062em;
  }
  .hero-title em { padding-right: 2px; }
  .hero-title em::after { bottom: 2px; height: 2px; }
  .hero-description {
    display: -webkit-box;
    max-width: 198px;
    margin-top: 10px;
    overflow: hidden;
    color: #625b50;
    font-size: 10px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .hero-actions { margin-top: 14px; gap: 0; }
  .hero-actions .btn {
    min-height: 34px;
    padding-inline: 12px;
    border-radius: 99px;
    font-size: 8px;
  }
  .hero-actions #heroSecondary { display: none; }
  .hero-social { display: none; }

  .hero-visual {
    position: absolute;
    inset: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 24px;
    background: transparent;
  }
  .hero-visual::before {
    content: "";
    position: absolute;
    inset: auto -64px -48px auto;
    width: 292px;
    height: 292px;
    opacity: 1;
    background: radial-gradient(circle at 38% 30%, #ffc49d 0%, #ff8b50 43%, #ff5a1f 100%);
    border-radius: 50%;
    mask-image: none;
  }
  .hero-visual::after { display: none; }
  .hero-ring,
  .hero-wordmark,
  .hero-badge-top,
  .hero-caption,
  .hero-stamp { display: none; }
  .hero-model {
    left: auto;
    right: -12%;
    bottom: 0;
    z-index: 2;
    width: auto;
    height: 82%;
    transform: none;
    filter: drop-shadow(12px 18px 18px rgba(88, 39, 10, 0.18));
    animation: none;
  }
  .hero-floating { z-index: 7; }
  .floating-product {
    width: 110px;
    gap: 5px;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(83, 22, 0, 0.14);
    animation: none;
  }
  .floating-thumb { width: 29px; height: 29px; border-radius: 7px; }
  .floating-info small { font-size: 5.4px; }
  .floating-info strong { margin-top: 1px; font-size: 7px; }
  .hero-floating .floating-product,
  .hero-floating .floating-product:nth-child(1),
  .hero-floating .floating-product:nth-child(2),
  .hero-floating .floating-product:nth-child(3),
  .hero-floating .floating-product:nth-child(4) { display: flex; }
  .hero-floating .floating-product:nth-child(1) { left: auto; right: 8px; top: 8px; }
  .hero-floating .floating-product:nth-child(2) { right: 8px; top: 48%; }
  .hero-floating .floating-product:nth-child(3) { left: 10px; bottom: 12px; }
  .hero-floating .floating-product:nth-child(4) { right: 8px; bottom: 12px; }

  /* ---------- Trust strip ---------- */
  .benefits-shell {
    margin-top: 14px;
  }
  .benefits {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 9px 4px;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(21, 20, 15, 0.06);
  }
  .benefit {
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 6px 3px;
    text-align: center;
    border-right: 1px solid var(--line-soft);
    border-bottom: 0 !important;
  }
  .benefit:nth-child(2) { border-right: 1px solid var(--line-soft); }
  .benefit:last-child { border-right: 0; }
  .benefit-icon { width: 29px; height: 29px; }
  .benefit-icon .icon { width: 14px; height: 14px; }
  .benefit h3 {
    font-size: 8px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .benefit p { display: none; }

  /* ---------- Section rhythm ---------- */
  .section { padding: 28px 0; }
  .categories-section { padding-top: 26px; }
  .bestsellers-section { padding-top: 4px; }
  .section-head {
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .section-kicker { font-size: 7px; letter-spacing: 0.17em; }
  .section-head h2 { font-size: 22px; line-height: 1.06; }
  .section-head .text-link,
  .arrivals-all {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 8px;
    white-space: nowrap;
  }
  .section-head .text-link .icon,
  .arrivals-all .icon { width: 10px; height: 10px; }
  .section-head-actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .section-head-actions .rail-controls { display: none; }

  /* ---------- Category rail ---------- */
  .category-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 116px;
    grid-template-columns: none;
    gap: 10px;
    margin-inline: -16px;
    padding: 0 16px 5px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .category-grid::-webkit-scrollbar { display: none; }
  .category-card {
    min-height: 156px;
    border-radius: 15px;
    scroll-snap-align: start;
  }
  .category-info { left: 11px; right: 11px; bottom: 10px; }
  .category-info span { margin-bottom: 1px; font-size: 6.3px; }
  .category-info strong { font-size: 12px; }
  .category-arrow { display: none; }

  /* ---------- Product rail ---------- */
  .arrivals-section .product-rail { margin-right: 0; }
  .product-rail-track {
    grid-auto-columns: calc((100% - 12px) / 2.15);
    gap: 12px;
    padding: 1px 0 8px;
  }
  .product-media { border-radius: 15px; aspect-ratio: 1 / 1.12; }
  .product-badge {
    top: 7px;
    left: 7px;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 5.5px;
  }
  .wishlist-btn {
    top: 7px;
    right: 7px;
    width: 27px;
    height: 27px;
  }
  .wishlist-btn .icon { width: 12px; height: 12px; }
  .product-quickview { display: none; }
  .product-info { padding: 8px 1px 0; }
  .product-category { margin-bottom: 2px; font-size: 6.3px; }
  .product-name {
    display: -webkit-box;
    min-height: 2.65em;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.32;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .product-rating { margin-top: 4px; font-size: 7px; }
  .product-rating .stars { font-size: 7px; }
  .product-price-row { margin-top: 7px; }
  .product-price strong { font-size: 10.5px; }
  .product-price del { font-size: 7.5px; }
  .product-add { width: 28px; height: 28px; }
  .product-add .icon { width: 12px; height: 12px; }

  /* ---------- Promo tiles ---------- */
  .promo-section { padding-top: 20px; }
  .promo-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .promo-card {
    min-height: 230px;
    border-radius: 18px;
  }
  .promo-flash { padding: 15px 13px; }
  .promo-copy { max-width: 100%; }
  .promo-flash .promo-copy { position: static; }
  .promo-flash .promo-copy > .promo-eyebrow,
  .promo-flash .promo-copy > h2 { position: relative; z-index: 5; }
  .promo-eyebrow {
    padding: 4px 7px;
    font-size: 5.8px;
    letter-spacing: 0.11em;
  }
  .promo-flash h2,
  .promo-collection h2 {
    margin-top: 10px;
    font-size: clamp(21px, 5.7vw, 25px);
    line-height: 1.02;
    letter-spacing: -0.06em;
  }
  .promo-flash h2 { max-width: 96%; }
  .promo-flash p,
  .promo-collection p,
  .countdown,
  .promo-product-label { display: none; }
  .promo-flash .btn {
    position: absolute;
    left: 13px;
    bottom: 13px;
    z-index: 6;
    width: 31px;
    min-height: 31px;
    height: 31px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
  }
  .promo-flash .btn .icon { width: 13px; height: 13px; }
  .promo-product {
    right: -11%;
    bottom: 16%;
    width: 74%;
    height: 38%;
  }
  .promo-product-ring { display: none; }
  .promo-product img {
    top: 0;
    width: 100%;
    transform: translateX(-50%) rotate(-10deg);
    filter: drop-shadow(12px 15px 13px rgba(100, 25, 0, 0.22));
    animation: none;
  }
  .promo-sale-word {
    right: -2px;
    bottom: -12px;
    font-size: 54px;
    opacity: 0.5;
  }
  .promo-collection > img {
    right: -13%;
    bottom: -2%;
    width: 102%;
    height: 82%;
  }
  .promo-collection-overlay {
    background: linear-gradient(0deg, #171610 7%, rgba(23, 22, 16, 0.74) 48%, transparent 88%);
  }
  .promo-collection-copy {
    left: 13px;
    right: 13px;
    bottom: 13px;
    max-width: none;
  }
  .promo-collection h2 { margin-top: 8px; font-size: 24px; }
  .promo-collection .btn {
    min-height: 30px;
    margin-top: 9px;
    padding-inline: 10px;
    font-size: 7px;
  }
  .promo-collection .promo-eyebrow { font-size: 5.4px; }
  .promo-collection-index { top: 11px; right: 11px; font-size: 7px; }

  /* ---------- Best sellers rail ---------- */
  .bestseller-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    grid-template-columns: none;
    gap: 10px;
    margin-inline: -16px;
    padding: 0 16px 7px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
  }
  .bestseller-grid::-webkit-scrollbar { display: none; }
  .best-card {
    min-height: 174px;
    grid-template-columns: 41% 1fr;
    padding: 8px;
    border-radius: 16px;
    scroll-snap-align: start;
  }
  .best-media { border-radius: 12px; }
  .best-info { padding: 8px 6px 4px 11px; }
  .best-category { font-size: 6px; }
  .best-info h3 { margin-top: 5px; font-size: 15px; line-height: 1.15; }
  .best-desc { display: none; }
  .best-bottom { padding-top: 7px; }
  .best-price strong { font-size: 12px; }
  .best-price del { font-size: 7px; }
  .best-add {
    min-height: 28px;
    padding: 0 9px;
    font-size: 6.5px;
  }
  .best-add .icon { width: 10px; height: 10px; }

  /* ---------- Lower editorial content ---------- */
  .story-section { padding-top: 26px; }
  .story-grid { gap: 18px; }
  .story-media { min-height: 310px; border-radius: 18px; }
  .story-float-card { display: none; }
  .story-copy h2 { font-size: 25px; line-height: 1.1; }
  .story-copy > p { font-size: 10.5px; line-height: 1.7; }
  .story-stats { gap: 12px; }
  .story-stats strong { font-size: 19px; }
  .story-stats span { font-size: 7px; }
  .testimonial-grid { margin-top: 26px; }
  .testimonial-card { padding: 18px; border-radius: 16px; }
  .testimonial-card > p { font-size: 10px; }
  .marquee-band { padding: 14px 0; }
  .marquee-track span { font-size: 8px; }

  .footer-newsletter { padding: 34px 0 30px; }
  .footer-newsletter h2 { font-size: 26px; }
  .footer-main { padding-top: 34px; }
  .footer-bottom { padding-bottom: 12px; }

  /* ---------- Fixed bottom navigation ---------- */
  .mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 170;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    background: rgba(255, 253, 249, 0.97);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -10px 30px rgba(21, 20, 15, 0.08);
    backdrop-filter: blur(18px);
  }
  .mobile-tab {
    position: relative;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 3px 2px;
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: color 0.2s, background 0.2s;
  }
  .mobile-tab .icon { width: 19px; height: 19px; }
  .mobile-tab.is-active { color: var(--accent); background: var(--accent-soft); }
  .mobile-tab.is-active::before {
    content: "";
    position: absolute;
    top: -8px;
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
  }
  .mobile-tab-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 19px);
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--accent);
    border: 1.5px solid var(--surface);
    border-radius: 99px;
    font-size: 6.5px;
    font-weight: 800;
    line-height: 1;
  }
  .mobile-tab-badge[hidden] { display: none; }

  .toast-stack { bottom: calc(83px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
  .header-inner > .brand .brand-mark { display: none; }
  .header-inner > .brand .brand-word { font-size: 10.5px; }
  .floating-product { width: 102px; }
  .floating-thumb { width: 26px; height: 26px; }
  .hero-floating .floating-product:nth-child(1) { display: none; }
  .benefit h3 { font-size: 7.3px; }
  .promo-collection h2 { font-size: 21px; }
  .mobile-tab { font-size: 6.5px; }
}