/* ========================================
   360custom
   Main Stylesheet
   ======================================== */


/* ========================================
   FONTS (served from assets/fonts, SIL Open Font License)
   Outfit: headings, menu and buttons (close to the 360custom logo lettering)
   Anton: the big banner wordmark
   ======================================== */

@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); }

:root {
    /* Colours taken from the 360custom logo arcs */
    --brand-ink: #111216;
    --brand-red: #e8261a;          /* deeper than the logo's #ff3920 so white text stays readable */
    --brand-red-dark: #c81e14;
    --brand-gradient: linear-gradient(90deg, #01eedf, #01a0ea, #0540ff, #5e27ff, #f600a8, #ff3920, #fd7c05, #ffb816);
    --brand-warm: linear-gradient(90deg, #f600a8, #ff3920, #fd7c05);
    --font-display: "Outfit", "Segoe UI", Arial, Helvetica, sans-serif;

    /* Page colours */
    --header-bg: #F5F5F5;          /* header (and the phone menu) */
    --page-bg: #FAFAFA;            /* page background */

    /* Floating header: frosted glass in the header colour (#F5F5F5) */
    --header-glass: rgba(245, 245, 245, 0.72);
    --header-top: 12px;            /* gap above the floating header */
    --header-offset: 100px;        /* page content starts below the header */
}


/* ========================================
   RESET
   ======================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-offset);   /* #links land below the header */
}

/* Home page: the banner photo runs up behind the floating header. */
body.has-overlay-header {
    padding-top: 0;
}

body {
    padding-top: var(--header-offset);   /* room for the floating header */
    font-family: Arial, Helvetica, sans-serif;
    background: var(--page-bg);
    color: #222222;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    font-family: inherit;
}

h1, h2, h3, h4,
.page-title,
.btn,
.add-to-cart,
.filter-button,
.cart-link {
    font-family: var(--font-display);
}

h1, h2, h3 {
    letter-spacing: -0.2px;
}

img {
    max-width: 100%;
    display: block;
}


/* ========================================
   GLOBAL
   ======================================== */

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section {
    padding: 90px 0;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 45px;
}

.section-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777777;
}

.section-heading h2 {
    font-size: 38px;
    line-height: 1.15;
}

.view-all {
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #222222;
    padding-bottom: 4px;
    white-space: nowrap;
}


/* ========================================
   BUTTONS
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 25px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* <button class="btn"> needs the browser's default border removed; the
   <a class="btn"> links and .btn-secondary keep their own borders. */
button.btn {
    border: 0;
    font-family: inherit;
}

.btn-primary {
    background: #222222;
    color: #ffffff;
}

.btn-secondary {
    border: 1px solid #222222;
    color: #222222;
}

.btn-block {
    width: 100%;
}


/* ========================================
   HEADER
   360custom logo on the left, menu in the middle,
   LOOOKUUU logo above the cart on the right.
   ======================================== */

/* The header floats above the page: a rounded bar with 8px padding and a
   frosted-glass background, so content scrolling behind it is blurred but
   still visible. */
.site-header {
    position: fixed;
    top: var(--header-top);
    left: 0;
    right: 0;
    z-index: 1000;
    pointer-events: none;          /* only the bar itself takes clicks */
}

.header-container {
    position: relative;
    pointer-events: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
    padding: 5px;
    border-radius: 16px;
    background: var(--header-glass);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

@media (max-width: 760px) {
    :root { --header-top: 8px; --header-offset: 84px; }
}

/* Browsers without blur get a nearly solid bar so text stays readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header-container { background: rgba(245, 245, 245, 0.96); }
}

.logo {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    line-height: 0;
}

.logo img {
    height: 54px;
    width: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
}

.main-nav a {
    position: relative;
    padding: 6px 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #2b2b2b;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--brand-warm);
    transition: width 0.25s ease;
}

.main-nav a:hover {
    color: var(--brand-ink);
}

.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
    width: 100%;
}

/* The current page's link in the menu */
.main-nav a[aria-current="page"] {
    color: var(--brand-ink);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 16px;
}

.cart-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-ink);
}

.cart-link:hover .cart-label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cart-icon {
    width: 25px;
    height: 25px;
    flex: none;
}

.cart-count {
    min-width: 28px;
    height: 28px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--brand-ink);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

/* Mobile menu button */

.menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #222222;
    margin: 5px 0;
    transition: transform 0.2s ease;
}


/* ========================================
   HERO
   ======================================== */


/* ========================================
   CATEGORIES
   ======================================== */

.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-card {
    display: block;
}

.category-image {
    height: 290px;
    /* Fallback for any category slug without its own style below */
    background: linear-gradient(145deg, #aaa59d, #5c5853);
    display: flex;
    align-items: flex-end;
    padding: 20px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

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

.category-image span {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
}

/* Temporary visual backgrounds, one per category slug (see database/seed.sql).
   Later the images will come from our product/category data. */


   /* The 4 shop categories */
   .category-clothing-apparel     { background: linear-gradient(145deg, #c7651f, #6e3410); }
   .category-events-branding      { background: linear-gradient(145deg, #4f8a9a, #1f4652); }
   .category-promotional-items    { background: linear-gradient(145deg, #b5566a, #5c2331); }
   .category-corporate-gifts      { background: linear-gradient(145deg, #c4b39e, #70604e); }

.category-content {
    padding-top: 14px;
}

.category-content h3 {
    font-size: 19px;
    margin-bottom: 4px;
}

.category-content span {
    font-size: 12px;
    color: #777777;
}


/* ========================================
   PRODUCTS
   ======================================== */

.products {
    background: var(--page-bg);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.product-grid.loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.product-card {
    background: #ffffff;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.product-image {
    position: relative;
    height: 350px;
    overflow: hidden;
    background: linear-gradient(145deg, #eeeeee, #d8d8d8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-image-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.product-placeholder {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #777777;
}

.product-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    padding: 6px 10px;
    background: #222222;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.product-badge.sale {
    background: #ffffff;
    color: #222222;
}

.quick-view {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    padding: 11px;
    border: none;
    background: #ffffff;
    color: #222222;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.product-card:hover .quick-view {
    opacity: 1;
    transform: translateY(0);
}

.product-info {
    padding: 18px;
}

.product-category {
    margin-bottom: 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888;
}

.product-info h3 {
    font-size: 17px;
    margin-bottom: 18px;
}

.product-info h3 a:hover {
    text-decoration: underline;
}

.product-description {
    margin: -8px 0 12px;
    font-size: 13px;
    color: #666666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-stock {
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
}

.product-stock.in-stock { color: #2e7d32; }
.product-stock.low-stock { color: #b26a00; }
.product-stock.out-of-stock { color: #b3261e; }

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-price {
    font-size: 16px;
}

.add-to-cart {
    padding: 9px 13px;
    border: 1px solid #222222;
    background: #ffffff;
    color: #222222;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.add-to-cart:hover {
    background: #222222;
    color: #ffffff;
}

.add-to-cart:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.products-loading,
.products-error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 50px 20px;
    color: #777777;
}

.products-error p {
    margin-bottom: 15px;
}

.no-products {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
    padding: 50px 20px;
}

.no-products p {
    color: #777777;
    font-size: 16px;
}

.no-products .filter-button {
    margin-top: 14px;
}


/* ========================================
   PRODUCT FILTERS
   ======================================== */

.product-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.filter-button {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.filter-button:hover,
.filter-button.active {
    background: #111111;
    color: #ffffff;
    border-color: #111111;
}


/* ========================================
   SEARCH
   ======================================== */

.product-search {
    margin: 0 auto 24px;
    max-width: 600px;
}

.product-search label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
}

.search-box {
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 14px 48px 14px 16px;
    border: 1px solid #dddddd;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 16px;
}

.search-box input:focus {
    outline: none;
    border-color: #222222;
}

/* We draw our own clear button */
.search-box input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.search-box button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.search-box button[hidden] {
    display: none;
}

.search-box button:hover {
    opacity: 0.6;
}

.results-info {
    min-height: 22px;
    margin: -20px 0 22px;
    text-align: center;
    font-size: 14px;
    color: #666666;
}


/* ========================================
   ABOUT (on the Contact page)
   ======================================== */

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.about-content {
    max-width: 550px;
}

.about-content h2 {
    margin-bottom: 20px;
    font-size: 42px;
    line-height: 1.1;
}

.about-content p {
    margin-bottom: 15px;
    color: #666666;
}

.text-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 1px solid #222222;
    padding-bottom: 4px;
}

.about-box {
    display: grid;
    gap: 1px;
    background: #dddddd;
}

.about-box div {
    padding: 28px;
    background: #f4f4f4;
}

.about-box strong,
.about-box span {
    display: block;
}

.about-box strong {
    margin-bottom: 4px;
    font-size: 20px;
}

.about-box span {
    color: #777777;
    font-size: 13px;
}


/* ========================================
   FOOTER
   ======================================== */

.site-footer {
    position: relative;
    padding: 70px 0 25px;
    background: #141518;
    color: #ffffff;
}

.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--brand-gradient);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 50px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 15px;
    line-height: 0;
}

.footer-logo img {
    height: 66px;
    width: auto;
}

.footer-brand p {
    max-width: 300px;
    color: #999999;
    font-size: 14px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-column h4 {
    margin-bottom: 8px;
    font-size: 14px;
}

.footer-column a,
.footer-column p {
    color: #999999;
    font-size: 13px;
}

.footer-column a:hover {
    color: #ffffff;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 25px;
    border-top: 1px solid #333333;
}

.footer-bottom p {
    color: #777777;
    font-size: 11px;
}


/* ========================================
   QUICK VIEW MODAL
   ======================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal[hidden] {
    display: none;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.modal-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    overflow: auto;
    background: #ffffff;
}

.modal-media {
    min-height: 420px;
    height: 100%;
}

.modal-body {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.modal-body h3 {
    font-size: 24px;
}

.modal-price {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.modal-description {
    color: #555555;
    margin-bottom: 8px;
}

.modal-body .add-to-cart {
    margin-top: 10px;
    padding: 13px;
    background: #222222;
    color: #ffffff;
}

.modal-body .add-to-cart:disabled {
    background: #999999;
    border-color: #999999;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 3;
    width: 36px;
    height: 36px;
    border: none;
    background: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}


/* ========================================
   SHARED PAGE LAYOUT
   ======================================== */

.page-section {
    padding-top: 50px;
}

.page-title {
    font-size: 38px;
    line-height: 1.15;
}

.page-message {
    max-width: 560px;
    text-align: center;
}

.page-message h1 {
    margin-bottom: 12px;
}

.page-message p {
    margin-bottom: 25px;
    color: #666666;
}


/* ========================================
   PRODUCT DETAILS PAGE
   ======================================== */

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
    font-size: 13px;
    color: #888888;
}

.breadcrumbs a:hover {
    color: #222222;
    text-decoration: underline;
}

.breadcrumbs [aria-current] {
    color: #222222;
}

.product-detail {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: start;
}

.product-gallery {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: linear-gradient(145deg, #eeeeee, #d8d8d8);
}

.product-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-gallery .product-placeholder {
    padding: 20px;
    text-align: center;
}

.product-summary .product-category a:hover {
    text-decoration: underline;
}

.product-summary h1 {
    margin: 4px 0 14px;
    font-size: 36px;
    line-height: 1.15;
}

.detail-price {
    margin-bottom: 8px;
    font-size: 26px;
    font-weight: 700;
}

.detail-description {
    max-width: 62ch;
    margin: 20px 0 28px;
    color: #555555;
}

.buy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.cart-note {
    min-height: 22px;
    margin-top: 14px;
    font-size: 14px;
    color: #555555;
}

.cart-note a {
    font-weight: 700;
    text-decoration: underline;
}

.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dddddd;
    background: #ffffff;
}

.qty-control button {
    width: 40px;
    height: 44px;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
}

.qty-control button:hover:not(:disabled) {
    background: #f2f2f2;
}

.qty-control button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.qty-control input,
.qty-control .qty-value {
    width: 52px;
    text-align: center;
    border: none;
    background: transparent;
    font: inherit;
    font-weight: 700;
}

.qty-control input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.qty-control input::-webkit-outer-spin-button,
.qty-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qty-control .qty-value {
    display: inline-block;
}


/* ========================================
   CART PAGE
   ======================================== */

.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

.cart-list {
    border-top: 1px solid #eeeeee;
}

.cart-item {
    display: grid;
    grid-template-columns: 90px 1fr auto 110px auto;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eeeeee;
}

.cart-item.is-unavailable {
    grid-template-columns: 90px 1fr auto;
    opacity: 0.75;
}

.cart-item.is-unavailable:not(:has(.cart-item-image)) {
    grid-template-columns: 1fr auto;
}

.cart-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 110px;
    overflow: hidden;
    background: linear-gradient(145deg, #eeeeee, #d8d8d8);
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-image .product-placeholder {
    padding: 6px;
    font-size: 9px;
    text-align: center;
    letter-spacing: 1px;
}

.cart-item-name {
    display: block;
    font-size: 17px;
    font-weight: 700;
}

a.cart-item-name:hover {
    text-decoration: underline;
}

.cart-item-unit {
    font-size: 14px;
    color: #666666;
}

.cart-item-info .product-stock {
    margin: 4px 0 0;
}

.cart-item-total {
    font-weight: 700;
    text-align: right;
}

.cart-remove,
.cart-clear {
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    color: #777777;
    text-decoration: underline;
    cursor: pointer;
}

.cart-remove:hover,
.cart-clear:hover {
    color: #b3261e;
}

.cart-summary {
    position: sticky;
    top: var(--header-offset);
    padding: 28px;
    background: #ffffff;
    border: 1px solid #eeeeee;
}

.cart-summary h2 {
    margin-bottom: 18px;
    font-size: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    color: #555555;
}

.summary-total {
    margin-bottom: 18px;
    padding-top: 14px;
    border-top: 1px solid #dddddd;
    font-size: 18px;
    color: #222222;
}

.summary-note {
    margin: 12px 0 18px;
    font-size: 12px;
    color: #888888;
}

.cart-notices {
    margin-bottom: 25px;
    padding: 14px 18px;
    background: #fff8e6;
    border: 1px solid #f0d78a;
    font-size: 14px;
    color: #7a5b00;
}

.cart-empty {
    padding: 60px 20px;
    text-align: center;
}

.cart-empty h2 {
    margin-bottom: 8px;
}

.cart-empty p {
    margin-bottom: 25px;
    color: #666666;
}


/* ========================================
   CONTACT PAGE
   ======================================== */

.contact-intro {
    max-width: 560px;
    margin-bottom: 35px;
    color: #666666;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    max-width: 720px;
    margin-bottom: 35px;
}

.contact-card {
    padding: 28px;
    background: #ffffff;
    border: 1px solid #eeeeee;
}

.contact-card h2 {
    margin-bottom: 8px;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #888888;
}

.contact-card a {
    font-weight: 700;
    text-decoration: underline;
}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1000px) {

    .main-nav {
        gap: 24px;
    }

    .header-container {
        gap: 20px;
    }

    .logo img {
        height: 48px;
    }

    .category-grid,
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 900px) {

    .product-detail {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-gallery {
        aspect-ratio: 1 / 1;
        max-height: 520px;
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

}


@media (max-width: 760px) {

    .section {
        padding: 65px 0;
    }

    .section-heading {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 32px;
    }

    /* Mobile navigation */

    .header-container {
        grid-template-columns: 1fr auto;
    }

    .menu-toggle {
        display: block;
    }

    /* The open menu drops down as a second rounded card under the bar. */
    .main-nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px;
        border-radius: 16px;
        background: rgba(245, 245, 245, 0.97);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    }

    .main-nav.active {
        display: flex;
    }

    .main-nav a {
        padding: 13px 0;
        border-bottom: 1px solid #eeeeee;
    }

    .main-nav a::after {
        display: none;
    }

    /* Current page in the open menu: a short logo-colour bar on the left. */
    .main-nav a[aria-current="page"] {
        padding-left: 12px;
        box-shadow: inset 3px 0 0 #ff3920;
    }

    .logo img {
        height: 44px;
    }

    /* About */

    .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

}


@media (max-width: 700px) {

    .modal-panel {
        grid-template-columns: 1fr;
    }

    .modal-media {
        min-height: 260px;
        height: 260px;
    }

    .modal-body {
        padding: 25px 20px;
    }

}


@media (max-width: 600px) {

    .product-filters {
        gap: 8px;
    }

    .filter-button {
        padding: 8px 15px;
        font-size: 13px;
    }

    .page-title {
        font-size: 30px;
    }

    .product-summary h1 {
        font-size: 28px;
    }

    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 14px;
    }

    .cart-item-image {
        width: 80px;
        height: 100px;
    }

    .cart-item .qty-control {
        grid-column: 1 / 2;
        justify-self: start;
    }

    .cart-item-total {
        grid-column: 2 / 3;
        grid-row: 2;
        justify-self: end;
    }

    .cart-item .cart-remove {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .cart-item.is-unavailable,
    .cart-item.is-unavailable:not(:has(.cart-item-image)) {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 550px) {

    .container {
        width: 92%;
    }

    .header-container {
        gap: 12px;
    }

    .logo img {
        height: 38px;
    }

    .header-actions {
        gap: 10px;
    }

    .cart-label {
        display: none;
    }

    .cart-count {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .category-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }

    .category-image {
        height: 320px;
    }

    .product-image {
        height: 360px;
    }

    .product-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .add-to-cart {
        width: 100%;
    }

    .quick-view {
        opacity: 1;
        transform: translateY(0);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}


/* ========================================
   DESIGN STUDIO (customize.php): one page
   ======================================== */

.studio-page {
    --s-ink: #1d211d;
    --s-muted: #6a6f68;
    --s-line: #dfe2da;
    --s-panel: #eef0e8;
    --s-lime: #c8ee52;
    --s-lime-dark: #b5dc3c;
    --s-green: #3d4b40;
    --s-red: #b3202a;
    color: var(--s-ink);
    padding-bottom: 120px;   /* room for the sticky bar */
}

.studio-page [hidden] { display: none !important; }

.studio-crumbs { font-size: 13px; color: var(--s-muted); margin: 22px 0 18px; }

.studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
}

/* ---- preview (left, sticky) ---- */

.studio-preview {
    position: sticky;
    top: var(--header-offset);   /* below the floating header */
    background: var(--s-panel);
    border-radius: 18px;
    padding: 20px;
}

.studio-preview-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.studio-side-name { color: var(--s-muted); }

.studio-canvas { display: grid; place-items: center; min-height: 400px; margin: 8px 0; }
.studio-canvas > svg { width: 100%; max-width: 430px; height: auto; display: block; }

.studio-thumbs { display: flex; justify-content: center; gap: 12px; }

.studio-thumb {
    display: grid;
    gap: 4px;
    justify-items: center;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--s-muted);
}

.studio-thumb-art {
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
}

.studio-thumb-art svg { width: 70px; height: 70px; }
.studio-thumb.is-active { color: var(--s-ink); font-weight: 700; }
.studio-thumb.is-active .studio-thumb-art { border-color: var(--s-green); }
.studio-thumb:focus-visible .studio-thumb-art { outline: 2px solid var(--s-ink); outline-offset: 2px; }

.studio-preview-note { text-align: center; font-size: 12px; color: var(--s-muted); margin-top: 10px; }

/* ---- options (right) ---- */

.studio-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.5px; }
.studio-sub { color: #2f6b3a; font-size: 14px; font-weight: 700; margin: 6px 0 4px; }

.studio-row {
    padding: 18px 0;
    border-bottom: 1px solid var(--s-line);
}

.studio-row-label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.studio-row-label strong { font-weight: 400; }

.studio-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.studio-row.studio-two .studio-field { margin-top: 0; }

.studio-inline-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 14px; }
.studio-inline-row .studio-row-label { margin: 0; }

.studio-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.studio-product {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: center;
    text-align: center;
    padding: 8px 6px 10px;
    border: 1px solid var(--s-line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
}

.studio-product input { position: absolute; opacity: 0; pointer-events: none; }
.studio-product:hover { border-color: #b9bfb2; }
.studio-product:has(input:checked) { border: 2px solid var(--s-green); padding: 7px 5px 9px; background: #f5f8ee; }
.studio-product:focus-within { outline: 2px solid var(--s-green); outline-offset: 2px; }
.studio-product-art { display: grid; place-items: center; width: 100%; height: 64px; overflow: hidden; border-radius: 6px; background: var(--s-panel); margin-bottom: 4px; }
.studio-product-art svg { height: 58px; width: auto; }
.studio-product-art img { width: 100%; height: 64px; object-fit: cover; }
.studio-product strong { font-size: 13px; line-height: 1.25; }
.studio-product em { font-style: normal; font-size: 11px; color: var(--s-muted); }

.studio-field { display: block; margin-top: 12px; font-size: 13px; font-weight: 700; }

.studio-select,
.studio-field select,
.studio-field input[type=text],
.studio-field textarea {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font: inherit;
    font-weight: 400;
    font-size: 15px;
    color: var(--s-ink);
    background: #fff;
    border: 1px solid #c9cdc3;
    border-radius: 6px;
}

.studio-field select, .studio-field input[type=text], .studio-field textarea { margin-top: 6px; }
.studio-field select:disabled { background: #f6f7f3; color: var(--s-ink); }
.studio-select:focus, .studio-field select:focus, .studio-field input:focus, .studio-field textarea:focus { outline: 2px solid var(--s-ink); outline-offset: 0; }

.studio-colour-field input[type=color] { display: block; width: 100%; height: 44px; margin-top: 6px; border: 1px solid #c9cdc3; border-radius: 6px; padding: 3px; background: #fff; cursor: pointer; }
.studio-text-row { grid-template-columns: 1fr 120px; margin-top: 4px; }

.studio-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }

.studio-swatch {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 8px 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    color: var(--s-ink);
}

.studio-swatch-dot { width: 32px; height: 32px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .18); }
.studio-swatch:hover { background: #f6f7f3; }
.studio-swatch.is-active { border: 2px solid var(--s-green); padding: 7px 3px; font-weight: 700; }
.studio-swatch:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 2px; }

.studio-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }

.studio-method {
    display: grid;
    gap: 2px;
    text-align: left;
    padding: 11px 12px;
    border: 1px solid var(--s-line);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font: inherit;
}

.studio-method strong { font-size: 14px; }
.studio-method small { font-size: 11px; color: var(--s-muted); font-weight: 400; }
.studio-method.is-active { border-color: var(--s-green); background: #f5f8ee; box-shadow: inset 0 0 0 1px var(--s-green); }

.studio-upload { padding: 16px; border: 1px dashed #b9c4a6; border-radius: 10px; background: #fafbf6; text-align: center; }
.studio-upload label { display: grid; gap: 2px; cursor: pointer; }
.studio-upload small { font-size: 12px; color: var(--s-muted); }
.studio-upload input[type=file] { margin-top: 10px; font-size: 13px; max-width: 100%; }
.studio-upload-status { font-size: 13px; color: var(--s-green); margin-top: 6px; }

.studio-sizebox { border: 1px solid #c9cdc3; border-radius: 6px; padding: 16px; }
.studio-sizebox-title { text-align: center; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.studio-sizes { display: grid; grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr)); gap: 8px; }
.studio-size { display: grid; gap: 6px; text-align: center; font-size: 12px; color: var(--s-muted); }
.studio-size input { width: 100%; padding: 10px 4px; text-align: center; font: inherit; font-size: 15px; color: var(--s-ink); border: 1px solid #c9cdc3; border-radius: 4px; background: #fff; }
.studio-size:has(input:not([value="0"])) input,
.studio-size input:focus { border-color: var(--s-green); outline: 1px solid var(--s-green); }

.studio-unit { margin-top: 12px; font-size: 14px; }
.studio-warn { color: var(--s-red); font-weight: 700; }
.studio-error { color: var(--s-red); font-size: 14px; font-weight: 700; margin-top: 14px; min-height: 1px; }

/* ---- sticky bar ---- */

.studio-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: #f4f5f1;
    border-top: 1px solid var(--s-line);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .06);
}

.studio-bar-inner { display: flex; align-items: center; gap: 24px; padding: 12px 0; }
.studio-bar-summary { flex: 1; min-width: 0; display: grid; }
.studio-bar-summary span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-bar-summary small, .studio-bar-total small { font-size: 12px; color: var(--s-muted); }
.studio-bar-total { display: grid; text-align: right; }
.studio-bar-total strong { font-size: 24px; line-height: 1.1; }

.studio-add {
    min-width: 260px;
    padding: 16px 28px;
    border: 0;
    border-radius: 6px;
    background: var(--s-lime);
    color: var(--s-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.studio-add:hover { background: var(--s-lime-dark); }
.studio-add:disabled { opacity: .55; cursor: wait; }

.studio-process {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid var(--s-line);
}

.studio-process strong { display: block; }
.studio-process span { font-size: 14px; color: var(--s-muted); }

@media (max-width: 900px) {
    .studio { grid-template-columns: 1fr; gap: 20px; }
    .studio-preview { position: static; padding: 14px; }
    .studio-canvas { min-height: 0; }
    .studio-canvas > svg { max-width: 280px; }
    .studio-process { grid-template-columns: 1fr; }
    .studio-bar-inner { gap: 12px; }
    .studio-bar-summary small { display: none; }
    .studio-add { min-width: 0; padding: 14px 18px; }
}

@media (max-width: 560px) {
    .studio-products { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .studio-two, .studio-text-row, .studio-inline-row { grid-template-columns: 1fr; }
    .studio-sizes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .studio-bar-summary { display: none; }
    .studio-bar-total { text-align: left; flex: 1; }
    .studio-bar-total strong { font-size: 20px; }
}

/* Wholesale tier hint on shop cards */
.product-bulk { font-size: 12px; color: #2f6b3a; margin-top: 2px; }

/* Wholesale price table on product pages */
.tier-table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: 14px; }
.tier-table caption { text-align: left; font-weight: 700; margin-bottom: 6px; }
.tier-table th, .tier-table td { padding: 8px 10px; border-bottom: 1px solid #e6e6e6; text-align: left; }
.tier-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #777; }
.tier-table tr.is-current td { background: #eef6ea; font-weight: 700; }
.tier-total { font-size: 15px; margin: 6px 0 14px; }

/* "Choose options" link on product-family cards */
.add-to-cart-link { display: inline-block; text-align: center; white-space: nowrap; }

/* Option buttons on product pages (product families) */
.variant-picker { margin: 16px 0 6px; }
.variant-picker-label { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option {
    display: grid;
    gap: 2px;
    min-width: 92px;
    padding: 9px 12px;
    border: 1px solid #d6d6d6;
    background: #fff;
    font-size: 14px;
    color: #222;
    text-align: center;
}
.variant-option small { font-size: 11px; color: #777; }
.variant-option:hover { border-color: #222; }
.variant-option.is-current { border: 2px solid #222; padding: 8px 11px; font-weight: 700; }


/* ========================================
   OUR WORK (work.php + homepage strip)
   ======================================== */

.work-page {
    --w-bg: var(--page-bg);
    --w-ink: #1b1b1b;
    --w-orange: #d4541c;
    --w-muted: #6b6560;
    --w-line: #e8e1d7;
    background: var(--w-bg);
    color: var(--w-ink);
    padding-bottom: 70px;
}

.work-crumbs { font-size: 13px; color: var(--w-muted); padding: 22px 0 10px; }
.work-crumbs [aria-current] { color: var(--w-orange); }
.work-notfound { background: #fff3ec; border-left: 3px solid var(--w-orange); padding: 10px 14px; margin-bottom: 16px; }

.work-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.work-hero-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5.5vw, 68px);
    line-height: 1;
    letter-spacing: -1.5px;
}

.work-hero-title span { color: var(--w-orange); }
.work-hero-sub { font-family: var(--font-display); font-size: clamp(17px, 2vw, 24px); margin-top: 10px; }

.work-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.work-card {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ececec;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}

.work-card.is-wide { grid-column: span 3; }
.work-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .1); }
.work-card:focus-visible { outline: 3px solid var(--w-orange); outline-offset: 3px; }

.work-card-media { display: block; aspect-ratio: 16 / 9; background: #eee7dc; overflow: hidden; }
.work-card.is-wide .work-card-media { aspect-ratio: 16 / 8; }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.work-card:hover .work-card-media img { transform: scale(1.03); }

.work-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px 18px;
    flex: 1;
}

.work-card-text { display: grid; gap: 2px; }
.work-card-text strong { font-family: var(--font-display); font-size: 21px; text-transform: uppercase; letter-spacing: .3px; color: var(--w-ink); }
.work-card-text small { font-size: 14px; color: var(--w-muted); }

.work-card-link {
    flex: none;
    background: var(--w-orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 14px;
    border-radius: 4px;
    white-space: nowrap;
}

.work-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--w-line);
}

.work-bottom p { font-family: var(--font-display); font-size: 22px; }

.work-btn {
    display: inline-block;
    background: var(--w-orange);
    color: #fff;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 4px;
    border: 2px solid var(--w-orange);
}

.work-btn:hover { background: #b9461a; border-color: #b9461a; }
.work-btn-ghost { background: transparent; color: var(--w-ink); border-color: var(--w-ink); }
.work-btn-ghost:hover { background: var(--w-ink); color: #fff; border-color: var(--w-ink); }

/* project page */
.work-detail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 10px; }
.work-detail-media { display: grid; gap: 14px; }
.work-detail-media img { width: 100%; border-radius: 8px; }
.work-kicker { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--w-orange); font-weight: 700; }
.work-title { font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 56px); line-height: 1.02; text-transform: uppercase; margin: 8px 0 6px; }
.work-summary { font-size: 19px; margin-bottom: 14px; }
.work-detail-text p { color: #3d3833; }
.work-made-title { font-size: 15px; margin: 22px 0 8px; text-transform: uppercase; letter-spacing: 1px; }
.work-made { padding-left: 18px; display: grid; gap: 4px; }
.work-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* homepage strip */
.home-work { background: var(--page-bg); }
.home-work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.home-work .work-card-link { background: transparent; color: #d4541c; padding: 0; }

@media (max-width: 900px) {
    .work-grid { grid-template-columns: 1fr 1fr; }
    .work-card, .work-card.is-wide { grid-column: span 1; }
    .work-detail { grid-template-columns: 1fr; gap: 24px; }
    .home-work-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .work-grid { grid-template-columns: 1fr; }
    .work-card-body { flex-wrap: wrap; }
    .work-bottom { flex-direction: column; align-items: flex-start; }
}
.home-work-grid .work-card { grid-column: auto; }


/* ========================================
   HOMEPAGE BANNER
   Full-screen photo under the see-through header, with the LOOOKUUU
   wordmark, tagline and two buttons in the bottom-left corner.
   ======================================== */

.hero-full {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    background-color: #2a2420;
    background-size: cover;
    background-position: center;
}

/* Darker at the top (header) and bottom-left (text) so white text stays readable. */
.hero-full::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .05) 28%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, .6) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 55%);
}

.hero-full-inner { position: relative; z-index: 1; padding: 150px 0 clamp(44px, 8vh, 88px); }

.hero-full-title {
    font-family: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
    font-weight: 400;
    font-size: clamp(64px, 15vw, 230px);
    overflow-wrap: anywhere;
    line-height: .9;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 4px 30px rgba(0, 0, 0, .3);
}

.hero-full-tagline {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 500;
    margin: 16px 0 30px;
    max-width: 620px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.hero-full-tagline strong { font-weight: 800; }

.hero-full-actions { display: flex; flex-wrap: wrap; gap: 18px; }

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 28px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.hero-btn span { transition: transform .2s ease; }
.hero-btn:hover span { transform: translateX(4px); }

.hero-btn-primary { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.hero-btn-primary:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.hero-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .28); }
.hero-btn-outline:hover { background: #fff; color: #111; }
.hero-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@media (max-width: 760px) {
    .hero-full { background-position: 30% center; }
    .hero-full-inner { padding-top: 120px; }
}

@media (max-width: 560px) {
    .hero-full-actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero-btn { justify-content: center; }
}

.work-card.is-full { grid-column: 1 / -1; }
.work-card.is-full .work-card-media { aspect-ratio: 16 / 6; }
@media (max-width: 900px) { .work-card.is-full { grid-column: auto; } }


/* ========================================
   FORMS, CHECKOUT AND CART DETAILS
   (checkout.php, product page fields, admin)
   ======================================== */

.form-control {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
    padding: 10px 12px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    background: #ffffff;
    font: inherit;
    font-size: 16px;          /* 16px stops phones zooming in on focus */
    color: #222222;
}

textarea.form-control {
    min-height: 90px;
    resize: vertical;
}

.form-control:focus {
    outline: 2px solid #222222;
    outline-offset: 1px;
    border-color: #222222;
}

.checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: 32px;
    align-items: start;
}

.checkout-form {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.checkout-form > label,
.checkout-custom-item label,
.custom-order-fields label {
    display: block;
    font-weight: 700;
    font-size: 14px;
}

.checkout-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 0;
    border: 0;
}

.checkout-choice legend {
    width: 100%;
    margin-bottom: 6px;
    font-weight: 700;
    font-size: 14px;
}

.checkout-choice label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 400;
}

.checkout-choice input {
    width: 20px;
    height: 20px;
}

.checkout-items-block h2 {
    font-size: 22px;
}

.checkout-custom-item {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid #dddddd;
    border-radius: 12px;
    min-width: 0;
}

.checkout-custom-item legend {
    padding: 0 6px;
    font-weight: 700;
}

.checkout-custom-item input[type="file"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-weight: 400;
}

.checkout-art-status {
    margin: 0;
}

.checkout-warning,
.summary-warning {
    color: #b3261e;
    font-weight: 700;
    font-size: 14px;
}

.summary-warning {
    margin: 0 0 14px;
}

.checkout-errors {
    margin-bottom: 24px;
    padding: 16px 20px;
    text-align: left;
    border: 1px solid #e3a6a1;
    border-radius: 10px;
    background: #fdf1f0;
    color: #8c1d16;
}

.checkout-errors ul {
    margin-left: 18px;
}

.cart-item-options {
    margin: 2px 0 4px;
    font-size: 13px;
    color: #555555;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {

    .checkout-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* On phones show the estimate first, above the long form. */
    .checkout-summary {
        position: static;
        order: -1;
    }

}

@media (max-width: 550px) {

    .checkout-custom-item {
        padding: 12px;
    }

}


/* ========================================
   PRIVACY NOTICE (privacy.php)
   ======================================== */

.legal-page {
    max-width: 760px;
}

.legal-page h2 {
    margin: 32px 0 10px;
    font-size: 21px;
}

.legal-page p,
.legal-page li {
    color: #444444;
}

.legal-page ul {
    margin: 10px 0 10px 22px;
}

.legal-page li {
    margin-bottom: 6px;
}

.legal-page a {
    text-decoration: underline;
}

.legal-updated {
    margin-top: 6px;
    font-size: 13px;
    color: #888888;
}


/* ========================================
   SMALL ADDITIONS (October 2026)
   ======================================== */

/* Checkout spam trap: never shown to people. */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Shop: no search results */
.no-products-help {
    max-width: 520px;
    margin: 10px auto 18px;
    color: #555555;
}

.no-products-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.no-products-actions .filter-button {
    margin-top: 0;
}


/* ========================================
   DESIGN STUDIO: 3 STEPS, REVIEW, ARTWORK QUALITY (October 2026)
   ======================================== */

.studio-stepper {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 16px 0 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--s-panel);
}

.studio-step-tab {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--s-muted);
    cursor: pointer;
}

.studio-step-tab span {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    font-size: 13px;
    color: var(--s-ink);
    border: 1px solid var(--s-line);
}

.studio-step-tab[aria-current="step"] { background: #fff; color: var(--s-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.studio-step-tab[aria-current="step"] span { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); }
.studio-step-tab.is-done span { background: var(--s-green); color: #fff; border-color: var(--s-green); }
.studio-step-tab:focus-visible { outline: 2px solid var(--s-ink); outline-offset: 2px; }

.studio-step-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 0 4px;
}

.studio-next,
.studio-back {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.studio-next { border: 0; background: var(--brand-ink); color: #fff; }
.studio-next:hover { background: #000; }
.studio-back { border: 1px solid #c9cdc3; background: #fff; color: var(--s-ink); }

.studio-review {
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
    background: #fafbf6;
    border: 1px solid var(--s-line);
}

.studio-review h2 { font-size: 18px; margin-bottom: 10px; }
.studio-review dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; font-size: 14px; }
.studio-review dt { color: var(--s-muted); }
.studio-review dd { font-weight: 600; overflow-wrap: anywhere; }
.studio-hint { margin-top: 8px; font-size: 12px; color: var(--s-muted); }

.studio-upload.is-drag { border-color: var(--s-green); background: #f0f6e6; }
.studio-upload label { min-height: 48px; align-content: center; }
.studio-upload-quality { margin-top: 6px; font-size: 13px; font-weight: 700; }
.studio-upload-quality.is-ok { color: #2e7d32; }
.studio-upload-quality.is-fair { color: #8a6100; }
.studio-upload-quality.is-low { color: #b3261e; }

/* Thumb-friendly targets (at least 48px) */
.studio-swatch { min-height: 48px; min-width: 48px; }
.studio-method { min-height: 52px; }
.studio-size input { min-height: 48px; }
.studio-select, .studio-field select, .studio-field input[type=text] { min-height: 48px; }

@media (max-width: 560px) {
    .studio-step-tab { font-size: 13px; gap: 5px; }
    .studio-review dl { grid-template-columns: 92px 1fr; }
}


/* ========================================
   HOME: CATEGORY CARDS, CART BADGE (October 2026)
   ======================================== */

.category-card {
    transition: transform .25s ease, box-shadow .25s ease;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .1);
}

/* The cart count gives a little bounce when something is added. */
.cart-count.is-bumped { animation: cart-bump .45s ease; }

@keyframes cart-bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.35); background: var(--brand-red); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .cart-count.is-bumped { animation: none; }
    .category-card, .category-card:hover { transition: none; transform: none; }
}



/* ========================================
   PRODUCT PAGE: BUY BAR (pinned to the bottom on phones)
   ======================================== */

.buy-row-price {
    display: none;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .buy-row {
        position: sticky;
        bottom: 0;
        z-index: 20;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        margin: 0 -4vw;
        padding: 10px 4vw calc(10px + env(safe-area-inset-bottom));
        background: #ffffff;
        border-top: 1px solid #e6e6e6;
        box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
    }

    .buy-row-price { display: block; margin-right: auto; font-size: 16px; }
    .buy-row .qty-control button { min-width: 44px; min-height: 44px; }
    .buy-row .btn { min-height: 48px; padding: 12px 16px; }
}

/* Keep the step tabs clear of the sticky header when "Next" scrolls to them. */
.studio-stepper { scroll-margin-top: calc(var(--header-offset) + 12px); }


/* ========================================
   HOME: HEADER OVER THE BANNER PHOTO
   Over the photo the floating bar is dark frosted glass with the white
   360custom logo, white menu and cart. Once the visitor scrolls (or opens
   the phone menu) it becomes the normal light frosted bar
   (assets/js/common.js adds .is-solid).
   ======================================== */

.site-header .logo-light { display: none; }

.site-header--overlay:not(.is-solid) .header-container {
    background: rgba(17, 18, 22, 0.28);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.site-header--overlay:not(.is-solid) .logo-dark { display: none; }
.site-header--overlay:not(.is-solid) .logo-light { display: block; }
.site-header--overlay:not(.is-solid) .cart-link { color: #fff; }
.site-header--overlay:not(.is-solid) .cart-count { background: #fff; color: var(--brand-ink); }
.site-header--overlay:not(.is-solid) .menu-toggle { background: transparent; border-color: rgba(255, 255, 255, .7); }
.site-header--overlay:not(.is-solid) .menu-toggle span { background: #fff; }

@media (min-width: 761px) {
    .site-header--overlay:not(.is-solid) .main-nav a { color: #fff; }
    .site-header--overlay:not(.is-solid) .main-nav a::after { background: #fff; }
}


/* ========================================
   SECTION DIVIDER
   A solid black line across the full width of the page content (from the
   first category card to the last), used between sections:
   <div class="container" aria-hidden="true"><hr class="section-divider"></div>
   ======================================== */

.section-divider {
    height: 2px;
    margin: 0;
    border: 0;
    background: #111111;
}