/* Conversion / navigation enhancements layered after tuning.css */

/* Three-column header: logo | main navigation | languages */
.site-header{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr)!important;
  align-items:center!important
}
.site-header>.nav-shell{display:contents!important}
.site-header .wordmark{grid-column:1;justify-self:start}
.site-header .main-nav{
  grid-column:2;
  justify-self:center;
  justify-content:center;
  min-width:0
}

/* Language switcher: same editorial language as main navigation. */
.language-switcher{
  position:static;
  grid-column:3;
  justify-self:end;
  z-index:4;
  display:flex;
  align-items:center;
  gap:0;
  font-family:var(--display-font);
  font-size:clamp(16px,1.25vw,21px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  text-transform:none;
  color:rgba(255,255,255,.62)
}
.language-switcher a{position:relative;padding:8px 17px;transition:color .2s ease,opacity .2s ease;white-space:nowrap}
.language-switcher a:first-child{padding-left:0}
.language-switcher a:last-child{padding-right:0}
.language-switcher a+a::before{content:"|";position:absolute;left:0;color:rgba(255,255,255,.22);pointer-events:none}
.language-switcher a:hover{color:rgba(255,255,255,.96)}
body.light-theme .language-switcher{color:rgba(17,18,20,.58)}
body.light-theme .language-switcher a+a::before{color:rgba(17,18,20,.20)}
body.light-theme .language-switcher a:hover{color:#111214}

/* Global saved dresses entry in the main navigation */
.saved-nav-button{
  position:relative;
  border:0;
  background:transparent;
  color:#c77fa8;
  padding:8px 0;
  font-family:var(--display-font);
  font-size:clamp(16px,1.25vw,21px);
  letter-spacing:-.02em;
  white-space:nowrap;
  cursor:pointer;
  transition:color .22s ease,opacity .22s ease
}
.saved-nav-button[hidden]{display:none!important}
.saved-nav-button:hover{color:#e2a3c6}
.saved-nav-button::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor;transition:right .25s ease}.saved-nav-button:hover::after{right:0}
.saved-nav-button .saved-count{font-family:Inter,sans-serif;font-size:.68em;letter-spacing:.02em;opacity:.78;margin-left:3px}
body.light-theme .saved-nav-button{color:#7a315d}
body.light-theme .saved-nav-button:hover{color:#9a4776}

/* Saved dresses drawer */
.saved-overlay{position:fixed;inset:0;z-index:310;background:rgba(4,5,6,.56);backdrop-filter:blur(5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s ease}
.saved-overlay.open{opacity:1;visibility:visible;pointer-events:auto}
.saved-drawer{position:absolute;right:0;top:0;bottom:0;width:min(470px,92vw);background:#101214;border-left:1px solid rgba(255,255,255,.10);padding:28px;overflow:auto;transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.75,.2,1)}
.saved-overlay.open .saved-drawer{transform:none}
.saved-drawer-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.10)}
.saved-drawer-head h2{margin:0;font-family:var(--display-font);font-size:34px;font-weight:400;line-height:1;letter-spacing:var(--display-letter)}
.saved-drawer-head p{margin:8px 0 0;color:rgba(244,241,236,.52);font-size:var(--text-min)}
.saved-drawer-close{width:48px;height:48px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:transparent;color:#fff;font-size:29px;line-height:1;cursor:pointer}
.saved-list{display:flex;flex-direction:column;gap:12px;padding-top:18px}
.saved-item{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:15px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.025)}
.saved-item img{width:92px;height:118px;object-fit:cover;border-radius:9px;filter:saturate(.82) brightness(.88)}
.saved-item-copy{min-width:0}
.saved-item-copy small{display:block;margin-bottom:6px;color:rgba(244,241,236,.45);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.saved-item-copy a{font-family:var(--display-font);font-size:24px;line-height:1.05;border-bottom:1px solid transparent}
.saved-item-copy a:hover{border-color:currentColor}
.saved-remove{align-self:start;border:0;background:transparent;color:rgba(244,241,236,.42);font-size:22px;cursor:pointer;padding:4px 5px}
.saved-remove:hover{color:#9f3034}
.saved-empty{padding:36px 4px;color:rgba(244,241,236,.52);font-size:var(--text-min);line-height:1.55}
body.light-theme .saved-drawer{background:#f1efea;border-left-color:rgba(0,0,0,.11);color:#111214}
body.light-theme .saved-drawer-head{border-bottom-color:rgba(0,0,0,.11)}
body.light-theme .saved-drawer-head p,body.light-theme .saved-empty{color:rgba(17,18,20,.55)}
body.light-theme .saved-drawer-close{border-color:rgba(0,0,0,.17);color:#111214}
body.light-theme .saved-item{border-color:rgba(0,0,0,.10);background:rgba(0,0,0,.025)}
body.light-theme .saved-item-copy small{color:rgba(17,18,20,.46)}
body.light-theme .saved-remove{color:rgba(17,18,20,.42)}

/* Center collection links */
.collection-links-stack{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.collection-link-wrap{justify-content:center!important}
.collection-links-stack>a,.collection-link-wrap>a{text-align:center}

/* Replace blind native scroll with an explicit editorial progress control */
.collection-grid{scrollbar-width:none!important;padding-bottom:4px!important}
.collection-grid::-webkit-scrollbar{display:none!important}
.collection-scroll-ui{display:grid;grid-template-columns:42px minmax(120px,1fr) auto 42px;align-items:center;gap:13px;margin-top:17px;color:var(--muted)}
.collection-scroll-btn{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font-size:20px;cursor:pointer;transition:background .22s ease,border-color .22s ease,opacity .22s ease}
.collection-scroll-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28)}
.collection-scroll-btn:disabled{opacity:.25;cursor:default}
.collection-scroll-track{position:relative;height:2px;background:var(--line);overflow:hidden}
.collection-scroll-thumb{position:absolute;left:0;top:0;height:100%;min-width:24px;background:var(--ink);transform:translateX(0);will-change:transform,width;transition:width .18s ease}
.collection-scroll-count{min-width:72px;text-align:center;font:400 14px Inter,sans-serif;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--muted)}
body.light-theme .collection-scroll-btn:hover{background:rgba(0,0,0,.045);border-color:rgba(0,0,0,.28)}

/* Lightbox: stronger affordances */
#closeBtn{width:62px!important;height:62px!important;border-radius:50%!important;font-size:40px!important;line-height:1!important;background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.30)!important;box-shadow:0 7px 28px rgba(0,0,0,.24);display:grid!important;place-items:center!important;padding:0!important}
#closeBtn .lb-close-glyph{display:grid;place-items:center;width:100%;height:100%;line-height:1;transform:translateY(1px);font-family:Arial,Helvetica,sans-serif;font-weight:300}
#closeBtn:hover{background:#f2efe9!important;color:#08090a!important;border-color:#f2efe9!important}
#prevBtn,#nextBtn{width:66px!important;height:66px!important;border-radius:50%!important;font-size:31px!important;background:rgba(10,11,12,.52)!important;border-color:rgba(255,255,255,.28)!important;backdrop-filter:blur(10px)}
#prevBtn{left:24px!important}#nextBtn{right:24px!important}
#prevBtn:hover,#nextBtn:hover{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.48)!important}
.lightbox.open .lb-stage{cursor:zoom-out}
.lightbox.open .lb-stage img{cursor:zoom-in}
.lb-wheel-hint{opacity:.62}

/* Prevent the utility links from colliding with the right-hand actions. */
.content-shell{container-type:inline-size}
@container (max-width:1780px){
  .intro{grid-template-columns:minmax(300px,1fr) auto auto!important;grid-template-rows:auto auto auto!important}
  .intro .eyebrow{grid-column:1;grid-row:1}
  .intro .heading-line{grid-column:1;grid-row:2}
  .product-actions{grid-column:2;grid-row:2!important;justify-self:end}
  .back-btn{grid-column:3;grid-row:2!important}
  .dress-facts{grid-column:1/4!important;grid-row:3!important;justify-self:center!important;margin-top:12px!important}
}
@container (max-width:1120px){
  .intro{grid-template-columns:minmax(260px,1fr) auto!important;grid-template-rows:auto auto auto auto!important}
  .product-actions{grid-column:2;grid-row:2!important}
  .back-btn{grid-column:2;grid-row:3!important;margin-top:9px!important}
  .dress-facts{grid-column:1/3!important;grid-row:4!important}
}

/* When the header gets tight, keep logo/languages on top and center menu below. */
@media(max-width:1180px){
  .site-header{
    grid-template-columns:minmax(190px,1fr) auto!important;
    grid-template-rows:auto auto!important;
    height:auto!important;
    padding-top:11px!important;
    padding-bottom:9px!important
  }
  .site-header .wordmark{grid-column:1;grid-row:1}
  .language-switcher{grid-column:2;grid-row:1}
  .site-header .main-nav{
    grid-column:1/3;
    grid-row:2;
    justify-self:center;
    margin-top:3px
  }
  main{padding-top:calc(var(--header-h) + 38px)}
}

@media(max-width:760px){
  .site-header{
    grid-template-columns:minmax(150px,1fr) auto!important;
    grid-template-rows:auto auto!important
  }
  .site-header .wordmark{grid-column:1;grid-row:1;margin-bottom:7px}
  .language-switcher{grid-column:2;grid-row:1;font-size:16px}
  .language-switcher a{padding-left:11px;padding-right:11px}
  .language-switcher a:first-child{padding-left:0}
  .language-switcher a:last-child{padding-right:0}
  .site-header .main-nav{grid-column:1/3;grid-row:2;justify-self:stretch;justify-content:flex-start;margin-top:0}
  main{padding-top:0!important}
  .saved-nav-button{font-size:16px;flex:0 0 auto}
  .saved-drawer{padding:20px;width:min(410px,94vw)}
  .saved-drawer-head h2{font-size:30px}
  .saved-item{grid-template-columns:74px minmax(0,1fr) auto;gap:11px}
  .saved-item img{width:74px;height:98px}
  .saved-item-copy a{font-size:21px}
  .collection-scroll-ui{grid-template-columns:38px minmax(80px,1fr) auto 38px;gap:9px}
  .collection-scroll-btn{width:38px;height:38px}
  #closeBtn{width:54px!important;height:54px!important;font-size:34px!important}
  #closeBtn .lb-close-glyph{transform:translateY(1px)}
  #prevBtn,#nextBtn{width:54px!important;height:54px!important;font-size:26px!important}
  #prevBtn{left:10px!important}#nextBtn{right:10px!important}
}