/* ===== Base mobile niceties ===== */
img{max-width:100%;height:auto}
button, .btn, .qty-btn, .add-to-cart{min-height:44px}

/* Kill any rogue horizontal scroll on mobile */
html, body{max-width:100%; overflow-x:hidden}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

/* ===== Global header/nav tweaks ===== */
@media (max-width:900px){
  :root{
    --logo-height:110px;    /* was 140 */
    --logo-overshoot:10px;
    --logo-slot:170px;
  }
}

/* Phones */
@media (max-width:760px){
  :root{
    /* Keep the LOGO IMAGE big as before */
    --logo-block: clamp(176px, 44vw, 256px);   /* visual image height (unchanged/big) */

    /* NEW: shrink the CLICKABLE AREA to 2/3 of the image block */
    --logo-hit: calc(var(--logo-block) * 0.667);

    --logo-height:140px;
    --logo-overshoot:0px;     /* keep perfectly centered on the row */
    --logo-slot:150px;

    /* symmetric small gaps */
    --mobile-gap: 6px;
  }

  header{
    height:auto;
    padding:var(--mobile-gap) 1rem var(--mobile-gap);
    overflow:visible; /* allow logo to visually extend beyond hitbox without clipping */
  }

  /* Stacked mobile header:
     Row 1: full-width brand (logo)
     Row 2: full-width search
     Row 3: deliver | account | cart  */
  .nav{
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto auto;
    row-gap:var(--mobile-gap);
    gap:.45rem;
    min-width:0;
    align-items:center;
  }

  /* Brand row — CLICKABLE AREA reduced, IMAGE remains large */
  .brand{
    grid-column:1 / -1; grid-row:1;
    position:relative;
    height:auto;
    min-height:var(--logo-hit);      /* smaller clickable "button" height (2/3) */
  }
  .brand img{
    position:absolute !important;
    left:0; right:0; top:50%;
    transform:translateY(calc(-50% + var(--logo-overshoot))) !important;
    height:var(--logo-block);        /* keep the image visually big */
    width:auto;
    max-width:92vw;                  /* safety to avoid any horizontal overflow */
    margin:0 auto;
    display:block;
    filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px #fff) drop-shadow(0 0 12px #fff);
    pointer-events:none;             /* clicks target the smaller .brand area only */
  }

  /* Search row (full width, sits under logo) */
  .search{
    grid-column:1 / -1; grid-row:2;
    width:100%; min-width:0; overflow:visible;
    position:relative; z-index:2;    /* make sure inputs stay interactable if image overlaps visually */
  }
  .search input{min-width:0}
  .cat-btn{padding:0 .5rem}
  .search button[type="submit"]{padding:0 .75rem}

  /* Bottom row: compact controls */
  .deliver{grid-column:1 / 2; grid-row:3; justify-self:start}
  .account-wrap{grid-column:2 / 3; grid-row:3; justify-self:end; min-width:0}
  .cart{grid-column:3 / 4; grid-row:3; justify-self:end; min-width:0}

  /* Hide rarely-used bits for space */
  .orders, .lang{display:none}

  /* Cart: keep icon-only on mobile to prevent overflow */
  .cart .strong{display:none}
  .cart svg{width:24px;height:24px}
  .cart .badge{left:.55rem}

  /* Ensure dropdowns appear above hero/image content */
  .account-menu, .cat-menu, .sugg{z-index:1200}
}

/* Tiny phones */
@media (max-width:520px){
  :root{
    --logo-slot:140px;
    --logo-overshoot:0px;
  }
  .search{min-width:0}
}

/* Extra-tight phones */
@media (max-width:420px){
  :root{ --logo-slot:132px; }
  .deliver{font-size:.8rem; padding:.3rem .45rem}
  .cat-btn{font-size:.85rem}
}

/* Safety: prevent any header child from forcing width growth */
header, .nav, .search, .account-wrap, .cart, .deliver, .account{min-width:0}

/* ===== Homepage specific: sections stack nicely ===== */
@media (max-width:760px){
  .cards{padding:1rem 1rem 2rem; gap:1rem}
  .card{width:100%; max-width:560px; margin:0 auto}
  .card img{max-height:140px}
}

/* ===== DRAG carousels – smooth (not hard-snappy) ===== */
.type-cards,
.pcards{
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
}

/* The flower row already scrolls; keep spacing modest on phones */
@media (max-width:760px){
  .type-cards{padding:.6rem 1rem 2rem; gap:1rem}
}

/* Turn "Products coming soon" into a horizontal scroller on phones */
@media (max-width:760px){
  .pcards{
    display:flex;
    gap:1rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:.6rem 1rem 2rem;
    scroll-padding:1rem;
  }
  .pcard{
    flex:0 0 78%;
    max-width:320px;
    scroll-snap-align:start;
  }
}

/* ===== Shop page (controls + grid) ===== */
@media (max-width:900px){
  .controls{grid-template-columns:1fr auto auto}
}
@media (max-width:760px){
  .controls{grid-template-columns:1fr; gap:.5rem}
  .search{order:1}
  .filter-host{order:2}
  #sortSel{order:3; width:100%}
  .filter-menu{min-width:min(85vw,260px)}
}
@media (max-width:520px){
  .grid{gap:.9rem}
  .card .body{padding:.75rem .8rem}
  .desc{font-size:.9rem}
  .stars .star{width:15px;height:15px}
  .qty-menu{min-width:min(90vw,260px)}
}

/* ===== Product page: tier/variant grids ===== */
@media (max-width:760px){
  .tiers, .variant-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
  }
}

/* ===== Orders page tweaks ===== */
@media (max-width:900px){
  .order{border-radius:12px}
  .order header{flex-direction:column; align-items:flex-start; gap:.5rem}
  .order .meta{gap:.5rem}
}
@media (max-width:520px){
  .item{grid-template-columns:48px 1fr auto}
  .item img{width:48px;height:48px}
}

/* ===== Mini-cart width on phones ===== */
@media (max-width:760px){
  .mini-cart{width:94vw}
}

/* ===== Touch-friendly dropdowns ===== */
@media (hover:none){
  .dropdown .menu-panel{
    visibility:hidden; opacity:0; transform:translateY(6px) scale(.99); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .dropdown.open .menu-panel{
    visibility:visible; opacity:1; transform:none; pointer-events:auto;
  }
}