/* Shared surfaces and spacing */
.product-header-card { padding: 22px 24px; border-radius: 18px; }
.photo-promise { background: #f4f9f6; border-color: #dbece2; border-radius: 14px; }
.product-main-image { border-radius: 18px; overflow: hidden; aspect-ratio: 1 / 1; }
.product-main-image img { display: block; }
.city-homepage .city-store { padding-top: 0; }
.city-homepage .city-store .city-hero { margin-top: 24px; }
.city-homepage .city-store .breadcrumb { margin-top: 20px; }
.city-homepage .city-hero-v2 h2 { font-family: Fraunces, Georgia, serif; }
@media (max-width: 640px) {
  .product-header-card { padding: 18px; border-radius: 16px; }
  .product-main-image { border-radius: 16px; }
  .city-homepage .city-catalog .catalog-heading { flex-wrap: wrap; }
  .city-homepage .city-catalog .catalog-heading h2 { font-size: 22px; }
}

/* Delivery picker: keep explanatory text, controls and the scrolling list aligned. */
.pick-sheet { box-sizing: border-box; position: fixed; top: auto; right: 0; bottom: var(--ib-picker-bottom, 0px); left: 0; margin: 0; max-height: min(86dvh, var(--ib-picker-height, 86dvh)); background: #fff; }
.pick-sheet-context { flex: none; margin: 0; padding: 14px 20px 2px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pick-sheet-count { flex: none; margin: 0; padding: 2px 20px 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pick-sheet-search { padding: 10px 20px; }
.pick-sheet-search .ico { left: 34px; }
.pick-sheet-list { padding: 0 12px max(16px, env(safe-area-inset-bottom)); scrollbar-gutter: stable; }
.pick-sheet-list button:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.pick-sheet-empty { flex: none; }
.date-box, .time-slot { position: relative; }
@media (min-width: 768px) {
  .pick-sheet { top: var(--ib-picker-top, 0px); bottom: 0; width: min(440px, calc(100vw - 32px)); margin: auto; border-radius: 16px; max-height: min(70dvh, var(--ib-picker-height, 70dvh)); }
}

/* Four balanced mobile destinations and a gentle WhatsApp cue. */
@media (max-width: 900px) {
  .mobile-bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobile-bottom-nav .mobile-nav-whatsapp { color: #167d49; font-weight: 600; }
  .mobile-bottom-nav .mobile-nav-whatsapp .ico { color: #168e50; animation: whatsapp-attention 3.5s ease-in-out infinite; transform-origin: center; }
}
@keyframes whatsapp-attention {
  0%, 78%, 100% { transform: scale(1) rotate(0); }
  83% { transform: scale(1.1) rotate(-9deg); }
  88% { transform: scale(1.1) rotate(9deg); }
  93% { transform: scale(1.04) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .mobile-bottom-nav .mobile-nav-whatsapp .ico { animation: none; } }

/* Mobile navigation: text-first retail drawer. */
.offcanvas { width: min(360px, 90vw); background: #fff; border: 0; border-radius: 0; box-shadow: 8px 0 35px rgba(12, 46, 39, .12); overflow: hidden; }
.offcanvas-header { flex: 0 0 auto; min-height: 72px; padding: 12px 22px; background: #fff; border-bottom: 1px solid #ede9e8; }
.offcanvas-header .brand-logo-upload { display: block; width: 150px; max-width: calc(100% - 52px); height: auto; }
.offcanvas-header [data-menu-close] { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 0; color: #173f35; background: transparent; }
.offcanvas-body.mobile-navigation { min-height: 0; overscroll-behavior: contain; padding: 26px 24px max(32px, env(safe-area-inset-bottom)); }
.offcanvas .mobile-menu-section + .mobile-menu-section { border-top: 1px solid #eae6e5; margin-top: 24px; padding-top: 24px; }
.offcanvas .mobile-menu-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.offcanvas .mobile-menu-section h2 { margin: 0; color: #163c32; font-family: var(--font); font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.offcanvas .mobile-menu-heading > a { display: inline-flex; align-items: center; gap: 5px; color: #8b3452; font-size: 12px; font-weight: 600; white-space: nowrap; }
.offcanvas .mobile-menu-heading > a .ico { width: 14px; height: 14px; }
.offcanvas .mobile-menu-primary, .offcanvas .mobile-menu-service ul, .offcanvas .mobile-menu-expand ul { margin: 0; padding: 0; list-style: none; }
.offcanvas .mobile-menu-primary a, .offcanvas .mobile-menu-expand summary, .offcanvas .mobile-menu-expand li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 9px 0; color: #203a32; font-size: 15px; font-weight: 500; line-height: 1.35; }
.offcanvas .mobile-menu-primary a .ico, .offcanvas .mobile-menu-expand .ico, .offcanvas .mobile-menu-service li a .ico:last-child { flex: 0 0 15px; width: 15px; height: 15px; color: #8b9993; }
.offcanvas .mobile-menu-expand { border-top: 1px solid #eeeae9; }
.offcanvas .mobile-menu-expand summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
.offcanvas .mobile-menu-expand summary::-webkit-details-marker { display: none; }
.offcanvas .mobile-menu-expand[open] summary .ico { transform: rotate(180deg); }
.offcanvas .mobile-menu-expand ul { padding: 0 0 10px 12px; }
.offcanvas .mobile-menu-expand li a { min-height: 42px; font-size: 13px; font-weight: 400; }
.offcanvas .mobile-menu-service h2 { margin: 0 0 14px; font-size: 14px; }
.offcanvas .mobile-menu-service li a, .offcanvas .mobile-menu-whatsapp { display: flex; align-items: center; gap: 12px; min-height: 46px; color: #40564d; font-size: 13px; font-weight: 500; }
.offcanvas .mobile-menu-service li a > .ico:first-child, .offcanvas .mobile-menu-whatsapp > .ico:first-child { flex: 0 0 17px; width: 17px; height: 17px; color: #8b3452; }
.offcanvas .mobile-menu-service li a span, .offcanvas .mobile-menu-whatsapp span { flex: 1; }
.offcanvas .mobile-menu-whatsapp { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eeeae9; color: #177440; font-weight: 600; }
.offcanvas .mobile-menu-whatsapp > .ico:first-child, .offcanvas .mobile-menu-whatsapp > .ico:last-child { color: #168b4c; }
.offcanvas .mobile-menu-whatsapp > .ico:last-child { width: 16px; height: 16px; }
.offcanvas a:focus-visible, .offcanvas button:focus-visible, .offcanvas summary:focus-visible { outline: 2px solid #d52060; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .offcanvas, .offcanvas-backdrop { transition: none; } }

/* Mobile retail drawer: useful shortcuts and image-led category navigation. */
.offcanvas { width: min(360px, 91vw); background: #fff; }
.offcanvas-header { min-height: 68px; padding: 10px 20px; }
.offcanvas-body.mobile-navigation { padding: 0 20px max(30px, env(safe-area-inset-bottom)); }
.offcanvas .mobile-menu-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #eee7e9; }
.offcanvas .mobile-menu-quick a { min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 10px 5px 10px 0; color: #253f36; font-size: 12px; font-weight: 600; line-height: 1.25; }
.offcanvas .mobile-menu-quick a + a { border-left: 1px solid #eee7e9; padding-left: 12px; }
.offcanvas .mobile-menu-quick a .ico:first-child { flex: 0 0 19px; width: 19px; height: 19px; color: #d3205d; }
.offcanvas .mobile-menu-quick a .ico:last-child { flex: 0 0 13px; width: 13px; height: 13px; margin-left: auto; color: #8c9a94; }
.offcanvas .mobile-menu-categories { padding-top: 22px; }
.offcanvas .mobile-menu-heading { align-items: center; margin-bottom: 15px; }
.offcanvas .mobile-menu-section h2 { font-size: 16px; letter-spacing: 0; }
.offcanvas .mobile-menu-primary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 9px; margin: 0 0 20px; }
.offcanvas .mobile-menu-primary li { min-width: 0; }
.offcanvas .mobile-menu-primary a { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 7px; min-height: 0; padding: 0; color: #203a32; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: left; }
.offcanvas .mobile-menu-primary img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px; background: #f3eeee; }
.offcanvas .mobile-menu-primary a span { overflow-wrap: anywhere; }
.offcanvas .mobile-menu-expand summary { min-height: 49px; font-size: 14px; }
.offcanvas .mobile-menu-section + .mobile-menu-section { margin-top: 20px; padding-top: 20px; }
.offcanvas .mobile-menu-service h2 { font-size: 14px; }
.offcanvas .mobile-menu-whatsapp { min-height: 50px; }
@media (max-width: 340px) {
  .offcanvas-body.mobile-navigation { padding-left: 16px; padding-right: 16px; }
  .offcanvas .mobile-menu-quick a { gap: 6px; font-size: 11.5px; }
  .offcanvas .mobile-menu-quick a + a { padding-left: 8px; }
}