/* The storefront's own controls, and the rules that make every shop fit a phone.
 *
 * Two problems are fixed here, both of them visible to a customer.
 *
 * 1. The storefront mark-up asks for `.button` / `.button.primary` / `.button.secondary` — the shop's
 *    own pages, the filter panel, the saved list, the share panel and the policy pages all use them —
 *    but the only stylesheet that ever defined `.button` is the merchant one, `app.css`, which a
 *    storefront never loads. Every one of those controls therefore rendered as a raw browser button or
 *    a default blue underlined link. The styles below give them an identity that matches the rest of
 *    the shop: the same `--accent` as the "Add to cart" button, the same radius the template chose, and
 *    the 44px minimum height the accessibility sheet insists on. The list of automatic promotions on the
 *    checkout was left out of the same pass and kept the browser's bullets and indent, so it is reset
 *    here with the rest of the house list styles.
 *
 * 2. A shop has to fit a phone. Four things stopped that: the header could not shrink because the
 *    store name had no truncation, the side-rail templates dropped their side gutters below 900px so
 *    the page ran edge to edge instead of sitting in the middle, nothing stopped a long unbroken word
 *    from pushing the whole page sideways, and the fixed bottom bar was a three column grid holding
 *    up to five links — so a shop with four actions showed three of them on the first row and left
 *    the fourth, usually the cart, stranded on a row of its own. All four are handled below, and a
 *    last line of defence clips any horizontal overflow so a shop can never be dragged left and right.
 *
 * This file loads last on purpose: it is the layer that corrects whatever a template did, so it must
 * come after the templates. Nothing here changes layout above 760px except the button identity.
 */

/* ------------------------------------------------- 1. the pieces the mark-up asks for --- */

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:46px;
  max-width:100%;
  padding:0 18px;
  border:1px solid var(--line,#e7e8ea);
  border-radius:var(--radius,10px);
  background:var(--surface,#fff);
  color:var(--ink,#15171a);
  font:inherit;
  font-size:.88rem;
  font-weight:750;
  line-height:1.2;
  letter-spacing:.005em;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  touch-action:manipulation; /* no 300ms tap delay, no double-tap zoom on the shop's own buttons */
  -webkit-tap-highlight-color:transparent;
}

.button.primary{
  border-color:transparent;
  background:var(--accent,#2f5bff);
  color:#fff;
}

.button.secondary{
  border-color:var(--line,#e7e8ea);
  background:var(--surface,#fff);
  color:var(--ink,#15171a);
}

.button.compact{
  min-height:40px;
  padding:0 14px;
  font-size:.8rem;
}

.button:active{
  transform:translateY(1px);
}

.button:disabled,
.button[aria-disabled="true"]{
  background:#e4e6e9;
  border-color:#e4e6e9;
  color:#747a83;
  cursor:not-allowed;
  transform:none;
}

@media(hover:hover){
  .button.secondary:hover,
  .button:not(.primary):hover{
    border-color:var(--ink,#15171a);
  }
  .button.primary:hover{
    filter:brightness(1.06);
  }
}

@media(prefers-reduced-motion:no-preference){
  .button{
    transition:background-color .18s ease,border-color .18s ease,filter .18s ease,transform .18s ease;
  }
}

/* The way back to the shop from the cart, the saved list or the checkout. It used to be an underlined
   link sitting on top of a very large heading, which read as a leftover rather than a control. */
.cart-heading>a,
.back-to-shop{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:44px;
  padding:0 4px;
  color:var(--accent-ink,#1737a8);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.01em;
  text-decoration:none;
}

.cart-heading>a:hover,
.back-to-shop:hover{
  text-decoration:underline;
}

/* A row of buttons wraps instead of squeezing: at 320px the four share controls used to break their
   own words across three lines. */
.share-actions,
.filter-actions,
.builder-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.share-actions .button{
  flex:0 1 auto;
}

/* The automatic-promotions list on the checkout is the one list in the shop that was never given the
   house reset (every other list sets list-style:none, margin:0, padding:0), so it showed browser bullets
   and a 40px indent inside a payment card. */
.promo-auto-list{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}

/* ------------------------------------------------------- 2. fit on every screen --- */

/* A long store name, a pasted URL, a product name with no spaces — none of them may drag the page
   sideways. `clip` is used rather than `hidden` because it does not turn the body into a scroll
   container, which would break the sticky side rail on the wide templates. */
html{
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
  overflow-x:clip;
}

/* The header is the tightest row on a phone: a logo, a name, and up to five actions. The name is the
   only part that can give way, so it truncates with an ellipsis while the actions keep their size. */
.store-header{
  gap:12px;
  min-width:0;
}

.store-header>nav{
  min-width:0;
}

.store-identity{
  flex:1 1 auto;
  min-width:0;
}

.store-identity>span:last-child{
  min-width:0;
}

.store-identity strong,
.store-identity small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.store-header>nav:last-child{
  flex:none;
}

/* The fixed bottom bar holds three links in a small shop and five in a shop that also sells offers.
   A fixed three column grid stranded the extra ones on a row of their own, which is how the cart ended
   up sitting by itself under the other three. Each link now takes an equal share of whatever is there. */
.mobile-store-nav{
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
}

/* The side-rail templates: below 900px the rail moves above the catalogue, and both need the side
   gutters back or the shop runs edge to edge instead of sitting in the middle of the screen. */
@media(max-width:900px){
  /* The sidebar templates keep their category links in a rail and in the header. The rail folds away on a
     phone, but the header copy did not: `body.store-nav-sidebar .store-desktop-links{display:flex}` is a
     heavier selector than the `@media(max-width:760px)` rule that hides it, so a phone kept the full
     desktop links, pushed the actions off the right edge and made every page scroll sideways. */
  body .store-header .store-desktop-links{
    display:none;
  }

  .store-body.is-rail{
    padding:0 12px;
  }

  .store-body.is-rail .store-shell{
    width:100%;
    margin:0 auto;
  }

  .store-body.is-rail .store-rail{
    position:static;
    top:auto;
    overflow-x:auto;
    overscroll-behavior-x:contain;
  }

  .store-body.is-rail .store-rail a{
    min-height:44px;
  }
}

@media(max-width:760px){
  .store-header{
    gap:8px;
  }

  .store-identity small{
    display:none;
  }

  .store-identity strong{
    font-size:.95rem;
  }

  /* Two buttons share the row rather than one stretching and one shrinking. */
  .filter-actions .button{
    flex:1 1 auto;
  }

  .share-actions .button{
    flex:1 1 44%;
  }
}

/* The compact share row on a product page — Share, WhatsApp, Facebook, Instagram, Copy — was turned into
   five equal fifths below 600px, so each control was about 70px wide and its label broke mid-word:
   "Sha re", "Wh ats App", "Fac ebo ok". Two per row, labels that never break, and a full tap target. */
@media(max-width:760px){
  .product-share-actions{
    gap:8px;
  }

  .product-share-actions>*{
    flex:1 1 calc(50% - 4px);
    min-height:44px;
    justify-content:center;
    white-space:nowrap;
  }
}

/* The narrowest phones in use: 320px. */
@media(max-width:430px){
  .store-header .header-action{
    padding:0 9px;
  }

  .button{
    padding:0 14px;
    font-size:.85rem;
  }

  .share-actions .button{
    flex:1 1 100%;
  }
}

@media(max-width:360px){
  .store-header{
    padding:0 8px;
  }
}

/* The fixed bottom bar must not sit on top of the footer on a phone with a home indicator. */
.store-footer{
  padding-bottom:max(76px,calc(76px + env(safe-area-inset-bottom)));
}

/* Prose the merchant writes can contain a long word or a pasted link with no spaces. The accessibility
   sheet already covers the cards, the product copy and the policy body; these two were left out. */
.policy-links-wrap,
.faq-list{
  overflow-wrap:break-word;
  word-break:break-word;
}