/* Final shared accessibility and small-screen safeguards; load last. */
[hidden] { display: none !important; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid #126650; outline-offset: 4px; box-shadow: 0 0 0 2px #fffdf7; }
.site-footer :focus-visible { outline-color: #f7f3e9; box-shadow: none; }
input, select, textarea { font-size: 1rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; }
input[type="checkbox"], input[type="radio"] { accent-color: #083c30; }
.order-fields, .field, .field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.navlinks a, .nav-action > a, .nav-actions > a, .languages a, .language-switcher a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.navlinks a { font-size: .875rem !important; }
.nav-actions { transform: none !important; }
.release-legal, .footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.release-legal a, .footer-legal a, .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
.release-legal a, .footer-legal a { text-decoration: underline; text-underline-offset: .18em; }
.footer-bottom { flex-wrap: wrap; }
.footer-contact a { overflow-wrap: anywhere; }
.release-enquiry-note { font-size: 1rem; line-height: 1.55; }
.recipe-dialog__close { min-width: 44px; min-height: 44px; flex: 0 0 44px; }
.recipe-dialog { overscroll-behavior: contain; }
.seo-recipe-methods details { scroll-margin-top: 190px; }
.seo-recipe-methods summary { min-height: 44px; padding-block: 12px; cursor: pointer; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px 16px; background: #083c30; color: #fffdf7; font-weight: 800; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 760px) {
  html { scroll-padding-top: 190px; }
  .topbar .nav { height: auto; min-height: 78px; gap: 8px 12px; padding-block: 8px; }
  .topbar .navlinks { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; gap: 0 6px !important; overflow: visible; white-space: normal; }
  .topbar .navlinks a { flex: 0 1 auto; min-width: 44px; padding: 4px 6px !important; font-size: .875rem !important; letter-spacing: .02em !important; }
  .nav-actions { flex-wrap: wrap; gap: 4px !important; }
  .languages a, .language-switcher a { min-width: 36px !important; padding-inline: 6px !important; }
  .hero-copy .btn, .btn, .button { font-size: .875rem !important; min-height: 44px; }
  .recipe-dialog__image img { height: 100%; }
  .release-legal { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .topbar .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding-block: 8px; }
  .topbar .nav > .wordmark, .topbar .nav > .brand { grid-column: 1; grid-row: 1; }
  .topbar .nav > .nav-action, .topbar .nav > .nav-actions, .topbar .nav > .langs { grid-column: 2; grid-row: 1; }
  .topbar .nav > .navlinks { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; min-width: 0; }
}

.site-footer .footer-brand > img { filter: brightness(0) invert(1) !important; opacity: 1 !important; }

/* Product details are separate from enquiry actions. */
.product-copy h2 a, .can-copy h3 a { color: inherit; text-decoration: none; }
.product-copy h2 a:hover, .can-copy h3 a:hover { text-decoration: underline; text-underline-offset: .12em; }
.product-media-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-media-link img { max-width: 100%; object-fit: contain; }
.product-detail-link { display: inline-flex; align-items: center; min-height: 44px; margin-block: 8px 16px; font-weight: 800; text-decoration: underline; text-underline-offset: .2em; }
.product-order-note { font-size: .9rem; line-height: 1.6; }

@media (max-width: 760px) {
  .detail-page .detail-order { position: static; margin-top: 24px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; box-shadow: none; backdrop-filter: none; grid-template-columns: 1fr; justify-items: center; }
}

body:has(.detail-page) { padding-bottom: 0; }

/* Keep article contact and menu controls inside narrow phone headers. */
@media(max-width:380px){
 header.top .nav{gap:8px}
 header.top .brand img{width:96px}
 header.top .navlinks:not(.open){min-width:0;flex:1}
 header.top .navlinks:not(.open) .cta{min-width:0;max-width:100%;padding:8px 6px;white-space:normal;text-align:center;line-height:1.25}
}

@media(max-width:380px){.legal h1{font-size:clamp(1.9rem,9vw,2.1rem);overflow-wrap:anywhere}}

/* Let the brand and navigation scroll naturally, keeping the reading area clear. */
.topbar, header.top, .hl-section-bar { position: relative !important; top: auto !important; backdrop-filter: none; }
.topbar .wordmark img { width: 72px; height: 48px; object-fit: contain; }
html { scroll-padding-top: 24px !important; }
.home-range, .product-section, .product-grade, .cafe-enquiry, [id="grades"], [id="products"], [id="shop"] { scroll-margin-top: 24px !important; }
.blog-drawer-toggle { position: static !important; inset: auto !important; transform: none !important; writing-mode: horizontal-tb !important; width: auto !important; min-height: 44px !important; margin: 0 0 20px; border-radius: 999px !important; padding: 10px 18px !important; }

/* One consistent horizontal brand mark; no floating navigation. */
.topbar .wordmark { display:flex!important; flex-direction:row!important; justify-content:flex-start!important; align-items:center!important; width:150px!important; max-width:150px!important; height:54px!important; gap:9px!important; padding:0!important; font-family:var(--sans,sans-serif)!important; font-size:12px!important; font-weight:800!important; letter-spacing:.09em!important; line-height:1.2!important; white-space:nowrap; }
.topbar .wordmark::before { content:""!important; display:block!important; position:static!important; width:40px!important; height:32px!important; flex:0 0 40px; background:url('/assets/happy-latte-banner-cloud-cutout.png') center/contain no-repeat!important; }
.topbar .wordmark::after { content:"HAPPY LATTE"!important; position:static!important; }
.topbar .wordmark img { display:none!important; }
.product-uses { display:flex; flex-wrap:wrap; gap:8px 18px; padding:0; margin:12px 0 0; list-style:none; color:#36594f; }
.product-uses li { display:flex; gap:7px; align-items:center; padding:0; font-family:var(--sans,sans-serif); font-size:.83rem; line-height:1.4; }
.product-uses svg { width:22px; height:22px; flex:0 0 22px; }
.product-story .product-uses { margin:16px 0 20px; }

/* Calm navigation and unframed product photography. */
.topbar { border-bottom:1px solid #d8ded3!important; background:#f7f3e9!important; }
.topbar .nav { display:flex!important; flex-wrap:wrap; align-items:center; gap:16px!important; min-height:88px!important; padding-block:12px!important; }
.topbar .wordmark { width:148px!important; max-width:148px!important; margin:0 auto 0 0!important; font-family:Arial,sans-serif!important; font-size:12px!important; letter-spacing:.12em!important; }
.topbar .wordmark::before { width:36px!important; height:32px!important; flex-basis:36px!important; }
.topbar .navlinks { display:flex; width:auto!important; margin:0!important; padding:0!important; border:0!important; gap:6px 20px!important; }
.topbar .navlinks a { font-family:Arial,sans-serif!important; font-weight:500!important; font-size:.9rem!important; text-transform:none!important; letter-spacing:0!important; padding:6px 2px!important; border:0!important; }
.topbar .navlinks a[aria-current="page"] { text-decoration:underline; text-underline-offset:7px; }
.topbar .nav-action,.topbar .nav-actions { margin:0!important; }
.topbar .nav-action > a,.topbar .contact-link { display:none!important; }
.topbar .languages,.topbar .language-switcher { background:transparent!important; border:0!important; box-shadow:none!important; }
.header-menu-toggle { display:none; min-height:44px; border:1px solid #bfcbbd; border-radius:5px; padding:8px 12px; background:transparent; color:#083c30; font:500 14px Arial,sans-serif; }
.home-product-image,.product-story .detail-visual,.product-media,.grade-image-link,.product-related a { background:transparent!important; border-radius:0!important; box-shadow:none!important; }
.product-story .detail-visual { min-height:340px; }
.product-story .detail-copy h1 { font-family:var(--sans)!important; text-transform:none!important; font-size:clamp(2rem,3.2vw,3rem)!important; line-height:1.12!important; letter-spacing:-.035em; }
.product-quality-icon { display:flex; align-items:center; margin-bottom:14px; color:#36594f; }
.product-quality-icon svg { width:34px; height:34px; }
.product-quality-grid article { border:0!important; padding:0!important; }
.product-quality-grid h3 { font-size:1.08rem; }
.delivery-note { display:flex; gap:12px; align-items:flex-start; padding:20px 0; margin-top:18px; border-top:1px solid #d8ded3; color:#36594f; }
.delivery-note>svg { width:27px; height:27px; flex:0 0 27px; }
.delivery-note strong { display:block; font-size:.95rem; }
.delivery-note p { margin:6px 0!important; font-size:.85rem!important; line-height:1.55!important; max-width:52ch; }
.delivery-note a { display:inline-flex; align-items:center; min-height:44px; font-size:.85rem; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1100px){
 .topbar .nav{gap:4px 10px!important;min-height:76px!important}
 .topbar .wordmark{width:140px!important;max-width:140px!important;font-size:11px!important;gap:7px!important}
 .topbar .header-menu-toggle{display:block;order:3}
 .topbar .nav-action,.topbar .nav-actions{order:2}
 .topbar .navlinks{order:4;width:100%!important;justify-content:flex-start!important;flex-direction:column;align-items:stretch;gap:0!important;padding-top:12px!important}
 .topbar.menu-ready:not(.menu-open) .navlinks{display:none!important}
 .topbar .navlinks a{justify-content:flex-start!important;min-height:46px!important;padding:8px 4px!important;border-top:1px solid #d8ded3!important;font-size:1rem!important}
 .topbar .languages a,.topbar .language-switcher a{min-width:28px!important;width:28px!important;padding:3px!important}
}
@media(max-width:400px){.topbar .nav{gap:3px 6px!important}.topbar .wordmark{width:125px!important;max-width:125px!important;font-size:10px!important;gap:5px!important}.topbar .wordmark::before{width:28px!important;flex-basis:28px!important}.header-menu-toggle{padding:8px;font-size:12px}.topbar .languages,.topbar .language-switcher{gap:0!important;padding:0!important}}

/* Clip residual extraction fringe at the pouch silhouette without changing its label. */
img[src*="ube-clean-v4"] { clip-path:polygon(17% 6%,87% 6%,90% 7%,91.5% 9%,90% 90%,89% 92%,85% 93.5%,30% 94%,19% 92.5%,16% 90%,13.5% 10%,14% 8%); }
@media(max-width:1100px){.topbar:not(.menu-ready) .header-menu-toggle{display:none}}
img[src*="ube-clean-v4"] { width:auto!important; max-width:100%; padding:0!important; object-fit:contain; }
.product-story .detail-visual,.home-product-image,.product-media,.grade-image-link { border:0!important; }
.product-story .detail-visual img,.home-product-image img,.product-media img,.grade-image-link img { filter:none!important; box-shadow:none!important; }