/*
Theme Name: amorekids
Theme URI:  https://amorekids.com.br
Description: Tema filho do Storefront para a loja amorekids — paleta arco-íris, Fredoka + Nunito, componentes WooCommerce customizados.
Author:     amorekids
Author URI: https://amorekids.com.br
Template:   storefront
Version:    1.0.0
License:    GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amorekids
Tags:       e-commerce, kids, woocommerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   amorekids — child theme do Storefront
   Tokens da marca + overrides WooCommerce
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&display=swap');

:root{
  /* Brand palette — extraída da logo */
  --ak-red:     #D31E0B;
  --ak-orange:  #FF6A00;
  --ak-yellow:  #FFCF00;
  --ak-blue:    #1E40E0;
  --ak-green:   #0F8F48;
  --ak-pink:    #F976A7;
  --ak-purple:  #8F00FF;

  --ak-red-50:  #FFEDEA;
  --ak-red-100: #FFD0C9;
  --ak-red-600: #D31E0B;
  --ak-red-700: #A91708;

  --ak-blue-50:  #EAEEFF;
  --ak-blue-100: #C7D1FF;
  --ak-blue-600: #1E40E0;
  --ak-blue-700: #1632B4;

  --ak-green-50: #E6F5EC;
  --ak-green-100:#BCE3CB;
  --ak-green-600:#0F8F48;
  --ak-green-700:#0B6E37;

  --ak-pink-50:  #FFEEF5;
  --ak-pink-100: #FFD2E3;

  --ak-yellow-50:  #FFF8DA;
  --ak-yellow-100: #FFEC9C;

  /* Neutros — quentinhos */
  --ak-bg:        #FFFBF4;
  --ak-surface:   #FFFFFF;
  --ak-surface-2: #FFF4E0;
  --ak-ink:       #1B1530;
  --ak-ink-2:     #4A4360;
  --ak-muted:     #8A8299;
  --ak-line:      #EFE6D5;
  --ak-line-2:    #E4D9C2;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px;  --s-10: 40px;
  --s-12: 48px;--s-16: 64px;

  /* Shadows */
  --sh-1: 0 2px 0 rgba(27,21,48,.08);
  --sh-2: 0 4px 0 rgba(27,21,48,.10), 0 8px 18px rgba(27,21,48,.06);
  --sh-3: 0 6px 0 rgba(27,21,48,.10), 0 14px 30px rgba(27,21,48,.10);
  --sh-press: 0 1px 0 rgba(27,21,48,.10);

  /* Tipografia */
  --f-display: "Fredoka", system-ui, -apple-system, sans-serif;
  --f-text: "Nunito", system-ui, -apple-system, sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */
body,
button,
input,
select,
textarea {
  font-family: var(--f-text);
  color: var(--ak-ink);
}
body {
  background: var(--ak-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6,
.site-branding h1,
.entry-title,
.widget h1, .widget h2, .widget h3 {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ak-ink);
}
h1 { font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.025em; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

a { color: var(--ak-blue); text-decoration: none; }
a:hover { color: var(--ak-blue-700); text-decoration: underline; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--ak-line);
  padding: var(--s-4) 0;
}
.site-branding .site-title { font-family: var(--f-display); font-weight: 700; }
.main-navigation ul li a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ak-ink);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  transition: background .15s ease;
}
.main-navigation ul li a:hover { background: var(--ak-bg); text-decoration: none; }
.main-navigation ul li.current-menu-item > a { background: var(--ak-yellow-100); }

/* Top bar perks (adicionar via hook — ver functions.php) */
.amorekids-perks {
  background: var(--ak-yellow);
  color: var(--ak-ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: .04em;
}
.amorekids-perks .sep { opacity: .5; margin: 0 14px; }

/* Carrinho contador */
.site-header-cart .cart-contents {
  background: var(--ak-bg);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.site-header-cart .count {
  background: var(--ak-red);
  color: #fff;
  font-family: var(--f-display);
  font-weight: 700;
  border-radius: var(--r-pill);
  border: 2px solid #fff;
}

/* =========================================================
   BUTTONS — Storefront usa .button por padrão
   ========================================================= */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
a.button,
.added_to_cart,
.widget a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #content input.button {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  background: var(--ak-red);
  color: #fff !important;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: none;
  box-shadow: var(--sh-2);
  transition: transform .08s ease, background .15s ease;
  text-shadow: none;
}
.button:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--ak-red-700);
  color: #fff !important;
}
.button:active,
.woocommerce a.button:active {
  transform: translateY(2px);
  box-shadow: var(--sh-press);
}

/* CTA principal — Comprar / Finalizar / Adicionar ao carrinho */
.woocommerce .single_add_to_cart_button.alt,
.woocommerce-page .single_add_to_cart_button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.checkout-button {
  background: var(--ak-red) !important;
  color: #fff !important;
}
.woocommerce .single_add_to_cart_button.alt:hover,
.checkout-button:hover {
  background: var(--ak-red-700) !important;
}

/* Botão secundário (View Cart, etc) */
.woocommerce a.button.wc-forward,
.added_to_cart {
  background: var(--ak-blue) !important;
}
.woocommerce a.button.wc-forward:hover,
.added_to_cart:hover {
  background: var(--ak-blue-700) !important;
}

/* =========================================================
   FORMS / INPUTS
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text {
  font-family: var(--f-text);
  font-size: 15px;
  background: #fff;
  border: 2px solid var(--ak-line-2);
  border-radius: var(--r-md);
  padding: 12px 16px;
  color: var(--ak-ink);
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ak-blue);
  box-shadow: 0 0 0 4px var(--ak-blue-50);
  outline: none;
}
::placeholder { color: var(--ak-muted); }
label { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--ak-ink-2); }

/* =========================================================
   PRODUCT CARDS — WooCommerce grid reset + full override
   ========================================================= */

/* Force CSS grid — WooCommerce default uses floats */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.ak-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
ul.ak-grid::before,
ul.ak-grid::after {
  display: none !important;
}

/* Card — complete reset + stamp-shadow design */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.ak-grid li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
  background: var(--ak-surface) !important;
  border: 1.5px solid var(--ak-line) !important;
  border-radius: var(--r-lg) !important;
  /* Stamp shadow: solid bottom offset + soft ambient */
  box-shadow: 0 5px 0 rgba(27,21,48,.09), 0 10px 28px rgba(27,21,48,.06) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: transform .22s cubic-bezier(.34,1.3,.64,1),
              box-shadow .22s ease,
              border-color .22s ease !important;
  text-align: left !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 12px 0 rgba(27,21,48,.10), 0 24px 48px rgba(27,21,48,.11) !important;
  border-color: var(--ak-line-2) !important;
}

/* WC default link wrapper — make it a flex column */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-decoration: none !important;
}

/* Image — overflow hidden on parent, img scales on hover */
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product > a > img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transition: transform .38s cubic-bezier(.25,.46,.45,.94) !important;
}
.woocommerce ul.products li.product:hover img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product:hover .woocommerce-loop-product__link img {
  transform: scale(1.06) !important;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .product__title {
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: var(--ak-ink) !important;
  padding: 14px 16px 4px !important;
  margin: 0 !important;
  transition: color .15s !important;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title {
  color: var(--ak-red) !important;
}

/* Price block */
.woocommerce ul.products li.product .price {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--ak-ink) !important;
  padding: 2px 16px 8px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.woocommerce ul.products li.product .price del {
  font-size: 13px !important;
  color: var(--ak-muted) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
.woocommerce ul.products li.product .price ins {
  background: none !important;
  text-decoration: none !important;
}
.woocommerce ul.products li.product .price ins .amount,
.woocommerce ul.products li.product .price > .amount {
  font-size: 20px !important;
  color: var(--ak-ink) !important;
}

/* Add to cart button — blue pill with press shadow */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product .added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 4px 16px 16px !important;
  padding: 11px 16px !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  width: calc(100% - 32px) !important;
  box-sizing: border-box !important;
  border-radius: var(--r-pill) !important;
  background: var(--ak-blue) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 var(--ak-blue-700) !important;
  transition: transform .1s ease, box-shadow .1s ease, background .15s !important;
  text-decoration: none !important;
  border: none !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product a.button:hover {
  background: var(--ak-blue-700) !important;
  color: #fff !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--ak-blue-700) !important;
  text-decoration: none !important;
}

/* Onsale badge */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  position: absolute !important;
  background: var(--ak-red) !important;
  color: #fff !important;
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
  border-radius: var(--r-pill) !important;
  border: none !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.15) !important;
  z-index: 3 !important;
}

/* Star rating */
.woocommerce .star-rating { color: var(--ak-orange); font-size: 14px; }
.woocommerce p.stars a:hover ~ a { color: var(--ak-line-2); }

/* Grid responsive */
@media (max-width: 960px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
}

/* =========================================================
   SINGLE PRODUCT (PDP)
   ========================================================= */
.woocommerce div.product .product_title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--ak-ink);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--ak-bg);
  border-radius: var(--r-pill);
  border: none;
  padding: 0;
  margin-right: 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ak-ink-2);
  padding: 10px 18px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--ak-yellow);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ak-ink); }

/* Variation swatches (cores/tamanhos) — funciona com o Variation Swatches plugin */
.variable-items-wrapper .variable-item {
  border-radius: var(--r-pill) !important;
  box-shadow: 0 0 0 1px var(--ak-line-2) !important;
  margin-right: 6px !important;
}
.variable-items-wrapper .variable-item.selected {
  box-shadow: 0 0 0 3px var(--ak-ink) !important;
}
.variable-items-wrapper.button-variable-items-wrapper .variable-item {
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  border: 2px solid var(--ak-line-2) !important;
  background: #fff !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  min-height: 44px !important;
  padding: 0 16px !important;
}
.variable-items-wrapper.button-variable-items-wrapper .variable-item.selected {
  background: var(--ak-blue) !important;
  color: #fff !important;
  border-color: var(--ak-blue) !important;
}

/* Quantity selector */
.woocommerce .quantity .qty {
  width: 80px;
  text-align: center;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
}

/* =========================================================
   BREADCRUMBS (woocommerce_breadcrumb)
   ========================================================= */
.woocommerce-breadcrumb {
  font-family: var(--f-text);
  font-size: 14px;
  color: var(--ak-ink-2);
  padding: 12px 0;
  margin-bottom: 24px;
}
.woocommerce-breadcrumb a { color: var(--ak-ink-2); }
.woocommerce-breadcrumb a:hover { color: var(--ak-red); text-decoration: none; }

/* =========================================================
   PAGINAÇÃO
   ========================================================= */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul.page-numbers {
  border: none;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-pagination ul.page-numbers li {
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill) !important;
  background: #fff !important;
  border: 1px solid var(--ak-line) !important;
  color: var(--ak-ink) !important;
  margin: 0 !important;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.page-numbers:hover {
  border-color: var(--ak-red) !important;
  color: var(--ak-red) !important;
  background: #fff !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers.current {
  background: var(--ak-red) !important;
  color: #fff !important;
  border-color: var(--ak-red) !important;
  box-shadow: var(--sh-1);
}

/* =========================================================
   FILTROS (widgets de loja)
   ========================================================= */
.widget_price_filter .ui-slider-horizontal,
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: var(--ak-line) !important;
  border: none !important;
  border-radius: var(--r-pill) !important;
  height: 6px !important;
}
.widget_price_filter .ui-slider .ui-slider-range {
  background: var(--ak-red) !important;
  border-radius: var(--r-pill);
}
.widget_price_filter .ui-slider .ui-slider-handle {
  background: #fff !important;
  border: 3px solid var(--ak-red) !important;
  border-radius: 50%;
  box-shadow: var(--sh-1);
  width: 20px !important;
  height: 20px !important;
  top: -8px !important;
}
.widget_price_filter .price_slider_amount .button {
  font-size: 13px;
  padding: 8px 16px;
}

.widget {
  background: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-1);
  margin-bottom: 20px;
}
.widget h2,
.widget .widget-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ak-ink-2);
  border-bottom: 1px solid var(--ak-line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { padding: 6px 0; }
.widget ul li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ak-ink);
  font-size: 14px;
}
.widget ul li .count {
  margin-left: auto;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ak-muted);
  background: var(--ak-bg);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}

/* Widget de cores (com Variation Swatches plugin) */
.wcvs-widget-color li a {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ak-line-2);
}

/* =========================================================
   SORT / Result count
   ========================================================= */
.woocommerce .woocommerce-result-count {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ak-ink);
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--r-md);
  margin: 0;
}
.woocommerce .woocommerce-ordering select {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--r-pill);
  padding: 8px 14px;
  border: 1px solid var(--ak-line-2);
  background: #fff;
}

/* =========================================================
   REVIEWS
   ========================================================= */
.woocommerce #reviews #comments h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 28px;
}
.woocommerce #reviews #comments ol.commentlist li .comment-text {
  background: #fff;
  border: 1px solid var(--ak-line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-1);
}
.woocommerce #reviews #comments ol.commentlist li img.avatar {
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  background: var(--ak-pink);
}
.woocommerce #reviews #comments ol.commentlist li .meta strong {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ak-ink);
}
.woocommerce #reviews #comment-wrapper #respond {
  background: var(--ak-surface-2);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-top: 24px;
}

/* =========================================================
   CARRINHO E CHECKOUT
   ========================================================= */
.woocommerce table.shop_table {
  border-radius: var(--r-lg);
  border: 1px solid var(--ak-line);
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
}
.woocommerce table.shop_table th {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ak-ink-2);
  background: var(--ak-bg);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--ak-line); }
.woocommerce-cart-form__contents .product-thumbnail img {
  border-radius: var(--r-md);
  background: var(--ak-pink-100);
}

.woocommerce-checkout #payment {
  background: var(--ak-bg);
  border: 1px solid var(--ak-line);
  border-radius: var(--r-lg);
}
.woocommerce-checkout #payment ul.payment_methods li {
  padding: 16px;
  border-bottom: 1px solid var(--ak-line);
}
.woocommerce-checkout #payment ul.payment_methods li:last-child { border-bottom: none; }
.woocommerce-checkout #payment div.payment_box {
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--ak-line);
}

/* Mensagens (info, success, error) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: var(--f-text);
  border-radius: var(--r-md);
  padding: 14px 18px 14px 48px;
  border-top: none;
  box-shadow: var(--sh-1);
  background: #fff;
}
.woocommerce-message::before { color: var(--ak-green); }
.woocommerce-info::before { color: var(--ak-blue); }
.woocommerce-error { color: var(--ak-red-700); }
.woocommerce-error::before { color: var(--ak-red); }

/* =========================================================
   CHIPS de filtros ativos
   ========================================================= */
.woocommerce-widget-layered-nav-list__item--chosen,
.amorekids-active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ak-red);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
}

/* =========================================================
   FOOTER — base (widget fallback)
   ========================================================= */
.site-footer {
  background: var(--ak-ink);
  color: rgba(255,255,255,.72);
  font-family: var(--f-text);
  padding: 0;
  margin-top: 80px;
}
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer .widget-title {
  color: var(--ak-yellow);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  padding: 0;
  margin: 0 0 14px;
}
.site-footer a { color: rgba(255,255,255,.65); text-decoration: none; }
.site-footer a:hover { color: #fff; }

/* =========================================================
   HEADER — custom layout
   ========================================================= */

/* Base: sticky white bar, subtle warm shadow */
#masthead.ds-header-custom {
  background: #fff;
  padding: 0;
  border-bottom: none;
  box-shadow: 0 1px 0 var(--ak-line), 0 2px 16px rgba(27,21,48,.04);
}

/* 3-col grid: logo | search | actions */
.shop-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 13px 0;
  background: #fff;
}

/* Logo — image + text fallback */
.shop-header > a[rel="home"],
.shop-header > a:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  flex-shrink: 0;
}
.shop-header > a[rel="home"] img {
  height: 44px;
  width: auto;
  display: block;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1);
}
.shop-header > a[rel="home"]:hover img {
  transform: scale(1.1) rotate(-4deg);
}
.shop-header > a[rel="home"] h1,
.shop-header > a:first-child h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 26px;
  color: var(--ak-ink);
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1;
  transition: color .2s;
}
.shop-header > a[rel="home"]:hover h1 { color: var(--ak-red); }

/* Search wrapper */
.header-search {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

/* Action icon buttons */
.shop-header .actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--ak-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ak-ink);
  position: relative;
  text-decoration: none !important;
  transition: background .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1), color .2s;
  flex-shrink: 0;
}
.icon-btn:hover {
  background: var(--ak-yellow-100);
  color: var(--ak-ink);
  transform: scale(1.12);
  text-decoration: none !important;
}
.icon-btn:active { transform: scale(.92); }

/* Cart count badge with entrance animation */
.icon-btn .count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  background: var(--ak-red);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  line-height: 1;
  animation: badge-pop .35s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes badge-pop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.shop-nav-wrapper { border-bottom: 1px solid var(--ak-line); }
.shop-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  background: #fff;
  border-bottom: 1px solid var(--ak-line);
  list-style: none;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shop-nav::-webkit-scrollbar { display: none; }
.shop-nav li { margin: 0; flex-shrink: 0; }

.shop-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  text-decoration: none !important;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ak-ink-2);
  transition: background .18s ease, color .18s ease;
  white-space: nowrap;
}
.shop-nav a:hover { background: var(--ak-bg); color: var(--ak-ink); }

/* Active item */
.shop-nav .current-menu-item > a,
.shop-nav li.current-menu-item > a {
  background: var(--ak-yellow-100);
  color: var(--ak-ink);
}

/* Color-coded hover — cycling brand palette per menu position */
.shop-nav .menu-item:nth-child(1) > a:hover { background: var(--ak-pink-100);   color: var(--ak-ink); }
.shop-nav .menu-item:nth-child(2) > a:hover { background: var(--ak-blue-100);   color: var(--ak-ink); }
.shop-nav .menu-item:nth-child(3) > a:hover { background: var(--ak-green-100);  color: var(--ak-ink); }
.shop-nav .menu-item:nth-child(4) > a:hover { background: var(--ak-yellow-100); color: var(--ak-ink); }
.shop-nav .menu-item:nth-child(5) > a:hover { background: var(--ak-red-100);    color: var(--ak-ink); }
.shop-nav .menu-item:nth-child(6) > a:hover { background: var(--ak-blue-50);    color: var(--ak-ink); }

/* Ofertas link — always red, push to right */
.shop-nav a.nav-offers {
  color: var(--ak-red) !important;
  font-weight: 700 !important;
  margin-left: auto;
  flex-shrink: 0;
}
.shop-nav a.nav-offers:hover {
  background: var(--ak-red-50) !important;
  color: var(--ak-red-700) !important;
}

/* =========================================================
   FOOTER — custom layout
   ========================================================= */

/* Rainbow strip */
.foot-strip {
  display: flex;
  height: 5px;
  width: 100%;
}
.foot-strip span { flex: 1; display: block; }

/* Main grid */
.foot-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  padding: 52px 0 40px;
}

/* Brand column */
.foot-brand { display: flex; flex-direction: column; }
.foot-brand-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 30px;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1;
  margin: 0 0 12px;
  text-decoration: none !important;
  display: block;
}
.foot-brand-name:hover { color: var(--ak-yellow) !important; text-decoration: none !important; }
.foot-brand-desc {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.55);
  margin: 0 0 24px;
  max-width: 28ch;
}
.foot-newsletter-label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ak-yellow);
  margin: 0 0 10px;
}

/* Newsletter pill */
.foot-sub {
  display: flex;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  margin-bottom: 20px;
}
.foot-sub input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  padding: 11px 16px !important;
  font-family: var(--f-text) !important;
  font-size: 13px !important;
  color: #fff !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
}
.foot-sub input::placeholder { color: rgba(255,255,255,.3) !important; }
.foot-sub button {
  border: none !important;
  background: var(--ak-yellow) !important;
  color: var(--ak-ink) !important;
  padding: 11px 18px !important;
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer;
  border-radius: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background .15s !important;
  flex-shrink: 0;
}
.foot-sub button:hover {
  background: #FFE033 !important;
  transform: none !important;
}

/* Social buttons — own class avoids .site-footer a conflicts */
.foot-socials {
  display: flex;
  gap: 8px;
}
.foot-social-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6) !important;
  padding: 0 !important;
  text-decoration: none !important;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
  flex-shrink: 0;
}
.foot-social-btn:hover {
  background: var(--ak-yellow) !important;
  border-color: var(--ak-yellow) !important;
  color: var(--ak-ink) !important;
  transform: translateY(-3px);
  text-decoration: none !important;
}
.foot-social-btn svg { display: block; }

/* Link columns — scoped to .foot-col to avoid social btn conflicts */
.foot-col h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ak-yellow);
  margin: 0 0 14px;
  padding: 0;
  border: none;
}

/* Reset WP nav_menu markup */
.foot-col ul,
.foot-col-nav { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin: 0; }

.foot-col a {
  display: block;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  padding: 6px 0;
  transition: color .15s, padding-left .15s;
}
.foot-col a:hover {
  color: #fff;
  padding-left: 6px;
  text-decoration: none;
}

/* Bottom bar */
.foot-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.foot-copyright {
  font-size: 13px;
  color: rgba(255,255,255,.35);
}
.foot-payment {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.foot-payment span {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  padding: 4px 9px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 10px;
  color: rgba(255,255,255,.45);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================================================
   RESPONSIVO — ajustes mobile
   ========================================================= */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  .woocommerce div.product .product_title { font-size: 24px; }
  .woocommerce ul.products li.product { box-shadow: var(--sh-1); }
  
  .shop-header { grid-template-columns: 1fr auto; gap: 16px; padding: 16px; }
  .shop-header .search { grid-column: 1 / -1; order: 3; }
  .shop-nav { overflow-x: auto; padding: 10px 16px; }
}

/* =========================================================
   PDP Refinements
   ========================================================= */
.woocommerce div.product div.images img {
  border-radius: var(--r-xl);
  border: 1px solid var(--ak-line);
  box-shadow: var(--sh-1);
}
.woocommerce div.product div.images .flex-control-thumbs li img {
  border-radius: var(--r-md);
  border: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
  border-color: var(--ak-blue);
}
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 24px;
}
.woocommerce div.product form.cart .button {
  flex: 1;
  min-width: 200px;
}

/* =========================================================
   Cart and Checkout UX Adjustments
   ========================================================= */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout .woocommerce-checkout-review-order {
  background: var(--ak-surface);
  border: 1px solid var(--ak-line);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--sh-2);
}
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-checkout h3 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 24px;
  color: var(--ak-ink);
  margin-bottom: 16px;
}
.woocommerce form .form-row label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ak-ink-2);
}
.woocommerce form .form-row .select2-container .select2-selection {
  border: 2px solid var(--ak-line-2);
  border-radius: var(--r-md);
  height: 48px;
  display: flex;
  align-items: center;
}

/* Responsiveness adjustments for cart/checkout */
@media (max-width: 768px) {
  .woocommerce table.shop_table_responsive tr {
    border-radius: var(--r-md);
    border: 1px solid var(--ak-line);
    margin-bottom: 16px;
    display: block;
  }
  .woocommerce table.shop_table_responsive td {
    border-top: none;
    border-bottom: 1px dashed var(--ak-line-2);
  }
}

/* =========================================================
   GLOBAL POLISH
   ========================================================= */
html { scroll-behavior: smooth; }
::selection { background: var(--ak-yellow); color: var(--ak-ink); }
:focus-visible { outline: 3px solid var(--ak-blue); outline-offset: 3px; border-radius: var(--r-xs); }

/* Sticky + z-index (box-shadow overridden by #masthead.ds-header-custom with higher specificity) */
#masthead {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* =========================================================
   ICONS (SVG stroke-based)
   ========================================================= */
.i {
  width: 20px; height: 20px;
  stroke-width: 2; stroke: currentColor; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; display: block;
}

/* =========================================================
   SHOP-TOP (perks bar via functions.php)
   ========================================================= */
.shop-top {
  background: var(--ak-yellow);
  color: var(--ak-ink);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 9px 16px;
}
.shop-top .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ak-ink);
  opacity: .4;
  display: inline-block;
  flex-shrink: 0;
}

/* =========================================================
   SEARCH BAR (pill — applied to form.woocommerce-product-search)
   ========================================================= */
.header-search { max-width: 520px; width: 100%; margin: 0 auto; }
form.search,
.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--ak-line-2);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 18px;
  transition: border-color .15s, box-shadow .15s;
  margin: 0;
  width: 100%;
}
form.search:focus-within,
.search-form:focus-within {
  border-color: var(--ak-blue);
  box-shadow: 0 0 0 4px var(--ak-blue-50);
  outline: none;
}
form.search input[type="search"],
.search-form input[type="search"] {
  flex: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-family: var(--f-text);
  font-size: 15px;
  padding: 8px 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
form.search button[type="submit"],
.search-form button[type="submit"] {
  border: none !important;
  background: var(--ak-red-600) !important;
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  box-shadow: none !important;
  transition: background .15s !important;
  white-space: nowrap;
}
form.search button[type="submit"]:hover,
.search-form button[type="submit"]:hover {
  background: var(--ak-red-700) !important;
  transform: none !important;
}

/* =========================================================
   DESIGN SYSTEM BUTTONS (.btn)
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: none;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
  white-space: nowrap;
  text-decoration: none !important;
}
.btn:active { transform: translateY(2px) !important; box-shadow: var(--sh-press) !important; }
.btn--primary { background: var(--ak-red-600); color: #fff !important; box-shadow: var(--sh-2); }
.btn--primary:hover { background: var(--ak-red-700); color: #fff !important; text-decoration: none; }
.btn--secondary { background: var(--ak-blue-600); color: #fff !important; box-shadow: var(--sh-2); }
.btn--secondary:hover { background: var(--ak-blue-700); color: #fff !important; }
.btn--success { background: var(--ak-green-600); color: #fff !important; box-shadow: var(--sh-2); }
.btn--success:hover { background: var(--ak-green-700); color: #fff !important; }
.btn--ghost { background: transparent; color: var(--ak-ink) !important; border: 2px solid var(--ak-ink); }
.btn--ghost:hover { background: var(--ak-ink); color: #fff !important; }
.btn--soft { background: var(--ak-yellow); color: var(--ak-ink) !important; box-shadow: var(--sh-2); }
.btn--soft:hover { background: #FFC400; color: var(--ak-ink) !important; }
.btn--lg { font-size: 18px; padding: 18px 28px; }
.btn--sm { font-size: 14px !important; padding: 10px 16px !important; }

/* =========================================================
   BADGES
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.badge--new    { background: var(--ak-green);     color: #fff; }
.badge--sale   { background: var(--ak-red);        color: #fff; }
.badge--hot    { background: var(--ak-orange);     color: #fff; }
.badge--cute   { background: var(--ak-pink-100);   color: #9C2A5E; }
.badge--soft   { background: var(--ak-yellow-100); color: #7A5A00; }
.badge--purple { background: var(--ak-purple);     color: #fff; }

/* =========================================================
   PRODUCT CARD — Design System classes (content-product.php)
   ========================================================= */
.product__media {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product__media a {
  display: block;
  width: 100%;
  height: 100%;
}
.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
  margin: 0 !important;
  border-radius: 0 !important;
}
li.product:hover .product__media img { transform: scale(1.05); }

.product__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

/* .product__fav removed */

.product__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.product__cat {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ak-blue-600);
}
.product__title {
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  color: var(--ak-ink) !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color .15s;
}
.product__title:hover { color: var(--ak-red) !important; }

.product__rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ak-ink-2);
}
.product__price {
  display: flex !important;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  padding: 0 !important;
}
.product__price .price { display: flex !important; align-items: baseline; gap: 8px; }
.product__price ins,
.product__price ins .amount,
.product__price ins bdi {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  color: var(--ak-ink) !important;
  text-decoration: none !important;
  background: none !important;
}
.product__price del,
.product__price del .amount,
.product__price del bdi {
  font-size: 13px !important;
  color: var(--ak-muted) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
.product__price .price:not(:has(del)):not(:has(ins)) bdi,
.product__price .price:not(:has(del)) {
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: 21px !important;
  color: var(--ak-ink) !important;
}

.product__cta { margin-top: 6px; }
.product__cta .btn {
  width: 100%;
  justify-content: center;
  padding: 11px 14px !important;
  font-size: 14px !important;
}

/* Cart button — blue, compact, with icon */
.btn--cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  padding: 11px 16px !important;
  border-radius: var(--r-pill) !important;
  border: none !important;
  cursor: pointer;
  background: var(--ak-blue) !important;
  color: #fff !important;
  box-shadow: 0 3px 0 var(--ak-blue-700) !important;
  transition: transform .1s ease, box-shadow .1s ease, background .15s ease !important;
  text-decoration: none !important;
  width: 100%;
}
.btn--cart:hover {
  background: var(--ak-blue-700) !important;
  color: #fff !important;
  transform: translateY(2px) !important;
  box-shadow: 0 1px 0 var(--ak-blue-700) !important;
  text-decoration: none !important;
}
.btn--cart:active { transform: translateY(3px) !important; box-shadow: none !important; }
.btn--cart svg { flex-shrink: 0; display: block; }

.color-dots { display: flex; gap: 6px; margin-top: 4px; }
.color-dots span {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--ak-line-2);
}

.ph-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 12px, rgba(0,0,0,0) 12px 24px);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--ak-ink-2);
}

/* =========================================================
   CATEGORY PILLS
   ========================================================= */
.cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  padding: 32px 0;
}
.cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--ak-line);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  text-decoration: none !important;
  color: var(--ak-ink) !important;
  box-shadow: var(--sh-1);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.cat .blob {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 22px;
}
.cat span { font-family: var(--f-display); font-weight: 600; font-size: 14px; }

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: center;
  background:
    radial-gradient(circle at 92% 15%, var(--ak-pink-100) 0 110px, transparent 111px),
    radial-gradient(circle at 6% 88%, var(--ak-blue-100) 0 80px, transparent 81px),
    var(--ak-bg);
  border-radius: var(--r-xl);
  padding: 56px 48px;
  margin-bottom: 48px;
  border: 1px solid var(--ak-line);
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .98;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: var(--ak-ink);
}
.hero h1 em   { font-style: normal; color: var(--ak-red); }
.hero h1 em.b { font-style: normal; color: var(--ak-blue); }
.hero h1 em.g { font-style: normal; color: var(--ak-green); }
.hero p { font-size: 18px; color: var(--ak-ink-2); max-width: 48ch; margin: 0 0 28px; line-height: 1.55; }
.hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .visual {
  aspect-ratio: 5/4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ak-yellow);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-3);
}
.hero .visual img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   SECTION TITLE (used above product grid, etc.)
   ========================================================= */
.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ak-line);
}
.section-title h2 { font-size: 26px; margin: 0; }
.section-title a {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ak-red);
}
.section-title a:hover { text-decoration: underline; }

/* =========================================================
   IMPROVED RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .cats { grid-template-columns: repeat(4, 1fr); }
  .hero { grid-template-columns: 1fr; padding: 40px 32px; }
  .hero .visual { display: none; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .cats { grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 24px 0; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .hero { padding: 32px 20px; margin-bottom: 32px; }
  .hero h1 { font-size: 38px; }
  .hero p { font-size: 16px; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 24px; padding: 36px 0 24px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-brand-desc { max-width: 100%; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
  .cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .shop-top { gap: 12px; font-size: 12px; }
  .shop-top span:not(.dot):not(:first-child) { display: none; }
  .hero { border-radius: var(--r-lg); padding: 28px 18px; }
  .foot-inner { grid-template-columns: 1fr; }
  .foot-brand { grid-column: 1; }
  .foot-col { border-top: 1px solid rgba(255,255,255,.07); padding-top: 20px; }
}

/* =========================================================
   HOMEPAGE — front-page.php
   ========================================================= */
#ak-home { padding-bottom: 64px; }

/* Section wrapper — consistent vertical rhythm */
.ak-section { margin-bottom: 56px; }

/* Eyebrow label (hero) */
.ak-eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ak-ink-2);
  background: var(--ak-yellow-100);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 20px;
}

/* Hero copy sub-area */
.hero-copy { display: flex; flex-direction: column; }
.hero p { margin-bottom: 28px; }

/* Hero image fills visual box */
.hero .visual img,
.hero .visual .hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
}

/* ── Promotional banner ── */
.ak-banner {
  background: var(--ak-ink);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
/* Decorative blobs */
.ak-banner::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--ak-yellow);
  opacity: .08;
}
.ak-banner::after {
  content: '';
  position: absolute;
  bottom: -50px; left: 80px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: var(--ak-blue);
  opacity: .08;
}
.ak-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  z-index: 1;
}
.ak-banner-copy h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 32px;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.1;
}
.ak-banner-copy h2 em {
  font-style: normal;
  color: var(--ak-yellow);
}
.ak-banner-copy p {
  color: rgba(255,255,255,.65);
  font-size: 16px;
  margin: 0;
}

/* ── Trust bar ── */
.ak-trust {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 32px 0;
  border-top: 1px solid var(--ak-line);
  border-bottom: 1px solid var(--ak-line);
  margin-bottom: 0;
}
.ak-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ak-trust-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ak-trust-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ak-trust-item strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ak-ink);
  line-height: 1.2;
}
.ak-trust-item span {
  font-size: 13px;
  color: var(--ak-ink-2);
}

/* Fallback: garante grid 4 col dentro do homepage sem depender de body.woocommerce */
#ak-home ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#ak-home ul.products li.product {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  clear: none !important;
}

/* Homepage responsive */
@media (max-width: 1024px) {
  .ak-banner { padding: 32px 36px; }
  .ak-banner-copy h2 { font-size: 26px; }
  .ak-trust { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  #ak-home ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .ak-section { margin-bottom: 40px; }
  .ak-banner { padding: 28px 24px; border-radius: var(--r-lg); margin-bottom: 40px; }
  .ak-banner-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .ak-banner-copy h2 { font-size: 22px; }
  #ak-home ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
@media (max-width: 480px) {
  .ak-trust { grid-template-columns: 1fr 1fr; gap: 16px; }
  .ak-trust-icon { width: 42px; height: 42px; }
  .ak-trust-item strong { font-size: 13px; }
  #ak-home ul.products { gap: 10px !important; }
}