/* Brick-mold buttons (2026-10-13), modelled on the store's hand-painted brick molds (PEPSI COLA, MIRINDA,
   BRINJAL, SUGAR, ASTER): a weathered painted box with rounded end caps, iron straps at both ends and the
   middle, a ledge along the bottom, and chunky hand-painted capitals with a black drop shadow.

   Usage:  <a class="mold" href="...">New Arrivals</a>
           <a class="mold mold--mustard" ...>   <a class="mold mold--red" ...>
   Needs the Londrina Solid font:  <link href="https://fonts.googleapis.com/css2?family=Londrina+Solid:wght@900&display=swap" rel="stylesheet">
   and js/molds.js for the hand-painted letter wobble.
*/
.mold {
  /* grey-green mold (PEPSI COLA / MIRINDA) */
  --face: #4e5a53;      /* deepened 2026-10-13 for WCAG AA: cream letters 5.3:1 */
  --face-dark: #39433d;
  --wear: #a59a86;          /* bare wood showing through the paint */
  --paint: #eadbb9;         /* letter paint */
  --ink: #141414;           /* letter shadow */
  --strap: #3b3d3c;

  position: relative;
  display: inline-block;
  margin: 0.35em 0.85em 0.6em;
  padding: 0.3em 1.35em 0.24em;
  font-family: 'Londrina Solid', 'Archivo Black', 'Arial Black', sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--paint);
  /* hand-painted letters: a slightly ragged black shadow down and to the right */
  text-shadow: 0.06em 0.05em 0 var(--ink), 0.075em 0.075em 0 var(--ink), 0.03em 0.08em 0 var(--ink);
  background:
    /* fine grime */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    /* iron straps: both ends and the middle joint */
    linear-gradient(90deg,
      transparent 0 3.2%, var(--strap) 3.2% 5.6%, transparent 5.6% 49.1%,
      var(--strap) 49.1% 50.9%, transparent 50.9% 94.4%, var(--strap) 94.4% 96.8%, transparent 96.8%),
    /* worn patches where the paint has rubbed off */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.02 .06' numOctaves='4' seed='7'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0 0 0 0 .2 .35'/></feComponentTransfer><feColorMatrix values='0 0 0 0 .65  0 0 0 0 .6  0 0 0 0 .52  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>"),
    /* wood grain */
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 5px),
    var(--face);
  background-size: 180px 180px, 100% 100%, 300px 120px, auto, auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0.3em solid var(--face-dark);     /* the ledge along the bottom */
  border-radius: 2px;
  box-shadow:
    inset 0 0 0.9em rgba(0, 0, 0, 0.45),
    inset 0 -0.15em 0 rgba(0, 0, 0, 0.35),
    0 0.3em 0.6em rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
/* rounded end caps */
.mold::before,
.mold::after {
  content: '';
  position: absolute;
  top: 0.08em;
  bottom: 0.08em;
  width: 0.62em;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    var(--face);
  filter: brightness(0.85);
  box-shadow: inset 0 0 0.35em rgba(0, 0, 0, 0.45);
}
.mold::before { right: 100%; border-radius: 0.62em 0 0 0.62em / 50% 0 0 50%; }
.mold::after  { left: 100%;  border-radius: 0 0.62em 0.62em 0 / 0 50% 50% 0; }

.mold:hover,
.mold:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.12) saturate(1.1);
  box-shadow:
    inset 0 0 0.9em rgba(0, 0, 0, 0.4),
    inset 0 -0.15em 0 rgba(0, 0, 0, 0.35),
    0 0.5em 0.9em rgba(0, 0, 0, 0.5);
  outline: none;
}
.mold:focus-visible { box-shadow: 0 0 0 3px var(--paint), 0 0.5em 0.9em rgba(0, 0, 0, 0.5); }
.mold:active { transform: translateY(1px); filter: brightness(0.97); }

/* mustard mold (BRINJAL) */
.mold--mustard {
  --face: #765a25;      /* WCAG AA: 5.1:1 */
  --face-dark: #574220;
  --wear: #5b4528;
  --paint: #efe3c4;
}
/* red-on-pink mold (SUGAR / ASTER): red letters with the black shadow on a faded pink box */
.mold--red {
  --face: #f0d8da;      /* WCAG AA: red letters 5.2:1 */
  --face-dark: #c99ca1;
  --paint: #b0141f;
  --strap: #4a3538;
}

/* letters wrapped by js/molds.js */
.mold .mold-l { display: inline-block; transform-origin: 50% 70%; }

/* Respect "reduce motion" settings */
@media (prefers-reduced-motion: reduce) {
  .mold { transition: none; }
  .mold:hover, .mold:focus-visible, .mold:active { transform: none; }
}