/* Loja SouPlastic: navegação de compras clara e adaptável a cada tela. */
:root {
    --store-blue: #185bd7;
    --store-blue-dark: #103d9e;
    --store-cyan: #12b9d0;
    --store-ink: #172b4d;
    --store-muted: #71819a;
    --store-line: #e6edf6;
    --store-surface: #ffffff;
    --store-page: #f4f7fb;
}
html, body { background: var(--store-page); color: var(--store-ink); }
.app { background: var(--store-page); }
.header { position: sticky; top: 0; min-height: 72px; padding: 10px max(18px, calc((100vw - 1320px) / 2)); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--store-line); box-shadow: 0 5px 18px rgba(26,54,94,.07); backdrop-filter: blur(14px); }
.logo-img { border-radius: 13px; box-shadow: 0 3px 10px rgba(20,75,157,.12); }
.logo h1 { color: var(--store-ink); font-weight: 850; }
.logo-subtitle { color: var(--store-muted); }
.store-nav { margin-left: auto; }
.store-nav button { min-height: 40px; padding: 0 15px; border: 1px solid #d8e6fa; border-radius: 999px; background: #f2f7ff; color: var(--store-blue); }
.store-nav button:hover { background: #e7f1ff; color: var(--store-blue-dark); }
.header-user { margin-left: 12px; border-color: #e3eaf3; background: #f7f9fc; }
.header-user-label { color: #8290a4; }
.user-name { color: var(--store-ink); }
.profile-avatar { background: linear-gradient(135deg, var(--store-blue), var(--store-cyan)); }
.main-content { width: min(1320px, 100%); max-width: 1320px; margin: 0 auto; padding: 0 28px 44px; }
.carousel-section { min-width: 0; }
.store-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 190px; margin: 22px 0 4px; padding: 34px 38px; border: 1px solid rgba(255,255,255,.16); border-radius: 25px; background: radial-gradient(circle at 88% 18%, rgba(88,219,255,.38), transparent 26%), linear-gradient(118deg,#103e9f 0%,#1767db 60%,#12a9ce 100%); box-shadow: 0 16px 34px rgba(28,83,176,.17); }
.store-hero::after { right: 2%; bottom: -112px; width: 230px; height: 230px; border-width: 36px; }
.hero-copy { max-width: 720px; }
.eyebrow { color: #a8e9ff; }
.hero-copy h2 { max-width: 680px; font-size: clamp(30px,3.2vw,42px); line-height: 1.08; letter-spacing: -1.5px; }
.hero-copy h2 strong { color: #9cecff; }
.hero-copy p { max-width: 540px; font-size: 14px; }
.hero-benefits { justify-content: flex-end; max-width: 270px; gap: 9px; margin: 0; }
.hero-benefits span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.12); font-size: 11px; white-space: nowrap; }
.section-header { padding: 28px 0 17px; align-items: end; }
.section-kicker { color: var(--store-blue); }
.section-title { color: var(--store-ink); font-size: clamp(22px,2vw,27px); letter-spacing: -.65px; }
.section-description { color: var(--store-muted); }
.catalog-filter-panel { gap: 9px; }
.catalog-search { min-height: 46px; border-color: #e1e8f2; border-radius: 13px; box-shadow: 0 5px 15px rgba(28,58,96,.05); }
.catalog-search:focus-within { border-color: #8fb6f2; box-shadow: 0 0 0 4px rgba(24,91,215,.09); }
.catalog-search span { color: var(--store-blue); }
.catalog-filter { color: #8391a5; }
.catalog-filter select { height: 46px; border-color: #e1e8f2; border-radius: 12px; color: #304764; }
.catalog-filter select:focus { outline: 3px solid rgba(24,91,215,.1); border-color: #8fb6f2; }
.catalog-filter-clear { min-height: 34px; padding: 0 10px; border: 1px solid #e2eaf4; border-radius: 999px; background: #fff; color: #607795; }
.catalog-filter-clear:hover { border-color: #b8cef0; background: #f5f9ff; text-decoration: none; }
.carousel-track { gap: 17px; padding-top: 3px; }
.product-card { min-width: 0; }
.card-inner { display: flex; height: 100%; flex-direction: column; border-color: #e7edf5; border-radius: 20px; box-shadow: 0 6px 20px rgba(25,52,89,.06); }
.card-inner:hover { transform: translateY(-4px); border-color: #c9daf4; box-shadow: 0 16px 32px rgba(24,74,151,.13); }
.product-image { height: auto; aspect-ratio: 1.34; background: linear-gradient(145deg,#f7faff,#edf5ff); }
.product-img { padding: 12px; }
.product-badge { top: 12px; left: 12px; padding: 6px 9px; border: 1px solid #e2f4eb; background: rgba(245,255,249,.95); color: #168052; font-size: 9px; }
.product-info { flex: 1; padding: 15px 16px 7px; }
.product-category { margin-bottom: 8px; border-radius: 999px; background: #eef5ff; color: #3a67ae; }
.product-name { min-height: 38px; height: auto; color: #1b3458; font-size: 14px; font-weight: 750; line-height: 1.35; }
.product-help { min-height: 16px; color: #8190a4; font-size: 11px; }
.product-action { padding: 12px 16px 16px; }
.add-btn { min-height: 43px; border: 1px solid #cfe0fb; border-radius: 12px; background: #edf5ff; color: var(--store-blue); font-size: 12px; font-weight: 800; box-shadow: none; }
.add-btn:hover { background: #e1efff; color: var(--store-blue-dark); }
.add-btn:active { transform: scale(.98); }
.order-panel { top: 94px; border: 1px solid #e4eaf3; border-radius: 22px; background: #fff; box-shadow: 0 12px 32px rgba(24,53,91,.09); }
.panel-header { padding: 18px 18px 14px; }
.panel-icon { background: linear-gradient(135deg,var(--store-blue),var(--store-cyan)); box-shadow: 0 6px 15px rgba(24,91,215,.2); }
.panel-header h2 { color: var(--store-ink); }
.panel-subtitle { color: var(--store-muted); }
.order-count { background: #edf5ff; color: var(--store-blue); }
.order-items { scrollbar-color: #cad8eb transparent; }
.order-item { border-radius: 14px; }
.order-footer { background: #fff; }
.checkout-btn { min-height: 48px; border-radius: 13px; background: linear-gradient(110deg,var(--store-blue),#287ce9); box-shadow: 0 8px 17px rgba(24,91,215,.19); font-size: 14px; font-weight: 800; }
.size-modal { max-width: 560px; border-radius: 24px; box-shadow: 0 24px 70px rgba(17,37,75,.22); }
.size-modal .modal-header { padding: 18px 22px; background: #fff; }
.size-modal .modal-header h3 { color: var(--store-ink); font-size: 18px; line-height: 1.3; }
.size-modal .modal-body { padding: 18px 22px; }
.size-minimum-note { padding: 12px 14px; border: 1px solid #dfeaf8; border-radius: 13px; background: #f4f8ff; color: #5e718b; }
.size-list { gap: 9px; }
.size-row { min-height: 66px; padding: 11px 14px; border: 1px solid #e7edf5; border-radius: 14px; background: #fff; }
.size-label { color: #223c60; font-size: 14px; font-weight: 800; }
.size-controls { gap: 8px; padding: 4px; border: 1px solid #e6edf6; background: #f8faff; box-shadow: none; }
.size-btn { width: 36px; height: 36px; background: var(--store-blue); }
.size-btn.minus { background: #e9eff7; color: #60738d; }
.size-controls input.size-qty-display { height: 38px; border-color: transparent; background: transparent; color: #1d4f9d; font-size: 15px; }
.size-modal-footer { padding: 12px 22px max(20px,env(safe-area-inset-bottom)); border-top: 1px solid #edf1f6; }
.save-qty-btn { min-height: 50px; border-radius: 13px; background: linear-gradient(110deg,var(--store-blue),#287ce9); font-size: 14px; font-weight: 800; box-shadow: 0 8px 17px rgba(24,91,215,.16); }
.modal-overlay { background: rgba(17,34,63,.56); }
.modal { box-shadow: 0 24px 70px rgba(17,37,75,.2); }
.modal-header h3 { color: var(--store-ink); }
.btn-confirm { background: linear-gradient(110deg,var(--store-blue),#287ce9); }
.toast { border-radius: 14px; background: #17335b; }
@media (min-width: 1024px) {
    .main-content { grid-template-columns: minmax(0,1fr) 350px; gap: 28px; }
    .order-panel { top: 96px; max-height: calc(100vh - 116px); }
    .order-items { max-height: min(48vh,460px); }
    .carousel-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .main-content { padding-right: 24px; padding-left: 24px; display: block; }
    .order-panel { position: static; margin: 8px 0 24px; }
    .carousel-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .store-hero { min-height: 175px; padding: 28px; }
    .hero-benefits { max-width: 220px; }
}
@media (max-width: 767px) {
    .header { position: sticky; z-index: 250; min-height: 64px; padding: 8px 14px; }
    .logo { gap: 8px; }
    .logo-img { width: 38px; height: 38px; }
    .logo h1 { font-size: 19px; }
    .store-nav { margin-left: auto; }
    .store-nav button { min-height: 36px; padding: 0 11px; font-size: 10px; }
    .header-user { margin-left: 7px; }
    .main-content { width: 100%; padding: 0 0 108px; }
    .store-hero { display: block; min-height: 0; margin: 12px 12px 3px; padding: 22px 19px; border-radius: 19px; }
    .hero-copy h2 { max-width: 360px; font-size: clamp(22px,6vw,28px); letter-spacing: -.8px; }
    .hero-copy p { max-width: 360px; font-size: 12px; }
    .hero-benefits { display: flex; justify-content: flex-start; max-width: none; gap: 7px; margin-top: 15px; }
    .hero-benefits span { padding: 7px 9px; font-size: 9px; }
    .section-header { padding: 20px 14px 12px; }
    .section-title { font-size: 21px; }
    .catalog-filter-panel { gap: 8px; }
    .catalog-search { min-height: 46px; margin-top: 12px; border-radius: 13px; }
    .catalog-filter { font-size: 8px; }
    .catalog-filter select { height: 42px; border-radius: 11px; }
    .catalog-filter-clear { justify-self: start; min-height: 32px; }
    .carousel-track { gap: 11px; padding: 0 12px 20px; }
    .card-inner { border-radius: 16px; }
    .product-image { height: auto; aspect-ratio: 1.12; }
    .product-img { padding: 7px; }
    .product-badge { top: 7px; left: 7px; padding: 4px 6px; font-size: 8px; }
    .product-info { padding: 10px 10px 4px; }
    .product-category { margin-bottom: 6px; padding: 3px 6px; font-size: 8px; }
    .product-name { min-height: 35px; font-size: 11px; line-height: 1.3; }
    .product-help { display: none; }
    .product-action { padding: 8px 9px 10px; }
    .add-btn { min-height: 37px; padding: 7px 5px; font-size: 10px; }
    .order-panel { z-index: 320; border: 1px solid #dae5f3; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(24,53,91,.16); }
    .order-panel.expanded { border-radius: 20px 20px 0 0; }
    .panel-handle { width: 40px; height: 4px; border-radius: 99px; background: #d5dfed; }
    .panel-header { min-height: 66px; }
    .panel-title-row { gap: 11px; }
    .order-footer { padding-bottom: max(14px,env(safe-area-inset-bottom)); }
    .size-modal { width: 100%; max-height: min(84dvh,760px); border-radius: 24px 24px 0 0; }
    .size-modal .modal-header { padding: 15px 18px 13px; }
    .size-modal .modal-body { padding: 14px 16px; }
    .size-modal-footer { padding-right: 16px; padding-left: 16px; }
}
@media (max-width: 380px) {
    .hero-benefits { flex-direction: column; align-items: flex-start; }
    .hero-benefits span { padding: 5px 8px; }
    .product-name { font-size: 10px; }
    .add-btn { font-size: 9px; }
}
@media (min-width: 650px) {
    #sizeModal { align-items: center; padding: 24px; }
    #sizeModal .size-modal { width: min(560px,100%); max-height: 88vh; border-radius: 24px; }
    #sizeModal .modal-handle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* SouPlastic storefront refinement: calm surfaces, clear hierarchy, visible focus. */
:root {
    --store-blue: #1459b4;
    --store-blue-dark: #0d438d;
    --store-cyan: #10aebe;
    --store-ink: #142f50;
    --store-muted: #667b95;
    --store-line: #e1e9f3;
    --store-surface: #ffffff;
    --store-page: #f5f8fc;
}
html, body { background: var(--store-page); color: var(--store-ink); }
body { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; }
.app { min-height: 100vh; background: var(--store-page); }
.header {
    z-index: 600;
    min-height: 70px;
    padding: 10px max(22px, calc((100vw - 1360px) / 2));
    border-bottom: 1px solid rgba(216,228,241,.8);
    background: rgba(255,255,255,.94);
    box-shadow: 0 5px 22px rgba(20,47,80,.055);
    backdrop-filter: blur(18px);
}
.logo { gap: 0; }
.logo h1.brand-wordmark {
    color: #102d50;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.07em;
}
.logo h1.brand-wordmark span { color: var(--store-cyan); }
.logo-subtitle { display: block; margin-top: 5px; color: #71839a; font-size: 10px; letter-spacing: .01em; }
.store-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.store-nav-link,
.store-nav button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    border: 1px solid #d9e5f2;
    border-radius: 999px;
    background: #fff;
    color: #345779;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.store-nav-link:hover,
.store-nav button:hover { border-color: #b9d4ed; background: #f1f8fc; color: var(--store-blue); }
.store-nav a.store-nav-link { color: #345779; }
.store-nav a.store-nav-link:hover { color: var(--store-blue); }
.header-user { margin-left: 8px; border-color: #e0e8f1; background: #f8fafc; }
.profile-avatar { background: linear-gradient(135deg,#123b70,var(--store-cyan)); }
.user-name { color: var(--store-ink); }
.main-content {
    width: min(1360px, 100%);
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 28px 48px;
}
.store-hero {
    position: relative;
    min-height: 188px;
    margin: 24px 0 8px;
    padding: 34px 38px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 24px;
    background: radial-gradient(ellipse at 92% 14%,rgba(88,226,235,.35),transparent 27%), linear-gradient(118deg,#102d50 0%,#124d8c 55%,#079fb6 100%);
    box-shadow: 0 17px 34px rgba(20,67,121,.16);
}
.store-hero::after { right: 1%; bottom: -118px; width: 250px; height: 250px; border: 34px solid rgba(255,255,255,.08); }
.hero-copy { max-width: 720px; }
.eyebrow { color: #a8e9ef; letter-spacing: 1.6px; }
.hero-copy h2 { max-width: 680px; font-size: clamp(30px,3.2vw,42px); line-height: 1.08; letter-spacing: -1.45px; }
.hero-copy h2 strong { color: #8ce5ed; }
.hero-copy p { max-width: 540px; color: rgba(241,248,255,.82); font-size: 14px; line-height: 1.55; }
.hero-benefits { justify-content: flex-end; max-width: 310px; gap: 8px; margin: 0; }
.hero-benefits span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.1); font-size: 10px; white-space: nowrap; }
.section-header {
    display: block;
    padding: 27px 0 15px;
}
.section-kicker { color: var(--store-blue); font-size: 10px; font-weight: 850; letter-spacing: 1.4px; }
.section-title { margin-top: 4px; color: var(--store-ink); font-size: clamp(22px,2vw,27px); letter-spacing: -.7px; }
.section-description { margin-top: 5px; color: var(--store-muted); font-size: 12px; }
.catalog-filter-panel {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(200px,1.7fr) repeat(4,minmax(92px,1fr)) auto;
    align-items: end;
    gap: 9px;
    margin-top: 17px;
}
.catalog-search {
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid #dce6f1;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(21,48,79,.035);
}
.catalog-search:focus-within { border-color: #7eb6d0; box-shadow: 0 0 0 4px rgba(16,174,190,.11); }
.catalog-search svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--store-blue); }
.catalog-search input { min-width: 0; color: var(--store-ink); font-size: 13px; }
.catalog-search input::placeholder { color: #8b9bb0; }
.catalog-filter { min-width: 0; color: #6d8098; font-size: 9px; font-weight: 750; letter-spacing: .3px; }
.catalog-filter select {
    width: 100%;
    height: 46px;
    margin-top: 5px;
    padding: 0 26px 0 11px;
    border: 1px solid #dce6f1;
    border-radius: 12px;
    background: #fff;
    color: #294562;
    font: inherit;
    font-size: 11px;
    font-weight: 650;
}
.catalog-filter select:focus-visible { outline: 3px solid rgba(16,174,190,.16); border-color: #79b6d2; }
.catalog-filter-clear {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #dce6f1;
    border-radius: 999px;
    background: #fff;
    color: #526d8b;
    font: inherit;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}
.catalog-filter-clear:hover { border-color: #b5d0e8; background: #f1f8fc; color: var(--store-blue); }
.carousel-wrapper { margin-top: 5px; }
.carousel-track { align-items: stretch; gap: 16px; padding-top: 3px; }
.product-card { min-width: 0; }
.card-inner {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #e2eaf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(22,47,78,.055);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-card.selected .card-inner { border-color: #74bfd0; box-shadow: 0 0 0 2px rgba(16,174,190,.15),0 10px 26px rgba(20,64,99,.1); }
.product-card.selected .card-inner::after { background: var(--store-cyan); }
.product-image {
    display: flex;
    height: auto;
    aspect-ratio: 1.28;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(145deg,#f7fafc,#edf5f8);
}
.product-img { width: 100%; height: 100%; padding: 16px; object-fit: contain; transform: none; }
.product-badge { top: 11px; left: 11px; padding: 6px 9px; border: 1px solid #d9efe4; border-radius: 999px; background: rgba(248,255,251,.96); color: #178155; font-size: 9px; font-weight: 800; }
.product-info { flex: 1; padding: 14px 15px 7px; text-align: left; }
.product-category { display: inline-flex; margin: 0 0 8px; padding: 5px 8px; border-radius: 999px; background: #eaf5f8; color: #287184; font-size: 9px; font-weight: 800; letter-spacing: .25px; }
.product-name { min-height: 38px; height: auto; margin: 0 0 5px; overflow: visible; color: #193652; font-size: 14px; font-weight: 780; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.product-help { min-height: 16px; margin: 0; color: #788ca2; font-size: 10px; line-height: 1.4; }
.product-action { padding: 9px 15px 15px; }
.add-btn {
    min-height: 44px;
    border: 1px solid #cfe3ef;
    border-radius: 12px;
    background: #eff8fa;
    color: #145c9c;
    font-size: 12px;
    font-weight: 800;
    box-shadow: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.add-btn:hover { border-color: #acd4e0; background: #e1f3f6; color: #0d4e82; }
.add-btn:active { transform: scale(.985); }
.order-panel { border: 1px solid #e0e8f2; border-radius: 20px; background: #fff; box-shadow: 0 12px 30px rgba(23,48,78,.075); }
.panel-header { padding: 18px 18px 14px; cursor: pointer; }
.panel-icon { background: linear-gradient(135deg,#153e70,var(--store-cyan)); box-shadow: 0 6px 14px rgba(18,75,127,.18); }
.panel-header h2 { color: var(--store-ink); }
.panel-subtitle { color: var(--store-muted); }
.order-count { background: #eaf5f8; color: #155f9b; }
.order-items { scrollbar-color: #c8d8e8 transparent; }
.order-item { border: 1px solid #e8eef4; border-radius: 13px; }
.order-item-name { color: #203b58; }
.order-edit-btn { color: var(--store-blue); }
.order-remove-btn { color: #a34857 !important; }
.order-footer { border-top: 1px solid #e8eef4; background: #fff; }
.checkout-btn,
.save-qty-btn,
.btn-confirm { min-height: 48px; border-radius: 13px; background: linear-gradient(110deg,#1459b4,#087fbb); box-shadow: 0 7px 16px rgba(20,89,180,.18); font-size: 13px; font-weight: 820; }
.checkout-btn:hover,
.save-qty-btn:hover,
.btn-confirm:hover { background: linear-gradient(110deg,#104b9c,#0673a9); }
.checkout-btn:disabled,
.save-qty-btn:disabled,
.btn-confirm:disabled { background: #aab9ca; box-shadow: none; cursor: not-allowed; }
.size-modal { max-width: 560px; border-radius: 22px; box-shadow: 0 24px 70px rgba(17,37,75,.22); }
.size-modal .modal-header { padding: 18px 22px 14px; background: #fff; }
.size-modal .modal-header h3 { color: var(--store-ink); font-size: 18px; line-height: 1.3; }
.size-modal .modal-body { padding: 16px 22px; }
.size-minimum-note { padding: 12px 14px; border: 1px solid #dceaf2; border-radius: 12px; background: #f1f8fa; color: #526d84; font-size: 12px; line-height: 1.45; }
.size-list { gap: 8px; }
.size-row { min-height: 64px; padding: 10px 12px; border: 1px solid #e4ebf3; border-radius: 13px; background: #fff; }
.size-label { color: #203b58; font-size: 14px; font-weight: 800; }
.size-controls { gap: 7px; padding: 4px; border: 1px solid #e3ebf2; border-radius: 12px; background: #f7fafc; box-shadow: none; }
.size-btn { width: 38px; height: 38px; border-radius: 10px; background: #1459b4; }
.size-btn.minus { background: #eaf0f6; color: #536b83; }
.size-controls input.size-qty-display { height: 38px; border-color: transparent; border-radius: 8px; background: transparent; color: #144d83; font-size: 15px; }
.size-modal-footer { padding: 12px 22px max(18px,env(safe-area-inset-bottom)); border-top: 1px solid #eaf0f5; }
.modal-overlay { background: rgba(12,31,55,.56); }
.modal { border-radius: 20px; box-shadow: 0 24px 70px rgba(17,37,75,.2); }
.modal-header h3 { color: var(--store-ink); }
.btn-confirm { background: linear-gradient(110deg,#1459b4,#087fbb); }
.toast { border-radius: 13px; background: #173a5c; box-shadow: 0 12px 32px rgba(8,27,50,.23); }
.empty-state { color: #7890a7; }
.catalog-filter-empty { grid-column: 1 / -1; padding: 28px 16px; border: 1px dashed #cad9e7; border-radius: 16px; background: rgba(255,255,255,.7); color: #6f8299; text-align: center; }
:where(button, a, input, select):focus-visible { outline: 3px solid rgba(16,174,190,.34); outline-offset: 2px; }

@media (min-width: 1200px) {
    .main-content { grid-template-columns: minmax(0,1fr) 350px; gap: 26px; }
    .order-panel { top: 94px; max-height: calc(100vh - 114px); }
    .order-items { max-height: min(48vh,460px); }
    .carousel-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .main-content { display: block; padding-right: 24px; padding-left: 24px; }
    .order-panel { position: static; margin: 8px 0 24px; }
    .catalog-filter-panel { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .catalog-search,
    .catalog-filter-clear { grid-column: 1 / -1; }
    .catalog-filter-clear { justify-self: start; }
    .carousel-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .store-hero { min-height: 174px; padding: 28px; }
    .hero-benefits { max-width: 235px; }
}
@media (max-width: 767px) {
    .header { position: sticky; z-index: 600; min-height: 62px; padding: 8px 13px; }
    .logo h1.brand-wordmark { font-size: 20px; }
    .logo-subtitle { margin-top: 4px; font-size: 9px; }
    .store-nav { gap: 5px; }
    .store-nav-link,
    .store-nav button { min-height: 36px; padding: 0 10px; font-size: 10px; }
    .header-user { margin-left: 4px; padding: 3px; }
    .profile-avatar { width: 31px; height: 31px; }
    .profile-copy { display: none; }
    .main-content { width: 100%; padding: 0 0 112px; }
    .store-hero { display: block; min-height: 0; margin: 12px 12px 4px; padding: 21px 18px; border-radius: 18px; }
    .hero-copy h2 { max-width: 360px; font-size: clamp(23px,6.4vw,29px); letter-spacing: -.85px; }
    .hero-copy p { max-width: 370px; font-size: 12px; line-height: 1.5; }
    .hero-benefits { display: flex; justify-content: flex-start; max-width: none; gap: 7px; margin-top: 14px; }
    .hero-benefits span { padding: 7px 9px; font-size: 9px; }
    .section-header { padding: 20px 14px 12px; }
    .section-title { font-size: 21px; }
    .catalog-filter-panel { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 13px; }
    .catalog-search,
    .catalog-filter-clear { grid-column: 1 / -1; }
    .catalog-search { min-height: 46px; }
    .catalog-filter { font-size: 8px; }
    .catalog-filter select { height: 42px; margin-top: 4px; border-radius: 11px; font-size: 11px; }
    .catalog-filter-clear { min-height: 34px; justify-self: start; }
    .carousel-track { gap: 11px; padding: 0 12px 18px; }
    .card-inner { border-radius: 15px; }
    .product-image { aspect-ratio: 1.12; }
    .product-img { padding: 8px; }
    .product-badge { top: 7px; left: 7px; padding: 4px 6px; font-size: 8px; }
    .product-info { padding: 9px 10px 4px; }
    .product-category { margin-bottom: 6px; padding: 4px 6px; font-size: 8px; }
    .product-name { min-height: 34px; margin-bottom: 3px; font-size: 11px; line-height: 1.3; }
    .product-help { display: none; }
    .product-action { padding: 7px 9px 9px; }
    .add-btn { min-height: 40px; padding: 7px 5px; font-size: 10px; }
    .order-panel { top: auto; right: 0; bottom: 0; left: 0; z-index: 320; border: 1px solid #d9e5f0; border-radius: 18px 18px 0 0; box-shadow: 0 -9px 28px rgba(19,49,79,.13); }
    .order-panel.expanded { border-radius: 18px 18px 0 0; }
    .panel-handle { width: 40px; height: 4px; border-radius: 99px; background: #cfdae7; }
    .panel-header { min-height: 62px; padding: 12px 16px; }
    .panel-title-row { gap: 10px; }
    .order-footer { padding-bottom: max(13px,env(safe-area-inset-bottom)); }
    .size-modal { width: 100%; max-height: min(84dvh,760px); border-radius: 22px 22px 0 0; }
    .size-modal .modal-header { padding: 15px 18px 12px; }
    .size-modal .modal-body { padding: 13px 16px; }
    .size-modal-footer { padding-right: 16px; padding-left: 16px; }
}
@media (max-width: 390px) {
    .logo-subtitle { display: none; }
    .logo h1.brand-wordmark { font-size: 19px; }
    .store-nav-link,
    .store-nav button { min-height: 34px; padding: 0 8px; font-size: 9px; }
    .header-user { display: none; }
    .hero-benefits { align-items: flex-start; }
    .hero-benefits span { padding: 6px 8px; font-size: 8px; }
}

/* SouPlastic storefront v2: a search-led catalog with a clear, compact order dock. */
.header { min-height: 66px; }
.main-content { gap: 22px; }
.store-hero {
    min-height: 118px;
    margin-top: 16px;
    padding: 18px 28px;
    border-radius: 20px;
    background: radial-gradient(circle at 88% 16%, rgba(96,226,244,.3), transparent 26%), linear-gradient(115deg,#082b55 0%,#104e8a 58%,#08a6bf 100%);
    box-shadow: 0 12px 28px rgba(8,52,94,.14);
}
.hero-copy h2 { max-width: 680px; font-size: clamp(28px,2.4vw,32px); line-height: 1.06; letter-spacing: -1px; }
.hero-copy p { max-width: 500px; font-size: 13px; }
.hero-benefits { max-width: 245px; }
.section-header { display: block; padding: 24px 0 14px; }
.section-title { font-size: clamp(23px,2vw,28px); letter-spacing: -.7px; }
.section-description { margin-top: 6px; font-size: 13px; }
.catalog-filter-panel {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 12px;
    margin-top: 17px;
    padding: 14px;
    border: 1px solid #e2eaf2;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(17,48,81,.055);
}
.catalog-search {
    min-height: 54px;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid #d7e4ef;
    border-radius: 14px;
    background: #f9fcfe;
    box-shadow: none;
}
.catalog-search:focus-within { border-color: #39a9bd; background: #fff; box-shadow: 0 0 0 4px rgba(18,185,208,.1); }
.catalog-search svg { width: 22px; height: 22px; flex: none; color: #1685a3; }
.catalog-search input { font-size: 15px; }
.catalog-search input::placeholder { color: #8295a9; }
.catalog-category-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 1px 1px 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.catalog-category-row { display: flex; min-width: 0; align-items: center; gap: 8px; }
.catalog-category-row .catalog-category-nav { flex: 1 1 auto; }
.catalog-filter-clear-top { flex: 0 0 auto; min-height: 34px; padding: 0 10px; border-color: #d9e6ef; border-radius: 999px; }
.catalog-filter-clear-top[hidden] { display: none; }
.catalog-category-nav::-webkit-scrollbar { display: none; }
.category-chip {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #dce6ef;
    border-radius: 999px;
    background: #fff;
    color: #4f657b;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.category-chip:hover { border-color: #a6d5de; color: #0d6980; }
.category-chip:active { transform: scale(.97); }
.category-chip.is-active { border-color: #0d7188; background: #0d7188; color: #fff; box-shadow: 0 4px 10px rgba(13,113,136,.16); }
.catalog-advanced-filters { border-top: 1px solid #edf1f5; padding-top: 10px; }
.catalog-advanced-filters summary {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 9px;
    color: #526a80;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    list-style: none;
}
.catalog-advanced-filters summary::-webkit-details-marker { display: none; }
.catalog-advanced-filters summary span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid #dce6ef;
    border-radius: 50%;
    color: #12748c;
    font-size: 16px;
    line-height: 1;
    transition: transform .16s ease;
}
.catalog-advanced-filters[open] summary span { transform: rotate(45deg); }
.catalog-advanced-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto; gap: 10px; align-items: end; padding-top: 12px; }
.catalog-advanced-grid .catalog-filter-clear { min-height: 42px; justify-self: start; }
.carousel-wrapper { margin-top: 4px; }
.carousel-container { mask-image: none; -webkit-mask-image: none; overflow: visible; }
.carousel-track { gap: 17px; padding: 0 0 24px; }
.card-inner { border-color: #e3eaf1; border-radius: 18px; box-shadow: 0 5px 18px rgba(13,45,75,.055); }
.card-inner:hover { transform: translateY(-3px); border-color: #a8d6df; box-shadow: 0 14px 28px rgba(13,70,96,.12); }
.product-image {
    height: auto;
    aspect-ratio: 1.22;
    background: radial-gradient(ellipse at 50% 50%,#fff 0%,#f8fbfd 67%,#eef7f9 100%);
}
.product-img { padding: 10px; object-fit: contain; }
.product-icon { font-size: clamp(48px,5vw,70px); }
.product-badge { top: 12px; left: 12px; padding: 6px 10px; border: 1px solid #cce9dd; background: rgba(249,255,251,.97); color: #207451; font-size: 10px; }
.product-info { padding: 14px 16px 6px; }
.product-category { margin-bottom: 7px; padding: 4px 8px; border-radius: 999px; background: #e9f6f8; color: #167288; font-size: 9px; letter-spacing: .35px; }
.product-name {
    display: -webkit-box;
    min-height: 42px;
    height: auto;
    margin: 0 0 7px;
    overflow: hidden;
    color: #15324d;
    font-size: 15px;
    font-weight: 780;
    line-height: 1.35;
    letter-spacing: -.15px;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.product-name.name-is-uppercase { text-transform: lowercase; }
.product-name.name-is-uppercase::first-letter { text-transform: uppercase; }
.product-help { display: none; }
.product-size-chips { display: flex; min-height: 23px; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.product-size-chips[hidden] { display: none; }
.size-chip { display: inline-flex; min-height: 22px; align-items: center; padding: 0 7px; border: 1px solid #e2eaf0; border-radius: 7px; background: #f7fafb; color: #52697d; font-size: 9px; font-weight: 750; white-space: nowrap; }
.product-action { padding: 11px 16px 15px; }
.add-btn { min-height: 46px; border: 0; border-radius: 12px; background: #125a9b; color: #fff; box-shadow: 0 6px 13px rgba(18,90,155,.14); font-size: 12px; }
.add-btn:hover { background: #0b477d; color: #fff; }
.product-card.selected .card-inner { border-color: #57b7c3; box-shadow: 0 0 0 2px rgba(18,185,208,.12),0 12px 24px rgba(16,81,110,.11); }
.order-panel { border-color: #dce6ed; box-shadow: 0 12px 30px rgba(10,43,72,.08); }
.panel-header { min-height: 76px; padding: 16px 18px; }
.panel-icon { width: 42px; height: 42px; background: linear-gradient(135deg,#0c365f,#0da7bb); }
.order-count { min-width: 30px; height: 30px; background: #e9f6f8; color: #106d82; }
.order-panel.is-empty { height: auto; min-height: 0; }
.order-panel.is-empty .order-items { max-height: none; padding: 0 16px 14px; }
.order-panel.is-empty .empty-state { padding: 12px 8px 16px; border-top: 1px solid #edf2f6; }
.order-panel.is-empty .empty-icon { display: none; }
.order-panel.is-empty .order-footer { display: none; }
.size-modal { width: min(600px,100%); max-height: min(88dvh,760px); }
.size-modal .modal-handle,
.size-modal .modal-header,
.size-modal-footer { flex: 0 0 auto; }
.size-modal .modal-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.size-list { gap: 7px; padding-bottom: 14px; }
.size-row { min-height: 58px; padding: 8px 12px; }
.size-controls { gap: 6px; }
.size-btn { width: 40px; height: 40px; }
.size-modal-footer { position: relative; z-index: 1; padding: 10px 22px max(14px,env(safe-area-inset-bottom)); background: #fff; }
.save-qty-btn { min-height: 48px; }

@media (min-width: 768px) and (max-width: 1199px) {
    .main-content { display: block; padding: 0 24px 40px; }
    .catalog-advanced-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .carousel-track { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .order-panel { margin: 10px 0 24px; }
}
@media (max-width: 767px) {
    .header { min-height: 60px; padding: 7px 13px; }
    .main-content { padding: 0 0 94px; }
    .store-hero { display: block; min-height: 0; margin: 9px 12px 2px; padding: 12px 15px; border-radius: 17px; }
    .hero-copy h2 { max-width: 450px; font-size: clamp(21px,6vw,25px); line-height: 1.12; letter-spacing: -.65px; }
    .hero-copy p { max-width: 450px; margin-top: 5px; font-size: 11px; line-height: 1.4; }
    .hero-benefits { display: none; }
    .section-header { padding: 17px 13px 10px; }
    .section-title { font-size: 21px; }
    .section-description { font-size: 11px; }
    .catalog-filter-panel { gap: 10px; margin-top: 12px; padding: 10px; border-radius: 15px; }
    .catalog-search { min-height: 50px; padding: 0 12px; border-radius: 12px; }
    .catalog-search input { font-size: 14px; }
    .catalog-category-nav { gap: 7px; margin: 0 -1px; }
    .category-chip { min-height: 36px; padding: 0 13px; font-size: 11px; }
    .catalog-advanced-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .catalog-advanced-grid .catalog-filter-clear { grid-column: 1 / -1; min-height: 36px; }
    .carousel-wrapper { margin-top: 0; }
    .carousel-track { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 0 12px 16px; overflow: visible; scroll-snap-type: none; }
    .product-card { flex: none; min-width: 0; max-width: none; }
    .card-inner { border-radius: 15px; }
    .product-image { aspect-ratio: 1.13; }
    .product-img { padding: 7px; }
    .product-badge { top: 7px; left: 7px; padding: 4px 7px; font-size: 8px; }
    .product-info { padding: 9px 10px 2px; }
    .product-category { margin-bottom: 5px; padding: 3px 6px; font-size: 8px; }
    .product-name { min-height: 38px; margin-bottom: 4px; font-size: 12px; line-height: 1.35; }
    .product-size-chips { min-height: 20px; gap: 4px; margin-top: 6px; }
    .size-chip { min-height: 19px; padding: 0 5px; font-size: 8px; }
    .product-action { padding: 7px 9px 10px; }
    .add-btn { min-height: 40px; padding: 7px 5px; font-size: 10px; }
    .order-panel { top: auto; right: 0; bottom: 0; left: 0; z-index: 320; height: min(72dvh,520px); border-radius: 18px 18px 0 0; }
    .panel-header { min-height: 62px; padding: 11px 15px; }
    .order-panel.is-empty:not(.expanded) { right: 12px; bottom: max(10px,env(safe-area-inset-bottom)); left: 12px; height: auto; transform: none; border-radius: 16px; box-shadow: 0 8px 24px rgba(10,43,72,.17); }
    .order-panel.is-empty:not(.expanded) .panel-handle,
    .order-panel.is-empty:not(.expanded) .order-items,
    .order-panel.is-empty:not(.expanded) .order-footer { display: none; }
    .order-panel.is-empty:not(.expanded) .panel-header { min-height: 60px; }
    .order-panel.is-empty.expanded { height: min(62dvh,440px); transform: none; }
    .order-panel.is-empty.expanded .order-items { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .order-panel.is-empty.expanded .order-footer { display: none; }
    .size-modal { width: 100%; max-height: min(87dvh,760px); border-radius: 20px 20px 0 0; }
    .size-modal .modal-header { padding: 12px 16px 10px; }
    .size-modal .modal-body { padding: 11px 14px 16px; }
    .size-minimum-note { margin-bottom: 9px; padding: 9px 11px; font-size: 11px; }
    .size-row { min-height: 54px; padding: 7px 9px; }
    .size-label { font-size: 13px; }
    .size-btn { width: 38px; height: 38px; }
    .size-modal-footer { padding-right: 14px; padding-left: 14px; }
    #sizeModal { align-items: flex-end; padding: 0; }
}
@media (min-width: 768px) {
    #sizeModal { align-items: center; padding: 24px; }
    #sizeModal .size-modal { width: min(600px,100%); max-height: min(88dvh,760px); border-radius: 22px; }
    #sizeModal .modal-handle { display: none; }
}
@media (max-width: 390px) {
    .main-content { padding-bottom: 90px; }
    .store-hero { padding: 15px 16px; }
    .product-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .category-chip, .card-inner, .product-img, .order-panel { transition-duration: .01ms !important; }
}

/* Catalog bag photos: remove the tinted frame and give the product more room. */
.product-image { background: #fff !important; }
.product-img { padding: 0 !important; object-fit: contain; transform: scale(1.2); transform-origin: center; }
.card-inner:hover .product-img { transform: scale(1.2); }

/* Filtros sempre visíveis no catálogo. */
.catalog-filter-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
}
.catalog-filter-panel .catalog-search { width: 100%; }
.catalog-category-state { display: none !important; }
.catalog-category-row {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid #edf1f5;
}
.catalog-category-group { display: grid; min-width: 0; flex: 1 1 auto; gap: 7px; }
.catalog-filter-caption { color: #74849a; font-size: 9px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.catalog-category-nav { flex-wrap: wrap; overflow: visible; }
.catalog-filter-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.catalog-filter-controls .catalog-filter { display: grid; gap: 5px; font-size: 9px; }
.catalog-filter-controls .catalog-filter select { width: 100%; height: 44px; margin: 0; padding: 0 30px 0 12px; border: 1px solid #dce6f1; border-radius: 12px; background-color: #fff; color: #294562; font: inherit; font-size: 12px; font-weight: 650; }
.catalog-filter-controls .catalog-filter select:focus-visible { outline: 3px solid rgba(16,174,190,.16); border-color: #79b6d2; }
.catalog-filter-clear-top { align-self: flex-end; }
.catalog-filter-clear-top[hidden] { display: none; }
@media (max-width: 767px) {
    .catalog-filter-panel { gap: 10px; margin-top: 12px; padding: 11px; border-radius: 15px; }
    .catalog-category-row { align-items: flex-start; flex-direction: column; gap: 7px; }
    .catalog-category-nav { flex-wrap: nowrap; overflow-x: auto; margin: 0 -1px; padding: 1px 1px 4px; }
    .catalog-filter-clear-top { min-height: 32px; }
    .catalog-filter-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 8px; }
    .catalog-filter-controls .catalog-filter:last-child { grid-column: 1 / -1; }
    .catalog-filter-controls .catalog-filter { font-size: 8px; }
    .catalog-filter-controls .catalog-filter select { height: 40px; padding-left: 9px; font-size: 11px; }
}