/* =========================================================================
   Stratto — base design system (tokens, layout primitives, shared components)
   Loaded on every page. Page-specific rules live in assets/css/page-*.css.
   Naming convention: .str-{block}, .str-{block}__{element}, .str-{block}--{modifier}
   ========================================================================= */

:root{
  --c-ink:#123a40;
  --c-ink-soft:rgba(18,58,64,.75);
  --c-ink-mute:rgba(18,58,64,.6);
  --c-ink-faint:rgba(18,58,64,.55);
  --c-ink-line:rgba(18,58,64,.4);
  --c-dark:#0f2f34;
  --c-dark-deep:#0c262a;
  --c-accent:#f08a3c;
  --c-accent-ink:#c96a1e;
  --c-accent-soft:rgba(240,138,60,.15);
  --c-accent-soft-2:rgba(240,138,60,.05);
  --c-ok:#2f7d6b;
  --c-cream-1:#fbf3e9;
  --c-cream-2:#f6ede0;
  --c-panel:#f7f5f0;
  --c-canvas:#e9e5dd;
  --c-white:#fff;
  --c-line:rgba(15,47,52,.1);
  --c-line-soft:rgba(15,47,52,.08);
  --c-line-strong:rgba(15,47,52,.18);
  --c-line-onDark:rgba(255,255,255,.12);
  --c-onDark-soft:rgba(255,255,255,.75);
  --c-onDark-mute:rgba(255,255,255,.55);

  --font-display:'Saira Condensed',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;

  --container:1280px;
  --gutter:40px;
}

/* ---------- reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.stratto{
  margin:0;
  background:var(--c-white);
  color:var(--c-ink);
  font:500 15px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
.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;width:1px;word-wrap:normal;
}

.str-container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/*
 * Edge-to-edge sections (hero, trust strip, service band, etc.) inserted
 * via the block editor are marked "align":"full" so they break out of the
 * normal content column instead of sitting narrow and centered.
 *
 * Uses the position:relative + left:50% + negative-margin technique rather
 * than the simpler `calc(50% - 50vw)` version — the simpler version only
 * cancels out a parent that is itself exactly viewport-width and centered
 * with margin:auto; this one breaks out correctly regardless of whatever
 * ancestor (a plugin wrapper, an unexpected padded container, etc.) the
 * block actually ends up nested inside.
 */
body.stratto{overflow-x:hidden}
.alignfull{
  width:100vw;
  max-width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.alignwide{width:100%;max-width:var(--container);margin-left:auto;margin-right:auto}
@media (max-width:960px){
  :root{--gutter:24px}
}
@media (max-width:600px){
  :root{--gutter:18px}
}

/* ---------- topbar ---------- */
.str-topbar{
  background:var(--c-dark);color:var(--c-onDark-soft);
  font:600 12.5px/1 var(--font-body);
  display:flex;justify-content:center;gap:10px;padding:9px 16px;text-align:center;
}
.str-topbar .dot{color:var(--c-accent)}

/* ---------- header ---------- */
.str-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--gutter);border-bottom:1px solid var(--c-line);
}
.str-header__left{display:flex;align-items:center;gap:44px}
.str-logo{
  font-family:var(--font-display);font-weight:800;font-style:italic;
  font-size:30px;letter-spacing:.5px;color:var(--c-ink);
}
.str-logo span, .str-logo em{color:var(--c-accent);font-style:italic}
/*
 * A logo uploaded via Personalização → Identidade do site (has_custom_logo)
 * renders at its own uploaded image dimensions — WordPress does not resize
 * it (theme support here uses flex-width/flex-height so any aspect ratio is
 * accepted), so without this it can show at full native pixel size. Cap the
 * rendered height and let width follow proportionally.
 */
.str-logo--custom{display:flex;align-items:center;line-height:0}
.str-logo--custom img{display:block;width:auto;height:auto;max-height:44px;max-width:220px}
.str-nav{display:flex;gap:26px;font:600 14.5px var(--font-body);color:var(--c-ink)}
.str-nav a{color:var(--c-ink)}
.str-nav a.is-active,.str-nav a:hover{color:var(--c-accent)}
.str-header__actions{display:flex;align-items:center;gap:20px}
.str-icon-btn{
  width:20px;height:20px;border:2px solid var(--c-ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:none;padding:0;cursor:pointer;
}
.str-cart{position:relative;display:flex;align-items:center;cursor:pointer}
.str-cart__bag{width:22px;height:19px;border:2px solid var(--c-ink);border-radius:3px}
.str-cart__count{
  position:absolute;top:-6px;right:-6px;background:var(--c-accent);color:#fff;
  font:700 10px var(--font-body);width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.str-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14px var(--font-body);padding:11px 20px;border-radius:9px;
  border:none;cursor:pointer;
}
.str-btn--accent{background:var(--c-accent);color:#fff}
.str-btn--dark{background:var(--c-dark);color:#fff}
.str-btn--outline{background:#fff;border:2px solid var(--c-ink);color:var(--c-ink)}
.str-btn--outline-dark{border:2px solid var(--c-ink);color:var(--c-ink);background:transparent}
.str-btn--large{font-size:15.5px;padding:16px 30px;border-radius:11px}
.str-btn--block{width:100%}

/*
 * When these classes are added to a block-editor "Button" block (Additional
 * CSS Class(es) field), they land on the OUTER `.wp-block-button` wrapper —
 * but WordPress's own default button look (dark pill shape, padding) is
 * applied to the INNER `.wp-block-button__link` anchor, not the wrapper.
 * Without this, both styles apply at once (WP's solid pill *and* my border/
 * background on the wrapper around it). Reset the wrapper to be invisible
 * and move all the real button styling onto the link it actually wraps.
 */
.wp-block-button.str-btn{background:none;border:none;padding:0;border-radius:0;display:inline-block}
.wp-block-button.str-btn .wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14px var(--font-body);padding:11px 20px;border-radius:9px;
  text-decoration:none;background:none;border:none;color:inherit;
}
.wp-block-button.str-btn.str-btn--accent .wp-block-button__link{background:var(--c-accent);color:#fff}
.wp-block-button.str-btn.str-btn--dark .wp-block-button__link{background:var(--c-dark);color:#fff}
.wp-block-button.str-btn.str-btn--outline .wp-block-button__link{background:#fff;border:2px solid var(--c-ink);color:var(--c-ink)}
.wp-block-button.str-btn.str-btn--outline-dark .wp-block-button__link{border:2px solid var(--c-ink);color:var(--c-ink);background:transparent}
.wp-block-button.str-btn.str-btn--large .wp-block-button__link{font-size:15.5px;padding:16px 30px;border-radius:11px}
.wp-block-button.str-btn.str-btn--block{width:100%}
.wp-block-button.str-btn.str-btn--block .wp-block-button__link{width:100%}

/* mobile nav toggle */
.str-nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px}
.str-nav-toggle span{display:block;width:22px;height:2px;background:var(--c-ink);margin:5px 0}
@media (max-width:900px){
  .str-header__left{gap:24px}
  .str-nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    gap:0;padding:8px var(--gutter) 16px;border-bottom:1px solid var(--c-line);
    display:none;z-index:40;
  }
  .str-nav.is-open{display:flex}
  .str-nav a{padding:10px 0;border-bottom:1px solid var(--c-line-soft)}
  .str-header{position:relative}
  .str-nav-toggle{display:block}
}

/* ---------- eyebrow / section heads ---------- */
.str-eyebrow{
  display:inline-flex;align-items:center;gap:8px;background:var(--c-accent-soft);
  color:var(--c-accent-ink);font:700 12.5px var(--font-body);padding:7px 14px;border-radius:100px;
}
.str-eyebrow--dark{background:rgba(255,255,255,.12);color:#fff}
.str-kicker{font:700 13px var(--font-body);color:var(--c-accent);letter-spacing:.08em;margin-bottom:6px;text-transform:uppercase}
.str-section{padding:60px var(--gutter) 30px}
.str-section__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:30px;gap:20px;flex-wrap:wrap}
.str-h1{font-family:var(--font-display);font-weight:800;font-style:italic;line-height:.92;margin:0;letter-spacing:-.5px}
.str-h2{font-family:var(--font-display);font-weight:700;margin:0;font-size:40px}
.str-lede{font:500 18px/1.55 var(--font-body);color:var(--c-ink-soft);max-width:440px;margin:0}
.str-link-accent{font:700 14px var(--font-body);color:var(--c-ink);border-bottom:2px solid var(--c-accent);padding-bottom:3px}

/* ---------- hero ---------- */
.str-hero{display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(120deg,var(--c-cream-1),var(--c-cream-2))}
.str-hero__copy{padding:70px var(--gutter) 64px;display:flex;flex-direction:column;justify-content:center}
.str-hero__actions{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:900px){
  .str-hero{grid-template-columns:1fr}
  .str-hero__copy{padding:48px 24px}
}

/* ---------- trust strip ---------- */
.str-trust{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--c-line)}
.str-trust__item{padding:22px 24px;border-right:1px solid var(--c-line-soft);display:flex;gap:12px;align-items:center}
.str-trust__item:last-child{border-right:none}
.str-trust__icon{width:34px;height:34px;border-radius:9px;background:var(--c-accent-soft);flex:none}
.str-trust__title{font:700 14px var(--font-body)}
.str-trust__sub{font:500 12.5px var(--font-body);color:var(--c-ink-mute)}
@media (max-width:900px){
  .str-trust{grid-template-columns:repeat(2,1fr)}
  .str-trust__item:nth-child(2n){border-right:none}
}

/* ---------- product grid / card ---------- */
.str-products{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1100px){.str-products{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.str-products{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.str-products{grid-template-columns:1fr}}

.str-product-card{border:1px solid var(--c-line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;position:relative}
.str-product-card__media{position:relative;height:200px;background:var(--c-panel);overflow:hidden}
.str-product-card__media img{width:100%;height:100%;object-fit:cover}
.str-product-card__body{padding:16px 16px 18px}
.str-product-card__cat{font:500 12px var(--font-body);color:var(--c-ink-faint)}
.str-product-card__title{font:700 15.5px var(--font-body);margin:3px 0 10px}
.str-product-card__row{display:flex;align-items:center;justify-content:space-between}
.str-product-card__price{font-family:var(--font-display);font-weight:700;font-size:22px}
.str-add-btn{
  width:38px;height:38px;border-radius:10px;background:var(--c-dark);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:18px;border:none;cursor:pointer;flex:none;
}
.str-badge{position:absolute;top:12px;left:12px;font:700 11px var(--font-body);padding:5px 10px;border-radius:100px;color:#fff}
.str-badge--new{background:var(--c-accent)}
.str-badge--sale{background:var(--c-dark)}

/* ---------- cta / service band ---------- */
.str-band{margin:40px;border-radius:var(--radius-xl);background:var(--c-dark);color:#fff;display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.str-band__copy{padding:56px 48px}
.str-band__title{font-family:var(--font-display);font-weight:700;font-size:42px;line-height:1;margin:0 0 16px}
.str-band__text{font:500 16px/1.55 var(--font-body);color:var(--c-onDark-soft);max-width:400px;margin:0 0 28px}
.str-band__actions{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:900px){
  .str-band{grid-template-columns:1fr;margin:24px}
  .str-band__copy{padding:36px 28px}
}

/* ---------- placeholder blocks (design-doc stand-ins for real photography) ---------- */
.str-ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background-image:repeating-linear-gradient(45deg,rgba(15,47,52,.08),rgba(15,47,52,.08) 11px,rgba(15,47,52,.04) 11px,rgba(15,47,52,.04) 22px);
}
.str-ph--dark{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.09),rgba(255,255,255,.09) 11px,rgba(255,255,255,.03) 11px,rgba(255,255,255,.03) 22px)}
.str-ph__label{font:500 11px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.02em;color:rgba(15,47,52,.5);text-align:center;padding:6px 10px;text-transform:lowercase}
.str-ph--dark .str-ph__label{color:rgba(255,255,255,.55)}
.str-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- footer ---------- */
.str-footer{background:var(--c-dark);color:var(--c-onDark-soft);padding:50px var(--gutter) 30px}
.str-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding-bottom:36px;border-bottom:1px solid var(--c-line-onDark)}
.str-footer__brand .str-logo{color:#fff}
.str-footer__desc{font:500 13.5px/1.6 var(--font-body);max-width:230px}
.str-footer__col-title{color:#fff;font-weight:700;margin-bottom:6px}
.str-footer__col{font:500 13.5px/2.1 var(--font-body)}
.str-footer__col a{color:inherit}
.str-footer__col a:hover{color:var(--c-accent)}
.str-footer__bottom{padding-top:20px;font:500 12.5px var(--font-body)}
@media (max-width:900px){
  .str-footer__grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:560px){
  .str-footer__grid{grid-template-columns:1fr}
}

/* ---------- breadcrumb ---------- */
.str-breadcrumb{padding:18px var(--gutter) 0;font:500 13px var(--font-body);color:var(--c-ink-faint)}
.str-breadcrumb a{color:var(--c-ink-faint)}
.str-breadcrumb a:hover{color:var(--c-accent)}
.str-breadcrumb .current{color:var(--c-ink);font-weight:600}

/* ---------- generic panels / forms ---------- */
.str-panel{background:var(--c-panel);border-radius:var(--radius-lg);padding:26px 28px}
.str-panel-title{font:700 13px var(--font-body);letter-spacing:.05em;color:var(--c-ink-faint);margin-bottom:16px;text-transform:uppercase}

.str-field{margin-bottom:18px}
.str-field label{display:block;font:700 13.5px var(--font-body);margin-bottom:8px}
.str-input,.str-select,textarea.str-input{
  width:100%;font:500 14.5px var(--font-body);color:var(--c-ink);
  border:1.5px solid var(--c-line-strong);border-radius:10px;padding:13px 15px;background:#fff;
}
.str-input:focus,.str-select:focus,textarea.str-input:focus{outline:none;border-color:var(--c-accent)}
.str-row{display:flex;gap:16px;flex-wrap:wrap}
.str-row > *{flex:1;min-width:180px}
.str-checkbox-row{display:flex;align-items:center;gap:10px;font:500 13.5px var(--font-body)}

.str-swatch{width:36px;height:36px;border-radius:50%;border:none;padding:0;cursor:pointer;box-shadow:0 0 0 1.5px rgba(0,0,0,.15)}
.str-swatch.is-selected{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c-accent)}
.str-swatch-row{display:flex;gap:12px;flex-wrap:wrap}

.str-option-card{border:1.5px solid var(--c-line-strong);border-radius:12px;padding:14px 16px;cursor:pointer;background:none;text-align:left;font-family:inherit}
.str-option-card.is-selected{border:2px solid var(--c-accent)}

/* generic spec/table rows */
.str-spec-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--c-line);font:500 14px var(--font-body)}
.str-spec-row:last-child{border-bottom:none}
.str-spec-row .k{color:var(--c-ink-mute)}
.str-spec-row .v{font-weight:700}

/* ---------- accordion (FAQ, product tabs, etc.) ---------- */
.str-accordion__item{border:1.5px solid var(--c-line-strong);border-radius:var(--radius-lg);padding:20px 22px;background:#fff}
.str-accordion__item.is-open{box-shadow:0 6px 20px rgba(15,47,52,.06)}
.str-accordion__trigger{display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:none;width:100%;text-align:left;cursor:pointer;font:700 16px var(--font-body);color:var(--c-ink);padding:0}
.str-accordion__icon{width:28px;height:28px;border-radius:8px;flex:none;background:rgba(15,47,52,.07);color:var(--c-ink);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.str-accordion__item.is-open .str-accordion__icon{background:var(--c-accent);color:#fff}
.str-accordion__panel{font:500 14.5px/1.65 var(--font-body);color:var(--c-ink-soft);margin-top:14px;display:none}
.str-accordion__item.is-open .str-accordion__panel{display:block}

/* misc utility */
.str-mt-0{margin-top:0}.str-mb-0{margin-bottom:0}
.str-hidden{display:none !important}
.str-text-center{text-align:center}