/* ============================================
   SAKURA IMPORTS — Responsive fixes
   Carregado por último (depois de components/woocommerce/home).
   ============================================ */

/* ---- 1. CONTAINERS COM PADDING INLINE ----
   Várias seções usam style="padding: X 0" no .container, o que zera o
   respiro lateral: no celular texto e cards encostavam na borda da tela. */
.container[style] {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
:root { --gutter: clamp(16px, 4vw, 24px); }
.container { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---- 2. HEADER (desktop estreito) ----
   Em ~1440px os 7 links + busca + ícones passavam da largura e o botão de
   conta ficava escondido sob a barra de rolagem. */
.header__inner { gap: var(--space-3); padding-left: var(--gutter); padding-right: var(--gutter); }
.header__search { flex: 1 1 200px; min-width: 150px; max-width: 340px; margin: 0; }
.header__nav { gap: 2px; min-width: 0; }
.header__link { padding: var(--space-2) var(--space-3); letter-spacing: 0.5px; white-space: nowrap; }
.header__icons { flex-shrink: 0; gap: var(--space-3); }

/* Menu hambúrguer entra antes dos links começarem a apertar. */
@media (max-width: 1240px) {
  .header__burger { display: flex; }
  .header__inner { position: relative; }
  .header__search { max-width: none; }
  .header__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: var(--space-1); padding: var(--space-3);
    background: linear-gradient(135deg, #fff5f7 0%, #ffe8ef 100%);
    border-bottom: 2px solid var(--sakura-200);
    box-shadow: 0 8px 20px rgba(255,183,197,0.25);
    display: none;
  }
  .header__nav.open { display: flex; animation: fadeInDown 0.2s ease; }
  .header__nav .header__link { justify-content: flex-start; padding: var(--space-3) var(--space-4); }
}
@media (max-width: 480px) {
  .header__icons { gap: var(--space-2); }
  .header__icon { width: 38px; height: 38px; }
}

/* ---- 3. HERO ----
   Os botões não quebravam linha: o bloco de conteúdo ficava mais largo que
   a tela e título/texto/botões saíam cortados dos dois lados. */
.hero__content { width: 100%; min-width: 0; box-sizing: border-box; }
.hero__actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero { min-height: auto; }
  .hero__content { padding: var(--space-10) var(--gutter) var(--space-12); }
  .hero__title { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.15; overflow-wrap: break-word; }
  .hero__subtitle { font-size: var(--text-base); margin-bottom: var(--space-6); }
  .hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero__actions .btn { width: 100%; white-space: normal; text-align: center; }
}

/* ---- 4. TIPOGRAFIA DE SEÇÃO / SERVIÇOS ---- */
@media (max-width: 640px) {
  .section-header__title { font-size: clamp(1.6rem, 7vw, 2.2rem); overflow-wrap: break-word; }
  .service-card { padding: var(--space-6) var(--space-5); }
  .service-card__title { font-size: clamp(1.35rem, 6vw, 1.6rem); }
  .service-card .btn { width: 100%; white-space: normal; text-align: center; }
  .btn--lg { white-space: normal; text-align: center; }
}

/* ---- 5. GRID DE CATEGORIAS ----
   O front-page fixa repeat(4,1fr) inline: no celular eram 4 miniaturas. */
@media (max-width: 900px) {
  .category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: var(--space-4); }
}
@media (max-width: 480px) {
  .category-grid { grid-template-columns: 1fr !important; }
}

/* ---- 6. GRADE DE PRODUTOS (loja, categorias, destaques) ----
   No celular era 1 coluna com cards gigantes; vira 2 colunas compactas. */
@media (max-width: 480px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .woocommerce ul.products li.product:hover { transform: none; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.85rem; padding: var(--space-3) var(--space-3) var(--space-1);
  }
  .woocommerce ul.products li.product .price {
    font-size: var(--text-base); padding: 0 var(--space-3) var(--space-2);
  }
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product a.add_to_cart_button,
  .woocommerce ul.products li.product a.added_to_cart {
    width: auto !important;
    margin: 0 !important;
    padding: var(--space-2) var(--space-2);
    font-size: 0.68rem; letter-spacing: 0.5px; line-height: 1.3;
    white-space: normal;
  }
  .woocommerce ul.products li.product .product-card__actions { padding: 0 var(--space-3) var(--space-3); }
  .woocommerce .woocommerce-result-count,
  .woocommerce .woocommerce-ordering { float: none; width: 100%; }
}

/* ---- 7. PÁGINA DE PRODUTO ----
   Grid com 1fr deixava o conteúdo (lista de relacionados em 4 colunas)
   forçar a largura: tudo vazava pela direita e a imagem cobria o título. */
.woocommerce div.product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.woocommerce div.product > * { min-width: 0; }
/* O CSS do WC deixa a galeria position:relative; com o top:100px do sticky
   ela descia 100px, abrindo um vão em cima e cobrindo o título no celular. */
.woocommerce div.product div.woocommerce-product-gallery { position: sticky !important; top: 96px; }
@media (max-width: 768px) {
  .woocommerce div.product div.woocommerce-product-gallery { position: relative !important; top: auto; }
}
@media (max-width: 768px) {
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-5) 0; gap: var(--space-5);
  }
  .woocommerce div.product .product_title { font-size: clamp(1.4rem, 6vw, 1.8rem); overflow-wrap: break-word; }
  .woocommerce div.product p.price,
  .woocommerce div.product p.price ins { font-size: var(--text-xl); }
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex; overflow-x: auto; white-space: nowrap; padding: 0; margin: 0 0 var(--space-4);
  }
  .woocommerce div.product .woocommerce-tabs ul.tabs li { flex: 0 0 auto; }
  .woocommerce-breadcrumb { font-size: var(--text-xs); }
}

/* ---- 8. PÁGINAS GENÉRICAS (Minha conta, Carrinho, legais) ---- */
@media (max-width: 640px) {
  main.container > article > .section-header__title,
  main.container > .section-header__title { font-size: clamp(1.6rem, 7vw, 2rem); margin-bottom: var(--space-5); }
  .entry-content { overflow-wrap: break-word; }
  .entry-content img, .entry-content table { max-width: 100%; }
}

/* ---- 9. CHECKOUT ----
   O grid do form usava 1fr, que não encolhe abaixo do conteúdo (tabela de
   frete, select2, caixa do Pix): a coluna ficava com ~465px numa tela de
   390 e tudo saía pela direita. Além disso eram 3 camadas de padding. */
.woocommerce form.checkout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.woocommerce form.checkout > * { min-width: 0; }
.woocommerce form.checkout .select2-container { width: 100% !important; max-width: 100%; }
.woocommerce #payment div.payment_box,
.woocommerce #payment div.payment_box * { max-width: 100%; box-sizing: border-box; }
.woocommerce #payment div.payment_box img { height: auto; }

@media (max-width: 900px) {
  .woocommerce form.checkout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .woocommerce-checkout .woocommerce { padding: 0; }
  .woocommerce form.checkout #customer_details,
  .woocommerce #order_review,
  .woocommerce #order_review_heading { padding: var(--space-5) var(--space-4); }
  .woocommerce form.checkout h3 { font-size: var(--text-md); margin-bottom: var(--space-4); }
  .woocommerce-checkout h1,
  .woocommerce-checkout .section-header__title { font-size: clamp(1.6rem, 7vw, 2rem); }

  /* Campos em coluna única: metade de 300px era apertado demais. */
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first,
  .woocommerce-page form .form-row-last { width: 100% !important; float: none !important; margin-right: 0 !important; }
  .woocommerce form .form-row { margin-bottom: var(--space-4); }
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select,
  .woocommerce form .form-row textarea { font-size: 16px; } /* evita zoom do iOS */

  /* "Seu pedido" volta a ser tabela (o modo cartão do carrinho duplicava
     rótulos, ex.: "ENTREGA Entrega"). */
  .woocommerce #order_review table.shop_table { display: table; width: 100%; table-layout: auto; }
  .woocommerce #order_review table.shop_table thead { display: table-header-group; }
  .woocommerce #order_review table.shop_table tbody { display: table-row-group; }
  .woocommerce #order_review table.shop_table tfoot { display: table-footer-group; }
  .woocommerce #order_review table.shop_table tr { display: table-row; padding: 0; border: 0; }
  .woocommerce #order_review table.shop_table th,
  .woocommerce #order_review table.shop_table td { display: table-cell; padding: var(--space-3) var(--space-1); font-size: var(--text-sm); vertical-align: top; }
  .woocommerce #order_review table.shop_table td::before { content: none; display: none; }
  .woocommerce #order_review table.shop_table td.product-name { overflow-wrap: anywhere; }
  .woocommerce #order_review ul#shipping_method li { justify-content: flex-start; flex-wrap: wrap; }

  .sakura-frete-tabela { padding: var(--space-4) var(--space-3); }
  .sakura-frete-tabela__title { font-size: var(--text-md); }
  .sakura-frete-tabela__table th,
  .sakura-frete-tabela__table td { padding: var(--space-2) 6px; font-size: 0.75rem; }
  .sakura-frete-tabela__table th { white-space: normal; line-height: 1.25; vertical-align: bottom; }

  .woocommerce #payment ul.payment_methods { padding: var(--space-3); }
  .woocommerce #payment div.form-row.place-order { padding: var(--space-4) var(--space-3); }
  .woocommerce form.checkout_coupon { padding: var(--space-4); }
  .woocommerce form.checkout_coupon .form-row-first,
  .woocommerce form.checkout_coupon .form-row-last { width: 100% !important; }
  .woocommerce form.checkout_coupon .button { width: 100%; }
  .woocommerce-notices-wrapper .woocommerce-message,
  .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-message { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
}

/* ---- 10. CARRINHO ----
   .woocommerce e .woocommerce-cart-form tinham padding lateral cada um
   (card espremido) e o cupom ficava com input minúsculo e botão quebrando
   letra por letra. */
@media (max-width: 768px) {
  .woocommerce-cart .woocommerce,
  .woocommerce .woocommerce-cart-form { padding: 0; }
  .woocommerce-cart table.shop_table td { padding: var(--space-3) var(--space-4); }
  .woocommerce-cart table.shop_table td.product-name { text-align: right; overflow-wrap: anywhere; gap: var(--space-3); }
  .woocommerce .cart .actions { display: flex !important; flex-direction: column; gap: var(--space-3); padding: var(--space-4) !important; }
  .woocommerce .cart .actions::before { content: none !important; display: none !important; }
  .woocommerce .cart .actions .coupon {
    display: flex; flex-direction: column; gap: var(--space-2);
    width: 100%; float: none; padding: 0;
  }
  .woocommerce .cart .actions .coupon label { display: none; }
  .woocommerce .cart .actions .coupon input.input-text,
  .woocommerce .cart .actions .coupon .button,
  .woocommerce .cart .actions > .button {
    width: 100% !important; max-width: none; float: none; margin: 0 !important;
    white-space: normal; font-size: var(--text-sm); letter-spacing: 1px;
  }
  .woocommerce .cart .actions .coupon input.input-text { font-size: 16px; }
  .woocommerce .cart_totals { padding: var(--space-5) var(--space-4); }
  .woocommerce .cart_totals .wc-proceed-to-checkout .checkout-button { width: 100%; font-size: var(--text-base); white-space: normal; }
  .woocommerce .power-coupons-drawer-trigger-wrapper button { width: 100%; }
}

/* ---- 11. ABAS DA PÁGINA DE PRODUTO ----
   O wrapper das abas herdava largura fixa e passava da tela. */
/* margin:auto num item de grid faz ele assumir a largura do conteúdo
   (3 abas lado a lado = ~490px); width:100% prende na coluna. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.woocommerce div.product .woocommerce-tabs .panel { overflow-wrap: break-word; }
.woocommerce div.product .woocommerce-tabs .panel img,
.woocommerce div.product .woocommerce-tabs .panel table,
.woocommerce div.product .woocommerce-tabs .panel iframe { max-width: 100%; height: auto; }

/* ---- 12. AJUSTES FINOS MOBILE ---- */
@media (max-width: 640px) {
  /* breadcrumb tinha recuo próprio além do container */
  .woocommerce .woocommerce-breadcrumb { padding-left: 0; padding-right: 0; }
  .woocommerce .woocommerce-ordering select { width: 100%; }
  .woocommerce .woocommerce-ordering { margin-bottom: var(--space-4); }
  .woocommerce .related > h2,
  .woocommerce .upsells > h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  /* login/cadastro: cartão dentro de cartão comia metade da largura */
  .sakura-auth-hero__right { padding: var(--space-5) var(--space-4) !important; }
  .woocommerce form.login,
  .woocommerce form.register,
  .woocommerce form.woocommerce-form-login,
  .woocommerce form.woocommerce-form-register { padding: var(--space-5) var(--space-4) !important; margin-left: 0; margin-right: 0; }
}