/* ==========================================================================
   Grillsons — pantry & kit layer (inc/pantry.php)
   Loaded after mobile.css. Marinades & sauces, rubs / salts / peppers and
   grill kit join the counter in their own materials:

     • Jar label    — marinades & sauces: cream label, rounded like a jar
                      wrap, with the brick band the jar label carries.
     • Rub pouch    — rubs, salts & peppers: square-shouldered label with the
                      pouch label's gold band and stitched rules.
     • Kraft tag    — grill kit: a kraft hang-tag with clipped shoulders, a
                      gold eyelet and its string running up into the photo.
   The jar and pouch bands match the packshots (grillsons-core make-packshots).

   Same type, same "+", same rules as the vacuum-pack sticker — only the
   paper changes. Phone treatments live in the 860px block, like mobile.css.
   ========================================================================== */

:root {
  --gs-cream: #F4EEE2;
  --gs-paper: #FFF8F0;
  --gs-ink: #1A140C;
  --gs-label-rule: #DCCFB8;
  --gs-label-dim: #6E6557;
  --gs-kraft: #CDB48C;
  --gs-kraft-2: #C4A97E;
  --gs-kraft-dim: #574A38;
  --gs-kraft-rule: rgba(26, 20, 12, .2);
  --gs-jar-band: #8C2F23;
  --gs-pouch-band: #D4A24E;
  --gs-pouch-rule: #CDBFA6;
}

/* -------------------------------------------------------------------------
   0. All widths
   ------------------------------------------------------------------------- */

/* Category badges for the shelf (same pill as the meat; own colour families:
   olive for marinades, sumac for rubs, steel for kit). */
.gs-card__badge--cat-marinades   { background: rgba(112, 128, 60, .22); color: #C3CD92; border-color: rgba(112, 128, 60, .46); }
.gs-card__badge--cat-rubs-spices { background: rgba(140, 48, 72, .24);  color: #E09CAB; border-color: rgba(140, 48, 72, .46); }
.gs-card__badge--cat-accessories { background: rgba(120, 136, 146, .2); color: #BCC6CC; border-color: rgba(120, 136, 146, .44); }

/* Long section names stay on one line inside the photo. */
.gs-card--pantry .gs-card__badge { max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The board: a second shelf under its own heading, numbered on. */
.gs-board__group { margin-top: 4px; }
.gs-board__group-h {
  display: flex; align-items: center; gap: 10px; padding: 14px 4px 2px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
}
.gs-board__group-h::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(212, 162, 78, .45), transparent);
}
[dir="rtl"] .gs-board__group-h::after { background: linear-gradient(270deg, rgba(212, 162, 78, .45), transparent); }
.gs-board--sub .gs-board__name { font-size: 19px; }
.gs-board--sub .gs-board__row.gs-drawer__link { min-height: 46px; padding-block: 10px; }

/* Arabic in the mono kickers: no letter-spacing (it pulls Arabic letters
   apart) and the Arabic face instead of a Latin monospace fallback. */
.gs-rtl .gs-board__group-h,
.gs-rtl .gs-drawer__kicker,
.gs-rtl .gs-drawer__lang-h,
.gs-rtl .gs-drawer__sign-txt,
.gs-rtl .gs-catrail__sep,
.gs-rtl .gs-pairs__h,
.gs-rtl .gs-spec__k,
.gs-rtl .gs-facets__sub,
.gs-rtl .gs-shelf__count,
.gs-rtl .gs-navdrop__kicker {
  font-family: var(--font-body); letter-spacing: 0; font-weight: 700;
}
.gs-rtl .gs-board__group-h, .gs-rtl .gs-drawer__kicker { font-size: 12px; }
.gs-rtl .gs-drawer__sign-txt { font-size: 11.5px; }
/* The same for the labels every shelf page and card carries ("رفّ المونة",
   the section badge, the cut line, the label key): Arabic set in the Arabic
   face, unspaced, a size up so it reads at arm's length. */
.gs-rtl .gs-eyebrow,
.gs-rtl .gs-card__cut,
.gs-rtl .gs-card__badge,
.gs-rtl .gs-card__tag-k,
.gs-rtl .gs-card__tag-price small,
.gs-rtl .gs-pdp__packs-label,
.gs-rtl .gs-pdp__meta,
.gs-rtl .gs-shop__count,
.gs-rtl .gs-tab__lbl,
.gs-rtl .gs-logo__sub,
.gs-rtl .gs-mini__price small,
.gs-rtl .woocommerce-breadcrumb,
.gs-rtl .gs-promo,
.gs-rtl .gs-manifesto__sub,
.gs-rtl .gs-pill-eyebrow,
.gs-rtl .gs-stat__num,
.gs-rtl .gs-houserule__label,
.gs-rtl .gs-done__legend,
.gs-rtl .gs-tick__label,
.gs-rtl .gs-facets__h,
.gs-rtl .gs-cook__steps-h,
.gs-rtl .gs-actionbar__k,
.gs-rtl .gs-buybar__k {
  font-family: var(--font-body); letter-spacing: 0;
}
.gs-rtl .woocommerce-breadcrumb { font-size: 12px; }
.gs-rtl .gs-promo { font-size: 12px; }
.gs-rtl .gs-eyebrow { font-size: 13px; font-weight: 700; }
.gs-rtl .gs-card__badge { font-size: 11.5px; font-weight: 700; }
.gs-rtl .gs-pdp__packs-label,
.gs-rtl .gs-pdp__meta,
.gs-rtl .gs-shop__count { font-size: 13px; font-weight: 700; }

/* Desktop header: "Pantry & kit" opens a small board. */
.gs-navdrop { position: relative; display: inline-flex; }
.gs-navdrop__btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gs-navdrop__btn svg { flex: none; opacity: .7; transition: transform .25s var(--ease-out); }
.gs-navdrop.is-open .gs-navdrop__btn svg { transform: rotate(180deg); }
.gs-navdrop__btn.is-current,
.gs-navdrop.is-open .gs-navdrop__btn { color: var(--gold-bright); }
.gs-navdrop__panel {
  position: absolute; top: 100%; left: 50%; z-index: 60;
  width: max-content; min-width: 300px; max-width: 380px; margin-top: 10px; padding: 6px 16px 8px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(140, 47, 35, .14), transparent 62%), var(--bg-promo);
  border: 1px solid rgba(212, 162, 78, .32); border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .2s ease, transform .25s var(--ease-out), visibility 0s linear .25s;
}
/* Hover bridge across the 10px gap. */
.gs-navdrop__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.gs-navdrop.is-open .gs-navdrop__panel,
html:not(.gs-js) .gs-navdrop:focus-within .gs-navdrop__panel {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .2s ease, transform .25s var(--ease-out);
}
@media (hover: hover) {
  .gs-navdrop:hover .gs-navdrop__panel {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity .2s ease, transform .25s var(--ease-out);
  }
}
.gs-board--drop .gs-navdrop__row {
  display: flex; align-items: baseline; gap: 10px; min-height: 46px; padding: 11px 2px;
  border-bottom: 1px solid rgba(237, 230, 216, .06);
}
.gs-board--drop li:last-child .gs-navdrop__row { border-bottom: 0; }
.gs-board--drop .gs-board__name { font-size: 17px; white-space: nowrap; color: var(--text); }
.gs-board--drop .gs-navdrop__row:hover .gs-board__name,
.gs-board--drop .gs-navdrop__row.is-current .gs-board__name { color: var(--gold-bright); }
.gs-board--drop .gs-navdrop__row:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; border-radius: 8px; }

/* The header nav with its "Pantry & kit" item needs ~1180px; it never fit at
   1081–1101px even before (the cart pill was clipped off the right edge).
   Below 1240px the menu button and the board carry the same links. */
@media (min-width: 1081px) and (max-width: 1239px) {
  .gs-nav { display: none; }
  .gs-navtoggle { display: inline-flex; }
}
@media (min-width: 1240px) {
  .gs-nav__item { padding-inline: 13px; }
}

/* Category rail: where the counter ends and the shelf begins. */
.gs-catrail__sep {
  flex: none; align-self: center; display: inline-flex; align-items: center; gap: 9px;
  padding-inline: 6px 2px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}
.gs-catrail__sep::before { content: ""; width: 1px; height: 28px; background: rgba(212, 162, 78, .45); }
.gs-rtl .gs-catrail__sep { font-size: 11.5px; }

/* A section's own line under its title ("Season early, and season enough."). */
.gs-shop .term-description { max-width: 62ch; margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-3); }
.gs-shop .term-description p { margin: 0; }

/* Wide-screen filter sidebar: the same break in the category chips. */
.gs-facets__sub {
  flex-basis: 100%; width: 100%; margin: 12px 0 6px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold);
}

/* ---- Compact label rails: "Finish it with" / "Don't forget" ---- */
.gs-pairs { margin: 6px 0 20px; min-width: 0; }
.gs-pairs__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gs-pairs__h {
  flex: 1 1 auto; display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); line-height: 1.2;
}
.gs-pairs__h::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(212, 162, 78, .45), transparent); }
[dir="rtl"] .gs-pairs__h::after { background: linear-gradient(270deg, rgba(212, 162, 78, .45), transparent); }
.gs-rtl .gs-pairs__h { font-size: 14px; }
.gs-pairs__kicker { font-size: 12px; color: var(--text-dim); }
/* contain: the rail scrolls inside whatever column holds it and never widens
   that column (in the cart's 1fr grid track it pushed the docket 28px off
   the screen). */
.gs-cart-main, .gs-pdp__panel { min-width: 0; }
.gs-pairs__rail {
  contain: inline-size;
  display: grid; grid-auto-flow: column; grid-auto-columns: 262px; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 2px 2px 12px; scrollbar-width: thin; scrollbar-color: rgba(212, 162, 78, .35) transparent;
}

/* One compact label: photo on the start side, the label beside it. */
.gs-mini {
  position: relative; scroll-snap-align: start; min-width: 0;
  display: grid; grid-template-columns: 82px minmax(0, 1fr);
  min-height: 98px; border-radius: 12px; overflow: hidden;
  background: var(--gs-cream); color: var(--gs-ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(26, 20, 12, .06);
}
.gs-mini__media { position: relative; display: block; overflow: hidden; background: #2A231B; }
.gs-mini__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gs-mini__img--ph { display: grid; place-items: center; color: var(--gold); }
/* Pantry packshots stand small in a wide dark frame: close in on the label. */
.gs-mini--jar .gs-mini__img, .gs-mini--pouch .gs-mini__img, .gs-mini--tag .gs-mini__img { transform: scale(1.3); }
.gs-mini__label { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 8px 11px; }
.gs-mini__name {
  font-family: var(--font-display); font-weight: 800; font-size: 14.5px; line-height: 1.14;
  letter-spacing: -.01em; color: var(--gs-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The name is the link to the product: its hit area covers the whole label
   (the label is the containing block; the "+" row sits above it). */
.gs-mini__name::after { content: ""; position: absolute; inset: 0; }
.gs-mini__name:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 2px; border-radius: 3px; }
.gs-mini__size {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--gs-label-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: isolate;
}
.gs-mini__buy { position: relative; z-index: 1; margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gs-mini__price {
  font-family: var(--font-mono); font-weight: 700; font-size: 14.5px; color: var(--gs-ink);
  white-space: nowrap; direction: ltr; unicode-bidi: isolate;
}
.gs-mini__price small { font-size: 8px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--gs-label-dim); }
/* The "+" — the pack-label button, at every width. */
.gs-mini .gs-mini__add {
  position: relative; z-index: 1; flex: none; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 10px;
  background: var(--gs-ink); color: var(--gold-bright); cursor: pointer;
  transition: background .2s, transform .15s;
}
.gs-mini .gs-mini__add::after { content: ""; position: absolute; inset: -4px; }
.gs-mini .gs-mini__add:active { transform: scale(.94); }
.gs-mini .gs-mini__add svg + svg { display: none; }
.gs-mini .gs-mini__add.is-busy svg:first-child { animation: gs-add-spin .8s linear infinite; }
.gs-mini .gs-mini__add.is-done { background: #2C5A27; color: #D2EEC8; }
.gs-mini .gs-mini__add.is-done svg:first-child { display: none; }
.gs-mini .gs-mini__add.is-done svg + svg { display: block; }
.gs-mini .gs-mini__add.is-error { background: var(--brick); color: var(--text-bright); }
.gs-mini .gs-mini__add:focus-visible { outline: 2px solid var(--gs-ink); outline-offset: 2px; }
[dir="rtl"] .gs-mini .gs-card__add--go svg { transform: scaleX(-1); }
[dir="rtl"] .gs-mini__label { padding: 9px 11px 8px 10px; }

/* Jar: rounded like the jar wrap, brick band on the label. */
.gs-mini--jar { border-radius: 16px; }
.gs-mini--jar .gs-mini__label { padding-top: 13px; }
.gs-mini--jar .gs-mini__label::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--gs-jar-band); }
/* Pouch: square shoulders, gold band. */
.gs-mini--pouch { border-radius: 5px; }
.gs-mini--pouch .gs-mini__label { padding-top: 13px; }
.gs-mini--pouch .gs-mini__label::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--gs-pouch-band); }
/* Kraft tag: kraft paper and the punched eyelet. */
.gs-mini--tag { background: var(--gs-kraft); }
.gs-mini--tag .gs-mini__size,
.gs-mini--tag .gs-mini__price small { color: var(--gs-kraft-dim); }
.gs-mini--tag .gs-mini__label { padding-inline-end: 24px; }
.gs-mini--tag .gs-mini__label::before {
  content: ""; position: absolute; top: 9px; inset-inline-end: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); box-shadow: 0 0 0 2px #B98C45, inset 0 1px 2px rgba(0, 0, 0, .7);
}

/* PDP: the rail sits in the buy column, under the button. */
.gs-pairs--pdp { margin: 2px 0 20px; }
/* Cart: under the lines on wide screens; last thing above the docket on phones. */
.gs-pairs--cart { margin: 20px 0 4px; }

/* ---- Product page: a jar's cut sheet ---- */
.gs-spec + .gs-spec { margin-top: 14px; }
.gs-spec__k {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.gs-rtl .gs-spec__k { font-size: 13px; }
.gs-spec__v p { margin: 0 0 8px; }
.gs-spec__v p:last-child { margin-bottom: 0; }
.gs-spec--allergens .gs-spec__v { color: var(--text-2); font-weight: 600; }
/* "How to use it" specs ([[label, value]…]) — the cook block's chips, smaller. */
.gs-usespecs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0 0 14px; }
.gs-usespec {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 12px;
  background: var(--bg); border: 1px solid var(--hairline-2); border-radius: 10px;
}
.gs-usespec__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.gs-usespec__v { font-family: var(--font-mono); font-size: 14px; line-height: 1.3; color: var(--gold-bright); overflow-wrap: anywhere; }
.gs-rtl .gs-usespec__k { font-family: var(--font-body); font-size: 12px; letter-spacing: 0; }
.gs-rtl .gs-usespec__v { font-family: var(--font-body); font-weight: 700; }
.gs-acc__body .gs-usesteps { margin: 0; padding: 0; list-style: none; counter-reset: gsuse; }
.gs-acc__body .gs-usesteps li { position: relative; padding-block: 0 12px; padding-inline: 34px 0; counter-increment: gsuse; }
.gs-acc__body .gs-usesteps li:last-child { padding-bottom: 0; }
.gs-acc__body .gs-usesteps li::before {
  content: counter(gsuse); position: absolute; inset-inline-start: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(212, 162, 78, .14); border: 1px solid rgba(212, 162, 78, .4); color: var(--gold-bright);
  font-family: var(--font-mono); font-size: 11px;
}
.gs-acc__body .gs-usesteps + p { margin-top: 14px; }
.gs-usetip { padding: 12px 14px; border-radius: 11px; background: rgba(212, 162, 78, .07); border: 1px solid rgba(212, 162, 78, .22); }
@media (min-width: 701px) {
  .gs-promise--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Home: the pantry & kit band ---- */
.gs-pantryband { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad-x) 12px; }
.gs-pantryband__head { max-width: 640px; }
.gs-pantryband__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(25px, 3vw, 36px);
  line-height: 1.08; letter-spacing: -.02em; color: var(--text-bright); margin: 4px 0 0;
}
.gs-rtl .gs-pantryband__title { letter-spacing: 0; }
.gs-pantryband__lede { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-3); }
.gs-pantryband__tiles {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(var(--gs-tiles, 3), minmax(0, 1fr)); gap: 18px;
}
.gs-shelf { min-width: 0; }
.gs-shelf__link {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 16px; background: var(--surface); border: 1px solid rgba(237, 230, 216, .07);
  transition: border-color .3s, transform .35s var(--ease-out);
}
.gs-shelf__link:hover { border-color: rgba(212, 162, 78, .45); transform: translateY(-4px); }
.gs-shelf__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.gs-shelf__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px 16px 0 0; background: #221C15; }
.gs-shelf__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transition: transform .6s var(--ease-out); }
.gs-shelf__link:hover .gs-shelf__img { transform: scale(1.05); }
.gs-shelf__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(212, 162, 78, .7); }
.gs-shelf__label {
  position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 3px;
  margin: -22px 10px 10px; padding: 12px 14px 11px; border-radius: 10px;
  background: var(--gs-cream); color: var(--gs-ink);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), 0 0 0 1px rgba(26, 20, 12, .06);
}
.gs-shelf__n { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; color: #8C2F23; }
.gs-shelf__name { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.12; letter-spacing: -.015em; }
.gs-rtl .gs-shelf__name { letter-spacing: 0; }
.gs-shelf__count {
  margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gs-label-dim);
}

/* Shared label materials: the band tiles wear the same paper as the cards. */
.gs-shelf--jar .gs-shelf__label,
.gs-shelf--pouch .gs-shelf__label { padding-top: 16px; overflow: hidden; }
.gs-shelf--jar .gs-shelf__label { border-radius: 14px; }
.gs-shelf--pouch .gs-shelf__label { border-radius: 4px; }
.gs-shelf--jar .gs-shelf__label::before,
.gs-shelf--pouch .gs-shelf__label::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--gs-jar-band); }
.gs-shelf--pouch .gs-shelf__label::before { background: var(--gs-pouch-band); }
.gs-shelf--tag .gs-shelf__label {
  box-shadow: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .5));
  border-radius: 0 0 10px 10px; padding-top: 24px;
  background:
    linear-gradient(135deg, transparent 11px, var(--gs-kraft) 11.5px) top left / 50.5% 60% no-repeat,
    linear-gradient(225deg, transparent 11px, var(--gs-kraft) 11.5px) top right / 50.5% 60% no-repeat,
    linear-gradient(var(--gs-kraft), var(--gs-kraft-2)) bottom / 100% 41% no-repeat;
}
.gs-shelf--tag .gs-shelf__label::before {
  content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 0 0 2px #B98C45, inset 0 1px 2px rgba(0, 0, 0, .7);
}
.gs-shelf--tag .gs-shelf__label::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% - 13px); width: 2px; height: 34px; margin-left: -1px;
  border-radius: 1px; background: linear-gradient(180deg, rgba(233, 220, 192, .2), #E3D3B1 40%, #CDBB98);
  transform-origin: 50% 100%; transform: rotate(14deg);
}
[dir="rtl"] .gs-shelf--tag .gs-shelf__label::after { transform: rotate(-14deg); }
.gs-shelf--tag .gs-shelf__count { color: var(--gs-kraft-dim); }

/* -------------------------------------------------------------------------
   1. Phones: the card labels, the band and the rails at thumb size
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* Jar label (marinades & sauces): rounded, with the jar label's brick band. */
  .gs-card--jar .gs-card__body,
  .gs-card--pouch .gs-card__body { padding-top: 15px; overflow: hidden; }
  .gs-card--jar .gs-card__body { border-radius: 14px; }
  .gs-card--jar .gs-card__body::before,
  .gs-card--pouch .gs-card__body::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--gs-jar-band);
  }
  .gs-card--jar .gs-card__tag-row { border-color: rgba(140, 47, 35, .22); }
  .gs-card--jar .gs-card__tag-k { color: #8C2F23; }

  /* Rub pouch label (rubs, salts & peppers): square shoulders, gold band,
     stitched rules. */
  .gs-card--pouch .gs-card__body { border-radius: 4px; }
  .gs-card--pouch .gs-card__body::before { background: var(--gs-pouch-band); }
  .gs-card--pouch .gs-card__tag-row { border-top-style: dashed; border-bottom-style: dashed; border-color: var(--gs-pouch-rule); }

  /* Kraft hang-tag (grill kit & accessories). */
  .gs-card--tag .gs-card__body {
    margin-top: -26px; padding-top: 24px; border-radius: 0 0 10px 10px;
    box-shadow: none; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
    background:
      linear-gradient(135deg, transparent 11px, var(--gs-kraft) 11.5px) top left / 50.5% 60% no-repeat,
      linear-gradient(225deg, transparent 11px, var(--gs-kraft) 11.5px) top right / 50.5% 60% no-repeat,
      linear-gradient(var(--gs-kraft), var(--gs-kraft-2)) bottom / 100% 41% no-repeat;
  }
  .gs-card--tag .gs-card__body::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%;
    background: var(--surface); box-shadow: 0 0 0 2px #B98C45, inset 0 1px 2px rgba(0, 0, 0, .7);
  }
  .gs-card--tag .gs-card__body::after {
    content: ""; position: absolute; left: 50%; bottom: calc(100% - 13px); width: 2px; height: 36px; margin-left: -1px;
    border-radius: 1px; background: linear-gradient(180deg, rgba(233, 220, 192, .15), #E3D3B1 40%, #CDBB98);
    transform-origin: 50% 100%; transform: rotate(14deg); pointer-events: none;
  }
  [dir="rtl"] .gs-card--tag .gs-card__body::after { transform: rotate(-14deg); }
  .gs-card--tag .gs-card__cut,
  .gs-card--tag .gs-card__tag-k,
  .gs-card--tag .gs-card__tag-more,
  .gs-card--tag .gs-card__tag-price small { color: var(--gs-kraft-dim); }
  .gs-card--tag .gs-card__tag-row { border-color: var(--gs-kraft-rule); }

  /* On its own shelf page a pantry card does not need the section pill:
     the page title and the label material already say it. */
  .gs-pantry-page.tax-product_cat .gs-card--pantry .gs-card__badge:not(.gs-card__badge--chilled) { display: none; }

  /* Rails bleed to the screen edges and snap label by label. */
  .gs-pairs__rail {
    grid-auto-columns: minmax(236px, 74%); scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-x)); padding: 2px var(--pad-x) 12px; scroll-padding-inline: var(--pad-x);
  }
  .gs-pairs__rail::-webkit-scrollbar { display: none; }
  .gs-pairs--pdp { margin: 0 0 18px; }
  .gs-pairs--cart { margin: 22px 0 2px; }

  /* Home band: three labels in a row, short enough not to lengthen the page. */
  .gs-pantryband { padding: 34px var(--pad-x) 6px; }
  .gs-pantryband__title { font-size: 25px; }
  .gs-pantryband__lede { font-size: 13.5px; margin-top: 6px; }
  .gs-pantryband__tiles { gap: 9px; margin-top: 16px; }
  .gs-shelf__link { border-radius: 13px; }
  .gs-shelf__link:hover { transform: none; }
  .gs-shelf__media { aspect-ratio: 1 / 1; border-radius: 13px 13px 0 0; }
  .gs-shelf__label { margin: -16px 5px 5px; padding: 8px 8px 7px; border-radius: 8px; gap: 2px; }
  .gs-shelf--jar .gs-shelf__label { border-radius: 11px; }
  .gs-shelf--jar .gs-shelf__label,
  .gs-shelf--pouch .gs-shelf__label { padding-top: 12px; }
  .gs-shelf--jar .gs-shelf__label::before,
  .gs-shelf--pouch .gs-shelf__label::before { height: 4px; }
  .gs-shelf--tag .gs-shelf__label { margin-top: -22px; padding-top: 20px; }
  .gs-shelf--tag .gs-shelf__label::after { height: 30px; }
  .gs-shelf__n { font-size: 9px; }
  .gs-shelf__name { font-size: 13.5px; line-height: 1.12; hyphens: auto; overflow-wrap: anywhere; }
  .gs-rtl .gs-shelf__name { font-size: 14.5px; }
  .gs-shelf__count { font-size: 8.5px; letter-spacing: .1em; padding-top: 4px; }
  .gs-rtl .gs-shelf__count { font-size: 11px; }

  .gs-shop .term-description { font-size: 14px; margin-top: 6px; }

  /* Board: the shelf rows a touch smaller than the counter's. */
  .gs-board__group-h { padding: 12px 4px 0; }

  /* Arabic label text at phone sizes (see the unspaced-Arabic note above). */
  .gs-rtl .gs-card__cut { font-size: 11px; }
  .gs-rtl .gs-card__tag-k { font-size: 10.5px; font-weight: 700; }
  .gs-rtl .gs-card__tag-price small { font-size: 10px; }
  .gs-rtl .gs-card__badge { font-size: 10.5px; }
  .gs-rtl .gs-tab__lbl { font-size: 11px; font-weight: 700; }
  .gs-rtl .gs-logo__sub { font-size: 10px; }
}

@media (max-width: 360px) {
  .gs-mini { grid-template-columns: 70px minmax(0, 1fr); }
  .gs-shelf__name { font-size: 12.5px; }
  .gs-board--sub .gs-board__name { font-size: 17.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-navdrop__panel, .gs-shelf__link, .gs-shelf__img { transition: none !important; }
  .gs-mini .gs-mini__add.is-busy svg:first-child { animation: none !important; }
}