/* =========================================================
   SEEBY SOUND — base.css
   Tokens, reset, typography, header, footer, shared components
   Mobile-first.
   ========================================================= */

/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@500;600;700;800&display=swap');

/* ----- Tokens ----- */
:root{
  --yellow:#FCBC02;
  --yellow-dark:#e0a600;
  --black:#0a0a0a;
  --ink:#16181d;
  --slate:#363c49;        /* footer */
  --slate-2:#2b303b;
  --white:#ffffff;

  --surface:#ffffff;
  --bg:#f5f5f2;            /* warm light page bg */
  --bg-2:#ecece8;
  --line:#e4e3dd;
  --line-2:#d4d3cc;
  --muted:#6c6c64;
  --muted-2:#8a8a80;

  --ok:#1f9d57;
  --whatsapp:#25d366;
  --sale:#d13b2e;

  --container:1280px;
  --radius:10px;
  --radius-sm:5px;
  --radius-lg:16px;

  --shadow-sm:0 1px 2px rgba(16,18,22,.06), 0 1px 3px rgba(16,18,22,.05);
  --shadow:0 4px 14px rgba(16,18,22,.08);
  --shadow-lg:0 18px 40px rgba(16,18,22,.16);

  --ff-body:'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-head:'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  --header-h:64px;
}
@media (min-width:1024px){ :root{ --header-h:84px; } }

/* ----- Reset ----- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul,ol{ list-style:none; padding:0; }
input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }

/* ----- Typographic helpers ----- */
h1,h2,h3,h4{ font-family:var(--ff-head); font-weight:700; line-height:1.02; text-transform:uppercase; letter-spacing:.01em; }
.eyebrow{
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:.78rem; color:var(--muted);
}
.eyebrow--yellow{ color:#a07a00; }
.text-yellow{ color:var(--yellow); }

/* ----- Layout ----- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:18px; }
@media (min-width:768px){ .container{ padding-inline:32px; } }
.section{ padding-block:48px; }
@media (min-width:1024px){ .section{ padding-block:80px; } }
.section-head{ margin-bottom:28px; }
.section-head h2{ font-size:clamp(1.8rem,5vw,2.9rem); }
.section-head .lead{ color:var(--muted); max-width:60ch; margin-top:8px; font-size:1.05rem; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }

.hr-accent{ width:64px; height:4px; background:var(--yellow); border:0; margin:14px 0; }
.center .hr-accent{ margin-inline:auto; }

/* ----- Buttons ----- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:.98rem; line-height:1;
  padding:14px 22px; border-radius:var(--radius-sm);
  border:2px solid transparent; transition:.18s ease; white-space:nowrap;
}
.btn .arr{ transition:transform .18s ease; }
.btn:hover .arr{ transform:translateX(4px); }
.btn--primary{ background:var(--yellow); color:#0a0a0a; }
.btn--primary:hover{ background:var(--yellow-dark); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.btn--ghost-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 16px; font-size:.85rem; }

/* ----- Placeholder image system ----- */
.ph{
  position:relative; overflow:hidden; background:#e9e8e2;
  background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.045) 0 10px,transparent 10px 20px);
  display:flex; align-items:center; justify-content:center;
}
.ph--dark{ background:#1b1d22; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px); }
.ph__tag{
  font-family:'Barlow', monospace; font-size:.72rem; letter-spacing:.03em;
  color:#8a8a80; background:rgba(255,255,255,.78); padding:5px 9px; border-radius:4px;
  border:1px solid rgba(0,0,0,.06); text-transform:none; font-weight:500;
  text-align:center; max-width:84%;
}
.ph--dark .ph__tag{ color:#c9c9c2; background:rgba(0,0,0,.45); border-color:rgba(255,255,255,.1); }

/* filled with real imagery (picsum) */
.ph__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.ph--has-img{ background-image:none; background-color:#e9e8e2; }
.ph--has-img .ph__tag{ display:none; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{ position:sticky; top:0; z-index:60; background:var(--black); color:#fff; }
.header-bar{
  display:flex; align-items:center; gap:14px;
  height:var(--header-h);
}
/* brand lockup (CSS wordmark for crisp scaling) */
.brand{ display:flex; flex-direction:column; gap:2px; line-height:1; flex-shrink:0; }
.brand__row{ display:flex; align-items:stretch; gap:6px; }
.brand__seeby{
  font-family:var(--ff-head); font-weight:800; letter-spacing:.01em;
  font-size:1.55rem; color:var(--yellow); text-transform:uppercase;
  text-shadow:0 0 14px rgba(252,188,2,.35);
}
.brand__sound{
  font-family:var(--ff-head); font-weight:800; letter-spacing:.01em;
  font-size:1.55rem; color:#0a0a0a; background:#fff; text-transform:uppercase;
  padding:0 7px; display:inline-flex; align-items:center; border-radius:2px;
}
.brand__tag{
  font-family:var(--ff-body); font-style:italic; font-weight:400;
  font-size:.56rem; letter-spacing:.02em; color:#cfcfca; text-transform:none;
}
@media (min-width:1024px){
  .brand__seeby,.brand__sound{ font-size:1.95rem; }
  .brand__tag{ font-size:.66rem; }
}

/* desktop nav */
.main-nav{ display:none; }
@media (min-width:1024px){
  .site-header nav{ margin-left:auto; }
  .main-nav{ display:flex; align-items:center; gap:0; }
  .main-nav > li{ position:relative; }
  .main-nav > li + li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:18px; background:rgba(255,255,255,.2); }
  .nav-link{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--ff-head); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
    font-size:1.02rem; color:#f2f2ee; padding:10px 16px; transition:color .15s;
  }
  .nav-link:hover{ color:var(--yellow); }
  .nav-link.is-active{ color:var(--yellow); }
  .nav-link .caret{ width:9px; opacity:.8; transition:transform .2s; }
  .has-dd:hover .nav-link .caret{ transform:rotate(180deg); }
}

/* dropdown */
.dropdown{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:230px; background:#fff; color:var(--ink);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:8px;
  opacity:0; visibility:hidden; transition:.18s ease; z-index:70;
}
.has-dd:hover .dropdown{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px); }
.dropdown a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:7px; font-weight:500; font-size:.95rem;
}
.dropdown a:hover{ background:var(--bg-2); }
.dropdown a small{ color:var(--muted); font-weight:400; font-size:.78rem; }

/* header actions */
.header-actions{ display:flex; align-items:center; gap:4px; margin-left:auto; }
@media (min-width:1024px){ .header-actions{ margin-left:18px; } }
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:8px; color:#f2f2ee; transition:.15s;
}
.icon-btn:hover{ background:rgba(255,255,255,.1); color:var(--yellow); }
.icon-btn svg{ width:22px; height:22px; }
.cart-count{
  position:absolute; top:4px; right:3px; min-width:18px; height:18px; padding:0 4px;
  background:var(--yellow); color:#0a0a0a; border-radius:9px;
  font-family:var(--ff-head); font-weight:700; font-size:.72rem;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.cart-count[hidden]{ display:none; }

.menu-toggle{ display:inline-flex; }
@media (min-width:1024px){ .menu-toggle{ display:none; } }

/* mobile drawer */
.drawer-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:80;
  opacity:0; visibility:hidden; transition:.2s;
}
.drawer-overlay.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
  background:var(--black); color:#fff; z-index:90; padding:18px;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer.open{ transform:translateX(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.drawer__close{ width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:#fff; }
.drawer__close:hover{ background:rgba(255,255,255,.1); }
.drawer-nav a{
  display:block; font-family:var(--ff-head); font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.25rem; padding:14px 4px; border-bottom:1px solid rgba(255,255,255,.1);
}
.drawer-nav a.is-active{ color:var(--yellow); }
.drawer-nav .sub{ padding-left:16px; }
.drawer-nav .sub a{ font-size:1rem; color:#cfcfca; border-bottom:1px solid rgba(255,255,255,.06); }
.drawer__foot{ margin-top:auto; padding-top:20px; display:flex; gap:10px; }

/* =========================================================
   TRUST BADGES STRIP
   ========================================================= */
.trust{ background:var(--ink); color:#fff; }
.trust__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:rgba(255,255,255,.08);
}
@media (min-width:900px){ .trust__grid{ grid-template-columns:repeat(4,1fr); } }
.trust__item{
  background:var(--ink); display:flex; gap:14px; align-items:flex-start;
  padding:22px 18px;
}
.trust__icon{ color:var(--yellow); flex-shrink:0; }
.trust__icon svg{ width:34px; height:34px; }
.trust__item h4{ font-size:1.06rem; letter-spacing:.03em; }
.trust__item p{ font-size:.85rem; color:#b8b8b2; margin-top:3px; line-height:1.45; text-transform:none; }

/* =========================================================
   PARTNERS
   ========================================================= */
.partners{ background:#fff; }
.partners__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:26px 40px; margin-top:26px;
}
.partner-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-head); font-weight:700; letter-spacing:.02em;
  color:#9a9a92; font-size:1.4rem; filter:grayscale(1); opacity:.78; transition:.2s;
  text-transform:uppercase;
}
.partner-logo:hover{ opacity:1; color:var(--muted); }
.partner-logo .dot{ width:30px; height:30px; border-radius:50%; background:var(--bg-2); border:2px solid var(--line-2); display:inline-block; }
.partner-logo small{ font-family:var(--ff-body); font-weight:600; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#aaa9a1; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--slate); color:#cfd2da; }
.footer-top{
  display:grid; grid-template-columns:1fr; gap:36px; padding-block:48px;
}
@media (min-width:760px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr; } }
@media (min-width:1080px){ .footer-top{ grid-template-columns:1.6fr 1fr 1fr 1.4fr; } }
.footer-col h4{ font-size:1.05rem; color:#fff; letter-spacing:.05em; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ color:#bcc0c9; font-size:.95rem; transition:.15s; }
.footer-col a:hover{ color:var(--yellow); }
.footer-brand .brand__seeby,.footer-brand .brand__sound{ font-size:1.7rem; }
.footer-about{ margin-top:16px; font-size:.92rem; color:#b3b7c0; line-height:1.6; max-width:34ch; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); color:#fff; transition:.18s;
}
.footer-social a:hover{ transform:translateY(-2px); }
.footer-social .fb:hover{ background:#1877f2; }
.footer-social .ig:hover{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.footer-social .yt:hover{ background:#ff0000; }
.footer-social svg{ width:19px; height:19px; }

/* newsletter */
.newsletter p{ font-size:.92rem; color:#b3b7c0; margin-bottom:14px; line-height:1.55; }
.newsletter__form{ display:flex; flex-direction:column; gap:10px; }
.newsletter__form input{
  width:100%; padding:13px 14px; border-radius:7px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#fff; font-size:.95rem;
}
.newsletter__form input::placeholder{ color:#9aa0ab; }
.newsletter__form input:focus{ outline:none; border-color:var(--yellow); }
.newsletter__msg{ font-size:.85rem; color:var(--yellow); min-height:1em; }

.footer-bottom{ background:var(--slate-2); }
.footer-bottom__row{
  display:flex; flex-direction:column; gap:10px; padding-block:18px;
  font-size:.85rem; color:#a4a8b2; text-align:center;
}
.footer-bottom__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; }
.footer-bottom__links a:hover{ color:#fff; }
@media (min-width:760px){
  .footer-bottom__row{ flex-direction:row; align-items:center; justify-content:space-between; text-align:left; }
}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--whatsapp); color:#fff; padding:12px 18px 12px 14px;
  border-radius:40px; box-shadow:0 8px 24px rgba(37,211,102,.4);
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:.95rem; transition:.18s;
}
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.5); }
.wa-float svg{ width:26px; height:26px; }
.wa-float span{ display:none; white-space:nowrap; }
@media (min-width:560px){ .wa-float span{ display:inline; } }

/* =========================================================
   BREADCRUMB
   ========================================================= */
.breadcrumb{ background:var(--bg-2); border-bottom:1px solid var(--line); }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding-block:12px; font-size:.85rem; color:var(--muted); }
.breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .sep{ color:var(--line-2); }
.breadcrumb [aria-current]{ color:var(--ink); font-weight:600; }

/* =========================================================
   PRODUCT CARD (shared by home + shop)
   ========================================================= */
.product-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.18s ease;
}
.product-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--line-2); }
.product-card__media{ position:relative; aspect-ratio:1/1; }
.product-card__media .ph{ width:100%; height:100%; }
.badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:.72rem; padding:4px 9px; border-radius:4px;
}
.badge--sale{ background:var(--sale); color:#fff; }
.badge--new{ background:var(--yellow); color:#0a0a0a; }
.wish-btn{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; color:var(--muted);
  box-shadow:var(--shadow-sm); transition:.15s;
}
.wish-btn:hover{ color:var(--sale); }
.wish-btn svg{ width:18px; height:18px; }
.product-card__body{ padding:14px; display:flex; flex-direction:column; gap:7px; flex:1; }
.product-card__brand{ font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.product-card__name{ font-family:var(--ff-body); font-weight:600; font-size:1rem; line-height:1.3; text-transform:none; letter-spacing:0; }
.product-card__name a:hover{ color:var(--yellow-dark); }
.stars{ display:inline-flex; align-items:center; gap:2px; color:var(--yellow); }
.stars svg{ width:14px; height:14px; }
.stars .count{ color:var(--muted); font-size:.8rem; margin-left:5px; }
.product-card__foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:8px; }
.price{ font-family:var(--ff-head); font-weight:700; font-size:1.35rem; }
.price .old{ font-size:.9rem; color:var(--muted-2); text-decoration:line-through; margin-right:6px; font-weight:600; }
.add-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--ink); color:#fff; border-radius:7px; padding:9px 12px;
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:.82rem;
  transition:.15s;
}
.add-btn:hover{ background:var(--yellow); color:#0a0a0a; }
.add-btn svg{ width:16px; height:16px; }
.add-btn.added{ background:var(--ok); color:#fff; }
.add-btn:disabled{ opacity:.45; cursor:not-allowed; }
.text-sale{ color:var(--sale); }

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:#fff; padding:14px 20px; border-radius:10px;
  box-shadow:var(--shadow-lg); z-index:120; font-weight:600; font-size:.92rem;
  display:flex; align-items:center; gap:10px; opacity:0; visibility:hidden; transition:.25s;
}
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.toast svg{ width:20px; height:20px; color:var(--yellow); }

/* utility */
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
[hidden]{ display:none !important; }

/* =========================================================
   HELPER / UTILITY CLASSES
   Small reusable helpers that replace one-off inline styles,
   so markup stays clean and WordPress-template-friendly.
   ========================================================= */
.section--flush-top{ padding-top:0; }       /* section with no top padding */
.mt-block{ margin-top:44px; }                /* generous top gap (e.g. pagination) */
.is-block{ display:block; margin-top:10px; } /* force a status line onto its own row */
.self-start{ align-self:flex-start; }        /* flex child hugs the start edge */
.price--sm{ font-size:1.1rem; }              /* smaller price (e.g. "On request") */
.ph__tag--xs{ font-size:.55rem; }            /* tiny placeholder label (thumbnails) */
.ph__tag--xxs{ font-size:.5rem; }            /* micro placeholder label (sticky bar) */
.h2--fluid{ font-size:clamp(1.6rem,4vw,2.4rem); } /* fluid section heading */

/* =========================================================
   POST CARD (shared: home, blog list, related)
   ========================================================= */
.post-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.post-card:hover{ box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--line-2); }
.post-card__media{ aspect-ratio:16/10; position:relative; overflow:hidden; display:block; }
.post-card__media .ph{ width:100%; height:100%; transition:transform .4s ease; }
.post-card:hover .post-card__media .ph{ transform:scale(1.04); }
.post-card__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--yellow); color:#0a0a0a;
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:.72rem; padding:5px 11px; border-radius:4px; box-shadow:var(--shadow-sm);
}
.post-card__body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card__meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.8rem; color:var(--muted-2); text-transform:none; letter-spacing:0;
  font-family:var(--ff-body); font-weight:500;
}
.post-card__meta span{ white-space:nowrap; }
.post-card__meta span:nth-child(2){ color:var(--line-2); }
.post-card h3{
  font-family:var(--ff-body); font-size:1.22rem; line-height:1.25;
  text-transform:none; letter-spacing:0; font-weight:700;
  text-wrap:pretty;
}
.post-card h3 a{ transition:color .15s; }
.post-card h3 a:hover{ color:var(--yellow-dark); }
.post-card p{ color:var(--muted); font-size:.94rem; line-height:1.55; flex:1; text-wrap:pretty; }
.post-card__more{
  font-family:var(--ff-head); font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  font-size:.84rem; color:var(--ink); display:inline-flex; gap:6px; align-items:center;
  margin-top:2px; transition:gap .15s, color .15s;
}
.post-card__more:hover{ color:var(--yellow-dark); gap:10px; }

/* General page content */
.page-content { padding-block: 48px 80px; }
.page-content h1:first-child,
.page-content h2:first-child { margin-top: 0; }