/* Batch 31 (2026-10-03): Shopping Guide level up. Guide only (the stylesheet is enqueued on /explore/shopping-guide/ and nowhere else).
   Loads after batch 28 and batch 26. Groups:
   C1 hero lockup size and overlap         C7 maker cards with an empty slot
   C2 scroll reveal                         C8 day cards, aligned rows
   C3 button feedback                       C9 address link
   C4 time ladder in the Choose the time    C10 hover on photo cards
   C5 Stay a little longer wall             C11 hero well glow, once per 12 seconds
   C6 Meet the Makers badge on the plaid
   Motion rules: transform, translate, opacity, filter and box-shadow only. Reduced motion and ?static=1 show everything, nothing moves. */

:root{--gd31-ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- C1. Hero lockup: 460px at desktop, 260px on mobile, its lower edge overlaps the hero box like a lid ---------- */
.gd30-lockup{position:relative;z-index:4;max-width:460px;margin:-14px auto -36px}
.gd30-lockup img{filter:drop-shadow(0 6px 10px rgba(0,0,0,.5))}
body.om-mvp .editorial-hero .gd30-well{padding-top:calc(clamp(24px,3.5vw,44px) + 20px)}
@media(max-width:600px){.gd30-lockup{max-width:260px;margin:-8px auto -28px}body.om-mvp .editorial-hero .gd30-well{padding-top:calc(clamp(24px,3.5vw,44px) + 14px)}}

/* ---------- C2. Reveal: opacity, 24px rise and a 6px blur clear in 650ms. The individual translate property keeps each card's own tilt (transform) untouched. ---------- */
html.gd31-js [data-gd31]{--gd31-rv:opacity 650ms var(--gd31-ease) var(--gd31-d,0ms),translate 650ms var(--gd31-ease) var(--gd31-d,0ms),filter 650ms var(--gd31-ease) var(--gd31-d,0ms);opacity:0;translate:0 24px;filter:blur(6px);transition:var(--gd31-rv)}
html.gd31-js [data-gd31].is-in{opacity:1;translate:0 0;filter:none}
/* Stagger: the index lives in CSS so the order never depends on the script. */
.editorial-choices>[data-gd31]{--gd31-d:calc(var(--gd31-i,0) * 90ms)}
.gd20-entrance>[data-gd31]{--gd31-d:calc(var(--gd31-i,0) * 70ms)}
.gd30-fan>[data-gd31]{--gd31-d:calc(var(--gd31-i,0) * 90ms)}
:is(.editorial-choices,.gd20-entrance,.gd30-fan)>[data-gd31]:nth-child(2){--gd31-i:1}
:is(.editorial-choices,.gd20-entrance,.gd30-fan)>[data-gd31]:nth-child(3){--gd31-i:2}
.gd20-entrance>[data-gd31]:nth-child(4){--gd31-i:3}
/* Items that also have a hover transform keep that transition beside the reveal. */
html.gd31-js :is(.gd20-photo,.gd30-fan figure)[data-gd31]{transition:var(--gd31-rv),transform 220ms ease}
/* If the script never runs, the guarded start state clears itself after 3 seconds. */
html.gd31-js:not(.gd31-ready) [data-gd31]{animation:gd31-failsafe 1ms linear 3s forwards}
@keyframes gd31-failsafe{to{opacity:1;translate:0 0;filter:none}}
@media(prefers-reduced-motion:reduce){
  [data-gd31]{opacity:1!important;translate:none!important;filter:none!important;transition:none!important;animation:none!important}
}

/* ---------- C3. Buttons: 160ms lift and a 3px red ring on hover, press scale, mint focus ring. 10px rounded rectangles stay. ---------- */
body.om-mvp .editorial-shell :is(.editorial-actions a,.editorial-choice-links a,a.editorial-choice-link){transition:transform 160ms ease,box-shadow 160ms ease;border-radius:10px}
body.om-mvp .editorial-shell :is(.editorial-choice-links a,a.editorial-choice-link){width:fit-content;max-width:100%;padding-inline:8px;margin-inline:-8px}
body.om-mvp .editorial-shell :is(.editorial-actions a,.editorial-choice-links a,a.editorial-choice-link):hover{transform:translateY(-1px)!important;box-shadow:0 0 0 3px rgba(239,36,53,.28)!important}
body.om-mvp .editorial-shell :is(.editorial-actions a,.editorial-choice-links a,a.editorial-choice-link):active{transform:scale(.98)!important}
body.om-mvp .editorial-shell :is(.editorial-actions a,.editorial-choice-links a,a.editorial-choice-link):focus-visible{outline:3px solid #68f8b3!important;outline-offset:2px!important}
@media(prefers-reduced-motion:reduce){body.om-mvp .editorial-shell :is(.editorial-actions a,.editorial-choice-links a,a.editorial-choice-link){transition:none}}

/* ---------- C4. Choose the time that works for you: copy left, a ticket time ladder right (from the sales facts only) ---------- */
.gd31-time-copy{min-width:0}
.gd31-time-copy>:last-child{margin-bottom:0}
.gd31-ladder{list-style:none;margin:32px 0 0;padding:0;min-width:0}
.gd31-ladder li{display:grid;grid-template-columns:minmax(0,1fr) 10px minmax(0,1.15fr);column-gap:18px;align-items:center;margin:0;padding:15px 0}
.gd31-ladder li::before,.gd31-ladder li::after{content:"";grid-column:2;grid-row:1;justify-self:center}
.gd31-ladder li::before{width:10px;height:10px;border-radius:50%;background:#ef2435;z-index:1}
.gd31-ladder li::after{align-self:stretch;width:2px;margin-block:-15px;background:#ef2435}
.gd31-ladder li:first-child::after{background:linear-gradient(to bottom,transparent 50%,#ef2435 50%)}
.gd31-ladder li:last-child::after{background:linear-gradient(to top,transparent 50%,#ef2435 50%)}
.gd31-ladder li:only-child::after{background:none}
.gd31-clock{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-end;text-align:right;font-family:var(--gd31-time-font,"OMHM Tomorrow",sans-serif);font-weight:800;letter-spacing:.02em;font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.15;color:#68f8b3}
/* Decision flag: the brief asked for Backline here. Backline draws a 4 that reads as a 9 ("4-5 PM" looks like "9-5 PM"), so the times use Tomorrow 800 mint. To restore Backline, set --gd31-time-font:"OMHM Backline",cursive on .gd31-ladder and raise the size to 1.9rem. */
.gd31-or{font:700 12px/1.4 "OMHM Tomorrow",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.gd31-opt{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.gd31-opt-name{font:700 clamp(.875rem,1.15vw,1.05rem)/1.2 "OMHM Tomorrow",sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.gd31-opt-day{font:700 12px/1.3 "OMHM Tomorrow",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8)}
@media(min-width:900px){
  body.om-mvp .editorial-capacity.gd31-time{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);column-gap:clamp(32px,4.5vw,72px);align-items:center}
  .gd31-ladder{margin-top:0}
}

/* ---------- C5. Stay a little longer: the blurred ornament wall comes from the shared .gd30-well rules in batch 28 (blur 2.5px, 62 percent scrim, portrait art under 768px). No extra rule is needed here. ---------- */

/* ---------- C6. Meet the Makers: the badge floats on the plaid, no black well ---------- */
body.om-mvp .gd26-makers>.editorial-well{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 20px!important}
body.om-mvp .gd26-makers .gd28-banner{display:block;width:100%;max-width:640px;height:auto;margin:0 auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))}

/* ---------- C7. A wide maker photo leaves empty slot area: the slot gets the plaid frame fill and the Ohio Made badge ---------- */
/* A photo taller than the slot (side bands) gets the plaid fill only; the badge would sit behind the photo. */
.editorial-maker-card.gd31-tall{position:relative}
.editorial-maker-card.gd31-tall::before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;pointer-events:none;z-index:0;background:#c4101f url('./journey-weave-tile.jpg') 0 0/94px 93px}
.editorial-maker-card.gd31-tall>img{position:relative;z-index:1;background:transparent}
.editorial-maker-card.gd31-tall>div{position:relative;z-index:1}
.editorial-maker-card.gd31-land{position:relative}
.editorial-maker-card.gd31-land::before,.editorial-maker-card.gd31-land::after{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:4/5;pointer-events:none;z-index:0}
.editorial-maker-card.gd31-land::before{background:#c4101f url('./journey-weave-tile.jpg') 0 0/94px 93px}
.editorial-maker-card.gd31-land::after{background:url('./art-20261003/ohio-made-badge-480.webp') 50% 70%/44% auto no-repeat;opacity:.85}
.editorial-maker-card.gd31-land>img{position:relative;z-index:1;background:transparent;object-position:center top}
.editorial-maker-card.gd31-land>div{position:relative;z-index:1}

/* ---------- C8. Day cards: heading size that fits three lines, rows shared across the three cards ---------- */
body.om-mvp .editorial-choices .editorial-choice h2{font-size:clamp(22px,1.7vw,28px)!important;line-height:1.02!important}
/* Pre-existing: the nowrap date line in each day card (batch 17) is wider than the card between 901 and 1100px and pushed the page 19px wide at 1024. It may wrap there. */
@media(max-width:1180px){body.om-mvp .editorial-choice .om17-date{white-space:normal}}
body.om-mvp .editorial-choice-extra{min-width:0}
body.om-mvp .editorial-choice-extra .editorial-choice-links{margin-bottom:0}
@media(min-width:901px){
  body.om-mvp .editorial-choices{gap:0 20px;grid-template-rows:auto auto auto 1fr auto}
  body.om-mvp .editorial-choices>.editorial-choice{display:grid;grid-row:span 5;grid-template-rows:auto auto auto 1fr auto;align-content:start}
  @supports (grid-template-rows:subgrid){body.om-mvp .editorial-choices>.editorial-choice{grid-template-rows:subgrid;row-gap:0}}
  body.om-mvp .editorial-choices>.editorial-choice>:is(.editorial-choice-extra,a.editorial-choice-link){align-self:start;margin-top:0}
  body.om-mvp .editorial-choices>.editorial-choice>.editorial-choice-more{align-self:end;margin-top:12px}
}

/* ---------- C9. Address is a map link ---------- */
.gd31-address{margin-bottom:12px!important}
.gd31-address-link{display:inline-flex;flex-wrap:wrap;align-items:baseline;align-content:center;column-gap:14px;min-height:44px;color:#68f8b3!important;text-decoration:none;font-weight:700}
.gd31-address-link>span:first-child{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.gd31-maps-label{font:700 12px/1.4 "OMHM Tomorrow",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#68f8b3}
.gd31-address-link:hover>span:first-child{color:#fff}

/* ---------- C10. Hover on the entrance photos and the person box cards: scale 1.025, tilt eased by 1 degree, 220ms, outline unchanged. Fine pointers only. ---------- */
.gd20-photo,.gd30-fan figure{transition:transform 220ms ease}
@media(hover:hover) and (pointer:fine){
  .gd20-photo:nth-child(odd):hover{transform:rotate(-.6deg) scale(1.025)}
  .gd20-photo:nth-child(even):hover{transform:rotate(.6deg) translateY(10px) scale(1.025)}
  .gd30-fan figure:nth-child(1):hover{transform:rotate(-5deg) scale(1.025)}
  .gd30-fan figure:nth-child(2):hover{transform:rotate(2deg) scale(1.025)}
  .gd30-fan figure:nth-child(3):hover{transform:rotate(-1deg) scale(1.025)}
}
@media(hover:hover) and (pointer:fine) and (min-width:900px){
  .gd30-fan figure:nth-child(1):hover{transform:rotate(-5deg) translateY(10px) scale(1.025)}
  .gd30-fan figure:nth-child(2):hover{transform:rotate(2deg) translateY(-8px) scale(1.025)}
  .gd30-fan figure:nth-child(3):hover{transform:rotate(-1deg) translateY(12px) scale(1.025)}
}
@media(prefers-reduced-motion:reduce){.gd20-photo,.gd30-fan figure{transition:none!important}}

/* ---------- C11 (retired in batch 41, ruling "Bright and still"): the hero well glow no longer breathes. It stays as a steady 0.28 glow on its own pseudo-element. ---------- */
body.om-mvp .editorial-hero .gd30-well{overflow:visible;box-shadow:0 0 0 1px rgba(255,64,80,.9),inset 0 1px 0 rgba(255,255,255,.12)}
.editorial-hero .gd30-well::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;box-shadow:0 0 18px rgba(239,36,53,.28)}