/* Altura Café: the online store (web slot). Layout follows the window's width (container queries), never the screen's.
   A container query cannot restyle the container itself, so size variables change on its children (.d-web > *). */

.d-web { height: 100%; --nav-h: 68px; --px: 48px; }
.d-web .w-scroll { height: 100%; overflow: hidden; }
html:not(.motion) .d-web .w-scroll { overflow-y: auto; overscroll-behavior: contain; }
.d-web .w-page { position: relative; padding-top: var(--nav-h); will-change: transform; }

/* tones for the illustrated products */
.d-web .w-tone-1 { --bag: var(--b-c1); }
.d-web .w-tone-2 { --bag: var(--b-c2); }
.d-web .w-tone-3 { --bag: var(--b-c3); }
.d-web .w-tone-4 { --bag: var(--b-c4); }
.d-web .sh { fill: color-mix(in srgb, var(--b-ink) 10%, transparent); }
.d-web .b1, .d-web .mt { fill: var(--bag); }
.d-web .b2 { fill: color-mix(in srgb, var(--bag) 72%, var(--b-ink)); }
.d-web .lb { fill: var(--b-paper); }
.d-web .sn { fill: var(--b-accent); }
.d-web .gl { fill: color-mix(in srgb, var(--b-c4) 30%, #FFFFFF); }
.d-web .cf { fill: color-mix(in srgb, var(--b-ink) 88%, var(--b-primary)); }
.d-web .st { fill: none; stroke: var(--bag); stroke-width: 5; stroke-linecap: round; }
.d-web .st2 { fill: none; stroke: var(--bag); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }

/* nav */
.w-nav { position: absolute; z-index: 4; inset: 0 0 auto 0; height: var(--nav-h); display: flex; align-items: center; gap: 32px; padding: 0 var(--px); background: var(--b-paper); border-bottom: 1px solid var(--b-line); }
.w-logo { display: flex; align-items: center; min-height: 44px; }
.w-logo .x-word { font-size: 25px; color: var(--b-secondary); }
.w-links { display: flex; gap: 4px; margin-left: auto; }
.w-links button, .w-drop button { min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--b-ink); transition: background-color .2s, color .2s; }
.w-links button:hover, .w-drop button:hover { background: color-mix(in srgb, var(--b-primary) 10%, transparent); color: var(--b-link); }
.w-menu { display: none; }
.w-cartbtn { position: relative; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--b-secondary); color: var(--b-on-secondary); transition: background-color .2s; }
.w-cartbtn:hover { background: var(--b-primary); }
.w-cartbtn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-count { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--b-accent); color: var(--b-on-accent); font-size: 12px; font-weight: 700; line-height: 1; transform: scale(0); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.w-cartbtn.has .w-count { transform: scale(1); }
.motion .w-cartbtn.bump.has .w-count { animation: w-bump .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes w-bump { 40% { transform: scale(1.35); } }
.w-drop { position: absolute; z-index: 4; left: 0; right: 0; top: var(--nav-h); display: grid; padding: 6px 10px 12px; background: var(--b-paper); border-bottom: 1px solid var(--b-line); }
.w-drop button { text-align: left; }

/* buttons */
.w-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--b-primary); color: var(--b-on-primary); font-weight: 700; font-size: 15px; transition: background-color .2s, color .2s; }
.w-btn:hover { background: color-mix(in srgb, var(--b-primary) 82%, var(--b-ink)); }
.w-btn-o { background: none; color: var(--b-secondary); box-shadow: inset 0 0 0 2px var(--b-secondary); }
.w-btn-o:hover { background: var(--b-secondary); color: var(--b-on-secondary); }
.w-btn-a { background: var(--b-accent); color: var(--b-on-accent); }
.w-btn-a:hover { background: var(--b-on-secondary); color: var(--b-secondary); }

/* hero */
.w-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; padding: 40px var(--px) 64px; }
.w-kick { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--b-link); }
.w-kick::before { content: ""; width: 24px; height: 2px; background: currentColor; }
.w-hero .w-h1 { margin-top: 18px; font-size: 56px; color: var(--b-secondary); }
.w-lead { margin-top: 18px; font-size: 18px; color: var(--b-muted); max-width: 40ch; }
.w-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.w-hero-art { position: relative; }
.w-hero-art svg { width: 100%; height: auto; }
.w-hero-art .x-cut { position: absolute; width: auto; object-fit: contain; transform: translateX(-50%); }
.w-hero-bag { left: 38.3%; bottom: 9.4%; height: 56%; }
.w-hero-cup { left: 70%; bottom: 9.2%; height: 27%; }
.h-sky { fill: var(--b-c3); }
.h-sun { fill: var(--b-surface); }
.h-m3 { fill: color-mix(in srgb, var(--b-secondary) 28%, var(--b-c3)); }
.h-m2 { fill: color-mix(in srgb, var(--b-secondary) 58%, var(--b-c3)); }
.h-row { fill: none; stroke: color-mix(in srgb, var(--b-secondary) 44%, var(--b-c3)); stroke-width: 4; }
.h-m1 { fill: var(--b-primary); }
.h-sh { fill: color-mix(in srgb, #000000 22%, transparent); }
.h-bag { fill: var(--b-paper); }
.h-fold { fill: color-mix(in srgb, var(--b-paper) 82%, var(--b-ink)); }
.h-lbl { fill: var(--b-primary); }
.h-cup { fill: var(--b-surface); }
.h-coffee { fill: color-mix(in srgb, var(--b-ink) 85%, var(--b-primary)); }
.h-steam { fill: none; stroke: var(--b-paper); stroke-width: 5; stroke-linecap: round; }

/* shop */
.w-shop { padding: 56px var(--px) 64px; background: var(--b-surface); }
.w-shop-h, .w-sec-h { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; }
.w-shop .w-h2, .w-sec-h .w-h2 { font-size: 40px; color: var(--b-secondary); }
.w-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.w-tabs button { flex: none; min-height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--b-line); transition: background-color .2s, color .2s, box-shadow .2s; }
.w-tabs button:hover { box-shadow: inset 0 0 0 1.5px var(--b-primary); }
.w-tabs button[aria-selected="true"] { background: var(--b-secondary); color: var(--b-on-secondary); box-shadow: none; }
.w-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.w-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--b-radius); background: var(--b-paper); }
.w-art { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; background: color-mix(in srgb, var(--bag) 18%, var(--b-paper)); }
.w-art svg, .w-art .w-cut { height: 86%; width: auto; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.w-art .w-cut { position: absolute; inset: 0; max-width: 88%; margin: auto; object-fit: contain; }
.w-card:hover .w-art svg, .w-card:hover .w-art .w-cut { transform: translateY(-6px) rotate(-2deg); }
.w-tag { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: var(--b-secondary); color: var(--b-on-secondary); font-size: 12px; font-weight: 700; }
.w-card-b { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 16px 16px 18px; }
.w-card h5 { font-size: 21px; color: var(--b-secondary); }
.w-notes { color: var(--b-muted); font-size: 14px; }
.w-notes span { white-space: nowrap; }
.w-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.w-buy b { font-size: 17px; }
.w-add { min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--b-primary); color: var(--b-on-primary); font-weight: 700; font-size: 14px; transition: background-color .2s, color .2s; }
.w-add:hover { background: color-mix(in srgb, var(--b-primary) 82%, var(--b-ink)); }
.w-add.ok { background: var(--b-secondary); color: var(--b-on-secondary); }

/* branches */
.w-branches { padding: 64px var(--px); }
.w-sec-h p { color: var(--b-muted); font-size: 15px; }
.w-bgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.w-branch { overflow: hidden; border-radius: var(--b-radius); background: var(--b-surface); border: 1px solid var(--b-line); }
/* a real Google map (default map view), to look at only: inert, so a wheel or a finger scrolls the page and Tab skips it */
.w-map { position: relative; height: 200px; background: color-mix(in srgb, var(--b-c4) 32%, var(--b-paper)); }
.w-map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.w-branch-b { display: grid; gap: 4px; padding: 16px; }
.w-branch h5 { font-size: 21px; color: var(--b-secondary); }
.w-branch p { color: var(--b-muted); font-size: 14px; }
.w-branch .w-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; }
.w-open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--b-line); }
.w-branch .w-open.is-open { color: var(--b-secondary); }
.w-open.is-open::before { background: var(--b-c4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-c4) 35%, transparent); }

/* subscription */
.w-sub { padding: 0 var(--px) 64px; }
.w-sub-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: 40px 44px; border-radius: calc(var(--b-radius) * 2); background: var(--b-secondary); color: var(--b-on-secondary); }
.w-sub .w-h2 { font-size: 38px; }
.w-sub-in > div > p { margin-top: 12px; font-size: 16px; max-width: 42ch; }
.w-sub-pick { display: grid; justify-items: start; gap: 14px; }
.w-plans { display: flex; flex-wrap: wrap; gap: 8px; }
.w-plans button { min-height: 42px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--b-on-secondary) 45%, transparent); transition: background-color .2s, color .2s; }
.w-plans button[aria-checked="true"] { background: var(--b-on-secondary); color: var(--b-secondary); }
.w-sub-price { font-size: 15px; }
.w-sub-price b { font: var(--b-display-weight, 700) 28px/1 var(--b-font-display); margin-right: 4px; }
.w-sub-price s { margin-left: 6px; }
.w-sub-done { min-height: 1.45em; font-size: 14px; font-weight: 600; }

/* footer */
.w-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 24px; padding: 40px var(--px) 48px; border-top: 1px solid var(--b-line); background: var(--b-surface); }
.w-foot-brand .x-word { font-size: 22px; color: var(--b-secondary); }
.w-foot-brand p { margin-top: 8px; color: var(--b-muted); font-size: 14px; max-width: 30ch; }
.w-foot h5 { font: 700 14px/1.3 var(--b-font-body); }
.w-foot li { margin-top: 8px; color: var(--b-muted); font-size: 14px; }

/* cart drawer */
.w-scrim { position: absolute; inset: 0; z-index: 5; background: color-mix(in srgb, var(--b-ink) 45%, transparent); opacity: 0; transition: opacity .28s; }
.cart-on .w-scrim { opacity: 1; }
.w-cart { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: min(400px, 100%); display: flex; flex-direction: column; background: var(--b-surface); transform: translateX(102%); transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.cart-on .w-cart { transform: none; }
.w-cart-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--b-line); }
.w-cart-h .w-h3 { font-size: 22px; color: var(--b-secondary); }
.w-x { position: relative; width: 44px; height: 44px; border-radius: 50%; }
.w-x:hover { background: var(--b-paper); }
.w-x i { position: absolute; left: 13px; top: 21px; width: 18px; height: 2px; background: var(--b-ink); transform: rotate(45deg); }
.w-x i + i { transform: rotate(-45deg); }
.w-lines { flex: 1; overflow: auto; padding: 4px 20px; }
.w-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--b-line); }
.w-mini { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--bag) 18%, var(--b-paper)); }
.w-mini svg { height: 46px; width: auto; }
.w-mini .w-cut { height: 46px; width: auto; max-width: 50px; object-fit: contain; }
.w-line-b { display: grid; gap: 2px; font-size: 15px; }
.w-line-b span { color: var(--b-muted); font-size: 13px; }
.w-line-p { font-size: 15px; }
.w-qty { display: inline-flex; align-items: center; gap: 12px; margin-top: 4px; font-weight: 700; }
.w-qty button { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--b-line); font-size: 18px; line-height: 1; text-align: center; }
.w-qty button:hover { box-shadow: inset 0 0 0 1.5px var(--b-primary); color: var(--b-link); }
.w-cart-f { display: grid; gap: 14px; padding: 16px 20px 20px; border-top: 1px solid var(--b-line); }
.w-cart-f .w-btn { width: 100%; }
.w-tot { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 14px; }
.w-tot dt { color: var(--b-muted); }
.w-tot dd { text-align: right; }
.w-tot .w-t { color: var(--b-ink); font-weight: 700; font-size: 17px; }
.w-how { flex: 1; overflow: auto; display: grid; align-content: start; gap: 14px; padding: 20px; }
.w-how-h { font-weight: 700; font-size: 15px; }
.w-opts { display: grid; gap: 10px; }
.w-opts button { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--b-line); font-size: 15px; }
.w-opts button span { color: var(--b-muted); font-size: 13px; }
.w-opts button[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--b-primary); background: color-mix(in srgb, var(--b-primary) 6%, var(--b-surface)); }
.w-where { display: flex; flex-wrap: wrap; gap: 8px; }
.w-where button { min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--b-line); }
.w-where button[aria-checked="true"] { background: var(--b-secondary); color: var(--b-on-secondary); box-shadow: none; }
.w-empty, .w-done { flex: 1; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; font-size: 15px; }
.w-done p { color: var(--b-muted); }
.w-done .w-done-n { color: var(--b-secondary); font: var(--b-display-weight, 700) 26px/1.1 var(--b-font-display); }
.w-check { position: relative; width: 64px; height: 64px; border-radius: 50%; background: var(--b-secondary); }
.w-check::after { content: ""; position: absolute; left: 22px; top: 17px; width: 14px; height: 24px; border: solid var(--b-accent); border-width: 0 4px 4px 0; transform: rotate(45deg); }

/* toast */
.w-toast { position: absolute; z-index: 7; left: 50%; bottom: 20px; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px; background: var(--b-secondary); color: var(--b-on-secondary); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translate(-50%, 16px); transition: opacity .25s, transform .35s cubic-bezier(.2, .7, .2, 1); }
.w-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* medium windows */
@container demo (max-width: 999px) {
  .d-web > * { --px: 32px; }
  .w-hero .w-h1 { font-size: 42px; }
  .w-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: one column, two products a row, nothing under 12 px */
@container demo (max-width: 599px) {
  .d-web > * { --nav-h: 58px; --px: 16px; }
  .w-nav { gap: 6px; }
  .w-logo .x-word { font-size: 21px; }
  .w-links { display: none; }
  .w-menu { display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; margin-left: auto; border-radius: 50%; }
  .w-menu i { display: block; width: 20px; height: 2px; background: var(--b-ink); }
  .w-cartbtn { width: 42px; height: 42px; }
  .w-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px var(--px) 32px; }
  .w-kick { font-size: 13px; }
  .w-hero .w-h1 { margin-top: 12px; font-size: 32px; }
  .w-lead { margin-top: 12px; font-size: 15px; }
  .w-ctas { margin-top: 20px; gap: 8px; }
  .w-btn { min-height: 44px; padding: 0 18px; font-size: 14px; }
  .w-shop, .w-branches { padding: 36px var(--px); }
  .w-shop .w-h2, .w-sec-h .w-h2 { font-size: 27px; }
  .w-tabs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; width: calc(100% + var(--px) * 2); margin: 0 calc(var(--px) * -1); padding: 0 var(--px); scrollbar-width: none; }
  .w-tabs button { min-height: 40px; padding: 0 10px; font-size: 13px; }
  .w-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .w-card-b { padding: 10px 10px 12px; }
  .w-card h5 { font-size: 17px; }
  .w-notes { font-size: 13px; }
  /* the weight or size takes its own line on a phone card, so no line starts with its dot */
  .w-notes > span { display: block; }
  .w-notes .w-dot { display: none; }
  .w-buy { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; }
  .w-buy b { font-size: 15px; }
  .w-add { min-height: 38px; font-size: 13px; }
  .w-tag { left: 8px; top: 8px; padding: 4px 8px; }
  .w-sec-h p { font-size: 13px; }
  .w-bgrid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .w-map { height: 180px; }
  .w-branch-b { padding: 12px; gap: 2px; }
  .w-branch h5 { font-size: 17px; }
  .w-branch p { font-size: 13px; }
  .w-sub { padding: 0 var(--px) 36px; }
  .w-sub-in { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
  .w-sub .w-h2 { font-size: 25px; }
  .w-sub-in > div > p { font-size: 14px; }
  .w-sub-price b { font-size: 24px; }
  .w-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 28px var(--px) 32px; }
  .w-foot-brand { grid-column: 1 / -1; }
  .w-foot li, .w-foot-brand p { font-size: 13px; }
  .w-toast { bottom: 14px; font-size: 13px; }
}

/* very wide windows (2560 screens): the store grows with its window */
@container demo (min-width: 1500px) {
  .d-web > * { --nav-h: 84px; --px: 64px; }
  .w-logo .x-logo { height: 42px; }
  .w-links button { font-size: 18px; }
  .w-cartbtn { width: 54px; height: 54px; }
  .w-hero { gap: 72px; padding-top: 56px; }
  .w-kick { font-size: 17px; }
  .w-hero .w-h1 { font-size: 76px; }
  .w-lead { font-size: 22px; }
  .w-btn { min-height: 58px; padding: 0 30px; font-size: 18px; }
  .w-shop .w-h2, .w-sec-h .w-h2 { font-size: 52px; }
  .w-tabs button { min-height: 50px; padding: 0 22px; font-size: 17px; }
  .w-grid, .w-bgrid { gap: 28px; }
  .w-card h5, .w-branch h5 { font-size: 26px; }
  .w-notes, .w-branch p, .w-sec-h p { font-size: 17px; }
  .w-buy b { font-size: 21px; }
  .w-add { min-height: 50px; padding: 0 22px; font-size: 16px; }
  .w-map { height: 220px; }
  .w-sub .w-h2 { font-size: 48px; }
  .w-sub-in > div > p { font-size: 19px; }
  .w-foot li, .w-foot-brand p { font-size: 17px; }
}