/* A ONE MART — production hardening layer
   Keeps the existing visual theme while fixing responsive overflow,
   accessibility, touch targets and layout resilience. */

:root {
  --page-gutter: clamp(16px, 4vw, 28px);
  --tap: 44px;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.container {
  width: 100%;
  min-width: 0;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.navbar {
  padding: 12px var(--page-gutter) !important;
}

.hero-inner {
  padding: 72px var(--page-gutter) !important;
}

.footer-top {
  padding: 60px var(--page-gutter) 40px !important;
}

.footer-bottom {
  padding: 20px var(--page-gutter) !important;
}

.hero-inner > *, .cat-grid > *, .product-grid > *, .why-grid > *, .about-grid > *, .steps-grid > *, .cart-layout > *, .checkout-layout > *, .contact-grid > *, .footer-top > *, .product-card, .product-body, .product-actions, .summary-card, .form-card, .contact-info-card, .cta-strip > *, .navbar > *, .brand, .brand-text {
  min-width: 0;
}

img, video, iframe, svg, canvas { max-width: 100%; }
p, h1, h2, h3, h4, span, a, button, label, input, textarea, select { overflow-wrap: anywhere; }
input, textarea, select, button { max-width: 100%; }

.btn {
  min-height: var(--tap);
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}

.icon-btn, .hamburger, .qty-control button, .footer-social a {
  min-width: var(--tap);
  min-height: var(--tap);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid rgba(67, 160, 71, 0.38);
  outline-offset: 3px;
}

.brand { flex: 0 1 auto; }
.nav-actions { flex: 0 0 auto; }
.mobile-nav {
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav a { min-height: var(--tap); display: flex; align-items: center; }

.hero-media { min-width: 0; }
.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.cat-grid, .product-grid, .why-grid, .steps-grid, .footer-top { min-width: 0; }
.product-card { height: 100%; }
.product-thumb { display: block; }
.product-body h3 { line-height: 1.35; }
.product-body p { line-height: 1.55; }
.product-actions > * { min-width: 0; }

.filter-bar { max-width: 100%; }
.filter-btn { max-width: 100%; line-height: 1.25; }

.cart-table { min-width: 0; }
.cart-product { min-width: 0; }
.cart-product > div { min-width: 0; }
.cart-product-name, .cart-product-cat { overflow-wrap: anywhere; }

.form-grid > *, .payment-methods > *, .order-summary-item > * { min-width: 0; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  min-height: var(--tap);
}
.form-group textarea { min-height: 96px; }
.file-upload { min-width: 0; }
.pm-option { min-width: min(160px, 100%); }

.modal-box {
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.toast { max-width: min(380px, calc(100vw - 32px)); }

@media (max-width: 992px) {
  .hero-inner { padding: 50px var(--page-gutter) !important; }
  .summary-card { position: static; }
}

@media (max-width: 768px) {
  :root { --page-gutter: clamp(15px, 4.5vw, 22px); }
  .section { padding: 46px 0; }
  .navbar { gap: 8px; }
  .brand { gap: 8px; }
  .brand-text span { font-size: .66rem; }
  .nav-actions { gap: 8px; }
  .hero-inner { padding: 42px var(--page-gutter) !important; gap: 26px; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .hero p { font-size: .98rem; }
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 10px;
  }
  .hero-stats > div {
    padding: 10px 8px;
    background: rgba(255,255,255,.06);
    border-radius: 10px;
    text-align: center;
  }
  .hero-stats div strong { font-size: 1.18rem; }
  .hero-stats div span { font-size: .7rem; }
  .section-head { margin-bottom: 30px; }
  .product-body h3 { font-size: .95rem; }
  .product-body p { font-size: .8rem; }
  .footer-top { padding: 44px var(--page-gutter) 28px !important; }
  .footer-bottom { padding: 18px var(--page-gutter) !important; }
  .contact-info-card, .form-card, .summary-card { padding: 22px; }
  .page-head { padding: 36px 0; }
}

@media (max-width: 600px) {
  .topbar-right { width: 100%; justify-content: center; text-align: center; }
  .topbar-social { display: none; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-actions { flex-direction: column; }
  .product-actions .btn { width: 100%; }
  .product-thumb { aspect-ratio: 1 / 1; }
  /* Compact enough to sit two-up on a phone without each card running the
     full height of the screen: smaller image, tighter type, no description. */
  .cat-card { padding: 16px 12px; }
  .cat-icon-img { width: 76px; height: 76px; }
  .cat-card h3 { font-size: .92rem; line-height: 1.3; }
  .cat-card p { display: none; }
  .cat-card a { font-size: .8rem; }
  .cta-strip { padding: 28px 18px; }
  .toast { left: 16px; right: 16px; top: 82px; transform: translateY(-160%); max-width: none; }
  .toast.show { transform: translateY(0); }
}

@media (max-width: 430px) {
  .brand-text span { display: none; }
  .brand-text strong { font-size: .98rem; }
  .brand img { width: 40px; height: 40px; }
  .icon-btn, .hamburger { width: 42px; height: 42px; min-width: 42px; min-height: 42px; }
  /* Stay a two-up card grid even on the narrowest phones. Dropping to one
     column here turned both grids into a stack of full-width rows — the
     "list shape" complaint — and made a single product fill most of the
     screen. Two columns keeps them reading as browsable cards. */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product-card { max-width: 100%; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats > div { text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .hero-cta { gap: 10px; }
  .filter-bar { justify-content: stretch; }
  .filter-btn { flex: 1 1 calc(50% - 8px); }
  .form-card, .summary-card, .contact-info-card { padding: 18px; }
  .qr-box { padding: 18px 12px; }
  .qr-placeholder { width: min(168px, 100%); height: auto; aspect-ratio: 1 / 1; }
  .cart-product { align-items: flex-start; }
  .cart-product img { width: 56px; height: 56px; flex: 0 0 auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 340px) {
  :root { --page-gutter: 12px; }
  .brand-text strong { font-size: .9rem; }
  .filter-btn { flex-basis: 100%; }
  .hero h1 { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* --- How to Order: compact grid on mobile, not a portrait stack -------- */
/* This overrode itself into a single column below 430px, and a 2-column
   stack above that — six cards each with a 54px circle, a heading and a
   paragraph, so the section ran to several screens of scrolling on a phone.
   One consistent 3-column grid (2 rows) replaces every earlier breakpoint's
   guess, with cards shrunk to match — the paragraph is dropped here since
   the heading alone already says what the step is, and the description was
   what made a 3-per-row card too cramped to read. */
@media (max-width: 992px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
  .step-num { width: 36px; height: 36px; font-size: 0.85rem; margin-bottom: 8px; border-width: 1.5px; }
  /* overflow-wrap:normal opts back out of the site-wide anywhere-wrap reset
     (line 52) — at a ~90px column, a word like "Screenshot" or "Confirmed"
     is wider than the card, and that reset fragments it letter-by-letter
     rather than just wrapping to a second line. Hit twice already this
     session (Categories cards, payment-method pills); guarding this one
     before it ships broken rather than after. */
  .step-card h4 { font-size: 0.74rem; margin-bottom: 0; line-height: 1.3; overflow-wrap: normal; word-break: normal; }
  .step-card p { display: none; }
}

/* --- Why Choose Us: compact 2-column grid on mobile --------------------- */
/* Same pattern as How to Order above: style.css set 2 columns at 992px then
   forced 1 at 768px, so every phone got six full-width cards each with 28px
   padding, a 52px icon and a full description — a long stack of near-
   identical-looking rows. Two columns with the padding, icon and text
   tightened keeps every word (the descriptions carry real information here,
   unlike How to Order's steps) while cutting the wasted whitespace. */
@media (max-width: 992px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .why-card { padding: 16px 14px; gap: 10px; border-radius: 14px; }
  .why-icon { min-width: 38px; height: 38px; border-radius: 10px; font-size: 0.95rem; }
  .why-card h3 { font-size: 0.84rem; margin-bottom: 3px; line-height: 1.25; overflow-wrap: normal; word-break: normal; }
  .why-card p { font-size: 0.72rem; line-height: 1.4; overflow-wrap: normal; word-break: normal; }
}