/* R'AA - 03 Nov 2026: product page zoom, colour tiles, accordions, navbar ring */

/* ---------- Navbar ring: smaller, only visible at the very top ---------- */
.raa-nav::after{width:112px;top:calc(100% - 11px);transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
@media (max-width:767px){.raa-nav::after{width:76px;top:calc(100% - 8px)}}
html.raa-scrolled .raa-nav::after{opacity:0;transform:translate(-50%,-10px) scale(.92)}

/* ---------- Main product image: hover zoom ---------- */
.raa-zoom-main{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;overflow:hidden;border-radius:28px;cursor:zoom-in}
.raa-zoom-img{transition:transform .35s cubic-bezier(.22,1,.36,1);will-change:transform}
.raa-zoom-img.is-zoomed{transform:scale(2)}
.raa-zoom-hint{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.92);color:#1f1712;font-size:12.5px;font-weight:500;box-shadow:0 8px 22px rgba(31,23,18,.14);pointer-events:none;transition:opacity .25s}
.raa-zoom-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.raa-zoom-main:hover .raa-zoom-hint{opacity:0}
@media (hover:none){.raa-zoom-img.is-zoomed{transform:none}.raa-zoom-main:hover .raa-zoom-hint{opacity:1}.raa-zoom-hint{font-size:0;gap:0;padding:10px}}
@media (max-width:640px){.raa-zoom-img{height:420px!important}}

/* ---------- Lightbox ---------- */
.raa-lb{position:fixed;inset:0;z-index:10050;display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:1fr auto;align-items:center;background:rgba(22,16,12,.94);animation:raa-lb-in .25s ease}
@keyframes raa-lb-in{from{opacity:0}to{opacity:1}}
.raa-lb-stage{grid-column:2;grid-row:1;height:100%;max-height:calc(100vh - 150px);margin-top:24px;display:grid;place-items:center;overflow:hidden;cursor:zoom-in;touch-action:pan-y}
.raa-lb-stage img{max-width:100%;max-height:calc(100vh - 150px);object-fit:contain;border-radius:18px;user-select:none;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.raa-lb-stage.is-zoomed{cursor:zoom-out;touch-action:none}
.raa-lb-stage.is-zoomed img{transform:scale(2.4)}
.raa-lb-close{position:absolute;top:18px;right:20px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:2;transition:background .2s}
.raa-lb-close:hover,.raa-lb-nav:hover{background:#b68b2d;border-color:#b68b2d}
.raa-lb-nav{width:46px;height:46px;justify-self:center;grid-row:1;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:30px;line-height:1;cursor:pointer;transition:background .2s}
.raa-lb-prev{grid-column:1}.raa-lb-next{grid-column:3}
.raa-lb-bar{grid-column:1/-1;grid-row:2;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px 18px}
.raa-lb-count{color:rgba(255,255,255,.75);font-size:13px;letter-spacing:.04em}
.raa-lb-thumbs{display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:2px}
.raa-lb-thumbs button{flex:0 0 56px;height:56px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.raa-lb-thumbs button.is-active,.raa-lb-thumbs button:hover{opacity:1;border-color:#d5b16b}
.raa-lb-thumbs img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.raa-lb{grid-template-columns:44px 1fr 44px}.raa-lb-nav{width:38px;height:38px;font-size:24px}.raa-lb-thumbs button{flex-basis:46px;height:46px}}

/* ---------- Colours & styles tiles ---------- */
.raa-swatches{margin-top:28px}
.raa-swatches-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.raa-swatches-head h3{margin:0;font-weight:600;font-size:16px;color:#1f1712}
.raa-swatches-head span{font-size:13px;color:#8c7458}
.raa-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;max-width:560px}
.raa-swatch{position:relative;display:flex;flex-direction:column;border:1px solid #eadfce;border-radius:16px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.raa-swatch:hover{border-color:#b68b2d;transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,23,18,.08)}
.raa-swatch-img{display:block;aspect-ratio:1/1;background:#f7f2eb}
.raa-swatch-img img{width:100%;height:100%;object-fit:cover}
.raa-swatch-price{padding:7px 10px 9px;font-size:13px;color:#1f1712}
.raa-swatch.is-active{border-color:#1f1712;box-shadow:inset 0 -3px 0 #1f1712}
.raa-swatch.is-active::after{content:"";position:absolute;left:50%;bottom:3px;transform:translateX(-50%);border:6px solid transparent;border-bottom-color:#1f1712}

/* ---------- Description / Details accordions ---------- */
.raa-acc{margin-top:36px;border-top:1px solid #e3d5c3}
.raa-acc details{border-bottom:1px solid #e3d5c3}
.raa-acc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 2px;cursor:pointer;list-style:none;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1f1712}
.raa-acc summary::-webkit-details-marker{display:none}
.raa-acc summary::after{content:"";width:9px;height:9px;margin-right:4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .3s ease}
.raa-acc details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.raa-acc summary:hover{color:#b68b2d}
.raa-acc-body{padding:2px 2px 22px;color:#5f5144;font-size:15.5px;line-height:1.75;animation:raa-acc-in .3s ease}
@keyframes raa-acc-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.raa-acc-body p{margin:0 0 12px}
.raa-acc-body ul{margin:0 0 14px;padding-left:20px;list-style:disc}
.raa-acc-body li{margin:4px 0}
.raa-acc-body li::marker{color:#b68b2d}
.raa-acc-title{font-weight:600;color:#1f1712}
.raa-acc-sub{font-weight:600;color:#1f1712;margin-top:6px!important}
.raa-acc-note{font-size:13.5px;color:#8c7458}

/* keep the product page inside the screen on phones */
.raa-product-media,.raa-product-media + div{min-width:0}
.raa-zoom-main,.raa-zoom-img{max-width:100%}

/* ===== 03 Nov 2026 (B): product page layout like reference, smooth accordions ===== */
/* two-column layout: image grid left, details right */
@media (min-width:1024px){
  .raa-pdp{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}
  .raa-pdp-info{position:sticky;top:150px}
}
.raa-pdp-info h1{font-size:clamp(2.1rem,3.2vw,2.9rem)!important;line-height:1.15!important}

/* image grid: 2 per row, standard square tiles */
.raa-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.raa-gallery.is-single{grid-template-columns:minmax(0,1fr);max-width:560px}
.raa-tile{border-radius:22px;border:1px solid #eadfce;background:#fff}
.raa-tile-img{display:block;width:100%;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:inherit}
.raa-gallery .raa-zoom-hint{display:none}
.raa-gallery .raa-tile:first-child .raa-zoom-hint{display:inline-flex}
@media (max-width:640px){
  .raa-gallery{gap:8px}
  .raa-gallery .raa-tile:first-child{grid-column:1/-1}
  .raa-tile{border-radius:16px}
}

/* accordions: smooth open / close */
.raa-acc-item{border-bottom:1px solid #e3d5c3}
.raa-acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:18px 2px;border:0;background:transparent;cursor:pointer;text-align:left;font:inherit;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1f1712;transition:color .25s}
.raa-acc-head:hover{color:#b68b2d}
.raa-acc-head::after{content:"";flex:0 0 auto;width:9px;height:9px;margin-right:4px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.raa-acc-item.is-open .raa-acc-head::after{transform:translateY(2px) rotate(-135deg)}
.raa-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.raa-acc-item.is-open .raa-acc-panel{grid-template-rows:1fr}
.raa-acc-inner{min-height:0;overflow:hidden}
.raa-acc-item .raa-acc-body{animation:none;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.raa-acc-item.is-open .raa-acc-body{opacity:1;transform:none;transition-delay:.08s}
@media (prefers-reduced-motion:reduce){.raa-acc-panel,.raa-acc-body,.raa-acc-head::after{transition:none!important}}

/* ===== 03 Nov 2026 (C): left images stay in view while the details scroll ===== */
@media (min-width:1024px){
  .raa-pdp{align-items:start}
  .raa-pdp-info{position:static;top:auto}
  .raa-product-media{position:sticky;top:var(--raa-media-top,150px);align-self:start}
}