/* SalesHost Theme v1.1 */
*,*::before,*::after{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0;display:flex;flex-direction:column;min-height:100vh}
img{max-width:100%;height:auto;border-style:none}
a{background-color:transparent}

:root{
    --sh-orange:#ee4d2d;
    --sh-orange-dark:#d6391c;
    --sh-orange-light:#fff0eb;
    --sh-white:#ffffff;
    --sh-text:#212121;
    --sh-text-light:#757575;
    --sh-bg:#f5f5f5;
    --sh-border:#e8e8e8;
    --sh-radius:4px;
    --sh-shadow:0 2px 8px rgba(0,0,0,.08);
    --sh-max-width:1200px;
}

body{background:var(--sh-bg);color:var(--sh-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
a{color:var(--sh-orange);text-decoration:none}
a:hover{color:var(--sh-orange-dark)}
.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute!important;width:1px}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;padding:15px 23px 14px;z-index:100000;right:auto}

input, button, select, textarea, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
input, select, textarea { font-size: 16px; }

/* ===== HEADER ===== */
.sh-header{background:var(--sh-orange);position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.sh-header__inner{max-width:var(--sh-max-width);margin:0 auto;padding:0 16px;height:64px;display:flex;align-items:center;gap:20px}

.sh-header__logo{
    display: flex; align-items: center; gap: 6px;
    color: #fff; font-size: 18px; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    flex-shrink: 0; max-width: 160px; overflow: hidden;
}
.sh-header__logo:hover{ color: #fff; }
.sh-header__logo .custom-logo{
    max-height: 32px; max-width: 140px;
    width: auto; height: auto;
    object-fit: contain;
    vertical-align: middle;
}
.sh-logo-icon{ flex-shrink: 0; }
.sh-header__name{ display: none; }

.sh-header__search{ flex: 1; min-width: 150px; max-width: 500px; }
.sh-search-wrap{ position: relative; width: 100%; }
.sh-search-input{width:100%;padding:10px 16px;border:none;border-radius:var(--sh-radius);font-size:14px;outline:none;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:box-shadow .2s}
.sh-search-input:focus{box-shadow:0 4px 16px rgba(0,0,0,.2)}

.sh-header__nav{ flex-shrink: 1; min-width: 0; overflow: hidden; }
.sh-header__nav ul{ display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: flex-end; }
.sh-header__nav a{ color: rgba(255,255,255,.9); padding: 6px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background .2s; }
.sh-header__nav a:hover{ background: rgba(255,255,255,.15); color: #fff; }

.sh-header__hamburger{
    display: none;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    width: 44px; height: 44px; min-width: 44px; padding: 10px; z-index: 110;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.sh-header__hamburger span{ display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s ease; }
.sh-header__hamburger[aria-expanded="true"] span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
.sh-header__hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.sh-header__hamburger[aria-expanded="true"] span:nth-child(3){ transform: rotate(-45deg) translate(5px,-5px); }

.sh-header__mobile-nav{
    display: none; background: var(--sh-orange-dark);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
}
.sh-header__mobile-nav--open{ max-height: 500px; }
.sh-header__mobile-nav ul{ list-style: none; margin: 0; padding: 8px 16px; }
.sh-header__mobile-nav a{
    display: block; color: rgba(255,255,255,.9); text-decoration: none;
    padding: 12px 8px; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sh-header__mobile-nav a:hover{ color: #fff; }

/* ===== SEARCH DROPDOWN ===== */
.sh-search-dropdown{position:fixed!important;left:0;right:0;top:100%;margin-top:4px;z-index:99999;background:var(--sh-white);border-radius:0 0 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.18);max-height:420px;overflow-y:auto}
.sh-search-result{display:flex;align-items:center;gap:12px;padding:10px 16px;text-decoration:none;color:var(--sh-text);border-bottom:1px solid var(--sh-border);transition:background .15s}
.sh-search-result:last-child{border-bottom:none}
.sh-search-result:hover{background:var(--sh-orange-light)}
.sh-search-result__img{width:48px;height:48px;border-radius:4px;overflow:hidden;flex-shrink:0;background:var(--sh-bg);display:flex;align-items:center;justify-content:center}
.sh-search-result__img img{width:100%;height:100%;object-fit:cover}
.sh-search-result__info{display:flex;flex-direction:column;gap:4px;min-width:0}
.sh-search-result__title{font-size:13px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sh-search-result__meta{display:flex;align-items:center;gap:8px}
.sh-search-result__price{font-size:14px;color:var(--sh-orange);font-weight:600}
.sh-search-result__mp{font-size:10px;color:var(--sh-white);padding:2px 6px;border-radius:3px;font-weight:600;text-transform:uppercase}
.sh-search-loading{display:flex;align-items:center;justify-content:center;gap:6px;padding:20px}
.sh-search-loading span{width:8px;height:8px;border-radius:50%;background:var(--sh-orange);animation:sh-dot 1.4s infinite ease-in-out both}
.sh-search-loading span:nth-child(1){animation-delay:-.32s}
.sh-search-loading span:nth-child(2){animation-delay:-.16s}
@keyframes sh-dot{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
.sh-search-empty{padding:24px 16px;text-align:center;color:var(--sh-text-light);font-size:13px}

/* ===== FOOTER ===== */
.sh-footer{background:var(--sh-white);border-top:1px solid var(--sh-border);padding:32px 0}
.sh-footer__inner{max-width:var(--sh-max-width);margin:0 auto;padding:0 16px;text-align:center}
.sh-footer__name{font-size:16px;font-weight:700;color:var(--sh-text);margin:0 0 4px}
.sh-footer__tagline{font-size:12px;color:var(--sh-text-light);margin:0 0 12px}
.sh-footer__nav ul{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;list-style:none;margin:0 0 12px;padding:0}
.sh-footer__nav a{color:var(--sh-orange);font-size:12px;padding:4px 8px}
.sh-footer__nav a:hover{color:var(--sh-orange-dark)}
.sh-footer__copy{font-size:11px;color:#bbb;margin:0}

/* ===== CONTENT AREA ===== */
.site-main{ flex-grow: 1; padding: 0; }
.site-main > *{ max-width: var(--sh-max-width); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; }

/* ===== NUVEM DE CATEGORIAS ===== */
/* Sangria: ocupa 100% da viewport mesmo dentro do .site-container (limitado por .site-main > *) */
.sh-categoria-cloud{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: var(--sh-white);
    border-bottom: 1px solid var(--sh-border);
}
.sh-categoria-cloud__list{
    max-width: var(--sh-max-width);
    margin: 0 auto;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}
.sh-categoria-cloud__pill{
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--sh-orange-light);
    color: var(--sh-orange);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.sh-categoria-cloud__pill:hover{
    background: var(--sh-orange);
    color: var(--sh-white);
}
.sh-categoria-cloud__pill--all{
    background: var(--sh-orange);
    color: var(--sh-white);
}
.sh-categoria-cloud__pill--all:hover{
    background: var(--sh-orange-dark);
}

/* Cores de marca para badge/botão: o PAP só aplica --papafpro-badge-bg e
   --papafpro-button-bg quando o preset em uso define badge_color/button_color.
   Quando essas chaves ficam vazias no preset resolvido, o plugin cai no
   fallback dele (verde #2ecc71 / azul #3498db). Forçamos aqui a cor da marca
   direto no tema, sem depender do preset do backend. */
.papafpro-card{
    --papafpro-badge-bg: var(--sh-orange);
    --papafpro-button-bg: var(--sh-orange);
    --papafpro-button-hover-bg: var(--sh-orange-dark);
}

/* ===== PAP PRODUCT CARDS — container e grid ===== */
.papafpro-layout-grid{ max-width: var(--sh-max-width); margin: 24px auto; padding: 0 16px; }
.papafpro-layout-list{ max-width: var(--sh-max-width); margin: 24px auto; padding: 0 16px; }
.papafpro-card{ max-width: 100%; font-size: 14px; }
.papafpro-grid{ display: grid; gap: 16px; }
.papafpro-grid--cols-4{ grid-template-columns: repeat(4, 1fr); }
.papafpro-grid--cols-3{ grid-template-columns: repeat(3, 1fr); }

/* Título com altura fixa (2 linhas) para não empurrar preço/botão de forma
   desigual entre cards com títulos de tamanhos diferentes. */
.papafpro-card__title{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empurra preço + botão para a base do card, alinhando-os entre cards
   mesmo quando título/avaliação/vendas variam de altura. */
.papafpro-card__price-row{
    margin-top: auto;
}

/* Rating stars */
.papafpro-card__rating{ display: flex; align-items: center; gap: 4px; margin: 4px 0; }
.papafpro-card__rating-stars{ display: flex; gap: 1px; }
.papafpro-star{ font-size: 13px; }
.papafpro-star--full{ color: #ffc107; }
.papafpro-star--empty{ color: #ddd; }
.papafpro-card__rating-value{ font-size: 12px; color: #757575; font-weight: 500; }

/* Sales count */
.papafpro-card__sales{ font-size: 12px; color: #757575; margin: 2px 0; display: flex; align-items: center; gap: 4px; }
.papafpro-card__sales-icon{ font-size: 13px; }

/* ===== RESPONSIVO ===== */
@media (max-width: 992px) {
    .papafpro-grid--cols-4{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .sh-header__inner{ height: 56px; gap: 8px; padding: 0 8px; }
    .sh-header__logo{ flex-shrink: 0; }
    .sh-header__logo svg{ width: 24px; height: 24px; }
    .sh-header__logo .custom-logo{ max-height: 28px; }
    .sh-header__name{ display: none; }
    .sh-header__search{ flex: 1; min-width: 0; max-width: none; }
    .sh-search-input{ font-size: 16px; padding: 8px 10px; }
    .sh-header__nav{ display: none; }
    .sh-header__hamburger{ display: flex; }
    .sh-header__mobile-nav{ display: block; }

    .papafpro-grid--cols-4, .papafpro-grid--cols-3{ grid-template-columns: repeat(2, 1fr); gap: 10px; }

    .sh-footer{ padding: 20px 0; }
    .sh-footer__nav a{ color: var(--sh-orange); }
    .sh-footer__name{ font-size: 14px; }
}

@media (max-width: 480px) {
    .sh-header__inner{ height: 52px; gap: 6px; padding: 0 6px; }
    .sh-header__logo svg{ width: 22px; height: 22px; }
    .sh-search-input{ padding: 6px 8px; }

    .papafpro-grid--cols-4, .papafpro-grid--cols-3{ grid-template-columns: repeat(2, 1fr); gap: 8px; }
}