/* Brand assets and a quieter presentation for the Dream Tacos storefront. */
.header-inner{height:100px}
.brand{width:92px;height:92px;min-width:0;flex:0 0 92px;margin:0;gap:0}
.brand-logo{display:block;width:100%;height:100%;object-fit:contain}
.brand-symbol,.brand-label,.wordmark{display:none}

.hero{background:var(--cream)}
.hero-inner{min-height:510px;padding-block:38px 42px;gap:clamp(32px,5vw,76px)}
.local-label{border:0;border-radius:0;padding:0;letter-spacing:.12em;color:var(--red);margin-block-end:18px}
.local-label svg{display:none}
.hero h1{font-size:clamp(54px,5.5vw,76px);line-height:1.03;letter-spacing:-.065em}
.hero h1 .red:after{display:none}

/* Roomier controls and stronger type keep food cards easy to scan and tap. */
.button{min-height:52px;padding:13px 22px;font-size:14px}
.icon-button{width:48px;height:48px}
.product-bottom{gap:12px;align-items:center}
.product-bottom button{min-height:48px;padding:11px 16px;font-size:13px;font-weight:750;line-height:1.3}
.product-bottom .price{font-size:21px}
.product-body h3{font-size:16px;line-height:1.35}
.product-description{font-size:13px;line-height:1.65}
.category-tab{min-height:46px;padding:11px 18px;font-size:13px}
.choice>span{min-height:52px;padding-block:15px;font-size:13px}
.order-type>span{font-size:13px}
.header-actions{gap:10px}
.header-inner{gap:24px}
.section-head{gap:24px}

@media(max-width:900px){
  .header-inner{height:82px}
  .brand{width:72px;height:72px;flex-basis:72px}
  .hero-inner{min-height:460px;gap:24px}
  .hero h1{font-size:clamp(48px,7vw,64px)}
}

@media(max-width:600px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .product-body{padding:14px 12px}
  .product-open{padding:10px}
  .product-body h3{font-size:14px}
  .product-description{font-size:11px;margin-block-end:12px}
  .product-bottom .price{font-size:17px}
  .sticky-cart:not([hidden]){position:fixed!important;display:block!important;z-index:1000;inset-inline:12px;inset-block-end:calc(12px + env(safe-area-inset-bottom));width:auto}
  .header-inner{height:72px;gap:8px}
  .brand{width:62px;height:62px;flex-basis:62px}
  .hero-inner{grid-template-columns:1fr;min-height:0;gap:10px;padding-block:34px 22px}
  .local-label{margin-block-end:14px;font-size:10px}
  .hero h1{font-size:clamp(44px,12.5vw,56px);line-height:1.08;letter-spacing:-.065em}
  .hero-copy>p{font-size:14px;line-height:1.75;max-width:36rem}
  .product-bottom button{width:100%;font-size:13px}
  .category-tab{font-size:13px;padding:10px 16px}
  .product-body h3{font-size:15px}
  .product-description{font-size:12px}
  .header-actions{gap:6px}
}

@media(max-width:360px){
  .header-inner{gap:4px}
  .brand{width:54px;height:54px;flex-basis:54px}
  .hero h1{font-size:43px}
  .product-bottom button{min-height:48px;font-size:12px}
}

/* Full-bleed food film with a calm, readable copy zone. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--cream)}
.hero-media{position:absolute;z-index:-2;inset:0;overflow:hidden;background:#39251d}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:56% 52%}
.hero-video{display:block}
.hero-shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--cream) 0%,color-mix(in srgb,var(--cream) 98%,transparent) 31%,color-mix(in srgb,var(--cream) 93%,transparent) 43%,color-mix(in srgb,var(--cream) 76%,transparent) 54%,color-mix(in srgb,var(--cream) 28%,transparent) 67%,transparent 80%)}
.hero-inner{position:relative;z-index:1;display:block;min-height:clamp(540px,calc(100svh - 96px),680px);padding-block:clamp(52px,7vw,92px)}
.hero-copy{width:min(54%,590px);max-width:590px;padding-block:20px}
.hero h1{max-width:590px;font-size:clamp(54px,5.3vw,76px);line-height:1.04}
.hero-copy>p{max-width:460px;margin-block:22px 28px;font-size:17px;line-height:1.7;color:var(--ink)}
.hero-actions{gap:12px}
.hero-actions .button{min-height:54px;padding-inline:22px;font-size:14px}
.hero-actions .button-outline{border-color:var(--line);background:color-mix(in srgb,var(--cream) 86%,transparent);color:var(--ink)}
.hero-actions .button-outline:hover{background:var(--paper);border-color:var(--red);color:var(--red)}
.hero-checks{gap:18px;margin-block-start:28px;color:var(--ink);font-size:13px}
.hero-checks span{gap:8px;white-space:nowrap}
.hero-checks svg{width:19px;height:19px;color:var(--red)}
.hero-motion-toggle{position:absolute;z-index:3;inset-inline-end:max(22px,calc((100% - 1240px)/2));inset-block-end:22px;border-color:#fff8;background:#fffefaed;color:#241e19;box-shadow:0 3px 14px #20120e24;backdrop-filter:blur(8px)}
.hero-motion-toggle:hover{border-color:var(--red);background:white;color:var(--red)}
.hero-motion-toggle:focus-visible{outline-color:var(--red);outline-offset:3px}
.hero-motion-toggle svg{width:19px;height:19px}

@media(max-width:900px){
  .hero-inner{min-height:560px;padding-block:68px}
  .hero-copy{width:min(58%,560px)}
  .hero h1{font-size:clamp(50px,7vw,66px)}
  .hero-shade{background:linear-gradient(90deg,var(--cream) 0%,color-mix(in srgb,var(--cream) 96%,transparent) 42%,color-mix(in srgb,var(--cream) 82%,transparent) 56%,color-mix(in srgb,var(--cream) 34%,transparent) 72%,transparent 88%)}
}

@media(max-width:600px){
  .hero{min-height:0}
  .hero-media{inset-inline:18px;inset-block:auto 16px;height:220px;border:1px solid #ffffff80;border-radius:17px;box-shadow:0 14px 30px #41221d24}
  .hero-poster,.hero-video{object-position:center 54%}
  .hero-shade{background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 41%,color-mix(in srgb,var(--cream) 94%,transparent) 53%,color-mix(in srgb,var(--cream) 55%,transparent) 67%,transparent 82%)}
  .hero-inner{min-height:0;padding-block:34px 252px}
  .hero-copy{width:100%;max-width:520px;padding:0}
  .local-label{margin-block-end:12px;font-size:10px}
  .hero h1{font-size:clamp(44px,11.5vw,56px);line-height:1.08}
  .hero-copy>p{max-width:420px;margin-block:14px 20px;font-size:15px;line-height:1.6}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero-actions .button{min-width:0;min-height:50px;padding-inline:12px;font-size:13px;white-space:nowrap}
  .hero-actions .button svg{width:17px;height:17px}
  .hero-checks{gap:10px 15px;margin-block-start:18px;font-size:12px}
  .hero-checks span{gap:6px}
  .hero-checks svg{width:16px;height:16px}
  .hero-motion-toggle{inset-inline-end:28px;inset-block-end:26px;width:44px;height:44px}
}

@media(max-width:380px){
  .hero-inner{padding-block:30px 232px}
  .hero-media{height:200px}
  .hero h1{font-size:43px}
  .hero-actions{grid-template-columns:1fr}
  .hero-actions .button{width:100%}
  .hero-checks{gap:9px 12px;font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .hero-video{display:none}
}

@media(max-width:600px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product-visual{aspect-ratio:1.45}
  .product-open{padding:4px}
  .product-image{object-fit:contain}
  .product-body{padding:10px 9px}
  .product-category{font-size:8px;letter-spacing:.04em;margin-block-end:4px}
  .product-body h3{font-size:13px;line-height:1.25;margin-block-end:5px}
  .product-description{font-size:10px;line-height:1.4;margin-block-end:8px;-webkit-line-clamp:2}
  .product-bottom{gap:5px}
  .product-bottom .price{font-size:15px}
  .product-bottom .price small{font-size:9px}
  .product-bottom button{width:42px;min-width:42px;min-height:42px;padding:0;border-radius:50%;flex:0 0 42px}
}