/*
 * Vintage Boutique Theme for Osclass
 * responsive.css - breakpoints 960px (tablet) and 640px (mobile)
 * Uses logical properties where possible so it mirrors for RTL.
 */

/* ---------------------------------------------------------------------
 * Tablet and below (<= 960px)
 * ------------------------------------------------------------------- */
@media (max-width: 960px) {
  /* collapse nav behind burger */
  .menu-icon { display: flex; }
  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--v-paper);
    border-block-end: 2px solid var(--v-brown);
    box-shadow: var(--v-shadow);
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 13px 20px;
    border-block-end: 1px solid var(--v-line);
  }
  .nav .btn-cta {
    margin: 12px 20px 14px;
    padding: 12px;
    text-align: center;
  }
  .mainbar .wrapper { position: relative; flex-wrap: wrap; min-height: 64px; }
  .brand { margin-inline-end: auto; }
  .brand .logo-text { font-size: 23px; }
  .logo-mark svg { width: 38px; height: 38px; }

  /* coleções: 2 colunas (extras reveladas também em 2) */
  .coll-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .coll-card { min-height: 260px; }
  .coll-more { min-height: 260px; grid-column: 1 / -1; }
  .coll-extra { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* hero com foto */
  .hero-photo .hero-grid { padding-block: 56px 66px; min-height: 320px; }

  /* home sections */
  .promo-grid { grid-template-columns: 1fr 1fr; }
  .usp-grid { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .usp-grid li:nth-child(3) { border-inline-start: 0; padding-inline-start: 8px; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .why-copy { grid-column: 1 / -1; }

  /* sections breathe less */
  .section-head h2 { font-size: 22px; }

  /* região: chips espalham na faixa full-width */
  .regs-wrap { grid-template-columns: 1fr 1fr; }

  /* search filters hide behind button on tablet/mobile */
  body.search #sidebar { display: none; }
  body.search.filters-open #sidebar { display: block; width: 100%; margin-block-end: 24px; }

  /* item page sidebar stacks below */
  .price-side { display: block !important; }

  /* user menu collapses behind button */
  .user-menu-toggle { display: block; }
  body.user #sidebar .user_menu { display: none; }
  body.user.display-filters #sidebar .user_menu { display: block; }
  body.user.filters-open #sidebar .user_menu { display: block; }

  /* listing grid: 2-up handled by auto-fill; soften gaps */
  .listing-card-list.listing-grid { gap: 14px; }
  .listing-card-list.listing-list .card-media { flex-basis: 180px; }
}

/* ---------------------------------------------------------------------
 * Mobile (<= 640px)
 * ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* ------------------------------------------------------------------
   * Redesign mobile: barra sticky compacta, hero sobre véu de papel,
   * coleções em 2 colunas, anúncios em catálogo 2-up, regiões em pílulas.
   * ------------------------------------------------------------------ */
  body { font-size: 15px; }
  .wrapper { padding-inline: 14px; }
  .section-head { gap: 10px; margin-block-end: 16px; }
  .section-head h2 { font-size: 21px; }

  /* header: barra sticky compacta (logo + busca + burger) */
  .mainbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 60;
    box-shadow: 0 2px 12px rgba(43, 38, 32, .07);
  }
  .mainbar .wrapper { gap: 10px; min-height: 56px; }
  .brand .logo-link.brand-mark { gap: 7px; }
  .logo-mark svg { width: 32px; height: 32px; }
  .brand .logo-text { font-size: 19px; }
  /* ícones colados à direita: a busca ficava solta no meio da barra e o
     burger isolado na ponta — agora formam um bloco único de ações */
  .nav-search { width: 36px; height: 36px; margin-inline-start: auto; }
  .header-fields .btn-primary { min-width: 0; }
  .menu-icon { width: 36px; height: 36px; padding: 9px; margin-inline-start: 0; }
  .menu-icon span { width: 18px; height: 2px; flex: 0 0 auto; border-radius: 2px; background: var(--v-brown); }
  .menu-icon span:nth-child(2) { margin-block: 2px; }
  .menu-icon.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .menu-icon.open span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  .nav a { padding: 12px 16px; font-size: 14.5px; }
  .nav .btn-cta { margin: 12px 16px 14px; }

  /* hero: véu de papel cobre a faixa toda — texto sempre legível em
     cima da ilustração, em qualquer trecho da foto de fundo */
  .hero-photo .hero-grid { padding-block: 26px 32px; min-height: 0; }
  .hero-photo .hero-copy { max-width: none; }
  .hero-photo::after {
    background: linear-gradient(90deg, rgba(250, 246, 239, .94) 0%, rgba(250, 246, 239, .80) 48%, rgba(250, 246, 239, .52) 100%);
  }
  .hero-eyebrow { font-size: 11px; letter-spacing: .26em; margin-block-end: 7px; }
  .hero h1 { font-size: clamp(25px, 6.8vw, 31px); line-height: 1.18; margin-block-end: 9px; }
  .hero-sub { font-size: 14.5px; margin-block-end: 16px; max-width: 34ch; }
  .hero-ctas { gap: 8px; }
  .hero-ctas .btn-primary { padding: 9px 18px; }

  /* coleções: 2 cartões por fileira (catálogo que cabe na mão) */
  .coll-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding-block: 22px 10px; }
  /* "Mais coleções": cartão cheio vira banner horizontal compacto */
  .coll-more, .coll-card { min-height: 176px; padding: 13px 13px 15px; }
  .coll-more {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 0;
    padding: 14px 16px;
  }
  .coll-more .coll-plus { position: static; width: 30px; height: 30px; flex: 0 0 auto; }
  .coll-more strong { font-size: 15.5px; }
  .coll-more .coll-count { font-size: 12px; }
  .coll-card strong, .coll-more strong { font-size: 17px; }
  .coll-card em { display: none; }
  .coll-badge { width: 34px; height: 34px; top: 11px; inset-inline-start: 11px; }
  .coll-badge .cat-svg { width: 19px; height: 19px; }
  .coll-badge i { font-size: 13px; }
  .coll-arrow { bottom: 13px; inset-inline-end: 11px; font-size: 13px; }
  .coll-extra { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* regiões: pílulas orgânicas que fluen em wrap (sem coluna esticada) */
  .regs-wrap { display: flex; flex-wrap: wrap; gap: 7px; }
  .reg a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: var(--v-paper);
    border: 1px solid var(--v-line-strong);
    border-radius: 999px;
    font-size: 13px;
  }
  .reg a:hover { border-color: var(--v-brown); }
  .reg i, .reg em { font-size: 13px; }
  .reg em { margin-inline-start: -1px; }

  /* seções mais próximas: a home inteira cabe em menos roladas */
  .home-featured { padding-block: 26px 4px; }
  .home-featured .section-head--split { margin-block-end: 14px; }
  .home-promos { margin-block: 24px; }
  .usp-grid { grid-template-columns: 1fr 1fr; padding: 14px 16px; }
  .usp-grid li + li { border-inline-start: 0; padding-inline-start: 8px; }
  .home-usps { margin-block: 4px 26px; }
  .home-latest { padding-block: 22px 4px; }
  .home-why { margin-block: 10px 30px; }
  .why-grid { grid-template-columns: 1fr; gap: 14px; }
  .why-copy h2 { font-size: 23px; }
  .why-list { gap: 7px; font-size: 14px; }
  .why-art { padding: 14px; }
  .why-art svg { max-width: 170px; }
  .why-quote { padding: 16px; }
  .why-quote blockquote { font-size: 15.5px; }

  .promo-grid { grid-template-columns: 1fr; }

  /* anúncios: catálogo 2-up com corpo compacto */
  .listing-card-list.listing-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .listing-card-list.listing-grid .card-body { padding: 9px 10px 11px; gap: 4px; }
  .card-title {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card-desc, .card-meta { display: none; }
  .card-price { font-size: 15px; }
  .card .ribbon { inset-block-start: 9px; inset-inline-start: -26px; padding: 3px 28px; font-size: 10px; }

  /* list variant: vira card compacto com miniatura à esquerda */
  .listing-card-list.listing-list .card { gap: 12px; padding: 11px; }
  .listing-card-list.listing-list .card-media { flex: 0 0 118px; }

  /* postcard comment form folds to one column */
  .postcard-grid { grid-template-columns: 1fr; gap: 22px; }
  .postcard-aside {
    min-height: 0;
    padding-inline-start: 0;
    padding-block-start: 18px;
    border-inline-start: 0;
    border-block-start: 2px dashed var(--v-caramel);
  }
  .postcard-stamp { inset-block-start: -2px; inset-inline-end: 0; width: 70px; }
  .postcard-to { padding-inline-end: 84px; }
  .postcard-row { grid-template-columns: 1fr; gap: 0; }
  .postcard-form fieldset { padding: 18px 16px 16px; }
  .postcard-invite { font-size: 15px; }

  .f-top { gap: 22px; }
  .f-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
  .f-bottom .powered { margin-inline-start: 0; }

  /* results bar: counter on its own line, controls to the right */
  .results-bar { gap: 10px; }
  .counter-search { flex-basis: 100%; margin-inline-end: 0; }
  /* "Classificar por: Mais recentes" não cabe inteiro no celular:
     some o prefixo e deixa só "Mais recentes ⌄" (sem estourar a borda) */
  .see_by > label .see-label { display: none; }
  /* e a troca de visualização desce pra linha própria (≡/▦ cortavam na borda) */
  .results-bar .doublebutton { flex-basis: 100%; }

  /* galeria de fotos da publicação: 2 cartões por fileira */
  #uppy-gallery li { width: calc(50% - 6px); }

  .btn-cta { padding: 8px 12px; font-size: 13.5px; }
}

/* ---------------------------------------------------------------------
 * Small phones (<= 380px)
 * ------------------------------------------------------------------- */
@media (max-width: 380px) {
  .cat-grid { grid-template-columns: 1fr; }
  .regs-wrap { grid-template-columns: 1fr; }
}