/*
 * Kilonova Performance — shop.css
 * Light (white) storefront layered on the dark marketing theme.
 * Brand: navy + red do manual, BioSans. Layout inspired by SP Electronics.
 * As cores vem dos tokens de css/style.css — nao as escrevas a mao aqui.
 * Scope: everything here targets WooCommerce/shop pages only, so the dark
 * marketing front page is untouched. Header & footer keep their dark brand.
 */

/* ── Shop-scope light palette ───────────────────────────────────────────── */
:root{
  --shop-bg:      #f4f5f7;   /* light grey page ground (SP-style, tidier) */
  --shop-surface: #eaeef3;   /* slightly deeper grey for insets/among white cards */
  --shop-card:    #ffffff;   /* white cards sit on the grey page */
  --shop-border:  #e6e8ec;
  --shop-text:    #14181f;
  --shop-muted:   #6b7280;
  --shop-ok:      #1b8a4b;   /* confirmacoes — o vermelho da marca le-se como erro */
  --shop-shadow:  0 1px 3px rgba(16,23,42,.06), 0 8px 24px rgba(16,23,42,.06);
  --shop-shadow-hover: 0 6px 16px rgba(16,23,42,.10), 0 18px 40px rgba(16,23,42,.12);
}

/* White page background for every shop/account/cart/checkout page */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.single-product,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag{
  background: var(--shop-bg);
  color: var(--shop-text);
}

/* Wrapper: clear the fixed 120px navbar, comfortable width.
   Applies to the shop archive (.shop-main) and every page.php page
   (cart/checkout/account/legal) so none hide under the fixed navbar. */
.shop-main,
.page-main{
  margin-top: var(--nav-h);
  background: var(--shop-bg);
  color: var(--shop-text);
  padding-block: 2.5rem 4rem;
  min-height: 60vh;
}
/* Ensure the body ground is white on standard pages too (not just shop) */
body.page:not(.home) main.page-main{ background: var(--shop-bg); }
/* A loja tinha aqui um limite proprio de 1240px que ganhava ao .container
   global — por isso alargar o global sozinho nao mudava nada nas paginas da
   loja, que sao precisamente as que pareciam estreitas. Os dois no mesmo
   valor, o da SP Electronics. */
.shop-main > .container{ max-width: 1500px; }
body.woocommerce-page .page-content,
body.woocommerce .page-content{ max-width: 1100px; }

.woocommerce-page .page-title,
.shop-main .woocommerce-products-header__title,
.shop-main h1.entry-title{
  font-family: var(--font-head);
  color: var(--shop-text);
}

/* Generic shop text colours (override dark theme inheritance) */
.shop-main, .shop-main p, .shop-main li, .shop-main td, .shop-main th,
body.woocommerce-page .page-main, body.woocommerce-page .page-main p,
body.woocommerce-page .page-main li, body.woocommerce-page .page-main td{
  color: var(--shop-text);
}
.shop-main a{ color: var(--red); }

.shop-section-title{
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--shop-text);
  margin: 2.5rem 0 1.25rem;
}

/* ── Toolbar: Find your kit + search ────────────────────────────────────── */
.shop-toolbar{
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding: 1rem 0 1.5rem;
}
.btn-find-kit{
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--red); color: #fff !important;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  text-decoration: none; padding: .85rem 1.4rem; border-radius: 999px;
  white-space: nowrap; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-find-kit:hover{ background: var(--red-light); transform: translateY(-1px); }
.btn-find-kit svg{ width: 18px; height: 18px; }
.shop-search{ position: relative; flex: 1 1 320px; min-width: 240px; }
.shop-search input[type="search"]{
  width: 100%; height: 48px; padding: 0 3rem 0 1.1rem;
  border: 1px solid var(--shop-border); border-radius: 999px;
  background: var(--shop-surface); color: var(--shop-text); font-size: var(--fs-sm);
}
.shop-search input[type="search"]:focus{ outline: none; border-color: var(--red); background:#fff; }
.shop-search button{
  position: absolute; right: 5px; top: 5px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: var(--red); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.shop-search button svg{ width: 18px; height: 18px; }

/* ── Hero (main shop page) ──────────────────────────────────────────────── */
.shop-hero{
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(221,24,59,.55), transparent 55%),
    linear-gradient(120deg, var(--bg) 0%, #16233b 55%, #1b2e48 100%);
  color: #fff; padding: clamp(2rem, 5vw, 4rem);
  position: relative; overflow: hidden; margin-bottom: 1rem;
}
.shop-hero-inner{ max-width: 640px; position: relative; z-index: 1; }
.shop-hero-eyebrow{
  display: inline-block; font-family: var(--font-head); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; font-size: var(--fs-2xs);
  color: var(--red-pale); margin-bottom: .9rem;
}
.shop-hero-title{
  font-family: var(--font-head); font-weight: 800; color: #fff;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 .8rem;
}
.shop-hero-sub{ color: #c9d2e0 !important; font-size: var(--fs-base); margin: 0 0 1.5rem; }
.shop-hero-cta{ display:inline-block; color:#fff !important; }

/* Hero row: main hero + reseller-recruitment tile side by side */
.shop-hero-row{ display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.shop-hero-row .shop-hero{ margin-bottom: 0; }
.shop-hero-reseller{
  position: relative; overflow: hidden; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius-lg); background: #0d0d0d; color: #fff;
  border: 1px solid rgba(245,210,15,.28); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.shop-hero-reseller::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 130% at 50% -15%, rgba(245,210,15,.20), transparent 60%);
}
.shop-hero-reseller > *{ position: relative; z-index: 1; }
.shop-hero-reseller-logo{ width: 130px; max-width: 60%; height: auto; margin: 0 auto 1rem; }
.shop-hero-reseller h2{ color: #fff !important; font-size: var(--fs-lg); margin: 0 0 .5rem; }
.shop-hero-reseller p{ color: #cfcfcf; font-size: var(--fs-sm); line-height: 1.5; margin: 0 0 1.25rem; }
.shop-hero-reseller-btn{
  display: inline-block; background: #F5D20F; color: #0d0d0d !important;
  font-family: var(--font-head); font-weight: 800; text-decoration: none; font-size: var(--fs-sm);
  padding: .75rem 1.4rem; border-radius: 10px;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.shop-hero-reseller-btn:hover{ background: #ffe23a; transform: translateY(-1px); }
@media (max-width: 900px){ .shop-hero-row{ grid-template-columns: 1fr; } }

/* ── Category tiles ─────────────────────────────────────────────────────── */
.shop-cats-grid{
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
/* Dark, full-bleed lifestyle tiles (SP style): image + gradient + overlaid text */
.shop-cat-tile{
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px; text-decoration: none; overflow: hidden;
  background: var(--bg); border-radius: var(--radius-lg);
  box-shadow: var(--shop-shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shop-cat-tile:hover{ transform: translateY(-4px); box-shadow: var(--shop-shadow-hover); }
.shop-cat-img{
  position: absolute; inset: 0;
  background: var(--bg) center/cover no-repeat;
  background-image: linear-gradient(135deg,#101a30,#1b2e48); /* fallback; inline style sets the real photo */
  transition: transform .6s var(--ease);
}
.shop-cat-tile:hover .shop-cat-img{ transform: scale(1.06); }
.shop-cat-tile::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.12) 0%, rgba(15,23,42,.5) 52%, rgba(15,23,42,.9) 100%);
}
.shop-cat-body{ position: relative; z-index: 1; padding: 1.3rem 1.35rem 1.4rem; }
.shop-cat-name{ display:block; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-xl); color: #fff; letter-spacing: .01em; line-height: 1.15; }
.shop-cat-count{ display:block; color: rgba(255,255,255,.75); font-size: var(--fs-xs); margin: .2rem 0 .8rem; }
.shop-cat-more{ display:inline-block; color: #fff; font-weight: 800; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.shop-cat-more:hover{ color: var(--red-light); }

/* ── Find-your-kit finder ───────────────────────────────────────────────── */
.shop-finder{ background: var(--shop-card); border: 1px solid var(--shop-border); border-radius: var(--radius-lg); padding: clamp(1.5rem,3vw,2.5rem); margin: 1.5rem 0; scroll-margin-top: calc(var(--nav-h) + 20px); box-shadow: var(--shop-shadow); }
.shop-finder-head h2{ margin-top: 0; }
.shop-finder-head p{ color: var(--shop-muted); margin: .25rem 0 1.25rem; }
.kn-finder-selects{ display: flex; gap: 1rem; flex-wrap: wrap; }
.kn-finder-selects select{
  flex: 1 1 240px; min-width: 200px; height: 52px; padding: 0 2.5rem 0 1rem; font-size: var(--fs-base);
  border: 1px solid var(--shop-border); border-radius: 12px; background-color: #fff; color: var(--shop-text);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.kn-finder-selects select:disabled{ opacity: .55; cursor: not-allowed; }
.kn-finder-selects select:focus{ outline: none; border-color: var(--red); }
.kn-finder-results{ margin-top: 1.5rem; }
.kn-finder-reshead{ font-size: var(--fs-base); margin-bottom: 1rem; color: var(--shop-text); }
.kn-finder-grid{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kn-finder-card{ background: #fff; border: 1px solid var(--shop-border); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shop-shadow); display: flex; flex-direction: column; }
.kn-fc-title{ font-family: var(--font-head); font-weight: 800; color: var(--shop-text); font-size: var(--fs-base); }
.kn-fc-meta{ display: flex; gap: .75rem; flex-wrap: wrap; color: var(--shop-muted); font-size: var(--fs-xs); margin: .4rem 0; }
.kn-fc-ref{ font-size: var(--fs-xs); color: var(--shop-text); margin-bottom: .9rem; }
.kn-fc-ref code{ background: var(--shop-surface); padding: .15rem .45rem; border-radius: 6px; font-size: var(--fs-xs); }
.kn-fc-cta{ margin-top: auto; text-align: center; background: var(--red); color: #fff !important; font-weight: 700; border-radius: 10px; padding: .65rem 1rem; text-decoration: none; transition: background var(--dur) var(--ease); }
.kn-fc-cta:hover{ background: var(--red-light); }

/* ── Reseller (Revendedor) ──────────────────────────────────────────────── */
.kn-reseller-banner{ background: var(--bg); color: #fff; border-radius: 10px; padding: .6rem 1rem; margin: 0 0 1.25rem; font-weight: 700; font-family: var(--font-head); font-size: var(--fs-sm); letter-spacing: .01em; }
.kn-reseller-ok{ background: #e7f7ec; border: 1px solid #b7e2c4; color: #1b5e34; border-radius: 10px; padding: 1rem 1.2rem; }
.kn-reseller-err{ background: #fdecec; border: 1px solid #f2c2c2; color: #a12020; border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; }
.kn-reseller-form .kn-hp{ position: absolute !important; left: -9999px !important; }
.kn-rf-grid{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kn-reseller-form label{ display: flex; flex-direction: column; gap: .35rem; font-weight: 600; color: var(--shop-text); font-size: var(--fs-sm); }
.kn-reseller-form input, .kn-reseller-form textarea{ border: 1px solid var(--shop-border); border-radius: 8px; padding: .7rem .8rem; font-size: var(--fs-base); background: #fff; color: var(--shop-text); font-weight: 400; }
.kn-reseller-form input:focus, .kn-reseller-form textarea:focus{ outline: none; border-color: var(--red); }
.kn-rf-msg{ margin-top: 1rem; }
.kn-reseller-form button{ margin-top: 1.25rem; }

/* ── Tidy pass: light-grey page + white cards (SP-style) ─────────────────── */
/* Legal / standard pages (not cart/checkout/account): content on a white card */
/* `.page-content` e o wrapper de page.php. Esta na conta de propriedade
   para a regra nao alcancar o mesmo `.entry-content` quando ele vem
   dentro da janela de sobreposicao dos documentos legais — la, o cartao
   branco e a propria janela, e ficavam dois. */
body.page:not(.woocommerce-cart):not(.woocommerce-checkout):not(.woocommerce-account):not(.home) .page-content .entry-content{
  background: var(--shop-card); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shop-shadow);
}
/* Cart / Checkout / Account main blocks → white cards on the grey page
   (covers both the classic shortcode markup and the newer WooCommerce blocks) */
.woocommerce-cart-form,
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.wc-block-checkout__main,
.wp-block-woocommerce-checkout .wc-block-components-sidebar,
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-order-summary-block,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation{
  background: var(--shop-card);
  border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  box-shadow: var(--shop-shadow);
}
.woocommerce-checkout #customer_details{ margin-bottom: 1.5rem; }
.woocommerce-account .woocommerce-MyAccount-navigation{ margin-bottom: 1.25rem; }
.woocommerce .cart_totals, .woocommerce-checkout #payment{ background: var(--shop-card); }
/* single product: put the gallery + summary on a white card */
.single-product div.product{
  background: var(--shop-card); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shop-shadow);
}
/* subtle grey header row on classic cart/table already uses --shop-surface */

/* ── Product grid (archive) ─────────────────────────────────────────────── */
.woocommerce ul.products{
  display: grid !important; gap: 1.5rem; margin: 0 0 2.5rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content: none !important; }
.woocommerce ul.products li.product{
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--shop-card); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg); padding: 1rem; text-align: left;
  box-shadow: var(--shop-shadow); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex; flex-direction: column;
}
.woocommerce ul.products li.product:hover{ transform: translateY(-4px); box-shadow: var(--shop-shadow-hover); }
/* ── Card internals (SP-style: image cross-fade + slide-up reveal) ───────── */
/* Height of the action row that the info block slides up to reveal. */
.woocommerce ul.products li.product{ --kn-act-h: 46px; }

.kn-card-media{
  position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
  border-radius: var(--radius); background: var(--shop-surface);
  transition: margin-bottom var(--dur) var(--ease);
}
.woocommerce ul.products li.product .kn-card-media img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; margin: 0 !important; border-radius: 0;
  transition: opacity .45s var(--ease);
}
.kn-card-img-alt{ opacity: 0; }

/* The info block masks the image as it slides up, so it needs the card ground. */
.kn-card-slide{ display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.kn-card-body{ position: relative; z-index: 1; background: var(--shop-card); padding-top: .9rem; }

.woocommerce ul.products li.product .kn-cat-eyebrow{
  display: block; color: var(--shop-muted); text-transform: uppercase;
  letter-spacing: .08em; font-size: var(--fs-2xs); font-weight: 700; text-decoration: none;
  margin-bottom: .3rem; transition: color var(--dur) var(--ease);
}
.woocommerce ul.products li.product .kn-card-title{
  display: block; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  color: var(--shop-text); padding: 0; margin: 0; line-height: 1.3; min-height: 2.6em;
  text-decoration: none; transition: color var(--dur) var(--ease);
}
/* Both are links — they go red on hover (SP behaviour). */
.woocommerce ul.products li.product .kn-cat-eyebrow:hover,
.woocommerce ul.products li.product .kn-cat-eyebrow:focus-visible,
.woocommerce ul.products li.product .kn-card-title:hover,
.woocommerce ul.products li.product .kn-card-title:focus-visible{ color: var(--red); }

.woocommerce ul.products li.product .price{
  color: var(--shop-text) !important; font-weight: 800; font-size: var(--fs-lg); margin: .35rem 0 0; display: block;
}
.woocommerce ul.products li.product .price del{ color: var(--shop-muted); font-weight: 500; opacity: .7; }
.woocommerce ul.products li.product .price ins{ color: var(--red); text-decoration: none; }

.kn-card-action{ margin-top: .9rem; }
.woocommerce ul.products li.product .kn-card-action .button,
.woocommerce ul.products li.product .kn-card-action .added_to_cart{
  display: block; width: 100%; text-align: center; margin: 0;
}

/* Hover choreography (pointer devices only — touch keeps everything visible):
   the media gives up `--kn-act-h` of space, so the info block rises over the
   image and the action row takes its place. Card height stays constant. */
@media (hover: hover){
  .kn-card-action{
    height: 0; overflow: hidden; opacity: 0;
    margin-top: 0; padding-top: .9rem; box-sizing: content-box;
    transition: height var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .woocommerce ul.products li.product:hover .kn-card-media,
  .woocommerce ul.products li.product:focus-within .kn-card-media{
    margin-bottom: calc(-1 * var(--kn-act-h));
  }
  .woocommerce ul.products li.product:hover .kn-card-action,
  .woocommerce ul.products li.product:focus-within .kn-card-action{
    height: var(--kn-act-h); opacity: 1;
  }
  /* Cross-fade to the second product photo (only when there is one). */
  .woocommerce ul.products li.product:has(.kn-card-img-alt):hover .kn-card-img,
  .woocommerce ul.products li.product:has(.kn-card-img-alt):focus-within .kn-card-img{ opacity: 0; }
  .woocommerce ul.products li.product:hover .kn-card-img-alt,
  .woocommerce ul.products li.product:focus-within .kn-card-img-alt{ opacity: 1; }
}

/* "Ver todos os produtos" under the curated Mais Vendidos row */
.kn-shop-all{ text-align: center; margin: .5rem 0 2.5rem; }
.kn-shop-all .btn{ color: #fff !important; text-decoration: none; }

/* ── Listing toolbar (view toggle + result count + ordering) ─────────────── */
.kn-shop-toolbar{ display: flex; align-items: center; gap: 1rem; margin: 0 0 1.5rem; flex-wrap: wrap; background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 12px; padding: .6rem .85rem; }
.kn-shop-toolbar .kn-view-toggle{ order: 1; display: inline-flex; gap: .3rem; }
.woocommerce .kn-shop-toolbar .woocommerce-result-count{ order: 2; margin: 0 auto 0 0; color: var(--shop-muted); }
.woocommerce .kn-shop-toolbar .woocommerce-ordering{ order: 3; margin: 0; }
.woocommerce .kn-shop-toolbar .woocommerce-ordering select{ border: 1px solid var(--shop-border); border-radius: 8px; padding: .55rem 2rem .55rem .8rem; background: #fff; color: var(--shop-text); }
.kn-view-btn{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--shop-border); border-radius: 8px; background: #fff; color: var(--shop-muted); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.kn-view-btn:hover{ color: var(--shop-text); border-color: var(--shop-muted); }
.kn-view-btn.is-active{ background: var(--red); border-color: var(--red); color: #fff; }
.kn-view-btn svg{ width: 18px; height: 18px; }

/* ── List view (toggle) ─────────────────────────────────────────────────── */
/* Row layout: image | (category / title / price) | action. The slide wrapper
   is flattened so its children join the row, and the hover choreography is
   switched off (everything is visible at once in list view). */
.woocommerce ul.products.kn-list{ display: block !important; }
.woocommerce ul.products.kn-list li.product{
  display: grid; grid-template-columns: 160px 1fr auto;
  grid-template-areas: "img body btn";
  align-items: center; column-gap: 1.5rem;
  width: auto !important; margin: 0 0 1rem !important; padding: 1rem 1.25rem;
}
.woocommerce ul.products.kn-list li.product .kn-card-media{
  grid-area: img; width: 160px; margin: 0 !important;
}
.woocommerce ul.products.kn-list li.product .kn-card-slide{ display: contents; }
.woocommerce ul.products.kn-list li.product .kn-card-body{
  grid-area: body; padding-top: 0; background: none;
}
.woocommerce ul.products.kn-list li.product .kn-card-title{ min-height: 0; font-size: var(--fs-lg); }
.woocommerce ul.products.kn-list li.product .kn-card-action{
  grid-area: btn; height: auto !important; opacity: 1 !important;
  overflow: visible; margin: 0; padding-top: 0;
}
.woocommerce ul.products.kn-list li.product .kn-card-action .button,
.woocommerce ul.products.kn-list li.product .kn-card-action .added_to_cart{
  width: auto !important;
}
/* No slide-up in list view — the media keeps its space. */
.woocommerce ul.products.kn-list li.product:hover .kn-card-media,
.woocommerce ul.products.kn-list li.product:focus-within .kn-card-media{ margin-bottom: 0; }
@media (max-width: 640px){
  .woocommerce ul.products.kn-list li.product{
    grid-template-columns: 1fr; grid-template-areas: "img" "body" "btn";
    justify-items: center; text-align: center;
  }
  .woocommerce ul.products.kn-list li.product .kn-card-media{ width: 100%; max-width: 220px; }
}

.woocommerce .woocommerce-result-count{ color: var(--shop-muted); }
.woocommerce .woocommerce-ordering select{
  border: 1px solid var(--shop-border); border-radius: 8px; padding: .5rem 2rem .5rem .7rem; background: #fff; color: var(--shop-text);
}
.woocommerce span.onsale{
  background: var(--red); color:#fff; border-radius: 999px; min-height: 0; min-width:0;
  padding: .28rem .7rem; font-family: var(--font-head); font-weight: 700; top: 12px; left: 12px; margin: 0;
}

/* ── Buttons (brand red) ──────────────────────────────────────────── */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce .button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt{
  background: var(--red) !important; color: #fff !important;
  border: 0 !important; border-radius: 10px !important;
  font-family: var(--font-head); font-weight: 700 !important; letter-spacing: .01em;
  padding: .8rem 1.3rem !important; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: none !important; text-shadow: none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce .button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  background: var(--red-light) !important; transform: translateY(-1px);
}

/* Block cart/checkout: brand ONLY the primary actions, by name.
   `.wc-block-components-button` is the base class of *every* button in the
   block cart and checkout, including the ones WooCommerce renders as bare
   links — which is why WooCommerce guards all of its own appearance rules
   with `:not(.is-link)`. Painting the base class red therefore broke the
   checkout actions row: "Voltar ao carrinho" became a red pill, and because
   our `padding !important` replaced its `padding-left: calc(24px + .25em)`,
   the back-arrow (positioned absolutely at left:0) printed on top of the
   label. A whitelist also means a utility button added by a future
   WooCommerce release cannot be wrecked by this rule.
   Padding is deliberately absent here: WooCommerce sizes these itself
   (place-order 18px 30px, coupon button 16px either side) and an
   !important padding would replace both. */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__button{
  background: var(--red) !important; color: #fff !important;
  border: 0 !important; border-radius: 10px !important;
  font-family: var(--font-head); font-weight: 700 !important; letter-spacing: .01em;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: none !important; text-shadow: none !important;
}
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-totals-coupon__button:hover{
  background: var(--red-light) !important; transform: translateY(-1px);
}

/* Express checkout (PayPal, and any wallet button): WooCommerce clips each
   one to a 4px radius, which reads as a different design system next to the
   brand's 10px. The container has overflow:hidden, so this radius is what
   the gateway's own iframe gets clipped to. The selector matches
   WooCommerce's own depth so it wins on order rather than on !important. */
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > div,
.wc-block-components-express-payment .wc-block-components-express-payment__event-buttons > li{
  border-radius: 10px;
}
/* The PayPal plugin centres its redirect notice, which sits directly under a
   left-aligned "Pay via PayPal." line — two alignments in one panel. */
.wc-block-checkout .ppcp-place-order-description{ text-align: left; }
/* ...and keep the legend on top of them. The title container is absolutely
   positioned and each wallet button's <li> is position:relative; neither
   declares a z-index, so paint order follows DOM order and the button — which
   comes later — was painted over the title. */
.wc-block-checkout .wc-block-components-express-payment .wc-block-components-express-payment__title-container{
  z-index: 2;
}
.woocommerce a.added_to_cart{
  background: var(--bg) !important; color:#fff !important; border-radius:10px; padding:.8rem 1.3rem; display:inline-block; margin-top:.5rem; font-weight:700;
}

/* ── Single product ─────────────────────────────────────────────────────── */
/* Everything below the gallery+summary row takes the full width.
   div.product is a flex row, and WooCommerce prints the tabs, the upsells and
   the related products INSIDE it — so they were becoming flex items and
   sharing the row with the gallery. The related section measured 471px on a
   2172px screen, which is why one product filled the width and the rest were
   a scroll away. */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > .cross-sells{ flex: 1 0 100%; min-width: 0; }

/* Related/upsell cards are a suggestion, not the catalogue: smaller than a
   shop-page card, so three fit across even in a narrow column. */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products,
.woocommerce .cross-sells ul.products{
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem; margin-bottom: 0;
}
.woocommerce .related ul.products li.product .kn-card-media,
.woocommerce .upsells ul.products li.product .kn-card-media{ aspect-ratio: 1 / 1; }
.woocommerce .related ul.products li.product .kn-card-title,
.woocommerce .upsells ul.products li.product .kn-card-title{ font-size: var(--fs-sm); }
@media (max-width: 700px){
  /* Tres colunas fixas eram boas para a coluna estreita de um tablet e
     absurdas num telemovel: a 375px davam cartoes de 91px, com a fotografia,
     o titulo e o preco espremidos num dedo de largura. `auto-fill` com um
     minimo decide sozinho — tres onde cabem tres, duas no telemovel. */
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products,
  .woocommerce .cross-sells ul.products{
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem;
  }
}

.single-product div.product{ display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; }
.single-product div.product .woocommerce-product-gallery{
  float: none !important; margin: 0 !important;
  flex: 1 1 46%; max-width: 48%; min-width: 300px;
  opacity: 1 !important; /* WC keeps this at 0 until its gallery JS runs; show regardless */
}
.single-product div.product .woocommerce-product-gallery img{
  border-radius: var(--radius-lg); background: var(--shop-surface);
  opacity: 1 !important; display: block; width: 100%; height: auto;
}
.single-product div.product .summary{ float: none !important; margin: 0 !important; flex: 1 1 46%; max-width: 48%; min-width: 300px; }
@media (max-width: 820px){
  /* O `min-width: 300px` existe para as duas colunas nao ficarem estreitas de
     mais lado a lado. Empilhadas, deixa de servir e passa a estorvar: num
     ecra de 375px obrigava a coluna a 300px dentro de um contentor de 343 e
     deixava 43px de espaco morto; abaixo de ~330px empurrava a pagina para
     fora do ecra, porque min-width ganha sempre a max-width. */
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .summary{ max-width: 100%; flex-basis: 100%; min-width: 0; }
}
.single-product div.product .product_title{ font-family: var(--font-head); font-weight: 800; color: var(--shop-text); font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.25; margin: 0 0 .5rem; }
.single-product div.product p.price,
.single-product div.product .summary .price{ color: var(--shop-text) !important; font-weight: 800; }
.single-product div.product p.price ins{ color: var(--red); text-decoration:none; }
.single-product .quantity input.qty{ border: 1px solid var(--shop-border); border-radius: 8px; padding: .6rem; }
/* Os selects de variacao vinham como o browser os desenha — cantos a direito
   e o texto colado a moldura — no meio de um tema todo arredondado. Mesma
   forma e mesmo respiro dos selects do configurador de mota. */
.single-product div.product form.cart table.variations{ margin: 0 0 var(--sp-3); border: 0; }
.single-product div.product form.cart table.variations th,
.single-product div.product form.cart table.variations td{ border: 0; padding: 0 0 var(--sp-2); vertical-align: middle; }
.single-product div.product form.cart table.variations th.label{ padding-right: var(--sp-3); }
.single-product div.product form.cart table.variations th.label label{ font-weight: 600; font-size: var(--fs-sm); color: var(--shop-text); }
.single-product div.product form.cart table.variations select{
  width: 100%; min-width: 0; height: 48px;
  padding: 0 2.5rem 0 1rem;
  border: 1px solid var(--shop-border); border-radius: 12px;
  background-color: #fff; color: var(--shop-text); font-size: var(--fs-base);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.single-product div.product form.cart table.variations select:focus{ outline: none; border-color: var(--red); }
.single-product div.product form.cart .reset_variations{ font-size: var(--fs-xs); color: var(--shop-muted); }
/* A mesma forma na caixa de extras. */
.kn-bundle-variation{ appearance: none; -webkit-appearance: none;
  padding-right: 2.5rem; border-radius: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
/* Os separadores vinham da WooCommerce com floats, margens negativas e as
   "orelhas" arredondadas em ::before/::after — um desenho de 2011 que numa
   coluna de 293px se desmonta: os tres empilhavam-se uns por cima dos outros e
   o primeiro ficava cortado ao meio. Aqui sao uma linha simples que desliza na
   horizontal quando nao cabe, que e o que um telemovel espera. */
.single-product .woocommerce-tabs ul.tabs{
  display: flex; gap: .35rem; padding: 0; margin: 0 0 -1px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.single-product .woocommerce-tabs ul.tabs::-webkit-scrollbar{ display: none; }
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after{ content: none !important; display: none !important; }
.single-product .woocommerce-tabs ul.tabs li{
  float: none !important; margin: 0 !important; flex: 0 0 auto;
  background: var(--shop-surface);
  border: 1px solid var(--shop-border); border-bottom: 0;
  border-radius: 8px 8px 0 0; box-shadow: none !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after{ content: none !important; display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a{ display: block; padding: .55rem 1rem; white-space: nowrap; }
.single-product .woocommerce-tabs ul.tabs li.active{ background: #fff; }
.single-product .woocommerce-tabs .panel{ border: 1px solid var(--shop-border); border-radius: 0 8px 8px 8px; padding: 1.5rem; }
@media (max-width: 820px){ .single-product div.product{ grid-template-columns: 1fr; gap: 1.5rem; } }

/* ── Cart / Checkout / Account (light surfaces, brand accents) ───────────── */
.woocommerce table.shop_table{ border: 1px solid var(--shop-border); border-radius: var(--radius); overflow: hidden; }
.woocommerce table.shop_table th{ background: var(--shop-surface); color: var(--shop-text); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th{ border-top-color: var(--shop-border); }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce form.checkout #customer_details .col-1,
.woocommerce form.checkout #customer_details .col-2{ }
.woocommerce .cart_totals, .woocommerce-checkout #payment{ background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; }
.woocommerce-checkout #payment{ background: var(--shop-surface); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"], .woocommerce-checkout textarea{
  border: 1px solid var(--shop-border) !important; border-radius: 8px !important;
  padding: .7rem .8rem !important; background: #fff; color: var(--shop-text);
}
/* Avisos da WooCommerce.
   Os tres estavam a partilhar a mesma regra e saiam todos no vermelho da
   marca, portanto "foi adicionado ao seu carrinho" tinha exactamente o mesmo
   ar de um erro. A cor tem de dizer o que aconteceu: verde confirma, vermelho
   trava, e o informativo fica neutro. */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error{
  background: var(--shop-surface); color: var(--shop-text);
}
.woocommerce .woocommerce-message{ border-top-color: var(--shop-ok); }
.woocommerce .woocommerce-message::before{ color: var(--shop-ok); }

.woocommerce .woocommerce-info{ border-top-color: var(--shop-text); }
.woocommerce .woocommerce-info::before{ color: var(--shop-text); }

.woocommerce .woocommerce-error{ border-top-color: var(--red); }
.woocommerce .woocommerce-error::before{ color: var(--red); }

/* O mesmo nos avisos em blocos (carrinho e finalizar compra sao React). */
.wc-block-components-notice-banner.is-success{ border-color: var(--shop-ok); }
.wc-block-components-notice-banner.is-success > svg{ fill: var(--shop-ok); color: var(--shop-ok); }
.woocommerce-MyAccount-navigation ul{ list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation li{ border: 1px solid var(--shop-border); border-radius: 8px; margin-bottom: .5rem; }
.woocommerce-MyAccount-navigation li a{ display: block; padding: .7rem 1rem; color: var(--shop-text); text-decoration: none; }
.woocommerce-MyAccount-navigation li.is-active{ background: var(--red); border-color: var(--red); }
.woocommerce-MyAccount-navigation li.is-active a{ color: #fff; }

/* WooCommerce Cart/Checkout blocks (new default) — light + red accents */
.wc-block-components-totals-item__value, .wc-block-components-product-price{ color: var(--shop-text); }
.wc-block-components-text-input input, .wc-block-components-address-form input{ border:1px solid var(--shop-border) !important; border-radius:8px !important; }

/* ── Checkout / Cart block: two clearly-separated cards + sticky summary ──── */
/* Form (left) and order summary (right) stay side-by-side on desktop with a
   comfortable gap; the summary follows the scroll and never tucks under the
   fixed navbar. They stack on smaller screens. */
/* Composto, nao descendente: o proprio elemento tem as duas classes
   (.wc-block-components-sidebar-layout .wc-block-cart), por isso a forma
   descendente nunca correspondeu e o flex-wrap:nowrap abaixo nunca foi
   aplicado — o painel de totais do carrinho caia para baixo. */
.wc-block-components-sidebar-layout.wc-block-checkout,
.wc-block-components-sidebar-layout.wc-block-cart{
  gap: 2rem; align-items: flex-start; flex-wrap: nowrap;
}
.wc-block-checkout .wc-block-checkout__main,
.wc-block-cart .wc-block-cart__main{ flex: 1 1 auto; min-width: 0; }
.wc-block-checkout .wc-block-checkout__sidebar,
.wc-block-cart .wc-block-cart__sidebar{ flex: 0 0 420px; }
/* The summary already carries WooCommerce's own padding (0 16px) and the item
   description another 24px on the left. Adding the theme card's ~32px a side
   on top of that left barely 125px for a product name, which is why
   "Sensor Quickshifter unidirecional com roquete (Pawl)" was breaking one word
   per line. One layer of padding is enough. */
.wp-block-woocommerce-checkout .wc-block-components-sidebar{
  padding-left: .5rem; padding-right: .5rem;
}
/* Let the description take the space the image and the line total leave,
   instead of only being allowed to shrink into it. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description{
  flex: 1 1 auto; min-width: 0;
}
@media (min-width: 1000px){
  .wc-block-checkout__sidebar,
  .wc-block-cart__sidebar{
    position: sticky !important;
    top: calc(var(--nav-h) + 1.5rem) !important;   /* clear the fixed 120px navbar */
    align-self: flex-start;
  }
}
@media (max-width: 999px){
  .wc-block-components-sidebar-layout.wc-block-checkout,
  .wc-block-components-sidebar-layout.wc-block-cart{ flex-wrap: wrap; }
  .wc-block-checkout .wc-block-checkout__sidebar,
  .wc-block-cart .wc-block-cart__sidebar{ flex-basis: 100%; }
}
/* Roomier fields: WooCommerce floats the label to the top of the input, so give
   it clear space above/below the typed value (fixes the cramped email field). */
.wc-block-checkout .wc-block-components-text-input input{
  height: auto !important; min-height: 56px !important;
  padding: 1.7rem .9rem .5rem !important;
}
.wc-block-checkout .wc-block-components-text-input textarea{ padding: 1.7rem .9rem .5rem !important; }
/* A etiqueta em repouso, centrada na caixa.
   Estava em `top: 50%` — e uma percentagem mede-se pela altura do CONTENTOR,
   nao do campo. Enquanto nao havia erro, contentor e campo tinham a mesma
   altura e parecia certo. Assim que a mensagem de validacao aparece, o
   contentor cresce e 50% passa a cair POR BAIXO da caixa: a etiqueta saltava
   para fora e o formulario parecia partido, precisamente quando alguem se
   engana. Valor fixo, calculado para o `min-height: 56px` que impomos acima:
   (56 - 19) / 2 ≈ 18px. */
.wc-block-checkout .wc-block-components-text-input label{ top: 18px; }
.wc-block-checkout .wc-block-components-text-input.is-active label,
.wc-block-checkout .wc-block-components-text-input input:-webkit-autofill + label{
  top: 4px !important; transform: scale(.74) !important;
}

/* ── Header: cart + account icons (inside the dark navbar) ───────────────── */
.nav-shop-actions{ display: inline-flex; align-items: center; gap: .35rem; margin-left: .35rem; }
.nav-icon-link{
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; color: var(--text-1);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-icon-link:hover{ background: rgba(255,255,255,.08); color: #fff; }
.nav-icon-link svg{ width: 22px; height: 22px; }
.nav-cart-link .kn-cart-count{
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* Make the LOJA (Shop) nav item stand out as a red pill button */
.nav-links li.nav-shop a{
  background: var(--red); color: #fff !important;
  padding: .5rem 1.15rem; border-radius: 999px; font-weight: 800;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.nav-links li.nav-shop a:hover{ background: var(--red-light); color: #fff !important; transform: translateY(-1px); }
.nav-links li.nav-shop a::after,
.nav-links li.nav-shop a.active-link::after{ display: none !important; } /* no underline indicator on the pill */

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px){
  .shop-toolbar{ gap: .6rem; }
  .btn-find-kit{ width: 100%; justify-content: center; }
  .shop-search{ flex-basis: 100%; }
  .woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); gap: .9rem; }
}

/* keep the legacy .page-* base (legal pages) readable on white */
.page-title{ font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem,2.6vw,2rem); color: var(--shop-text); margin: 0 0 1.5rem; line-height: 1.2; }
.entry-content{ color: var(--shop-text); line-height: 1.75; }

/* Smaller shop archive / category titles (theme h1 is up to 4.5rem) */
.woocommerce-page .page-title,
.shop-main .woocommerce-products-header__title,
.shop-main h1.entry-title{ font-size: clamp(1.5rem,2.6vw,2rem); line-height: 1.2; }

/* Readability: the theme base is built for the dark navy site, so strong/bold
   text is near-white (--text-1). Force dark text on the white shop/legal cards. */
.shop-main strong, .shop-main b,
.woocommerce-Tabs-panel strong, .woocommerce-Tabs-panel b,
.page-main .entry-content strong, .page-main .entry-content b,
.page-main .entry-content h2, .page-main .entry-content h3, .page-main .entry-content h4{
  color: var(--shop-text);
}
.page-main .entry-content a{ color: var(--red); }
/* Right-size in-content headings on legal/standard pages (theme h2 is ~3rem).
   The express-payment legend is excluded: it is an <h2> only by markup, and
   is positioned to sit ON the top border of the wallet-button box. At
   1.6rem with a 1.6rem top margin it dropped into the box and the PayPal
   button covered it. WooCommerce sizes it (14px/400) and should keep doing
   so — the theme's selector here outranks WooCommerce's, hence the :not(). */
.page-main .entry-content h2:not(.wc-block-components-express-payment__title){ font-size: clamp(1.3rem,2.2vw,1.6rem); line-height: 1.25; margin: 1.6rem 0 .6rem; }
.page-main .entry-content h3{ font-size: clamp(1.12rem,1.8vw,1.3rem); line-height: 1.3; margin: 1.2rem 0 .5rem; }
.page-main .entry-content h4{ font-size: var(--fs-base); margin: 1rem 0 .4rem; }

/* ── Trust badges band (rendered before the footer on shop pages) ────────── */
/* Banda de confianca — so na entrada da loja (ver kilonova_shop_trust_badges).
   Antes aparecia em todas as paginas da loja e ocupava quase um ecra; a
   repeticao e que lhe dava o peso, nao o tamanho. Uma vez, no sitio onde faz
   sentido, pode respirar. */
.kn-trust{
  background: var(--shop-card);
  border-top: 1px solid var(--shop-border);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.kn-trust-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.kn-trust-item{
  text-align: center; padding: .5rem .35rem;
  /* O movimento lateral no hover e o da SP: transform em 0.4s. */
  transition: transform .4s var(--ease, ease);
}
.kn-trust-item:hover{ transform: translateX(6px); }
.kn-trust-item:hover .kn-trust-ico{ background: var(--red); color: #fff; }
/* Circulo bem maior do que o simbolo, como no site deles: o icone respira. */
.kn-trust-ico{
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: .6rem;
  border-radius: 50%; background: var(--shop-surface); color: var(--shop-text);
  transition: background .3s var(--ease, ease), color .3s var(--ease, ease);
}
.kn-trust-ico svg{ width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce){
  .kn-trust-item, .kn-trust-ico{ transition: none; }
  .kn-trust-item:hover{ transform: none; }
}
.kn-trust-ico svg{ width: 30px; height: 30px; }
/* Tres classes: o titulo e um <h3> e apanha
   `.woocommerce h3:not(.woocommerce-loop-product__title)` a (0,2,1). */
.kn-trust .kn-trust-grid .kn-trust-title{
  font-family: var(--font-head); font-weight: 800; letter-spacing: .04em;
  font-size: var(--fs-xs); color: var(--shop-text); margin: 0 0 .3rem;
}
.kn-trust .kn-trust-grid .kn-trust-text{
  color: var(--shop-muted); font-size: var(--fs-xs); line-height: 1.5;
  margin: 0 auto; max-width: 26ch;
}
/* Quatro na horizontal em qualquer ecra, como pedido. Num telemovel de 375px
   sobram ~80px por coluna, o que nao chega para a descricao: a partir dai ela
   e escondida e ficam o icone e o titulo, que e o que se le de relance. */
/* Quatro na horizontal em qualquer ecra, como pedido. Num telemovel de 375px
   sobram ~80px por coluna, o que nao chega para a descricao: a partir dai ela
   e escondida e ficam o icone e o titulo, que e o que se le de relance.

   Dois detalhes que sao precisos aqui:
   - `minmax(0, 1fr)` e nao `1fr`: com `1fr` a coluna nunca encolhe abaixo do
     conteudo, e uma palavra como "PAGAMENTO" alargava a sua coluna e deixava
     as quatro desiguais (69/114/93/78px medidos).
   - `.kn-trust-grid .kn-trust-title` e nao so a classe: o titulo e um <h3> e
     apanhava `.page-main h3`, que por ter mais especificidade mantinha o
     tamanho de desktop. */
@media (max-width: 860px){
  .kn-trust-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem .45rem; }
  .kn-trust-item{ padding: 0 .1rem; min-width: 0; }
  .kn-trust-ico{ width: 48px; height: 48px; margin-bottom: .55rem; }
  .kn-trust-ico svg{ width: 20px; height: 20px; }
  /* Tres classes: o titulo e um <h3> e apanha
     `.woocommerce h3:not(.woocommerce-loop-product__title)`, que o :not()
     leva a (0,2,1) — dois niveis nao chegavam e ficava nos 18px de desktop. */
  .kn-trust .kn-trust-grid .kn-trust-title{
    font-size: var(--fs-2xs); letter-spacing: .01em; line-height: 1.25;
    margin-bottom: 0; overflow-wrap: anywhere;
  }
  .kn-trust .kn-trust-grid .kn-trust-text{ font-size: var(--fs-2xs); line-height: 1.4; max-width: none; }
}
@media (max-width: 620px){
  .kn-trust .kn-trust-grid .kn-trust-text{ display: none; }
  .kn-trust-ico{ width: 44px; height: 44px; }
}
.entry-content a{ color: var(--red); }
.entry-content h2, .entry-content h3{ color: var(--shop-text); font-family: var(--font-head); }
/* A themed .btn used inside page content (e.g. the assistência-técnica CTA)
   must keep its white label — the generic "links are red" rule above would
   otherwise turn it into invisible red-on-red text. */
.entry-content a.btn{ color: #fff !important; text-decoration: none; }

/* ═══════════════════ Typography scale — modern e-commerce caps ═══════════════════ */
/* H1 — page / archive titles (28–34px).
   A ficha de produto fica de fora de proposito: ali o titulo cede o lugar ao
   preco, e esta regra (0,2,1) ganhava a da ficha (0,2,0) e devolvia-lhe os
   33.6px. */
.woocommerce h1, .woocommerce-page h1, .shop-main h1, .page-main h1,
.woocommerce-products-header__title, .page-title{
  font-size: clamp(1.75rem, 2.4vw, 2.1rem); line-height: 1.2; font-weight: 800;
}
.single-product div.product .product_title{ font-weight: 800; }
/* H2 — section titles: Descrição, Produtos Relacionados, etc. (NOT product-card titles) */
.woocommerce h2:not(.woocommerce-loop-product__title):not(.wc-block-components-express-payment__title),
.shop-main h2:not(.woocommerce-loop-product__title):not(.wc-block-components-express-payment__title),
.page-main h2, .shop-section-title,
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce .related > h2, .woocommerce .upsells > h2, .woocommerce .cross-sells > h2,
.woocommerce .cart_totals h2, .woocommerce-account h2, .woocommerce-checkout h2{
  font-size: clamp(1.4rem, 2.1vw, 1.75rem); line-height: 1.3; font-weight: 800;
}
/* H3 — subtitles / trust titles (18–22px) */
.woocommerce h3:not(.woocommerce-loop-product__title), .shop-main h3,
.page-main h3, .page-main .entry-content h3{
  font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.4; font-weight: 700;
}
/* Product-card title stays compact */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: var(--fs-base); line-height: 1.35; font-weight: 700; min-height: 2.7em;
}
/* Body copy (16px, comfortable line-height) */
.shop-main p, .shop-main li,
.page-main .entry-content p, .page-main .entry-content li,
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel li{ font-size: var(--fs-base); line-height: 1.6; }
/* Prices */
/* O preco e maior do que o titulo, e nao o contrario: quem chega a uma ficha
   de produto ja sabe o que esta a ver e quer saber quanto custa. Antes o
   titulo tinha 33.6px e o preco 28px, e o numero desaparecia. */
.single-product div.product p.price,
.single-product div.product .summary .price{ font-size: clamp(1.75rem, 2.6vw, 2.3rem); line-height: 1.1; font-weight: 800; }
.woocommerce ul.products li.product .price{ font-size: var(--fs-lg); line-height: 1.1; }
/* Buttons / CTA — block buttons named individually, for the reason above: the
   base class also covers link-style buttons, whose size WooCommerce takes from
   the row they sit in. */
.woocommerce a.button, .woocommerce button.button, .woocommerce .button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-totals-coupon__button{ font-size: var(--fs-base); line-height: 1.1; }
/* Microcopy / badges */
.kn-cat-eyebrow, .shop-cat-count, .woocommerce .woocommerce-result-count{ font-size: var(--fs-xs); line-height: 1.4; }

/* ═══════════════════ Product card: hover slide-up + heart + Italy flag ═══════════════════ */
.woocommerce ul.products li.product{ position: relative; overflow: hidden; }
/* SP-style: add-to-cart slides up from the bottom on hover (hover devices only) */
@media (hover: hover){
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .added_to_cart{
    opacity: 0; transform: translateY(130%);
    transition: opacity .28s var(--ease), transform .3s var(--ease);
  }
  .woocommerce ul.products li.product:hover .button,
  .woocommerce ul.products li.product:hover .added_to_cart,
  .woocommerce ul.products li.product:focus-within .button,
  .woocommerce ul.products li.product:focus-within .added_to_cart{ opacity: 1; transform: none; }
}
/* Favourite heart (top-right) */
.woocommerce ul.products li.product .kn-fav{
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #64748b;
  cursor: pointer; box-shadow: 0 1px 5px rgba(16,23,42,.15);
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.woocommerce ul.products li.product .kn-fav:hover{ color: var(--red); transform: scale(1.08); }
.kn-fav svg{ width: 20px; height: 20px; }
.kn-fav.is-fav{ color: var(--red); }
.kn-fav.is-fav svg{ fill: var(--red); }
/* Italy flag corner badge (top-left) */
.woocommerce ul.products li.product .kn-italy{
  position: absolute; top: .8rem; left: .8rem; z-index: 3;
  width: 27px; height: 18px; border-radius: 3px; overflow: hidden; display: block;
  box-shadow: 0 1px 3px rgba(16,23,42,.28);
}
.kn-italy svg{ display: block; width: 100%; height: 100%; }

/* Single product: Italy badge + favourite */
.kn-italy-single{ display: inline-flex; align-items: center; gap: .5rem; margin: .1rem 0 .9rem; font-size: var(--fs-xs); font-weight: 600; color: var(--shop-muted); }
.kn-italy-single svg{ width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 1px 3px rgba(16,23,42,.22); }
.kn-fav-single-wrap{ display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.kn-fav-single-wrap .kn-fav{ position: static; width: 44px; height: 44px; border: 1px solid var(--shop-border); border-radius: 50%; background: #fff; color: var(--shop-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kn-fav-single-wrap .kn-fav:hover{ color: var(--red); border-color: var(--red); }
.kn-fav-single-wrap .kn-fav.is-fav{ color: var(--red); border-color: var(--red); }
.kn-fav-single-wrap .kn-fav.is-fav svg{ fill: var(--red); }
.kn-fav-single-label{ color: var(--shop-muted); font-size: var(--fs-sm); }

/* Header favourites counter (matches the cart badge) */
.nav-cart-link .kn-fav-count,
.kn-fav-link .kn-fav-count{
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--red); color: #fff; border-radius: 999px; font-size: var(--fs-2xs); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

/* ═══════════════════ Load more (with progress bar) ═══════════════════ */
.kn-load-more-wrap{ text-align: center; margin: 2.5rem auto .5rem; max-width: 440px; }
.kn-load-count{ color: var(--shop-muted); font-size: var(--fs-sm); margin: 0 0 .6rem; }
.kn-load-count b{ color: var(--shop-text); font-weight: 800; }
.kn-load-bar{ height: 6px; background: var(--shop-border); border-radius: 999px; overflow: hidden; margin: 0 0 1.2rem; }
.kn-load-bar-fill{ display: block; height: 100%; background: var(--shop-text); border-radius: 999px; transition: width .45s var(--ease); }
.kn-load-more{ min-width: 250px; }
.kn-load-more.is-loading{ opacity: .65; pointer-events: none; }

/* ═══════════════════ Favourites page ═══════════════════ */
.kn-favs-empty{ text-align: center; color: var(--shop-muted); padding: 2.5rem 0; font-size: var(--fs-base); }

/* ═══════════════════ Manuals section ═══════════════════ */
.kn-manuals-grid{ display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kn-manual{
  background: var(--shop-card); border: 1px solid var(--shop-border); border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem; text-align: center; box-shadow: var(--shop-shadow);
  display: flex; flex-direction: column; align-items: center;
}
/* The product shots are cut out on white, so the plate must be white too —
   a grey inset made them look like a mismatched patch. */
.kn-manual-img{ width: 100%; aspect-ratio: 4/3; background: #fff center/contain no-repeat; border-radius: var(--radius); margin-bottom: 1.1rem; }
.kn-manual-title{ font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base); color: var(--shop-text); margin: 0 0 1.1rem; }
.kn-manual-dl{
  margin-top: auto; display: inline-block; background: var(--red); color: #fff !important;
  font-family: var(--font-head); font-weight: 700; text-decoration: none;
  padding: .7rem 1.4rem; border-radius: 10px; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kn-manual-dl:hover{ background: var(--red-light); transform: translateY(-1px); }

/* ═══════════════════ Subcategory tiles (category pages) — small, centered ═══════════════════ */
.shop-cats--sub{ margin: .5rem 0 2.75rem; }
.shop-cats--sub .shop-cats-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2rem; }
.shop-cats--sub .shop-cat-tile{
  flex: 0 0 auto; width: 170px; min-height: 0; background: transparent; box-shadow: none;
  border-radius: 0; text-align: center; align-items: center; justify-content: flex-start;
}
.shop-cats--sub .shop-cat-tile::after{ display: none; }
.shop-cats--sub .shop-cat-img{
  position: static; width: 140px; height: 140px; margin: 0 auto; border-radius: 16px;
  background-color: var(--shop-card); background-size: contain; background-position: center; background-repeat: no-repeat;
  border: 1px solid var(--shop-border); box-shadow: var(--shop-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.shop-cats--sub .shop-cat-tile:hover{ transform: none; box-shadow: none; }
.shop-cats--sub .shop-cat-tile:hover .shop-cat-img{ transform: translateY(-4px); box-shadow: var(--shop-shadow-hover); }
.shop-cats--sub .shop-cat-body{ position: static; padding: .85rem 0 0; }
.shop-cats--sub .shop-cat-name{ color: var(--shop-text); font-size: var(--fs-base); }
.shop-cats--sub .shop-cat-count{ color: var(--shop-muted); }
.shop-cats--sub .shop-cat-more{ display: none; }

/* Inline Italy flag inside the product description text */
.kn-italy-inline{ display: inline-block; width: 20px; height: 14px; margin-left: .2rem; border-radius: 2px; overflow: hidden; vertical-align: middle; box-shadow: 0 0 0 1px rgba(16,23,42,.12); }
.kn-italy-inline svg{ display: block; width: 100%; height: 100%; }

/* Reseller form: partnership-type select */
.kn-rf-tipo{ margin-bottom: .35rem; }
.kn-reseller-form select{ border: 1px solid var(--shop-border); border-radius: 8px; padding: .7rem .8rem; font-size: var(--fs-base); background: #fff; color: var(--shop-text); }
.kn-reseller-form select:focus{ outline: none; border-color: var(--red); }

/* ═══════════════════ Revendedores page (/revendedores/) ═══════════════════ */
.kn-resell{ max-width: 880px; margin: 0 auto; }
.kn-resell-intro{ text-align: center; margin-bottom: 2.5rem; }
.kn-resell-logo{ height: 52px; width: auto; margin: 0 auto 1.75rem; display: block; }
.kn-resell-lead{ font-size: var(--fs-lg); line-height: 1.7; color: var(--shop-text); max-width: 640px; margin: 0 auto; }

.kn-resell h2{ margin-top: 3rem; margin-bottom: 1rem; }
.kn-resell > h2:first-of-type{ margin-top: 0; }

.kn-resell-types{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.kn-resell-type{ background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: var(--radius-lg); padding: 1.75rem; }
.kn-resell-type-badge{
  display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-head);
  font-weight: 800; font-size: var(--fs-sm); margin-bottom: 1rem;
}
.kn-resell-type h3{ margin: 0 0 .5rem; }
.kn-resell-type p{ margin: 0; color: var(--shop-muted); line-height: 1.65; }

.kn-resell-perks{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.75rem; }
.kn-resell-perks li{ position: relative; padding-left: 2.25rem; color: var(--shop-text); line-height: 1.6; }
.kn-resell-perks li::before{
  content: ''; position: absolute; left: 0; top: .1rem; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--red);
}
.kn-resell-perks li::after{
  content: ''; position: absolute; left: .55rem; top: .48rem; width: .4rem; height: .75rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.kn-resell-apply{ margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--shop-border); }
.kn-resell-apply h2{ margin-top: 0; }
.kn-resell-apply p{ color: var(--shop-muted); }
.kn-resell-apply .kn-reseller-form{ margin-top: 1.75rem; }

@media (max-width: 720px){
  .kn-resell-types{ grid-template-columns: 1fr; }
  .kn-resell-perks{ grid-template-columns: 1fr; }
}

/* ═══════════════════ Finder page ([kilonova_finder]) ═══════════════════ */
.kn-finder-page{ max-width: 860px; margin: 0 auto; }

/* Step 1 — the picker, on its own inset panel */
.kn-finder-panel{
  background: var(--shop-surface); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem;
}
.kn-finder-lead{ margin: 0 0 1.15rem; color: var(--shop-muted); font-size: var(--fs-sm); line-height: 1.55; }
/* Duas caixas desde que o ano passou para dentro do rotulo do modelo, e o
   modelo leva mais largura porque e nele que esta o texto comprido. */
.kn-finder-page .kn-finder-selects{ display: grid; grid-template-columns: minmax(130px, 0.8fr) minmax(190px, 1.3fr); gap: 1rem 1.25rem; margin: 0; }
@media (max-width: 560px){ .kn-finder-page .kn-finder-selects{ grid-template-columns: 1fr; } }
.kn-finder-field{ display: flex; flex-direction: column; gap: .35rem; font-weight: 600; color: var(--shop-text); }
.kn-finder-field span{ font-size: var(--fs-xs); }
/* NB: flex:0 0 auto — the shop-finder rule sets flex-basis 240px, which becomes
   the HEIGHT inside this column-flex label (that's what made these gigantic). */
.kn-finder-field select{
  flex: 0 0 auto; height: 48px; min-width: 0; width: 100%;
  padding: 0 2.5rem 0 .9rem; font-size: var(--fs-sm); font-weight: 500;
  border: 1px solid var(--shop-border); border-radius: 10px;
  background-color: #fff; color: var(--shop-text);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.kn-finder-field select:disabled{ opacity: .55; cursor: not-allowed; }
.kn-finder-field select:focus{ outline: none; border-color: var(--red); }

/* Step 2 — results */
.kn-finder-results:empty{ display: none; }
.kn-finder-reshead{ display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: 2rem 0 .35rem; }
.kn-finder-reshead h2{ margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.kn-finder-reshead span{ color: var(--shop-muted); font-size: var(--fs-sm); font-weight: 600; }
.kn-finder-note{ margin: 0 0 1.1rem; color: var(--shop-muted); font-size: var(--fs-sm); }

.kn-finder-parts{ display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.kn-finder-part{
  display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.25rem;
  background: var(--shop-card); border: 1px solid var(--shop-border);
  border-left: 4px solid var(--red); border-radius: 12px; padding: 1rem 1.25rem;
  text-decoration: none; box-shadow: var(--shop-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kn-finder-part:hover{ transform: translateY(-2px); box-shadow: var(--shop-shadow-hover); }
/* A miniatura entra antes do texto. `flex: 0 0 auto` e obrigatorio: dentro de
   um flex container a imagem encolheria para caber, e o quadrado deixava de o
   ser. `object-fit: contain` sobre fundo claro porque as fotos da SP vem em
   fundo branco e recortar cortava a peca. */
.kn-finder-part-img{
  flex: 0 0 auto; width: 64px; height: 64px; object-fit: contain;
  border-radius: 8px; background: #fff; border: 1px solid var(--shop-border);
}
.kn-finder-part-main{ display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; }
.kn-finder-part-name{ font-family: var(--font-head); font-weight: 800; color: var(--shop-text); font-size: var(--fs-base); }
.kn-finder-part-for{ color: var(--shop-muted); font-size: var(--fs-xs); }
.kn-finder-part-sensor{ color: var(--shop-text); font-size: var(--fs-sm); font-weight: 600; }
.kn-finder-part-meta{ display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; flex: 0 0 auto; }
.kn-finder-part-price{ font-family: var(--font-head); font-weight: 800; color: var(--shop-text); font-size: var(--fs-base); }
.kn-finder-part-ref{ color: var(--shop-muted); font-size: var(--fs-2xs); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kn-finder-part-go{ color: var(--red); font-size: var(--fs-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

.kn-finder-linked{ background: var(--shop-surface); border: 1px solid var(--shop-border); border-radius: 12px; padding: .3rem 1.25rem; margin-bottom: 1.5rem; }
.kn-finder-linked summary{ cursor: pointer; font-weight: 700; color: var(--shop-text); padding: .8rem 0; font-size: var(--fs-sm); }
.kn-finder-linked ul{ list-style: none; padding: 0 0 .8rem; margin: 0; columns: 2; }
.kn-finder-linked li{ color: var(--shop-muted); padding: .2rem 0; font-size: var(--fs-sm); break-inside: avoid; }

.kn-finder-cantfind{
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .75rem 1.25rem; text-align: center; margin-top: 2rem; padding-top: 1.75rem;
  border-top: 1px solid var(--shop-border); color: var(--shop-muted);
}
.kn-finder-cantfind .btn{ color: #fff !important; text-decoration: none; }

@media (max-width: 640px){
  .kn-finder-page .kn-finder-selects{ grid-template-columns: 1fr; }
  .kn-finder-linked ul{ columns: 1; }
  /* Em coluna, a foto sozinha numa linha so desperdicava altura — fica ao lado
     do nome, e o bloco de preco/referencia e que passa para baixo. */
  .kn-finder-part{ flex-wrap: wrap; align-items: flex-start; }
  .kn-finder-part-img{ width: 52px; height: 52px; }
  .kn-finder-part-main{ flex: 1 1 60%; }
  .kn-finder-part-meta{ flex: 1 1 100%; align-items: flex-start; text-align: left; }
}

/* ═══════════════════ Contact page ([kilonova_contact]) ═══════════════════ */
/* Full-bleed, wide SP-style layout: break the content out of the 1200px page
   container (and out of the generic white "card" .entry-content gets on every
   other plain page) so the columns, form and — especially — the map span the
   whole viewport with no gutter, the same way the footer does. */
.page-content:has(.kn-contact){ max-width: 100%; padding-inline: 0; }
.page-content:has(.kn-contact) .page-title{ text-align: center; padding-inline: clamp(1.5rem, 6vw, 6rem); }
.entry-content:has(.kn-contact){
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important;
}
.kn-contact{ padding: 0 clamp(1.5rem, 6vw, 6rem); }

.kn-contact-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 5vw, 4rem); text-align: center; margin: 0 0 3rem; }
.kn-contact-bar{ display: block; width: 48px; height: 4px; background: var(--red); border-radius: 999px; margin: 0 auto .9rem; }
.kn-contact-col h3{ font-family: var(--font-head); font-weight: 800; color: var(--shop-text); margin: 0 0 .6rem; }
.kn-contact-col p{ color: var(--shop-muted); line-height: 1.7; margin: 0; }
.kn-contact-col a{ color: var(--red); text-decoration: none; }

/* Redes Sociais: icon buttons (same marks as the footer), light-bg variant. */
.kn-contact-social{ display: flex; justify-content: center; gap: .6rem; margin-top: .3rem; }
.kn-contact-social .social-link{ width: 34px; height: 34px; background: var(--shop-bg); border: 1px solid var(--shop-border); color: var(--shop-text); }
.kn-contact-social .social-link:hover{ background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-2px); }

/* Form: centred, comfortable width (not stretched edge-to-edge like the map). */
.kn-contact-form{ max-width: 880px; margin: 0 auto; }
.kn-contact-form .kn-rf-grid{ grid-template-columns: repeat(3, 1fr); }
.kn-contact-form button{ display: block; margin-inline: auto; }

/* Map: edge-to-edge (flush, no card, touching the sides like the footer),
   closer zoom, and a muted/faded tone so it reads less like a raw Google
   Maps embed while still keeping some colour. */
.kn-contact-map{ margin: 3rem 0 0; border-radius: 0; overflow: hidden; box-shadow: none; line-height: 0; }
.kn-contact-map iframe{ display: block; width: 100%; height: 460px; border: 0; filter: grayscale(.6) contrast(1.05) brightness(1.04) saturate(1.3); }

@media (max-width: 900px){ .kn-contact-form .kn-rf-grid{ grid-template-columns: 1fr; } }
@media (max-width: 720px){ .kn-contact-cols{ grid-template-columns: 1fr; } }

/* ═══════════════ Assistência Técnica page (/assistencia-tecnica/) ═══════════ */
.kn-assist{ max-width: 780px; }
.kn-assist-lead{ font-size: var(--fs-base); color: var(--shop-muted); }
.kn-assist-steps{ list-style: none; counter-reset: kn-step; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.kn-assist-steps li{ counter-increment: kn-step; position: relative; padding-left: 3rem; color: var(--shop-text); line-height: 1.6; }
.kn-assist-steps li::before{
  content: counter(kn-step); position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem;
  border-radius: 50%; background: var(--red); color: #fff; font-family: var(--font-head); font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-base); line-height: 1;
}
.kn-assist-box{ background: var(--shop-card); border: 1px solid var(--shop-border); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; margin: 1.5rem 0; }
.kn-assist-box h3{ margin-top: 0; }
.kn-assist-box p{ margin: 0 0 1rem; }
.kn-assist-box p:last-child{ margin-bottom: 0; }
.kn-assist-contact .btn{ margin-top: .25rem; }

/* ═══════════ Bike compatibility gate (single product, inc/compat.php) ══════ */
.kn-compat{
  background: var(--shop-surface); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg); padding: 1.25rem 1.35rem; margin: 0 0 1.35rem;
}
.kn-compat-intro{ margin: 0 0 1rem; color: var(--shop-muted); font-size: var(--fs-sm); line-height: 1.55; }
.kn-compat-intro strong{ color: var(--shop-text); font-family: var(--font-head); }
/* Marca · Modelo · Ano. auto-fit em vez de repeat(3) porque esta caixa vive
   na coluna estreita da ficha de produto: com espaco ficam os tres lado a
   lado, sem ele partem para duas linhas em vez de espremer. */
/* Duas caixas, e nao a partes iguais: as marcas sao curtas ("Husqvarna") e os
   modelos passaram a trazer o intervalo de anos atras ("450 FE (2009-2015)").
   Metade e metade cortava o rotulo justamente onde esta a informacao nova. */
.kn-compat-fields{ display: grid; grid-template-columns: minmax(110px, 0.8fr) minmax(150px, 1.3fr); gap: .9rem; }
/* Modelo com um so intervalo de anos: o campo desaparece em vez de ficar ali
   com a unica resposta ja dada. */
.kn-compat-field[hidden]{ display: none !important; }
.kn-compat-field{ display: flex; flex-direction: column; gap: .3rem; }
.kn-compat-field > span{ font-weight: 600; font-size: var(--fs-xs); color: var(--shop-text); }
.kn-compat-field select{
  height: 46px; padding: 0 2.25rem 0 .8rem; font-size: var(--fs-sm);
  border: 1px solid var(--shop-border); border-radius: 10px;
  background-color: #fff; color: var(--shop-text); appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.kn-compat-field select:disabled{ opacity: .55; cursor: not-allowed; }
.kn-compat-field select:focus{ outline: none; border-color: var(--red); }

.kn-compat-result{ margin-top: 1rem; font-size: var(--fs-sm); line-height: 1.55; }
.kn-compat-result:empty{ margin-top: 0; }
.kn-compat-result p{ margin: 0 0 .35rem; }
.kn-compat-result.is-ok{ border-left: 3px solid var(--shop-ok); padding-left: .85rem; }
.kn-compat-result.is-bad{ border-left: 3px solid var(--red); padding-left: .85rem; }
.kn-compat-ok{ color: var(--shop-ok); font-weight: 600; }
.kn-compat-refs{ color: var(--shop-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs); }
.kn-compat-result.is-bad strong{ color: var(--red); }
.kn-compat-result a{ color: var(--red); font-weight: 600; }

/* Add-to-cart stays locked until a bike is confirmed.
   Was opacity .45 on the brand red: white on pale pink measures about
   1.9:1, so the label on the one control the customer is looking for was
   the least readable text on the page — and pale red still reads as a live
   button. A neutral disabled surface says "not yet" and leaves red meaning
   "go". */
.woocommerce div.product form.cart .single_add_to_cart_button.kn-locked,
.woocommerce div.product form.cart button.kn-locked{
  background: #eceef1 !important;
  border: 1px solid var(--shop-border) !important;
  color: #6f7684 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
@media (max-width: 520px){ .kn-compat-fields{ grid-template-columns: 1fr; } }

/* ═══════════ Shop landing category mosaic (SP layout) ═══════════════════ */
/* Two stacked left · one tall feature centre · two stacked right. */
.shop-cats-mosaic{
  display: grid; gap: 1rem; margin: 0 0 2.5rem;
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-areas: "a c d" "b c e";
}
.kn-mtile--a{ grid-area: a; } .kn-mtile--b{ grid-area: b; }
.kn-mtile--c{ grid-area: c; } .kn-mtile--d{ grid-area: d; }
.kn-mtile--e{ grid-area: e; }

.kn-mtile{
  position: relative; display: flex; align-items: flex-end;
  min-height: 210px; padding: 1.5rem 1.6rem; overflow: hidden;
  border-radius: var(--radius-lg); text-decoration: none;
  background: #0d0d0d center/cover no-repeat;
  box-shadow: var(--shop-shadow);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.kn-mtile::after{
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.30) 0%, rgba(10,10,12,.62) 55%, rgba(10,10,12,.86) 100%);
  transition: background var(--dur) var(--ease);
}
.kn-mtile:hover{ transform: translateY(-4px); box-shadow: var(--shop-shadow-hover); }
.kn-mtile:hover::after{ background: linear-gradient(180deg, rgba(10,10,12,.22) 0%, rgba(10,10,12,.55) 55%, rgba(10,10,12,.84) 100%); }

.kn-mtile-body{ position: relative; z-index: 1; display: block; }
.kn-mtile-name{
  display: block; font-family: var(--font-head); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
  color: var(--red-pale, #ff5c7a); font-size: var(--fs-base); margin-bottom: .35rem;
}
.kn-mtile-tag{ display: block; color: #fff; font-weight: 700; font-size: var(--fs-sm); line-height: 1.35; margin-bottom: .8rem; }
.kn-mtile-cta{
  display: inline-block; color: #fff; font-size: var(--fs-2xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
  border-bottom: 2px solid var(--red); padding-bottom: 2px;
  transition: color var(--dur) var(--ease);
}
.kn-mtile:hover .kn-mtile-cta{ color: var(--red-pale, #ff5c7a); }

/* Centre feature: taller, bigger type, and a solid button instead of a link. */
.kn-mtile--feature{ min-height: 440px; align-items: center; justify-content: center; text-align: center; }
.kn-mtile--feature .kn-mtile-name{ font-size: var(--fs-2xl); }
.kn-mtile--feature .kn-mtile-tag{ font-size: var(--fs-base); margin-bottom: 1.35rem; }
.kn-mtile--feature .kn-mtile-cta{
  background: var(--red); border: 0; border-radius: 999px;
  padding: .85rem 1.9rem; font-size: var(--fs-xs); color: #fff;
}
.kn-mtile--feature:hover .kn-mtile-cta{ background: var(--red-light); color: #fff; }

@media (max-width: 900px){
  .shop-cats-mosaic{ grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "a b" "d e"; }
  .kn-mtile--feature{ min-height: 320px; }
}
@media (max-width: 560px){
  .shop-cats-mosaic{ grid-template-columns: 1fr; grid-template-areas: "c" "a" "b" "d" "e"; }
}

/* ═══════════ Store: text selection is allowed ══════════════════════════ */
/* The marketing site blocks copying on purpose; a shop must not — customers
   need to copy references, addresses, IBANs and order numbers. */
body.kn-shop-ctx,
body.kn-shop-ctx *{
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
  -webkit-touch-callout: default;
}
body.kn-shop-ctx img{ pointer-events: auto; -webkit-user-drag: auto; }
@media print{ body.kn-shop-ctx{ display: block !important; } }

/* ═══════════ Checkout / cart order summary ═════════════════════════════ */
/* A summary line only needs: thumbnail · name · fitment meta · line total.
   The marketing description was squeezing the name column so hard it wrapped
   one word per line. */
.wc-block-components-order-summary-item{ align-items: flex-start; }
.wc-block-components-order-summary-item__image{ flex: 0 0 48px; width: 48px; }
.wc-block-components-order-summary-item__image img{ width: 48px; height: auto; }
.wc-block-components-order-summary-item__description{
  min-width: 0;            /* lets the text column actually shrink/grow */
  padding-inline: .8rem 0;
}
.wc-block-components-order-summary-item__total-price{ white-space: nowrap; flex: 0 0 auto; }

/* Name: readable, wraps like a sentence — not a heading. */
.wc-block-components-order-summary-item .wc-block-components-product-name{
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-sm) !important; line-height: 1.35; color: var(--shop-text);
  overflow-wrap: anywhere;
}
/* Drop the marketing blurb here — it belongs on the product page. */
.wc-block-components-order-summary-item .wc-block-components-product-metadata__description{ display: none !important; }
/* Unit price is secondary to the line total on the right. */
.wc-block-components-order-summary-item .wc-block-components-product-price{
  font-size: var(--fs-xs); color: var(--shop-muted);
}
/* Fitment meta ("Mota", "Ref.ª aplicável") — compact, one per line. */
.wc-block-components-order-summary-item .wc-block-components-product-details{
  margin: .4rem 0 0; padding: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--shop-muted);
}
.wc-block-components-order-summary-item .wc-block-components-product-details__name{ font-weight: 600; }


/* ═══════════ Mobile legibility ═════════════════════════════════════════
   Measured in a 390px viewport: several labels rendered between 11.2px and
   11.8px. They read fine on a desktop at those sizes, but uppercase micro-copy
   with letter-spacing below 12px is the first thing to become hard work on a
   phone. Floor them at 12px; the desktop sizes are untouched. */
@media (max-width: 600px){
  .shop-hero-eyebrow,
  .kn-mtile-cta,
  .kn-mtile--feature .kn-mtile-cta,
  .kn-cat-eyebrow,
  .woocommerce ul.products li.product .kn-cat-eyebrow,
  .shop-cat-count,
  .woocommerce .woocommerce-result-count{
    font-size: var(--fs-2xs);
  }
  /* Cart/checkout line meta: the bike and reference the compatibility gate
     records. At 11.4px this is the smallest text a customer has to actually
     read to check their order is right. */
  .wc-block-components-product-details__name,
  .wc-block-components-product-details__value,
  .wc-block-components-product-metadata,
  .wc-block-components-order-summary-item .wc-block-components-product-details{
    font-size: var(--fs-2xs);
  }
}

/* The result count sits on the grey toolbar, where --shop-muted measured
   4.15:1 — just under the 4.5:1 WCAG AA floor for body text. */
.woocommerce .kn-shop-toolbar .woocommerce-result-count,
.woocommerce .woocommerce-result-count{ color: #55607a; }

/* ═══════════ Checkout: painel focado, ao estilo Shelly ═══════════════════
   Um checkout não é uma página do site: é um funil. O layout aqui é o padrão
   que praticamente todas as lojas convergiram para usar, e por boas razões —
   sem navegação para sair, o resumo sempre visível à direita, e o formulário
   numa coluna estreita que se lê de uma passagem.

   Tudo abaixo está limitado a body.woocommerce-checkout, portanto o carrinho,
   a conta e a loja não são tocados. */

body.woocommerce-checkout:not(.woocommerce-order-received){
  --kn-co-panel:  #f6f7f9;   /* o painel cinzento à direita */
  --kn-co-line:   #e3e6ea;
  --nav-h: 76px;             /* o cabeçalho mínimo é mais baixo que o do site */
}

/* ── Cabeçalho mínimo ───────────────────────────────────────────────────── */
.navbar--checkout{
  background: #fff;
  border-bottom: 1px solid var(--kn-co-line);
  box-shadow: none;
}
.nav-inner--checkout{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--nav-h);
}
.nav-inner--checkout .nav-logo{ justify-self: center; }
.nav-inner--checkout .logo-img-nav{ width: 150px; }
.nav-checkout-actions{ justify-self: end; }
.navbar--checkout .nav-icon-link{ color: var(--shop-text); }

/* ── O ecrã ao meio: formulário branco | resumo cinzento ────────────────── */
body.woocommerce-checkout:not(.woocommerce-order-received) .page-title{ display: none; }
body.woocommerce-checkout:not(.woocommerce-order-received) .page-main,
body.woocommerce-checkout:not(.woocommerce-order-received) .page-main > .container,
body.woocommerce-checkout:not(.woocommerce-order-received) .entry-content{
  max-width: none; width: auto; padding: 0; margin: 0;
  background: #fff; border: 0; box-shadow: none; border-radius: 0;
}

@media (min-width: 1000px){
  .woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout{
    gap: 0;
    align-items: stretch;
    flex-wrap: nowrap;
    min-height: calc(100vh - var(--nav-h));
  }
  .woocommerce-checkout .wc-block-checkout .wc-block-checkout__main{
    flex: 1 1 54%;
    background: #fff;
    padding: 48px clamp(28px, 3.5vw, 64px) 88px;
  }
  /* O conteúdo encosta à linha do meio, como no Shelly, em vez de flutuar. */
  .woocommerce-checkout .wc-block-checkout__main > *{
    max-width: 580px; width: 100%; margin-left: auto; margin-right: 0;
  }
  .woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar{
    flex: 1 1 46%;
    background: var(--kn-co-panel);
    border-left: 1px solid var(--kn-co-line);
    padding: 48px clamp(28px, 3.5vw, 64px);
    position: sticky !important;
    top: var(--nav-h) !important;
    align-self: flex-start;
    min-height: calc(100vh - var(--nav-h));
    border-radius: 0;
    box-shadow: none;
  }
  .woocommerce-checkout .wc-block-checkout__sidebar > *{
    max-width: 460px; width: 100%; margin-right: auto; margin-left: 0;
  }
}

/* O resumo deixa de ser um cartão dentro de outro: o painel já é o cartão.
   Cuidado: o elemento do painel tem as duas classes
   (.wc-block-components-sidebar E .wc-block-checkout__sidebar), por isso
   listar a primeira aqui apagava-lhe o fundo cinzento. Só o bloco interior. */
.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block{
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.woocommerce-checkout .wc-block-components-order-summary{ padding: 0; }
.woocommerce-checkout .wc-block-components-totals-coupon,
.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-item{
  padding-left: 0; padding-right: 0;
}

/* Distintivo de quantidade sobre a miniatura, como no exemplo. */
.woocommerce-checkout .wc-block-components-order-summary-item__image{ overflow: visible; }
.woocommerce-checkout .wc-block-components-order-summary-item__quantity{
  background: var(--shop-text) !important;
  box-shadow: 0 0 0 2px var(--kn-co-panel);
}

/* ── Métodos de pagamento: lista com moldura, logótipo à direita ────────── */
.woocommerce-checkout .wc-block-components-radio-control{
  border: 1px solid var(--kn-co-line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.woocommerce-checkout .wc-block-components-radio-control__option{
  /* Só o padding vertical: a WooCommerce posiciona o círculo do rádio em
     position:absolute e reserva-lhe o espaço no padding-left. Substituir o
     atalho completo punha o círculo por cima do texto ("◯yPal"). */
  padding-top: 16px;
  padding-bottom: 16px;
  margin: 0;
  border-bottom: 1px solid var(--kn-co-line);
}
.woocommerce-checkout .wc-block-components-radio-control__option:last-child{ border-bottom: 0; }
.woocommerce-checkout .wc-block-components-radio-control-accordion-option{
  border-bottom: 1px solid var(--kn-co-line);
}
.woocommerce-checkout .wc-block-components-radio-control-accordion-option:last-child{ border-bottom: 0; }
.woocommerce-checkout .wc-block-components-radio-control__label-group{
  justify-content: space-between;
  width: 100%;
}

/* ── Títulos de secção mais próximos do exemplo ─────────────────────────── */
.woocommerce-checkout .wc-block-components-checkout-step__title{
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -.01em;
}
.woocommerce-checkout .wc-block-components-checkout-step__description{
  color: var(--shop-muted);
  font-size: var(--fs-sm);
}

/* ── Telemóvel: empilha, resumo primeiro, sem sticky ────────────────────── */
@media (max-width: 999px){
  .woocommerce-checkout .wc-block-checkout .wc-block-checkout__sidebar{
    background: var(--kn-co-panel);
    border: 0; border-radius: 0; box-shadow: none;
    padding: 24px clamp(16px, 5vw, 28px);
    position: static !important;
  }
  .woocommerce-checkout .wc-block-checkout .wc-block-checkout__main{
    padding: 24px clamp(16px, 5vw, 28px) 56px;
  }
  .nav-inner--checkout .logo-img-nav{ width: 120px; }
}


/* ═══════════ Checkout: acabamentos ══════════════════════════════════════ */

/* O painel branco herdava o cartao do tema — moldura, sombra e
   border-radius: 20px. Contra o painel cinzento isso desenhava um canto
   arredondado a meio do ecra, ao lado do botao de finalizar. */
.woocommerce-checkout .wc-block-checkout .wc-block-checkout__main{
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Cantos mais marcados, ao estilo da referencia. */
.woocommerce-checkout .wc-block-components-radio-control{ border-radius: 14px; }

/* ── O contorno do metodo seleccionado ───────────────────────────────────
   A WooCommerce desenha-o num ::after do grupo. Duas coisas a corrigir:
   a cor era `currentColor` a 20% (um cinzento sujo), e quando a opcao
   escolhida e a primeira ou a ultima ela remove a borda de topo/base e
   desloca a caixa 2px — com cantos arredondados isso deixa-os abertos, que
   e a "falha nos cantos". */
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after{
  border: 1.5px solid var(--bg);
  border-radius: 14px;
  margin: 0;
}
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked--first-selected::after,
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked--last-selected::after{
  border-top-width: 1.5px;
  border-bottom-width: 1.5px;
  margin: 0;
}
/* Um fundo com um toque de azul, para o seleccionado se ler de relance sem
   precisar de uma moldura pesada. */
.woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.woocommerce-checkout .wc-block-components-radio-control__option--checked-option-highlighted{
  background: #f5f7fb;
}
/* O ponto do radio tambem no azul da marca, em vez de preto. */
.woocommerce-checkout .wc-block-components-radio-control__input:checked{
  border-color: var(--bg);
}
.woocommerce-checkout .wc-block-components-radio-control__input:checked::before{
  background: var(--bg);
}

/* ── Logotipo do PayPal ──────────────────────────────────────────────────
   Nenhum gateway entrega icone em wcSettings.paymentMethodData: os "MB" vem
   dentro do proprio titulo do plugin ifthenpay. O PayPal fica sem nada.
   Usamos o artwork oficial que o proprio plugin ja serve, em vez de uma copia
   nossa — assim acompanha as actualizacoes dele, e se o plugin sair o metodo
   deixa de existir de qualquer forma. */
.woocommerce-checkout label[for="radio-control-wc-payment-method-options-ppcp-gateway"] .wc-block-components-radio-control__label::before{
  content: "";
  display: inline-block;
  vertical-align: -.35em;
  width: 62px;
  height: 18px;
  margin-right: .55rem;
  background: url("../../../plugins/woocommerce-paypal-payments/modules/ppcp-wc-gateway/assets/images/paypal.png") left center / contain no-repeat;
}

/* Transferencia bancaria (bacs): o gateway do WooCommerce nao traz marca
   nenhuma, por isso o simbolo e desenhado em SVG inline — assim acompanha a
   cor do texto e nao ha um ficheiro a mais para carregar. */
.woocommerce-checkout label[for="radio-control-wc-payment-method-options-bacs"] .wc-block-components-radio-control__label::before{
  content: "";
  display: inline-block;
  vertical-align: -.3em;
  width: 22px;
  height: 18px;
  margin-right: .55rem;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052133' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18M5 10v8M10 10v8M14 10v8M19 10v8M2 18h20M12 3 2.5 8h19L12 3Z'/%3E%3C/svg%3E") left center / contain no-repeat;
}


/* ═══════════ Ficha de produto: ritmo vertical ═══════════════════════════
   Medido na pagina ao vivo: o titulo (33.6px) tinha 8px ate ao preco (28px),
   e o preco tinha **0px** ate a caixa de compatibilidade. Tres blocos
   diferentes encostados uns aos outros, sem hierarquia nenhuma.

   O ritmo abaixo agrupa o que pertence junto (titulo + preco) e separa o que
   e um bloco novo (escolher a mota, comprar, meta do produto). */
.single-product div.product .summary > * { margin-top: 0; }

.single-product div.product .product_title{ margin-bottom: var(--sp-2); }

.single-product div.product p.price,
.single-product div.product .summary .price{
  margin: 0 0 var(--sp-4);
}

/* A caixa de compatibilidade e o primeiro bloco de accao: precisa de respirar. */
.single-product div.product .summary .kn-compat{ margin-top: 0; }

/* A quantidade e o "Adicionar" numa linha, alinhados ao centro.
   O form vinha em `display:block`, portanto os dois controlos assentavam na
   linha de base do texto: medido, a caixa da quantidade ficava em 812.4 com
   46.8px de altura e o botao em 820.4 com 53.2px — 8px de desvio no topo,
   14.4px em baixo e alturas diferentes. A margem de 8px que eu tinha posto
   nos dois so pegou no botao (a WooCommerce reescreve a da .quantity), o que
   piorou o desalinhamento em vez de o corrigir.
   Flex resolve o alinhamento; a altura comum resolve o resto. */
.single-product div.product form.cart{
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
/* Blocos que ocupam a linha toda (a caixa de compatibilidade, e o express
   checkout quando o plugin o coloca dentro do formulario). */
.single-product div.product form.cart > .kn-compat,
.single-product div.product form.cart > .ppc-button-wrapper,
.single-product div.product form.cart > .ppcp-messages,
.single-product div.product form.cart > .woocommerce-variation-add-to-cart,
.single-product div.product form.cart > table.variations{ flex: 1 0 100%; }
.single-product div.product form.cart > .kn-compat{ margin-bottom: 0; }

.single-product div.product form.cart .quantity{ margin: 0; display: flex; }
.single-product div.product form.cart .quantity input.qty{
  height: var(--kn-ctl-h);
  padding: 0 .5rem;
  text-align: center;
}
.single-product div.product form.cart .single_add_to_cart_button{
  margin: 0;
  height: var(--kn-ctl-h);
  padding: 0 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Express checkout e favoritos: blocos proprios. */
.single-product div.product .ppc-button-wrapper,
.single-product div.product .ppcp-messages{ margin-top: var(--sp-4); }
.single-product div.product .kn-fav-single-wrap{ margin-top: var(--sp-4); }

/* A referencia e a categoria sao metadados: separados por uma linha, nao
   colados ao botao de favoritos. */
.single-product div.product .product_meta{
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--shop-border);
  font-size: var(--fs-xs);
  color: var(--shop-muted);
}
/* WooCommerce emits the meta spans inline, separated by a single space, so
   "REF: SP-P64" and "Categoria: ..." ran together as one sentence. One per
   line, which is how the information is actually read. */
.single-product div.product .product_meta > span{ display: block; }
.single-product div.product .product_meta > span + span{ margin-top: var(--sp-1); }
.single-product div.product .product_meta a{ color: var(--shop-muted); }
.single-product div.product .product_meta a:hover{ color: var(--red); }


/* Express checkout fora da ficha de produto que precisa de configuracao.
   O filtro em inc/compat.php ja diz ao plugin do PayPal que o botao esta
   desactivado, e ele obedece — mas "desactivado" ali significa desenhado em
   estado inactivo, nao ausente. Um botao PayPal com ar de vivo ao lado de um
   "Adicionar" cinzento convida ao clique, e essa compra nao levaria a mota
   nem a referencia. */
/* .single-product is a BODY class, not an ancestor — a descendant selector
   built on it matches nothing. Qualify on the body itself. */
body.kn-needs-config .ppc-button-wrapper,
body.kn-needs-config .ppcp-messages,
body.kn-needs-config .ppcp-button-apm,
body.kn-needs-config .ppcp-applepay-button-container,
body.kn-needs-config .ppcp-googlepay-button-container{ display: none !important; }

/* A migalha de pao da WooCommerce ficou fora da escala (14.7px). */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a{ font-size: var(--fs-xs); }

/* O mesmo aviso, nas paginas claras da loja. O tamanho tem de vir aqui: a
   regra de texto corrente `.shop-main p` e mais especifica do que a classe
   sozinha, por isso o aviso saia a 16px em vez do tamanho secundario. */
.shop-main .kn-form-privacy,
.page-main .kn-form-privacy { color: var(--shop-muted); font-size: var(--fs-sm); }
.shop-main .kn-form-privacy a,
.page-main .kn-form-privacy a { color: var(--red); }

/* Opcionais que servem com qualquer kit. Distintos dos kits compatíveis —
   a resposta à pergunta "o que serve na minha mota" é a lista de cima; estes
   são um extra, e não podem ser lidos como parte obrigatória do kit. */
.kn-finder-note--extra{ margin-top: var(--sp-4); }
.kn-finder-part--extra{ border-left-color: var(--shop-muted); }
.kn-finder-part--extra .kn-finder-part-for{ font-style: italic; }

/* A lista de motas vive agora dentro do cartao, e e propria de cada produto —
   por isso o cartao passou a ser um embrulho: <details> com <summary> nao pode
   ir dentro de um <a>. */
.kn-finder-partwrap{ display: flex; flex-direction: column; }
.kn-finder-linked--card{
  margin: -6px 0 0; border-top: 0;
  border-radius: 0 0 12px 12px; padding: .3rem 1.25rem .3rem calc(1.25rem + 4px);
}
.kn-finder-linked--card summary{ font-size: var(--fs-xs); font-weight: 600; color: var(--shop-muted); padding: .7rem 0; }
.kn-finder-linked--card[open] summary{ color: var(--shop-text); }
.kn-finder-linked--card li{ font-size: var(--fs-xs); }

/* ═══════════ Extras recomendados (inc/bundle.php) ══════════════════════ */
.kn-bundle{
  /* `flex: 1 1 100%` e nao `1 0 100%`: o form.cart e uma linha flex, e um item
     de flex que nao encolhe (`flex-shrink: 0`) com `min-width: auto` planta-se
     na largura minima do proprio conteudo e ignora o ecra. Era o que fazia a
     caixa medir 428px num telemovel de 375 e arrastar a pagina inteira para o
     lado. O `min-width: 0` e a outra metade: sem ele, "encolher" continua a ter
     um chao que e o texto mais comprido la dentro. */
  flex: 1 1 100%; min-width: 0;
  margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-4);
  /* Branco: as fotos dos produtos vem recortadas sobre branco e sobre o cinza
     via-se o rectangulo de cada uma. */
  background: #fff; border: 1px solid var(--shop-border);
  border-radius: 12px;
}
.kn-bundle-item + .kn-bundle-item{ border-top: 1px solid var(--shop-border); padding-top: var(--sp-2); }
.kn-bundle-thumb img{ background: #fff; }
.kn-bundle-head{ margin: 0 0 var(--sp-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .75rem; }
.kn-bundle-head strong{ font-family: var(--font-head); font-size: var(--fs-base); color: var(--shop-text); }
.kn-bundle-bonus{
  font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--red); border-radius: 999px; padding: .2rem .6rem;
}
.kn-bundle-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.kn-bundle-item{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--sp-2); min-width: 0; }
.kn-bundle-pick{
  display: flex; align-items: center; gap: var(--sp-2); flex: 1 1 260px; min-width: 0;
  cursor: pointer; font-size: var(--fs-sm); color: var(--shop-text);
}
.kn-bundle-pick input{ flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--red); }
.kn-bundle-thumb{ flex: 0 0 auto; width: 48px; }
.kn-bundle-thumb img{ width: 48px; height: auto; border-radius: 6px; display: block; }
.kn-bundle-name{ flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.kn-bundle-price{ flex: 0 0 auto; white-space: nowrap; }
.kn-bundle-price del{ color: var(--shop-muted); font-size: var(--fs-xs); margin-right: .4rem; }
.kn-bundle-price ins{ color: var(--red); font-weight: 700; text-decoration: none; }
/* O comprimento da haste: sem isto, escolher e adivinhar. */
.kn-bundle-variation{
  flex: 1 1 100%; height: 40px; padding: 0 .7rem; margin-left: calc(18px + 48px + var(--sp-2) * 2);
  border: 1px solid var(--shop-border); border-radius: 8px; background: #fff; color: var(--shop-text);
}
@media (max-width: 520px){
  .kn-bundle-variation{ margin-left: 0; }
  .kn-bundle-price{ margin-left: calc(18px + 48px + var(--sp-2) * 2); }
}

/* ═══════════ Faixa de envio grátis ═════════════════════════════════════ */
/* Uma linha de informacao ao lado do SKU, nao uma caixa: e onde a SP a poe e
   e o tamanho a que se le sem disputar atencao com o botao de comprar. */
.single-product div.product .kn-freeship,
.kn-freeship{
  display: flex; align-items: center; gap: .55rem;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--shop-muted);
}
.kn-freeship svg{ flex: 0 0 auto; width: 18px; height: 18px; color: var(--red); }
.kn-freeship strong{ font-weight: 700; color: var(--shop-text); }
/* A meta vem logo a seguir: uma so linha a separar as duas. */
.single-product div.product .kn-freeship + .product_meta{ margin-top: var(--sp-2); }

/* ═══════════ Faixa de envio grátis ═════════════════════════════════════ */
/* Uma linha de informacao ao lado do SKU, nao uma caixa: e onde a SP a poe e
   e o tamanho a que se le sem disputar atencao com o botao de comprar. */
.single-product div.product .kn-freeship,
.kn-freeship{
  display: flex; align-items: center; gap: .55rem;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs); line-height: 1.5; color: var(--shop-muted);
}
.kn-freeship svg{ flex: 0 0 auto; width: 18px; height: 18px; color: var(--red); }
.kn-freeship strong{ font-weight: 700; color: var(--shop-text); }
/* A meta vem logo a seguir: uma so linha a separar as duas. */
.single-product div.product .kn-freeship + .product_meta{ margin-top: var(--sp-2); }

/* Aviso de recuperação de carrinho (inc/abandoned-cart.php). */
.kn-ac-notice{
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--shop-ok); background: var(--shop-surface);
  border-radius: 8px; font-size: var(--fs-sm); color: var(--shop-text);
}

/* ═══════════ Loja ainda fechada (bloco woocommerce/coming-soon) ═════════
   O bloco de origem vinha com espaçadores de 100px fixos, tipografia própria
   e sem altura mínima — o título ficava debaixo do cabeçalho fixo e o rodapé
   parava a meio da página. Aqui a secção ocupa o que sobra do ecrã, por isso
   o rodapé assenta no fundo sem precisar de nenhum truque global. */
.kn-soon{
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - var(--nav-h) - 120px);
  padding: var(--sp-5) clamp(1rem, 5vw, 2rem);
  text-align: center;
}
.kn-soon-inner{ max-width: 620px; }
.kn-soon-title{
  font-family: var(--font-head); font-weight: 800; color: var(--shop-text);
  font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: -.01em;
  margin: var(--sp-4) 0 var(--sp-3);
}
.kn-soon-text{ font-size: var(--fs-lg); line-height: 1.6; color: var(--shop-muted); margin: 0 0 var(--sp-3); }
.kn-soon-text--small{ font-size: var(--fs-base); }
.kn-soon-actions{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-4);
}
.kn-soon-actions .btn{ color: #fff !important; text-decoration: none; }
.kn-soon-wa{
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--shop-text); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
}
.kn-soon-wa svg{ width: 20px; height: 20px; }
.kn-soon-wa:hover{ color: var(--red); }

/* As luzes de mudança: acendem uma a uma e recomeçam, verde → âmbar → vermelho. */
.kn-soon-lights{ display: flex; justify-content: center; gap: 8px; }
.kn-soon-light{
  width: 22px; height: 10px; border-radius: 3px;
  background: var(--shop-border);
  animation: kn-soon-seq 2.4s infinite;
  animation-delay: calc(var(--i) * .12s);
}
.kn-soon-light:nth-child(-n+4){ --lit: #1b8a4b; }
.kn-soon-light:nth-child(n+5):nth-child(-n+6){ --lit: #e8a51c; }
.kn-soon-light:nth-child(n+7){ --lit: var(--red); }
@keyframes kn-soon-seq{
  0%, 100%{ background: var(--shop-border); box-shadow: none; }
  18%, 62%{ background: var(--lit, var(--red)); box-shadow: 0 0 12px -2px var(--lit, var(--red)); }
}
/* Quem pediu menos movimento fica com as luzes acesas, sem sequência. */
@media (prefers-reduced-motion: reduce){
  .kn-soon-light{ animation: none; background: var(--lit, var(--red)); }
}
@media (max-width: 480px){
  .kn-soon-light{ width: 16px; height: 8px; }
  .kn-soon{ min-height: calc(100vh - var(--nav-h) - 60px); }
}

/* ═══════════ Iniciar sessão / registo (minha-conta) ════════════════════ */
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register{
  max-width: 420px; margin: 0 auto;
  background: var(--shop-card); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shop-shadow);
}
.woocommerce-account .woocommerce form .form-row{
  display: flex; flex-direction: column; gap: .35rem; margin: 0 0 var(--sp-3); padding: 0;
}
.woocommerce-account .woocommerce form .form-row label{
  font-weight: 600; font-size: var(--fs-sm); color: var(--shop-text);
}
.woocommerce-account .woocommerce form .form-row input.input-text{
  width: 100%; height: 48px; padding: 0 1rem;
  border: 1px solid var(--shop-border); border-radius: 12px;
  background: #fff; color: var(--shop-text); font-size: var(--fs-base);
}
.woocommerce-account .woocommerce form .form-row input.input-text:focus{ outline: none; border-color: var(--red); }
/* "Manter sessão": caixa e texto na mesma linha, não um por cima do outro. */
.woocommerce-account .woocommerce form .form-row-wide.woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce form label.woocommerce-form-login__rememberme{
  flex-direction: row; align-items: center; gap: .5rem; font-weight: 400;
}
.woocommerce-account .woocommerce form .woocommerce-form-login__rememberme input{ width: auto; height: auto; }
.woocommerce-account .woocommerce form .woocommerce-form-login__submit{ width: 100%; margin: 0 0 var(--sp-2); }
.woocommerce-account .woocommerce .woocommerce-LostPassword{ margin: 0; font-size: var(--fs-sm); }
.woocommerce-account .woocommerce .woocommerce-LostPassword a{ color: var(--red); }
/* O título da página e o "Iniciar sessão" a acompanhar a caixa — mas SÓ na
   página de entrada. Sem o `:not(.logged-in)`, isto centrava todos os títulos
   de dentro da conta: "Morada de facturação" centrado por cima de uma morada
   alinhada à esquerda, que era metade do ar de desalinho que aquilo tinha. */
body.woocommerce-account:not(.logged-in) h2{ text-align: center; }

/* ── Documentos legais em sobreposicao ────────────────────────────────────
   A janela que abre a Politica de Privacidade (e os restantes documentos)
   sem tirar a pessoa da pagina onde estava — nomeadamente sem lhe levar o
   banner de cookies a meio da decisao. O conteudo vem da pagina real por
   fetch(); ver initLegalOverlay em js/main.js.

   O corpo leva a classe `page-main` de proposito: e assim que herda toda a
   tipografia ja afinada das paginas legais (`.page-main .entry-content h2`
   e companhia, mais acima neste ficheiro) em vez de a duplicar aqui e
   deixar as duas versoes a divergir. So se anula o que `.page-main` tem de
   pagina inteira — a margem da navbar fixa, o fundo e a altura minima. */
.kn-legal{
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
}
.kn-legal[hidden]{ display: none; }
/* Sem `backdrop-filter`. O banner de cookies ja desfoca a pagina toda com um;
   dois desfoques sobrepostos sobre o ecra inteiro custam uma repintura enorme
   e, numa maquina sem aceleracao grafica, a janela demorava segundos a
   aparecer com o conteudo ja carregado ha muito. Uma cor opaca faz o mesmo
   trabalho de separar os dois planos por zero. */
.kn-legal__backdrop{
  position: absolute; inset: 0;
  background: rgba(3, 20, 31, .8);
  animation: kn-legal-fade .16s ease-out;
}
.kn-legal__panel{
  position: relative;
  display: flex; flex-direction: column;
  width: min(880px, 100%); max-height: min(88vh, 100%);
  background: var(--shop-card, #fff);
  color: var(--shop-text, #14181f);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 24px 60px rgba(3, 20, 31, .45);
  overflow: hidden;
  animation: kn-legal-in .18s ease-out;
}
@keyframes kn-legal-fade{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes kn-legal-in{
  from{ opacity: 0; transform: translateY(10px); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .kn-legal__backdrop, .kn-legal__panel{ animation: none; }
}

/* Cabecalho fixo: o titulo continua a ler-se depois de 20 ecras de texto,
   e o botao de fechar nunca fica fora de alcance. */
.kn-legal__head{
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 1.75rem);
  background: var(--bg, #052133);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  flex-shrink: 0;
}
.kn-legal__title{
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.25;
  color: #fff;
}
.kn-legal__close{
  flex-shrink: 0;
  width: 38px; height: 38px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; line-height: 1;
  color: #fff; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%;
  cursor: pointer; transition: background .2s, border-color .2s;
}
.kn-legal__close:hover{ background: var(--red); border-color: var(--red); }
.kn-legal__close:focus-visible{ outline: 2px solid var(--red-light, #F0284A); outline-offset: 2px; }

.kn-legal__body.page-main{
  margin: 0; min-height: 0;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 2.5rem);
  background: var(--shop-card, #fff);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* chegar ao fim nao rola a pagina de tras */
}
/* O cartao branco e a propria janela: dentro nao leva outro. (A regra que
   o desenha nas paginas legais ja nao chega aqui — pede `.page-content`,
   que e do page.php — mas isto fica como rede.) */
.kn-legal__body .entry-content{
  background: none; border: 0; box-shadow: none; padding: 0;
}
.kn-legal__body .entry-content > :first-child{ margin-top: 0; }
.kn-legal__loading{ color: var(--shop-muted, #6b7280); font-size: var(--fs-sm); }

/* Enquanto a janela esta aberta a pagina de tras nao rola. */
body.kn-legal-open{ overflow: hidden; }

/* E o desfoque de 8px do banner de cookies desliga-se. Fica inteiramente
   tapado pelo fundo opaco da janela, portanto nao se ve diferenca nenhuma —
   mas um blur em ecra inteiro continua a ser calculado a cada repintura, e
   era ele que fazia a janela parecer lenta a abrir por cima do banner. */
body.kn-legal-open .cookie-overlay{
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 600px){
  .kn-legal{ padding: 0; }
  .kn-legal__panel{ width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
}

/* ═══════════ Grelha de produtos em blocos (carrinho vazio) ══════════════
   O bloco "Novo na loja" que a WooCommerce mostra no carrinho vazio usa a
   grelha dos blocos, que e outra da usada no resto da loja — e a folha de
   estilos dela nao chega ca. O resultado era uma lista com marcadores: quatro
   produtos empilhados a toda a largura, cada um com uma fotografia de 300px.
   Aqui passa a ter o mesmo cartao do resto da loja. */
/* `!important` aqui pela mesma razao que na grelha da loja: a folha dos blocos
   da WooCommerce (all-products.css) tem uma regra com a mesma especificidade
   para o mesmo seletor, e quem ganha passa a depender da ordem em que os
   ficheiros sao postos em fila — que muda com as versoes do plugin. */
.wc-block-grid__products{
  display: grid !important; gap: 1rem; margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
}
.wc-block-grid__product{
  /* `max-width: 25%` e `flex-basis: 25%` sao restos do layout de flex de quatro
     colunas da WooCommerce. Numa grelha, o flex-basis e ignorado mas o
     max-width NAO e: dentro de uma celula de 162px, 25% dava um cartao de
     40px — a fotografia espremida e o titulo a partir uma letra por linha. */
  max-width: none !important; width: auto !important; flex-basis: auto !important;
  display: flex !important; flex-direction: column; gap: .5rem;
  margin: 0; padding: 1rem; text-align: left; list-style: none;
  background: var(--shop-card); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg); box-shadow: var(--shop-shadow);
}
.wc-block-grid__product-link{ display: block; text-decoration: none; }
.wc-block-grid__product-image{ margin: 0 0 .6rem; }
.wc-block-grid__product-image img{
  display: block; width: 100%; height: auto; border-radius: 8px;
  background: var(--shop-surface);
}
.wc-block-grid__product-title{
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  line-height: 1.3; color: var(--shop-text);
}
.wc-block-grid__product-link:hover .wc-block-grid__product-title{ color: var(--red); }
.wc-block-grid__product-price{ font-weight: 700; color: var(--shop-text); font-size: var(--fs-sm); }
.wc-block-grid__product-add-to-cart{ margin-top: auto; }
/* O botao saia vermelho sobre vermelho — texto invisivel. A cor vinha de uma
   regra mais especifica, por isso esta e a unica cor com !important aqui: um
   botao que nao se le nao e um detalhe de estilo. */
.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link.add_to_cart_button{
  display: block; width: 100%; text-align: center; box-sizing: border-box;
  padding: .55rem .8rem; font-size: var(--fs-xs); font-weight: 700;
  background: var(--red) !important; color: #fff !important;
  border: 0; border-radius: 8px; text-decoration: none;
}

/* ═══════════ "A minha conta" → Morada ═══════════════════════════════════
   A WooCommerce poe as duas moradas em colunas com float, e o tema alinha os
   <h2> ao centro — por isso o titulo saia centrado por cima de uma morada
   alinhada a esquerda, e o <address> saia em italico, que e o estilo de origem
   do browser. Duas colunas em grelha, um cartao cada, tudo do mesmo lado. */
.woocommerce-account .woocommerce-Addresses{
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* A WooCommerce poe um clearfix em ::before/::after nestes contentores. Numa
   grelha, um pseudo-elemento com `content` e uma CELULA — e as duas primeiras
   celulas ficavam ocupadas por nada, empurrando as moradas para as linhas
   seguintes, uma a direita e outra por baixo a esquerda. Mesmo problema que a
   grelha de produtos ja tinha. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after{ content: none !important; display: none !important; }
.woocommerce-account .woocommerce-Addresses .u-column1,
.woocommerce-account .woocommerce-Addresses .u-column2{
  width: auto; float: none; margin: 0; padding: 1.25rem;
  background: var(--shop-card); border: 1px solid var(--shop-border);
  border-radius: var(--radius-lg);
}
.woocommerce-account .woocommerce-Address-title{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0 0 .75rem;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  margin: 0; text-align: left;
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--fs-lg); line-height: 1.2; color: var(--shop-text);
}
.woocommerce-account .woocommerce-Address-title .edit{
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
  color: var(--red); text-decoration: none;
}
.woocommerce-account .woocommerce-Address-title .edit:hover{ text-decoration: underline; }
.woocommerce-account .woocommerce-Address address{
  margin: 0; font-style: normal; line-height: 1.7; color: var(--shop-text);
}

/* ═══════════ O NIF sai da morada de envio ══════════════════════════════
   A WooCommerce so tem uma localizacao `address` para as duas moradas, e nao
   ha hook onde apanhar os campos adicionais — nem no checkout em blocos, nem
   no formulario de A minha conta (ver a nota em inc/nif.php). Fica aqui, com
   o nome do campo como ancora, que e o que a WooCommerce garante.
   O campo e opcional, por isso esconde-lo nao trava ninguem. */
.woocommerce-address-fields p:has(input[name="_wc_shipping/kilonova/nif"]),
.woocommerce-address-fields .form-row:has(input[name="_wc_shipping/kilonova/nif"]),
.wc-block-components-address-form:has(> [id*="shipping"]) [id*="kilonova-nif"],
#shipping-fields [id*="kilonova-nif"],
#shipping [id*="kilonova-nif"]{
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   A MINHA CONTA — passagem completa
   ═══════════════════════════════════════════════════════════════════════
   Esta area cresceu por pedacos: umas regras escritas para a pagina de
   entrada, outras para as moradas, e a WooCommerce por baixo com floats e
   clearfix de 2013. O resultado lia-se como feito a pressa — titulos
   centrados por cima de texto alinhado a esquerda, a navegacao a parecer uma
   pilha de botoes, e espacamentos que nao seguiam escala nenhuma.

   Aqui esta a area inteira, com a mesma escala do resto da loja.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Estrutura: navegacao + conteudo ──────────────────────────────────── */
/* Grelha em vez dos floats da WooCommerce. E o clearfix em ::before/::after
   tem de sair: numa grelha, um pseudo-elemento com `content` e uma celula. */
.woocommerce-account.logged-in .woocommerce{
  display: grid; align-items: start;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
}
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after{ content: none !important; display: none !important; }
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce-MyAccount-content{
  width: auto; float: none; margin: 0;
}
/* A navegacao acompanha a leitura de listas longas de encomendas. */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation{
  position: sticky; top: calc(var(--nav-h, 72px) + 1rem);
  padding: .5rem;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content{
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* ── Navegacao ────────────────────────────────────────────────────────── */
/* Eram caixas com borda, uma por cima da outra: um monte de botoes a competir
   entre si. Uma lista e uma lista — so o item activo se destaca. */
.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li{ border: 0; border-radius: 10px; margin: 0; }
.woocommerce-MyAccount-navigation li + li{ margin-top: 2px; }
.woocommerce-MyAccount-navigation li a{
  display: block; padding: .6rem .8rem; border-radius: 10px;
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3;
  color: var(--shop-text); text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce-MyAccount-navigation li a:hover{ background: var(--shop-surface); }
.woocommerce-MyAccount-navigation li.is-active{ background: var(--red); }
.woocommerce-MyAccount-navigation li.is-active a{ color: #fff; }
/* Terminar sessao nao e um destino como os outros: separa-se e fica discreto. */
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout{ margin-top: .6rem; }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout::before{
  content: ""; display: block; height: 1px; margin: 0 .5rem .6rem;
  background: var(--shop-border);
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a{
  color: var(--shop-muted); font-weight: 500;
}

/* ── Conteudo: titulos e texto ────────────────────────────────────────── */
.woocommerce-account.logged-in .woocommerce-MyAccount-content > h2:first-of-type,
.woocommerce-account.logged-in .woocommerce-MyAccount-content > h3:first-of-type{ margin-top: 0; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content p{
  max-width: 62ch; line-height: 1.7; color: var(--shop-text);
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content p + p{ margin-top: .85rem; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content a:not(.button){
  color: var(--red); text-decoration: none;
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content a:not(.button):hover{ text-decoration: underline; }

/* ── Tabela de encomendas ─────────────────────────────────────────────── */
.woocommerce-orders-table{ width: 100%; border-collapse: collapse; margin: 0; border: 0; }
.woocommerce-orders-table th,
.woocommerce-orders-table td{
  padding: .8rem .6rem; text-align: left; vertical-align: middle;
  border: 0; border-bottom: 1px solid var(--shop-border);
}
.woocommerce-orders-table thead th{
  font-family: var(--font-head); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--shop-muted);
  border-bottom: 2px solid var(--shop-text);
}
.woocommerce-orders-table tbody tr:last-child td{ border-bottom: 0; }
.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions{ text-align: right; white-space: nowrap; }
.woocommerce-orders-table .button{ padding: .45rem .9rem; font-size: var(--fs-xs); }

/* ── Formularios (detalhes da conta, moradas) ─────────────────────────── */
.woocommerce-account.logged-in .woocommerce-MyAccount-content form .form-row,
.woocommerce-account.logged-in .woocommerce-MyAccount-content form .woocommerce-form-row{
  display: block; margin: 0 0 1rem; padding: 0; float: none; width: auto;
}
/* Nome e Apelido lado a lado, que e como se leem. */
@media (min-width: 560px){
  .woocommerce-account.logged-in .woocommerce-MyAccount-content form .woocommerce-form-row--first,
  .woocommerce-account.logged-in .woocommerce-MyAccount-content form .form-row-first{
    /* 50% - .75rem e nao 50% - .5rem: entre dois inline-block ha o espaco em
       branco do HTML, e sem folga para ele os dois campos somavam mais de 100%
       e o segundo caia para a linha de baixo. */
    display: inline-block; width: calc(50% - .75rem); margin-right: 1rem; vertical-align: top;
  }
  .woocommerce-account.logged-in .woocommerce-MyAccount-content form .woocommerce-form-row--last,
  .woocommerce-account.logged-in .woocommerce-MyAccount-content form .form-row-last{
    display: inline-block; width: calc(50% - .75rem); vertical-align: top;
  }
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content form label{
  display: block; margin: 0 0 .35rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--shop-text);
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content form .required{ color: var(--red); text-decoration: none; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content form input.input-text,
.woocommerce-account.logged-in .woocommerce-MyAccount-content form select,
.woocommerce-account.logged-in .woocommerce-MyAccount-content form textarea{
  width: 100%; box-sizing: border-box; height: 44px; padding: 0 .8rem;
  font-family: inherit; font-size: var(--fs-sm); color: var(--shop-text);
  background: #fff; border: 1px solid var(--shop-border); border-radius: 10px;
  transition: border-color var(--dur) var(--ease);
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content form textarea{ height: auto; padding: .6rem .8rem; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-account.logged-in .woocommerce-MyAccount-content form select:focus{ outline: none; border-color: var(--red); }
.woocommerce-account.logged-in .woocommerce-MyAccount-content form span.description,
.woocommerce-account.logged-in .woocommerce-MyAccount-content form em{
  display: block; margin-top: .35rem;
  font-size: var(--fs-xs); font-style: normal; color: var(--shop-muted);
}
/* O bloco da palavra-passe e uma seccao, nao tres campos perdidos no meio. */
.woocommerce-account.logged-in .woocommerce-MyAccount-content form fieldset{
  margin: 1.5rem 0 1.25rem; padding: 1.25rem; border: 1px solid var(--shop-border);
  border-radius: var(--radius); background: var(--shop-surface);
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content form legend{
  padding: 0 .5rem; margin-left: -.5rem;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-base);
  color: var(--shop-text);
}
.woocommerce-account.logged-in .woocommerce-MyAccount-content form fieldset .woocommerce-form-row:last-child{ margin-bottom: 0; }
.woocommerce-account.logged-in .woocommerce-MyAccount-content form button.button{ margin-top: .25rem; }

/* ── Moradas ──────────────────────────────────────────────────────────── */
/* O titulo e a ligacao de editar em coluna quando o cartao e estreito: lado a
   lado, o titulo partia-se em tres linhas para caber ao lado do link. */
/* Titulo em cima, "Editar" por baixo — sempre. Lado a lado, num cartao de
   ~290px, o titulo partia-se em tres linhas para deixar passar o link, e o
   link ainda assim ficava cortado. Empilhados, cabem os dois inteiros. */
.woocommerce-account .woocommerce-Address-title{
  display: block; margin-bottom: .85rem;
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3{
  font-size: var(--fs-base); white-space: normal;
}
.woocommerce-account .woocommerce-Address-title .edit{
  /* `!important` porque a regra da WooCommerce (`.woocommerce-Address .title
     .edit`) e mais especifica e traz `float: right` + `display: block`: o link
     saltava para a direita, por baixo de um titulo alinhado a esquerda. */
  display: inline-block !important; float: none !important;
  margin-top: .3rem;
  font-size: var(--fs-xs); white-space: normal;
}

/* ── Empilhar no telemovel ────────────────────────────────────────────── */
@media (max-width: 780px){
  .woocommerce-account.logged-in .woocommerce{ grid-template-columns: minmax(0, 1fr); }
  .woocommerce-account.logged-in .woocommerce-MyAccount-navigation{ position: static; }
}

/* O PVP por cima do preco, so para quem tem desconto (inc/reseller.php).
   Pequeno e cinzento de proposito: responde a uma pergunta sem disputar
   atencao com o numero que se vai pagar, logo por baixo. */
.kn-pvp{
  margin: 0 0 .15rem;
  font-size: var(--fs-sm); line-height: 1.4; color: var(--shop-muted);
}
.kn-pvp s{ text-decoration: line-through; }

/* ── "Poupança total" nas somas do carrinho e do checkout ─────────────────
   A linha é injectada pelo js/cart-savings.js no slot `ExperimentalOrderMeta`
   da WooCommerce, já com as classes `wc-block-components-totals-item`, por
   isso herda a grelha e o espaçamento das linhas de cima. Aqui só se
   acrescenta o que a distingue: o traço a separar do subtotal e o valor a
   verde, para se ler como ganho e não como mais um custo. */
.kn-savings {
  border-top: 1px solid var(--shop-border, #e6e8ec);
  padding-top: .75rem;
  margin-top: .25rem;
}

.kn-savings__value {
  color: #15803d;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Ficha de revendedor: as três secções ────────────────────────────────
   A ficha passou de sete campos para dezasseis. O atrito é desejado — numa
   candidatura a revendedor filtra quem não é oficina — mas uma parede de
   campos faz desistir também quem devia candidatar-se. Daí as secções. */
.kn-rf-sec{
  border: 1px solid var(--shop-border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem 1.4rem;
  margin: 0 0 1.25rem;
  background: var(--shop-surface);
}

.kn-rf-sec > legend{
  padding: 0 .5rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}

/* O select herda a caixa dos inputs; sem isto saía com o desenho do browser,
   que é o defeito que já tínhamos corrigido no resto do site. */
.kn-reseller-form select{
  border: 1px solid var(--shop-border); border-radius: 8px;
  padding: .7rem .8rem; font-size: var(--fs-base); font-family: inherit;
  background: #fff; color: var(--shop-text); font-weight: 400;
}
.kn-reseller-form select:focus{ outline: none; border-color: var(--red); }

.kn-rf-wide{ margin: 0 0 1rem; }
.kn-rf-sec .kn-rf-grid + .kn-rf-wide,
.kn-rf-sec .kn-rf-wide + .kn-rf-grid{ margin-top: 1rem; }

.kn-rf-nota{
  margin: .6rem 0 0; font-size: var(--fs-xs); line-height: 1.5;
  color: var(--shop-muted);
}

.kn-rf-rgpd{ margin: 0 0 1rem; }
.kn-rf-rgpd label{
  display: grid; grid-template-columns: auto 1fr; gap: .6rem;
  align-items: start; font-weight: 400; font-size: var(--fs-xs);
  line-height: 1.55; color: var(--shop-muted);
}
.kn-rf-rgpd input{ margin-top: .2rem; }
.kn-rf-rgpd a{ color: var(--red); }

/* As caixas de escolha multipla. Em grelha, para sete opcoes nao fazerem uma
   coluna de sete linhas que empurra o resto da ficha para fora do ecra. */
.kn-rf-check{ border: 0; padding: 0; margin: 0 0 1rem; }
.kn-rf-check > legend{
  padding: 0; margin: 0 0 .6rem;
  font-weight: 600; font-size: var(--fs-sm); color: var(--shop-text);
}
.kn-rf-check > legend span{
  font-weight: 400; font-size: var(--fs-xs); color: var(--shop-muted);
}
.kn-rf-check > legend span::before{ content: "("; }
.kn-rf-check > legend span::after{ content: ")"; }

.kn-reseller-form .kn-rf-check label{
  display: grid; grid-template-columns: auto 1fr; gap: .5rem;
  align-items: center; font-weight: 400; font-size: var(--fs-sm);
  color: var(--shop-text); padding: .35rem 0;
}
.kn-rf-check{ display: block; }
.kn-rf-check > label{ break-inside: avoid; }

@media (min-width: 560px){
  .kn-rf-check{ columns: 2; column-gap: 1.5rem; }
  .kn-rf-check > legend{ column-span: all; }
}