/* Navegação por toque também nos tablets em modo retrato. */
@media (max-width: 1100px) {
  header#section-header .main-nav {display: none}
  .menu_icon.burger {display: flex}
  header#section-header .main-menu_right {margin-left: auto}
}

@media (max-width: 768px) {
  :root {font-size: 16px}
  html {scroll-padding-top: 72px; -webkit-text-size-adjust: 100%}
  body {line-height: 1.5}
  .SectionPadded {padding: 48px 20px}
  #cardapio,#lojas,#celebrar,#compartilhar {scroll-margin-top: 16px}

  .announcement-bar {font-size: 9px; line-height: 1.35; letter-spacing: .4px; padding: 7px 12px}
  header#section-header,header#section-header.Filled {padding: 10px 16px; min-height: 72px; gap: 8px}
  header#section-header .brand-official {width: 84px; height: 52px}
  header#section-header .main-menu_right {gap: 4px}
  header#section-header .menu_icon {width: 44px; height: 44px}
  header#section-header .menu_icon svg {width: 23px; height: 23px}
  header#section-header .store-trigger {min-height: 44px; max-width: 152px; padding: 8px; gap: 4px; font-size: 11px}
  header#section-header .store-trigger svg {flex: 0 0 13px}
  .Header_CartDot {top: 1px; right: 0; min-width: 17px; height: 17px}

  /* A fotografia abre a capa; o texto encontra uma base uniforme para leitura. */
  .Hero_Wrapper {height: 100vh; height: 100svh; height: 100dvh; min-height: 0; padding: 124px 20px max(28px,env(safe-area-inset-bottom))}
  .Hero_Back_Img {height: 70%; bottom: auto}
  .Hero_Back_Img img {object-position: 58% 45%}
  .Hero_Back_Img::after {background: linear-gradient(180deg,rgba(54,35,23,.66) 0%,rgba(54,35,23,.08) 32%,rgba(54,35,23,.2) 48%,var(--dark) 100%)}
  .Hero_Content,.Hero_Heading_wrapper {width: 100%}
  .Hero_Eyebrow {font-size: 11px; letter-spacing: 1.2px; margin-bottom: 12px}
  .Hero_Heading {font-size: clamp(36px,10.6vw,64px); line-height: .98; letter-spacing: -1px; max-width: 13ch; text-wrap: balance}
  .Hero_Subtext {font-size: 16px; line-height: 1.55; max-width: 34ch; margin-top: 16px; opacity: 1}
  .Hero_Actions {display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px}
  .Hero_Button {min-height: 50px; padding: 12px 14px; font-size: 14px; gap: 10px; white-space: nowrap}

  .SectionTitle {font-size: clamp(28px,8vw,40px); line-height: 1.05; letter-spacing: -.6px; text-wrap: balance}
  .Title_Text_Section {gap: 20px; padding-top: 40px; padding-bottom: 40px}
  .Title_Text_Heading {max-width: calc(100% - 60px)}
  .Title_Text_Content p {font-size: 16px; line-height: 1.65}
  .Title_Text_Section .Absolute_Img {position: absolute; top: 40px; right: 16px; bottom: auto; width: 64px; height: 64px; margin: 0; transform: rotate(8deg)}

  /* Rolagem nativa: sem carrossel automático ou dependência externa. */
  .Collection_Display_Section {padding: 36px 20px 40px; min-height: 0; align-items: stretch}
  .Collection_Display_Heading {margin-bottom: 20px}
  .Collection_Display_Heading .SectionTitle {font-size: clamp(28px,7vw,36px); margin: 10px 0}
  .Collection_Browser_Eyebrow {font-size: 10px; letter-spacing: 1px; padding: 6px 10px; line-height: 1.4; max-width: 100%}
  .Swipe_Hint,.Category_Hint {display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--blue)}
  .Swipe_Hint span,.Category_Hint span {font-size: 18px; line-height: 1}
  .Collection_Display {display: flex; align-items: stretch; gap: 14px; overflow-x: auto; overflow-y: hidden; width: calc(100% + 40px); max-width: none; margin: 0 -20px; padding: 4px 20px 18px; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--pink) transparent}
  .Collection_Display_Item {flex: 0 0 min(82vw,340px); min-width: 0; padding: 16px; border-width: 1.5px; border-radius: 24px; scroll-snap-align: start; box-shadow: 0 6px 18px rgba(117,68,43,.08)}
  .Product_Item_Image {border-radius: 16px; border-width: 1px; margin-bottom: 14px}
  .Product_Item_Title {font-size: 20px; min-height: 48px; margin: 0 0 8px}
  .Product_Item_Meta {font-size: 13px; min-height: 40px; margin-bottom: 12px; line-height: 1.5}
  .Product_Item_Content {gap: 8px; flex-wrap: wrap; padding-top: 14px; margin-bottom: 14px}
  .Product_Item_Content .Price {font-size: 18px; min-width: 0}
  .Quantity_Selector {gap: 2px}
  .Quantity_Selector_Button,.product-card .Quantity_Selector_Button {width: 44px; height: 44px; flex: 0 0 44px; font-size: 24px}
  .Quantity_Selector input,.product-card .Quantity_Selector input {width: 28px; font-size: 16px; padding: 0; min-height: 44px}
  .Product_Item_Submit {min-height: 48px; padding: 12px 16px; font-size: 14px}
  .Marquee_Content span {font-size: 64px; margin-inline: 16px}

  .Collections_Browser_Section {padding-top: 40px}
  .Collection_Browser_Header {margin-bottom: 18px; gap: 10px}
  .Category_Hint {margin-bottom: 6px}
  .Collection_Browser_Tabs {position: sticky; top: 72px; z-index: 25; display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px; background: var(--beige); margin: 0 -20px 20px; padding: 12px 20px; scroll-padding-inline: 20px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--pink) transparent; border-bottom: 1px solid #e7d9c9}
  .Collection_Browser_Tab_Button {flex: 0 0 auto; min-height: 44px; padding: 9px 14px; font-size: 13px; white-space: nowrap; border-width: 1.5px; scroll-snap-align: start}
  .Collection_Browser_Tab_Button .tab-count {font-size: 11px; padding: 3px 6px}
  .collection-toolbar {display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px}
  .search-box {min-width: 0; max-width: none; width: 100%; min-height: 50px; padding: 10px 14px; border-width: 1.5px}
  .search-box input {font-size: 16px; min-width: 0; min-height: 28px}
  .store-switch-link {min-height: 44px; justify-content: center; padding: 10px 14px; font-size: 13px; border-width: 1.5px}
  .view-orders {min-height: 44px; font-size: 14px; margin-bottom: 8px}
  .unit-banner {font-size: 14px; line-height: 1.55; border-width: 1px; padding: 14px; margin-bottom: 14px}
  .menu-description {font-size: 15px; line-height: 1.6; text-align: left; margin-bottom: 20px}
  .operating-status {padding: 16px; font-size: 14px}
  .operating-switch {min-height: 44px; text-align: left; white-space: normal}
  .product-grid {gap: 14px}
  .product-card {padding: 14px; border-width: 1px; border-radius: 20px}
  .product-card h3 {font-size: 18px; line-height: 1.2}
  .product-card .price {font-size: 17px; line-height: 1.3}
  .product-card .price small {font-size: 12px; font-weight: 400}
  .product-card-submit {min-height: 48px; font-size: 14px}
  .consult-label {min-height: 44px; font-size: 13px; padding: 10px 14px}

  .Collections_CTA_Duo_Wrapper {padding: 16px 20px 40px; gap: 20px}
  .Collections_CTA_Duo_Header {margin-bottom: 0; gap: 10px}
  .Collections_CTA_Section {padding: 10px; border-radius: 24px}
  .Collections_CTA_Image {border-radius: 16px}
  .Collections_CTA_Copy {padding: 20px 10px 10px; gap: 18px}
  .Collections_CTA_Heading {gap: 10px}
  .Collections_CTA_Section .SectionTitle {font-size: 30px; line-height: 1.08}
  .CTA_Badge {font-size: 11px; letter-spacing: .8px}
  .Collections_CTA_Text {font-size: 15px; line-height: 1.65; gap: 16px}
  .CTA_Spec_Pills {gap: 6px}
  .CTA_Spec_Pills span {font-size: 11px; padding: 6px 8px}
  .Collections_CTA_Button button {min-height: 50px; padding: 12px 16px; font-size: 15px}

  .Stores_Section {padding: 40px 20px}
  .store-cards-grid {grid-template-columns: minmax(0,1fr); max-width: 500px; gap: 18px}
  .store-card {border-width: 1.5px; padding: 22px 20px; border-radius: 24px; box-shadow: 0 8px 24px rgba(117,68,43,.08)}
  .store-card h3 {font-size: 25px; min-height: 0; margin: 14px 0}
  .store-info-item {font-size: 15px; line-height: 1.6; overflow-wrap: anywhere}
  .store-info-item strong {font-size: 12px}
  .store-city-badge,.store-type-pill {font-size: 10px; letter-spacing: .6px}
  .store-actions {padding-top: 16px}
  .store-actions a,.store-actions button {min-height: 46px; font-size: 13px; padding: 11px 14px}
  .Newsletter_Section {padding: 32px 20px 48px}
  .Newsletter_Container {padding: 28px 20px; border-radius: 24px; border-width: 1.5px}
  .Newsletter_Container h2 {font-size: 30px; line-height: 1.05; text-wrap: balance}
  .Newsletter_Container p {font-size: 15px; line-height: 1.6}
  .Newsletter__Inner {gap: 10px; margin-top: 20px}
  .Newsletter__Inner input,.Newsletter__Inner button {min-height: 50px; font-size: 16px; padding: 12px 16px}
  .newsletter-consent {align-items: flex-start; font-size: 12px; line-height: 1.6; gap: 10px; padding: 8px 0; margin-top: 12px; cursor: pointer}
  .newsletter-consent input {width: 20px; height: 20px; margin-top: 1px}

  footer.Footer_Section {padding: 40px 20px calc(32px + env(safe-area-inset-bottom))}
  .Footer_Grid {grid-template-columns: 1fr 1fr; gap: 28px 20px}
  .Footer_Brand,.Footer_Contact {grid-column: 1 / -1}
  .Footer_Heading {font-size: 16px; line-height: 1.3; letter-spacing: 0; min-height: 48px; margin-bottom: 8px}
  .Footer_Links {gap: 0}
  .Footer_Links a {display: flex; align-items: center; min-height: 44px; font-size: 13px; line-height: 1.4; padding: 8px 0; overflow-wrap: anywhere}
  .Footer_Direct_Links a {display: flex; align-items: center; min-height: 44px; font-size: 13px; overflow-wrap: anywhere}
  .Footer_Pill_Btn {min-height: 48px; font-size: 14px; padding: 12px 16px}
  .Footer_Motto_Bar {padding-bottom: 24px}
  .Footer_Bottom {font-size: 11px; line-height: 1.6; margin-top: 24px; padding-right: 40px; text-align: left}
  .whatsapp-float {width: 48px; height: 48px; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom))}
  .whatsapp-float svg {width: 26px; height: 26px}

  /* Formulários legíveis, alvos de toque e folhas que respeitam a altura útil. */
  dialog {max-width: 100%; overscroll-behavior: contain; scroll-padding-block: 64px; padding: 20px; border-width: 1.5px}
  dialog:not(.drawer):not(.mobile-drawer),dialog#product {width: 100%; left: 0; right: 0; top: auto; bottom: 0; transform: none; max-height: calc(100dvh - 16px); border-radius: 24px 24px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom))}
  .drawer,dialog#navigation.mobile-drawer {padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); border-left: 0}
  .dialog-head {align-items: flex-start; gap: 12px}
  .dialog-head > button,.absolute-close {width: 44px; height: 44px; flex: 0 0 44px}
  dialog h2 {font-size: 26px; line-height: 1.15}
  dialog p {font-size: 15px; line-height: 1.6}
  dialog input:not([type=checkbox]):not([type=radio]),dialog textarea,dialog select {font-size: 16px; min-height: 46px}
  dialog label {font-size: 14px}
  .form-grid {gap: 16px}
  .button,.button.secondary {min-height: 48px; padding: 12px 16px; font-size: 15px}
  .mobile-nav-store-card {padding: 14px 12px; gap: 10px}
  .mobile-nav-store-meta {min-width: 0}
  .mobile-nav-store-meta small {color: var(--blue); font-size: 10px}
  .mobile-nav-store-meta strong {font-size: 16px; overflow-wrap: anywhere}
  .mobile-store-btn,.cart-store button {min-height: 44px; padding: 10px 12px; font-size: 12px}
  .mobile-cat-card {min-height: 72px; padding: 12px; gap: 10px}
  .mobile-cat-card strong {font-size: 16px}
  .mobile-cat-card small {font-size: 12px; line-height: 1.5}
  .mobile-cat-card span {font-size: 10px; padding: 4px 6px}
  .mobile-nav-quick-links a {min-height: 48px; font-size: 14px}
  .store-option {padding: 16px 14px}
  .store-option > span:first-child {min-width: 0}
  .store-option strong {font-size: 20px}
  .store-option small {font-size: 13px; line-height: 1.5}
  .store-option-check {flex-shrink: 0}
  #product {padding: 0}
  #product .absolute-close {position: sticky; top: 12px; margin: 12px 12px -56px auto}
  .product-detail {max-height: none; grid-template-columns: minmax(0,1fr)}
  .product-detail-media {height: 240px; min-height: 0; max-height: none; background: #eee2d3}
  .product-detail-media > img {max-height: none; height: 100%; object-fit: contain}
  .product-detail-copy {padding: 20px; gap: 12px; overflow: visible; max-height: none; min-width: 0}
  .product-detail-header {padding-right: 0}
  .product-detail h2 {font-size: 28px; line-height: 1.08}
  .product-store-switch {min-height: 44px; font-size: 13px}
  .product-desc {font-size: 15px; line-height: 1.6}
  .product-spec-pills span {font-size: 11px; line-height: 1.5}
  .size-options,.flavor-options {grid-template-columns: minmax(0,1fr); gap: 8px}
  .size-option-card,.flavor-options label {min-height: 54px; padding: 12px; font-size: 14px}
  .size-option-title {font-size: 16px}
  .size-option-meta {font-size: 13px; line-height: 1.5}
  .product-price-bar {flex-wrap: wrap; gap: 12px; padding: 14px 12px}
  .product-detail .price {font-size: 23px}
  .modal-qty-control {margin-left: auto; gap: 4px}
  .modal-qty-control input#product-qty {width: 40px; padding: 0; min-height: 44px; height: 44px}
  .modal-qty-label {font-size: 12px; margin-right: 4px}
  .small-note {font-size: 12px !important; line-height: 1.6}
  #add-to-cart {position: sticky; bottom: 0; min-height: 54px; margin-top: 4px; box-shadow: 0 -8px 20px var(--beige)}
  .cake-size-guide {margin-top: 0; padding: 12px}
  .cake-size-guide summary {min-height: 44px; font-size: 14px; cursor: pointer}
  .cart-head-title {flex: 1; min-width: 0; flex-wrap: wrap; gap: 6px}
  .cart-head-title h2 {font-size: 24px}
  .clear-bag-btn {min-height: 44px; font-size: 12px}
  .cart-head-actions {gap: 6px}
  .cart-store {padding: 12px; gap: 10px}
  .cart-store-info {min-width: 0}
  .cart-store-info strong {font-size: 16px; overflow-wrap: anywhere}
  .cart-item {grid-template-columns: 56px minmax(0,1fr); gap: 10px 12px}
  .cart-item img {width: 56px; height: 56px; border-radius: 12px}
  .cart-item h3 {font-size: 17px}
  .cart-item-meta {font-size: 13px}
  .cart-item-controls {gap: 8px; flex-wrap: wrap}
  .quantity button {width: 44px; height: 44px; font-size: 23px}
  .remove {min-height: 44px; font-size: 12px}
  .cart-price {grid-column: 2; text-align: left; font-size: 18px}
  .available-date {min-height: 44px; font-size: 14px}
  .saved-order,.tracking-text-button {min-height: 44px}
}

@media (max-width: 600px) {
  /* Produtos em lista: foto, descrição e ação cabem sem ocupar uma tela cada. */
  .product-grid {grid-template-columns: minmax(0,1fr)}
  .product-card {display: grid; grid-template-columns: clamp(96px,28vw,140px) minmax(0,1fr); grid-template-rows: auto 1fr auto auto; gap: 8px 14px}
  .product-card .product-image {grid-column: 1; grid-row: 1 / 3; margin: 0; border-radius: 14px; align-self: start}
  .product-card h3 {grid-column: 2; grid-row: 1; text-align: left; margin: 2px 0 0; font-size: 17px}
  .product-card .descriptor {grid-column: 2; grid-row: 2; text-align: left; font-size: 13px; line-height: 1.5; align-self: start}
  .product-card .price-row {grid-column: 1 / -1; grid-row: 3; margin-top: 4px; padding-top: 12px; gap: 8px; flex-wrap: nowrap}
  .product-card .price {flex: 1; min-width: 0; font-size: 17px}
  .product-card .Quantity_Selector {flex-shrink: 0}
  .product-card-submit-wrapper {grid-column: 1 / -1; grid-row: 4; margin-top: 4px}
  .product-tag {font-size: 8px; top: 6px; left: 6px; padding: 3px 6px; letter-spacing: .3px}
  .product-sizes-pill {font-size: 9px; bottom: 6px; right: 6px; padding: 3px 6px}
}

@media (max-width: 360px) {
  .Hero_Button {font-size: 13px; padding-inline: 10px}
  .Collections_CTA_Copy {padding-inline: 6px}
  .Collections_CTA_Button button {font-size: 14px; padding-inline: 14px}
  .product-card {gap: 8px 10px; padding: 12px}
  .product-card h3 {font-size: 16px}
  .product-card .price {font-size: 16px}
  .product-detail-copy {padding: 18px 16px}
}

@media (hover: none) {
  .Collection_Display_Item:hover,.product-card:hover,.store-card:hover {transform: none}
  .Product_Item_Image:hover img,.product-card:hover .product-image img {transform: none}
  .Quantity_Selector_Button:hover {transform: none}
}

/* Capa sempre dentro da tela, inclusive em celulares na horizontal. */
@media (max-width: 768px) and (max-height: 620px) and (orientation: portrait) {
  .Hero_Wrapper {padding-top: 112px; padding-bottom: max(20px,env(safe-area-inset-bottom))}
  .Hero_Heading {font-size: clamp(32px,10vw,42px)}
  .Hero_Eyebrow {font-size: 10px; margin-bottom: 8px}
  .Hero_Subtext {font-size: 15px; line-height: 1.45; margin-top: 12px}
  .Hero_Actions {margin-top: 16px}
  .Hero_Button {min-height: 46px}
}
@media (max-height: 600px) and (orientation: landscape) {
  html {scroll-padding-top: 56px}
  .Collection_Browser_Tabs {top: 56px}
  header#section-header,header#section-header.Filled {padding: 6px 4vw; min-height: 56px}
  header#section-header .brand-official {width: 64px; height: 40px}
  header#section-header .store-trigger,header#section-header .menu_icon {min-height: 44px}
  .announcement-bar {font-size: 9px; padding: 5px 12px; line-height: 1.3}
  .Hero_Wrapper {height: 100vh; height: 100svh; height: 100dvh; min-height: 0; padding: 96px 24px 20px}
  .Hero_Back_Img {height: 100%}
  .Hero_Back_Img img {object-position: 76% center}
  .Hero_Back_Img::after {background: linear-gradient(90deg,rgba(54,35,23,.94) 0%,rgba(54,35,23,.82) 38%,rgba(54,35,23,.12) 76%),linear-gradient(180deg,rgba(54,35,23,.4),transparent 30%)}
  .Hero_Heading_wrapper {width: 60%}
  .Hero_Eyebrow {font-size: 10px; margin-bottom: 8px}
  .Hero_Heading {font-size: clamp(32px,5.5vw,64px); line-height: .98; max-width: 14ch; letter-spacing: -.6px}
  .Hero_Subtext {font-size: 15px; line-height: 1.4; margin-top: 12px; max-width: 40ch}
  .Hero_Actions {display: flex; flex-wrap: nowrap; gap: 10px; margin-top: 16px}
  .Hero_Button {min-height: 44px; padding: 10px 16px; font-size: 14px; gap: 10px; white-space: nowrap}
}
@media (max-height: 480px) and (orientation: portrait) {
  .Hero_Wrapper {padding-top: 108px; padding-bottom: 16px}
  .Hero_Eyebrow {display: none}
  .Hero_Heading {font-size: 30px}
  .Hero_Subtext {font-size: 14px; line-height: 1.4; margin-top: 10px}
  .Hero_Actions {margin-top: 12px}
  .Hero_Button {min-height: 44px; padding-block: 10px}
}
@media (max-height: 360px) and (orientation: landscape) {
  .Hero_Wrapper {padding-top: 80px; padding-bottom: 16px}
  .Hero_Eyebrow {display: none}
  .Hero_Heading {font-size: 32px}
  .Hero_Subtext {font-size: 14px; margin-top: 10px}
  .Hero_Actions {margin-top: 12px}
  .Hero_Button {font-size: 13px; padding-inline: 12px}
}

@media (max-width: 768px) {
  dialog [data-close] {min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--pink); color: var(--dark); font-size: 20px}
  #toast {font-family: var(--text-font); font-size: 13px; font-weight: 500; text-transform: none; line-height: 1.45; padding: 12px 16px; border-width: 1px; border-radius: 14px; max-width: calc(100vw - 32px); bottom: calc(16px + env(safe-area-inset-bottom))}
}