/* ==========================================================================
   Cà Phê Lát: WordPress additions
   brand.css is the approved file and stays untouched. Everything WordPress,
   the shop and the blog need lives here, built from the same tokens and
   components (.btn, .head, .facts, .lot, .rcard, .frame, .sign, .data, .rv).
   1. WordPress chrome     6. Plain pages + prose     11. Cart + checkout
   2. Header additions     7. Blog                    12. Account + thank you
   3. Footer additions     8. Product page            13. Floating buttons
   4. Forms + sign-ups     9. Shop archive            14. Phones
   5. Contact Form 7      10. Notices
   ========================================================================== */

/* 1. WordPress chrome ------------------------------------------------------ */
/* The fixed header sits under the admin bar for logged-in users. */
.admin-bar .bar { top: 32px; }
.admin-bar .menu-panel { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .bar, .admin-bar .menu-panel { top: 46px; }
  #wpadminbar { position: fixed !important; }
}
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* 2. Header additions -------------------------------------------------------
   Five links: tighter gaps on narrower desktops so the bar stays one line. */
@media (max-width: 1180px) and (min-width: 761px) {
  .bar { gap: 32px; }
  .links { gap: 24px; }
}
@media (max-width: 960px) and (min-width: 761px) {
  .bar { gap: 22px; }
  .links { gap: 18px; font-size: 16px; }
  .bar .logo { width: 136px; }
}
.cart-link { position: relative; display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; transition: transform .35s var(--ease), background-color .3s, color .3s; }
.cart-link:hover { transform: translateY(-1px); }
.cart-link svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cart-link b { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--ochre); color: var(--paper); font: 600 11px/20px var(--data); text-align: center; }

/* 3. Footer additions ------------------------------------------------------- */
/* The approved newsletter column was as wide as its old placeholder note;
   the real confirmation is shorter, so the column keeps that width. */
@media (min-width: 761px) { .foot .news { min-width: 369px; } }
.foot-base .foot-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-inline-end: 0; }
.foot-legal a { color: var(--ink-2); }

/* 4. Forms + sign-ups ---------------------------------------------------------- */
.news .hint.err, .waitlist .hint.err { color: var(--ochre); }
.news button:disabled, .waitlist button:disabled { opacity: .6; cursor: progress; }

.waitlist { margin: 0 0 8px; }
.waitlist label { display: block; margin-bottom: 10px; font: 400 clamp(22px, 2vw, 26px)/1.3 var(--display); }
.waitlist .wl-row { display: flex; align-items: center; gap: 16px; }
.waitlist input[type="email"] { flex: 1; min-width: 0; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none; direction: ltr; text-align: right; }
.waitlist input[type="email"]:focus { border-bottom-color: var(--ochre); }
.waitlist .btn { flex: none; }
.waitlist .hint { display: block; margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.waitlist .ok { display: block; height: 0; overflow: hidden; font-size: 15px; font-weight: 500; color: var(--ochre); transition: height .4s; }
.waitlist.done .ok { height: 30px; padding-top: 8px; }
.waitlist.done .wl-row { opacity: .4; pointer-events: none; }
.waitlist.done .hint { display: none; }

/* 5. Contact Form 7 inside the approved .contact-form --------------------- */
.contact-form-wrap { min-width: 0; }
.wpcf7 { margin: 0; }
.wpcf7 .contact-form .wpcf7-form-control-wrap { display: block; }
.wpcf7 .contact-form label + .wpcf7-form-control-wrap, .wpcf7 .contact-form .wpcf7-form-control-wrap + label { margin-top: 0; }
.wpcf7 .contact-form .wpcf7-form-control-wrap + label { margin-top: 24px; }
.wpcf7 .contact-form .wpcf7-not-valid { border-bottom-color: var(--ochre); }
.wpcf7 .contact-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 14px; color: var(--ochre); }
.wpcf7 .contact-form .wpcf7-response-output { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.wpcf7 .contact-form.sent .wpcf7-response-output { color: var(--ochre); font-weight: 500; }
.wpcf7 .contact-form.invalid .wpcf7-response-output, .wpcf7 .contact-form.failed .wpcf7-response-output, .wpcf7 .contact-form.spam .wpcf7-response-output { color: var(--ochre); }
.wpcf7 .contact-form .wpcf7-spinner { display: none; }
.wpcf7 .contact-form.submitting .btn { opacity: .6; pointer-events: none; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wpcf7 form .hidden-fields-container, .wpcf7 form > div[style*="display: none"] { display: none; }

/* 6. Plain pages + prose -------------------------------------------------------- */
.head h1 { font-size: clamp(46px, 6.4vw, 104px); }
.page-head { max-width: 760px; margin: 0 auto clamp(32px, 5vh, 56px); text-align: center; }
.page-head h1 { font-size: clamp(42px, 5.6vw, 84px); }
.page-head .sub { margin-top: 18px; font: 400 clamp(20px, 2vw, 26px)/1.45 var(--display); color: var(--ink-2); }
.plain-page .prose { margin-inline: auto; }

.prose { max-width: 720px; font-size: 19px; line-height: 1.85; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 1.9em; font-size: clamp(30px, 3vw, 42px); line-height: 1.15; }
.prose h3 { margin-top: 1.6em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; }
.prose h4 { margin-top: 1.4em; font: 600 19px/1.4 var(--sans); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose p, .prose li { color: var(--ink); }
.prose a { text-decoration: underline; text-decoration-color: var(--ochre); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s; }
.prose a:hover { color: var(--ochre); }
.prose strong, .prose b { font-weight: 600; }
.prose ul, .prose ol { padding-inline-start: 0; }
.prose ul > li { position: relative; padding-inline-start: 24px; }
.prose ul > li + li, .prose ol > li + li { margin-top: .45em; }
.prose ul > li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .72em; width: 8px; height: 8px; border-radius: 50%; background: var(--ochre); }
.prose ol { counter-reset: n; }
.prose ol > li { position: relative; padding-inline-start: 38px; counter-increment: n; }
.prose ol > li::before { content: counter(n); position: absolute; inset-inline-start: 0; top: -.08em; font: 400 1.4em/1.3 var(--display); color: var(--ochre); }
.prose blockquote { margin-block: 1.6em; padding: 6px 26px 6px 0; padding-inline: 26px 0; border-inline-start: 2px solid var(--ochre); font: 400 clamp(23px, 2.2vw, 29px)/1.5 var(--display); }
.prose blockquote p { color: var(--ink); }
.prose blockquote cite { display: block; margin-top: 10px; font: 400 15px var(--sans); font-style: normal; color: var(--ink-2); }
.prose figure, .prose .wp-block-image { margin-block: 1.8em; }
.prose img { border-radius: 18px; }
.prose figcaption, .prose .wp-element-caption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; }
.prose hr { margin-block: 2.4em; border: 0; border-top: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: start; }
.prose th { color: var(--ink-2); font-weight: 500; }
.prose .wp-block-table { overflow-x: auto; }
.prose code { padding: 2px 6px; border-radius: 6px; background: var(--field-green); font-size: .88em; }
.prose .alignwide { max-width: 980px; margin-inline: calc((720px - 980px) / 2); }
.prose .alignfull { max-width: none; margin-inline: calc(50% - 50vw); }
.prose .alignfull img { border-radius: 0; }
.prose .wp-block-pullquote { padding: 0; border: 0; text-align: start; }
.prose .callout, .prose .wp-block-group.has-background { padding: 22px 26px; border-radius: 18px; background: var(--field-sand); }
.prose .sn-legal h2 { font-size: clamp(26px, 2.6vw, 34px); }

/* 7. Blog -------------------------------------------------------------------------- */
.cats { display: flex; flex-wrap: wrap; gap: 10px; margin: -10px 0 clamp(30px, 5vh, 46px); }
.cats a { padding: 8px 18px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; transition: background-color .3s, color .3s, box-shadow .3s; }
.cats a:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.cats a[aria-current] { background: var(--ink); color: var(--paper); box-shadow: none; }

.rcards.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcard { background: var(--field, var(--field-green)); }
.pcard .pic { display: grid; place-items: center; background: none; }
.pcard .pic img { mix-blend-mode: normal; }
.pcard .pic .symbol { width: 26%; opacity: .26; }
.pcard .txt { align-items: end; }
.pcard h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1.15; }
.pcard p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; }
.pmeta { display: block; margin-bottom: 8px; font-size: 14px; color: var(--ochre); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: clamp(36px, 6vh, 60px); }
.pager .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; }
.pager .page-numbers.current { background: var(--ink); color: var(--paper); box-shadow: none; }
.pager a.page-numbers:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.empty { display: grid; justify-items: center; gap: 18px; padding: clamp(40px, 8vh, 80px) 20px; border-radius: 26px; background: var(--field-green); text-align: center; }
.empty .symbol { width: 56px; opacity: .5; }
.empty p { font: 400 clamp(24px, 2.4vw, 32px)/1.3 var(--display); }

.post-head { max-width: 860px; margin: 0 auto clamp(28px, 5vh, 50px); text-align: center; }
.post-head .pmeta { margin-bottom: 18px; font-size: 15px; }
.post-head .pmeta a { border-bottom: 1px solid currentColor; }
.post-head h1 { font-size: clamp(44px, 6vw, 92px); line-height: 1.04; }
.post-head .sub { max-width: 34em; margin: 22px auto 0; font: 400 clamp(21px, 2.1vw, 28px)/1.45 var(--display); color: var(--ink-2); }
.post-cover { max-width: 1180px; margin: 0 auto clamp(40px, 7vh, 72px); }
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 26px; }
.post .prose { margin-inline: auto; }
.post-end { max-width: 720px; margin: clamp(40px, 6vh, 60px) auto 0; padding-top: 26px; border-top: 1px solid var(--line); }
.post-related { margin-top: clamp(64px, 10vh, 110px); padding-top: clamp(40px, 6vh, 60px); border-top: 1px solid var(--line); }
.post-related .head h2 { font-size: clamp(34px, 3.8vw, 56px); }

/* 8. Product page ------------------------------------------------------------------ */
.pdp { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.pdp-gallery { position: sticky; top: 104px; min-width: 0; }
.admin-bar .pdp-gallery { top: 136px; }
.pdp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 26px; background: var(--field); outline-offset: 4px; overscroll-behavior-x: contain; }
.pdp-track::-webkit-scrollbar { display: none; }
.pdp-slide { flex: 0 0 100%; display: grid; place-items: center; aspect-ratio: 1 / 1; margin: 0; padding: clamp(28px, 5vw, 70px); scroll-snap-align: start; }
.pdp-slide.is-label img { width: auto; max-width: 62%; max-height: 100%; border-radius: 6px; box-shadow: 0 30px 50px -28px rgba(35, 63, 46, .55), 0 2px 6px rgba(35, 63, 46, .12); }
.pdp-slide.is-art { padding: clamp(18px, 3vw, 40px); }
.pdp-slide.is-art img { width: 100%; height: auto; border-radius: 16px; mix-blend-mode: multiply; }
.pdp-thumbs { display: flex; gap: 12px; margin-top: 14px; }
.pdp-thumbs button { display: grid; place-items: center; width: 76px; height: 76px; padding: 8px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px transparent; opacity: .6; transition: opacity .3s, box-shadow .3s; }
.pdp-thumbs button img { max-width: 100%; max-height: 100%; width: auto; border-radius: 3px; mix-blend-mode: multiply; }
.pdp-thumbs button:hover { opacity: .9; }
.pdp-thumbs button[aria-current] { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--ink); }

.pdp-info { min-width: 0; padding-top: 6px; }
.pdp-info h1 { margin: 20px 0 10px; font-size: clamp(46px, 5.6vw, 88px); }
.pdp-info .data.big { display: block; font-size: 14px; color: var(--ochre); }
.pdp-lead { margin-top: 22px; font: 400 clamp(20px, 1.8vw, 24px)/1.5 var(--display); color: var(--ink); }
.pdp-lead p + p { margin-top: .6em; }
.pdp-info .price { margin: 26px 0 22px; padding: 18px 22px; border-radius: 16px; background: var(--field-green); font-size: 16px; color: var(--ink-2); }
.pdp-info .price b { display: block; font: 500 24px var(--display); color: var(--ink); }
.pdp-info .facts { margin-top: 28px; }
.pdp-info .facts div { padding: 15px 0; font-size: 18px; }
.pdp-note { margin: -8px 0 0; }

.pdp-cart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pdp-cart .btn { flex: 1; justify-content: space-between; min-width: 200px; padding-block: 16px; }
.qty-stepper { display: inline-flex; align-items: center; height: 54px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--ink); }
.qty-stepper .quantity { display: flex; }
.qty-stepper .qty { width: 46px; height: 54px; padding: 0; background: none; border: 0; text-align: center; font: 500 18px var(--data); -moz-appearance: textfield; appearance: textfield; }
.qty-stepper .qty::-webkit-outer-spin-button, .qty-stepper .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 46px; height: 54px; font-size: 22px; line-height: 1; }
.qty-btn:hover { color: var(--ochre); }
.stock { margin-bottom: 12px; font-size: 15px; color: var(--ink-2); }
.stock.out-of-stock { color: var(--ochre); }

.pdp-about, .pdp-brew, .pdp-ship { margin-top: clamp(64px, 10vh, 110px); padding-top: clamp(40px, 6vh, 60px); border-top: 1px solid var(--line); }
.pdp-about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 100px); }
.pdp-about h2, .pdp-ship h2 { font-size: clamp(32px, 3.2vw, 48px); }
.pdp-brew .head h2 { font-size: clamp(32px, 3.2vw, 48px); }
.brew-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 22px); }
.brew-list a { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; padding-inline: 12px 18px; border-radius: 99px; background: var(--field-green); transition: transform .5s var(--ease), background-color .3s; }
.brew-list a:nth-child(even) { background: var(--field-sand); }
.brew-list a:hover { transform: translateY(-3px); }
.brew-list img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; mix-blend-mode: multiply; }
.brew-list span { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.brew-list b { display: block; margin-bottom: 2px; font: 500 20px/1.2 var(--display); color: var(--ink); }
.brew-list i { font-style: normal; font-size: 18px; transition: transform .4s var(--ease); }
.brew-list a:hover i { transform: translateX(-4px); }
.pdp-ship { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px clamp(30px, 6vw, 100px); align-items: start; }
.pdp-ship > div { font-size: 18px; color: var(--ink-2); }
.pdp-ship .lnk { grid-column: 2; justify-self: start; }
.pdp-page .landscape { margin-top: clamp(50px, 8vh, 90px); }
.pdp-more { margin-top: clamp(64px, 10vh, 110px); padding-top: clamp(40px, 6vh, 60px); border-top: 1px solid var(--line); }
.pdp-more .head h2 { font-size: clamp(34px, 3.8vw, 56px); }

.pdp-sticky { position: fixed; inset: auto 0 0; z-index: 18; display: flex; align-items: center; gap: 14px; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(244, 241, 232, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(100%); transition: transform .45s var(--ease); }
.pdp-sticky.on { transform: none; }
.pdp-sticky[hidden] { display: none; }
.pdp-sticky-name { flex: 1; min-width: 0; line-height: 1.25; }
.pdp-sticky-name b { display: block; overflow: hidden; font: 500 19px var(--display); white-space: nowrap; text-overflow: ellipsis; }
.pdp-sticky-name small { font-size: 13px; color: var(--ink-2); }
.pdp-sticky .btn { flex: none; padding: 12px 18px; font-size: 15px; }

/* 9. Shop archive -------------------------------------------------------------------- */
.shop-page { border-top: 0; }

/* 10. Notices -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 26px; padding: 16px 22px; border-radius: 16px; background: var(--field-green); color: var(--ink); font-size: 16px; list-style: none; }
.woocommerce-info { background: var(--field-sand); }
.woocommerce-error { background: #F1DFD3; }
.woocommerce-error li + li { margin-top: 4px; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; }
.woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a { border-bottom: 1px solid currentColor; }

/* Shared WooCommerce buttons and fields, in the brand shapes */
.woo-page .button, .woocommerce-message .button, .woocommerce-info .button, .woo-page button[type="submit"]:not(.qty-btn), .woo-page .checkout-button, #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 26px; border: 0; border-radius: 99px;
  background: var(--ink); color: var(--paper); font: 500 16px/1.2 var(--sans); cursor: pointer; transition: transform .4s var(--ease), background-color .3s, color .3s, opacity .3s;
}
.woo-page .button:hover, .woocommerce-message .button:hover, .woo-page button[type="submit"]:hover, #place_order:hover { transform: translateY(-2px); }
.woo-page .button:disabled, .woo-page .button.disabled, .woo-page button:disabled { opacity: .45; cursor: default; transform: none; }
.woo-page button[name="update_cart"]:not(.qty-btn), .woo-page button[name="apply_coupon"]:not(.qty-btn), .woo-page .woocommerce-Button--previous, .woo-page .woocommerce-button.view, .woo-page .button.wc-backward:not(.qty-btn) { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.woo-page button[name="update_cart"]:not(:disabled):hover, .woo-page button[name="apply_coupon"]:not(.qty-btn):hover, .woo-page .button.wc-backward:hover { background: var(--ink); color: var(--paper); }

.woo-page .form-row { display: flex; flex-direction: column; margin: 0 0 20px; }
.woo-page .form-row label { margin-bottom: 4px; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.woo-page .form-row label .required { color: var(--ochre); text-decoration: none; border: 0; }
.woo-page .form-row label .optional { font-weight: 400; }
.woo-page input.input-text, .woo-page textarea, .woo-page select, .woo-page .select2-selection {
  width: 100%; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; outline: none; font: inherit; color: var(--ink);
}
.woo-page select { -webkit-appearance: none; appearance: none; padding-inline-end: 0; background: linear-gradient(45deg, transparent 50%, var(--ink) 50%) left 6px center / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink) 50%) left 0 center / 6px 6px no-repeat; }
.woo-page input.input-text:focus, .woo-page textarea:focus, .woo-page select:focus { border-bottom-color: var(--ochre); }
.woo-page input[type="email"], .woo-page input[type="tel"], .woo-page input#billing_postcode, .woo-page input#shipping_postcode { direction: ltr; text-align: right; }
.woo-page .form-row.woocommerce-invalid input.input-text { border-bottom-color: #A2462B; }
.woo-page .woocommerce-form__label-for-checkbox, .woo-page .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; color: var(--ink); cursor: pointer; }
.woo-page input[type="checkbox"], .woo-page input[type="radio"] { width: 18px; height: 18px; accent-color: var(--ink); }
.woo-page .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4vw, 60px); }
.woo-page .col2-set .col-1, .woo-page .col2-set .col-2 { min-width: 0; }
.woo-page h2, .woo-page h3 { margin-bottom: 20px; font-size: clamp(26px, 2.6vw, 36px); }
.woo-page .page-head { margin-bottom: clamp(28px, 4vh, 44px); }
.woo-page .page-head h1 { font-size: clamp(42px, 5vw, 76px); }
.woo-page .woo-body { max-width: 1180px; margin-inline: auto; }
.woo-page table { width: 100%; border-collapse: collapse; }
.woo-page .card, .woo-page .cart_totals, .woo-page .woocommerce-checkout-review-order, .woo-page .woocommerce-form-login, .woo-page .woocommerce-form-register, .woo-page .woocommerce-ResetPassword, .woo-page .woocommerce-MyAccount-content > form {
  padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: var(--field-green);
}

/* 11. Cart + checkout ------------------------------------------------------------- */
.woocommerce-cart-form { min-width: 0; }
.woo-page.is-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.woo-page.is-cart .woocommerce > .woocommerce-notices-wrapper, .woo-page.is-cart .woocommerce > .cart-empty, .woo-page.is-cart .woocommerce > .return-to-shop, .woo-page.is-cart .woocommerce > .wc-empty-cart-message { grid-column: 1 / -1; }
.shop_table.cart { border-top: 1px solid var(--ink); }
.shop_table.cart thead { display: none; }
.shop_table.cart tr.cart_item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; grid-template-areas: "pic name qty sub" "pic price qty rm"; gap: 4px 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.shop_table.cart td { padding: 0; border: 0; }
.shop_table.cart .product-thumbnail { grid-area: pic; }
.shop_table.cart .product-thumbnail img { width: 96px; height: 116px; padding: 10px; object-fit: contain; border-radius: 14px; background: var(--field-green); }
.shop_table.cart .product-name { grid-area: name; font: 500 22px/1.2 var(--display); }
.shop_table.cart .product-price { grid-area: price; font-size: 15px; color: var(--ink-2); }
.shop_table.cart .product-quantity { grid-area: qty; }
.shop_table.cart .product-subtotal { grid-area: sub; text-align: end; font: 500 20px var(--display); }
.shop_table.cart .product-remove { grid-area: rm; justify-self: end; }
.shop_table.cart .product-remove a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); font-size: 18px; color: var(--ink-2); }
.shop_table.cart .product-remove a:hover { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.shop_table.cart .quantity .qty { width: 64px; padding: 10px 0; border: 0; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--ink); background: none; text-align: center; font: 500 16px var(--data); }
.shop_table.cart td.actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 22px 0 0; }
.shop_table.cart td.actions .coupon { display: flex; flex: 1; gap: 12px; min-width: 260px; }
.shop_table.cart td.actions .coupon label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.shop_table.cart td.actions .coupon .input-text { flex: 1; min-width: 0; }
.shop_table.cart [data-title]::before { display: none; }
.cart-collaterals .cross-sells { display: none; }
.cart_totals h2 { font-size: 30px; }
.cart_totals table th, .cart_totals table td, .woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: start; font-weight: 400; vertical-align: top; }
.cart_totals table th, .woocommerce-checkout-review-order-table tfoot th { color: var(--ink-2); }
.cart_totals table td, .woocommerce-checkout-review-order-table td.product-total, .woocommerce-checkout-review-order-table tfoot td { text-align: end; }
.cart_totals .order-total th, .cart_totals .order-total td, .woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { border-bottom: 0; padding-top: 16px; font: 500 22px var(--display); color: var(--ink); }
.woocommerce-shipping-methods { display: grid; gap: 6px; }
.woocommerce-shipping-methods li { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.woocommerce-shipping-calculator .shipping-calculator-button { border-bottom: 1px solid currentColor; font-size: 14px; }
.wc-proceed-to-checkout { margin-top: 22px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; justify-content: space-between; padding-block: 16px; }
.wc-proceed-to-checkout .checkout-button::after { content: '←'; }
.cart-empty, .wc-empty-cart-message { padding: clamp(36px, 6vh, 60px) 20px; border-radius: 22px; background: var(--field-green); text-align: center; font: 400 clamp(24px, 2.4vw, 32px)/1.3 var(--display); }
.cart-empty::before { display: none; }
.return-to-shop { margin-top: 22px; text-align: center; }

form.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 clamp(26px, 4vw, 70px); align-items: start; }
form.checkout > .col2-set { grid-column: 1; grid-row: 1 / span 3; display: block; }
form.checkout > .col2-set .col-2 { margin-top: 34px; }
form.checkout > #order_review_heading { grid-column: 2; grid-row: 1; }
form.checkout > #order_review { grid-column: 2; grid-row: 2; position: sticky; top: 110px; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.woocommerce-billing-fields__field-wrapper .form-row-wide, .woocommerce-shipping-fields__field-wrapper .form-row-wide, .woocommerce-billing-fields__field-wrapper #billing_address_1_field, .woocommerce-billing-fields__field-wrapper #billing_address_2_field, .woocommerce-shipping-fields__field-wrapper #shipping_address_1_field, .woocommerce-shipping-fields__field-wrapper #shipping_address_2_field { grid-column: 1 / -1; }
#ship-to-different-address { margin: 0 0 18px; font: 400 18px var(--sans); }
.woocommerce-additional-fields h3 { margin-top: 10px; font-size: 24px; }
.woocommerce-checkout-review-order-table thead { display: none; }
.woocommerce-checkout-review-order-table td.product-name { font: 500 19px var(--display); }
.woocommerce-checkout-review-order-table .product-quantity { font: 500 14px var(--data); color: var(--ochre); }
#payment { margin-top: 18px; }
#payment .payment_methods { display: grid; gap: 10px; margin-bottom: 18px; }
#payment .payment_methods > li { padding: 14px 16px; border-radius: 14px; background: var(--paper); }
#payment .payment_methods > li > label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
#payment .payment_box { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
#payment .woocommerce-notice, #payment .woocommerce-info { margin: 0 0 16px; }
.woocommerce-terms-and-conditions-wrapper { margin: 14px 0; font-size: 14px; color: var(--ink-2); }
.woocommerce-terms-and-conditions-wrapper a { border-bottom: 1px solid currentColor; }
#place_order { width: 100%; justify-content: space-between; padding-block: 17px; font-size: 17px; }
.woocommerce-form-coupon-toggle .woocommerce-info, .woocommerce-form-login-toggle .woocommerce-info { justify-content: flex-start; }
form.checkout_coupon { display: flex; gap: 12px; margin-bottom: 26px; padding: 20px 22px; border-radius: 16px; background: var(--field-sand); }
form.checkout_coupon p:first-child { display: none; }
form.checkout_coupon .form-row { flex: 1; margin: 0; }
.select2-container .select2-selection--single { height: auto; }
.select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: 1.7; color: var(--ink); }
.select2-dropdown { border-color: var(--line); border-radius: 12px; }

/* 12. Account + thank you ------------------------------------------------------------- */
.woo-page.is-account .woocommerce { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: start; }
.woo-page.is-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woo-page.is-account .woocommerce > .u-columns, .woo-page.is-account .woocommerce > .woocommerce-form-login, .woo-page.is-account .woocommerce > .woocommerce-ResetPassword, .woo-page.is-account .woocommerce > h2 { grid-column: 1 / -1; }
.woo-page.is-account .woocommerce > .woocommerce-form-login { width: 100%; max-width: 520px; margin-inline: auto; }
.woocommerce-MyAccount-navigation ul { border-top: 1px solid var(--ink); }
.woocommerce-MyAccount-navigation li a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 17px; color: var(--ink-2); transition: color .2s; }
.woocommerce-MyAccount-navigation li a::after { content: '←'; opacity: 0; transition: opacity .2s, transform .4s var(--ease); }
.woocommerce-MyAccount-navigation li a:hover, .woocommerce-MyAccount-navigation li.is-active a { color: var(--ink); }
.woocommerce-MyAccount-navigation li.is-active a { font-weight: 500; }
.woocommerce-MyAccount-navigation li.is-active a::after, .woocommerce-MyAccount-navigation li a:hover::after { opacity: 1; }
.woocommerce-MyAccount-content { min-width: 0; font-size: 17px; }
.woocommerce-MyAccount-content > p { margin-bottom: 1em; color: var(--ink-2); }
.woocommerce-MyAccount-content > p a, .woocommerce-MyAccount-content mark { border-bottom: 1px solid currentColor; background: none; color: var(--ink); }
.woocommerce-orders-table th, .woocommerce-orders-table td, .woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--line); text-align: start; font-weight: 400; }
.woocommerce-orders-table thead th, .woocommerce-table--order-details thead th { color: var(--ink-2); font-size: 14px; }
.woocommerce-orders-table .button { padding: 8px 16px; font-size: 14px; }
.u-columns.col2-set .u-column1, .u-columns.col2-set .u-column2 { padding: clamp(24px, 3vw, 40px); border-radius: 22px; background: var(--field-green); }
.u-columns.col2-set .u-column2 { background: var(--field-sand); }
.u-columns .woocommerce-form-login, .u-columns .woocommerce-form-register { padding: 0; background: none; }
.woocommerce-LostPassword a, .lost_password a { border-bottom: 1px solid currentColor; font-size: 15px; }
.woocommerce-Address { padding: 22px; border-radius: 18px; background: var(--field-green); }
.woocommerce-Address address { font-style: normal; color: var(--ink-2); }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: baseline; }
.woocommerce-Address-title h2 { font-size: 24px; }
.woocommerce-Address-title a { font-size: 14px; border-bottom: 1px solid currentColor; }
.woocommerce-password-strength { margin-top: 6px; font-size: 13px; color: var(--ink-2); }

.woocommerce-order { max-width: 860px; margin-inline: auto; }
.woocommerce-thankyou-order-received { margin-bottom: 26px; padding: clamp(26px, 4vw, 44px); border-radius: 22px; background: var(--ink); color: var(--paper); text-align: center; font: 400 clamp(24px, 2.6vw, 34px)/1.4 var(--display); }
.woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: clamp(36px, 6vh, 56px); }
.woocommerce-order-overview li { padding: 16px 18px; border-radius: 16px; background: var(--field-green); font-size: 14px; color: var(--ink-2); }
.woocommerce-order-overview li:nth-child(even) { background: var(--field-sand); }
.woocommerce-order-overview li strong { display: block; margin-top: 4px; font: 500 18px var(--display); color: var(--ink); }
.woocommerce-order-details, .woocommerce-customer-details { margin-bottom: clamp(30px, 5vh, 48px); }
.woocommerce-customer-details address { padding: 22px; border-radius: 18px; background: var(--field-green); font-style: normal; color: var(--ink-2); }
.woocommerce-customer-details .woocommerce-column__title, .woocommerce-order-details__title { font-size: clamp(24px, 2.4vw, 32px); }

/* 13. Floating buttons (SN Accessibility & WhatsApp), in the brand ----------------- */
.sn-a11y-fab, .sn-wa-fab { transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s, background-color .35s, color .35s, bottom .3s ease !important; }
.sn-a11y-fab.cpl-on-dark, .sn-wa-fab.cpl-on-dark { background: var(--paper) !important; color: var(--ink) !important; }
/* Home and story pages: the buttons wait until the film is over. They stay
   reachable from the keyboard (Tab or Alt+Shift+A) the whole time. */
html.cpl-fab-wait .sn-a11y-fab:not(:focus-visible), html.cpl-fab-wait .sn-wa-fab:not(:focus-visible),
html.menu-open .sn-a11y-fab, html.menu-open .sn-wa-fab {
  opacity: 0; transform: translateY(14px) scale(.9) !important; pointer-events: none;
}
html.menu-open .sn-a11y-fab, html.menu-open .sn-wa-fab, html.menu-open .sn-a11y-panel { visibility: hidden; }
html.cpl-sticky .sn-a11y-fab, html.cpl-sticky .sn-wa-fab { bottom: calc(14px + var(--sticky-h, 0px)) !important; }
html.cpl-sticky .sn-a11y-panel { bottom: calc(78px + var(--sticky-h, 0px)) !important; }

/* 404 */
.notfound { display: grid; place-items: center; min-height: 70vh; text-align: center; }
.notfound .symbol { width: 64px; margin: 0 auto 26px; }
.notfound h1 { font-size: clamp(44px, 6vw, 92px); }
.notfound p { max-width: 30em; margin: 20px auto 30px; font-size: 19px; color: var(--ink-2); }
.notfound .row, .pdp-info .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* 14. Phones ------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .rcards.posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brew-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .woo-page.is-cart .woocommerce, form.checkout, .woo-page.is-account .woocommerce { grid-template-columns: minmax(0, 1fr); }
  form.checkout > .col2-set, form.checkout > #order_review_heading, form.checkout > #order_review { grid-column: 1; grid-row: auto; position: static; }
  form.checkout > #order_review_heading { margin-top: 36px; }
}
@media (max-width: 760px) {
  .cart-link { width: 42px; height: 42px; margin-inline-start: auto; }
  .cart-link:not(.has-items) { display: none; }
  .cart-link.has-items + .pill { display: none; }

  .foot-base .foot-legal { order: 4; display: flex; justify-content: center; gap: 6px 18px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; }
  .foot-base .foot-legal a { padding: 0; border-bottom: 0; font-size: 14px; color: var(--ink-2); }
  .foot-legal ~ span { order: 5; }
  .foot-legal ~ span + span { order: 6; }
  .foot-legal + span { margin-top: 14px; padding-top: 0; border-top: 0; }

  .waitlist .wl-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .waitlist .btn { justify-content: space-between; }

  .prose { font-size: 17.5px; line-height: 1.8; }
  .prose .alignwide { margin-inline: 0; }
  .rcards.posts { grid-template-columns: minmax(0, 1fr); }
  .post-head { text-align: start; }
  .post-head .sub { margin-inline: 0; }
  .post-cover img { border-radius: 18px; aspect-ratio: 4 / 3; }
  .page-head { text-align: start; }

  .pdp { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pdp-gallery { position: static; margin-inline: calc(var(--pad) * -1); }
  .pdp-track { border-radius: 0; }
  .pdp-slide { aspect-ratio: 4 / 4.4; }
  .pdp-slide.is-label img { max-width: 58%; }
  .pdp-thumbs { justify-content: center; gap: 8px; margin-top: 12px; }
  .pdp-thumbs button { width: 10px; height: 10px; padding: 0; border-radius: 50%; background: var(--line); opacity: 1; box-shadow: none; }
  .pdp-thumbs button img { display: none; }
  .pdp-thumbs button[aria-current] { width: 26px; border-radius: 99px; background: var(--ink); box-shadow: none; }
  .pdp-info h1 { margin-top: 14px; }
  .pdp-cart .btn { min-width: 0; }
  .pdp-about, .pdp-ship { grid-template-columns: minmax(0, 1fr); }
  .pdp-ship .lnk { grid-column: 1; }
  .brew-list { grid-template-columns: minmax(0, 1fr); }
  .head h1 { font-size: clamp(42px, 12vw, 64px); }

  .woo-page .col2-set, .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: minmax(0, 1fr); }
  .shop_table.cart tr.cart_item { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "pic name rm" "pic price price" "pic qty sub"; }
  .shop_table.cart .product-thumbnail img { width: 76px; height: 96px; }
  .shop_table.cart .product-name { font-size: 19px; }
  .shop_table.cart td.actions .coupon { min-width: 0; flex-basis: 100%; }
  .woocommerce-orders-table thead { display: none; }
  .woocommerce-orders-table tr { display: grid; grid-template-columns: 1fr 1fr; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .woocommerce-orders-table td { padding: 4px 0; border: 0; }
  .woocommerce-orders-table td::before { content: attr(data-title) ': '; color: var(--ink-2); font-size: 13px; }
}

/* Legal drafts: the note and the parts still to fill in */
.legal-draft-note { margin-bottom: 2em; padding: 16px 20px; border-radius: 14px; background: #F1DFD3; font-size: 16px; }
.prose mark { padding: 0 4px; border-radius: 4px; background: #F3E2B6; color: var(--ink); }
.prose .sn-legal > * + * { margin-top: 1.05em; }
.prose .sn-legal h2 { margin-top: 1.9em; }
.prose .sn-legal h2 + * { margin-top: .6em; }
.prose .sn-legal .sn-legal-lede { font: 400 clamp(20px, 2vw, 25px)/1.5 var(--display); }
/* Order details (thank-you page and account): amounts sit at the far edge */
.woocommerce-table--order-details th:last-child, .woocommerce-table--order-details td:last-child { text-align: end; }
.woocommerce-table--order-details tfoot th { color: var(--ink-2); }
.woo-page td .button + .button, .woocommerce-table--order-details .order-actions-button + .order-actions-button { margin-inline-start: 8px; }
.woocommerce-table--order-details .order-actions-button { padding: 9px 18px; font-size: 14px; }