/* Homepage hero wall.
   Kept in its own file rather than added to index.min.css, which is minified
   and 586 KB — editing it by hand is how that file becomes unmaintainable.
   Every class is namespaced .mrhw- so nothing here can leak into the theme. */

.mrhw{position:relative;overflow:hidden;background:#f3ece2;height:clamp(560px,86vh,880px)}

/* ---- the drifting columns ---- */
.mrhw-cols{position:absolute;inset:-8% -2%;display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.mrhw-col{overflow:hidden}
.mrhw-track{display:flex;flex-direction:column;gap:12px;will-change:transform}
.mrhw-track.up{animation:mrhwUp linear infinite}
.mrhw-track.down{animation:mrhwDown linear infinite}
@keyframes mrhwUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes mrhwDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.mrhw-track{animation:none!important}}

.mrhw-tile{border-radius:14px;overflow:hidden;position:relative;flex:0 0 auto;display:block;
           text-decoration:none;background:#e6dccd}
.mrhw-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1)}
a.mrhw-tile:hover img,a.mrhw-tile:focus-visible img{transform:scale(1.06)}
a.mrhw-tile{cursor:pointer}
a.mrhw-tile:hover .mrhw-veil,a.mrhw-tile:focus-visible .mrhw-veil{
  background:linear-gradient(180deg,rgba(255,236,204,.14),rgba(43,12,17,.10) 40%,rgba(43,12,17,.80))}
.mrhw-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,236,204,.10),rgba(43,12,17,.05) 40%,rgba(43,12,17,.72))}
.mrhw-name{position:absolute;left:0;right:0;bottom:0;padding:.55rem .6rem .6rem;color:#fff8ec;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;font-size:.86rem;
  font-weight:600;line-height:1.2;text-shadow:0 1px 4px rgba(0,0,0,.6);
  transition:color .25s ease}
/* Shimmer sweep across the title on hover, so it is obvious the tile is a link.
   background-clip:text needs the fill transparent, which kills text-shadow, so
   a drop-shadow filter carries the legibility instead. */
a.mrhw-tile:hover .mrhw-name,a.mrhw-tile:focus-visible .mrhw-name{
  background-image:linear-gradient(100deg,#fff8ec 34%,#ffe6b0 44%,#fffdf6 50%,#ffe6b0 56%,#fff8ec 66%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.75));
  animation:mrhwShine 1.15s cubic-bezier(.4,0,.2,1) infinite}
@keyframes mrhwShine{from{background-position:170% 0}to{background-position:-70% 0}}
@media (prefers-reduced-motion:reduce){
  a.mrhw-tile:hover .mrhw-name,a.mrhw-tile:focus-visible .mrhw-name{
    animation:none;-webkit-text-fill-color:#ffe6b0;color:#ffe6b0;background-image:none}
  a.mrhw-tile:hover img{transform:none}
}
/* a category with no product shot and no picture of its own still gets a tile */
.mrhw-noimg{position:absolute;inset:0;background:linear-gradient(152deg,#9a1a26,#61000f)}

.mrhw-brand{background:linear-gradient(152deg,#9a1a26,#61000f);display:flex;align-items:center;
            justify-content:center;padding:1.1rem .9rem;text-align:center}
.mrhw-gold{background:linear-gradient(152deg,#e8c88c,#b8863c);display:flex;align-items:center;
           justify-content:center;padding:1.1rem .9rem;text-align:center}
.mrhw-brand .mrhw-bt{font-family:"Iowan Old Style",Palatino,Georgia,serif;color:#ffe6bd;font-size:1rem;line-height:1.32}
.mrhw-gold  .mrhw-bt{font-family:"Iowan Old Style",Palatino,Georgia,serif;color:#4a1008;font-size:1rem;line-height:1.32}
.mrhw-bt b{display:block;font-size:1.5rem;letter-spacing:-.01em;margin-bottom:.15rem}
.mrhw-bt small{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.53rem;
               letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-top:.4rem}
.mrhw-word .mrhw-bt{font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase}

/* ---- overlay ---- */
.mrhw-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(40,12,17,.10) 0%,rgba(40,12,17,.04) 26%,rgba(40,12,17,0) 48%,
                    rgba(40,12,17,0) 74%,rgba(40,12,17,.04) 100%),
    radial-gradient(120% 55% at 50% 116%,rgba(40,12,17,.05),transparent 66%)}

.mrhw-inner{position:relative;z-index:3;height:100%;display:grid;grid-template-columns:1.06fr .94fr;
  align-items:center;gap:clamp(1rem,3vw,3rem);padding:clamp(1.2rem,3vw,2.6rem);
  max-width:1280px;margin:0 auto;
  /* This layer spans the whole hero, so with pointer-events on it swallowed
     every click meant for a tile beneath it. Let clicks fall through, and
     switch them back on for the two blocks that are actually interactive. */
  pointer-events:none}
.mrhw-claim,.mrhw-panel{pointer-events:auto}

/* ---- copy block ---- */
.mrhw-claim{color:#fff;max-width:min(30rem,100%);position:relative;isolation:isolate;
  padding:clamp(1.05rem,2vw,1.5rem) clamp(1.15rem,2.2vw,1.7rem)}
.mrhw-claim::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;
  background:linear-gradient(104deg,rgba(26,6,10,.86) 0%,rgba(26,6,10,.78) 52%,rgba(26,6,10,.52) 100%);
  -webkit-backdrop-filter:blur(6px) saturate(.92);backdrop-filter:blur(6px) saturate(.92);
  box-shadow:0 24px 70px rgba(18,4,8,.42),inset 0 1px 0 rgba(255,226,186,.14);
  border:1px solid rgba(255,226,186,.16)}
.mrhw-eyebrow{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#e8c88c;
  margin:0 0 .5rem;font-weight:600;white-space:nowrap;text-shadow:0 1px 2px rgba(18,4,8,.4)}
.mrhw-claim h1{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.6rem,3.3vw,2.5rem);line-height:1.06;letter-spacing:-.02em;margin:0;font-weight:600;
  max-width:17ch;color:#fff;text-shadow:0 1px 3px rgba(18,4,8,.5)}
.mrhw-claim h1 .mrhw-hash{color:#e8c88c}
.mrhw-sub{font-size:clamp(.82rem,1.15vw,.9rem);line-height:1.45;margin:.6rem 0 0;max-width:34ch;
  color:#fbeee2;text-shadow:0 1px 2px rgba(18,4,8,.45)}

/* ---- panel ---- */
.mrhw-panel{background:#fffdf9;border-radius:20px;padding:clamp(1.4rem,2.6vw,2.2rem);
  box-shadow:0 26px 60px rgba(40,10,16,.30);max-width:28rem;justify-self:end;width:100%;
  border:1px solid rgba(201,149,74,.35)}
.mrhw-mark{width:46px;height:46px;display:block;margin-bottom:1rem}
.mrhw-panel h2{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:clamp(1.02rem,1.75vw,1.28rem);margin:0 0 .5rem;font-weight:600;line-height:1.28;
  letter-spacing:-.008em;color:#2b2023}
.mrhw-lede{color:#7b6a63;font-size:.9rem;margin:0 0 1.15rem}
.mrhw-ctarow{display:flex;gap:.5rem}
.mrhw-cta{flex:1;display:block;text-align:center;text-decoration:none;border-radius:999px;
  padding:.58rem .7rem;font-size:.82rem;font-weight:700;line-height:1.2;white-space:nowrap}
.mrhw-primary{background:#8a0f1b;box-shadow:0 6px 18px rgba(138,15,27,.28)}
/* index.min.css carries a{color:#212529!important}; these must out-shout it */
.mrhw a.mrhw-primary,.mrhw a.mrhw-primary:link,.mrhw a.mrhw-primary:visited,
.mrhw a.mrhw-primary:hover,.mrhw a.mrhw-primary:focus{color:#fff!important}
.mrhw-goldbtn{background:linear-gradient(160deg,#e8c88c,#c9954a);
  box-shadow:0 6px 16px rgba(176,128,52,.32)}
.mrhw a.mrhw-goldbtn,.mrhw a.mrhw-goldbtn:link,.mrhw a.mrhw-goldbtn:visited,
.mrhw a.mrhw-goldbtn:hover,.mrhw a.mrhw-goldbtn:focus{color:#4a1008!important}
.mrhw-or{display:flex;align-items:center;gap:.7rem;color:#b3a79c;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;margin:1rem 0 .85rem}
.mrhw-or::before,.mrhw-or::after{content:"";height:1px;background:#e6ddd0;flex:1}
.mrhw-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.mrhw-chips a{font-size:.78rem;text-decoration:none;background:#fff;
  border:1px solid #ecdfc9;border-radius:999px;padding:.34rem .72rem}
.mrhw .mrhw-chips a,.mrhw .mrhw-chips a:link,.mrhw .mrhw-chips a:visited,
.mrhw .mrhw-chips a:hover{color:#8a0f1b!important}

.mrhw a:focus-visible,.mrhw-chips a:focus-visible{outline:2px solid #c9954a;outline-offset:3px}

/* ---- responsive ---- */
@media (max-width:64rem){
  .mrhw-cols{grid-template-columns:repeat(5,1fr)}
  /* 7 columns in 5 tracks would wrap and leave empty cells */
  .mrhw-col:nth-child(n+6){display:none}
}
@media (max-width:60rem){
  .mrhw-inner{grid-template-columns:1fr;align-content:center}
  .mrhw-claim{max-width:none}
  .mrhw-claim h1{max-width:20ch}
  .mrhw-panel{justify-self:stretch;max-width:none;margin-top:1.4rem}
}
/* Phones and small tablets: drop the panel entirely and centre the copy block
   in the hero. The panel's CTAs are reachable from the header and the menu, so
   nothing becomes unreachable -- the hero just stops competing with itself on a
   narrow screen. */
@media (max-width:48rem){
  .mrhw{height:clamp(420px,68vh,620px)}
  .mrhw-panel{display:none}
  .mrhw-inner{grid-template-columns:1fr;place-content:center;justify-items:center;
              align-content:center}
  /* Nudged 50px above dead centre -- a hero block usually reads better a little
     high, and it also clears the bottom bar once that slides up. transform
     rather than margin so the grid centring underneath stays intact. */
  .mrhw-claim{max-width:min(27rem,100%);text-align:center;transform:translateY(-50px)}
  .mrhw-claim h1{max-width:none;margin-left:auto;margin-right:auto}
  .mrhw-sub{max-width:none;margin-left:auto;margin-right:auto}
}

@media (max-width:40rem){
  .mrhw-cols{grid-template-columns:repeat(3,1fr);gap:8px}
  .mrhw-track{gap:8px}
  /* same again at 3 tracks. Columns 1-3 keep an even spread of categories
     because tiles are dealt round-robin, and their fillers still alternate
     maroon / gold / maroon. */
  .mrhw-col:nth-child(n+4){display:none}
}
@media (max-width:26rem){.mrhw-eyebrow{white-space:normal;letter-spacing:.14em}}
@media (max-width:24rem){.mrhw-ctarow{flex-direction:column}}

}

}