/* Noto Sans, self-hosted from fonts/ - not pulled from Google.
   Hotlinking fonts.gstatic.com sends every visitor's IP to a third party
   on every page load, which German courts have found breaches GDPR, and
   it makes the store's typography depend on someone else's uptime.

   One variable file per subset covers weight 100-900, so bold costs no
   extra request. unicode-range means a page of ordinary English only
   ever fetches the 36KB latin file; latin-ext is bigger but downloads
   only if a page actually contains those characters. Anything outside
   these ranges falls through to the system stack, which is correct.

   Files came from Google Fonts' own CDN (Noto Sans v2.015) and are SIL
   Open Font License 1.1 - see fonts/OFL.txt, which must ship with them.
   To update: refetch the same URLs and replace the files; the rules
   below don't change. */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Italic is latin only. The store uses <em> in about six places, and a
   latin-ext italic file is 189KB to serve them; the browser synthesises
   an oblique from the upright face for those glyphs instead. */
@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/noto-sans-latin-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: dark only;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #e0e0e0;
    background: #1a1a1a;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: #000000;
    color: white;
    padding: 15px 0;
    position: sticky;
    top: 0;
    /* No z-index - adding one would trap the position:fixed mobile nav
       inside the header's stacking context, and the overlay would win
       over nav links on click. */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.logo a {
    color: white;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo a img {
    max-height: 50px;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Navigation */
nav {
    display: flex;
    align-items: center;
}

nav>a,
nav>.dropdown>.dropdown-toggle {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background 0.3s;
    display: inline-block;
}

nav>a:hover,
nav>.dropdown:hover>.dropdown-toggle {
    background: #333;
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-toggle .arrow {
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #2a2a2a;
    min-width: 200px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    padding: 10px 0;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: #e0e0e0;
    text-decoration: none;
    transition: background 0.2s;
}

.dropdown-menu a:hover {
    background: #3a3a3a;
}

.dropdown-menu .view-all {
    border-top: 1px solid #444;
    margin-top: 10px;
    padding-top: 15px;
    color: #5dade2;
    font-weight: 500;
}

/* Submenu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .has-submenu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-submenu .arrow {
    font-size: 10px;
}

.submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background: #2a2a2a;
    min-width: 180px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    padding: 10px 0;
}

/* Desktop hover */
@media (min-width: 769px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown-submenu:hover .submenu {
        display: block;
    }
}

/* Mobile Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1001;
}

.mobile-overlay.active {
    display: block;
}

body.mobile-menu-open {
    overflow: hidden;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
        z-index: 1003;
    }

    nav {
        position: fixed;
        top: 0;
        right: -280px;
        width: 280px;
        height: 100vh;
        background: #1a1a1a;
        flex-direction: column;
        align-items: stretch;
        padding: 70px 0 20px;
        transition: right 0.3s;
        z-index: 1002;
        overflow-y: auto;
    }

    nav.active {
        right: 0;
    }

    nav>a,
    nav>.dropdown>.dropdown-toggle {
        color: white;
        padding: 15px 20px;
        border-radius: 0;
        border-bottom: 1px solid #333;
    }

    .dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        display: none;
        background: #252525;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    .dropdown-menu.active {
        display: block;
    }

    .dropdown-menu a {
        color: white;
        padding: 12px 20px 12px 35px;
        border-bottom: 1px solid #333;
    }

    .dropdown-menu a:hover {
        background: #333;
    }

    .submenu {
        position: static;
        display: none;
        background: #1f1f1f;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
    }

    .submenu.active {
        display: block;
    }

    .submenu a {
        padding-left: 50px;
        color: white;
    }

    .dropdown-toggle .arrow {
        transition: transform 0.3s;
    }

    .dropdown-toggle.active .arrow {
        transform: rotate(180deg);
    }

    .has-submenu.active .arrow {
        transform: rotate(90deg);
    }
}

/* Main */
main {
    padding: 30px 0 60px 0;
    min-height: calc(100vh - 150px);
}

main.container {
    padding: 30px 20px 30px 20px;
}

/* Footer */
footer {
    background: #000000;
    color: white;
    padding: 20px 0;
    text-align: center;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.product-card {
    background: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: #1a1a1a;
}

.product-card .info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card h3 {
    margin-bottom: 5px;
    font-size: 15px;
    color: #fff;
    height: 50px;
    overflow: hidden;
    line-height: 1.35;
}

.variant-count {
    display: inline-block;
    color: #5dade2;
    font-size: 12px;
    margin-bottom: 8px;
}

.product-card .price {
    color: #2ecc71;
    font-size: 16px;
    font-weight: bold;
    margin-top: auto;
    margin-bottom: 10px;
}

.product-card .category {
    color: #888;
    font-size: 13px;
    margin-bottom: 5px;
}

/* Categories Grid */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.category-card {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 12px 15px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    text-decoration: none;
    color: #e0e0e0;
    transition: transform 0.3s;
    display: block;
}

.category-card:hover {
    transform: translateY(-5px);
}

/* Buttons */
/* Centred by the flex algorithm, not by inline-box metrics. An <a> and a
   <button> with the same class disagree about baseline, padding box and
   default font, so inline-block left the label sitting high in some
   buttons and not others - visible on the cart's Remove button. Flex
   makes the centring explicit and identical for both elements, with or
   without an icon beside the text.

   admin.css already did exactly this for .actions .btn; this is the same
   fix promoted to the base class so it isn't re-solved per page. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-family: inherit;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.3s;
    text-align: center;
    vertical-align: middle;
    line-height: 1.2;
    box-sizing: border-box;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
}

.btn-success {
    background: #27ae60;
    color: white;
}

.btn-success:hover {
    background: #219a52;
}

.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

/* Caution actions - "sign this admin out", and anything else that is
   disruptive without being destructive. These colours were written
   inline on the one button that needed them, which meant it had no hover
   state at all while the buttons either side of it did. */
.btn-warning {
    background: #7f5a00;
    color: #ffd700;
}

.btn-block {
    display: flex;
    width: 100%;
    text-align: center;
}

/* Forms */
.form-container {
    max-width: 400px;
    margin: 50px auto;
    background: #2a2a2a;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.form-container h2 {
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #ccc;
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #444;
    border-radius: 5px;
    font-size: 14px;
    background: #333;
    color: #e0e0e0;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #777;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #3498db;
}

.form-group textarea {
    height: 100px;
    resize: vertical;
}

/* Messages */
.message {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.message.success {
    background: #1e4620;
    color: #7dcea0;
    border: 1px solid #27ae60;
}

.message.error {
    background: #4a1c1c;
    color: #f1948a;
    border: 1px solid #e74c3c;
}

/* Neither success nor failure - "here's what happens next". Used where
   the page deliberately declines to say whether the thing worked, which
   green would claim on its behalf: the password reset form answers the
   same way whether or not the address has an account. */
.message.info {
    background: #17303f;
    color: #a9cde4;
    border: 1px solid #3498db;
}

/* Cart */
.cart-table {
    width: 100%;
    background: #2a2a2a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.cart-table th,
.cart-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #3a3a3a;
    color: #e0e0e0;
}

.cart-table th {
    background: #333;
    color: #fff;
}

.cart-table img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
}

.cart-total {
    background: #2a2a2a;
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: right;
}

.cart-total h3 {
    margin-bottom: 15px;
    color: #fff;
}

/* Product Detail */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #2a2a2a;
    padding: 10px 30px 30px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.product-detail img {
    width: 100%;
    border-radius: 10px;
}

.product-detail h1 {
    margin-bottom: 5px;
    color: #fff;
}

.product-detail .price {
    color: #2ecc71;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
    line-height: 1;
}

.product-detail .description {
    margin-bottom: 5px;
    color: #aaa;
}

.quantity-input {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}

.quantity-input input {
    width: 50px;
    padding: 5px;
    text-align: center;
    border: 1px solid #444;
    border-radius: 5px;
    background: #333;
    color: #e0e0e0;
}

/* "Last purchased Sep 9, 2026" on the product page. Deliberately quiet -
   it's context, not a sales pitch, and it sits directly under the
   product name. The order link only renders for staff. */
.last-purchased {
    color: #8a8a8a;
    font-size: 13px;
    margin: 0 0 10px;
}

.last-purchased a {
    color: #3498db;
    margin-left: 6px;
}

/* Add to Cart / Buy Now / View Cart. These were bare inline-block
   siblings, so an <a> and a <button> with different intrinsic heights
   sat on the same text baseline at visibly different vertical offsets.
   A flex row aligns them by box instead, and wraps rather than
   overflowing on a narrow screen. inline-flex, not flex, so the row
   still sits beside the quantity input the way it always did. */
.cart-actions {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

/* Orders */
.order-card {
    background: #2a2a2a;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.order-card .order-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #3a3a3a;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.order-status {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.order-status.pending {
    background: #5a4a00;
    color: #ffd700;
}

.order-status.paid {
    background: #1e4620;
    color: #2ecc71;
}

.order-status.confirmed {
    background: #003366;
    color: #66b3ff;
}

.order-status.shipped {
    background: #1e4620;
    color: #7dcea0;
}

.order-status.delivered {
    background: #0a3d3d;
    color: #5dade2;
}

.order-status.cancelled {
    background: #4a1c1c;
    color: #f1948a;
}

/* The app writes 'canceled' with one L (admin/order-detail.php's status
   list, and orders.php echoes the raw status as the class), while the
   rule above has two. So cancelled orders were rendering as an unstyled
   pill. Both spellings are defined rather than renaming one, because
   existing rows may hold either. */
.order-status.canceled {
    background: #4a1c1c;
    color: #f1948a;
}

/* refunded and archived are both settable in the admin and neither had a
   rule at all - found while checking how an order with a refund displays.
   Like every other status badge these set their own background AND text,
   so they stay legible on any theme. */
.order-status.refunded {
    background: #3a2a4a;
    color: #d7a8e8;
}

.order-status.archived {
    background: #3a3a3a;
    color: #aaa;
}

/* Page Title */
.page-title {
    margin-bottom: 30px;
}

.page-title h1 {
    font-size: 28px;
    color: #fff;
}

/* Subcategories */
.category-card-wrapper {
    background: #2a2a2a;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.category-card-wrapper .category-card {
    border-radius: 0;
    box-shadow: none;
}

.subcategories {
    padding: 15px;
    border-top: 1px solid #3a3a3a;
}

.subcategory-link {
    display: inline-block;
    padding: 5px 10px;
    margin: 3px;
    background: #3a3a3a;
    border-radius: 20px;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 13px;
}

.subcategory-link:hover {
    background: #3498db;
    color: white;
}

/* Links.
   :not(.btn) because a button that happens to be an <a> is not a link.
   `a:hover` outranks `.btn-primary`'s own colour on specificity, so
   without this the label of every link-button changed colour on hover
   while <button> elements right beside it did not - Edit greying while
   Logout and Delete stayed put. */
a:not(.btn) {
    color: #5dade2;
}

a:not(.btn):hover {
    color: #85c1e9;
}

/* Responsive */
@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
    }

    /* Responsive tables */
    .cart-table,
    .responsive-table {
        display: block;
    }

    .cart-table thead,
    .responsive-table thead {
        display: none;
    }

    .cart-table tbody,
    .responsive-table tbody {
        display: block;
    }

    .cart-table tr,
    .responsive-table tbody tr {
        display: block;
        margin-bottom: 15px;
        background: #2a2a2a;
        border-radius: 10px;
        padding: 15px;
        border: 1px solid #3a3a3a;
    }

    .cart-table td,
    .responsive-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #3a3a3a;
        text-align: right;
    }

    .cart-table td:first-child,
    .responsive-table tbody td:first-child {
        display: block;
        text-align: left;
    }

    .cart-table td:last-child,
    .responsive-table tbody td:last-child {
        border-bottom: none;
    }

    .cart-table td::before,
    .responsive-table tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #888;
        text-align: left;
        padding-right: 15px;
    }

    .cart-table td:first-child::before,
    .responsive-table tbody td:first-child::before {
        content: none;
    }

    .cart-table img {
        width: 50px;
        height: 50px;
    }

    .cart-total {
        text-align: left;
    }

    /* Order detail tfoot responsive */
    .responsive-table tfoot {
        display: block;
    }

    .responsive-table tfoot tr {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
    }

    .responsive-table tfoot td {
        padding: 4px 0;
    }

    .responsive-table tfoot td[colspan] {
        text-align: left !important;
    }
}