@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap");

    :root {
      /* =========================================================
         PUSAT WARNA WEBSITE
         Ganti warna cukup dari bagian ini saja.
      ========================================================= */
      --bg-image: url("../images/background.webp");

      --navy: #f07a2f;
      --navy-dark: #c85e1b;
      --cream: #fbf3ee;
      --white: #ffffff;
      --ink: #15213c;
      --text-soft: #26344f;
      --muted: #68748a;
      --placeholder: #a0abc0;
      --orange: #f07a2f;
      --yellow: #f8c338;

      --page-overlay: transparent;
      --loader-overlay: transparent;
      --shell-bg: transparent;
      --form-panel-bg: rgba(255, 255, 255, 0.35);
      --input-bg: rgba(255, 255, 255, 0.90);
      --sticky-bg: rgba(255, 255, 255, 0.96);
      --step-bg: rgba(240, 122, 47, 0.09);
      --line: rgba(240, 122, 47, 0.16);
      --line-dashed: rgba(240, 122, 47, 0.24);
      --border-light: rgba(255, 255, 255, 0.78);
      --border-card: rgba(255, 255, 255, 0.82);
      --focus-line: rgba(240, 122, 47, 0.68);
      --focus-glow: rgba(240, 122, 47, 0.12);
      --field-shadow: rgba(168, 86, 24, 0.08);
      --shadow-main-color: rgba(21, 33, 60, 0.18);
      --shadow-soft-color: rgba(21, 33, 60, 0.12);
      --shadow-hover-color: rgba(168, 86, 24, 0.20);
      --toast-bg: rgba(21, 33, 60, 0.84);
      --lightbox-bg: rgba(11, 17, 31, 0.72);
      --close-bg: rgba(21, 33, 60, 0.08);
      --hero-image-shadow: rgba(0, 0, 0, 0.22);
      --modal-shadow: rgba(0, 0, 0, 0.26);
      --toast-border: rgba(255, 255, 255, 0.20);

      /* Blur background setelah loading selesai */
      --background-blur-after-loading: 7px;
      --warning-bg: rgba(254, 242, 242, 0.98);
      --warning-border: rgba(220, 38, 38, 0.32);
      --warning-text: #b91c1c;
      --warning-icon-bg: #dc2626;
      --warning-icon-text: #ffffff;
      --shipping-bg: rgba(255, 245, 237, 0.98);
      --shipping-border: rgba(240, 122, 47, 0.26);
      --shipping-text: #c85e1b;
      --background-opacity-after-loading: 0.70;

      --paper: var(--shell-bg);
      --paper-solid: var(--white);
      --radius: 34px;
      --radius-md: 24px;
      --shadow: 0 28px 75px var(--shadow-main-color);
      --shadow-soft: 0 16px 38px var(--shadow-soft-color);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      min-height: 100vh;
      font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--cream);
      overflow-x: hidden;
    }

    .background-layer {
      position: fixed;
      inset: 0;
      z-index: -2;
      background: var(--bg-image) center / cover no-repeat;
      opacity: 1;
      filter: blur(0);
      transform: scale(1);
      transition: filter .9s ease, opacity .9s ease, transform .9s ease;
    }

    body.loaded .background-layer {
      opacity: var(--background-opacity-after-loading);
      filter: blur(var(--background-blur-after-loading));
      transform: scale(1.08);
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background: var(--page-overlay);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    button, input, textarea { font: inherit; }
    button { border: 0; cursor: pointer; }
    img { max-width: 100%; display: block; }

    .loader {
      position: fixed;
      inset: 0;
      z-index: 99;
      display: block;
      background: var(--bg-image) center / cover no-repeat;
      transition: opacity .7s ease, visibility .7s ease;
    }
    .loader::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--loader-overlay);
    }
    .loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }
    .loader-card, .loader-mark { display: none !important; }

    .page { min-height: 100vh; display: grid; place-items: center; padding: clamp(14px, 3vw, 40px); }
    .shell {
      width: min(1220px, 100%);
      height: calc(100vh - clamp(28px, 6vw, 80px));
      max-height: calc(100vh - clamp(28px, 6vw, 80px));
      overflow: hidden;
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
      background: var(--shell-bg);
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(96px) scale(.975);
      transition: opacity 1s ease, transform 1s cubic-bezier(.16,1,.3,1), border-color .25s ease;
      pointer-events: none;
    }
    .shell.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .shell.show:hover { transform: translateY(-8px); border-color: var(--white); }

    .layout { display: grid; grid-template-columns: .86fr 1.14fr; height: 100%; min-height: 0; }
    .hero-panel {
      position: relative;
      overflow: hidden;
      min-height: 0;
      border-radius: var(--radius);
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 14px;
    }
    .hero-frame {
      width: auto;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      aspect-ratio: 3 / 4;
      border-radius: 28px;
      overflow: hidden;
      background: transparent;
      box-shadow: none;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-single {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      border-radius: 28px;
      display: block;
    }

    .form-panel { height: 100%; min-height: 0; overflow-y: auto; padding: clamp(22px, 4vw, 42px); background: var(--form-panel-bg); }
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
    .topbar h1 { font-size: clamp(1.45rem, 3vw, 2.45rem); letter-spacing: -.058em; line-height: 1; }
    .topbar p { color: var(--muted); margin-top: 7px; line-height: 1.45; }
    .profile-chip {
      flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 999px;
      background: var(--white); box-shadow: var(--shadow-soft); font-weight: 800; font-size: .88rem;
    }
    .avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--orange); }

    .steps {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px; margin-bottom: 26px;
      border-radius: 24px; background: var(--step-bg);
    }
    .step-pill {
      display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px;
      border-radius: 18px; color: var(--muted); font-weight: 800; font-size: .88rem; transition: .25s ease;
    }
    .step-pill.active { color: var(--white); background: var(--navy); box-shadow: 0 12px 28px var(--line-dashed); }
    .step { display: none; animation: fadeUp .45s ease both; }
    .step.active { display: block; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
    .field { display: grid; gap: 8px; }
    .field.full { grid-column: 1 / -1; }
    label { font-size: .86rem; font-weight: 800; color: var(--text-soft); }
    input, textarea {
      width: 100%; border: 1px solid var(--line); border-radius: 20px; outline: none; background: var(--input-bg);
      color: var(--ink); padding: 15px 16px; box-shadow: 0 10px 25px var(--field-shadow);
      transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    }
    textarea { min-height: 132px; resize: vertical; }
    input::placeholder, textarea::placeholder { color: var(--placeholder); }
    input:focus, textarea:focus {
      border-color: var(--focus-line); box-shadow: 0 0 0 4px var(--focus-glow), 0 16px 35px var(--field-shadow);
      transform: translateY(-1px);
    }

    .section-heading { margin-bottom: 16px; }
    .section-heading h3 { font-size: 1.18rem; letter-spacing: -.03em; margin-bottom: 6px; }
    .section-heading p { color: var(--muted); line-height: 1.5; font-size: .92rem; }

    .items-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
    .item-card {
      overflow: hidden; border: 1px solid var(--border-card); border-radius: 28px; background: var(--white);
      box-shadow: var(--shadow-soft); transition: transform .25s ease, box-shadow .25s ease;
    }
    .item-card:hover { transform: translateY(-8px); box-shadow: 0 26px 60px var(--shadow-hover-color); }
    .item-image-wrap { position: relative; padding: 12px 12px 0; }
    .item-image-btn {
      width: 100%; display: block; background: none; padding: 0; border: 0; cursor: zoom-in;
    }
    .item-image {
      width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 22px; background: var(--cream);
      border: 1px solid var(--line);
    }
    .item-body { padding: 14px 16px 16px; }
    .item-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
    .item-title-row h3 { font-size: 1rem; line-height: 1.2; letter-spacing: -.03em; }
    .price { color: var(--navy); white-space: nowrap; font-weight: 900; font-size: .95rem; }
    .item-body p { color: var(--muted); line-height: 1.52; font-size: .88rem; margin-bottom: 14px; }
    .click-note { font-size: .76rem; color: var(--muted); margin-bottom: 10px; }

    .qty-control {
      display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; padding: 7px;
      border-radius: 18px; background: var(--step-bg);
    }
    .qty-btn {
      width: 42px; height: 42px; display: inline-grid; place-items: center; padding: 0; border-radius: 14px;
      background: var(--white); color: var(--navy); font-family: inherit; font-size: 1.35rem; line-height: 1;
      text-align: center; font-weight: 900; box-shadow: 0 8px 18px var(--field-shadow); transition: .2s ease;
      appearance: none; -webkit-appearance: none;
    }
    .qty-btn.plus { color: var(--white); background: var(--navy); }
    .qty-btn:hover { transform: scale(1.06); }
    .qty-value { text-align: center; font-weight: 900; color: var(--ink); }

    .tshirt-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; align-items: start; }
    .tshirt-preview, .size-box, .summary-box {
      padding: 18px; border: 1px solid var(--border-card); border-radius: 28px; background: var(--white); box-shadow: var(--shadow-soft);
    }
    .tshirt-image-btn { width: 100%; display: block; background: none; padding: 0; border: 0; cursor: zoom-in; }
    .tshirt-image { width: 100%; border-radius: 22px; background: var(--cream); }
    .tshirt-preview .click-note { margin-top: 10px; }
    .tshirt-preview .click-note { margin-top: 10px; }
    .size-box h3, .summary-box h3, .warning-content h3 { font-size: 1.08rem; letter-spacing: -.03em; margin-bottom: 14px; }

    .warning-box {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
      margin-bottom: 16px;
      padding: 18px;
      border: 1px solid var(--warning-border);
      border-radius: 24px;
      background: var(--warning-bg);
      box-shadow: var(--shadow-soft);
    }
    .warning-icon {
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: var(--warning-icon-bg);
      color: var(--warning-icon-text);
      font-size: 1.2rem;
      font-weight: 900;
      line-height: 1;
    }
    .warning-content h3,
    .warning-content p { color: var(--warning-text); }
    .warning-content p { line-height: 1.55; }

    .shipping-box {
      margin-top: 14px;
      padding: 14px;
      border: 1px solid var(--shipping-border, rgba(240, 122, 47, 0.26));
      border-radius: 20px;
      background: var(--shipping-bg, rgba(255, 245, 237, 0.98));
    }
    .shipping-box h4 {
      margin-bottom: 8px;
      color: var(--shipping-text, #c85e1b);
      font-size: .98rem;
      letter-spacing: -.02em;
    }
    .shipping-box p {
      color: var(--muted, #68748a);
      line-height: 1.55;
      font-size: .9rem;
    }
    .shipping-action {
      width: 100%;
      min-height: 44px;
      margin-top: 12px;
      border-radius: 14px;
      color: var(--white, #ffffff);
      background: var(--navy, #f07a2f);
      font-weight: 900;
    }
    .shipping-action:disabled {
      cursor: not-allowed;
      opacity: .65;
    }

    .size-table { display: grid; gap: 12px; }
    .size-row {
      display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 0;
      border-bottom: 1px dashed var(--line-dashed);
    }
    .size-row:last-child { border-bottom: 0; }
    .size-label strong { display: block; font-size: 1rem; }
    .size-label span { color: var(--muted); font-size: .88rem; }
    .size-label .size-detail { display: block; margin-top: 4px; line-height: 1.45; }
    .mini-qty {
      display: grid; grid-template-columns: 40px 44px 40px; gap: 8px; align-items: center; padding: 6px;
      border-radius: 16px; background: var(--step-bg);
    }
    .mini-qty .qty-btn { width: 40px; height: 40px; border-radius: 12px; font-size: 1.2rem; }
    .mini-qty .qty-value { font-size: 1rem; }

    .summary-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; }
    .summary-list {
      display: grid; gap: 10px; color: var(--muted); line-height: 1.55; word-break: break-word;
    }
    .summary-list strong { color: var(--ink); }
    .order-line {
      display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 0;
      border-bottom: 1px dashed var(--line-dashed); color: var(--muted); line-height: 1.45;
    }
    .order-line:last-child { border-bottom: 0; }
    .order-line strong { color: var(--ink); }
    .total-row {
      display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding: 16px;
      border-radius: 20px; color: var(--white); background: var(--navy); font-weight: 900; font-size: 1.1rem;
      box-shadow: 0 15px 32px var(--line-dashed);
    }

    .actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
    .btn {
      min-height: 52px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 14px 22px;
      border-radius: 18px; color: var(--navy); background: var(--white); font-weight: 900; box-shadow: var(--shadow-soft);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 20px 45px var(--shadow-soft-color); }
    .btn.primary { color: var(--white); background: var(--navy); }
    .btn.primary.submit { background: var(--orange); }
    .btn.hidden { visibility: hidden; pointer-events: none; }

    .toast {
      position: fixed; left: 50%; bottom: 24px; z-index: 90; width: min(calc(100% - 32px), 470px); padding: 14px 16px;
      border: 1px solid var(--toast-border); border-radius: 20px; color: var(--white); background: var(--toast-bg);
      backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); text-align: center; box-shadow: var(--shadow);
      transform: translate(-50%, 22px); opacity: 0; pointer-events: none; transition: .32s ease;
    }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }

    .lightbox {
      position: fixed; inset: 0; z-index: 110; display: none; place-items: center; padding: 20px; background: var(--lightbox-bg);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .lightbox.show { display: grid; }
    .lightbox-card {
      position: relative; width: min(92vw, 980px); max-height: 90vh; border-radius: 28px; background: var(--white); padding: 16px;
      box-shadow: 0 30px 80px var(--modal-shadow);
    }
    .lightbox-close {
      position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; background: var(--close-bg);
      color: var(--ink); font-size: 1.35rem; font-weight: 800;
    }
    .lightbox-image {
      width: 100%; max-height: calc(90vh - 32px); object-fit: contain; border-radius: 20px; background: var(--cream);
    }

    @media (max-width: 1040px) {
      body { background-attachment: scroll; }
      .page { align-items: end; }
      .layout { grid-template-columns: 1fr; }
      .hero-panel { min-height: 0; padding: 8px; }
      .hero-frame { max-width: 100%; }
      .tshirt-layout, .summary-layout { grid-template-columns: 1fr; }
      .shell.show:hover { transform: translateY(0); }
    }
    @media (max-width: 760px) {
      .shell { height: calc(100vh - 24px); max-height: calc(100vh - 24px); border-radius: 28px; }
      .hero-panel { min-height: 0; border-radius: 28px 28px 0 0; padding: 10px; }
      .topbar { align-items: flex-start; }
      .profile-chip { display: none; }
      .steps { grid-template-columns: 1fr; }
      .step-pill { justify-content: flex-start; padding-inline: 16px; }
      .form-grid, .items-grid { grid-template-columns: 1fr; }
      .actions {
        position: sticky; bottom: 0; z-index: 10; margin-inline: calc(clamp(22px, 4vw, 42px) * -1);
        margin-bottom: calc(clamp(22px, 4vw, 42px) * -1); padding: 18px clamp(22px, 4vw, 42px) 20px;
        background: var(--sticky-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      }
      .btn { flex: 1; padding-inline: 12px; }
      .size-row { grid-template-columns: 1fr; }
      .mini-qty { width: fit-content; }
    }
    @media (max-width: 430px) {
      .page { padding: 10px; }
      .form-panel { padding: 20px; }
      .hero-panel { min-height: 0; padding: 12px; }
      .actions { margin-inline: -20px; margin-bottom: -20px; padding-inline: 20px; }
    }

.invoice-link {
  color: var(--navy);
  font-weight: 900;
  text-decoration: underline;
}
.invoice-link:hover { opacity: .82; }


/* =========================================================
   MOBILE FIX: tombol dan hero tidak dibuat melayang/sticky
   ========================================================= */
@media (max-width: 760px) {
  .page {
    display: block;
    min-height: 100vh;
    padding: 12px;
    overflow: visible;
  }

  .shell {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 28px;
  }

  .layout {
    height: auto !important;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-panel {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 28px 28px 0 0;
    padding: 10px;
  }

  .hero-frame {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 3 / 4;
  }

  .hero-single {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .form-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .actions {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    margin: 24px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
}

@media (max-width: 430px) {
  .actions {
    margin: 22px 0 0 !important;
    padding: 0 !important;
  }
}

/* Revisi halaman T-shirt: gambar besar di tengah + pilihan warna/ukuran di bawah */
.tshirt-layout-centered {
  grid-template-columns: 1fr;
  gap: 18px;
}
.tshirt-preview-large {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: 22px;
}
.tshirt-preview-large .tshirt-image {
  display: block;
  width: min(100%, 560px);
  max-height: 540px;
  object-fit: contain;
  margin: 0 auto;
  border: 1px solid var(--line);
}
.tshirt-info {
  margin-top: 14px;
  justify-items: center;
}
.tshirt-options-box {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
}
.size-help {
  margin: -4px 0 16px;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}
.color-size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.color-size-card {
  padding: 16px;
  border: 1px solid var(--border-card);
  border-radius: 24px;
  background: var(--cream);
}
.color-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.color-title-row h4 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
.color-title-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.4;
}
.color-swatch {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 2px solid rgba(41,70,127,.22);
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

@media (max-width: 760px) {
  .color-size-grid { grid-template-columns: 1fr; }
  .tshirt-preview-large { padding: 16px; }
  .tshirt-preview-large .tshirt-image { max-height: 440px; }
}


/* Single-page selection: dimensions .shell and .layout above are unchanged. */
.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-panel { overscroll-behavior: contain; }
.form-section-title { margin-top: 30px; margin-bottom: 18px; }
.form-section-title:first-child { margin-top: 0; }
.form-section-title h2 { color: var(--ink); font-size: 1.28rem; letter-spacing: -.03em; margin-bottom: 5px; }
.form-section-title p { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.stock-overview, .item-stock, .shipping-disclaimer {
  color: var(--muted); font-size: .86rem; line-height: 1.55;
}
.stock-overview { text-align: center; margin: 12px 0 0; font-weight: 800; }
.item-stock { margin: 0 0 12px; font-weight: 800; }
.item-stock.sold-out, .stock-overview.sold-out { color: #b91c1c; }
.shipping-disclaimer { margin-top: 12px; font-weight: 700; }
.qty-btn:disabled { opacity: .38; cursor: not-allowed; transform: none; box-shadow: none; }
.btn:disabled { cursor: not-allowed; opacity: .60; transform: none; }
@media (max-width: 760px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-pill { justify-content: center; text-align: center; padding: 9px; }
  .form-section-title { margin-top: 26px; }
}

/* Badge stok mengambang di pojok kanan atas foto produk.
   Layout kartu dan dimensi canvas tidak berubah. */
.stock-number {
  position: absolute;
  z-index: 5;
  top: 3px;
  right: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 80px;
  min-height: 54px;
  padding: 9px 13px;
  border-radius: 17px;
  border: 2px solid #f07a2f;
  background: #ffffff;
  color: #c85e1b;
  box-shadow: 0 9px 0 -4px rgba(240,122,47,.28), 0 12px 26px rgba(116,55,17,.18);
  pointer-events: none;
  white-space: nowrap;
  transform: translate(4px, -5px);
}
.stock-box-icon { display: block; width: 25px; height: 25px; flex: 0 0 25px; }
.stock-count { font-weight: 900; font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stock-number.sold-out { color: #a82632; border-color: #cf3441; background: #fff2f2; }
.exclusive-image-wrap { position: relative; width: min(100%, 560px); margin: 0 auto; }
.exclusive-stock-number { top: 3px; right: 2px; }
.exclusive-qty { max-width: 320px; margin: 20px auto 0; }
@media (max-width: 520px) {
  .stock-number { min-height: 46px; min-width: 68px; gap: 6px; padding: 7px 10px; border-radius: 14px; }
  .stock-box-icon { width: 21px; height: 21px; flex-basis: 21px; }
  .stock-count { font-size: 1.3rem; }
}