/* stores */
.store-cases {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: clamp(18px, 2vw, 30px);
      background: #102c21;
      color: #f7f3e8;
      border-block: 10px solid #f0bd37;
    }

    .store-cases::before {
      content: "";
      position: absolute;
      inset: clamp(18px, 2vw, 30px);
      z-index: 0;
      border: 2px solid rgba(247, 243, 232, 0.74);
      pointer-events: none;
    }

    .store-cases::after {
      content: "TEXMEX";
      position: absolute;
      left: 50%;
      top: 46%;
      z-index: 0;
      transform: translate(-50%, -50%);
      color: rgba(255, 255, 255, 0.026);
      font-size: clamp(160px, 25vw, 430px);
      font-weight: 900;
      letter-spacing: -0.07em;
      white-space: nowrap;
      pointer-events: none;
    }

    .store-cases-frame {
      position: absolute;
      inset: 0;
      z-index: 5;
      display: block;
      pointer-events: none;
      box-shadow: inset 0 0 0 clamp(18px, 2vw, 30px) #102c21;
    }

    .store-cases-frame::after {
      content: "";
      position: absolute;
      inset: clamp(18px, 2vw, 30px);
      border: 2px solid rgba(247, 243, 232, 0.74);
    }

    .store-note-break { display: block; }

    .store-cases-label {
      position: absolute;
      top: clamp(18px, 2vw, 30px);
      left: 50%;
      z-index: 6;
      display: flex;
      align-items: center;
      gap: 12px;
      transform: translate(-50%, -50%);
      padding: 7px 16px;
      background: #102c21;
      color: #f0bd37;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      white-space: nowrap;
    }

    .store-cases-inner {
      position: relative;
      z-index: 1;
      width: min(1520px, calc(100% - 52px));
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.84fr) minmax(0, 1.08fr);
      align-items: end;
      gap: clamp(8px, 1.6vw, 28px);
      padding-top: 68px;
      padding-bottom: 52px;
    }

    .store-case {
      position: relative;
      margin: 0;
      text-align: center;
      outline: none;
    }

    .store-case-image {
      position: relative;
      display: grid;
      place-items: end center;
      min-height: clamp(500px, 43vw, 700px);
    }

    .store-case-image::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: 2px;
      z-index: -1;
      height: 30%;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.28);
      filter: blur(24px);
    }

    .store-case img {
      width: 138%;
      max-width: none;
      max-height: 720px;
      object-fit: contain;
      object-position: center bottom;
      filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.4));
      transition: transform 240ms cubic-bezier(.2, .75, .25, 1), filter 240ms ease;
      transform-origin: center bottom;
    }

    .store-case figcaption {
      display: grid;
      min-height: 78px;
      margin: 8px 0 0;
      padding: 0;
      background: transparent;
      color: #f7f3e8;
      border: 0;
      box-shadow: none;
      text-align: center;
    }

    .store-case figcaption::before { content: none; }

    .mobile-only-break { display: none; }

    .store-default,
    .store-hover-detail {
      grid-area: 1 / 1;
      align-self: start;
      display: grid;
      justify-items: center;
      transition: opacity 180ms ease, transform 220ms ease;
    }

    .store-default {
      color: #f7f3e8;
      font-size: clamp(20px, 1.65vw, 28px);
      line-height: 1.25;
      font-weight: 900;
      letter-spacing: -0.02em;
    }

    .store-hover-detail {
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
    }

    .store-name {
      color: #f7f3e8;
      border: 0;
      font-size: clamp(26px, 2.3vw, 38px);
      font-weight: 900;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .store-metric {
      margin-top: 7px;
      color: #f0bd37;
      font-size: clamp(15px, 1.15vw, 19px);
      line-height: 1.35;
      font-weight: 800;
      white-space: nowrap;
    }

    .store-case:hover img,
    .store-case:focus img,
    .store-case:focus-within img {
      transform: scale(1.045);
      filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.46));
    }

    .store-case:hover .store-default,
    .store-case:focus .store-default,
    .store-case:focus-within .store-default {
      opacity: 0;
      transform: translateY(-6px);
    }

    .store-case:hover .store-hover-detail,
    .store-case:focus .store-hover-detail,
    .store-case:focus-within .store-hover-detail {
      opacity: 1;
      transform: translateY(0);
    }

    .store-case:focus-visible {
      outline: 3px solid #f0bd37;
      outline-offset: 8px;
      border-radius: 2px;
    }

    .store-cases-message {
      align-self: center;
      position: relative;
      margin-bottom: 40px;
      padding: 52px 24px 56px;
      background: var(--accent);
      border: 3px solid #f7f3e8;
      box-shadow: 10px 10px 0 #f0bd37;
      text-align: center;
    }

    .store-cases-message::before,
    .store-cases-message::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 34px;
      height: 3px;
      transform: translateX(-50%);
      background: #f0bd37;
    }

    .store-cases-message::before { top: 18px; }

    .store-cases-message::after { bottom: 18px; }

    .store-cases-message .eyebrow {
      margin-bottom: 16px;
      color: #f0bd37;
      font-size: 11px;
    }

    .store-cases-message h2 {
      margin: 0;
      color: #fff;
      font-size: clamp(31px, 3.25vw, 51px);
      line-height: 1.16;
      letter-spacing: -0.04em;
    }

    .store-cases-message h2 span {
      display: block;
      padding: 5px 0;
      white-space: nowrap;
    }

    .store-cases-message h2 span:nth-child(2) {
      color: #f0bd37;
    }

    .store-cases-note {
      margin: 18px auto 0;
      max-width: 28ch;
      color: #f8dfbd;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.6;
    }