/* Site-wide layout guardrails for narrow and resized viewports. */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
button, .red-btn, .filter-btn, .add-btn, .play-again-btn, .shopier-cancel,
.modal-btn-row button { border-radius: 12px !important; }
.header-icons #auth-buttons-group a:last-child { border-radius: 999px !important; }
.cat-card, .prod-card, .scenario-card { border-radius: 14px; overflow: hidden; }
.cat-card img, .prod-img-box img, .scenario-card img { border-radius: 10px; }
#category-grid:not(:empty) { min-height: 0 !important; }
#scroll-spray { display: none !important; }
.image-upload-dropzone {
    display: grid; place-items: center; gap: 8px; min-height: 150px; padding: 22px;
    border: 1px dashed #756448; border-radius: 12px; background: rgba(197,168,128,.06);
    color: #e8dcc9; text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
}
.image-upload-dropzone:hover, .image-upload-dropzone.is-dragging { border-color: #c5a880; background: rgba(197,168,128,.13); }
.image-upload-dropzone i { color: #c5a880; font-size: 1.7rem; }
.image-upload-dropzone p, .image-upload-dropzone small { margin: 0; }
.image-upload-dropzone small { color: #888; }
.image-preview-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.image-preview-row[hidden] { display: none; }
.image-preview-row img { width: 74px; height: 74px; object-fit: contain; padding: 5px; border: 1px solid #333; border-radius: 10px; background: #080808; }
.image-preview-name { min-width: 0; flex: 1; overflow-wrap: anywhere; color: #ccc; font-size: .82rem; }
.image-clear-btn { flex: 0 0 auto; border: 1px solid #574444; border-radius: 999px; padding: 8px 12px; background: transparent; color: #ddd; cursor: pointer; }
.image-upload-status { display: block; min-height: 1.2em; margin-top: 7px; color: #888; font-size: .78rem; }
.image-upload-status.is-error { color: #ff7b7b; }
.discount-toggle-label { display: flex !important; align-items: center; gap: 9px; color: #e8dcc9 !important; cursor: pointer; }
.discount-toggle-label input { width: 18px !important; height: 18px; accent-color: #e60000; }
.discount-fields { display: grid; gap: 6px; padding: 14px; border: 1px solid rgba(197,168,128,.35); border-radius: 12px; background: rgba(197,168,128,.06); }
.discount-fields[hidden] { display: none; }
.discount-ribbon { position: absolute; z-index: 3; top: 14px; left: -8px; padding: 8px 11px 9px 15px; background: linear-gradient(135deg,#ff4545,#c90000); color: #fff; font-weight: 800; line-height: 1.05; box-shadow: 0 4px 12px rgba(0,0,0,.35); clip-path: polygon(0 0,100% 0,100% 100%,14% 100%,0 78%); }
.discount-ribbon strong { display: block; font-size: clamp(.62rem, 1vw, .78rem); white-space: nowrap; }
.price-stack { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px; }
.price-old { color: #999; font-size: .86em; text-decoration: line-through; text-decoration-thickness: 2px; }
.price-sale { color: #ff5555 !important; font-weight: 800; text-shadow: 0 0 14px rgba(230,0,0,.22); }
.cart-discount-badge { display: inline-block; margin-top: 4px; padding: 4px 7px; border-radius: 999px; background: #b90000; color: #fff; font-size: .66rem; font-weight: 800; white-space: nowrap; }
#prod-modal .modal-content {
    width: min(820px, calc(100vw - 32px));
    max-width: 820px;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #756448 #111;
}
#prod-modal .modal-content::-webkit-scrollbar { width: 10px; }
#prod-modal .modal-content::-webkit-scrollbar-thumb { background: #756448; border: 3px solid #111; border-radius: 99px; }
#prod-modal .modal-content::-webkit-scrollbar-track { background: #111; }
#cat-modal.modal, #prod-modal.modal {
    z-index: 10010;
    align-items: flex-start;
    overflow-y: auto;
    padding: max(28px, 5vh) 16px 24px;
}
#cat-modal .modal-content, #prod-modal .modal-content {
    position: relative;
    max-height: calc(100vh - 52px);
    max-height: calc(100dvh - 52px);
    overflow-y: auto;
}
.modal-close-btn {
    position: absolute;
    z-index: 5;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50% !important;
    background: #2b2b2b;
    color: #fff;
    font: 400 36px/1 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.modal-close-btn:hover, .modal-close-btn:focus-visible { background: #e60000; border-color: #ff6666; outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; }
#cat-modal .modal-content h3, #prod-modal .modal-content h3 { padding: 4px 58px 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
main, section, article, aside, header, footer, nav, form,
.container, .container-doc, .dashboard, .panel-card { min-width: 0; }
.cart-item, .prod-info, .panel-card, .prose { overflow-wrap: anywhere; }
.game-score, .price, .cart-total span, .cart-badge,
.cart-quantity-control span, .product-quantity input, .cart-count,
[data-numeric], .numeric-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.game-score, .price, .cart-badge, .cart-quantity-control, .product-quantity { flex-shrink: 0; }

@media (max-width: 1024px) {
    body > header { gap: clamp(8px, 1.4vw, 16px); padding: 16px clamp(14px, 3vw, 32px); }
    body > header > .header-icons { gap: clamp(8px, 1.2vw, 14px); min-width: 0; }
    body > header #auth-buttons-group { gap: 8px !important; min-width: 0; }
    body > header #auth-buttons-group a {
        font-size: clamp(.66rem, .9vw, .82rem) !important;
        padding: 5px clamp(7px, 1vw, 12px) !important;
    }
    body > header #auth-buttons-group a:first-child { padding: 0 !important; }
}

@media (max-width: 900px) {
    .dashboard { align-items: stretch; }
    .panel-card { width: 100%; }
    .site-header { gap: 12px; }
    .header-nav { gap: 14px; }
}

@media (max-width: 768px) {
    /* Keep the edge handle visible and leave its width exposed while the drawer is closed. */
    #cart-edge-toggle { display: flex !important; flex: 0 0 44px; width: 44px; }
    #cart-shell { width: min(434px, 100vw); transform: translateX(calc(100% - 44px)); }
    #cart-drawer { width: min(390px, calc(100vw - 44px)); flex: 0 0 min(390px, calc(100vw - 44px)); }
}

@media (max-width: 600px) {
    .footer-cols { grid-template-columns: minmax(0, 1fr); }
    .footer-bottom { align-items: flex-start; }
    .contact-grid, .dashboard, .panel-card, .form-group,
    .modal-content, .page-hero, .container, .container-doc { min-width: 0; }
    .category-choices, .category-choice, .category-choices label { min-width: 0; }
    .category-choices label { overflow-wrap: anywhere; }
    .admin-header { flex-wrap: wrap; }
    .admin-header h1 { min-width: 0; }
    .admin-header h1 span { display: block; }
    .form-group input, .form-group select, .form-group textarea { min-width: 0; }
    .modal-btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .modal-btn-row button { min-width: 0; padding-inline: 10px; }
    .filter-bar { padding-inline: 16px; }
    .filter-btn { max-width: 100%; white-space: normal; }
    .cart-item { min-width: 0; }
    .cart-item > :first-child { min-width: 0; overflow-wrap: anywhere; }
    .cart-item-controls { flex-wrap: wrap; }
    .cart-total { gap: 10px; }
    .game-head { flex-wrap: wrap; }
    .game-head h3 { flex: 1 1 auto; min-width: 0; }
    .game-score { flex: 0 0 auto; }
    .game-sprays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .game-spray-btn { min-width: 0; overflow-wrap: anywhere; }
    .prod-bottom { min-width: 0; }
    .product-quantity { white-space: nowrap; }
}

@media (max-width: 380px) {
    .site-header { flex-wrap: wrap; }
    .site-header .logo { position: static; transform: none; margin-left: auto; }
    .site-header .burger-menu { flex: 0 0 42px; }
    .site-header .header-nav { width: 100%; justify-content: center; flex-wrap: wrap; }
    .category-choices { grid-template-columns: minmax(0, 1fr); }
    .modal-btn-row { grid-template-columns: minmax(0, 1fr); }
}