:root {
    --brand: #0f766e;
    --brand-dark: #075f58;
    --accent: #fbbf24;
    --ink: #17212b;
    --muted: #65717d;
    --line: #e4e8ec;
    --surface: #ffffff;
    --background: #f4f7f7;
    --danger: #b42318;
    font-family: Tahoma, Arial, sans-serif;
    color: var(--ink);
    background: var(--background);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 90% 0, rgba(15, 118, 110, .12), transparent 34%),
        var(--background);
}

button, input, textarea { font: inherit; }
button { touch-action: manipulation; }

.store-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: max(18px, env(safe-area-inset-top)) 18px 16px;
    background: linear-gradient(135deg, var(--brand-dark), var(--brand));
    color: white;
}

.brand-mark {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 15px;
    background: var(--accent);
    color: #15302e;
    font-size: 25px;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.store-header h1 { margin: 0; font-size: 1.2rem; }
.store-header p { margin: 5px 0 0; opacity: .82; font-size: .88rem; }

main { width: min(100%, 980px); margin: 0 auto; padding: 20px 14px calc(96px + env(safe-area-inset-bottom)); }
.store-whatsapp {
    position: fixed;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #087f43;
    color: white;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 4px 16px #0003;
}
.store-whatsapp:hover { background: #066735; }
body.modal-open .store-whatsapp { display: none; }

.catalog-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 12px;
    margin-bottom: 16px;
}

.catalog-head h2 { margin: 0; font-size: 1.35rem; }
.catalog-head p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }

.count-pill {
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #d9f2ef;
    color: var(--brand-dark);
    text-align: center;
    font-weight: 800;
}

.store-message {
    padding: 24px;
    text-align: center;
    color: var(--muted);
    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.store-message:empty { display: none; }

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-card {
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(23, 33, 43, .06);
}

.product-card img,
.product-image-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    object-fit: contain;
    background: linear-gradient(145deg, #e7efee, #f8fbfa);
    color: var(--brand);
    font-size: 2rem;
}

.product-body { padding: 12px; }
.product-card img { height: auto; }
.product-image-placeholder { font-size: .9rem; }
.product-body h3 { margin: 0; min-height: 48px; font-size: 1rem; line-height: 1.5; }
.product-description { min-height: 38px; margin: 5px 0 10px; color: var(--muted); font-size: .9rem; line-height: 1.6; white-space:pre-line; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.product-detail-description { white-space:pre-line; overflow-wrap:anywhere; }
.product-price { display: block; color: var(--brand-dark); font-size: 1.05rem; margin-bottom: 10px; }

.order-button,
.submit-button,
.success-dialog button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 12px;
    background: var(--brand);
    color: white;
    font-weight: 800;
    cursor: pointer;
}

.order-button:active,
.submit-button:active { transform: translateY(1px); }

.sheet { position: fixed; inset: 0; z-index: 50; display: none; }
.sheet.open { display: block; }
.sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(9, 20, 25, .58); }

.sheet-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(100%, 620px);
    max-height: 94vh;
    max-height: 94dvh;
    margin: auto;
    overflow-y: auto;
    padding: 10px 18px max(24px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    background: white;
    animation: rise .2s ease-out;
}

@keyframes rise { from { transform: translateY(24px); opacity: .5; } }

.sheet-handle { width: 44px; height: 5px; margin: 0 auto 4px; border-radius: 99px; background: #d9dde0; }
.close-button { position: absolute; top: 14px; left: 16px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f0f2f3; color: #333; font-size: 1.6rem; cursor: pointer; }

.selected-product { display: flex; align-items: center; gap: 12px; padding: 18px 0 14px; border-bottom: 1px solid var(--line); }
.selected-product img { width: 76px; height: 76px; object-fit: cover; border-radius: 14px; background: #edf2f1; }
.selected-product span { color: var(--muted); font-size: .78rem; }
.selected-product h2 { margin: 3px 0 5px; font-size: 1.12rem; }
.selected-product strong { color: var(--brand); }

#orderForm { display: grid; gap: 9px; padding-top: 15px; }
#orderForm label { font-weight: 700; font-size: .9rem; }
#orderForm input,
#orderForm select,
#orderForm textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 13px;
    border: 1px solid #cfd6da;
    border-radius: 11px;
    background: white;
    color: var(--ink);
    font-size: 16px;
    outline: none;
}
#orderForm input:focus,
#orderForm textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 118, 110, .12); }

.quantity-row { display: flex; align-items: center; justify-content: space-between; }
.quantity-control { display: grid; grid-template-columns: 42px 45px 42px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; }
.quantity-control button { height: 42px; border: 0; background: #edf7f6; color: var(--brand-dark); font-size: 1.3rem; font-weight: 900; }
.quantity-control output { text-align: center; font-weight: 900; }

.order-summary { display: grid; gap: 8px; margin-top: 6px; padding: 13px; border-radius: 13px; background: #f4f8f8; }
.order-summary > div { display: flex; justify-content: space-between; gap: 12px; }
.order-summary .grand-total { padding-top: 9px; border-top: 1px dashed #aab8b7; color: var(--brand-dark); font-size: 1.08rem; }
.form-error { min-height: 20px; margin: 0; color: var(--danger); font-size: .86rem; }
.submit-button[disabled] { opacity: .62; cursor: wait; }

.success-dialog { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px; background: rgba(9, 20, 25, .7); }
.success-dialog.open { display: grid; }
.success-dialog section { width: min(100%, 390px); padding: 28px 22px; border-radius: 22px; background: white; text-align: center; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); }
.success-icon { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: 2rem; font-weight: 900; }
.success-dialog h2 { margin: 14px 0 6px; }
.success-dialog p { margin: 0 0 5px; color: var(--muted); }
.success-dialog > section > strong { display: block; color: var(--brand); font-size: 1.25rem; direction: ltr; }
.success-total { margin: 18px 0; padding: 12px; border-radius: 12px; background: #f4f8f8; }

body.modal-open { overflow: hidden; }

.product-image-button { display:block; width:100%; padding:0; border:0; background:white; cursor:pointer; }
.product-gallery { padding-top:40px; }
#zoomProduct { display:block; width:100%; padding:0; border:0; background:#f8fafb; cursor:zoom-in; border-radius:16px; }
#zoomProduct img { display:block; width:100%; height:220px; object-fit:contain; }
.gallery-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:10px 0; }
.gallery-thumbnails button { flex:0 0 56px; padding:2px; border:2px solid transparent; background:white; border-radius:8px; cursor:pointer; }
.gallery-thumbnails button[aria-pressed="true"] { border-color:var(--brand); }
.gallery-thumbnails img { display:block; width:48px; height:48px; object-fit:contain; }
.product-detail-description { white-space:pre-line; line-height:1.7; }
.specifications { display:grid; grid-template-columns:auto 1fr; gap:8px 20px; }
.specifications dt { color:var(--muted); } .specifications dd { margin:0; overflow-wrap:anywhere; }
.store-information { margin-top:24px; padding:18px; border:1px solid var(--line); border-radius:16px; background:white; line-height:1.7; }
.store-information p { white-space:pre-line; } .store-information h3 { font-size:1rem; margin-bottom:4px; }
.store-information a { color:var(--brand-dark); }
.privacy-note { color:var(--muted); font-size:.88rem; line-height:1.7; margin-top:20px; }
.tracking-notice { margin-bottom:20px; padding:16px; border:1px solid var(--line); border-radius:14px; background:white; }
.tracking-notice h2 { margin:0; font-size:1rem; }
.tracking-notice p { font-size:.88rem; line-height:1.7; }
.tracking-notice > div { display:flex; flex-wrap:wrap; gap:10px; }
.tracking-notice button { flex:1; min-height:44px; padding:8px 12px; border:1px solid var(--brand); border-radius:8px; color:var(--brand-dark); background:white; cursor:pointer; }
.tracking-preferences { display:block; margin:12px 0 4px; padding:8px 0; border:0; background:transparent; color:var(--brand-dark); text-decoration:underline; cursor:pointer; }
.order-tracking-preferences { margin:8px 0; padding:12px; }
.order-tracking-preferences summary { cursor:pointer; font-size:.88rem; }
.checkout-footer { position:sticky; bottom:-24px; background:white; padding:12px 0 max(24px, env(safe-area-inset-bottom)); }
.image-viewer { width:min(96vw,1000px); max-height:95dvh; padding:45px 10px 10px; border:0; border-radius:14px; }
.image-viewer::backdrop { background:#000c; }
.image-viewer img { display:block; width:100%; max-height:80dvh; object-fit:contain; }
.image-viewer button { position:absolute; top:4px; left:10px; border:0; background:#eee; border-radius:50%; width:38px; height:38px; font-size:1.8rem; }
.bot-field { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); pointer-events:none; }
.count-pill:empty { display:none; }
.store-categories { display:flex; gap:12px; margin:16px 0; }
.store-categories button { flex:1; padding:14px; min-height:48px; border:1px solid var(--brand); border-radius:12px; background:white; color:var(--brand-dark); font:inherit; cursor:pointer; }
.store-categories button[aria-pressed="true"] { background:var(--brand); color:white; font-weight:700; }
.category-hint, .delivery-hint { color:var(--muted); font-size:.85rem; line-height:1.6; }
.category-hint { margin:-6px 0 16px; }
.tracking-details { margin:8px 0 12px; font-size:.85rem; }
.tracking-details summary { cursor:pointer; color:var(--brand-dark); }
.product-purchase-info { padding:12px; background:#f4f8f8; border-radius:12px; line-height:1.7; }
.product-purchase-info p { margin:4px 0; white-space:pre-line; overflow-wrap:anywhere; font-size:.9rem; }
.product-whatsapp { display:inline-flex; align-items:center; min-height:44px; color:#087f43; font-weight:700; font-size:.9rem; }
.product-whatsapp[aria-disabled="true"] { opacity:.6; }
.logo-preview { display:flex; align-items:center; gap:12px; padding:10px; margin-top:10px; border:1px solid var(--line); border-radius:10px; background:white; }
.logo-preview img { width:76px; height:76px; flex:none; object-fit:contain; background:#f4f7f7; }
.logo-preview span { min-width:0; overflow-wrap:anywhere; font-size:.85rem; }
.logo-status { font-size:.85rem; line-height:1.6; margin:8px 0; color:var(--muted); }
.logo-status:empty { display:none; }
.logo-status.error { color:var(--danger); }
.order-sending progress { width:100%; height:6px; accent-color:var(--brand); }
.order-sending p { margin:6px 0 10px; font-size:.85rem; line-height:1.5; color:var(--brand-dark); }
.office-customization { min-width:0; border:1px solid #bdd8d3; padding:14px; border-radius:12px; margin:14px 0; background:#f2faf8; }
.office-customization legend { font-weight:700; color:var(--brand-dark); }
.office-customization small { display:block; line-height:1.7; color:#526660; }
[hidden] { display:none!important; }
button:focus-visible, a:focus-visible { outline:3px solid #d99000; outline-offset:3px; }
@media (prefers-reduced-motion: reduce) { * { animation:none!important; scroll-behavior:auto!important; } }
@media (max-width:360px) { .products-grid { gap:8px; } .product-body { padding:9px; } }

@media (min-width: 650px) {
    .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    main { padding-inline: 22px; }
    .product-body { padding: 15px; }
}

@media (min-width: 900px) {
    .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}