/*
Theme Name: Wander Boutique
Theme URI: https://wanderboutique.example
Author: Wander Boutique
Author URI: https://wanderboutique.example
Description: A modern, chic, WooCommerce-free boutique theme for women's and men's apparel, dresses, accessories and seasonal wear. Built-in product management, cart, checkout, US tax, shipping and order tracking.
Version: 3.0.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wander-boutique
Tags: e-commerce, clothing, fashion, boutique, responsive, custom-colors, featured-images
*/

:root{
  --beige:#f3ede4; --beige-2:#e9dfd1; --charcoal:#22201d; --charcoal-2:#4a4540;
  --terracotta:#c17a5a; --terracotta-dark:#a85f42; --white:#ffffff; --cream:#faf7f2;
  --line:#e5ddd2; --muted:#7a7268; --green:#2e7d5b; --red:#b4432f;
  --radius:14px; --radius-sm:8px; --shadow:0 12px 35px rgba(34,32,29,.10);
  --font-head:'Playfair Display',Georgia,serif; --font-body:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--charcoal);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--terracotta-dark)}
button,input,select,textarea{font:inherit}
.container{width:min(1200px,92%);margin:0 auto}
h1,h2,h3{font-family:var(--font-head);line-height:1.15;margin:0 0 .6em;font-weight:600}
h1{font-size:clamp(2.2rem,5vw,4rem)} h2{font-size:clamp(1.7rem,3.5vw,2.5rem)} h3{font-size:1.25rem}
p{margin:0 0 1em}
.section{padding:64px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;color:var(--terracotta);font-weight:700;margin-bottom:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--charcoal);color:#fff;border:1px solid var(--charcoal);padding:13px 24px;border-radius:999px;cursor:pointer;font-weight:600;transition:.2s}
.btn:hover{background:var(--terracotta);border-color:var(--terracotta);color:#fff;transform:translateY(-1px)}
.btn-light{background:var(--white);color:var(--charcoal);border-color:var(--white)}
.btn-light:hover{background:var(--beige);color:var(--charcoal)}
.btn-outline{background:transparent;color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.btn-terra{background:var(--terracotta);border-color:var(--terracotta)}
.btn-terra:hover{background:var(--terracotta-dark)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-sm{padding:9px 16px;font-size:.9rem}
.text-muted{color:var(--muted)} .text-center{text-align:center} .price{font-weight:700} .old-price{text-decoration:line-through;color:var(--muted);margin-right:8px}
.badge{display:inline-block;background:var(--terracotta);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.badge.sale{background:var(--red)} .badge.new{background:var(--green)}

/* Announcement + header — BLACK, two lines, so the original black logo blends in.
   Line 1: search · logo · account / currency / bag.
   Line 2: centred, light, letter-spaced menu — nothing heavy or crowded. */
/* Compact header: header used to eat half a phone screen. Now line 1 is
   ~64px tall in total, line 2 is ~34px, and the announcement is a thin
   scrolling line below the header instead of a block above it. */
.site-header{position:sticky;top:0;z-index:90;background:#000;color:#f5f1ea;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.header-top{background:#000}
.header-inner{display:flex;align-items:center;gap:14px;padding:8px 0;flex-wrap:nowrap}
.logo{white-space:nowrap;line-height:0;flex:0 0 auto}
/* Original logo, exactly as supplied (black background, silver/teal wings).
   The header is pure black, so the logo's own black rectangle disappears
   into it. Replace assets/images/logo.png to change it. */
/* !important on purpose: if any other CSS (or a cached old stylesheet)
   tries to set img height:auto, the logo must never go back to its
   full 1280px size and break the whole header again. */
.site-logo-img,.logo img{height:44px !important;width:auto !important;max-width:190px !important;object-fit:contain;display:block;background:#000}
.footer-logo-img{height:64px !important}
/* Search — soft dark pill, glowing focus, terracotta button */
.search-form{display:flex;align-items:center;gap:6px;border:1px solid #2c2a28;border-radius:999px;background:#171514;padding:4px 5px 4px 12px;flex:0 1 280px;max-width:280px;min-width:0;transition:.2s}
.search-form:focus-within{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(193,122,90,.25)}
.search-icon{color:#b8b0a2;font-size:1.15rem}
.search-form input{border:0;outline:0;background:transparent;color:#fff;padding:7px 4px;width:100%;min-width:0;font-size:.88rem}
.search-form input::placeholder{color:#8f887c}
.search-form button{border:0;background:var(--terracotta);color:#fff;padding:7px 13px;border-radius:999px;cursor:pointer;font-weight:600;white-space:nowrap;font-size:.88rem}
.search-form button:hover{background:var(--terracotta-dark)}
/* Right side — three distinct, refined pills, not plain boxes */
.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;flex:0 0 auto;flex-wrap:nowrap}
.header-actions a,.header-actions button,.header-actions select{white-space:nowrap}
.currency{appearance:none;border:1px solid #2c2a28;background:#171514;color:#f5f1ea;border-radius:999px;padding:7px 11px;font-weight:600;cursor:pointer;font-size:.82rem}
.currency:hover{border-color:#4a4540}
.account-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #3a3733;color:#f5f1ea;border-radius:999px;padding:7px 11px;font-weight:600;transition:.2s;font-size:.82rem}
.account-btn:hover{border-color:var(--terracotta);color:#fff;background:#171514}
.account-icon{font-size:.9rem;color:var(--terracotta)}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:6px;border:0;background:linear-gradient(135deg,#c17a5a,#a85f42);color:#fff;border-radius:999px;padding:7px 12px;cursor:pointer;font-weight:700;box-shadow:0 6px 18px rgba(193,122,90,.35);transition:.2s;font-size:.82rem}
.cart-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(193,122,90,.45)}
.cart-count{min-width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.75rem;padding:0 4px;background:#fff;color:#22201d;font-weight:800}
.mobile-toggle{display:none;background:none;border:1px solid #3a3733;color:#fff;border-radius:8px;padding:8px 11px;cursor:pointer}
/* Line 2 menu */
.main-nav{background:#0d0c0b;border-top:1px solid #1f1d1a}
.nav-inner{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap}
.main-nav ul{display:flex;justify-content:center;gap:26px;list-style:none;margin:0;padding:8px 0;flex-wrap:wrap}
.main-nav a{font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#d8d2c6;padding-bottom:3px;border-bottom:2px solid transparent;transition:.2s}
.main-nav a:hover,.main-nav .current-menu-item a{color:#fff;border-bottom-color:var(--terracotta)}
/* Admin-only theme uploader in the menu bar */
.admin-upload summary{cursor:pointer;list-style:none;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#c17a5a;font-weight:700;white-space:nowrap}
.admin-upload summary::-webkit-details-marker{display:none}
.admin-only-tag{background:#c17a5a;color:#fff;border-radius:999px;padding:2px 7px;font-size:.65rem;letter-spacing:0;text-transform:none;margin-left:4px}
.admin-upload-form{position:absolute;right:4%;top:100%;z-index:95;background:#171514;border:1px solid #3a3733;border-radius:12px;padding:16px;width:min(320px,90vw);display:flex;flex-direction:column;gap:10px;color:#e9e2d8;font-size:.88rem;text-transform:none;letter-spacing:0}
.admin-upload-form input[type=file]{color:#fff}
.admin-upload-alt{color:#cfc6b8;font-size:.82rem}
/* Scrolling announcement, below the header, one thin line */
.announce-marquee{background:#111;color:#d8d2c6;overflow:hidden;padding:6px 0;font-size:.78rem;letter-spacing:.04em;border-bottom:1px solid #1f1d1a}
.announce-track{display:flex;width:max-content;white-space:nowrap;animation:wander-marquee 24s linear infinite}
.announce-track span{padding-right:20px}
@keyframes wander-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.announce-track{animation:none}}
/* Footer also goes black, so the same original logo blends there too */
.site-footer{background:#000}

/* Hero */
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:520px;display:flex;align-items:end;color:#fff;background:#ddd}
.hero img.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55))}
.hero-content{position:relative;z-index:2;padding:44px;max-width:620px}
.hero-content p{font-size:1.1rem;opacity:.95}

/* Category grid */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;background:var(--beige)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-card:hover img{transform:scale(1.05)}
.cat-card span{position:absolute;left:16px;bottom:16px;background:#fff;padding:10px 16px;border-radius:999px;font-weight:700}

/* Products */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.product-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.2s}
.product-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.product-thumb{position:relative;aspect-ratio:3/4;background:var(--beige);overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.product-thumb .badge{position:absolute;top:12px;left:12px}
.product-body{padding:16px}
.product-body h3{font-family:var(--font-body);font-size:1rem;margin-bottom:4px}
.product-cat{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.product-price{margin:8px 0 12px}
.quick-add{width:100%}

/* Value props */
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prop{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;text-align:center}
.prop strong{display:block;font-family:var(--font-head);font-size:1.25rem;margin-bottom:6px}

/* Shop layout */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.filters h3{font-size:1.05rem}
.filters label{display:block;margin:7px 0;cursor:pointer}
.filters input[type=checkbox]{accent-color:var(--terracotta)}
.filters select,.filters input[type=number],.field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.toolbar select{padding:10px 12px;border:1px solid var(--line);border-radius:999px;background:#fff}

/* Single product */
.product-detail{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:start}
.gallery-main{border-radius:var(--radius);overflow:hidden;background:var(--beige);aspect-ratio:3/4}
.gallery-main img{width:100%;height:100%;object-fit:cover}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px}
.gallery-thumbs button{border:2px solid transparent;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;background:none;width:78px;height:98px}
.gallery-thumbs button.active{border-color:var(--terracotta)}
.gallery-thumbs img{width:100%;height:100%;object-fit:cover}
.swatches{display:flex;gap:9px;flex-wrap:wrap;margin:8px 0 16px}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--line);cursor:pointer}
.swatch.selected,.size-btn.selected{outline:2px solid var(--charcoal);outline-offset:2px}
.size-btn{border:1px solid var(--line);background:#fff;padding:9px 13px;border-radius:8px;cursor:pointer;font-weight:600}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.qty button{border:0;background:none;width:42px;cursor:pointer;font-size:1.2rem}
.qty input{border:0;width:48px;text-align:center;outline:0}
.stock-in{color:var(--green);font-weight:700} .stock-out{color:var(--red);font-weight:700}
.accordion{border-top:1px solid var(--line);margin-top:26px}
.accordion details{border-bottom:1px solid var(--line);padding:16px 0}
.accordion summary{cursor:pointer;font-weight:700}

/* Cart / checkout */
.cart-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cart-table th,.cart-table td{padding:14px;text-align:left;border-bottom:1px solid var(--line)}
.cart-item{display:flex;gap:13px;align-items:center}
.cart-item img{width:64px;height:80px;object-fit:cover;border-radius:8px}
.checkout-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.field{margin-bottom:4px} .field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.order-summary,.box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.summary-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line)}
.summary-row.total{font-size:1.15rem;font-weight:800;border:0;padding-top:14px}
.notice{padding:14px 16px;border-radius:10px;background:#fff3e8;border:1px solid #f0c9ae;margin-bottom:18px}
.notice.success{background:#e8f5ee;border-color:#b9dfc8}
.ship-option{display:flex;gap:10px;align-items:start;border:1px solid var(--line);border-radius:10px;padding:13px;margin-bottom:10px;background:#fff;cursor:pointer}
.ship-option input{margin-top:4px}

/* Drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.25s;z-index:100}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:#fff;z-index:101;transform:translateX(105%);transition:transform .3s ease; display:flex;flex-direction:column;box-shadow:-20px 0 50px rgba(0,0,0,.2)}
body.cart-open .drawer{transform:none} body.cart-open .drawer-overlay{opacity:1;pointer-events:auto}
.drawer-head,.drawer-foot{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.drawer-foot{border:0;border-top:1px solid var(--line)}
.drawer-body{flex:1;overflow:auto;padding:18px 20px}
.drawer-item{display:flex;gap:12px;margin-bottom:16px}
.drawer-item img{width:64px;height:82px;object-fit:cover;border-radius:8px}
.close-btn{background:none;border:0;font-size:1.5rem;cursor:pointer}

/* Footer */
.site-footer{background:#000;color:#e9e2d8;margin-top:20px}
.newsletter{border-bottom:1px solid #3a3733;padding:44px 0;text-align:center}
.newsletter h2{color:#fff}
.news-form{display:flex;gap:10px;max-width:520px;margin:18px auto 0}
.news-form input{flex:1;padding:13px 16px;border-radius:999px;border:0;outline:0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding:44px 0}
.site-footer h4{color:#fff;margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#cfc6b8} .site-footer a:hover{color:#fff}
.footer-bottom{border-top:1px solid #3a3733;padding:18px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.9rem;color:#a99f90}
.socials{display:flex;gap:10px} .socials a{width:38px;height:38px;border:1px solid #4a4540;border-radius:50%;display:grid;place-items:center}
.badges{display:flex;gap:8px;flex-wrap:wrap} .badges span{border:1px solid #4a4540;border-radius:999px;padding:5px 10px;font-size:.8rem}

/* Shop grid: 4 on desktop home, 3 on shop desktop — never 1 cramped column on mobile */
.shop-product-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){
  .shop-product-grid{grid-template-columns:repeat(2,1fr)}
}

/* Mobile product cards — always 2 in a row, same look as desktop, just tighter */
@media(max-width:600px){
  .product-grid,.shop-product-grid,.cat-grid{grid-template-columns:1fr 1fr !important;gap:12px}
  .product-body{padding:12px}
  .product-body h3{font-size:.92rem;line-height:1.35}
  .product-price{font-size:.92rem;margin:6px 0 10px}
  .quick-add{padding:10px 8px;font-size:.85rem}
  .product-cat{font-size:.72rem}
  .drawer{width:92vw}
  .cart-table{font-size:.9rem}
}

/* Mobile drawer + slim top bar — these are the rules that stop the
   hamburger / buttons from being cut off at the right edge. */
.mobile-drawer-head,.mobile-only-actions{display:none}
@media(max-width:980px){
  .product-grid,.cat-grid{grid-template-columns:repeat(2,1fr)}
  .shop-layout,.checkout-layout,.product-detail{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .props{grid-template-columns:1fr}
  /* Top bar: logo centred, Bag + hamburger only — USD and account live
     in the drawer, so this row can never overflow. */
  .header-inner{flex-wrap:wrap;padding:6px 0;gap:8px}
  .logo{order:1;flex:1;display:flex;justify-content:center}
  .header-actions{order:2;margin-left:0}
  .header-actions .currency,.header-actions .account-btn{display:none}
  .search-form{order:3;max-width:none;flex:1 1 100%;padding:3px 4px 3px 10px}
  .search-form input{padding:6px 4px}
  .search-form button{padding:6px 11px}
  .site-logo-img,.logo img{height:40px !important;max-width:170px !important}
  .cart-btn{padding:6px 11px}
  /* Slide-out drawer, fully inside the viewport, never half off-screen */
  .main-nav{display:block;position:fixed;top:0;right:0;z-index:102;height:100dvh;width:min(320px,86vw);background:#000;border-left:1px solid #222;transform:translateX(108%);transition:transform .3s ease;overflow-y:auto;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
  .main-nav.open{transform:none}
  .main-nav .container{width:100%;padding:0 20px}
  .nav-inner{flex-direction:column;align-items:stretch;gap:0}
  .mobile-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #222}
  .mobile-nav-close{background:none;border:1px solid #3a3733;color:#fff;border-radius:50%;width:38px;height:38px;font-size:1.4rem;cursor:pointer}
  .mobile-only-actions{display:flex;flex-direction:column;gap:10px;padding:16px 0;border-bottom:1px solid #222}
  .mobile-only-actions .drawer-currency,.mobile-only-actions .drawer-account{width:100%;justify-content:center}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 0}
  .main-nav li{border-bottom:1px solid #1a1917}
  .main-nav a{display:block;padding:13px 0;font-size:.9rem}
  .admin-upload{padding:16px 0}
  .admin-upload summary{white-space:normal}
  .admin-upload-form{position:static;width:100%}
  .mobile-toggle{display:block}
}
@media(max-width:600px){
  .product-grid{grid-template-columns:1fr 1fr;gap:12px}
  .cat-grid{grid-template-columns:1fr 1fr}
  .section{padding:42px 0}
  .hero{min-height:430px} .hero-content{padding:26px}
  .form-grid,.news-form{grid-template-columns:1fr;flex-direction:column}
  .footer-grid{grid-template-columns:1fr}
  .account-btn{padding:7px 11px}
  .search-form button{padding:6px 11px}
}

/* Sticky mobile add-to-bag bar on the standalone product page */
.sticky-bag-bar{display:none}
@media(max-width:980px){
  .sticky-bag-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#000;color:#fff;padding:12px 4%;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
  .sticky-bag-bar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}
}

/* Log out / Add Product visibility — clear, not hidden in small grey text */
.logout-link{color:#e9c9b8;font-size:.82rem;font-weight:600;white-space:nowrap}
.logout-link:hover{color:#fff;text-decoration:underline}
.admin-add-product{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:#fff;font-weight:700;white-space:nowrap;border:1px solid #c17a5a;border-radius:999px;padding:7px 13px}
.admin-add-product:hover{background:#c17a5a;color:#fff}
.drawer-logout{width:100%;justify-content:center;color:#fff !important;border-color:#b4432f !important}
.drawer-logout:hover{background:#b4432f !important}
/* Custom sign-in form (replaces wp_login_form, which posted to wp-login.php) */
.wander-login-form p{margin:0 0 14px}
.wander-login-form label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.wander-login-form input[type=text],.wander-login-form input[type=password],.wander-login-form input[type=email]{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.wander-login-form input[type=submit]{width:100%;background:var(--terracotta);border:1px solid var(--terracotta);color:#fff;padding:13px;border-radius:999px;font-weight:700;cursor:pointer}
.wander-login-form input[type=submit]:hover{background:var(--terracotta-dark)}
/* Add Product form — pill checkboxes for sizes and colors */
.pill-group{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.pill-check{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600}
.pill-check input{accent-color:var(--terracotta)}
.pill-check:has(input:checked){background:var(--charcoal);color:#fff;border-color:var(--charcoal)}
.color-dot{width:18px;height:18px;border-radius:50%;display:inline-block;border:1px solid #ccc}
.add-product-hero{background:#000;color:#fff;border-radius:16px;padding:28px;margin-bottom:22px}
.add-product-hero h1{color:#fff;margin-bottom:6px}

/* Readable brand name next to the winged logo — the script alone was
   unreadable at header size, so the name is now also set in plain,
   large type. This is what a client can actually read on first sight. */
.logo{display:flex !important;align-items:center;gap:12px;line-height:1 !important}
.logo-text{display:flex;flex-direction:column;line-height:1.05;white-space:nowrap}
.logo-name{font-family:var(--font-head);font-size:28px;font-weight:700;letter-spacing:.02em;color:#fff}
.logo-sub{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:#8fd8cf;font-weight:700}
.site-logo-img,.logo img{height:68px !important;width:auto !important;max-width:240px !important}
@media(max-width:980px){
  .logo{gap:8px}
  .logo-name{font-size:19px}
  .logo-sub{font-size:8px;letter-spacing:.32em}
  .site-logo-img,.logo img{height:48px !important;max-width:170px !important}
  .mobile-drawer-head .logo-name{font-size:19px}
}

/* v1.7 header brand — text only, stacked, uncommon design.
   No image logo in the header any more, so there are never two logos
   side by side. The winged image lives big in the footer only. */
.brand-only{display:flex !important;align-items:center;flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1;white-space:nowrap}
.brand-name{font-family:var(--font-head);font-size:36px;font-weight:700;letter-spacing:.01em;color:#fff;line-height:.95}
.brand-name::first-letter{color:#8fd8cf}
.brand-sub{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.48em;text-transform:uppercase;color:#c17a5a;font-weight:700;margin-top:5px}
.brand-line{display:inline-block;width:26px;height:1px;background:#8fd8cf;flex:0 0 auto}
.footer-logo-only{display:block}
.footer-logo-img{height:110px !important;max-width:340px !important}
/* Desktop order is already brand · search · actions in the HTML.
   Make sure search sits after the name and never squeezes the brand. */
.header-inner{flex-wrap:nowrap}
.brand-only{margin-right:4px}
.search-form{flex:1 1 auto;max-width:380px}
/* Add Product button — never clip its border inside the header/nav.
   DESKTOP ONLY: the global overflow:visible used to override the mobile
   drawer's overflow-y:auto (it came later in the file), which is why the
   mobile drawer could not scroll at all and the theme uploader ran off
   the bottom of the screen. On mobile the drawer MUST stay scrollable. */
@media(min-width:981px){
  .main-nav{overflow:visible}
  .nav-inner{overflow:visible}
}
.admin-add-product{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;white-space:nowrap}
@media(max-width:980px){
  /* Mobile top bar, 2 rows only:
     Row 1: brand (left) + Bag + hamburger (far right, fully inside)
     Row 2: search, full width.
     Log out is NOT in this top bar on mobile — it lives in the drawer only. */
  .header-inner{flex-wrap:wrap;padding:8px 0;gap:10px}
  .brand-only{order:1;flex:1 1 auto;justify-content:flex-start}
  .brand-name{font-size:26px}
  .brand-sub{font-size:9px;letter-spacing:.36em}
  .brand-line{width:18px}
  .header-actions{order:2;flex:0 0 auto;margin-left:auto}
  .header-actions .logout-link{display:none !important}
  .header-actions .currency,.header-actions .account-btn{display:none}
  .search-form{order:3;flex:1 1 100%;max-width:none}
  .mobile-toggle{display:block;flex:0 0 auto}
  .cart-btn{flex:0 0 auto}
  .admin-add-product{width:100%}
  .mobile-drawer-head .brand-name{font-size:26px}
}

/* v1.8 — mobile drawer scroll + footer bottom, both fully inside the screen */
/* Footer: the very last lines (copyright / Privacy / Terms, below Secure
   Checkout) must scroll fully into view, not sit under the iOS bottom
   toolbar or a fixed sticky bar and bounce back. Give the footer a real
   bottom cushion, including the iPhone safe-area, and extra room on
   pages that have the fixed sticky Add-to-Bag bar. */
html,body{overflow-x:clip}
.site-footer{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.footer-bottom{padding:18px 0 calc(34px + env(safe-area-inset-bottom))}
@media(max-width:980px){
  .site-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .footer-bottom{padding:16px 0 calc(44px + env(safe-area-inset-bottom))}
  body:has(.sticky-bag-bar) .site-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  /* Mobile menu drawer: compact + scrollable inside the screen.
     The drawer itself is the scroll container — everything in it,
     including the expanded theme uploader, must stay reachable. */
  .main-nav{overflow-y:auto !important;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;height:100dvh;max-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
  .main-nav .container{padding:0 16px}
  .mobile-drawer-head{padding:12px 0}
  .mobile-only-actions{padding:12px 0;gap:8px}
  .main-nav ul{padding:4px 0}
  .main-nav a{padding:10px 0}
  .admin-upload{padding:10px 0}
  .admin-upload summary{font-size:.75rem}
  .admin-upload-form{padding:12px;gap:8px;font-size:.85rem}
  .admin-upload-form label{font-size:.85rem;line-height:1.4}
  .admin-upload-form input[type=file]{font-size:.8rem;max-width:100%}
  .admin-upload-form .btn{padding:9px 14px;font-size:.85rem}
  .admin-upload-alt{font-size:.8rem}
  .mobile-only-actions .admin-add-product{padding:9px 12px;font-size:.75rem}
}

/* v2.1 — drawer buttons must never run past the drawer edge (seen in a
   screenshot: MY ACCOUNT pill was clipped at the right edge) */
@media(max-width:980px){
  .mobile-only-actions .btn,.mobile-only-actions .account-btn,.mobile-only-actions select{max-width:100%;box-sizing:border-box}
}