/* Final layout fixes, loaded last: alignment, icon sizing and the phone layout. */

/* Never let a wide block push the page sideways. */
html, body { overflow-x: clip; }

/* Menu icon: two lines centered 8px apart, crossing into an X when open. */
.menu-toggle { align-content: center; justify-content: center; gap: 6px; }
.menu-toggle span { width: 20px; margin: 0; transform-origin: center; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Footer logo: leaf and word on one center line. */
.site-footer .footer-brand .brand { display: inline-flex; align-items: center; gap: 10px; }
.site-footer .footer-brand .brand-mark { display: block; flex: none; }
.site-footer .footer-brand .brand-word { width: auto; height: auto; line-height: 1; }

/* Icons keep crisp whole-pixel sizes. */
#shop .product-favorite svg { width: 18px; height: 18px; }

@media (max-width: 780px) {
  /* One 16px side gutter for every section. */
  .section-shell,
  .site-footer .footer-main,
  .site-footer .footer-bottom { width: calc(100% - 32px) !important; margin-left: auto; margin-right: auto; }
  .site-footer { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
  .site-footer .footer-main { padding-left: 0; padding-right: 0; }

  /* Header: 40px touch targets, evenly spaced. */
  .header-actions { gap: 2px; }
  .header-actions .icon-button,
  .header-actions .menu-toggle { width: 40px; height: 44px; display: grid; place-items: center; }
  .header-actions .icon-button svg { width: 22px; height: 22px; }

  /* Category slider stays inside the gutter. */
  #collections .collection-viewport { margin-left: 0; margin-right: 0; width: auto; }
  #collections #collectionsTitle { font-size: clamp(2.3rem, 11.5vw, 3.2rem); }

  .site-footer .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .site-footer .footer-brand p { margin: 0; }
}

/* Line icons that replaced the text arrows (→ ↗ ‹ ›): same stroke, centered on the text line. */
.ui-icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.22em;
}
.ui-chevron { width: 24px; height: 24px; vertical-align: middle; }
:is(.hero-arrow, .canna-story-arrow, [data-category-prev], [data-category-next]) { display: inline-grid; place-items: center; line-height: 1; }
:is(.button, .canna-story-button, .request-back, .collection-shortcut, .notice-view) .ui-icon { margin-left: .15em; }
.request-back .ui-icon { margin: 0 .2em 0 0; }

/* Flex layout drops the space before the total on the review button. */
.review-order #cartReviewTotal { margin-left: .35em; }