/* Suzhou Threads — WP chrome layer. Page partials (assets/css/pages/*.css)
 * carry the full prototype styling incl. :root tokens; this file adds only
 * WordPress / commerce chrome that exists in none of the prototypes:
 * skip-link, admin-bar offset, cart flag in the header, concierge float,
 * screen-reader helpers, WP content alignment.
 */

.skip-link{position:absolute;left:-9999px;top:0;z-index:100000;background:var(--ink,#1C2B4A);color:var(--silk,#FAF7F1);padding:12px 20px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip-link:focus{left:8px;top:8px}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}

body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}

/* ---- cart flag in header (not in prototypes: added for commerce) ---- */
.cart-flag{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;transition:color var(--t-fast,150ms) ease;text-decoration:none;flex-shrink:0}
.site-header .cart-flag{color:rgba(250,247,241,.85)}
.site-header .cart-flag:hover{color:var(--gold-light,#D8BE7F)}
#hd .cart-flag{color:var(--ink,#1C2B4A);margin-left:auto}
#hd .cart-flag:hover{color:var(--gold-deep,#8A6A2F)}
.cart-flag-count{position:absolute;top:2px;right:-2px;min-width:17px;height:17px;border-radius:9px;background:var(--cinnabar,#9E3B34);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 4px;letter-spacing:0}
.site-header.scrolled .cart-flag{color:var(--stone,#6E6A63)}
.site-header.scrolled .cart-flag:hover{color:var(--gold-deep,#8A6A2F)}
#hd.scrolled .cart-flag{color:var(--ink,#1C2B4A)}
@media(max-width:1023px){.cart-flag{width:44px;height:44px}}
@media(max-width:480px){.cart-flag{width:40px;height:40px}}

/* ---- concierge floating entry (plan §3.4) ---- */
.st-float{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:9px;background:var(--ink,#1C2B4A);color:var(--silk,#FAF7F1);border:1px solid rgba(216,190,127,.4);padding:12px 16px 12px 13px;border-radius:999px;text-decoration:none;box-shadow:var(--shadow-lift,0 16px 40px rgba(20,33,58,.16));font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:transform var(--t-fast,150ms) var(--ease-out,cubic-bezier(.16,1,.3,1)),background var(--t-norm,300ms) ease}
.st-float:hover{background:var(--gold,#B48A3C);color:var(--ink-deep,#14213A);transform:translateY(-2px)}
.st-float .st-float-ico{display:inline-flex}
@media(max-width:640px){.st-float .st-float-label{display:none}.st-float{padding:13px;border-radius:50%}}
[data-reveal].st-float{opacity:0;transform:translateY(26px)}

/* ---- WP / editor content ---- */
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{display:block;margin:24px auto}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{color:var(--stone,#6E6A63);font-size:.8125rem;letter-spacing:.04em;text-align:center;padding-top:8px}
.st-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(150deg,var(--ink-deep,#14213A),var(--ink,#1C2B4A) 65%,var(--ink-soft,#2E4165))}
.st-ph svg{width:56%;height:auto}
img{height:auto}

/* wp_nav_menu renders <li> wrappers; the prototypes use bare <a> only.
   Lay out the ul/li as a row and treat the current item like the prototype's .active. */
nav.main ul,.site-header .main-nav ul{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
nav.main li,.site-header .main-nav li{margin:0;padding:0}
nav.main li a,.site-header .main-nav li a{display:inline-block}
nav.main li.current-menu-item>a,nav.main li.current_page_item>a,nav.main li.current-menu-ancestor>a{color:var(--gold-deep,#8A6A2F);position:relative}
nav.main li.current-menu-item>a::after,nav.main li.current_page_item>a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold,#B48A3C)}
.site-header .main-nav li.current-menu-item>a,.site-header .main-nav li.current_page_item>a{color:var(--gold-light,#D8BE7F);position:relative}
.site-header .main-nav li.current-menu-item>a::after,.site-header .main-nav li.current_page_item>a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold-light,#D8BE7F)}
.site-header.scrolled .main-nav li.current-menu-item>a,.site-header.scrolled .main-nav li.current_page_item>a{color:var(--gold-deep,#8A6A2F)}
.site-header.scrolled .main-nav li.current-menu-item>a::after{background:var(--gold,#B48A3C)}
.site-header .main-nav>a.active{color:var(--gold-light,#D8BE7F);position:relative}
.site-header .main-nav>a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold-light,#D8BE7F)}
.site-header.scrolled .main-nav>a.active{color:var(--gold-deep,#8A6A2F)}
.site-header.scrolled .main-nav>a.active::after{background:var(--gold,#B48A3C)}
/* the desktop nav flex container lives around the <ul> child */
nav.main,nav.main ul{margin:0;padding:0}
nav.main ul{gap:32px}
@media(max-width:1200px){nav.main ul{gap:22px}}
@media(max-width:1080px){nav.main ul{gap:14px}}

/* ---- header density guards: prevent nav / cart / CTA crowding or overlap ---- */
#hd .hd-wrap,.site-header .hd-inner{min-width:0}
#hd nav.main{min-width:0;flex-wrap:nowrap}
#hd nav.main a,.site-header .main-nav a{white-space:nowrap}
@media(max-width:1200px){
  #hd nav.main{gap:22px}
  #hd .hd-cta{padding:11px 18px;font-size:11px}
  .site-header .main-nav{gap:26px}
}
@media(max-width:1080px){
  #hd nav.main{gap:14px}
  #hd nav.main a{font-size:10.5px;letter-spacing:.12em}
  #hd .hd-cta{font-size:10.5px;padding:11px 13px;letter-spacing:.12em}
  .site-header .main-nav a{font-size:11.5px;letter-spacing:.09em}
  .site-header .main-nav{gap:20px}
  .site-header .hd-cta{font-size:10.5px;padding:12px 15px;letter-spacing:.1em}
}

/* mobile menu: wp_nav_menu <li> wrappers → flush list, keep prototype look */
.mobile-menu ul,.m-links ul{display:block;list-style:none;margin:0;padding:0}
.mobile-menu li,.m-links li{margin:0;padding:0}

/* ensure the menu is always a single horizontal row (wp_nav_menu emits <li>
   directly under <nav> — some page partials omit nav.main{display:flex}) */
nav.main{display:flex;align-items:center;gap:32px;margin:0;padding:0}
/* home variant: only lay out as a row on desktop, and NEVER override the
   prototype's mobile hide (≤1023px) — that was causing the nav to spill out */
@media(min-width:1024px){.site-header .main-nav{display:flex;align-items:center;gap:34px;margin:0;padding:0}}
nav.main li,.site-header .main-nav li{list-style:none;margin:0;padding:0}
nav.main{margin:0;padding:0}

/* generous min gap between logo / menu / cart / CTA so nav never sits on
   adjacent elements (space-between + auto-margin alone can collapse gaps) */
#hd .hd-wrap{gap:26px}
.site-header .hd-inner{gap:26px}
@media(max-width:1200px){#hd .hd-wrap{gap:18px}.site-header .hd-inner{gap:18px}}
@media(max-width:1080px){#hd .hd-wrap{gap:12px}.site-header .hd-inner{gap:12px}}

/* footer payment badges wrap on small screens (was overflowing /collections/ @390) */
.pay,.pay-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media(max-width:480px){
  .pay span,.pay-row .pay-chip{font-size:9px;padding:3px 6px}
  .ft-bar{flex-wrap:wrap;justify-content:center;text-align:center}
}

/* ===== inner pages: menu spacing matches the HOME menu (.main-nav gap 34) ===== */
#hd nav.main{align-items:center;gap:34px}
#hd nav.main a{font-size:12.5px;letter-spacing:.12em}
@media(max-width:1023px){#hd nav.main{display:none}}

/* inner pages: give the logo breathing room before the menu; keep logo intact */
#hd .logo{white-space:nowrap;flex-shrink:0;margin-right:4px}
#hd nav.main{margin-left:44px}
@media(max-width:1200px){#hd nav.main{margin-left:30px}}
@media(max-width:1080px){#hd nav.main{margin-left:16px}}

/* mobile: keep the header controls (cart + burger) inset from the edges */
@media(max-width:1020px){
  #hd .hd-wrap{padding-left:20px;padding-right:20px}
}