/* STRONG shop */
.shop-hero { background: #F7F3EA; border-bottom: 1px solid #E2DACA; }
.shop-hero-inner { max-width: 1200px; margin: 0 auto; padding: 64px 24px 48px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.shop-hero h1 { margin: 0; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 44px; line-height: 1.1; color: #13233A; }
.shop-hero p { margin: 10px 0 0; max-width: 620px; color: #55606E; }
.shop-thanks { max-width: 1200px; margin: 24px auto 0; padding: 0 24px; }
.shop-thanks div { background: #E8F3EA; border: 1px solid #B9DBC0; border-radius: 14px; padding: 16px 20px; color: #1D4B2A; font-weight: 700; }
.shop-wrap { max-width: 1200px; margin: 0 auto; padding: 48px 24px 88px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 28px 22px; }
.shop-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: #26303B; }
.shop-card-img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: #FFFFFF; border: 1px solid #E2DACA; }
.shop-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.shop-card:hover .shop-card-img img { transform: scale(1.03); }
.shop-card-name { margin-top: 8px; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3; color: #13233A; }
.shop-card-price { font-size: 17px; color: #55606E; }
.shop-badge { position: absolute; left: 12px; top: 12px; background: #13233A; color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.shop-msg { font-size: 19px; color: #55606E; }
.shop-skel { aspect-ratio: 1 / 1; border-radius: 16px; background: linear-gradient(90deg, #EFE9DD 25%, #F7F3EA 50%, #EFE9DD 75%); background-size: 200% 100%; animation: shopSk 1.2s infinite; }
@keyframes shopSk { to { background-position: -200% 0; } }

.cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 1px solid #E2DACA; background: #FFFFFF; color: #13233A; cursor: pointer; padding: 0; }
.cart-btn [data-cart-count] { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #1F5BB5; color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-sizing: border-box; }

/* product page */
.pd { max-width: 1200px; margin: 0 auto; padding: 48px 24px 88px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.pd-gallery { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pd-main { aspect-ratio: 1 / 1; border-radius: 18px; overflow: hidden; background: #FFFFFF; border: 1px solid #E2DACA; }
.pd-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-thumbs button { width: 72px; height: 72px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #FFFFFF; cursor: pointer; }
.pd-thumbs button[aria-current="true"] { border-color: #13233A; }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-info { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.pd-back { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px; color: #1F5BB5; text-decoration: none; }
.pd-name { margin: 0; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 34px; line-height: 1.15; color: #13233A; }
.pd-price { font-size: 24px; font-weight: 700; color: #13233A; }
.pd-opt-label { font-weight: 700; margin-bottom: 8px; color: #13233A; }
.pd-opt-label span { font-weight: 400; color: #55606E; }
.pd-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-chip { min-width: 52px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid #C9C0AE; background: #FFFFFF; font: inherit; font-size: 16px; cursor: pointer; color: #13233A; }
.pd-chip[aria-pressed="true"] { background: #13233A; color: #FFFFFF; border-color: #13233A; }
.pd-swatch { width: 40px; height: 40px; border-radius: 999px; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px #C9C0AE; cursor: pointer; padding: 0; }
.pd-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #13233A; }
.pd-buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pd-buy .loc-btn { flex: 1 1 220px; width: auto; }
.pd-buy .loc-btn:disabled { opacity: .55; cursor: not-allowed; }
.pd-msg { margin: 0; min-height: 1.4em; color: #1D4B2A; font-weight: 700; }
.pd-desc { border-top: 1px solid #E2DACA; padding-top: 18px; font-size: 17px; color: #3A4552; }
.pd-desc ul { padding-left: 20px; margin: 8px 0 0; }

/* cart drawer */
.sc-qty { display: inline-flex; align-items: center; border: 1px solid #C9C0AE; border-radius: 999px; background: #FFFFFF; }
.sc-qty button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: #13233A; }
.sc-qty span { min-width: 26px; text-align: center; font-weight: 700; }
#shop-cart { position: fixed; inset: 0; z-index: 60; background: rgba(11, 22, 38, .45); display: flex; justify-content: flex-end; }
#shop-cart[hidden] { display: none; }
.sc-panel { width: min(440px, 100%); height: 100%; background: #F7F3EA; display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(0, 0, 0, .18); }
.sc-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid #E2DACA; }
.sc-head h2 { margin: 0; font-family: Montserrat, sans-serif; font-weight: 800; font-size: 24px; color: #13233A; }
.sc-close { width: 44px; height: 44px; border: 0; background: transparent; font-size: 28px; cursor: pointer; color: #13233A; }
.sc-body { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.sc-line { display: flex; gap: 14px; background: #FFFFFF; border: 1px solid #E2DACA; border-radius: 14px; padding: 12px; }
.sc-img { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; background: #EFE9DD; flex: none; display: block; }
.sc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sc-name { font-weight: 700; color: #13233A; line-height: 1.3; }
.sc-desc { font-size: 14px; color: #55606E; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.sc-row .sc-qty button { width: 34px; height: 34px; }
.sc-price { font-weight: 700; }
.sc-remove { align-self: flex-start; border: 0; background: none; padding: 0; color: #55606E; text-decoration: underline; font: inherit; font-size: 14px; cursor: pointer; }
.sc-foot { padding: 18px 22px 24px; border-top: 1px solid #E2DACA; display: flex; flex-direction: column; gap: 10px; }
.sc-sub { display: flex; justify-content: space-between; font-size: 19px; color: #13233A; }
.sc-note { margin: 0; font-size: 14px; color: #55606E; }
.sc-err { margin: 0; font-size: 15px; color: #9B2C2C; }
.sc-empty { color: #55606E; }
.sc-busy .sc-body, .sc-busy .sc-foot { opacity: .5; pointer-events: none; }
body.sc-open { overflow: hidden; }
@media (max-width: 720px) {
  .shop-hero h1 { font-size: 34px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .shop-card-name { font-size: 16px; }
  .pd { padding-top: 28px; gap: 24px; }
  .pd-name { font-size: 28px; }
}