/*==================================================
SIGNATURE SPREADS AND TREATS BY DI
File: product.css
==================================================*/

.product-page .site-hero-media img { object-position: center right; }

.product-breadcrumb { padding: var(--space-lg) 0; background-color: var(--color-background); }
.product-breadcrumb ol { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; margin:0; padding:0; }
.product-breadcrumb li { display:inline-flex; align-items:center; color:var(--color-text-light); font-size:.72rem; line-height:1.5; }
.product-breadcrumb li:not(:last-child)::after { content:"/"; margin-left:.55rem; color:rgba(75,46,30,.35); }
.product-breadcrumb a { color:var(--color-text-light); }
.product-breadcrumb a:hover,.product-breadcrumb a:focus-visible { color:var(--color-primary-dark); }

.product-showcase { position:relative; isolation:isolate; padding:clamp(3rem,6vw,5.5rem) 0 clamp(5rem,8vw,7.5rem); overflow:hidden; background-color:var(--color-background); }
.product-showcase::before { content:""; position:absolute; top:18%; left:-210px; z-index:-1; width:460px; height:460px; border-radius:50%; background:radial-gradient(circle,rgba(182,106,34,.055),transparent 70%); pointer-events:none; }
.product-showcase-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr); align-items:start; gap:clamp(3.25rem,7vw,7rem); max-width:1280px; margin-inline:auto; }

.product-gallery { min-width:0; }
.product-gallery-main { position:relative; margin-bottom:var(--space-md); }
.product-gallery-image-wrap { aspect-ratio:5/5.8; overflow:hidden; border-radius:var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); background-color:var(--color-section); box-shadow:0 26px 64px rgba(75,46,30,.11); }
.product-gallery-main-image { display:block; width:100%; height:100%; object-fit:cover; }
.product-gallery-badge { position:absolute; top:var(--space-lg); left:var(--space-lg); z-index:2; display:inline-flex; align-items:center; gap:.45rem; min-height:34px; padding:.48rem .82rem; border:1px solid rgba(182,106,34,.18); border-radius:var(--radius-pill); background-color:rgba(248,244,238,.95); color:var(--color-primary-dark); font-size:.62rem; font-weight:var(--fw-bold); line-height:1; letter-spacing:.09em; text-transform:uppercase; box-shadow:0 8px 22px rgba(75,46,30,.1); backdrop-filter:blur(8px); }
.product-gallery-expand { position:absolute; right:var(--space-lg); bottom:var(--space-lg); z-index:2; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(252,250,246,.55); border-radius:50%; background-color: var(--color-primary); color:var(--color-warm-white); box-shadow:0 10px 24px rgba(20,10,5,.16); backdrop-filter:blur(8px); }
.product-gallery-thumbnails { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-sm); }
.product-gallery-thumbnail { aspect-ratio:1; overflow:hidden; border:1px solid transparent; border-radius:var(--radius-md); background-color:var(--color-section); opacity:.64; }
.product-gallery-thumbnail img { width:100%; height:100%; object-fit:cover; }
.product-gallery-thumbnail.active { border-color:var(--color-primary); opacity:1; box-shadow:0 8px 20px rgba(182,106,34,.14); }

.product-details { min-width:0; padding-top:clamp(.25rem,1vw,1rem); }
.product-kicker { margin-bottom:var(--space-md); color:var(--color-primary-dark); font-size:.68rem; font-weight:var(--fw-bold); letter-spacing:.16em; text-transform:uppercase; }
.product-details-header h2 { max-width:680px; margin-bottom:var(--space-md); color:var(--color-text); font-family:var(--font-heading); font-size:clamp(3.2rem,5vw,5.2rem); font-weight:600; line-height:.94; letter-spacing:-.035em; text-wrap:balance; }
.product-short-description { max-width:55ch; margin-bottom:var(--space-lg); color:var(--color-text); font-family:var(--font-heading); font-size:clamp(1.22rem,1.8vw,1.52rem); line-height:1.5; }
.product-price-wrap { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; margin-bottom:var(--space-xl); }
.product-price { margin:0; color:var(--color-primary-dark); font-family:var(--font-heading); font-size:clamp(2rem,3vw,2.6rem); font-weight:600; line-height:1; }
.product-price-note { margin:0; color:var(--color-text-light); font-size:.72rem; letter-spacing:.04em; }
.product-description { margin-bottom:var(--space-xl); }
.product-description p { margin-bottom:var(--space-md); color:var(--color-text-light); font-size:.94rem; line-height:1.82; }

.product-availability { display:flex; align-items:flex-start; gap:var(--space-md); margin-bottom:var(--space-xl); padding:var(--space-md) var(--space-lg); border:1px solid rgba(117,137,91,.22); border-radius:var(--radius-lg); background-color:rgba(117,137,91,.07); }
.product-availability-indicator { flex:0 0 auto; width:9px; height:9px; margin-top:.45rem; border-radius:50%; background-color:#75895B; box-shadow:0 0 0 5px rgba(117,137,91,.11); }
.product-availability-title { margin-bottom:.2rem; color:var(--color-text); font-size:.78rem; font-weight:var(--fw-bold); }
.product-availability-text { margin:0; color:var(--color-text-light); font-size:.76rem; }

.product-order-form { margin-bottom:var(--space-xl); padding:clamp(1.5rem,3vw,2.25rem); border:1px solid rgba(220,201,170,.8); border-radius:var(--radius-xl); background-color:rgba(252,250,246,.55); box-shadow:0 18px 48px rgba(75,46,30,.055); }
.product-options-group { margin:0 0 var(--space-xl); padding:0; border:0; }
.product-options-group legend { margin-bottom:var(--space-md); color:var(--color-text); font-size:.76rem; font-weight:var(--fw-bold); }
.product-option-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
.product-option { position:relative; }
.product-option input { position:absolute; width:1px; height:1px; opacity:0; }
.product-option span { display:flex; align-items:center; justify-content:center; min-height:44px; padding:.65rem .8rem; border:1px solid rgba(182,106,34,.18); border-radius:var(--radius-pill); color:var(--color-text); font-size:.72rem; font-weight:var(--fw-bold); text-align:center; cursor:pointer; }
.product-option input:checked + span { border-color:var(--color-primary); background-color:rgba(182,106,34,.1); color:var(--color-primary-dark); box-shadow:0 8px 20px rgba(182,106,34,.1); }
.product-option input:focus-visible + span { outline:2px solid var(--color-primary); outline-offset:3px; }
.product-order-row { display:flex; align-items:end; justify-content:space-between; gap:var(--space-xl); margin-bottom:var(--space-lg); }
.product-quantity-field>label { display:block; margin-bottom:var(--space-sm); color:var(--color-text); font-size:.76rem; font-weight:var(--fw-bold); }
.product-quantity-control { display:grid; grid-template-columns:42px 58px 42px; min-height:44px; overflow:hidden; border:1px solid rgba(182,106,34,.22); border-radius:var(--radius-pill); background-color:var(--color-warm-white); }
.product-quantity-button { display:grid; place-items:center; border:0; background:transparent; color:var(--color-text); font-size:.68rem; }
.product-quantity-input { width:100%; border:0; border-inline:1px solid rgba(182,106,34,.15); background:transparent; color:var(--color-text); font-size:.88rem; font-weight:var(--fw-bold); text-align:center; appearance:textfield; }
.product-quantity-input::-webkit-inner-spin-button,.product-quantity-input::-webkit-outer-spin-button { appearance:none; margin:0; }
.product-order-total { text-align:right; }
.product-order-total p { margin-bottom:.2rem; color:var(--color-text-light); font-size:.68rem; font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase; }
.product-order-total strong { color:var(--color-primary-dark); font-family:var(--font-heading); font-size:1.8rem; font-weight:600; }
.product-add-to-cart { width:100%; gap:.65rem; }
.product-order-help,.product-order-status { margin:var(--space-md) 0 0; color:var(--color-text-light); font-size:.74rem; line-height:1.55; text-align:center; }
.product-order-help a,.product-order-status { color:var(--color-primary-dark); }
.product-order-status { min-height:1.4em; margin-top:var(--space-sm); }

.product-service-details { display:grid; gap:var(--space-md); margin-bottom:var(--space-xl); }
.product-service-detail { display:grid; grid-template-columns:42px minmax(0,1fr); gap:var(--space-md); }
.product-service-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(182,106,34,.17); border-radius:50%; background-color:rgba(182,106,34,.055); color:var(--color-primary-dark); }
.product-service-detail h3 { margin-bottom:.18rem; color:var(--color-text); font-size:.86rem; font-weight:var(--fw-bold); }
.product-service-detail p { margin:0; color:var(--color-text-light); font-size:.76rem; line-height:1.58; }

.product-allergen-notice { display:grid; grid-template-columns:42px minmax(0,1fr); gap:var(--space-md); padding:var(--space-lg); border-left:3px solid rgba(182,106,34,.5); border-radius:0 var(--radius-md) var(--radius-md) 0; background-color:rgba(232,214,184,.22); }
.product-allergen-icon { display:grid; place-items:center; width:42px; height:42px; color:var(--color-primary-dark); }
.product-allergen-notice h3 { margin-bottom:var(--space-sm); color:var(--color-text); font-size:.82rem; font-weight:var(--fw-bold); }
.product-allergen-notice p { margin:0; color:var(--color-text-light); font-size:.75rem; line-height:1.62; }

.product-story { position:relative; isolation:isolate; padding:clamp(4.5rem,8vw,7.5rem) 0; overflow:hidden; background-color:var(--color-section); }
.product-story-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(3rem,8vw,8rem); max-width:1220px; margin-inline:auto; }
.product-story-eyebrow { margin-bottom:var(--space-md); color:var(--color-primary-dark); font-size:.68rem; font-weight:var(--fw-bold); letter-spacing:.16em; text-transform:uppercase; }
.product-story-content h2 { margin-bottom:var(--space-xl); color:var(--color-text); font-family:var(--font-heading); font-size:clamp(3rem,4.8vw,4.9rem); font-weight:600; line-height:.95; letter-spacing:-.035em; text-wrap:balance; }
.product-story-content h2 em { display:block; margin-top:.14em; color:var(--color-primary-dark); font-size:.78em; font-weight:var(--fw-medium); }
.product-story-content p { max-width:58ch; margin-bottom:var(--space-md); color:var(--color-text-light); font-size:.94rem; line-height:1.82; }
.product-story-image { margin:0; overflow:hidden; border-radius:var(--radius-xl) var(--radius-xl) var(--radius-md) var(--radius-md); box-shadow:0 24px 60px rgba(75,46,30,.11); }
.product-story-image img { display:block; width:100%; height: auto; object-fit:contain; }

.product-image-modal { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); background-color:rgba(30,18,12,.92); opacity:0; visibility:hidden; transition:opacity var(--transition-normal),visibility var(--transition-normal); }
.product-image-modal.is-open { opacity:1; visibility:visible; }
.product-image-modal-content { width:min(100%,920px); max-height:88vh; overflow:hidden; border-radius:var(--radius-xl); box-shadow:0 28px 80px rgba(0,0,0,.35); }
.product-image-modal-content img { display:block; width:100%; max-height:88vh; object-fit:contain; background-color:var(--color-background); }
.product-image-modal-close { position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(252,250,246,.55); border-radius:50%; background-color: var(--color-primary); color:var(--color-warm-white); }
body.has-product-modal { overflow:hidden; }

.product-page .site-signature-difference {
	margin-top: 40px;
}