/* ===========================================================================
   Desked Up — site-wide header & footer (chrome)
   Place at: /assets/css/deskedup-chrome.css  (enqueued on every page)
   Tokens are scoped to .du-chrome so they never leak into Woodmart styles.
   ========================================================================= */

.du-chrome{
  --ink:#0D0625; --ink-2:#160E36; --ink-3:#211748;
  --gold:#C8A14E; --gold-soft:#E2C786; --gold-deep:#9C7B33;
  --text-invert:#EDE7DC; --muted-invert:#A99FC0;
  --maxw:1240px;
  font-family:"Hanken Grotesk",system-ui,sans-serif;
}
.du-chrome *{box-sizing:border-box}
.du-chrome a{text-decoration:none;color:inherit}
.du-chrome img{display:block;max-width:100%}
.du-chrome button{font-family:inherit;cursor:pointer;border:none;background:none}
.du-chrome :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
.du-wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.du-mono{font-family:"Space Mono",ui-monospace,monospace}

.du-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#231703;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.du-skip:focus{left:0}

/* ---------------------------- HEADER ---------------------------- */
.du-header{background:var(--ink);color:var(--text-invert);position:sticky;top:0;z-index:90;border-bottom:1px solid rgba(200,161,78,.14)}

.du-util{background:var(--ink);color:var(--muted-invert);font-size:12px;border-bottom:1px solid rgba(255,255,255,.06)}
.du-util .du-wrap{display:flex;align-items:center;justify-content:space-between;height:38px;gap:18px}
.du-disc{display:flex;align-items:center;gap:8px;color:var(--gold-soft);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0}
.du-disc svg{flex:none}
.du-util-right{display:flex;gap:18px;flex:none}
.du-util-right a:hover{color:var(--gold-soft)}

.du-head-main{display:flex;align-items:center;gap:26px;height:84px}
.du-brand{display:flex;flex-direction:column;line-height:.9;flex:none}
.du-mark{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:25px;letter-spacing:.02em;color:var(--text-invert)}
.du-mark b{color:var(--gold);font-weight:600}
.du-tag{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--muted-invert);margin-top:5px;padding-left:2px}

.du-search{flex:1;display:flex;align-items:center;background:var(--ink-2);border:1px solid rgba(200,161,78,.18);border-radius:100px;padding:5px 6px 5px 18px;transition:border-color .25s,box-shadow .25s;margin:0}
.du-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,161,78,.14)}
.du-sel{position:relative;flex:none}
.du-search select{appearance:none;-webkit-appearance:none;background:transparent;border:none;color:var(--text-invert);font-family:inherit;font-size:13px;font-weight:500;padding:6px 26px 6px 12px;border-left:1px solid rgba(255,255,255,.1);cursor:pointer}
.du-sel:first-child select{border-left:none}
.du-search select option{color:#111}
.du-sel::after{content:"";position:absolute;right:11px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--gold-soft);border-bottom:1.6px solid var(--gold-soft);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.du-search input[type=search]{flex:1;background:transparent;border:none;color:var(--text-invert);font-family:inherit;font-size:14.5px;padding:8px 14px;min-width:60px}
.du-search input::placeholder{color:var(--muted-invert)}
.du-search input:focus{outline:none}
.du-search-go{background:var(--gold);color:#231703;width:40px;height:40px;border-radius:100px;display:grid;place-items:center;flex:none;transition:background .2s,transform .2s}
.du-search-go:hover{background:var(--gold-soft);transform:scale(1.05)}

.du-head-actions{display:flex;align-items:center;gap:8px;flex:none}
.du-icon-link{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px;font-size:13.5px;font-weight:500;color:var(--text-invert);transition:background .2s}
.du-icon-link:hover{background:var(--ink-2)}
.du-badge{background:var(--gold);color:#231703;font-size:10px;font-weight:700;border-radius:100px;padding:1px 6px;min-width:18px;text-align:center}

.du-subnav{border-top:1px solid rgba(255,255,255,.06)}
.du-subnav-inner{display:flex;align-items:center;gap:6px;height:50px}
.du-browse{position:relative}
.du-browse-btn{display:flex;align-items:center;gap:10px;background:var(--gold);color:#231703;font-weight:600;font-size:13.5px;padding:9px 18px;border-radius:8px;margin-right:14px}
.du-caret{transition:transform .2s}
.du-browse.open .du-caret{transform:rotate(180deg)}
.du-browse-menu{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid #e7e1d4;border-radius:12px;box-shadow:0 24px 50px -20px rgba(13,6,37,.4);padding:8px;min-width:280px;display:none;z-index:120}
.du-browse.open .du-browse-menu{display:block}
.du-browse-menu a{display:block;padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:500;color:#1C1633;transition:background .15s,color .15s}
.du-browse-menu a:hover{background:#F6F3EC;color:var(--gold-deep)}

.du-nav-links{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.du-nav-links li{margin:0}
.du-nav-links a{display:block;font-size:14px;font-weight:500;padding:9px 16px;border-radius:8px;color:var(--text-invert);transition:background .2s,color .2s}
.du-nav-links a:hover,.du-nav-links .current-menu-item>a{background:var(--ink-2);color:var(--gold-soft)}
.du-nav-spacer{flex:1}
.du-nav-pill{font-size:12.5px;color:var(--muted-invert);display:flex;align-items:center;gap:8px}
.du-nav-pill b{color:var(--gold-soft);font-weight:600}

.du-burger{display:none;width:44px;height:44px;border-radius:10px;background:var(--ink-2);place-items:center;flex:none}
.du-burger span,.du-burger span::before,.du-burger span::after{display:block;width:20px;height:2px;background:var(--gold-soft);position:relative;transition:transform .25s,opacity .2s}
.du-burger span::before,.du-burger span::after{content:"";position:absolute;left:0}
.du-burger span::before{top:-6px}.du-burger span::after{top:6px}
.du-burger[aria-expanded="true"] span{background:transparent}
.du-burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.du-burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.du-mobile{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.08)}
.du-mobile .du-mobile-links{list-style:none;margin:0;padding:8px 16px}
.du-mobile .du-mobile-links a,.du-mobile-acct{display:block;padding:14px 8px;font-size:15px;font-weight:500;color:var(--text-invert);border-bottom:1px solid rgba(255,255,255,.06)}
.du-mobile-acct{padding:16px;color:var(--gold-soft)}

/* ---------------------------- FOOTER ---------------------------- */
.du-footer{background:var(--ink);color:var(--muted-invert);padding:60px 0 0;margin-top:0}
.du-foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.08)}
.du-foot-brand .du-mark{font-size:26px}
.du-foot-brand p{font-size:13.5px;max-width:280px;margin:14px 0 20px;line-height:1.6}
.du-foot-social{display:flex;gap:10px}
.du-foot-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(200,161,78,.25);display:grid;place-items:center;color:var(--gold-soft);transition:background .2s,border-color .2s,transform .2s}
.du-foot-social a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-3px)}
.du-foot-col h5{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 16px}
.du-foot-col a{display:block;font-size:13.5px;padding:6px 0;transition:color .2s}
.du-foot-col a:hover{color:var(--gold-soft)}
.du-foot-disc{font-size:12px;color:var(--muted-invert);padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08);line-height:1.6;max-width:880px;margin:0}
.du-foot-bot{display:flex;justify-content:space-between;align-items:center;padding:20px 0 30px;font-size:12px;flex-wrap:wrap;gap:12px}
.du-foot-bot .du-mono{color:var(--gold-soft)}

/* ---------------------------- RESPONSIVE ---------------------------- */
@media(max-width:1080px){
  .du-search{order:3;flex-basis:100%;margin-top:0}
}
@media(max-width:900px){
  .du-disc{display:none}
  .du-util .du-wrap{justify-content:flex-end}
  .du-head-main{height:auto;padding:5px 0;flex-wrap:wrap}
  .du-search{order:3;flex-basis:100%}
  .du-sel{display:none}
  .du-nav-links,.du-nav-pill,.du-browse-btn .lbl{display:none}
  .du-icon-link span{display:none}
  .du-burger{display:grid}
  .du-subnav-inner{height:auto;padding:8px 0}
  .du-foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .du-foot-top{grid-template-columns:1fr}
  .du-foot-bot{flex-direction:column;align-items:flex-start}
.du-tag {
    font-size: 6.5px;
    letter-spacing: .14em;
}
.du-mark {
    font-size: 17px;
}
body .du-header .du-search input[type="search"] {
    min-width: 180px !important;
}
.du-search input[type=search] {
    padding: 2px 14px;
}
.du-head-main {
    gap: 10px;
}
.du-brand {
    flex: 1;
}
}
@media(prefers-reduced-motion:reduce){
  .du-chrome *{transition:none !important}
}

/* =========================================================================
   FRONT-END FIXES — override theme defaults that were winning on the live site
   ========================================================================= */

/* Country/Condition selects: kill the white "pill" look the theme applied,
   so they read as plain inline text + caret inside the dark search bar. */
.du-header .du-search .du-sel select{
  background:transparent !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--text-invert) !important;
  height:auto !important;
  min-height:0 !important;
  line-height:normal !important;
  min-width:0 !important;
  margin:0 !important;
}
.du-header .du-search .du-sel select option{color:#1C1633}
.du-header .du-search input[type="search"]{min-width:120px}

/* Nav links + Browse button: force full-contrast colors over theme's link color */
.du-header .du-nav-links a{color:var(--text-invert) !important}
.du-header .du-nav-links a:hover{color:var(--gold-soft) !important}
.du-header .du-nav-links .current-menu-item > a,
.du-header .du-nav-links .current_page_item > a{background:transparent !important;color:var(--text-invert) !important}
.du-header .du-browse-btn{background:var(--gold) !important;color:#231703 !important}
.du-header .du-browse-btn .lbl,.du-header .du-browse-btn svg{color:#231703 !important}

/* Burger stays hidden on desktop, shows on mobile only */
.du-header .du-burger{display:none}
@media(max-width:900px){.du-header .du-burger{display:grid}}

/* =========================================================================
   PRODUCT CARDS ON SHOP & CATEGORY PAGES
   Applies the homepage card design to Woodmart's .wd-product on WooCommerce
   shop/archive pages. Loads site-wide (this file is enqueued everywhere).
   Literal colors used because the chrome tokens are scoped to .du-chrome.
   Column count is intentionally NOT forced, so your Shop keeps its own layout.
   ========================================================================= */
body.woocommerce .products .wd-product,
body.woocommerce-page .products .wd-product{
  padding:14px !important;
  background:#fff !important;
  border:1px solid #E7E1D4;
  border-radius:14px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.21,.6,.35,1),box-shadow .3s,border-color .3s;
}
body.woocommerce .products .wd-product:hover,
body.woocommerce-page .products .wd-product:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px -22px rgba(13,6,37,.45);
  border-color:#C8A14E;
}
body.woocommerce .products .wd-product .product-image-link img,
body.woocommerce-page .products .wd-product .product-image-link img{background:#fff;border-radius:8px}

/* garnet sale badge */
body.woocommerce .products .onsale,
body.woocommerce .products .product-label,
body.woocommerce .products .product-labels span,
body.woocommerce-page .products .onsale,
body.woocommerce-page .products .product-label{
  background:#8E2A3E !important;color:#fff !important;border-radius:6px !important;
  font-family:"Space Mono",monospace;font-weight:700;
}

/* prices: ink + mono, struck original muted */
body.woocommerce .products .price,
body.woocommerce-page .products .price{color:#1C1633 !important;font-family:"Space Mono",monospace}
body.woocommerce .products .price del,
body.woocommerce-page .products .price del{color:#6E667F !important}
body.woocommerce .products .price ins,
body.woocommerce-page .products .price ins{text-decoration:none}

/* category eyebrow + title to match the comp */
body.woocommerce .products .wd-product-cats a,
body.woocommerce-page .products .wd-product-cats a{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9C7B33}
body.woocommerce .products .wd-entities-title,
body.woocommerce-page .products .wd-entities-title{font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:14.5px;line-height:1.32}

/* tidy the WCFM "sold by" store row */
body.woocommerce .products .wcfmmp_sold_by_label,
body.woocommerce-page .products .wcfmmp_sold_by_label{color:#6E667F;font-size:11.5px}
body.woocommerce .products .wcfmmp_sold_by_logo,
body.woocommerce-page .products .wcfmmp_sold_by_logo{width:18px !important;height:18px !important;border-radius:50% !important;object-fit:cover}
body.woocommerce .products .wcfm_dashboard_item_title,
body.woocommerce-page .products .wcfm_dashboard_item_title{font-size:11.5px;color:#6E667F !important}

/* NOTE: the Country / Item-Type box is intentionally KEPT on Shop/Category
   (it's useful catalog info you built). To hide it there too for exact parity
   with the homepage, uncomment:
   body.woocommerce .products .product-acf-fields{display:none !important} */

/* =========================================================================
   HEADER TUNING — search field balance (desktop) + mobile spacing/categories
   ========================================================================= */

/* Desktop: shrink the Country select (it was auto-sizing to its widest country
   option) so the main search input grows into the freed space. */
.du-header .du-search select[name="filter_country"]{
  width:130px !important; max-width:130px !important;
  text-overflow:ellipsis; white-space:nowrap;
}
.du-header .du-search select[name="filter_item_type"]{
  width:140px !important; max-width:140px !important;
  text-overflow:ellipsis; white-space:nowrap;
}
.du-header .du-search input[type="search"]{
  flex:1 1 auto !important; min-width:240px !important;
}

@media(max-width:900px){
  /* Breathing room on the sides of every header row */
  .du-header .du-wrap{padding-left:18px !important; padding-right:18px !important}

  /* Browse Categories → full-width, centered, label restored */
  .du-header .du-subnav-inner{justify-content:center; padding:10px 0}
  .du-header .du-browse{width:100%}
  .du-header .du-browse-btn{width:100%; justify-content:center; margin-right:0; padding:12px 18px}
  .du-header .du-browse-btn .lbl{display:inline-flex !important}
  .du-header .du-browse-menu{left:0; right:0; min-width:0; width:100%}
}