/* Mobile-first refinement of the existing Kitchen Affairs storefront. */
body{background:#fff;color:#111}
.site-header{background:#fff;border-bottom:1px solid #f0f0f0}
.header-inner{background:#fff}
.brand{display:flex;align-items:center;min-width:0}
.brand-desktop{display:none!important}
.brand .brand-mobile{display:flex;align-items:center;gap:7px;width:204px;height:58px;overflow:hidden}
.brand-apron,.brand-wordmark{display:block;flex:0 0 auto;background-image:url('../branding/logo-horizontal.webp');background-repeat:no-repeat}
.brand-apron{width:43px;height:58px;background-size:248px 58px;background-position:0 0}
.brand-wordmark{width:154px;height:32px;background-size:199px 46.6px;background-position:-38.9px -2px}
.menu-toggle svg,.bottom-nav svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-toggle{align-items:center;justify-content:center;padding:0;color:#111}
.hero-image:after{background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.1) 31%,transparent 54%)}
.hero-slide-image-only .hero-image:after{display:none}
.hero-image img{object-position:center center}
.hero-copy h1 em{font-style:italic}
.hero-copy h1 .hero-kicker{display:block}
.hero-copy h1 .hero-line{display:inline}
.hero-controls{left:0;right:0;bottom:14px;display:flex;align-items:center;justify-content:center;gap:18px}
.hero-controls .hero-arrow{position:absolute;top:50%;transform:translateY(-50%);font-family:Arial,sans-serif}
.hero-controls [data-prev]{left:max(25px,calc((100vw - 1240px)/2))}
.hero-controls [data-next]{right:max(25px,calc((100vw - 1240px)/2))}
.hero-dots{display:flex;align-items:center;justify-content:center;gap:9px}
.hero-controls .hero-dots button{width:9px;height:9px;min-width:9px;padding:0;border:0;border-radius:50%;background:#c8c8c8;box-shadow:none;font-size:0}
.hero-controls .hero-dots button[aria-current="true"]{background:var(--red)}
.home-categories .category-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:18px;row-gap:34px}
.home-products .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-categories .category-card,.home-products .product-card{min-width:0}
.home-categories .category-card span{overflow-wrap:anywhere;font-size:16px;line-height:1.35;padding-top:11px}
.home-merch-section{padding-top:44px;padding-bottom:44px}
.section-more{display:flex;justify-content:center;margin-top:34px}
.section-more .button{min-width:220px;border-radius:999px}
.home-section-empty{padding:28px;border:1px dashed #d9d1ca;border-radius:10px;background:#faf9f7;color:var(--muted);text-align:center}
.cart-success{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(520px,calc(100vw - 48px));margin:0;padding:15px 16px;background:#fff;border:1px solid #d9d1ca;box-shadow:0 16px 42px #241b1528}
.cart-feedback-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.cart-feedback-actions .text-button{font-weight:700;text-decoration:none}
.bottom-nav a[aria-current="page"]{color:var(--red)}
.bottom-nav a[aria-current="page"] svg{fill:var(--red);stroke:var(--red)}
.bottom-nav a[aria-current="page"] svg rect{fill:var(--red)}
.bottom-cart-icon{position:relative;display:inline-flex}
.bottom-cart-count{position:absolute;top:-8px;right:-10px;display:grid;place-items:center;min-width:16px;height:16px;padding:0 3px;border-radius:9px;background:var(--red);color:#fff;font-size:9px;font-weight:700;line-height:1}
.footer-logo-lockup{display:flex;align-items:center;gap:7px;width:225px;height:66px;overflow:hidden;background:#fff}
.footer-apron,.footer-wordmark{display:block;flex:0 0 auto;background-image:url('../branding/logo-horizontal.webp');background-repeat:no-repeat}
.footer-apron{width:49px;height:66px;background-size:282px 66px;background-position:0 0}
.footer-wordmark{width:169px;height:36px;background-size:219px 51.25px;background-position:-42.8px -2.2px}

@media(max-width:900px){
  .home-categories .category-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .home-products .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  body{padding-bottom:calc(65px + env(safe-area-inset-bottom))}
  .announcement{min-height:32px;padding:5px 14px;font-size:12px;line-height:1.25}
  .site-header{position:sticky;top:0}
  .header-inner{display:grid;grid-template-columns:30px minmax(0,1fr) auto;min-height:68px;padding:8px 13px;gap:8px}
  .menu-toggle{display:flex;order:0;width:30px;height:32px;border:0;background:transparent}
  .menu-toggle svg{width:27px;height:27px}
  .menu-toggle[aria-expanded="true"] svg{display:none}
  .menu-toggle[aria-expanded="true"]:before{content:'×';display:block;font:400 31px/1 Arial,sans-serif;transform:translateY(-1px)}
  .brand{order:1;display:flex;align-items:center;min-width:0;justify-self:start}
  .brand-desktop{display:none}
  .brand .brand-mobile{display:flex;align-items:center;gap:5px;width:170px;height:51px;overflow:hidden}
  .brand-apron,.brand-wordmark{display:block;flex:0 0 auto;background-image:url('../branding/logo-horizontal.webp');background-repeat:no-repeat}
  .brand-apron{width:37px;height:50px;background-size:214px 50px;background-position:0 0}
  .brand-wordmark{width:128px;height:27px;background-size:166px 38.84px;background-position:-32.4px -1.7px}
  .header-actions{order:2;display:flex;gap:clamp(8px,2.5vw,18px)}
  .header-actions a{width:23px;height:29px}
  .header-actions svg{width:22px;height:22px}
  .account-action{display:inline-flex!important}
  .cart-count{top:-5px;right:-7px;width:15px;height:15px;font-size:9px}
  .main-nav{top:100%;left:0;right:0;display:none;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:0;padding:8px 12px;background:#fff;border-top:1px solid #f0f0f0;border-bottom:1px solid #e9e9e9;box-shadow:0 8px 18px #00000012}
  .main-nav.open{display:grid}
  .main-nav a{min-width:0;padding:7px 3px;text-align:center;font-size:clamp(9px,2.7vw,12px);line-height:1.2;white-space:nowrap}

  .hero{background:#f6f4f2}
  .hero-slide{min-height:0;aspect-ratio:2.25/1}
  .hero-image img{object-position:52% center}
  .hero-image:after{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.84) 28%,rgba(255,255,255,.45) 43%,rgba(255,255,255,.08) 58%,transparent 70%)}
  .hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:none;padding:clamp(10px,2.5vw,22px) 0 24px clamp(14px,3.8vw,28px)}
  .hero-copy>*{max-width:45%}
  .hero-copy h1{font-size:clamp(18px,4.55vw,29px);line-height:1.05;letter-spacing:-.04em;margin:0 0 3px;font-weight:500;text-wrap:balance;text-shadow:0 1px 0 rgba(255,255,255,.55)}
  .hero-copy h1 .hero-line{display:block;white-space:nowrap}
  .hero-copy h1 em{font-size:clamp(44px,11.5vw,77px);line-height:.79;letter-spacing:-.06em;margin:2px 0 4px;font-weight:700;white-space:nowrap}
  .hero-copy p{font-size:clamp(11.5px,2.45vw,16px);line-height:1.32;margin:7px 0 10px;max-width:44%;color:#161616;text-shadow:0 1px 0 rgba(255,255,255,.65)}
  .hero-copy .button{min-height:clamp(31px,7vw,45px);padding:5px clamp(14px,4vw,28px);border-radius:30px;font-size:clamp(11px,2.35vw,16px);font-weight:600;gap:clamp(8px,2.3vw,18px);white-space:nowrap}
  .hero-copy-long.hero-copy{padding-bottom:18px}
  .hero-copy-long>*{max-width:47%}
  .hero-copy-long h1{font-size:clamp(16px,4vw,22px);line-height:1.08}
  .hero-copy-long h1 .hero-kicker{width:max-content;max-width:100%}
  .hero-copy-long h1 em{font-size:clamp(41px,10.4vw,62px)}
  .hero-copy-long p{max-width:47%;font-size:clamp(10.5px,2.35vw,14px);margin:5px 0 8px}
  .hero-copy-long .button{min-height:30px}
  .hero-slide-long{min-height:240px;aspect-ratio:1.6/1}
  .hero-controls{bottom:5px;gap:0}
  .hero-controls .hero-arrow{display:none}
  .hero-dots{gap:7px}
  .hero-controls .hero-dots button{width:7px;height:7px;min-width:7px}

  .wrap{padding-left:14px;padding-right:14px}
  .home-categories{padding-top:15px;padding-bottom:18px}
  .home-products{padding-top:8px;padding-bottom:18px}
  .home-categories .section-head,.home-products .section-head{align-items:center;margin-bottom:10px}
  .home-categories .section-head h2,.home-products .section-head h2{font-size:clamp(22px,5vw,29px);line-height:1.15;letter-spacing:-.045em;font-weight:700}
  .home-categories .text-link,.home-products .text-link{font-size:clamp(12.5px,2.75vw,15px);white-space:nowrap}
  .home-categories .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:9px;row-gap:24px}
  .home-categories .category-card{overflow:hidden;border-radius:6px;background:#f7f7f7}
  .home-categories .category-card img{width:100%;height:auto;aspect-ratio:1.52;object-fit:cover;border-radius:6px 6px 0 0}
  .home-categories .category-card span{display:flex;align-items:center;justify-content:center;min-height:48px;padding:7px 4px 8px;font-size:clamp(14px,3.35vw,16px);font-weight:600;line-height:1.3}
  .home-products .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-products .product-media{aspect-ratio:1.66;border-radius:6px}
  .home-products .product-meta{margin-top:7px;font-size:clamp(14px,3.4vw,18px);line-height:1.3}
  .home-products .product-meta strong{font-size:clamp(14px,3.25vw,17px);font-weight:600;margin-top:3px}
  .home-products .product-card small{display:none}
  .home-merch-section{padding-top:27px;padding-bottom:25px}
  .section-more{margin-top:23px}
  .section-more .button{min-width:0;width:100%;max-width:300px}
  .footer-logo-lockup{gap:5px;width:170px;height:51px;margin-bottom:9px}
  .footer-apron{width:37px;height:50px;background-size:214px 50px}
  .footer-wordmark{width:128px;height:27px;background-size:166px 38.84px;background-position:-32.4px -1.7px}
  .service-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 8px;padding:7px 5px;border-radius:12px;background:#f8f6f4}
  .service-strip>div{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:4px 5px;border-right:1px solid #dedbd8;border-bottom:0}
  .service-strip>div:last-child{border-right:0}
  .service-strip svg{width:clamp(20px,5vw,30px);height:clamp(20px,5vw,30px);flex:0 0 auto}
  .service-strip span{min-width:0}
  .service-strip strong{font-size:clamp(9px,2vw,11px);line-height:1.2;white-space:normal}
  .service-strip small{font-size:clamp(7px,1.55vw,9px);line-height:1.2}

  .bottom-nav{min-height:63px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;padding:5px 5px calc(5px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e9e9e9;box-shadow:0 -2px 12px #0000000b}
  .bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;color:#101010;font-size:0;line-height:1.1}
  .bottom-nav svg{width:24px;height:24px}
  .bottom-nav small{display:block;margin:0;font-size:10.5px;color:inherit;font-weight:500;white-space:nowrap}
  .cart-success{left:14px;right:14px;bottom:78px;display:block;width:auto;padding:14px}
  .cart-feedback-actions{justify-content:space-between;margin-top:10px}
}

@media(max-width:360px){
  .header-inner{padding-left:9px;padding-right:9px;gap:5px}
  .brand .brand-mobile{width:153px;gap:4px}
  .brand-apron{width:34px;height:46px;background-size:197px 46px}
  .brand-wordmark{width:115px;height:25px;background-size:149px 34.87px;background-position:-29.1px -1.5px}
  .header-actions{gap:6px}
  .header-actions svg{width:19px;height:19px}
  .hero-copy h1{font-size:16.5px}
  .hero-copy h1 em{font-size:42px}
  .hero-copy p{font-size:10px}
  .home-categories .category-card span{font-size:13px}
  .service-strip small{display:none}
}

