/* Product-detail composition, based on the mini-program's actual components. */
.single-product { background: #f6f2ea; }
.myopal-detail { --detail-gutter: clamp(0.875rem, 3.75vw, 1.5rem); width: 100%; min-width: 0; max-width: 42rem; margin-inline: auto; background: #f6f2ea; }
.myopal-detail-info { padding: 1.1875rem calc(var(--detail-gutter) + 0.1875rem) 0; }
.myopal-detail-title-price { display: flex; align-items: stretch; min-height: 4.6875rem; overflow: hidden; border-radius: 0.5625rem; background: #fff; box-shadow: 0 5px 14px #0000000f; }
.myopal-detail-title-price h1 { flex: 1; min-width: 0; align-content: center; padding: 0.8125rem 0.875rem; font: 600 1.0625rem/1.35 var(--myopal-font-body); color: #222; text-wrap: wrap; overflow-wrap: anywhere; }
.myopal-detail-price { display: flex; flex: 0 0 clamp(6.875rem, 32%, 10rem); flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; min-width: 0; padding: 0.625rem 0.5625rem; background: linear-gradient(135deg, #f1d28a, #d4a548 50%, #b8842d); color: #fff; font-size: clamp(0.9375rem, 4.4vw, 1.125rem); font-weight: 700; line-height: 1.2; text-align: center; }
.myopal-detail-price .amount { white-space: nowrap; }
.myopal-detail-price del { order: 2; font-size: 0.6875rem; color: #ffffffb8; }
.myopal-detail-price ins { text-decoration: none; }
.myopal-detail-price--sale { background: linear-gradient(135deg, #5f1723, #8b2635 55%, #3b1018); }
.myopal-detail-sale-label { padding: 0.125rem 0.375rem; border-radius: 999px; background: #ffffff29; font-size: 0.5625rem; color: #f7e8d0; }
.myopal-detail-short { margin-top: 0.8125rem; color: #555; font-size: 0.84375rem; line-height: 1.7; }
.myopal-detail-stock { margin-block: 0.5rem 0.8125rem; color: #786b56; font-size: 0.75rem; }
.myopal-detail-stock .stock { margin: 0; }
.myopal-detail-stock .out-of-stock { color: var(--myopal-color-error, #8b2635); }
.myopal-detail-specs, .myopal-detail-tabs { margin: 0 var(--detail-gutter) 0.875rem; padding: 0.25rem 0.8125rem; border-radius: 0.75rem; background: #fff; box-shadow: 0 5px 15px #0000000d; }
.myopal-detail-category { margin: 0.3125rem 0.125rem; padding: 0.5rem 0.6875rem; border-radius: 999px; background: #f6f2ea; color: #7a6644; font-size: 0.75rem; text-align: center; }
.myopal-spec-group { padding-block: 0.6875rem; border-bottom: 1px solid #0000000f; }
.myopal-spec-group:last-child { border: 0; }
.myopal-spec-group h2 { margin-bottom: 0.25rem; font-size: 0.78125rem; font-weight: 600; color: #b8842d; }
.myopal-spec-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.5625rem; }
.myopal-spec-row dt { flex: 0 0 38%; font-size: 0.78125rem; color: #9a8a70; }
.myopal-spec-row dd { margin: 0; min-width: 0; flex: 1; color: #222; font-size: 0.8125rem; line-height: 1.5; text-align: right; overflow-wrap: anywhere; }
.myopal-spec-row--tone { display: block; }
.myopal-spec-row--tone dt { display: flex; align-items: center; }
.myopal-tone-info { position: relative; width: 1rem; height: 1rem; min-height: 0; margin-inline-start: 0.3125rem; padding: 0; border: 1px solid #9a8a70b8; border-radius: 50%; color: #8d7958; background: #f6f2ea; font: italic 0.75rem Georgia, serif; }
.myopal-tone-info::before { content: ''; position: absolute; inset: -0.75rem; }
.myopal-tone { margin-top: 0.5rem; padding-top: 0.625rem; }
.myopal-tone-labels { display: grid; grid-template-columns: repeat(9, 1fr); margin-bottom: 0.1875rem; text-align: center; color: #9a8a70; font-size: 0.5625rem; }
.myopal-tone-labels .is-current { color: #8d6727; font-weight: 700; }
.myopal-tone-scale { position: relative; display: flex; height: 1.625rem; border-radius: 0.21875rem; box-shadow: 0 0 0 2px #0000000a; }
.myopal-tone-scale > span { width: calc(100% / 9); }
.myopal-tone-scale > span:first-child { border-radius: 0.21875rem 0 0 0.21875rem; }
.myopal-tone-scale > span:nth-child(9) { border-radius: 0 0.21875rem 0.21875rem 0; }
.myopal-tone-marker { position: absolute; height: 100%; border: 2px solid #d6a84f; border-radius: 0.21875rem; box-shadow: inset 0 0 0 1px #fff; transform: translateX(calc(var(--tone-index) * 100%)); transition: transform 680ms ease-in-out; }
.myopal-tone-marker::before { content: ''; position: absolute; inset: -1.75rem 0 auto; height: 0.375rem; background: #b8842d; clip-path: polygon(30% 0, 70% 0, 50% 100%); }
.myopal-detail-tabs { margin-bottom: 2.5rem; padding: 0.875rem 0.8125rem 1rem; }
.myopal-detail-tablist { position: relative; display: flex; overflow-x: auto; margin-bottom: 0.75rem; border-bottom: 1px solid #0000000f; }
.myopal-detail-tablist button { position: relative; flex: 1; min-width: max-content; padding: 0 0.5rem 0.625rem; border: 0; border-radius: 0; color: #777; background: none; font-size: 0.78125rem; font-weight: 400; }
.myopal-detail-tablist [aria-selected="true"] { color: #b8842d; font-size: 0.84375rem; font-weight: 600; }
.myopal-detail-tab-indicator { position: absolute; inset: auto auto 0 0; height: 2px; border-radius: 999px; background: #d8b46a; transition: transform 350ms ease, width 350ms ease; }
.myopal-detail-tabs.is-enhanced .myopal-detail-tab-viewport { overflow: hidden; }
.myopal-detail-tabs.is-enhanced .myopal-detail-tab-track { display: flex; transition: transform 350ms ease; }
.myopal-detail-tabs.is-enhanced .myopal-detail-tab-panel { flex: 0 0 100%; min-width: 0; }
.myopal-detail-tab-panel { height: clamp(18rem, 50svh, 24rem); overflow-y: auto; color: #555; font-size: 0.84375rem; line-height: 1.85; overscroll-behavior: contain; }
.myopal-detail-tab-panel p + p { margin-top: 0.75rem; }
.myopal-detail-tab-panel :is(h2, h3, h4) { font-size: inherit; margin-block: 0.75rem 0.25rem; }
.myopal-detail-tab-panel :is(h2, h3, h4):first-child { margin-top: 0; }
.myopal-detail-tab-panel ul { padding-inline-start: 1.25rem; }
.myopal-detail-related { margin-top: 0.6875rem; padding-block: 0.9375rem 1.0625rem; background: #ffffffb8; }
.myopal-detail-related h2 { margin-inline: var(--detail-gutter); font-size: 0.9375rem; font-weight: 600; }
.myopal-detail-related-row { display: flex; gap: 0.5625rem; margin: 0.6875rem 0 0; padding: 0 var(--detail-gutter) 0.5rem; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--detail-gutter); }
.myopal-detail-related-row .myopal-product-card { flex: 0 0 clamp(8.9375rem, 41%, 12rem); scroll-snap-align: start; }
.myopal-purchase-bar {display:flex;align-items:stretch;gap:0;}
.myopal-product-action { display: flex; flex: 0 0 3.125rem; align-items: center; justify-content: center; color: #d8b46a; text-decoration:none; flex-direction: column; gap: 0.25rem; min-height: 3.75rem; padding: .5rem .2rem; border: 0; background: none; font-size: 0.65625rem; font-weight: 400; }
.myopal-product-action[hidden] { display: none; }
.myopal-purchase { min-width: 0; flex: 1; align-self:center; padding:.375rem .5rem .375rem .25rem; }
.myopal-purchase .stock { display: none; /* Stock is already displayed in the product information section. */ }
.myopal-purchase form.cart { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.myopal-purchase .quantity { flex: 0 0 3.25rem; margin: 0; }
.myopal-purchase .quantity:has(input[type="hidden"]) { display: none; }
.myopal-purchase .qty { width: 100%; min-height: 2.75rem; padding: 0.375rem; text-align: center; }
.myopal-purchase :is(button, .button),
.single-product .myopal-purchase button.single_add_to_cart_button.button { flex: 1; width: 100%; min-width: 0; min-height:var(--myopal-action-height); padding:.5rem .75rem; border:0; border-radius:var(--myopal-radius-pill); background:var(--myopal-action-background); color:var(--myopal-action-foreground); font:600 var(--myopal-action-font-size)/1.4 var(--myopal-font-body); white-space:normal; }
.myopal-purchase button:disabled { background: #34312b; color: #d8c6a5; cursor: not-allowed; opacity: 1; }
.myopal-purchase .myopal-product-cart-button.is-added { background: var(--myopal-color-success-surface); color: var(--myopal-color-success); box-shadow: inset 0 0 0 1px #28604430; }
.myopal-product-cart-feedback:not(.screen-reader-text) { color: #f1d28a; font-size: .75rem; line-height: 1.4; margin-top: .5rem; }

.myopal-detail .woocommerce-notices-wrapper { position: relative; z-index: 1; }
.myopal-detail .woocommerce-notices-wrapper:not(:empty) { padding: 4.5rem 1rem 0.75rem; }
.myopal-detail .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-error, .woocommerce-info) { margin: 0; padding: 1rem; background: #fff; color: #222; font-size: 0.875rem; }
.myopal-tone-note { margin-top: 0.75rem; padding: 0.625rem; border-radius: 0.5rem; background: #f7f2e8; font-size: 0.6875rem; color: #8a7d68; }
.myopal-purchase [data-product-cart] { display: flex; gap: .5rem; }
.myopal-purchase .myopal-product-cart-button:not(.is-added):not(:disabled) { background:var(--myopal-action-secondary-background); color:var(--myopal-action-secondary-foreground); }

.myopal-product-consult { align-items: center; justify-content: center; color: #d8b46a; text-decoration: none; }

.myopal-product-wishlist .myopal-favorite-control { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; width:2.75rem; min-height:2.75rem; padding:0; background:transparent; color:inherit; font:inherit; text-decoration:none; }
.myopal-product-wishlist .myopal-favorite-control::before { content:none; }
.myopal-purchase-bar .myopal-product-action .myopal-icon { width:1.125rem; height:1.125rem; flex:none; }
.myopal-purchase-bar .myopal-favorite-form { margin:0; }
@media(max-width:23rem){ .myopal-purchase [data-product-cart] { flex-direction:column; gap:.25rem; } .myopal-purchase :is(button,.button) { padding:.4rem .5rem; } }

.myopal-video-load .myopal-icon { width:2rem; height:2rem; }

/* The Designer is a purchase-bar action; its palette is independent of wishlist state. */

.myopal-purchase-bar .myopal-product-wishlist .myopal-favorite-control { border-radius:0; background:transparent; }

.myopal-product-action > span, .myopal-product-wishlist .myopal-favorite-control > span { line-height:1.2; }
.myopal-product-action:focus-visible { outline-offset:3px; }

.myopal-detail-tab-panel section + section{margin-top:var(--myopal-space-3)}