/* 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}
/* No will-change: it would promote each of the seven tracks to its own
   permanent composited layer, and the keyframes already animate translate3d,
   which promotes the track for the animation's duration by itself. Seven
   permanent layers holding ~40 image tiles each is backing store spent for
   nothing.

   (This was my first guess at why Safari painted blank columns. It was wrong --
   the cause was loading="lazy" on the tiles, see hero_wall.php. Keeping the
   change because it is right on its own terms, not because it fixed that.) */
.mrhw-track{display:flex;flex-direction:column;gap:12px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}

.mrhw-col{overflow:hidden}
.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 1.9s cubic-bezier(.33,.05,.28,1)}
a.mrhw-tile:hover img,a.mrhw-tile:focus-visible img{transform:scale(1.035)}
a.mrhw-tile{cursor:pointer}
/* the tile deepens on hover -- the whole frame, not just the foot. A darker
   ground is what lets a .38 band of light read as gold rather than as haze,
   so darkening here and brightening the sweep do the same job from two sides. */
a.mrhw-tile .mrhw-veil{transition:background .9s ease}
a.mrhw-tile:hover .mrhw-veil,a.mrhw-tile:focus-visible .mrhw-veil{
  background:linear-gradient(180deg,rgba(38,10,15,.30),rgba(38,10,15,.34) 40%,rgba(30,8,12,.86))}
.mrhw-veil{position:absolute;inset:0;z-index:1;
  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;z-index:4;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}
/* 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)}
/* NO backdrop-filter here. This is what blanked the wall in Safari.
   backdrop-filter makes WebKit snapshot everything painted behind the element,
   and the seven transform-animated tracks behind it then failed to paint at
   all -- every tile showed just its veil over blank, except the one column the
   pointer happened to be over, because hovering forced that column to repaint.
   Reported as "in safari when we hover that column is visible else its not".

   Proven, not guessed: rendered in a real WKWebView (the engine Safari uses) at
   the reporter's 2000x1100 viewport, which reproduced it exactly; injecting
   backdrop-filter:none and re-rendering brought all seven columns back. Chromium
   never showed it, which is why it survived every check before this.

   The blur is not missed. The gradient below carries the legibility on its own
   once it is a little denser -- .93/.88/.72 in place of .86/.78/.52 -- and that
   was checked in the same WKWebView rather than assumed. */
.mrhw-claim::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;
  background:linear-gradient(104deg,rgba(26,6,10,.93) 0%,rgba(26,6,10,.88) 52%,rgba(26,6,10,.72) 100%);
  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}
/* ---- "or shop by style": the story rail ----------------------------------
   Instagram's stories row, doing the job of the old wrap-around pills. Each
   circle carries the newest product in that category or tag -- picked and
   converted to WebP by hero_wall_cron.php, never by this page.

   The pills were flat text and wrapped to three rows on a narrow panel, which
   is where the height went. One scrolling row of photography is shorter, and it
   shows the stock instead of describing it.

   The chips stay real links with their label in the DOM: this block is the
   homepage's main internal-link spread over the collection pages.

   Behaviour (arrows, wheel, click-and-drag) is in hero-wall.js and mirrors the
   Discover rail. Without the script this is still a swipeable strip. */
/* min-width:0 on both boxes, and it is load-bearing. A grid or flex item is
   sized from its content by default, so 16 chips at 78px made the panel
   1262px wide inside a 390px phone -- the overflow:auto below only starts
   working once the box is allowed to be narrower than what it holds. */
.mrhw-rail-wrap{position:relative;min-width:0;max-width:100%}

.mrhw-rail{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;min-width:0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 2px}
.mrhw-rail::-webkit-scrollbar{display:none}

.mrhw-chip{flex:0 0 auto;width:68px;text-align:center;text-decoration:none;
  box-sizing:border-box}

/* The gold rim is the whole idea: a 2px gradient ring with a cream inset, so the
   photo reads as a story circle rather than as a cropped thumbnail. */
.mrhw-ring{display:block;width:64px;height:64px;margin:0 auto;border-radius:50%;
  padding:2px;box-sizing:border-box;
  background:linear-gradient(135deg,#e8c88c,#c9954a 46%,#8a0f1b 100%);
  transition:transform .18s ease,box-shadow .18s ease}
.mrhw-ring img,.mrhw-mono{display:block;width:100%;height:100%;box-sizing:border-box;
  border-radius:50%;border:1.6px solid #fffdf9;background:#f3efec;object-fit:cover}
/* the picture must not be draggable as an image -- that fights the rail's drag */
.mrhw-ring img{-webkit-user-drag:none;user-select:none}

/* A chip whose product photo could not be resolved keeps its place with a
   monogram plate in brand colours. Never a broken image, never a bare ring. */
.mrhw-mono{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(152deg,#9a1a26,#61000f);color:#e8c88c;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-size:1.05rem;font-weight:600;letter-spacing:.04em}

.mrhw-chip b{display:block;margin-top:6px;font-size:.66rem;font-weight:600;
  line-height:1.25;color:#7b6a63;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:color .18s ease}

.mrhw-chip:hover .mrhw-ring{transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(138,15,27,.22)}
.mrhw-chip:hover b{color:#8a0f1b}

/* index.min.css carries a{color:#212529!important}; the anchor must out-shout it.
   The label is a <b>, which only INHERITS that colour, so its own rule above
   wins without !important. */
.mrhw .mrhw-chip,.mrhw .mrhw-chip:link,.mrhw .mrhw-chip:visited,
.mrhw .mrhw-chip:hover,.mrhw .mrhw-chip:focus{color:#8a0f1b!important;text-decoration:none!important}

/* ---- desktop affordances for the rail -------------------------------------
   Same reasoning as the Discover rail: overflow-x with a hidden scrollbar
   leaves a plain wheel mouse no way through at all. Arrows that disappear at
   each end, plus grab-and-drag. Only where there is a real pointer. */
.mrhw-rail-nav{display:none}

@media (min-width:1024px){
  .mrhw-rail{cursor:grab}
  .mrhw-rail.is-dragging{cursor:grabbing}
  /* While dragging, kill selection and drag-ghosts -- without this a sideways
     pull highlights "Necklace Sets" mid-gesture. */
  .mrhw-rail.is-dragging,.mrhw-rail.is-dragging *{user-select:none;-webkit-user-select:none}
  /* A drag over a chip must not leave it looking hovered. */
  .mrhw-rail.is-dragging .mrhw-chip{pointer-events:none}

  .mrhw-rail-nav{position:absolute;top:36px;transform:translateY(-50%);z-index:3;
    width:22px;height:22px;display:flex;align-items:center;justify-content:center;
    /* padding:0 explicitly -- the theme gives buttons padding:1px 6px, which would
       eat the chevron's box. */
    padding:0;border:1px solid #ecdfc9;border-radius:50%;
    background:rgba(255,253,249,.97);color:#7b6a63;cursor:pointer;
    box-shadow:0 1px 5px rgba(60,45,30,.18);
    transition:opacity .18s ease,transform .14s ease,background .14s ease,color .14s ease}
  .mrhw-rail-prev{left:-6px}
  .mrhw-rail-next{right:-6px}
  .mrhw-rail-nav svg{width:11px;height:11px;min-width:11px;min-height:11px;flex:0 0 auto;
    fill:none;stroke:currentColor;stroke-width:2.6}
  .mrhw-rail-nav:hover{background:#fff;color:#8a0f1b;transform:translateY(-50%) scale(1.08)}
  .mrhw-rail-nav:active{transform:translateY(-50%) scale(.94)}
  /* Hidden, not dimmed, at the ends -- a greyed arrow beside a row that plainly
     stops is clutter. */
  .mrhw-rail-nav.is-off{opacity:0;pointer-events:none}

  /* Fades that say "this continues". Pure decoration, so they never eat a click. */
  .mrhw-rail-wrap::before,.mrhw-rail-wrap::after{content:"";position:absolute;
    top:0;bottom:0;width:26px;z-index:2;pointer-events:none;opacity:0;
    transition:opacity .18s ease}
  .mrhw-rail-wrap::before{left:0;background:linear-gradient(to right,#fffdf9 24%,rgba(255,253,249,0))}
  .mrhw-rail-wrap::after{right:0;background:linear-gradient(to left,#fffdf9 24%,rgba(255,253,249,0))}
  .mrhw-rail-wrap.has-prev::before{opacity:1}
  .mrhw-rail-wrap.has-next::after{opacity:1}
}

.mrhw a:focus-visible,.mrhw-rail 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: strip the panel back to the style rail and centre
   the copy block in the hero. The panel's headline, lede and CTAs go -- they
   are reachable from the header and the menu, and on a narrow screen the hero
   was competing with itself.

   The rail STAYS. It used to go with the rest of the panel, which meant the
   category links most of the traffic actually wants were invisible on a phone;
   as a row of circles it costs about 100px and is the fastest way into the
   catalogue. What is left of the panel is just the plate it sits on. */
@media (max-width:48rem){
  .mrhw{height:clamp(420px,68vh,620px)}
  .mrhw-panel{display:block;padding:.8rem .7rem .7rem;width:100%;max-width:100%;
              min-width:0;justify-self:stretch;margin-top:0;border-radius:16px;
              background:rgba(255,253,249,.95);box-shadow:0 14px 34px rgba(40,10,16,.26)}
  /* The two blocks sit flush on a phone: the rail reads as the continuation of
     the sentence above it, not as a separate card floating below.
     Three separate things were pushing them apart and all three have to go --
     the grid's own gap, the panel's margin-top, and the -18px nudge that was
     applied to the claim alone (see below), which widened the gap by exactly
     that much because the panel did not move with it. */
  /* Everything except the divider and the rail. Two chained :not()s rather than
     four selectors, so adding a block to the panel later cannot accidentally
     reappear here. */
  .mrhw-panel>*:not(.mrhw-or):not(.mrhw-rail-wrap){display:none}
  .mrhw-or{margin:0 0 .55rem}
  .mrhw-inner{grid-template-columns:1fr;place-content:center;justify-items:center;
              align-content:center;gap:0;transform:translateY(-18px)}
  /* Nudged 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.
     The nudge now moves the WHOLE stack (see .mrhw-inner below), not the claim
     on its own: nudging only the claim lifted it away from the rail and was
     itself part of the gap being closed here. */
  .mrhw-claim{max-width:min(27rem,100%);text-align:center;transform:none}
  .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}}

/* ---- "Browse by Artificial Jewelry Collection" heading ----
   Hidden on phones for display only. The h2 and its dotted separator stay in
   the markup -- display:none keeps them in the HTML source, so the heading is
   still there for search engines and nothing is removed from the page.
   Three sections on this page carry the same deal-of-day class combination, so
   this targets an added mr-browse-title hook rather than the shared classes. */
@media only screen and (max-width:767px){
  .mr-browse-title{display:none!important}
}

/* ---- hover: a slow pass of light, not a flash ----
   First attempt copied the Craft & Tradition card sweep and pushed it harder --
   full-opacity gold on a screen blend. On a small tile in a moving wall that
   read as a strobe rather than a finish. Everything here is pulled back:

     · the band is narrower and peaks at .38 instead of 1, so it reads as light
       passing over the piece rather than a white bar crossing it
     · soft-light instead of screen. Screen adds luminance and blows the
       highlights on gold jewellery, which is most of the catalogue
     · 2.4s on a near-linear ease, so it drifts rather than snaps, and the
       tile darkens under it over .9s so the light has a ground to read against
     · the border is a 1px hairline at .45, not a 2px band at .95
     · the photo lifts 1.035, just enough to feel alive at a glance

   Restraint is the point: the tile should look considered when you land on it,
   and you should not notice the mechanism. */
a.mrhw-tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(112deg,
             transparent 34%,
             rgba(255,246,228,.16) 44%,
             rgba(255,229,176,.38) 50%,
             rgba(255,246,228,.16) 56%,
             transparent 66%);
  transform:translateX(-140%);
  transition:transform 2.4s cubic-bezier(.36,.06,.3,1);
  mix-blend-mode:soft-light;
  opacity:0}
a.mrhw-tile:hover::before,a.mrhw-tile:focus-visible::before{
  transform:translateX(140%);opacity:1;transition:transform 2.4s cubic-bezier(.36,.06,.3,1),opacity .35s ease}

/* hairline, not a frame */
a.mrhw-tile::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(232,200,140,0);
  transition:box-shadow .9s ease}
a.mrhw-tile:hover::after,a.mrhw-tile:focus-visible::after{
  box-shadow:inset 0 0 0 1px rgba(232,200,140,.45)}

/* the label warms slightly rather than turning gold outright */
a.mrhw-tile .mrhw-name{transition:color .8s ease}
a.mrhw-tile:hover .mrhw-name,a.mrhw-tile:focus-visible .mrhw-name{color:#fdf0d8}

@media (prefers-reduced-motion:reduce){
  a.mrhw-tile::before{display:none}
  a.mrhw-tile:hover img{transform:none}
}