/* New product-page layout trial (owner, Oct 13) - only pages whose hero has .product-hero--v3 (Eli's Potting Bench).
   Price row under the title, stacked buttons, Houzz line, deposit banner from the store's rules, four dropdowns,
   and the contact bar under the photo. */
.product-hero--v3 .product-hero-title { margin-bottom: 0; }
.pv3-price { display: flex; align-items: center; gap: 18px; margin: 14px 0 16px; }
.pv3-price b { font: 500 42px/1 'Cormorant Garamond', Georgia, serif; color: #1E2B20; min-width: 3ch; }
.pv3-price span { padding-left: 18px; border-left: 1px solid rgba(0,0,0,.15); color: #5E6A61; font-size: 16px; line-height: 32px; }

/* configurator summary: keep only the two buttons, full width and stacked */
.product-hero--v3 .frcfg-facts,
.product-hero--v3 .frcfg-from,
.product-hero--v3 .frcfg-from-note,
.product-hero--v3 .frcfg-assembly,
.product-hero--v3 .frcfg-text { display: none !important; }
.product-hero--v3 .frcfg-card { padding: 0; border: 0; background: none; box-shadow: none; }
.product-hero--v3 .frcfg-cta-group { display: grid !important; grid-template-columns: 1fr !important; gap: 12px; margin: 20px 0 0; }
.product-hero--v3 .frcfg-btn-green:hover:not(:disabled) { background: #173B29; }


.pv3-deposit { display: flex; align-items: center; gap: 18px; background: #1F4D36; color: #fff; border-radius: 8px; padding: 18px 22px; }
.pv3-deposit svg { width: 34px; height: 34px; flex: 0 0 34px; }
.pv3-deposit b { display: block; font: 500 24px/1.15 'Cormorant Garamond', Georgia, serif; }
.pv3-deposit span { font-size: 14px; opacity: .9; }

.pv3-acc { margin-top: 18px; border-top: 1px solid rgba(0,0,0,.1); }
.pv3-acc details { border-bottom: 1px solid rgba(0,0,0,.1); }
.pv3-acc summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 15px 4px; cursor: pointer; font-size: 17px; color: #26302A; }
.pv3-acc summary::-webkit-details-marker { display: none; }
.pv3-acc summary svg { width: 26px; height: 26px; flex: 0 0 26px; }
.pv3-acc summary span { flex: 1; }
.pv3-acc summary::after { content: "›"; font-size: 24px; color: #5E6A61; transition: transform .2s; }
.pv3-acc details[open] summary::after { transform: rotate(90deg); }
.pv3-acc summary:focus-visible { outline: 2px solid #53754B; outline-offset: 2px; }
.pv3-acc__body { padding: 0 4px 16px 46px; color: #5E6A61; font-size: 15px; line-height: 1.55; }
.pv3-acc__body p { margin: 0 0 8px; }
.pv3-acc__body a { color: #53754B; text-decoration: underline; text-underline-offset: 3px; }
.pv3-acc__body table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.pv3-acc__body td { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.pv3-acc__body td:first-child { width: 45%; color: #26302A; }

/* contact bar under the photo: same width as the photo, four equal parts */
.pv3-contact { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; border: 1px solid rgba(0,0,0,.1); border-radius: 12px; background: #fff; }
.pv3-contact > a, .pv3-contact > button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 6px; font-size: 14px; font-weight: 600; color: #1F4D36; cursor: pointer; min-width: 0; white-space: nowrap; }
.pv3-contact > * + * { border-left: 1px solid rgba(0,0,0,.1); }
.pv3-contact svg { width: 22px; height: 22px; flex: 0 0 22px; color: #26302A; }
.pv3-contact small { display: block; font-size: 12px; font-weight: 400; color: #5E6A61; }
.pv3-contact > *:focus-visible { outline: 2px solid #53754B; outline-offset: -2px; border-radius: 10px; }
/* every photo fills the same 1:1 frame (cropped, never letterboxed), so the counter sits on the photo and the
   contact bar stays right under it whichever photo shows */
.product-hero--v3 ul[role="listbox"] { aspect-ratio: 1 / 1 !important; align-items: stretch !important; border-radius: 10px; }
.product-hero--v3 ul[role="listbox"] > li, .product-hero--v3 ul[role="listbox"] > li > div, .product-hero--v3 ul[role="listbox"] a, .product-hero--v3 ul[role="listbox"] picture { height: 100%; display: block; }
.product-hero--v3 .product-gallery__image { width: 100%; height: 100% !important; object-fit: cover; aspect-ratio: auto !important; }
.product-hero--v3 .thumb-text { display: none; }
.product-hero--v3 .product-gallery__meta,
.product-hero--v3 .product-gallery__thumbs { display: none !important; }

@media (max-width: 1023px) {
  .pv3-contact { grid-template-columns: 1fr 1fr; }
  .pv3-contact > *:nth-child(3) { border-left: 0; }
  .pv3-contact > *:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.1); }
}
@media (prefers-reduced-motion: reduce) { .pv3-acc summary::after { transition: none; } }

/* Shipping and Care & Warranty tabs (beside Specifications) */
.pv3-tab { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; color: #46524A; font-size: 17px; line-height: 1.6; }
.pv3-tab h2 { font: 500 34px/1.15 'Cormorant Garamond', Georgia, serif; color: #1E2B20; margin: 0 0 14px; }
.pv3-tab p { margin: 0 0 12px; }
.pv3-tab a { color: #53754B; text-decoration: underline; text-underline-offset: 3px; }
/* buttons (owner, Oct 13): plain and centered, no icons or arrows; a "made to order / delivery time" line above them */
.product-hero--v3 .frcfg-cta-group .frcfg-btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 62px; padding: 0 22px; border-radius: 999px; font: 600 18px/1.2 Figtree, system-ui, sans-serif; letter-spacing: 0; text-transform: none; }
.product-hero--v3 .frcfg-btn-green { background: #1F4D36; border: 1px solid #1F4D36; color: #fff; }
.product-hero--v3 .frcfg-btn-outline { background: transparent; border: 1px solid #C9CCC2; color: #26302A; }
.product-hero--v3 .frcfg-btn-outline:hover { border-color: #1F4D36; }
.product-hero--v3 .frcfg-cta-group::before { content: "Made to order · Delivered in about 4 weeks"; display: flex; align-items: center; gap: 18px; color: #5E6A61; font-size: 15px; margin-bottom: 6px; background: linear-gradient(#DEDDD3, #DEDDD3) left center / 16% 1px no-repeat, linear-gradient(#DEDDD3, #DEDDD3) right center / 16% 1px no-repeat; justify-content: center; }

/* Houzz line, like the Trustpilot line: centered, thin rules on both sides */
.pv3-houzz { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 16px; padding: 4px 0; text-decoration: none; color: #26302A; background: linear-gradient(#DEDDD3, #DEDDD3) left center / 9% 1px no-repeat, linear-gradient(#DEDDD3, #DEDDD3) right center / 9% 1px no-repeat; }
.pv3-houzz__best { font-size: 20px; }
.pv3-houzz__yrs { font-size: 16px; color: #46524A; }
.pv3-houzz__logo { display: inline-flex; align-items: center; gap: 2px; font: 700 18px/1 Figtree, system-ui, sans-serif; color: #4DBC15; letter-spacing: -.02em; }
.pv3-houzz__logo svg { width: 18px; height: 18px; }
.pv3-houzz:hover .pv3-houzz__best, .pv3-houzz:focus-visible .pv3-houzz__best { text-decoration: underline; text-underline-offset: 3px; }
.pv3-houzz:focus-visible { outline: 2px solid #53754B; outline-offset: 4px; border-radius: 6px; }
.product-hero--v3 .frcfg .frcfg-cta-group .frcfg-btn-outline { color: #26302A; border-color: #C9CCC2; }

/* (owner, Oct 13) smaller overall and the whole photo in view: a 4:3 frame that never gets taller than the
   screen allows, and a calmer type scale in the buy column */
.product-hero--v3 ul[role="listbox"] { aspect-ratio: 4 / 3 !important; max-height: calc(100vh - 260px); min-height: 320px; }
.product-hero--v3 .pg-side__thumbs { max-height: calc(100vh - 260px); overflow: hidden; }
.product-hero--v3 .product-hero-title { font-size: clamp(30px, 2.6vw, 42px) !important; line-height: 1.08; }
.product-hero--v3 .pv3-price { margin: 10px 0 12px; }
.product-hero--v3 .pv3-price b { font-size: 32px; }
.product-hero--v3 .pv3-price span { font-size: 15px; line-height: 26px; }
.product-hero--v3 .product-hero-desc { font-size: 15px; line-height: 1.6; }
.product-hero--v3 .frcfg-cta-group { gap: 10px; margin-top: 14px; }
.product-hero--v3 .frcfg-cta-group .frcfg-btn { min-height: 52px; font-size: 16px; }
.product-hero--v3 .frcfg-cta-group::before { font-size: 14px; margin-bottom: 4px; }
.pv3-houzz { margin: 14px 0 12px; }
.pv3-houzz__best { font-size: 17px; }
.pv3-houzz__yrs { font-size: 14px; }
.pv3-houzz__logo { font-size: 16px; }
.pv3-deposit { padding: 14px 18px; }
.pv3-deposit b { font-size: 21px; }
.pv3-deposit span { font-size: 13px; }
.pv3-contact > a, .pv3-contact > button { padding: 10px 6px; font-size: 13px; }

/* deposit banner as a button (opens the configurator) with the payment-discount line */
button.pv3-deposit { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; }
button.pv3-deposit:hover { background: #173B29; }
button.pv3-deposit:focus-visible { outline: 3px solid #53754B; outline-offset: 2px; }
.pv3-deposit__txt { display: block; }
.pv3-deposit__txt > span { display: block; }
.pv3-deposit__txt em { display: block; margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 600; color: #CFE3C4; }

/* (owner, Oct 13) photos are never cropped: each one shows whole, centred in the frame on the page's own
   background (no white bars), the frame no taller than the screen allows */
.product-hero--v3 ul[role="listbox"] { aspect-ratio: 4 / 3 !important; background: transparent; }
.product-hero--v3 .product-gallery__image { object-fit: contain !important; object-position: center; border-radius: 10px; }

/* price row: "From $X" and, when the cart opens on pricier popular options, that price on a second line */
.pv3-price { display: block; }
.pv3-price__row { display: flex; align-items: baseline; gap: 10px; }
.pv3-price__row small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #5E6A61; }
.pv3-price__row span { margin-left: 8px; padding-left: 16px; border-left: 1px solid rgba(0,0,0,.15); color: #5E6A61; font-size: 15px; }
.pv3-price__as { margin: 4px 0 0; font-size: 14px; color: #5E6A61; }
.pv3-price__as span:first-child { font-weight: 600; color: #26302A; }
.pv3-price .pv3-price__as span { padding: 0; margin: 0; border: 0; line-height: inherit; font-size: 14px; }

/* side thumbnails: the whole set in a column - about 5 visible, the rest scroll with the up/down arrows */
.product-gallery--side .pg-side__col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.product-hero--v3 .pg-side__thumbs { max-height: min(calc(100vh - 330px), 448px) !important; min-height: 180px; overflow-y: auto !important; scrollbar-width: none; scroll-snap-type: y proximity; padding: 2px 0; }
.product-hero--v3 .pg-side__thumbs::-webkit-scrollbar { display: none; }
.product-hero--v3 .pg-side__thumbs li { scroll-snap-align: start; }
.pg-side__nav { display: flex; align-items: center; justify-content: center; width: 76px; height: 26px; border: 0; border-radius: 6px; background: rgba(0,0,0,.05); color: #26302A; cursor: pointer; }
.pg-side__nav:hover { background: rgba(0,0,0,.1); }
.pg-side__nav:focus-visible { outline: 2px solid #53754B; outline-offset: 2px; }
.pg-side__nav svg { width: 20px; height: 20px; }
@media (max-width: 700px) {
  .product-gallery--side .pg-side__col { order: 2; flex-direction: row; }
  .product-hero--v3 .pg-side__thumbs { max-height: none !important; min-height: 0; overflow-x: auto !important; overflow-y: hidden !important; }
  .pg-side__nav { display: none; }
}

/* phones: nothing wider than the screen - the photo column may shrink, contact texts wrap, thumbnails under the photo */
.product-gallery--side .pg-side > * { min-width: 0; }
@media (max-width: 700px) {
  .product-gallery--side .pg-side { display: flex !important; flex-direction: column; }
  .product-gallery--side .pg-side > .flex:not(.fixed) { order: 1; width: 100%; }
  .product-gallery--side .pg-side__col { order: 2; width: 100%; margin-top: 10px; }
  .product-hero--v3 .pg-side__thumbs { width: 100%; }
  .pv3-contact > a, .pv3-contact > button { white-space: normal; justify-content: flex-start; padding: 10px 12px; }
}

/* (owner, Oct 13) six thumbnails always visible (76px + 10px gap each), whatever the screen height; the column
   runs down beside the photo and the questions bar */
.product-hero--v3 .pg-side__thumbs { height: 506px; max-height: none !important; min-height: 0; scroll-snap-type: y mandatory; padding: 0; }
@media (max-width: 700px) { .product-hero--v3 .pg-side__thumbs { height: auto; scroll-snap-type: x proximity; } }

/* (owner, Oct 13) the photo frame takes the shape of each product's main photo and fills the column; it only gets
   narrower when the screen is too short to show it whole. Photos are never cropped (contain). */
.product-hero--v3 ul[role="listbox"] { aspect-ratio: var(--pv3-ar, 1.333) !important; max-height: none !important; min-height: 0; }
.product-hero--v3 .pg-side > .flex:not(.fixed) { width: min(100%, calc((100vh - 190px) * var(--pv3-ar, 1.333))); min-width: min(100%, 520px); justify-self: center; }
.product-hero--v3 .pg-side { grid-template-columns: 76px minmax(0, 1fr); }
@media (max-width: 700px) { .product-hero--v3 .pg-side > .flex:not(.fixed) { width: 100%; min-width: 0; } }

/* photo viewer (owner, Oct 13): the whole screen, a darker backdrop so the photo stands out, the photo as large as
   it fits, and round, quiet controls instead of grey squares */
.product-gallery .fixed.inset-0.z-\[999\] { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; }
.product-gallery .fixed.inset-0.z-\[999\] > .bg-black\/80 { background: rgba(8, 12, 9, .94) !important; }
.product-gallery [x-ref="modalSlider"] { padding: 56px 72px 24px; box-sizing: border-box; }
.product-gallery [x-ref="modalSlider"] img { max-height: calc(100vh - 80px); border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.product-gallery [x-ref="modalDialog"] button.p-2 { border: 0 !important; border-radius: 999px; background: rgba(255,255,255,.14) !important; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.product-gallery [x-ref="modalDialog"] button.p-2:hover { background: rgba(255,255,255,.26) !important; transform: none; }
.product-gallery [x-ref="modalDialog"] button.p-2 svg { color: #fff !important; }
.product-gallery [x-ref="modalDialog"] .pointer-events-none.absolute.left-4.top-4 { background: rgba(255,255,255,.12); border-radius: 999px; padding: 6px 14px; font: 500 14px Figtree, system-ui, sans-serif; }
@media (max-width: 700px) { .product-gallery [x-ref="modalSlider"] { padding: 56px 8px 16px; } }

/* (owner, Oct 13) the photo grows down to the bottom of the thumbnail column (6 thumbnails + arrows), never shorter
   than that, so there is no empty space under the questions bar; still whole, never cropped */
.product-hero--v3 .pg-side > .flex:not(.fixed) { width: min(100%, calc(max(100vh - 190px, 494px) * var(--pv3-ar, 1.333))); }

/* Wood grade comparison (product page, closed by default) */
.pv3-grades{margin:16px 0 4px;border:1px solid #DEDCCF;border-radius:6px;background:#fff}
.pv3-grades summary{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 16px;cursor:pointer;font:600 15px 'Figtree',system-ui,sans-serif;color:#26302A;list-style:none}
.pv3-grades summary::-webkit-details-marker{display:none}
.pv3-grades summary::after{content:"+";margin-left:auto;font-size:20px;line-height:1;color:#53754B}
.pv3-grades[open] summary::after{content:"\2212"}
.pv3-grades summary span{font-weight:400;font-size:13px;color:#5E6A61}
.pv3-grades table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.4}
.pv3-grades th,.pv3-grades td{padding:9px 12px;border-top:1px solid #EEECE3;text-align:left;vertical-align:top}
.pv3-grades thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5E6A61;font-weight:700}
.pv3-grades tbody th{font-weight:600;color:#26302A;white-space:nowrap}
.pv3-grades tbody th em{display:block;font-style:normal;font-size:11px;font-weight:600;color:#53754B}
.pv3-grades td:nth-child(2){white-space:nowrap;font-weight:600}
.pv3-grades .is-pop{background:#F5F8F2}
.pv3-grades p{margin:0;padding:10px 16px 14px;font-size:13px;color:#5E6A61;border-top:1px solid #EEECE3}
.pv3-grades p a{color:#3F5C39;font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.pv3-grades tbody th{white-space:normal}.pv3-grades thead th:nth-child(3),.pv3-grades td:nth-child(3){display:none}}