/* =========================================================
   PERFECTION OFFICIAL ONLINE STORE
   Shop-only CSS. Existing base.css is intentionally untouched.
   ========================================================= */

.shop-page {
  background: #f5f1e9;
  color: var(--ink);
}

.shop-page main {
  overflow: clip;
}

.shop-kicker,
.shop-eyebrow,
.shop-panel-label {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* HERO */
.shop-hero {
  position: relative;
  min-height: min(720px, 86svh);
  padding: calc(var(--header-height) + 84px) var(--pad) 86px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgba(185,154,85,.17), transparent 31%),
    linear-gradient(140deg, #171512 0%, #25211c 52%, #12110f 100%);
  color: #f7f4ed;
}

.shop-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.2));
  pointer-events: none;
}

.shop-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1180px);
  margin-inline: auto;
}

.shop-eyebrow {
  margin-bottom: 28px;
  color: rgba(255,255,255,.5);
}

.shop-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(70px, 10.8vw, 168px);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -.045em;
}

.shop-hero-ja {
  margin: 34px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.5;
  letter-spacing: .025em;
}

.shop-hero-copy {
  max-width: 620px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.62);
  font-size: 13px;
  line-height: 1.9;
}

.shop-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.36);
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 14px;
  letter-spacing: .05em;
}

.shop-hero-ring {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: none;
}

.shop-hero-ring-a {
  width: min(52vw, 720px);
  aspect-ratio: 1;
  right: -8vw;
  top: 2%;
}

.shop-hero-ring-b {
  width: min(30vw, 430px);
  aspect-ratio: 1;
  right: 15vw;
  top: 22%;
}

/* MAIN CONFIGURATOR */
.shop-configurator {
  padding: clamp(88px, 8vw, 132px) var(--pad) clamp(106px, 10vw, 160px);
  background: #faf8f3;
}

.shop-configurator-inner {
  width: min(100%, 1240px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: clamp(52px, 7vw, 98px);
  align-items: start;
}

.shop-stage-head .shop-kicker {
  color: #89837a;
}

.shop-stage-head h2 {
  margin: 18px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: clamp(34px, 3.7vw, 54px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01em;
}

/* RECIPE THUMBNAILS */
.shop-recipe-thumbs {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 16px;
}

.shop-recipe-thumbs > p {
  margin: 0 0 9px;
  color: #777168;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .08em;
}

.shop-recipe-thumb-list {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.shop-recipe-thumb {
  appearance: none;
  width: 70px;
  padding: 5px 5px 6px;
  border: 1px solid transparent;
  background: rgba(255,255,255,.5);
  color: #4b4741;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.shop-recipe-thumb:hover {
  border-color: rgba(23,23,21,.32);
  transform: translateY(-1px);
}

.shop-recipe-thumb.is-active {
  border-color: #1d1b18;
  background: rgba(255,255,255,.92);
}

.shop-recipe-thumb-image {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-recipe-thumb-image img {
  width: auto;
  height: 54px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 5px 6px rgba(0,0,0,.1));
}

.shop-recipe-thumb small {
  display: block;
  margin-top: 3px;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
}

/* PRODUCT DISPLAY */
.shop-product-display {
  margin-top: 40px;
}

.shop-product-art {
  position: relative;
  min-height: clamp(520px, 61vw, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color 320ms ease;
}

.shop-theme-chicken .shop-product-art { background: #dce2d5; }
.shop-theme-pork .shop-product-art { background: #e4d8d4; }
.shop-theme-salmon .shop-product-art { background: #d7e1e4; }

.shop-product-art > img {
  position: relative;
  z-index: 2;
  width: min(47%, 390px);
  max-height: 590px;
  object-fit: contain;
  filter: drop-shadow(0 25px 30px rgba(0,0,0,.14));
  transition: opacity 180ms ease, transform 360ms cubic-bezier(.22,1,.36,1);
}

.shop-product-art.is-changing > img {
  opacity: 0;
  transform: translateY(10px) scale(.985);
}

.shop-product-index {
  position: absolute;
  z-index: 3;
  top: 28px;
  left: 30px;
  color: rgba(23,23,21,.48);
  font-size: 10px;
  letter-spacing: .15em;
}

.shop-product-word {
  position: absolute;
  z-index: 1;
  left: 3%;
  bottom: -3.5%;
  color: rgba(255,255,255,.42);
  font-family: var(--serif);
  font-size: clamp(92px, 12vw, 175px);
  line-height: 1;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.shop-product-copy {
  padding: 42px 2px 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 28px;
  align-items: end;
}

.shop-product-copy .shop-kicker {
  grid-column: 1 / -1;
  color: #8b857c;
}

.shop-product-copy h3 {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: clamp(50px, 5.7vw, 82px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.04em;
}

.shop-product-ja {
  grid-column: 1;
  margin: 13px 0 0;
  color: #777168;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 15px;
  letter-spacing: .07em;
}

.shop-product-lead {
  grid-column: 1;
  max-width: 540px;
  margin: 28px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 17px;
  line-height: 1.9;
}

.shop-text-link {
  grid-column: 2;
  grid-row: 2 / 5;
  align-self: end;
  display: inline-flex;
  gap: 18px;
  align-items: center;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(23,23,21,.26);
  color: #37342f;
  font-size: 12px;
  letter-spacing: .035em;
}

.shop-stage-note {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid rgba(23,23,21,.14);
}

.shop-stage-note p {
  max-width: 720px;
  margin: 0;
  color: #787168;
  font-size: 11px;
  line-height: 1.9;
}

/* STICKY PURCHASE PANEL */
.shop-purchase-panel {
  position: sticky;
  top: calc(var(--header-height) + 28px);
}

.shop-panel-inner {
  padding: 34px 32px 30px;
  border: 1px solid rgba(23,23,21,.15);
  background: #f5f1e9;
  box-shadow: 0 20px 55px rgba(28,24,18,.055);
}

.shop-panel-label {
  color: #918a80;
}

.shop-panel-recipe {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.025em;
}

.shop-panel-ja {
  margin: 9px 0 0;
  color: #777168;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 13px;
  letter-spacing: .07em;
}

.shop-option-group {
  min-width: 0;
  margin: 30px 0 0;
  padding: 0;
  border: 0;
}

.shop-option-group legend,
.shop-option-title {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  color: #3c3934;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 13px;
  letter-spacing: .04em;
}

.shop-option-group legend small,
.shop-option-title small {
  color: #999188;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: .15em;
}

.shop-option-buttons {
  display: grid;
  gap: 8px;
}

.shop-size-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-kibble-options {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shop-option-buttons button {
  appearance: none;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid rgba(23,23,21,.19);
  background: rgba(255,255,255,.25);
  color: #34312d;
  font-family: var(--serif);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.shop-option-buttons button:hover:not(:disabled) {
  border-color: rgba(23,23,21,.46);
}

.shop-option-buttons button.is-selected {
  border-color: #1c1a17;
  background: #1c1a17;
  color: #fff;
}

.shop-option-buttons button:disabled {
  opacity: .32;
  cursor: default;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.shop-option-note {
  margin: 8px 0 0;
  color: #8d867d;
  font-size: 9px;
  line-height: 1.6;
}

.shop-quantity {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  min-height: 50px;
  border: 1px solid rgba(23,23,21,.19);
}

.shop-quantity button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #302e2a;
  font-size: 20px;
  cursor: pointer;
}

.shop-quantity button:first-child {
  border-right: 1px solid rgba(23,23,21,.12);
}

.shop-quantity button:last-child {
  border-left: 1px solid rgba(23,23,21,.12);
}

.shop-quantity output {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 17px;
}

.shop-order-summary {
  margin-top: 32px;
  padding: 20px 0 0;
  border-top: 1px solid rgba(23,23,21,.14);
}

.shop-summary-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 5px 0;
  font-size: 10px;
  line-height: 1.6;
}

.shop-summary-row span {
  color: #8d867d;
}

.shop-summary-row strong {
  justify-self: end;
  font-weight: 400;
  text-align: right;
}

.shop-summary-total {
  margin-top: 16px;
  padding-top: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-top: 1px solid rgba(23,23,21,.14);
}

.shop-summary-total > span {
  color: #6e685f;
  font-size: 11px;
}

.shop-summary-total > div {
  text-align: right;
}

.shop-summary-total strong {
  display: block;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}

.shop-summary-total small {
  display: block;
  margin-top: 5px;
  color: #8d867d;
  font-size: 9px;
}

.shop-buy-button {
  min-height: 62px;
  margin-top: 24px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #191714;
  color: #fff;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 14px;
  letter-spacing: .045em;
  transition: background-color 180ms ease;
}

.shop-buy-button:hover {
  background: #37332d;
}

.shop-checkout-note {
  margin: 15px 0 0;
  color: #8c857b;
  font-size: 9px;
  line-height: 1.7;
}

/* GUIDE */
.shop-guide {
  padding: 126px var(--pad);
  background: #211e1a;
  color: #f7f4ed;
}

.shop-guide-inner {
  width: min(100%, 1180px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(70px, 10vw, 160px);
  align-items: start;
}

.shop-guide .shop-kicker {
  color: rgba(255,255,255,.42);
}

.shop-guide h2 {
  margin: 20px 0 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01em;
}

.shop-guide-links {
  border-top: 1px solid rgba(255,255,255,.16);
}

.shop-guide-links a {
  min-height: 104px;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.shop-guide-links > a > span {
  color: rgba(255,255,255,.34);
  font-size: 10px;
  letter-spacing: .12em;
}

.shop-guide-links strong {
  display: block;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 17px;
  font-weight: 400;
}

.shop-guide-links small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,.36);
  font-size: 9px;
  letter-spacing: .15em;
}

.shop-guide-links b {
  font-weight: 400;
  color: rgba(255,255,255,.52);
}

/* MOBILE BUY BAR */
.shop-mobile-bar {
  display: none;
}

/* TABLET */
@media (max-width: 980px) {
  .shop-configurator-inner {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 42px;
  }

  .shop-panel-inner {
    padding: 28px 24px 26px;
  }

  .shop-product-copy {
    grid-template-columns: 1fr;
  }

  .shop-text-link {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 26px;
  }
}

/* MOBILE */
@media (max-width: 700px) {
  .shop-page {
    padding-bottom: 76px;
  }

  .shop-hero {
    min-height: 650px;
    padding: calc(var(--header-height) + 64px) 22px 68px;
  }

  .shop-hero h1 {
    font-size: clamp(60px, 19vw, 92px);
    line-height: .88;
  }

  .shop-hero-ja {
    margin-top: 28px;
    font-size: 1.55rem;
  }

  .shop-hero-copy {
    font-size: 12px;
  }

  .shop-hero-ring-a {
    width: 96vw;
    right: -45vw;
    top: 8%;
  }

  .shop-hero-ring-b {
    width: 62vw;
    right: 4vw;
    top: 24%;
  }

  .shop-configurator {
    padding: 78px 22px 94px;
  }

  .shop-configurator-inner {
    display: block;
  }

  .shop-stage-head h2,
  .shop-guide h2 {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .shop-product-display {
    margin-top: 34px;
  }

  .shop-recipe-thumbs {
    margin-top: 12px;
    align-items: flex-end;
  }

  .shop-recipe-thumbs > p {
    margin-bottom: 7px;
    font-size: 9px;
  }

  .shop-recipe-thumb-list {
    gap: 5px;
  }

  .shop-recipe-thumb {
    width: 58px;
    padding: 4px 4px 5px;
  }

  .shop-recipe-thumb-image {
    height: 46px;
  }

  .shop-recipe-thumb-image img {
    height: 43px;
  }

  .shop-recipe-thumb small {
    font-size: 9px;
  }

  .shop-product-art {
    min-height: 450px;
  }

  .shop-product-art > img {
    width: min(58%, 250px);
    max-height: 330px;
  }

  .shop-product-index {
    top: 22px;
    left: 22px;
  }

  .shop-product-word {
    left: 1%;
    bottom: -1%;
    font-size: 23vw;
  }

  .shop-product-copy {
    padding-top: 34px;
  }

  .shop-product-copy h3 {
    font-size: clamp(54px, 17vw, 78px);
  }

  .shop-product-lead {
    margin-top: 22px;
    font-size: 15px;
  }

  .shop-stage-note {
    margin-top: 38px;
  }

  .shop-purchase-panel {
    position: static;
    margin-top: 54px;
  }

  .shop-panel-inner {
    padding: 26px 20px 24px;
  }

  .shop-panel-recipe {
    font-size: 34px;
  }

  .shop-size-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-buy-button {
    margin-bottom: 6px;
  }

  .shop-guide {
    padding: 82px 22px;
  }

  .shop-guide-inner {
    grid-template-columns: 1fr;
    gap: 54px;
  }

  .shop-guide-links a {
    min-height: 92px;
    grid-template-columns: 36px 1fr auto;
    gap: 14px;
  }

  .shop-guide-links strong {
    font-size: 15px;
  }

  .shop-mobile-bar {
    position: fixed;
    z-index: 120;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 70px;
    padding: 9px 12px 9px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: rgba(247,244,237,.96);
    border-top: 1px solid rgba(23,23,21,.14);
    box-shadow: 0 -8px 28px rgba(0,0,0,.07);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .shop-mobile-bar > div {
    min-width: 0;
  }

  .shop-mobile-bar span {
    display: block;
    max-width: 50vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #767067;
    font-size: 9px;
  }

  .shop-mobile-bar strong {
    display: block;
    margin-top: 2px;
    font-family: var(--serif);
    font-size: 19px;
    font-weight: 400;
  }

  .shop-mobile-bar a {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #191714;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-product-art > img,
  .shop-recipe-thumb,
  .shop-option-buttons button,
  .shop-buy-button {
    transition: none;
  }
}

/* =========================================================
   CART DRAWER — luxury side-panel interaction
   This is presentation only until Color Me Shop Cart JS is connected.
   ========================================================= */

.shop-buy-button {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.shop-buy-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop-cart-backdrop {
  position: fixed;
  z-index: 350;
  inset: 0;
  background: rgba(0, 0, 0, .34);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.shop-cart-drawer {
  position: fixed;
  z-index: 360;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  background: #fbfaf7;
  color: #171715;
  box-shadow: -24px 0 70px rgba(0, 0, 0, .10);
  transform: translateX(102%);
  visibility: hidden;
  transition:
    transform 420ms cubic-bezier(.22, 1, .36, 1),
    visibility 420ms ease;
}

body.shop-cart-is-open {
  overflow: hidden;
}

body.shop-cart-is-open .shop-cart-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.shop-cart-is-open .shop-cart-drawer {
  transform: translateX(0);
  visibility: visible;
}

.shop-cart-head {
  min-height: 142px;
  padding: 34px 38px 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(23,23,21,.15);
}

.shop-cart-kicker {
  margin: 0 0 12px;
  color: #8d877e;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
}

.shop-cart-head h2 {
  margin: 0;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .025em;
}

.shop-cart-close {
  appearance: none;
  width: 42px;
  height: 42px;
  margin: -8px -8px 0 0;
  border: 0;
  background: transparent;
  color: #171715;
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.shop-cart-body {
  flex: 1;
  min-height: 0;
  padding: 34px 38px 38px;
  overflow-y: auto;
}

.shop-cart-item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(23,23,21,.14);
}

.shop-cart-image-wrap {
  min-height: 142px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efede6;
}

.shop-cart-image-wrap img {
  width: 70%;
  max-height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.12));
}

.shop-cart-brand {
  margin: 2px 0 10px;
  color: #8a847a;
  font-size: 8px;
  letter-spacing: .16em;
}

.shop-cart-item-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}

.shop-cart-ja {
  margin: 8px 0 0;
  color: #777168;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 12px;
  letter-spacing: .06em;
}

.shop-cart-variation {
  margin: 18px 0 0;
  color: #625d55;
  font-size: 11px;
  line-height: 1.7;
}

.shop-cart-meta {
  margin-top: 22px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.shop-cart-meta span {
  color: #777168;
  font-size: 10px;
}

.shop-cart-meta span b {
  color: #302d29;
  font-weight: 500;
}

.shop-cart-meta strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.shop-cart-actions {
  margin-top: 34px;
  display: grid;
  gap: 12px;
}

.shop-cart-checkout,
.shop-cart-continue {
  min-height: 62px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 14px;
  letter-spacing: .045em;
  text-align: center;
}

.shop-cart-checkout {
  background: #171715;
  color: #fff;
}

.shop-cart-continue {
  appearance: none;
  border: 1px solid #171715;
  background: transparent;
  color: #171715;
  cursor: pointer;
}

.shop-cart-note {
  margin: 22px 0 0;
  color: #8b857c;
  font-size: 9px;
  line-height: 1.8;
}

@media (max-width: 700px) {
  .shop-mobile-bar button {
    appearance: none;
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #191714;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
    font-size: 12px;
    cursor: pointer;
  }

  .shop-mobile-bar a {
    display: none;
  }

  .shop-cart-drawer {
    width: 100%;
  }

  .shop-cart-head {
    min-height: 112px;
    padding: 26px 22px 22px;
  }

  .shop-cart-head h2 {
    font-size: 18px;
  }

  .shop-cart-body {
    padding: 26px 22px 32px;
  }

  .shop-cart-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 20px;
  }

  .shop-cart-image-wrap {
    min-height: 118px;
  }

  .shop-cart-item-copy h3 {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shop-cart-backdrop,
  .shop-cart-drawer {
    transition: none;
  }
}

/* =========================================================
   SHOP CART + ALTERNATE RECIPE THUMBNAILS — CART FIX
   ========================================================= */

/* The current recipe is already the hero product; show only the other two choices. */
.shop-recipe-thumb.is-active {
  display: none;
}

.shop-recipe-thumbs > p {
  font-size: 10px;
}

.shop-cart-items {
  display: grid;
  gap: 0;
}

.shop-cart-items .shop-cart-item + .shop-cart-item {
  padding-top: 28px;
}

.shop-cart-remove {
  appearance: none;
  margin-top: 16px;
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(23,23,21,.28);
  background: transparent;
  color: #777168;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 10px;
  cursor: pointer;
}

.shop-cart-empty {
  margin: 8px 0 32px;
  color: #777168;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 13px;
}

.shop-cart-totals {
  margin-top: 30px;
  padding: 22px 0;
  display: grid;
  gap: 14px;
  border-top: 1px solid rgba(23,23,21,.14);
  border-bottom: 1px solid rgba(23,23,21,.14);
}

.shop-cart-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.shop-cart-totals span {
  color: #777168;
  font-size: 10px;
  letter-spacing: .04em;
}

.shop-cart-totals strong {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
}

@media (max-width: 700px) {
  .shop-cart-items .shop-cart-item + .shop-cart-item {
    padding-top: 24px;
  }
}

/* =========================================================
   COMPACT PURCHASE PANEL ON SHORT DESKTOP VIEWPORTS
   Keep the full layout on large screens, but make sure the
   primary add-to-cart action is visible without scrolling.
   ========================================================= */
@media (min-width: 981px) and (max-height: 850px) {
  .shop-purchase-panel {
    top: calc(var(--header-height) + 14px);
  }

  .shop-panel-inner {
    padding: 22px 26px 20px;
  }

  .shop-panel-recipe {
    margin-top: 10px;
    font-size: 32px;
  }

  .shop-panel-ja {
    margin-top: 6px;
  }

  .shop-option-group {
    margin-top: 18px;
  }

  .shop-option-group legend,
  .shop-option-title {
    margin-bottom: 8px;
  }

  .shop-option-buttons {
    gap: 6px;
  }

  .shop-option-buttons button {
    min-height: 42px;
    padding: 7px 10px;
    font-size: 14px;
  }

  .shop-option-note {
    margin-top: 5px;
  }

  .shop-quantity {
    min-height: 42px;
  }

  .shop-order-summary {
    margin-top: 20px;
    padding-top: 14px;
  }

  .shop-summary-row {
    padding: 3px 0;
  }

  .shop-summary-total {
    margin-top: 10px;
    padding-top: 12px;
  }

  .shop-summary-total strong {
    font-size: 28px;
  }

  .shop-buy-button {
    min-height: 52px;
    margin-top: 16px;
  }

  .shop-checkout-note {
    margin-top: 9px;
    line-height: 1.5;
  }
}

/* =========================================================
   DESKTOP SHOP FIT — compact, Apple/Gucci-like purchase view
   Keeps the full buying action visible without unnecessary
   vertical scrolling. Mobile layout remains unchanged.
   ========================================================= */
@media (min-width: 701px) {
  .shop-configurator {
    padding-top: 58px;
    padding-bottom: 96px;
  }

  .shop-configurator-inner {
    grid-template-columns: minmax(0, 1fr) minmax(350px, 390px);
    gap: clamp(38px, 4.5vw, 62px);
  }

  .shop-stage-head h2 {
    margin-top: 12px;
    font-size: clamp(30px, 3vw, 42px);
  }

  .shop-product-display {
    margin-top: 24px;
  }

  .shop-product-art {
    min-height: 0;
    height: clamp(400px, 52vh, 500px);
  }

  .shop-product-art > img {
    width: min(41%, 320px);
    max-height: 420px;
  }

  .shop-product-word {
    font-size: clamp(78px, 9vw, 132px);
  }

  .shop-recipe-thumbs {
    margin-top: 10px;
  }

  .shop-product-copy {
    padding-top: 26px;
  }

  .shop-product-copy h3 {
    margin-top: 12px;
    font-size: clamp(44px, 4.7vw, 68px);
  }

  .shop-product-ja {
    margin-top: 8px;
  }

  .shop-product-lead {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.75;
  }

  .shop-stage-note {
    margin-top: 32px;
  }

  .shop-purchase-panel {
    top: calc(var(--header-height) + 12px);
  }

  .shop-panel-inner {
    padding: 20px 22px 18px;
  }

  .shop-panel-recipe {
    margin-top: 8px;
    font-size: 30px;
  }

  .shop-panel-ja {
    margin-top: 4px;
    font-size: 12px;
  }

  .shop-option-group {
    margin-top: 15px;
  }

  .shop-option-group legend,
  .shop-option-title {
    margin-bottom: 7px;
    font-size: 12px;
  }

  .shop-option-buttons {
    gap: 6px;
  }

  .shop-size-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shop-option-buttons button {
    min-height: 40px;
    padding: 6px 6px;
    font-size: 13px;
  }

  .shop-option-note {
    margin-top: 4px;
    line-height: 1.35;
  }

  .shop-quantity {
    grid-template-columns: 42px 1fr 42px;
    min-height: 40px;
  }

  .shop-order-summary {
    margin-top: 15px;
    padding-top: 12px;
  }

  /* The selections are already visible directly above. */
  .shop-summary-row {
    display: none;
  }

  .shop-summary-total {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    align-items: center;
  }

  .shop-summary-total strong {
    font-size: 27px;
  }

  .shop-buy-button {
    min-height: 50px;
    margin-top: 13px;
  }

  .shop-checkout-note {
    margin-top: 7px;
    line-height: 1.4;
  }

  .shop-checkout-note br {
    display: none;
  }
}

@media (min-width: 701px) and (max-height: 760px) {
  .shop-product-art {
    height: 390px;
  }

  .shop-product-art > img {
    max-height: 340px;
  }

  .shop-panel-inner {
    padding-top: 16px;
    padding-bottom: 15px;
  }

  .shop-option-group {
    margin-top: 12px;
  }

  .shop-option-buttons button,
  .shop-quantity {
    min-height: 36px;
  }

  .shop-buy-button {
    min-height: 46px;
    margin-top: 10px;
  }
}


/* =========================================================
   SHOP HEADER CART — reopen the shared cart at any time
   ========================================================= */
.shop-page .shop-header-tools {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.shop-page .shop-header-tools .language {
  justify-self: auto;
}

.shop-cart-trigger {
  position: relative;
  appearance: none;
  width: 34px;
  height: 34px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.shop-cart-trigger svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shop-cart-trigger:hover {
  opacity: .58;
}

.shop-cart-badge {
  position: absolute;
  top: -1px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #f7f5ef;
  color: #171715;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  letter-spacing: 0;
}

.shop-cart-badge[hidden] {
  display: none;
}

.shop-cart-trigger-mobile {
  display: none;
}

@media (max-width: 700px) {
  .shop-page .shop-header-tools {
    display: none;
  }

  .shop-page .mobile-header-actions {
    gap: 14px;
  }

  .shop-cart-trigger-mobile {
    display: inline-grid;
    width: 32px;
    height: 32px;
    padding: 4px;
  }

  .shop-cart-trigger-mobile svg {
    width: 21px;
    height: 21px;
  }
}


/* =========================================================
   SHOP v5 — compact storefront header + mobile-first buying
   The store opens directly into shopping instead of a large
   editorial hero. Existing base.css / main.js remain untouched.
   ========================================================= */

/* Compact store title */
.shop-page .shop-hero {
  min-height: 0;
  padding: calc(var(--header-height) + 30px) var(--pad) 30px;
  display: block;
  background: #f5f1e9;
  color: #171715;
  border-bottom: 1px solid rgba(23,23,21,.12);
}

.shop-page .shop-hero::after,
.shop-page .shop-hero-ring,
.shop-page .shop-eyebrow,
.shop-page .shop-hero-copy,
.shop-page .shop-hero-cta {
  display: none;
}

.shop-page .shop-hero-inner {
  width: min(100%, 1240px);
}

.shop-page .shop-hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.shop-page .shop-hero-ja {
  margin: 8px 0 0;
  color: #777168;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .08em;
}

/* Bring the actual merchandise close to the title. */
@media (min-width: 701px) {
  .shop-page .shop-configurator {
    padding-top: 34px;
  }

  .shop-page .shop-stage-head h2 {
    margin-top: 8px;
  }
}

/* Mobile: shopping controls come before editorial copy. */
@media (max-width: 700px) {
  .shop-page {
    padding-bottom: 76px;
  }

  .shop-page .shop-hero {
    padding: calc(var(--header-height) + 14px) 18px 14px;
  }

  .shop-page .shop-hero h1 {
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -.015em;
  }

  .shop-page .shop-hero-ja {
    margin-top: 4px;
    font-size: 10px;
  }

  .shop-page .shop-configurator {
    padding: 14px 16px 62px;
  }

  .shop-page .shop-configurator-inner {
    display: flex;
    flex-direction: column;
  }

  /* Flatten wrappers so the purchase panel can appear directly
     after the image / alternate recipe thumbnails. */
  .shop-page .shop-product-stage,
  .shop-page .shop-product-display {
    display: contents;
  }

  .shop-page .shop-stage-head {
    display: none;
  }

  .shop-page .shop-product-art {
    order: 1;
    width: 100%;
    height: 238px;
    min-height: 238px;
  }

  .shop-page .shop-product-art > img {
    width: auto;
    height: 188px;
    max-width: 54%;
    max-height: 188px;
  }

  .shop-page .shop-product-index {
    top: 14px;
    left: 15px;
    font-size: 9px;
  }

  .shop-page .shop-product-word {
    left: 2%;
    bottom: -2%;
    font-size: 19vw;
  }

  .shop-page .shop-recipe-thumbs {
    order: 2;
    margin: 8px 0 0;
    align-items: flex-end;
  }

  .shop-page .shop-recipe-thumbs > p {
    margin-bottom: 5px;
    font-size: 8px;
  }

  .shop-page .shop-recipe-thumb {
    width: 54px;
    padding: 3px 3px 4px;
  }

  .shop-page .shop-recipe-thumb-image {
    height: 39px;
  }

  .shop-page .shop-recipe-thumb-image img {
    height: 37px;
  }

  .shop-page .shop-purchase-panel {
    order: 3;
    position: static;
    margin-top: 10px;
  }

  .shop-page .shop-panel-inner {
    padding: 15px 14px 14px;
  }

  .shop-page .shop-panel-label {
    display: none;
  }

  .shop-page .shop-panel-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(23,23,21,.12);
  }

  .shop-page .shop-panel-recipe {
    margin: 0;
    font-size: 24px;
  }

  .shop-page .shop-panel-ja {
    margin: 0;
    font-size: 10px;
  }

  .shop-page .shop-option-group {
    margin-top: 12px;
  }

  .shop-page .shop-option-group legend,
  .shop-page .shop-option-title {
    margin-bottom: 6px;
    font-size: 11px;
  }

  .shop-page .shop-size-options {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .shop-page .shop-kibble-options {
    gap: 5px;
  }

  .shop-page .shop-option-buttons button {
    min-height: 38px;
    padding: 5px 3px;
    font-size: 12px;
  }

  .shop-page .shop-option-note {
    margin-top: 4px;
    font-size: 8.5px;
    line-height: 1.35;
  }

  .shop-page .shop-quantity {
    grid-template-columns: 40px 1fr 40px;
    min-height: 38px;
  }

  /* Full summary is redundant on mobile because the fixed bar
     continuously shows the current price and add-to-cart action. */
  .shop-page .shop-order-summary,
  .shop-page .shop-buy-button,
  .shop-page .shop-checkout-note {
    display: none;
  }

  .shop-page .shop-product-copy {
    order: 4;
    padding: 32px 2px 0;
  }

  .shop-page .shop-stage-note {
    order: 5;
    margin-top: 30px;
  }

  .shop-page .shop-product-copy h3 {
    font-size: 48px;
  }

  .shop-page .shop-product-lead {
    margin-top: 16px;
  }

  /* Keep the conversion action visible from the first screen. */
  .shop-page .shop-mobile-bar {
    min-height: 66px;
    padding: 8px 10px 8px 14px;
  }

  .shop-page .shop-mobile-bar span {
    max-width: 48vw;
    font-size: 8.5px;
  }

  .shop-page .shop-mobile-bar strong {
    font-size: 18px;
  }

  .shop-page .shop-mobile-bar button {
    min-height: 46px;
    padding: 0 16px;
    font-size: 12px;
  }
}

/* =========================================================
   SHOP MOBILE CONVERSION POLISH — 2026-08-25
   Compress only the phone layout so product + choices are
   reached faster while the fixed add-to-cart bar stays visible.
   ========================================================= */
@media (max-width: 700px) {
  .shop-page .shop-hero {
    padding-top: calc(var(--header-height) + 10px);
    padding-bottom: 10px;
  }

  .shop-page .shop-hero h1 {
    font-size: 19px;
  }

  .shop-page .shop-hero-ja {
    margin-top: 3px;
    font-size: 9.5px;
  }

  .shop-page .shop-configurator {
    padding-top: 10px;
  }

  .shop-page .shop-product-art {
    height: 210px;
    min-height: 210px;
  }

  .shop-page .shop-product-art > img {
    height: 164px;
    max-width: 50%;
    max-height: 164px;
  }

  .shop-page .shop-product-index {
    top: 11px;
    left: 12px;
  }

  .shop-page .shop-recipe-thumbs {
    margin-top: 6px;
  }

  .shop-page .shop-recipe-thumb {
    width: 51px;
  }

  .shop-page .shop-recipe-thumb-image {
    height: 35px;
  }

  .shop-page .shop-recipe-thumb-image img {
    height: 33px;
  }

  .shop-page .shop-purchase-panel {
    margin-top: 7px;
  }

  .shop-page .shop-panel-inner {
    padding: 12px 12px 12px;
  }

  .shop-page .shop-panel-head {
    padding-bottom: 8px;
  }

  .shop-page .shop-panel-recipe {
    font-size: 22px;
  }

  .shop-page .shop-option-group {
    margin-top: 9px;
  }

  .shop-page .shop-option-group legend,
  .shop-page .shop-option-title {
    margin-bottom: 5px;
  }

  .shop-page .shop-option-buttons button {
    min-height: 36px;
  }

  .shop-page .shop-quantity {
    min-height: 36px;
  }

  .shop-page .shop-mobile-bar {
    min-height: 64px;
  }
}

/* =========================================================
   SHOP MOBILE HEADER + PURCHASE FLOW FIX — 2026-08-25
   1) The shared header defaults to white for dark hero pages.
      The shop starts on ivory, so keep the initial header dark.
   2) The old tablet grid gap remained active after the mobile
      configurator became flex; reset it so controls sit directly
      below the recipe thumbnails.
   ========================================================= */
.shop-page .site-header:not(.is-scrolled) {
  color: var(--ink);
  background: rgba(245, 241, 233, .94);
  border-bottom-color: rgba(23, 23, 21, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@media (max-width: 700px) {
  .shop-page .shop-configurator-inner {
    gap: 0;
  }

  .shop-page .shop-recipe-thumbs {
    margin-bottom: 0;
  }

  .shop-page .shop-purchase-panel {
    margin-top: 5px;
  }
}


/* =========================================================
   SHOP PURCHASE CONFIDENCE — compact, customer-facing only
   ========================================================= */
.shop-days-estimator {
  margin-top: 14px;
  border-top: 1px solid rgba(23, 23, 21, .12);
  border-bottom: 1px solid rgba(23, 23, 21, .12);
}

.shop-days-estimator summary {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 13px;
  letter-spacing: .03em;
}

.shop-days-estimator summary::-webkit-details-marker { display: none; }

.shop-days-estimator summary span {
  color: #79756d;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .1em;
}

.shop-days-estimator summary::after {
  content: "+";
  margin-left: auto;
  color: #77736a;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
}

.shop-days-estimator[open] summary::after { content: "−"; }

.shop-days-estimator-body {
  padding: 3px 0 14px;
}

.shop-days-estimator-body label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #5f5b54;
  font-size: 11px;
}

.shop-days-estimator-body select {
  width: 100%;
  min-height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid rgba(23, 23, 21, .18);
  border-radius: 0;
  background: transparent;
  color: #171715;
  font: inherit;
}

.shop-days-estimator-body p {
  margin: 11px 0 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: #6f6a62;
  font-size: 10px;
  line-height: 1.55;
}

.shop-days-estimator-body p strong {
  color: #171715;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 19px;
  font-weight: 400;
}

.shop-days-estimator-body p span { color: #77736a; }

.shop-days-estimator-body > small {
  display: block;
  margin-top: 7px;
  color: #8a857c;
  font-size: 8.5px;
  line-height: 1.55;
}

.shop-purchase-assurance {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: #77736a;
  font-size: 8.5px;
  line-height: 1.45;
}

.shop-purchase-assurance span::before {
  content: "✓";
  margin-right: 4px;
  color: #57534c;
}

@media (max-width: 700px) {
  .shop-page .shop-days-estimator {
    margin-top: 10px;
  }

  .shop-page .shop-days-estimator summary {
    min-height: 36px;
    font-size: 10.5px;
  }

  .shop-page .shop-days-estimator summary span {
    font-size: 7.5px;
  }

  .shop-page .shop-days-estimator-body {
    padding-bottom: 10px;
  }

  .shop-page .shop-days-estimator-body label {
    font-size: 9px;
  }

  .shop-page .shop-days-estimator-body select {
    min-height: 34px;
    font-size: 10px;
  }

  .shop-page .shop-days-estimator-body p {
    margin-top: 8px;
    font-size: 8.5px;
  }

  .shop-page .shop-days-estimator-body p strong {
    font-size: 16px;
  }

  .shop-page .shop-days-estimator-body > small {
    font-size: 7.5px;
  }

  /* The fixed bottom bar already carries the primary CTA. */
  .shop-page .shop-purchase-assurance {
    display: none;
  }
}


/* =========================================================
   SHOP MOBILE LAYOUT FIX — 2026-08-25
   - Keep the light shop header readable before scrolling.
   - Put the two alternate recipes beside the hero image on phones.
   - Pull the purchase controls upward without changing shared CSS/JS.
   ========================================================= */
.shop-page .site-header,
.shop-page .site-header.is-scrolled,
.shop-page .site-header.is-dark,
.shop-page .site-header.is-scrolled.is-dark {
  color: var(--ink);
  background: rgba(245, 241, 233, .96);
  border-bottom-color: rgba(23, 23, 21, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.shop-page .site-header .site-nav .nav-store,
.shop-page .site-header.is-dark .site-nav .nav-store,
.shop-page .site-header.is-scrolled.is-dark .site-nav .nav-store {
  border-color: rgba(23, 23, 21, .35);
}

@media (max-width: 700px) {
  .shop-page .shop-configurator-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    column-gap: 7px;
    row-gap: 0;
    align-items: start;
  }

  .shop-page .shop-product-art {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 205px;
    min-height: 205px;
  }

  .shop-page .shop-product-art > img {
    height: 160px;
    max-width: 58%;
    max-height: 160px;
  }

  .shop-page .shop-recipe-thumbs {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 4px;
    align-items: stretch;
  }

  .shop-page .shop-recipe-thumbs > p {
    margin: 0 0 6px;
    font-size: 7px;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }

  .shop-page .shop-recipe-thumb-list {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }

  .shop-page .shop-recipe-thumb {
    width: 58px;
    padding: 3px 2px 4px;
  }

  .shop-page .shop-recipe-thumb-image {
    height: 35px;
  }

  .shop-page .shop-recipe-thumb-image img {
    height: 33px;
  }

  .shop-page .shop-recipe-thumb small {
    margin-top: 2px;
    font-size: 8px;
  }

  .shop-page .shop-purchase-panel,
  .shop-page .shop-product-copy,
  .shop-page .shop-stage-note {
    grid-column: 1 / -1;
  }

  .shop-page .shop-purchase-panel {
    grid-row: 2;
    margin-top: 7px;
  }

  .shop-page .shop-product-copy {
    grid-row: 3;
  }

  .shop-page .shop-stage-note {
    grid-row: 4;
  }
}


/* =========================================================
   MOBILE BUY BAR CLARITY — 2026-08-25
   Distinguish the price being added from the number already
   in the cart. Keep the bar compact and readable on iPhone.
   ========================================================= */
@media (max-width: 700px) {
  .shop-page .shop-mobile-bar {
    min-height: 70px;
    padding: 7px 10px 7px 14px;
    gap: 10px;
  }

  .shop-page .shop-mobile-bar-copy {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 6px;
    row-gap: 1px;
  }

  .shop-page .shop-mobile-bar-copy .shop-mobile-selection-label {
    max-width: none;
    overflow: visible;
    color: #8a857c;
    font-size: 7px;
    letter-spacing: .08em;
  }

  .shop-page .shop-mobile-bar-copy [data-mobile-selection] {
    max-width: 31vw;
    color: #6f6a62;
    font-size: 8px;
  }

  .shop-page .shop-mobile-bar-copy [data-mobile-total] {
    grid-column: 1 / -1;
    margin-top: 1px;
    font-size: 18px;
    line-height: 1.05;
  }

  .shop-page .shop-mobile-bar button {
    min-width: 154px;
    min-height: 54px;
    padding: 7px 14px 6px;
    flex-direction: column;
    gap: 3px;
    line-height: 1.15;
  }

  .shop-page .shop-mobile-bar button > span {
    max-width: none;
    overflow: visible;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
    font-size: 12px;
  }

  .shop-page .shop-mobile-bar button > small {
    display: block;
    color: rgba(255,255,255,.62);
    font-family: var(--sans);
    font-size: 7.5px;
    font-weight: 400;
    letter-spacing: .06em;
  }
}


/* =========================================================
   MOBILE BUY BAR — distinguish selection from live cart state
   2026-08-25
   ========================================================= */
@media (max-width: 700px) {
  .shop-page .shop-mobile-bar {
    min-height: 74px;
    padding: 7px 10px 7px 14px;
    gap: 10px;
  }

  .shop-page .shop-mobile-bar-copy {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 6px;
    row-gap: 1px;
  }

  .shop-page .shop-mobile-selection-label {
    max-width: none;
    overflow: visible;
    color: #777168;
    font-size: 8.5px;
    line-height: 1.1;
    letter-spacing: .05em;
  }

  .shop-page .shop-mobile-bar-copy [data-mobile-selection] {
    max-width: 34vw;
    color: #6f6a62;
    font-size: 8.5px;
    line-height: 1.15;
  }

  .shop-page .shop-mobile-bar-copy [data-mobile-total] {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 19px;
    line-height: 1.05;
  }

  .shop-page .shop-mobile-bar button[data-mobile-add-to-cart] {
    min-width: 160px;
    min-height: 58px;
    padding: 7px 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.1;
  }

  .shop-page .shop-mobile-bar button[data-mobile-add-to-cart] > span {
    max-width: none;
    overflow: visible;
    color: #fff;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
    font-size: 12px;
    line-height: 1.1;
  }

  .shop-page .shop-mobile-bar button[data-mobile-add-to-cart] > small[data-mobile-cart-status] {
    display: block;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
    color: rgba(255,255,255,.78);
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .01em;
  }
}

/* =========================================================
   MOBILE READABILITY — 2026-08-25
   Keep Japanese customer-facing text comfortably readable.
   English micro-labels may remain smaller as secondary info.
   ========================================================= */
@media (max-width: 700px) {
  .shop-page .shop-hero-ja {
    font-size: 12px;
    line-height: 1.45;
  }

  .shop-page .shop-configurator-inner {
    grid-template-columns: minmax(0, 1fr) 66px;
    column-gap: 8px;
  }

  .shop-page .shop-recipe-thumbs > p {
    font-size: 10.5px;
    line-height: 1.35;
    white-space: normal;
  }

  .shop-page .shop-recipe-thumb {
    width: 66px;
  }

  .shop-page .shop-recipe-thumb small {
    font-size: 11px;
    line-height: 1.2;
  }

  .shop-page .shop-panel-ja {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .shop-page .shop-option-group legend,
  .shop-page .shop-option-title {
    font-size: 14px;
    line-height: 1.35;
  }

  .shop-page .shop-option-group legend small,
  .shop-page .shop-option-title small {
    font-size: 9px;
  }

  .shop-page .shop-option-buttons button {
    font-size: 14px;
  }

  .shop-page .shop-option-note {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .shop-page .shop-days-estimator summary {
    min-height: 40px;
    font-size: 13.5px;
    line-height: 1.35;
  }

  .shop-page .shop-days-estimator summary span {
    font-size: 10.5px;
  }

  .shop-page .shop-days-estimator-body label {
    font-size: 12px;
  }

  .shop-page .shop-days-estimator-body select {
    min-height: 38px;
    font-size: 13px;
  }

  .shop-page .shop-days-estimator-body p {
    font-size: 11.5px;
    line-height: 1.5;
  }

  .shop-page .shop-days-estimator-body p strong {
    font-size: 18px;
  }

  .shop-page .shop-days-estimator-body > small {
    font-size: 10.5px;
    line-height: 1.55;
  }

  .shop-page .shop-mobile-bar {
    min-height: 78px;
  }

  .shop-page .shop-mobile-selection-label {
    font-size: 10.5px;
    line-height: 1.2;
  }

  .shop-page .shop-mobile-bar-copy [data-mobile-selection] {
    font-size: 10.5px;
    line-height: 1.25;
  }

  .shop-page .shop-mobile-bar-copy [data-mobile-total] {
    font-size: 20px;
  }

  .shop-page .shop-mobile-bar button[data-mobile-add-to-cart] > span {
    font-size: 14px;
    line-height: 1.15;
  }

  .shop-page .shop-mobile-bar button[data-mobile-add-to-cart] > small[data-mobile-cart-status] {
    font-size: 9.5px;
    line-height: 1.15;
  }
}


/* =========================================================
   MOBILE FINAL TIDY — recipe heading + buy-bar label
   2026-08-25
   ========================================================= */
@media (max-width: 700px) {
  .shop-page .shop-recipe-thumbs > p {
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }

  .shop-page .shop-recipe-thumbs > p span {
    display: block;
    white-space: nowrap;
  }

  .shop-page .shop-mobile-selection-label {
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: .03em;
  }
}

/* =========================================================
   CART DRAWER COMPLETION — fixed checkout + in-cart quantity
   2026-08-25
   ========================================================= */
.shop-cart-drawer {
  overflow: hidden;
}

.shop-cart-head {
  flex: 0 0 auto;
  min-height: 112px;
  padding: 28px 34px 22px;
  background: #fbfaf7;
}

.shop-cart-head h2 {
  font-size: 21px;
}

.shop-cart-feedback {
  min-height: 18px;
  margin: 7px 0 0;
  color: #6e685f;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 12px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.shop-cart-feedback.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.shop-cart-body {
  flex: 1;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shop-cart-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 28px 34px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.shop-cart-footer {
  flex: 0 0 auto;
  padding: 16px 34px 20px;
  border-top: 1px solid rgba(23,23,21,.15);
  background: rgba(251,250,247,.98);
  box-shadow: 0 -12px 30px rgba(23,23,21,.035);
}

.shop-cart-footer .shop-cart-totals {
  margin: 0;
  padding: 0 0 14px;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  border: 0;
}

.shop-cart-footer .shop-cart-totals > div {
  display: block;
}

.shop-cart-footer .shop-cart-totals > div:last-child {
  text-align: right;
}

.shop-cart-footer .shop-cart-totals span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
}

.shop-cart-footer .shop-cart-totals strong {
  font-size: 22px;
}

.shop-cart-footer .shop-cart-actions {
  margin: 0;
  gap: 8px;
}

.shop-cart-footer .shop-cart-checkout {
  min-height: 56px;
  font-size: 15px;
}

.shop-cart-footer .shop-cart-continue {
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid rgba(23,23,21,.28);
  font-size: 12.5px;
}

.shop-cart-footer .shop-cart-note {
  margin: 10px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  text-align: center;
}

.shop-cart-checkout.is-disabled {
  opacity: .38;
  pointer-events: none;
}

.shop-cart-item {
  padding-bottom: 28px;
}

.shop-cart-items .shop-cart-item + .shop-cart-item {
  padding-top: 24px;
}

.shop-cart-variation {
  margin-top: 14px;
  font-size: 12px;
}

.shop-cart-qty-row {
  margin-top: 18px;
  display: grid;
  grid-template-columns: auto 116px minmax(88px, 1fr);
  align-items: center;
  gap: 12px;
}

.shop-cart-qty-label {
  color: #625d55;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 12px;
}

.shop-cart-qty-control {
  height: 38px;
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  border: 1px solid rgba(23,23,21,.18);
  background: #fbfaf7;
}

.shop-cart-qty-control button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #171715;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.shop-cart-qty-control output {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(23,23,21,.14);
  border-right: 1px solid rgba(23,23,21,.14);
  font-family: var(--serif);
  font-size: 15px;
}

.shop-cart-line-total {
  justify-self: end;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.shop-cart-remove {
  margin-top: 13px;
  font-size: 12px;
}

@media (max-width: 700px) {
  .shop-cart-head {
    min-height: 88px;
    padding: 18px 20px 14px;
  }

  .shop-cart-kicker {
    margin-bottom: 5px;
  }

  .shop-cart-head h2 {
    font-size: 18px;
  }

  .shop-cart-feedback {
    min-height: 16px;
    margin-top: 4px;
    font-size: 12px;
  }

  .shop-cart-close {
    width: 40px;
    height: 40px;
    margin: -4px -5px 0 0;
  }

  .shop-cart-scroll {
    padding: 20px 20px 18px;
  }

  .shop-cart-footer {
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  }

  .shop-cart-footer .shop-cart-totals {
    padding-bottom: 10px;
  }

  .shop-cart-footer .shop-cart-totals span {
    font-size: 11.5px;
  }

  .shop-cart-footer .shop-cart-totals strong {
    font-size: 20px;
  }

  .shop-cart-footer .shop-cart-checkout {
    min-height: 50px;
    font-size: 14px;
  }

  .shop-cart-footer .shop-cart-continue {
    min-height: 34px;
    font-size: 12.5px;
  }

  .shop-cart-footer .shop-cart-note {
    margin-top: 7px;
    font-size: 10.5px;
  }

  .shop-cart-item {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 18px;
    padding-bottom: 24px;
  }

  .shop-cart-image-wrap {
    min-height: 128px;
  }

  .shop-cart-item-copy h3 {
    font-size: 27px;
  }

  .shop-cart-ja,
  .shop-cart-variation,
  .shop-cart-qty-label,
  .shop-cart-remove {
    font-size: 12.5px;
  }

  .shop-cart-qty-row {
    grid-template-columns: 1fr auto;
    gap: 10px 12px;
  }

  .shop-cart-qty-label {
    grid-column: 1;
  }

  .shop-cart-qty-control {
    grid-column: 1;
    grid-row: 2;
    width: 118px;
    height: 38px;
  }

  .shop-cart-line-total {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    font-size: 21px;
  }
}


/* =========================================================
   SHIPPING STATUS — verified current Rassmick terms
   2026-08-25
   ========================================================= */
.shop-cart-shipping {
  margin: 0 0 13px;
}

.shop-cart-shipping-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.shop-cart-shipping-row strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.shop-cart-shipping-row span {
  color: #625d55;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}

.shop-cart-shipping-track {
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: rgba(23,23,21,.12);
}

.shop-cart-shipping-track span {
  display: block;
  width: 0;
  height: 100%;
  background: #171715;
  transition: width 180ms ease;
}

.shop-cart-shipping small {
  display: block;
  margin-top: 6px;
  color: #625d55;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-size: 11.5px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .shop-cart-shipping {
    margin-bottom: 10px;
  }

  .shop-cart-shipping-row {
    gap: 10px;
  }

  .shop-cart-shipping-row strong {
    font-size: 13.5px;
  }

  .shop-cart-shipping-row span {
    font-size: 11.5px;
  }

  .shop-cart-shipping small {
    font-size: 11.5px;
  }

  .shop-purchase-assurance span {
    font-size: 12px;
  }
}


/* =========================================================
   PURCHASE CONFIDENCE V12 — shipping / payment / return
   Base: shipping-fix (2026-08-25)
   ========================================================= */
.shop-days-estimator-row {
  display: grid;
  grid-template-columns: minmax(150px, .78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: 12px;
}

.shop-days-estimator-row label {
  display: grid;
  grid-template-columns: auto minmax(88px, 1fr);
  align-items: center;
  gap: 8px;
}

.shop-days-estimator-row p {
  margin: 0;
  min-width: 0;
}

.shop-days-estimator-body > small {
  margin-top: 5px;
}

.shop-purchase-assurance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  color: #625d55;
  font-size: 11.5px;
  line-height: 1.45;
}

.shop-purchase-assurance span {
  min-width: 0;
}

.shop-purchase-assurance span::before {
  content: none;
}

.shop-purchase-assurance b {
  margin-right: 5px;
  color: #171715;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-weight: 500;
}

.shop-purchase-assurance sup {
  margin-left: 1px;
  font-size: .72em;
}

.shop-purchase-assurance .shop-assurance-wide,
.shop-purchase-assurance > small {
  grid-column: 1 / -1;
}

.shop-purchase-assurance > small {
  color: #858078;
  font-size: 10px;
  line-height: 1.4;
}

.shop-cart-service-notes {
  margin: 0 0 11px;
  padding: 9px 0 0;
  border-top: 1px solid rgba(23,23,21,.1);
}

.shop-cart-service-notes p {
  margin: 0;
  color: #625d55;
  font-size: 11.5px;
  line-height: 1.5;
}

.shop-cart-service-notes p + p {
  margin-top: 2px;
}

.shop-cart-service-notes b {
  display: inline-block;
  min-width: 3.8em;
  color: #171715;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", var(--serif);
  font-weight: 500;
}

@media (max-width: 700px) {
  .shop-page .shop-days-estimator-body {
    padding: 4px 0 9px;
  }

  .shop-page .shop-days-estimator-row {
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 9px;
  }

  .shop-page .shop-days-estimator-row label {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 6px;
    font-size: 12px;
  }

  .shop-page .shop-days-estimator-row select {
    min-height: 34px;
    padding: 0 24px 0 8px;
    font-size: 12.5px;
  }

  .shop-page .shop-days-estimator-row p {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 7px;
    font-size: 11.5px;
    line-height: 1.35;
  }

  .shop-page .shop-days-estimator-row p strong {
    font-size: 17px;
  }

  .shop-page .shop-days-estimator-body > small {
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  /* Keep assurance readable without making the first view too tall. */
  .shop-page .shop-purchase-assurance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 10px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  .shop-page .shop-purchase-assurance .shop-assurance-wide,
  .shop-page .shop-purchase-assurance > small {
    grid-column: 1 / -1;
  }

  .shop-page .shop-purchase-assurance > small {
    font-size: 10.5px;
  }

  .shop-cart-service-notes {
    margin-bottom: 9px;
    padding-top: 7px;
  }

  .shop-cart-service-notes p {
    font-size: 11.5px;
    line-height: 1.42;
  }

  .shop-cart-service-notes p + p {
    margin-top: 1px;
  }
}