:root {
  color: #34231e;
  background: #fffaf7;
  --mj-brown: #744b39;
  --mj-dark: #3d271f;
  --mj-pink: #e781a3;
  --mj-green: #16a844;
}

body { background: #fffaf7; }
.pilot-strip { background: var(--mj-brown); font-size: 12px; padding: 8px 14px; }
.site-header { max-width: none; padding: 18px max(28px, calc((100vw - 1180px)/2 + 28px)); background: #fff; border-bottom: 1px solid #f4e8e4; }
.brand-mark { color: var(--mj-dark); font-size: 31px; }
.brand-dot, .footer-inner strong span { color: var(--mj-pink); }
.brand-type { color: var(--mj-dark); letter-spacing: .035em; font-size: 17px; }
.brand-type small { color: #826b5e; font-size: 9px; letter-spacing: 0; text-transform: none; }
.main-nav { background: transparent; border-radius: 0; gap: 10px; padding: 0; }
.nav-button { color: #55443e; border-radius: 0; border-bottom: 2px solid transparent; padding: 10px 13px; }
.nav-button:hover { color: #c85079; }
.nav-button.active { color: #d65c83; border-bottom-color: #e781a3; box-shadow: none; background: transparent; }

.hero { max-width: none; padding: 58px max(28px, calc((100vw - 1180px)/2 + 28px)) 66px; min-height: 520px; gap: 36px; background: radial-gradient(circle at 82% 34%, #fff 0, transparent 38%), linear-gradient(111deg, #fff7f2 0%, #fae8e6 64%, #f8f1e9 100%); }
.hero-copy { position: relative; z-index: 2; }
.hero .eyebrow { color: #be6684; letter-spacing: .14em; }
.hero h1 { color: #39231f; font-size: clamp(37px, 4.2vw, 62px); line-height: 1.18; max-width: 700px; }
.hero h1 em { color: #8d5445; }
.hero p { color: #69564c; max-width: 510px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.primary-link, .secondary-link, .dark-button, .submit-button { min-height: 50px; border-radius: 11px; padding: 13px 19px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; font-weight: 800; font-size: 14px; transition: background .16s, transform .16s; }
.primary-link, .submit-button { background: var(--mj-green); color: #fff; box-shadow: 0 7px 20px #159b3830; }
.primary-link:hover, .submit-button:hover { background: #118d38; transform: translateY(-2px); }
.secondary-link { background: #e882a4; color: #fff; box-shadow: 0 7px 20px #db789b2c; }
.secondary-link:hover { background: #d66c91; transform: translateY(-2px); }
.dark-button { background: var(--mj-brown); color: #fff; }
.dark-button:hover { background: var(--mj-dark); }
.eyebrow { color: #c86283; letter-spacing: .16em; }

.hero-art { min-height: 395px; border-radius: 36px; background: radial-gradient(circle at 40% 70%, #fffaf6 0 18%, transparent 55%), linear-gradient(145deg, #f5d0d1, #d9b9a2); box-shadow: 0 25px 42px #6d4a3020; }
.hero-art::after { content: '♡'; position: absolute; right: 27px; top: 18px; color: #b75270; font-size: 40px; transform: rotate(16deg); }
.halo { width: 360px; height: 360px; border: 1px solid #fff9; top: 17px; }
.blob-one { background: #f9eee5; }
.blob-two { background: #e9acb8; opacity: .7; }
.art-card { width: 250px; height: 290px; transform: rotate(-5deg); background: #fff8ed; border: 1px solid #f5e5d3; box-shadow: 16px 23px 30px #70403336; }
.art-card strong { color: #5d3c2e; }
.art-paw { color: #d97391; font-size: 43px; }
.art-caption { color: #936f64; }
.mini-note { border: 1px solid #f5dfdf; box-shadow: 0 9px 25px #7a4c422b; }
.mini-note strong { color: #bd5274; }

.benefit-band { background: linear-gradient(90deg, #fff1f1, #fae9ed, #fff1f1); border-top: 1px solid #f7e5e4; border-bottom: 1px solid #f7e5e4; }
.benefit-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 20px; padding-bottom: 20px; }
.benefit-inner > div { display: flex; justify-content: center; align-items: center; gap: 13px; min-width: 0; }
.benefit-inner > div + div { border-left: 1px solid #ebced1; }
.benefit-inner span { flex: none; display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: #f7ccd5; color: #784b40; font-size: 23px; font-weight: 700; }
.benefit-inner p { margin: 0; line-height: 1.5; }
.benefit-inner strong, .benefit-inner small { display: block; }
.benefit-inner strong { color: #5b352c; font-size: 14px; }
.benefit-inner small { color: #886c68; font-size: 11px; }

.section-heading { padding-top: 54px; }
.section-heading h2, .checkout-head h2 { color: var(--mj-dark); }
.section-heading p { color: #866d64; }
.count-pill { background: #fce8ed; color: #b95777; }
.product-grid { gap: 19px; }
.product-card { border: 1px solid #f1e8e4; border-radius: 14px; box-shadow: 0 7px 25px #74524012; }
.product-card:hover { box-shadow: 0 15px 34px #74524020; transform: translateY(-2px); }
.product-art { background: radial-gradient(circle at 50% 80%, #fffdf9 0, #f2dfd7 75%); }
.product-card:nth-child(2) .product-art { background: radial-gradient(circle at 50% 80%, #fffcf6 0, #f8e5e9 75%); }
.product-card:nth-child(3) .product-art { background: radial-gradient(circle at 50% 80%, #fffdf9 0, #f0e1d6 75%); }
.catalog-page .product-art { height: 255px; background: #fffaf7; }
.catalog-page .product-art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.catalog-page .product-art::before { content: none; }
.product-art::after { content: 'ตัวอย่าง'; position: absolute; left: 13px; top: 13px; z-index: 2; padding: 4px 10px; border-radius: 99px; color: #fff; background: #db7899; font-size: 10px; font-weight: 800; }
.mock-bag { background: #dfbc96; }
.mock-bottle { background: #f7c8d7; border-color: #d9aabb; }
.mock-bottle::before { background: #7b4536; }
.mock-bottle::after { color: #562d2c; }
.product-kicker { color: #c06782; }
.product-body h3, .product-price { color: #382720; }
.qty-control { border-color: #d6b6a9; }
.qty-control button { color: #7a4937; }

.checkout-wrap { border-top: 1px solid #efdfd8; }
.checkout-form, .order-summary, .lookup-card, .admin-box { background: #fff; border: 1px solid #f0e3dc; border-radius: 16px; box-shadow: 0 8px 25px #77533a10; }
.order-summary { background: #fff0ed; border-color: #f3d9d5; }
.order-summary h3, .summary-total strong { color: #4b2b26; }
.radio-card:has(input:checked) { border-color: #e184a3; background: #fff3f6; }
.radio-card input { accent-color: #d86f91; }
input:focus, select:focus, .admin-order select:focus { border-color: #d97698; box-shadow: 0 0 0 3px #f0bad022; }
.success-panel { background: #e9f7e7; }
.success-panel button { color: #148d3b; }
.track-card { background: #fff2ee; border-color: #f2d9d0; }
.track-card a { background: var(--mj-brown); }
.customer-status { font-weight: 800; }
.customer-status-review { color: #1f1f1f; }
.customer-status-awaiting { color: #49332e; }
.customer-status-cancelled { color: #b32338; }
.customer-status-confirmed { color: #168042; }
.track-card .tracking-number { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 5px 0 9px; font-size: 13px; overflow-wrap: anywhere; }
.track-card .copy-tracking { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #d5a8a0; border-radius: 8px; background: #fff; color: #6b453d; cursor: pointer; }
.track-card .copy-tracking:hover { background: #fff4f1; }
.track-card .copy-feedback { display: block; min-height: 18px; color: #256e3b; font-size: 11px; }
.track-card .track-cancel-reason { color: #8e2836; font-weight: 700; }
.switch { background: #e8f5e8; border-color: #b4dcb5; color: #2b733e; }
.switch.off { background: #f2e8e3; color: #865a4f; }
.admin-order button { color: #6a4435; border-color: #9b735f; }
.admin-order button:hover { background: #fff2ec; }
.status-pill { background: #ffedf1; color: #ad5572; }
.status-pill.shipped { background: #e5f4e5; color: #3b7544; }
.status-pill.cancelled { background: #f1e9e6; color: #764b47; }

footer { background: #533626; }
.footer-inner { color: #f5ddd1; min-height: 125px; }
.footer-inner strong { color: #fff9f2; }
.footer-inner strong span { color: #ef9db5; }
button:focus-visible, a:focus-visible { outline-color: #ca6088; }

.catalog-page { padding-bottom: 72px; }
.catalog-page .section-heading { padding-top: 48px; margin-bottom: 8px; }
.catalog-page h1, .checkout-page h1 { color: var(--mj-dark); font-size: clamp(30px, 3vw, 42px); line-height: 1.25; margin: 7px 0; }
.demo-note { color: #927669; font-size: 12px; margin-bottom: 20px; }
.cart-next { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 26px; padding-top: 20px; padding-bottom: 20px; background: #fff0ef; border-radius: 16px; }
.cart-next strong, .cart-next span { display: block; }
.cart-next strong { color: #4f3029; font-size: 17px; }
.cart-next span { color: #86665b; font-size: 12px; margin-top: 4px; }
.checkout-page .checkout-wrap { margin-top: 0; padding-top: 45px; border-top: 0; }
.checkout-page .checkout-head h1 { margin: 6px 0; }
.back-link, .edit-cart-link { display: inline-block; color: #b85678; font-size: 12px; font-weight: 800; margin-bottom: 18px; }
.back-link:hover, .edit-cart-link:hover { text-decoration: underline; }
.edit-cart-link { margin: 3px 0 0; }
.checkout-page .order-summary h2 { font-size: 23px; margin: 8px 0 22px; }
.success-panel a { display: inline-block; color: #148d3b; font-weight: 800; margin-top: 9px; }
.payment-page { padding-top: 44px; padding-bottom: 75px; min-height: 68vh; }
.payment-page h1 { color: var(--mj-dark); font-size: clamp(30px, 3vw, 42px); margin: 7px 0; }
.payment-page .intro { margin-bottom: 20px; }
.payment-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 18px; align-items: start; }
.payment-page .order-summary h2 { font-size: 23px; margin: 8px 0 22px; }
.payment-summary-section { padding: 16px 0; border-top: 1px solid #e8d0ca; }
.payment-summary-section h3 { margin: 0 0 10px; font-size: 14px; }
.payment-summary-section p, .payment-summary-section address { margin: 4px 0; font-size: 13px; line-height: 1.6; font-style: normal; overflow-wrap: anywhere; }
#payment-address-lines { white-space: pre-line; }
.payment-summary-section .cart-lines { margin-top: 4px; }
.payment-total-banner { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 18px; padding: 20px 24px; margin: 20px 0; border: 1px solid #efd4da; border-radius: 16px; background: linear-gradient(110deg, #fff2f3, #fff9f6); color: #51332c; }
.payment-total-banner span { font-size: 16px; font-weight: 800; }
.payment-total-banner strong { margin-left: auto; color: #8b3d59; font-size: clamp(30px, 4vw, 42px); line-height: 1; }
.payment-total-banner small { flex-basis: 100%; color: #876f6a; font-size: 11px; }
.checkout-form select { width: 100%; display: block; border: 1px solid #e3ded3; background: #fcfbf8; border-radius: 9px; padding: 12px 13px; outline: none; margin-top: 7px; color: #2d2924; font: inherit; }
.checkout-form select:focus { border-color: #6d8069; box-shadow: 0 0 0 3px #6d806922; }
.checkout-form select:disabled { color: #9b9288; background: #f4f1ee; }
.demo-qr { display: grid; justify-items: center; gap: 6px; padding: 18px; margin: 0 0 14px; border: 1px solid #e8d6d4; border-radius: 12px; background: #fff9f8; text-align: center; }
.demo-qr[hidden] { display: none; }
.demo-qr img { width: 176px; height: 176px; max-width: 100%; }
.demo-qr strong { color: #6b3d3d; font-size: 13px; }
.demo-qr small { color: #8a6d6d; font-size: 11px; }
.save-qr-link { display: inline-block; padding: 8px 14px; border: 1px solid #d78aa0; border-radius: 9px; color: #9b3d61; background: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
.save-qr-link:hover { background: #fff0f5; }
.transfer-choices[hidden], .transfer-bank[hidden], #transfer-bank-details[hidden] { display: none !important; }
.transfer-choice-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.transfer-choice-tabs button { min-height: 42px; border: 1px solid #e5c9ca; border-radius: 9px; background: #fff; color: #714c45; font: inherit; font-size: 12px; font-weight: 800; }
.transfer-choice-tabs button[aria-pressed='true'] { border-color: #c86187; background: #fff0f5; color: #8d3e5c; }
.transfer-bank { margin-bottom: 14px; padding: 18px; border: 1px solid #e8d6d4; border-radius: 12px; background: #fff9f8; }
.transfer-bank h2 { margin: 0 0 14px; color: #51342c; font-size: 17px; }
.transfer-bank p { margin: 8px 0; color: #685149; font-size: 13px; }
.transfer-bank p strong { margin-left: 6px; color: #3e2a24; }
.transfer-bank small { display: block; color: #92776f; font-size: 11px; line-height: 1.5; }
.transfer-bank-number { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 15px 0; padding: 14px; border: 1px solid #eedbd5; border-radius: 9px; background: #fff; }
.transfer-bank-number strong { display: block; color: #412b24; font-size: 21px; letter-spacing: .03em; overflow-wrap: anywhere; }
.transfer-bank-number button { padding: 9px 12px; border: 1px solid #d78aa0; border-radius: 8px; background: #fff; color: #9b3d61; font: inherit; font-size: 12px; font-weight: 800; }
.transfer-bank-copy-status { min-height: 1em; color: #397348 !important; }
.transfer-bank-empty { padding: 12px; border-radius: 8px; background: #f5eeeb; }
.payment-topnav { display: flex; justify-content: flex-end; margin-bottom: 13px; }
.payment-topnav a { padding: 9px 13px; border: 1px solid #e7c8c9; border-radius: 9px; color: #8d4962; background: #fff; font-size: 12px; font-weight: 800; text-decoration: none; }
.slip-field { border: 1px solid #e8d6d4; border-radius: 12px; padding: 16px; margin-bottom: 22px; background: #fff9f8; }
.slip-field[hidden] { display: none; }
.slip-field label { display: block; color: #4f3029; font-size: 14px; font-weight: 800; margin-bottom: 9px; }
.slip-field input { width: 100%; max-width: 100%; font-size: 12px; }
.slip-filename { font-size: 12px; color: #8a5364; margin: 8px 0 0; overflow-wrap: anywhere; }
.submit-button:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.slip-slot { padding: 11px; border: 1px solid #efdadb; border-radius: 9px; background: #fff7f8; color: #7b5b59; font-size: 12px; }
.slip-slot strong { display: block; margin-bottom: 8px; color: #5d3b33; }
.slip-preview { display: block; width: min(100%, 260px); max-height: 340px; object-fit: contain; border: 1px solid #e5cccc; border-radius: 7px; }
.payment-evidence { color: #6b453b !important; font-weight: 700; }
.summary-next { margin-top: 19px; }
.shop-topbar { min-height: 72px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.profile-link { min-width: 60px; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #764b45; font-size: 11px; font-weight: 800; text-decoration: none; }
.profile-link:hover { color: #ae5573; }
.cart-icon-link { position: relative; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid #efd9d4; border-radius: 50%; color: #6b4236; background: #fff; box-shadow: 0 4px 15px #6b423611; }
.cart-icon-link:hover { background: #fff0f2; }
.cart-icon-link { cursor: pointer; }
.cart-next button.primary-link { font-family: inherit; cursor: pointer; }
.cart-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 4px; border-radius: 50%; background: #e781a3; color: white; font-size: 10px; font-weight: 800; }
.cart-badge[hidden] { display: none; }
.cart-backdrop { position: fixed; inset: 0; z-index: 20; background: #2c1d1ba6; }
.cart-drawer { position: fixed; right: 0; top: 0; z-index: 21; width: min(420px, 92vw); height: 100dvh; display: flex; flex-direction: column; padding: 24px 22px max(18px, env(safe-area-inset-bottom)); background: #fffaf7; box-shadow: -18px 0 45px #2f1b1b35; color: #442d28; }
.cart-backdrop[hidden], .cart-drawer[hidden] { display: none; }
.cart-drawer:not([hidden]) { animation: cart-slide-in .18s ease-out; }
@keyframes cart-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .cart-drawer:not([hidden]) { animation: none; } }
body.cart-drawer-open { overflow: hidden; }
.cart-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cart-drawer-head h2 { margin: 5px 0 0; font-size: 27px; }
.cart-close { width: 38px; height: 38px; border: 1px solid #ead9d4; border-radius: 50%; background: white; color: #5b3932; font-size: 27px; line-height: 1; cursor: pointer; }
.cart-drawer-count { margin: 16px 0 9px; color: #917a74; font-size: 12px; }
.cart-drawer-items { flex: 1; min-height: 0; overflow-y: auto; border-top: 1px solid #ecdcd6; }
.cart-drawer-item { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid #ecdcd6; }
.order-product-image { display: block; flex: none; width: 64px; height: 64px; object-fit: contain; border: 1px solid #eaded9; border-radius: 10px; background: #fff; }
.cart-line { align-items: flex-start; gap: 10px; }
.cart-line-product { display: flex; align-items: flex-start; flex: 1 1 auto; min-width: 0; gap: 11px; }
.cart-line-product .order-product-image { width: 56px; height: 56px; }
.cart-line-product span { min-width: 0; overflow-wrap: anywhere; }
.cart-line > strong { flex: none; white-space: nowrap; }
.cart-drawer-item strong { display: block; font-size: 14px; }
.cart-drawer-item small { display: block; margin-top: 5px; color: #917a74; font-size: 11px; }
.cart-drawer-item-main { flex: 1 1 auto; min-width: 0; }
.cart-drawer-actions { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.cart-drawer-qty { display: flex; align-items: center; border: 1px solid #dec6bc; border-radius: 9px; background: white; }
.cart-drawer-qty button { width: 34px; height: 34px; border: 0; background: transparent; color: #714439; font: inherit; font-size: 19px; cursor: pointer; }
.cart-drawer-qty button:disabled { color: #c7b8b2; cursor: default; }
.cart-drawer-qty output { min-width: 26px; text-align: center; font-size: 13px; font-weight: 800; }
.cart-remove { position: absolute; right: 0; bottom: 16px; width: 34px; height: 34px; border: 1px solid #e6d4cf; border-radius: 50%; background: white; color: #99526b; font: inherit; font-size: 21px; line-height: 1; cursor: pointer; }
.cart-remove:hover { background: #fff0f3; }
.cart-drawer-item > span { flex: 0 0 auto; font-size: 14px; font-weight: 800; }
.cart-drawer-empty { padding: 28px 0; color: #917a74; font-size: 14px; }
.cart-drawer-foot { padding-top: 17px; border-top: 1px solid #ecdcd6; }
.cart-drawer-subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 17px; font-weight: 800; }
.cart-drawer-subtotal strong { font-size: 23px; }
.cart-checkout { text-decoration: none; font-family: inherit; }
.cart-checkout[hidden] { display: none; }
.cart-continue { width: 100%; margin-top: 11px; border: 0; background: transparent; padding: 10px; color: #ab4d70; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.catalog-page .section-heading { padding-top: 4px; }
.catalog-page .section-heading h1 { margin-bottom: 16px; }
.catalog-page .product-grid { margin-top: 12px; }
.catalog-page footer a, footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 850px) {
  .payment-grid { grid-template-columns: 1fr; }
  .site-header { padding: 17px 28px; }
  .hero { grid-template-columns: 1fr 1fr; gap: 24px; padding: 38px 28px 48px; min-height: 410px; }
  .hero h1 { font-size: clamp(32px, 4.8vw, 46px); }
  .hero-art { min-height: 300px; }
  .benefit-inner { padding-top: 16px; padding-bottom: 16px; }
  .benefit-inner > div { gap: 8px; }
  .benefit-inner span { width: 35px; height: 35px; font-size: 19px; }
  .benefit-inner strong { font-size: 12px; }
  .benefit-inner small { font-size: 10px; }
}
@media (max-width: 600px) {
  .payment-total-banner { padding: 17px 18px; margin: 17px 0; }
  .payment-total-banner strong { width: 100%; margin-left: 0; font-size: 38px; }
  .cart-drawer { padding: 20px 18px max(16px, env(safe-area-inset-bottom)); }
  .cart-drawer-item { gap: 10px; }
  .cart-drawer-item .order-product-image { width: 56px; height: 56px; }
  .cart-line-product { gap: 9px; }
  .cart-line-product .order-product-image { width: 50px; height: 50px; }
  .payment-page { padding-top: 26px; padding-bottom: 46px; }
  .payment-page h1 { font-size: 29px; }
  .payment-grid .checkout-form, .payment-grid .order-summary { padding: 18px; }
  .site-header { padding: 14px 18px; }
  .main-nav { overflow-x: auto; gap: 0; }
  .nav-button { flex: 1 0 auto; padding: 9px 11px; }
  .hero { grid-template-columns: 1fr; padding: 34px 18px 28px; gap: 25px; }
  .hero h1 { font-size: clamp(34px, 9vw, 45px); }
  .hero p { line-height: 1.7; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .primary-link, .secondary-link { min-height: 47px; font-size: 11px; gap: 4px; padding: 9px 10px; }
  .hero-art { min-height: 220px; border-radius: 20px; }
  .halo { height: 260px; width: 260px; }
  .art-card { height: 178px; width: 164px; padding: 14px; }
  .art-card strong { font-size: 23px; }
  .art-paw { font-size: 27px; }
  .art-caption { font-size: 10px; }
  .mini-note { font-size: 9px; padding: 9px; }
  .benefit-inner { grid-template-columns: 1fr 1fr 1fr; padding: 13px 8px; }
  .benefit-inner > div { display: block; text-align: center; padding: 0 4px; }
  .benefit-inner span { margin: 0 auto 4px; width: 32px; height: 32px; font-size: 17px; }
  .benefit-inner strong { font-size: 10px; }
  .benefit-inner small { font-size: 9px; line-height: 1.3; }
  .section-heading { padding-top: 38px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .product-art { height: 145px; }
  .catalog-page .product-art { height: 190px; }
  .catalog-page .product-art img { padding: 8px; }
  .mock-bag { transform: scale(.72) rotate(-4deg); }
  .mock-bottle { transform: scale(.72) rotate(-7deg); }
  .product-card:nth-child(2) .mock-bottle { transform: scale(.72) rotate(7deg); }
  .product-body { padding: 12px; }
  .product-body h3 { font-size: 15px; line-height: 1.35; min-height: 40px; }
  .product-body p { min-height: 33px; }
  .product-foot { display: block; margin-top: 12px; }
  .product-price { display: block; margin-bottom: 9px; font-size: 17px; }
  .qty-control { width: max-content; }
  .qty-control button { min-width: 36px; min-height: 36px; }
  .footer-inner { padding-top: 24px; padding-bottom: 24px; }
  .shop-topbar { position: sticky; top: 0; z-index: 4; min-height: 58px; background: #fffaf7f2; backdrop-filter: blur(8px); }
  .cart-icon-link { width: 42px; height: 42px; }
  .catalog-page .section-heading { padding-top: 9px; }
  .cart-next { display: none; }
  .checkout-page .checkout-wrap { padding-top: 26px; }
  .checkout-page .checkout-head h1 { font-size: 29px; }
}

.payment-grid[hidden], .payment-total-banner[hidden], .profile-panel[hidden] { display: none; }
.receipt-card { max-width: 760px; margin: 22px auto 40px; padding: 26px; border: 1px solid #d8ead8; background: #fff; box-shadow: 0 12px 30px #62413210; }
.receipt-card .receipt-confirmation { color: #168b3b; font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.receipt-card > p { color: #523a32; }
.receipt-section { border-top: 1px solid #ead9d2; padding: 18px 0; margin-top: 18px; }
.receipt-section h2 { color: #50332c; font-size: 16px; margin: 0 0 10px; }
.receipt-section p { margin: 0; color: #6f5a50; line-height: 1.8; overflow-wrap: anywhere; }
.receipt-section .summary-total { margin-top: 12px; }
.receipt-payment { padding: 12px 14px; border-radius: 9px; background: #fff4f1; }
.receipt-track-link { display: inline-flex !important; justify-content: center; min-width: 200px; padding: 12px 18px; border-radius: 9px; background: #15a544; color: #fff !important; text-decoration: none; }
.profile-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin: 22px auto 38px; border: 1px solid #eadbd5; background: #fff; }
.profile-menu-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 170px; padding: 25px; border: 0; border-right: 1px solid #eadbd5; border-bottom: 1px solid #eadbd5; background: #fff; color: #49322c; text-align: left; cursor: pointer; }
.profile-menu-card:nth-child(even) { border-right: 0; }
.profile-menu-card:nth-last-child(-n+2) { border-bottom: 0; }
.profile-menu-card:hover { background: #fff6f4; }
.profile-menu-card svg { width: 30px; height: 30px; margin-bottom: 8px; }
.profile-menu-card strong { font-size: 17px; }
.profile-menu-card span { font-size: 12px; line-height: 1.5; color: #87746c; }
.profile-menu[hidden], #profile-content[hidden] { display: none; }
.profile-back { display: inline-flex; margin: 3px 0 17px; padding: 7px 0; border: 0; background: transparent; color: #b35676; font-size: 13px; font-weight: 800; }
.profile-back:hover { text-decoration: underline; }
.profile-panel { max-width: 760px; min-height: 300px; }
.profile-name-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.profile-address-form label small { color: #8d766d; font-weight: 400; }
.profile-pet-preview { width: 128px; height: 128px; object-fit: cover; border-radius: 14px; border: 1px solid #e8d4cc; }
.profile-interests { border: 1px solid #ead9d2; border-radius: 10px; padding: 12px; }
.profile-interests legend { font-weight: 800; color: #684b42; padding: 0 6px; }
#profile-interest-options { display: grid; gap: 10px; }
#profile-interest-options label { display: flex; align-items: start; gap: 9px; font-weight: 500; }
#profile-interest-options input { width: auto; margin: 2px 0 0; accent-color: #cf6488; }
.profile-track-link { display: inline-block; margin-top: 22px; padding: 12px 16px; border-radius: 9px; background: #15a544; color: #fff; font-weight: 800; font-size: 13px; }
.profile-lookup { max-width: none; margin-top: 18px; box-shadow: none; }
.profile-lookup .dark-button { white-space: nowrap; }
#profile-track-orders .profile-track-order { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; width: 100%; padding: 11px 12px; border: 1px solid #ead7d0; border-radius: 8px; background: #fffaf8; text-align: left; overflow-wrap: anywhere; font-size: 12px; color: #80534b; cursor: pointer; }
#profile-track-orders .profile-track-order:hover { background: #fff0f2; }
#profile-track-orders .profile-track-order span { color: #78665d; }
#profile-track-orders .profile-track-order .customer-status-review { color: #1f1f1f; }
#profile-track-orders .profile-track-order .customer-status-awaiting { color: #49332e; }
#profile-track-orders .profile-track-order .customer-status-cancelled { color: #b32338; }
#profile-track-orders .profile-track-order .customer-status-confirmed { color: #168042; }
#profile-track-orders .profile-track-order .profile-cancel-reason { flex-basis: 100%; color: #a12d3d; font-weight: 700; }
.admin-sound-status { margin: -10px 0 20px; padding: 10px 14px; border-radius: 9px; background: #fff3e9; color: #765444; font-size: 12px; }
@media (max-width: 600px) {
  .profile-menu-card { min-height: 145px; padding: 16px; }
  .profile-menu-card strong { font-size: 14px; }
  .profile-menu-card span { font-size: 11px; }
  .profile-name-row { grid-template-columns: 1fr; }
  .receipt-card { padding: 18px; }
  .admin-heading-actions { max-width: 220px; }
}

.admin-page { padding-top: 30px; padding-bottom: 70px; }
.admin-tabs, .catalog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.admin-tabs button, .catalog-filters button { border: 1px solid #e5c9ca; border-radius: 999px; background: #fff; color: #714c45; padding: 9px 16px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-tabs button.active, .catalog-filters button.active { background: #9b486b; border-color: #9b486b; color: #fff; }
.catalog-empty { grid-column: 1 / -1; color: #876f68; padding: 20px 0; }
.admin-page [hidden] { display: none !important; }
.admin-cancel-dialog { width: min(440px, calc(100vw - 32px)); border: 1px solid #ead4ce; border-radius: 16px; padding: 24px; box-shadow: 0 24px 80px #26140f40; color: #51372f; }
.admin-cancel-dialog::backdrop { background: #281a1a99; }
.admin-cancel-dialog form { display: grid; gap: 12px; }
.admin-cancel-dialog h2 { margin: 0; font-size: 22px; }
.admin-cancel-dialog p { margin: 0; color: #78665d; font-size: 13px; }
.admin-cancel-dialog label { font-size: 12px; font-weight: 800; }
.admin-cancel-dialog textarea { width: 100%; resize: vertical; border: 1px solid #decac2; border-radius: 9px; padding: 10px; font: inherit; }
.admin-cancel-actions { display: flex; justify-content: flex-end; gap: 8px; }
.admin-cancel-actions button { border: 1px solid #decac2; border-radius: 9px; background: #fff; padding: 9px 14px; font: inherit; cursor: pointer; }
.admin-cancel-actions button[type='submit'] { background: #9b486b; border-color: #9b486b; color: #fff; }
.admin-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 24px; }
.admin-heading h1 { color: var(--mj-dark); font-size: clamp(30px, 3.5vw, 44px); margin: 8px 0; }
.admin-heading p, .admin-help { color: #876f68; font-size: 13px; line-height: 1.6; margin: 0; }
.admin-refresh { border: 1px solid #e7c8c9; background: #fff; color: #694136; border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; }
.admin-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.admin-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-stats > div { border: 1px solid #efded8; border-radius: 13px; background: #fff; padding: 16px 18px; }
.admin-bank-panel { max-width: 760px; margin-bottom: 20px; }
.admin-bank-panel h2 { margin: 0 0 10px; color: #4c3028; font-size: 21px; }
.admin-bank-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.admin-bank-form label { display: grid; gap: 6px; color: #73594f; font-size: 12px; font-weight: 800; }
.admin-bank-form label:nth-of-type(3) { grid-column: 1 / -1; }
.admin-bank-form input { width: 100%; min-width: 0; padding: 11px; border: 1px solid #e7d4cd; border-radius: 9px; background: #fffaf7; color: #49332e; font: inherit; font-size: 13px; }
.admin-bank-form button { width: fit-content; padding: 11px 16px; border: 0; border-radius: 9px; background: #9b486b; color: #fff; font: inherit; font-size: 12px; font-weight: 800; }
.admin-bank-form [role='status'] { align-self: center; margin: 0; font-size: 12px; font-weight: 800; }
.admin-bank-form [data-state='error'] { color: #a43651; }
.admin-bank-form [data-state='success'] { color: #357943; }
@media (max-width: 600px) { .admin-bank-form { grid-template-columns: 1fr; } .admin-bank-form label:nth-of-type(3) { grid-column: auto; } }
.admin-stats span { display: block; color: #8b716a; font-size: 12px; }
.admin-stats strong { display: block; color: #4e3029; font-size: 28px; margin-top: 5px; }
.admin-page .admin-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
.admin-page .admin-box { min-width: 0; }
.admin-tools { display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 10px; margin-bottom: 6px; }
.admin-tools label { color: #73594f; font-size: 11px; font-weight: 800; margin-bottom: 5px; }
.admin-tools input, .admin-tools select { grid-row: 2; width: 100%; min-width: 0; border: 1px solid #e7d4cd; border-radius: 9px; background: #fffaf7; padding: 10px 11px; color: #49332e; font: inherit; font-size: 12px; }
.admin-tools label[for="admin-filter"], .admin-tools select { grid-column: 2; }
.admin-date-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; padding: 10px 0 18px; border-bottom: 1px solid #eadad4; }
.admin-date-tools label { display: grid; gap: 5px; color: #73594f; font-size: 11px; font-weight: 800; }
.admin-date-tools input { border: 1px solid #e7d4cd; border-radius: 9px; background: #fffaf7; padding: 9px 10px; color: #49332e; font: inherit; font-size: 12px; }
.admin-date-tools button { border: 1px solid #dfc6c0; border-radius: 9px; background: #fff; padding: 10px 12px; color: #694136; font: inherit; font-size: 11px; cursor: pointer; }
.admin-date-error { color: #a43651; font-size: 12px; font-weight: 800; }
.admin-help { margin: 0 0 12px; }
#admin-orders { display: grid; gap: 15px; margin-top: 18px; }
.admin-page .admin-order, .admin-page .admin-order:first-child { min-width: 0; padding: 18px; border: 1px solid #ead4ce; border-left: 4px solid #d77e9e; border-radius: 13px; background: #fffaf8; box-shadow: 0 5px 18px #633d3010; }
.admin-page .admin-order:has(.status-pill.shipped) { border-left-color: #77a77b; }
.admin-page .admin-order:has(.status-pill.cancelled) { border-left-color: #ad8c87; }
.admin-page .admin-order + .admin-order { margin-top: 0; }
.admin-page .admin-order .order-title { padding-bottom: 9px; border-bottom: 1px solid #ecdfd9; }
.admin-page .admin-order .order-title strong { overflow-wrap: anywhere; }
.admin-order-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin-order-top > strong { color: #4b2d27; font-size: 19px; }
.admin-order-detail { border: 1px solid #f0ded7; border-radius: 10px; background: #fffaf7; margin: 14px 0; }
.admin-order-detail summary { padding: 11px 13px; color: #9e4e6b; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-detail-content { padding: 0 13px 13px; }
.admin-detail-content h3 { color: #51372f; font-size: 12px; margin: 12px 0 5px; }
.admin-detail-content p { margin: 0 0 10px; overflow-wrap: anywhere; }
.admin-detail-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; color: #5e4d45; font-size: 12px; }
.admin-detail-row strong { white-space: nowrap; }
.admin-detail-total { border-top: 1px solid #e6d3ca; margin-top: 6px; padding-top: 11px; font-weight: 800; }
.admin-track-link { display: block; width: fit-content; color: #af5272; font-size: 12px; font-weight: 800; margin-top: 16px; }
.admin-audit-note { border-left: 3px solid #e2afc1; padding-left: 9px; overflow-wrap: anywhere; }
.admin-review-label { display: block; margin-top: 14px; color: #61463c; font-size: 12px; font-weight: 800; }
.admin-review-label select { display: block; width: 100%; margin-top: 7px; border: 1px solid #decac2; border-radius: 9px; background: #fffaf7; padding: 10px 11px; color: #49332e; font: inherit; }
.admin-rejected-note { color: #9b4e54 !important; font-weight: 800; }
.admin-order button:disabled { opacity: .45; cursor: not-allowed; }
.admin-product-image { width: 46px; height: 46px; flex: none; border-radius: 8px; object-fit: contain; background: #fff7f5; border: 1px solid #efddd7; }
.admin-product { flex-wrap: wrap; }
.admin-product > div { min-width: 0; flex: 1; }
.admin-product .admin-product-actions { flex-basis: 100%; }
.admin-product strong { overflow-wrap: anywhere; }
.admin-product-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-product-actions button { border: 1px solid #e5c9ca; border-radius: 8px; background: #fff; color: #714c45; padding: 7px 10px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.admin-product-actions .admin-featured[aria-pressed='true'] { background: #fff0c4; border-color: #dfb76e; }
.admin-product-category { display: grid; gap: 4px; flex: none; color: #73594f; font-size: 11px; font-weight: 800; }
.admin-product-category select { border: 1px solid #e7d4cd; border-radius: 8px; padding: 6px 8px; background: #fffaf7; color: #49332e; font: inherit; }
.admin-product-remove, .admin-removed-product button { border: 1px solid #e9b9c3; border-radius: 9px; background: #fff; color: #ad4965; padding: 7px 10px; font-size: 11px; font-weight: 800; cursor: pointer; }
.admin-removed-products { border-top: 1px solid #eadad4; padding: 14px 0; }
.admin-removed-products[hidden] { display: none; }
.admin-removed-products h3 { margin: 0 0 10px; font-size: 13px; color: #61463c; }
.admin-removed-product { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; color: #78665d; font-size: 12px; }
.admin-add-product { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid #eadad4; }
.admin-add-product h3 { margin: 0; color: #4e3029; font-size: 15px; }
.admin-add-product label { display: grid; gap: 5px; color: #73594f; font-size: 11px; font-weight: 800; }
.admin-add-product input, .admin-add-product select { width: 100%; min-width: 0; border: 1px solid #e7d4cd; border-radius: 9px; background: #fffaf7; padding: 10px; color: #49332e; font: inherit; font-size: 12px; }
.admin-add-product button { width: fit-content; border: 0; border-radius: 9px; background: #18a744; color: #fff; padding: 10px 15px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-add-product small { color: #8b716a; line-height: 1.5; }
#admin-product-error { margin: 0; color: #a43651; font-size: 12px; font-weight: 800; }
.profile-page { padding-top: 42px; padding-bottom: 75px; min-height: 68vh; }
.profile-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; }
.profile-heading h1 { color: var(--mj-dark); margin: 7px 0; font-size: clamp(30px, 3vw, 42px); }
.profile-heading p { margin: 0; color: #876f68; font-size: 13px; }
.profile-heading a { border: 1px solid #e7c8c9; border-radius: 9px; background: #fff; color: #8d4962; padding: 10px 13px; white-space: nowrap; text-decoration: none; font-size: 12px; font-weight: 800; }
.profile-warning { margin: 22px 0; padding: 12px 15px; border: 1px solid #eed0cd; border-radius: 10px; background: #fff5f3; color: #884c4b; font-size: 12px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.profile-grid .admin-box { min-width: 0; border: 1px solid #f0e3dc; border-radius: 16px; background: #fff; box-shadow: 0 8px 25px #77533a10; }
.profile-grid h2 { margin: 0 0 8px; color: var(--mj-dark); font-size: 20px; }
.profile-address-form { display: grid; gap: 10px; margin-top: 18px; }
.profile-address-form label { display: grid; gap: 5px; color: #73594f; font-size: 12px; font-weight: 800; }
.profile-address-form input, .profile-address-form select { width: 100%; min-width: 0; border: 1px solid #e7d4cd; border-radius: 9px; background: #fffaf7; padding: 11px; color: #49332e; font: inherit; font-size: 13px; }
.profile-address-form button { width: fit-content; border: 0; border-radius: 9px; background: #18a744; color: #fff; padding: 11px 16px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.profile-message-error { color: #a43651; font-size: 12px; }
.profile-message-ok { color: #357943; font-size: 12px; }
.profile-orders { display: grid; gap: 10px; margin-top: 18px; }
.profile-order { border: 1px solid #ead7d0; border-radius: 11px; background: #fffaf8; }
.profile-order summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px; cursor: pointer; color: #49332e; }
.profile-order summary span { min-width: 0; }
.profile-order summary span strong { display: block; overflow-wrap: anywhere; font-size: 12px; }
.profile-order summary small { display: block; margin-top: 5px; color: #907168; font-size: 11px; }
.profile-order .profile-order-cancel-reason { color: #a12d3d; font-weight: 700; }
.profile-order-detail { border-top: 1px solid #ead7d0; padding: 13px 15px 16px; color: #5e4d45; font-size: 12px; }
.profile-order-detail p { line-height: 1.6; overflow-wrap: anywhere; }
.profile-order-detail h3 { font-size: 12px; }
.profile-order-product { align-items: flex-start; padding: 9px 0; }
.profile-order-product-info { display: flex; align-items: flex-start; flex: 1 1 auto; min-width: 0; gap: 10px; }
.profile-order-product-info .order-product-image { width: 52px; height: 52px; }
.profile-order-product-info span { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
.catalog-page .product-art { height: 190px; }
.catalog-page .product-body { display: flex; flex-direction: column; padding: 11px 13px; }
.catalog-page .product-body h3 { margin: 0; min-height: 46px; font-size: 16px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.catalog-page .product-foot { display: flex; flex-direction: column; align-items: stretch; margin-top: 7px; gap: 7px; }
.catalog-page .add-to-cart { align-self: center; }
.catalog-page .product-price small { display: none; }
.add-to-cart { border: 0; border-radius: 9px; background: #18a744; color: #fff; padding: 9px 11px; min-height: 38px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.add-to-cart:hover { background: #118638; }
.add-to-cart:disabled { background: #ddd0ca; color: #69574f; cursor: not-allowed; }
.cart-reorder-notice { margin: 0 0 10px; padding: 10px 12px; border-radius: 9px; background: #fff0f2; color: #7b4256; font-size: 12px; line-height: 1.5; }
.buy-again { margin-top: 14px; border: 0; border-radius: 9px; padding: 11px 15px; background: #18a744; color: #fff; font: inherit; font-size: 12px; font-weight: 800; }
.buy-again:hover { background: #118638; }
#profile-track-orders .profile-track-order { display: block; }
#profile-track-orders .profile-track-order > strong { display: block; }
#profile-track-orders .profile-track-meta, .profile-order summary .profile-order-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: baseline; gap: 10px; margin-top: 5px; }
#profile-track-orders .profile-track-meta .customer-status, .profile-order-meta .customer-status { font-weight: 800; }
#profile-track-orders .profile-track-order .profile-cancel-reason { display: block; margin-top: 6px; }
.sales-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 12px; }
.sales-stats > div { padding: 16px; border: 1px solid #efded8; border-radius: 12px; background: #fff9f7; }
.sales-stats span { display: block; color: #765c54; font-size: 12px; }
.sales-stats strong { display: block; margin-top: 5px; color: #4e3029; font-size: 24px; overflow-wrap: anywhere; }
.admin-sales-box h3 { margin: 22px 0 10px; font-size: 16px; color: #4e3029; }
.sales-product-row { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #eee0db; padding: 12px 0; font-size: 13px; }
.sales-product-row strong { white-space: nowrap; color: #4e3029; }
@media (max-width: 850px) {
  .admin-page .admin-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .catalog-page .product-art { height: 125px; }
  .catalog-page .product-art img { padding: 5px; }
  .catalog-page .product-body { padding: 8px; }
  .catalog-page .product-body h3 { font-size: 13px; min-height: 35px; }
  .catalog-page .product-foot { gap: 5px; margin-top: 5px; }
  .catalog-page .product-price { font-size: 18px; }
  .catalog-page .add-to-cart { width: auto; max-width: 100%; font-size: 11px; min-height: 34px; white-space: normal; text-align: center; }
  .sales-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-stats > div { padding: 12px; }
  .sales-stats strong { font-size: 20px; }
  .admin-heading { align-items: start; }
  .admin-heading-actions { max-width: 128px; }
  .admin-heading p { font-size: 11px; }
  .admin-refresh { white-space: normal; max-width: 98px; }
  .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .admin-stats > div { padding: 12px; }
  .admin-stats strong { font-size: 23px; }
  .admin-tools { grid-template-columns: minmax(0, 1fr) 115px; }
  .profile-heading { display: block; }
  .profile-heading a { display: inline-block; margin-top: 15px; }
  .profile-lookup { grid-template-columns: 1fr; }
  .admin-product-actions { flex-direction: column; }
}

/* Storefront: keep the established shopping flow while giving it a clear brand hierarchy. */
body[data-page='shop'] { background: #fffbf8; }
.shop-header { background: #fff; border-bottom: 1px solid #f0e4df; }
.shop-topbar { min-height: 88px; justify-content: space-between; }
.shop-brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; text-decoration: none; color: #432b24; }
.shop-brand-mark { font-family: Georgia, serif; font-size: 48px; font-weight: 900; letter-spacing: -.09em; line-height: .85; white-space: nowrap; }
.shop-brand-mark span { color: #e781a3; }
.shop-brand-copy { display: grid; gap: 3px; padding-left: 12px; border-left: 1px solid #e5cfc5; }
.shop-brand-copy strong { font-size: 18px; letter-spacing: .11em; line-height: 1; }
.shop-brand-copy small { color: #8f756b; font-size: 10px; font-weight: 600; white-space: nowrap; }
.shop-actions { display: flex; align-items: center; gap: 13px; }
.shop-header .profile-link, .shop-header .cart-icon-link { min-width: 54px; min-height: 58px; padding: 5px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: #6f5148; font-size: 10px; font-weight: 700; }
.shop-header .profile-link:hover, .shop-header .cart-icon-link:hover { background: #fff3f2; color: #aa5673; }
.shop-header .cart-icon-link { width: auto; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.shop-header .cart-label { line-height: 1; }
.shop-header .cart-badge { top: 0; right: 0; }
.shop-hero { padding-top: 25px; padding-bottom: 0; }
.shop-hero-inner { display: grid; grid-template-columns: 1fr .88fr; min-height: 294px; overflow: hidden; border: 1px solid #efd9d5; border-radius: 24px; background: linear-gradient(105deg, #fff3f1 0%, #f9e8e7 54%, #f3ddd7 100%); }
.shop-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 32px 0 32px 52px; position: relative; z-index: 1; }
.shop-hero-kicker { color: #ad6076; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.shop-hero h1 { margin: 12px 0 8px; color: #422a22; font-size: clamp(31px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -.035em; }
.shop-hero h1 em { color: #9e5e72; font-style: normal; }
.shop-hero p { max-width: 420px; margin: 0 0 16px; color: #72584f; font-size: 13px; line-height: 1.7; }
.shop-hero-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; color: #9e4d68; font-size: 13px; font-weight: 800; border-bottom: 1px solid #ba7890; }
.shop-hero-link:hover { color: #72394d; }
.shop-hero-art { min-height: 294px; position: relative; overflow: hidden; }
.shop-hero-orbit { position: absolute; width: 290px; height: 290px; border: 1px solid #fff9; border-radius: 50%; right: 80px; top: 1px; box-shadow: 0 0 0 42px #fff2; }
.shop-hero-product { position: absolute; display: block; object-fit: contain; background: #fff; border: 7px solid #fff; border-radius: 15px; box-shadow: 0 16px 35px #75514929; }
.shop-hero-product-food { width: 190px; height: 226px; right: 68px; top: 32px; transform: rotate(7deg); }
.shop-hero-product-shampoo { width: 146px; height: 204px; right: 231px; top: 54px; transform: rotate(-9deg); }
.shop-hero-art-note { position: absolute; right: 19px; bottom: 18px; color: #8d615b; font-family: Georgia, serif; font-size: 12px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; text-align: right; }
.catalog-page .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding-top: 39px; margin-bottom: 16px; scroll-margin-top: 20px; }
.catalog-page .section-heading h2 { margin: 5px 0 3px; color: #422a22; font-size: clamp(25px, 2.7vw, 35px); line-height: 1.25; }
.catalog-page .section-heading p { margin: 0; color: #89726a; font-size: 12px; }
.catalog-page .count-pill { flex: none; padding: 8px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.catalog-page .catalog-filters { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-top: 2px; padding-bottom: 10px; margin-bottom: 10px; scrollbar-width: thin; }
.catalog-page .catalog-filters button { flex: none; min-height: 37px; padding: 8px 15px; border-color: #e9d8d1; color: #745c54; box-shadow: 0 1px 2px #5d40300d; }
.catalog-page .catalog-filters button.active { background: #653f37; border-color: #653f37; color: #fff; }
.catalog-page .product-grid { margin-top: 4px; gap: 17px; }
.catalog-page .product-card { min-width: 0; overflow: hidden; border: 1px solid #ecdfd8; border-radius: 17px; background: #fff; box-shadow: 0 6px 22px #5d41340d; transition: transform .16s, box-shadow .16s; }
.catalog-page .product-card:hover { transform: translateY(-3px); box-shadow: 0 15px 30px #5d41341a; }
.catalog-page .product-art { height: 210px; background: #f5ece7; border-bottom: 1px solid #f1e5df; }
.catalog-page .product-card:nth-child(2) .product-art { background: #f8e8ed; }
.catalog-page .product-card:nth-child(3) .product-art { background: #f0e8df; }
.catalog-page .product-art img { width: 100%; height: 100%; padding: 16px; object-fit: contain; mix-blend-mode: multiply; }
.catalog-page .product-art::after { top: 11px; left: 11px; padding: 4px 9px; background: #fffdfb; color: #ab5c77; border: 1px solid #f0d6dc; font-size: 10px; }
.catalog-page .product-body { padding: 16px; min-height: 172px; }
.catalog-page .product-category { display: block; margin-bottom: 5px; color: #ab6077; font-size: 10px; font-weight: 900; letter-spacing: .05em; }
.catalog-page .product-body h3 { min-height: 43px; margin: 0; font-size: 16px; line-height: 1.36; }
.catalog-page .product-subtitle { margin: 2px 0 0; color: #8e7971; font-size: 11px; line-height: 1.4; }
.catalog-page .product-foot { gap: 10px; margin-top: auto; padding-top: 13px; }
.catalog-page .product-price { font-size: 22px; line-height: 1; }
.catalog-page .product-price small { display: block; margin-top: 4px; color: #9b857c; font-size: 10px; font-weight: 500; }
.catalog-page .add-to-cart { align-self: stretch; min-height: 42px; padding: 9px 12px; border-radius: 10px; font-size: 12px; box-shadow: 0 4px 13px #148c3420; }
.catalog-page .add-to-cart:disabled { box-shadow: none; }
.catalog-page .cart-next { margin-top: 24px; padding-top: 17px; padding-bottom: 17px; border: 1px solid #efd9d5; background: #fff4f1; box-shadow: 0 8px 22px #6942370a; }
@media (max-width: 850px) {
  .shop-hero-inner { grid-template-columns: 1fr .7fr; }
  .shop-hero-copy { padding-left: 28px; }
  .shop-hero-product-food { right: 30px; }
  .shop-hero-product-shampoo { right: 143px; }
}
@media (max-width: 600px) {
  .shop-topbar { min-height: 72px; padding-left: 18px; padding-right: 18px; }
  .shop-brand { gap: 6px; }
  .shop-brand-mark { font-size: 37px; }
  .shop-brand-copy { gap: 2px; padding-left: 8px; }
  .shop-brand-copy strong { font-size: 13px; }
  .shop-brand-copy small { max-width: 124px; white-space: normal; font-size: 8px; line-height: 1.2; }
  .shop-actions { gap: 2px; }
  .shop-header .profile-link, .shop-header .cart-icon-link { min-width: 42px; min-height: 52px; font-size: 9px; }
  .shop-header .profile-link svg, .shop-header .cart-icon-link svg { width: 23px; height: 23px; }
  .shop-hero { padding: 14px 18px 0; }
  .shop-hero-inner { display: block; min-height: 0; border-radius: 16px; background: linear-gradient(115deg, #fff2ef, #fae2e4); }
  .shop-hero-copy { padding: 21px 20px 22px; }
  .shop-hero-kicker { font-size: 9px; }
  .shop-hero h1 { margin: 8px 0 7px; font-size: clamp(26px, 8vw, 35px); }
  .shop-hero p { margin-bottom: 8px; font-size: 11px; line-height: 1.55; }
  .shop-hero-link { font-size: 11px; padding: 5px 0; }
  .shop-hero-art { display: none; }
  .catalog-page .section-heading { align-items: start; padding-top: 26px; margin-bottom: 12px; }
  .catalog-page .section-heading h2 { font-size: 23px; }
  .catalog-page .section-heading p { font-size: 10px; }
  .catalog-page .count-pill { margin-top: 23px; padding: 6px 7px; font-size: 9px; }
  .catalog-page .catalog-filters { margin-bottom: 5px; }
  .catalog-page .catalog-filters button { min-height: 35px; padding: 7px 12px; font-size: 11px; }
  .catalog-page .product-grid { gap: 9px; }
  .catalog-page .product-art { height: 140px; }
  .catalog-page .product-art img { padding: 8px; }
  .catalog-page .product-body { min-height: 166px; padding: 10px; }
  .catalog-page .product-category { margin-bottom: 3px; font-size: 9px; }
  .catalog-page .product-body h3 { min-height: 36px; font-size: 12px; }
  .catalog-page .product-subtitle { font-size: 10px; }
  .catalog-page .product-foot { gap: 7px; padding-top: 9px; }
  .catalog-page .product-price { font-size: 18px; }
  .catalog-page .product-price small { font-size: 9px; }
  .catalog-page .add-to-cart { width: 100%; min-height: 39px; padding: 7px 5px; font-size: 10px; }
  .catalog-page .cart-next { margin-top: 17px; }
}

/* Mobile-first storefront inspired by the supplied shop layout, using MJ KUDSON assets and colors. */
.shop-header { position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 12px #4a2f2510; }
.shop-header .shop-topbar.page-shell, .catalog-page .page-shell, body[data-page='shop'] footer .page-shell { max-width: 900px; }
.shop-topbar { min-height: 70px; gap: 18px; }
.shop-brand { flex: none; }
.shop-logo { display: block; width: 55px; height: 55px; object-fit: contain; border-radius: 9px; }
.shop-search { flex: 1; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #eadfd9; border-radius: 9px; background: #f8f6f4; color: #8c7870; }
.shop-search:focus-within { border-color: #ca7392; box-shadow: 0 0 0 3px #e781a322; background: #fff; }
.shop-search input { width: 100%; min-width: 0; height: 39px; border: 0; outline: 0; background: transparent; color: #422c25; font-size: 13px; }
.shop-search input::placeholder { color: #9d8d87; }
.shop-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shop-actions { flex: none; }
.shop-hero { padding-top: 8px; }
.shop-hero-inner { min-height: 207px; border-radius: 15px; }
.shop-hero-copy { padding: 20px 0 20px 34px; }
.shop-hero h2 { margin: 7px 0 5px; color: #422a22; font-size: clamp(27px, 3vw, 37px); line-height: 1.13; }
.shop-hero p { margin-bottom: 6px; }
.shop-hero-art { min-height: 207px; }
.shop-hero-orbit { width: 200px; height: 200px; right: 72px; top: 3px; }
.shop-hero-product-food { width: 140px; height: 165px; right: 52px; top: 22px; }
.shop-hero-product-shampoo { width: 110px; height: 153px; right: 164px; top: 29px; }
.shop-hero-art-note { font-size: 9px; right: 12px; bottom: 12px; }
.catalog-page .catalog-filters { display: flex; justify-content: flex-start; gap: 13px; margin-top: 17px; margin-bottom: 0; padding-bottom: 13px; border-bottom: 1px solid #efe5e0; scroll-margin-top: 82px; scrollbar-width: none; }
.catalog-page .catalog-filters::-webkit-scrollbar { display: none; }
.catalog-page .catalog-filters button, .catalog-page .catalog-filters button.active { display: flex; flex: 0 0 104px; flex-direction: column; align-items: center; gap: 7px; min-height: 0; padding: 5px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #65534c; font-size: 11px; font-weight: 700; line-height: 1.2; text-align: center; }
.catalog-page .catalog-filters button.active { color: #a04b6c; }
.catalog-page .category-thumb { display: grid; place-items: center; width: 74px; height: 74px; overflow: hidden; border: 2px solid #eadbd4; border-radius: 50%; background: #fff; transition: border-color .16s, transform .16s; }
.catalog-page .catalog-filters button:hover .category-thumb { transform: translateY(-2px); }
.catalog-page .catalog-filters button.active .category-thumb { border-color: #d66e94; box-shadow: 0 0 0 3px #e781a320; }
.catalog-page .category-thumb img { width: 100%; height: 100%; object-fit: contain; }
.catalog-page .category-symbol { background: #f8e9ec; color: #9b5672; font-size: 27px; letter-spacing: .05em; }
.catalog-page .section-heading { align-items: center; padding-top: 19px; margin-bottom: 9px; }
.catalog-page .section-heading h2 { margin: 2px 0; font-size: 20px; }
.catalog-page .section-heading .eyebrow { font-size: 9px; }
.catalog-page .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.catalog-page .product-card { display: flex; flex-direction: column; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.catalog-page .product-card:hover { transform: none; box-shadow: none; }
.catalog-page .product-art { height: auto; aspect-ratio: 1.2; overflow: hidden; border: 1px solid #eee2dc; border-radius: 13px; }
.catalog-page .product-art img { padding: 15px; }
.catalog-page .product-body { flex: 1; min-height: 0; padding: 10px 2px 13px; }
.catalog-page .product-category { margin-bottom: 4px; font-size: 10px; }
.catalog-page .product-body h3 { min-height: 0; font-size: 15px; line-height: 1.35; }
.catalog-page .product-subtitle { margin-top: 4px; }
.catalog-page .product-foot { gap: 8px; padding-top: 10px; }
.catalog-page .product-price { color: #c73f67; font-size: 22px; }
.catalog-page .add-to-cart { align-self: flex-start; width: min(100%, 210px); min-height: 38px; box-shadow: none; }
.catalog-page .cart-next { margin-top: 13px; }
@media (max-width: 600px) {
  .shop-header .shop-topbar.page-shell { min-height: 64px; gap: 7px; padding: 5px 12px; }
  .shop-logo { width: 47px; height: 47px; }
  .shop-search { gap: 5px; padding: 0 8px; }
  .shop-search svg { width: 16px; flex: none; }
  .shop-search input { height: 36px; font-size: 11px; }
  .shop-actions { gap: 0; }
  .shop-header .profile-link, .shop-header .cart-icon-link { min-width: 36px; min-height: 45px; padding: 3px; font-size: 8px; }
  .shop-header .profile-link svg, .shop-header .cart-icon-link svg { width: 21px; height: 21px; }
  .shop-hero { padding-top: 5px; }
  .shop-hero-inner { min-height: 0; }
  .shop-hero-copy { padding: 16px 17px; }
  .shop-hero h2 { font-size: 25px; }
  .shop-hero p { font-size: 10px; }
  .catalog-page .catalog-filters { gap: 6px; margin-top: 12px; padding-bottom: 8px; scroll-margin-top: 70px; }
  .catalog-page .catalog-filters button, .catalog-page .catalog-filters button.active { flex-basis: 78px; font-size: 10px; }
  .catalog-page .category-thumb { width: 61px; height: 61px; }
  .catalog-page .section-heading { padding-top: 15px; margin-bottom: 7px; }
  .catalog-page .section-heading h2 { font-size: 18px; }
  .catalog-page .count-pill { margin-top: 0; }
  .catalog-page .product-grid { gap: 10px; }
  .catalog-page .product-art { height: auto; aspect-ratio: 1; }
  .catalog-page .product-art img { padding: 7px; }
  .catalog-page .product-body { min-height: 0; padding: 8px 1px 12px; }
  .catalog-page .product-category { font-size: 9px; }
  .catalog-page .product-body h3 { min-height: 0; font-size: 12px; }
  .catalog-page .product-subtitle { font-size: 10px; }
  .catalog-page .product-foot { gap: 6px; padding-top: 8px; }
  .catalog-page .product-price { font-size: 18px; }
  .catalog-page .add-to-cart { align-self: center; width: 100%; min-height: 36px; font-size: 10px; }
}

/* Compact storefront listing: the product photo, name and price lead each tile. */
.catalog-page .section-heading { flex-wrap: wrap; padding-top: 24px; margin-bottom: 16px; }
.catalog-page .product-list-tools { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; }
.catalog-page .product-sort-label { display: inline-flex; align-items: center; gap: 7px; color: #715d54; font-size: 12px; font-weight: 700; white-space: nowrap; }
.catalog-page .product-sort-label select { min-height: 38px; padding: 6px 29px 6px 10px; border: 1px solid #e7d9d3; border-radius: 8px; background: #fff; color: #422c25; font-size: 12px; font-weight: 700; cursor: pointer; }
.catalog-page .count-pill { display: inline-block; padding: 0; border-radius: 0; background: transparent; color: #927f77; font-weight: 600; }
.catalog-page .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.catalog-page .product-art { aspect-ratio: 1; border-color: #eee9e5; border-radius: 12px; background: #faf7f5; }
.catalog-page .product-card:nth-child(n) .product-art { background: #faf7f5; }
.catalog-page .product-art img { padding: 7px; mix-blend-mode: normal; }
.catalog-page .product-art::after { content: none; }
.catalog-page .best-seller-badge { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 7px; border-radius: 5px; background: #d95f85; color: #fff; font-size: 10px; font-weight: 800; }
.catalog-page .product-body { padding: 9px 1px 4px; }
.catalog-page .product-body h3 { min-height: 2.7em; margin: 0; color: #382720; font-size: 14px; font-weight: 600; line-height: 1.35; }
.catalog-page .product-variant { display: block; margin-top: 3px; color: #745b51; font-size: 12px; font-weight: 700; }
.catalog-page .product-foot { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 7px; margin: 0; padding-top: 7px; }
.catalog-page .product-price { margin: 0; color: #d64369; font-size: 19px; font-weight: 800; line-height: 1.2; }
.catalog-page .product-price small { display: block; margin-top: 2px; color: #8c756d; font-size: 10px; font-weight: 600; }
.catalog-page .add-to-cart { display: inline-grid; flex: none; place-items: center; align-self: auto; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid #d9b9b1; border-radius: 9px; background: #fff; color: #684538; box-shadow: none; }
.catalog-page .add-to-cart:hover { background: #fceff2; border-color: #ca7b94; color: #9b4967; }
.catalog-page .add-to-cart:disabled { width: auto; max-width: 61%; padding: 5px 7px; border-color: #e6d9d4; background: #f4efec; color: #8a7870; font-size: 9px; white-space: normal; }
.catalog-page .sold-out .product-art img { opacity: .7; }
@media (max-width: 900px) { .catalog-page .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .catalog-page .section-heading { align-items: flex-end; padding-top: 20px; margin-bottom: 12px; }
  .catalog-page .section-heading h2 { font-size: 19px; }
  .catalog-page .product-list-tools { gap: 8px; }
  .catalog-page .product-sort-label { font-size: 10px; }
  .catalog-page .product-sort-label select { min-height: 34px; padding-left: 7px; font-size: 11px; }
  .catalog-page .count-pill { margin: 0; font-size: 10px; }
  .catalog-page .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .catalog-page .product-art { aspect-ratio: 1; }
  .catalog-page .product-art img { padding: 3px; }
  .catalog-page .product-body { padding: 7px 1px 3px; }
  .catalog-page .product-body h3 { min-height: 2.7em; font-size: 12px; }
  .catalog-page .product-variant { font-size: 10px; }
  .catalog-page .product-foot { gap: 5px; padding-top: 6px; }
  .catalog-page .product-price { font-size: 17px; }
  .catalog-page .product-price small { font-size: 9px; }
  .catalog-page .add-to-cart { width: 34px; height: 34px; min-height: 34px; }
  .catalog-page .add-to-cart:disabled { width: auto; font-size: 8px; }
}

/* Give the banner more room without changing the compact product grid. */
.catalog-page .shop-banner.page-shell { max-width: 1360px; }
.shop-banner { padding-top: 16px; }
.shop-banner [hidden] { display: none !important; }
.shop-banner-frame { position: relative; aspect-ratio: 2033 / 774; overflow: hidden; border: 1px solid #efded8; border-radius: 15px; background: #f8eee8; }
.shop-banner-track { display: flex; height: 100%; transition: transform 680ms cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.shop-banner-track img { display: block; min-width: 0; height: 100%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .shop-banner-track { transition: none; } }
.shop-banner-dots { display: flex; justify-content: center; gap: 7px; padding-top: 10px; }
.shop-banner-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d9c8c0; }
.shop-banner-dots button[aria-current='true'] { width: 20px; border-radius: 9px; background: #b35678; }
.admin-banner-manager { margin: 0 0 22px; padding: 17px; border: 1px solid #ebd9d3; border-radius: 13px; background: #fff9f7; }
.admin-banner-manager .box-head { margin-bottom: 6px; }
.admin-banner-manager h3 { margin: 0; color: #4c3028; font-size: 17px; }
.admin-banner-list { display: grid; gap: 9px; margin: 15px 0; }
.admin-banner-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px; border: 1px solid #ebded8; border-radius: 10px; background: #fff; }
.admin-banner-row img { width: 140px; aspect-ratio: 2033 / 774; object-fit: contain; border-radius: 5px; background: #f8eee8; }
.admin-banner-row strong, .admin-banner-row small { display: block; }
.admin-banner-row strong { color: #51372f; font-size: 12px; }
.admin-banner-row small { margin-top: 3px; color: #927b72; font-size: 10px; }
.admin-banner-actions { display: flex; gap: 5px; }
.admin-banner-actions button, .admin-banner-restore, .admin-banner-form button { min-height: 34px; padding: 6px 10px; border: 1px solid #dcbeb7; border-radius: 8px; background: #fff; color: #694136; font: inherit; font-size: 11px; font-weight: 800; }
.admin-banner-actions button:disabled { opacity: .42; cursor: not-allowed; }
.admin-banner-actions button[data-banner-remove] { color: #ac3d54; }
.admin-banner-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 12px; border-top: 1px solid #ecded8; }
.admin-banner-form label { color: #654a41; font-size: 12px; font-weight: 800; }
.admin-banner-form input { min-width: 0; max-width: 100%; font-size: 11px; }
.admin-banner-form button { background: #9b486b; border-color: #9b486b; color: #fff; }
.admin-banner-form button:disabled { opacity: .5; cursor: wait; }
.admin-banner-form small, .admin-banner-form [role='alert'] { flex-basis: 100%; color: #8c756d; font-size: 11px; }
.admin-banner-form [role='alert'] { margin: 0; color: #ad3b53; font-weight: 800; }
.admin-banner-delete-confirm { border-color: #b74562 !important; background: #b74562 !important; color: #fff !important; }
#admin-banner-delete-dialog p { margin-top: 10px; }
#admin-banner-delete-dialog .admin-cancel-actions { margin-top: 18px; }
@media (max-width: 600px) {
  .catalog-page .shop-banner.page-shell { padding-left: 9px; padding-right: 9px; }
  .shop-banner { padding-top: 9px; }
  .shop-banner-frame { border-radius: 10px; }
  .admin-banner-row { grid-template-columns: 105px minmax(0, 1fr); gap: 8px; }
  .admin-banner-row img { width: 105px; }
  .admin-banner-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Product selection: readable detail and a larger one-tap add target. */
.catalog-page .product-art-button { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; }
.catalog-page .product-art-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The Organic Herbal 1000 ml source photo has wider margins than Dermarelief. */
.catalog-page .product-art-button[data-product-detail="demo-organic-1000-1"] img { transform: scale(1.07); }
.catalog-page .product-name-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.catalog-page .product-name-button:hover { text-decoration: underline; }
.catalog-page .add-to-cart:not(:disabled) { display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; }
.catalog-page .add-to-cart svg { display: block; }
.product-detail-dialog { width: min(760px, calc(100vw - 24px)); max-height: min(90vh, 760px); padding: 24px; border: 1px solid #e6d6d1; border-radius: 18px; background: #fffaf7; color: #3f2e29; box-shadow: 0 24px 80px #321e1940; }
.product-detail-dialog::backdrop { background: #271b1a99; }
.product-detail-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 1px solid #e9d7d0; border-radius: 50%; background: #fff; color: #573c34; font-size: 27px; }
.product-detail-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); align-items: start; gap: 25px; padding-top: 15px; }
.product-detail-layout > img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #faeeee; }
.product-detail-copy { display: grid; align-content: start; gap: 14px; }
.product-detail-copy h2 { margin: 0; font-size: clamp(19px, 3vw, 27px); line-height: 1.3; }
.product-detail-copy p { margin: 0; color: #755e54; font-size: 14px; line-height: 1.6; }
.product-detail-copy small { color: #8d776d; font-size: 11px; line-height: 1.5; }
.product-detail-price { display: block; color: #cb4267; font-size: 29px; }
.product-detail-add { min-height: 50px; padding: 12px 16px; border: 0; border-radius: 10px; background: #15a544; color: #fff; font-weight: 800; }
.product-detail-add:disabled { background: #d9cfca; color: #6e5d56; }
#product-detail-food { display: grid; gap: 12px; }
#product-detail-food[hidden] { display: none; }
.product-detail-copy .detail-pack-prices { padding: 10px; border-radius: 8px; background: #f9edf0; color: #684b42; font-size: 12px; font-weight: 700; }
.detail-quantity { display: flex; align-items: center; gap: 10px; }
.detail-quantity span { margin-right: auto; font-size: 13px; font-weight: 800; }
.detail-quantity button { width: 44px; height: 44px; border: 1px solid #ddc7c0; border-radius: 9px; background: #fff; color: #583c33; font-size: 22px; }
.detail-quantity button:disabled { opacity: .4; }
.detail-quantity output { min-width: 20px; text-align: center; font-weight: 800; }
@media (max-width: 600px) { .product-detail-dialog { padding: 16px; } .product-detail-layout { grid-template-columns: 1fr; gap: 15px; padding-top: 35px; } .product-detail-layout > img { max-height: 210px; } .product-detail-copy { gap: 10px; } }

/* Keep each original banner image intact at every screen size. */
.shop-banner-track .banner-slide { position: relative; min-width: 0; height: 100%; }
.shop-banner-track .banner-desktop-image { display: block; width: 100%; height: 100%; object-fit: contain; }

.admin-food-prices { display: grid; gap: 13px; margin-bottom: 22px; padding: 18px; border: 1px solid #ead5d0; border-radius: 12px; background: #fff7f5; }
.admin-food-prices h3 { margin: 0; color: #4c3028; font-size: 18px; }
.admin-food-price-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.admin-food-price-fields label { display: grid; gap: 5px; color: #694e45; font-size: 12px; font-weight: 800; }
.admin-food-price-fields input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #ddc5bd; border-radius: 8px; background: #fff; font: inherit; }
.admin-food-price-preview { margin: 0; color: #8c4861; font-size: 13px; font-weight: 700; line-height: 1.7; }
.admin-food-prices button[type='submit'] { width: fit-content; min-height: 42px; padding: 9px 14px; border: 0; border-radius: 8px; background: #9b486b; color: #fff; font-weight: 800; }
.admin-food-prices [role='status'] { margin: 0; font-size: 12px; font-weight: 800; }
.admin-food-prices [data-state='error'] { color: #a43651; }
.admin-food-prices [data-state='success'] { color: #357943; }
@media (max-width: 600px) { .admin-food-price-fields { grid-template-columns: 1fr; } }

/* Pilot back-office controls */
.admin-volume { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #6f5148; white-space: nowrap; }
.admin-volume input { width: 95px; accent-color: #a85778; }
.admin-voice-upload { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -10px 0 18px; padding: 10px 14px; background: #fff; border: 1px solid #eadbd7; border-radius: 12px; color: #644942; font-size: 12px; }
.admin-role-preview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid #eadbd7; border-radius: 12px; background: #fffaf8; color: #523a32; }
.admin-role-preview strong { font-size: 14px; }
.admin-role-preview p { margin: 3px 0 0; font-size: 12px; color: #826d65; }
.admin-role-preview button { border: 1px solid #d9b4c0; border-radius: 9px; background: #fff; color: #934a69; padding: 8px 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.admin-voice-upload label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; }
.admin-voice-upload input { max-width: 190px; font-size: 11px; }
.admin-voice-upload button { border: 1px solid #dfc9c7; background: #fffaf8; color: #8d4f68; border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.admin-voice-upload span { color: #826d65; }
.admin-export { border: 0; border-radius: 9px; background: #9b486b; color: white; padding: 10px 14px; font: inherit; font-size: 12px; font-weight: 800; }
.admin-shipping-address { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #ecdbd3; border-radius: 10px; background: white; padding: 11px 13px; margin-top: 13px; }
.admin-shipping-address p { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.admin-shipping-address button { flex: none; border: 1px solid #d5b3bd; border-radius: 8px; background: #fff9fa; color: #954a67; padding: 8px; font-size: 11px; font-weight: 800; }
.admin-copy-status { color: #278049; font-size: 11px; }
.admin-payment-label { font-weight: 700; }
.admin-order-detail .cart-line { margin: 8px 0; }
.admin-order-detail .cart-line-product { min-width: 0; }
.admin-order-detail .cart-line-product span { overflow-wrap: anywhere; }
.admin-product-editor { border: 1px solid #ebd8d1; border-radius: 12px; background: #fffdfa; margin: 10px 0; overflow: hidden; }
.admin-product-editor summary { display: flex; align-items: center; gap: 11px; padding: 10px; cursor: pointer; list-style: none; }
.admin-product-editor summary::-webkit-details-marker { display: none; }
.admin-product-editor[open] { border-color: #c88ba1; box-shadow: 0 7px 20px #6b3c5012; }
.admin-product-title { min-width: 0; flex: 1; font-size: 12px; }
.admin-product-title strong, .admin-product-title small { display: block; }
.admin-product-title strong { color: #4a302a; overflow-wrap: anywhere; }
.admin-product-title small { color: #90756d; margin-top: 3px; }
.admin-row-actions { display: flex; gap: 6px; }
.admin-row-actions button, .admin-product-form button { border: 1px solid #dfc7c0; border-radius: 8px; background: white; color: #704a43; padding: 8px 10px; font: inherit; font-size: 11px; font-weight: 800; }
.admin-row-actions .admin-featured[aria-pressed='true'] { background: #fff0c4; }
.admin-row-actions .switch.off { background: #eee8e3; }
.admin-drag-handle { flex: none; padding: 9px; color: #9b536d; font-size: 23px; cursor: grab; touch-action: none; user-select: none; }
.admin-product-dragging { opacity: .55; outline: 2px dashed #a75977; }
.admin-product-form { display: grid; gap: 12px; padding: 14px; border-top: 1px solid #ebd8d1; }
.admin-product-form label, .admin-design-form label, .admin-qr-manager label { display: grid; gap: 5px; font-size: 12px; color: #62483e; font-weight: 800; }
.admin-product-form input, .admin-product-form textarea, .admin-design-form input:not([type='checkbox']), .admin-design-form textarea, .admin-qr-manager input { min-width: 0; width: 100%; padding: 9px; border: 1px solid #dfcdc6; border-radius: 8px; background: white; color: #4a302a; font: inherit; }
.admin-product-form h3, .admin-design-form h3, .admin-qr-manager h3 { margin: 4px 0 0; color: #503129; font-size: 15px; }
.admin-product-form .admin-help { margin: 0; }
.admin-tier-list { display: grid; gap: 8px; }
.admin-tier-row { display: grid; grid-template-columns: minmax(75px, .8fr) minmax(100px, 1fr) auto auto; align-items: end; gap: 8px; padding: 10px; border: 1px solid #f0e1da; border-radius: 9px; background: #fff8f5; }
.admin-tier-row .check-row { display: flex; align-items: center; gap: 5px; align-self: center; white-space: nowrap; }
.admin-tier-row input[type='checkbox'] { width: auto; accent-color: #a85778; }
.tier-base-note { align-self: center; color: #94756c; font-size: 10px; }
.admin-product-form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-product-form-actions button[type='submit'], .admin-design-form button[type='submit'] { background: #9b486b; border-color: #9b486b; color: white; }
.admin-product-message { margin: 0; min-height: 15px; color: #327449; font-size: 11px; }
.admin-add-product textarea { width: 100%; padding: 10px; border: 1px solid #e7d4cd; border-radius: 9px; background: #fffaf7; font: inherit; }
.admin-qr-manager { display: grid; justify-items: start; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #eadad4; }
.admin-qr-manager img { border: 1px solid #eadad4; border-radius: 9px; object-fit: contain; background: white; }
.admin-qr-manager button { border: 1px solid #d6b8b6; border-radius: 8px; background: white; color: #704a43; padding: 8px 10px; }
.admin-design-form { display: grid; gap: 12px; max-width: 560px; }
.admin-design-form .check-row { display: flex; align-items: center; gap: 8px; }
.admin-design-form .check-row input { width: auto; }
.admin-design-form img { border: 1px solid #eadad4; border-radius: 50%; object-fit: contain; }
.admin-design-form button { width: fit-content; border: 1px solid #d8beba; border-radius: 8px; background: white; color: #704a43; padding: 10px 14px; font-weight: 800; }
.shop-announcement { padding: 8px 14px; background: var(--design-accent, #b45578); color: white; text-align: center; font-size: 13px; font-weight: 800; }
.shop-welcome { width: min(420px, calc(100vw - 32px)); padding: 32px 24px; border: 1px solid #ebd8d1; border-radius: 18px; background: #fffaf7; text-align: center; box-shadow: 0 25px 70px #40272644; }
.shop-welcome::backdrop { background: #2b1c1b99; }
.shop-welcome img { display: block; margin: 0 auto 10px; border-radius: 50%; object-fit: contain; }
.shop-welcome h2 { margin: 0 0 7px; }
.shop-welcome p { color: #694d43; line-height: 1.7; white-space: pre-wrap; }
.shop-welcome button { border: 0; border-radius: 9px; background: var(--design-accent, #b45578); color: white; padding: 10px 18px; font-weight: 800; }
.shop-welcome #shop-welcome-close { position: absolute; right: 10px; top: 8px; background: transparent; color: #6b4b40; font-size: 24px; padding: 0 7px; }
.catalog-page .product-price { color: var(--design-accent, #c64367); }
@media (max-width: 640px) { .admin-heading-actions { max-width: none; } .admin-shipping-address { display: block; } .admin-shipping-address button { margin-top: 8px; } .admin-product-editor summary { flex-wrap: wrap; } .admin-row-actions { width: 100%; justify-content: flex-end; } .admin-tier-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .admin-tier-row .check-row, .admin-tier-row button, .tier-base-note { align-self: center; } }