/**
 * WordPress-specific adjustments.
 *
 * Kept out of style.css on purpose: that file is a straight copy of the
 * static design source, so it can be re-synced wholesale. Anything that only
 * matters because the site runs on WordPress belongs here instead.
 */

/* ---------------------------------------------------------------------
 * Admin bar
 *
 * The navbar is position:fixed at top:0, so it sits underneath the admin
 * bar (which is fixed at top:0 with a far higher z-index). WordPress's own
 * `html { margin-top: 32px }` only shifts normal flow content, not fixed
 * elements — so the offset has to be applied here.
 * ------------------------------------------------------------------ */

body.admin-bar .navbar {
    top: 32px;
}

/* The admin bar is 46px tall below 782px. */
@media screen and (max-width: 782px) {
    body.admin-bar .navbar {
        top: 46px;
    }
}

/* Below 600px WordPress makes the admin bar position:absolute, so it scrolls
   away with the page. Holding a 46px gap would leave a permanent strip of
   background under the navbar for the whole scroll, so the navbar goes back
   to the top and simply overlaps the bar at scroll position 0 — visible only
   to logged-in users on a phone. */
@media screen and (max-width: 600px) {
    body.admin-bar .navbar {
        top: 0;
    }
}

/* The mobile drawer opens directly below the navbar, so its offset is the
   navbar height *plus* the admin bar. Both change, at different widths:
   the navbar is 70px above 768px and 56px below it, while the admin bar is
   32px above 782px and 46px below. That leaves three bands to cover. */

/* Above 782px: 32px bar + 70px navbar. */
body.admin-bar .mobile-nav {
    top: 102px;
    height: calc(100vh - 102px);
}

/* 769–782px: the bar has grown to 46px but the navbar is still 70px. */
@media screen and (min-width: 769px) and (max-width: 782px) {
    body.admin-bar .mobile-nav {
        top: 116px;
        height: calc(100vh - 116px);
    }
}

/* 601–768px: 46px bar + 56px navbar. !important is needed here only because
   the design stylesheet uses it for the same properties at this breakpoint. */
@media screen and (min-width: 601px) and (max-width: 768px) {
    body.admin-bar .mobile-nav {
        top: 102px !important;
        height: calc(100vh - 102px) !important;
    }
}

/* At 600px and below the navbar returns to top:0 (see above), so the drawer
   keeps the offset the design stylesheet already gives it. */

/* ---------------------------------------------------------------------
 * Linkified titles and thumbnails
 *
 * On the static site these were plain spans and divs, so the design
 * stylesheet has no rules for anchors in these positions. Now that each one
 * is a real link to its post, they would otherwise pick up the browser's
 * default styling — blue when unvisited, purple once visited, underlined.
 * Inheriting the parent's colour restores the intended design exactly.
 * ------------------------------------------------------------------ */

.track-title a,
.project-title a,
.artist-card-name a,
.blog-card-title a,
.media-title-text a,
.track-artwork a,
.project-img-wrapper a,
.artist-card-v2 > a,
.proj-featured-title a,
.proj-list-name a,
.artist-name a,
.producer-info a,
a.proj-featured-img-link,
a.card-img-wrapper,
a.producer-card,
a.media-card {
    color: inherit;
    text-decoration: none;
}

/* :visited and :hover need naming explicitly, otherwise the user-agent's own
   state rules re-colour the link on hover or after it has been opened. */
.track-title a:link,
.track-title a:visited,
.track-title a:hover,
.track-title a:focus,
.track-title a:active,
.project-title a:link,
.project-title a:visited,
.project-title a:hover,
.project-title a:focus,
.project-title a:active,
.artist-card-name a:link,
.artist-card-name a:visited,
.artist-card-name a:hover,
.artist-card-name a:focus,
.artist-card-name a:active,
.blog-card-title a:link,
.blog-card-title a:visited,
.blog-card-title a:hover,
.blog-card-title a:focus,
.blog-card-title a:active,
a.producer-card:link,
a.producer-card:visited,
a.producer-card:hover,
a.producer-card:focus,
a.producer-card:active,
.proj-featured-title a:link,
.proj-featured-title a:visited,
.proj-featured-title a:hover,
.proj-featured-title a:focus,
.proj-featured-title a:active,
.proj-list-name a:link,
.proj-list-name a:visited,
.proj-list-name a:hover,
.proj-list-name a:focus,
.proj-list-name a:active,
.artist-name a:link,
.artist-name a:visited,
.artist-name a:hover,
.artist-name a:focus,
.artist-name a:active {
    color: inherit;
    text-decoration: none;
}

/* Image wrappers became links too; keep them laying out as the blocks they
   replaced rather than as inline text. */
.track-artwork a,
.project-img-wrapper a,
.artist-card-v2 > a,
a.card-img-wrapper {
    display: block;
}

/* Fill the wrapper rather than shrink-wrap the image. A lazy-loaded image that
   hasn't arrived yet has no height, which would otherwise collapse the link to
   a ~24px strip and leave most of the artwork untappable. */
.track-artwork a,
.project-img-wrapper a,
a.card-img-wrapper {
    width: 100%;
    height: 100%;
}

/* The project cover fills its wrapper, which the design stylesheet sizes and
   positions — so the link has to occupy it completely rather than shrink to
   the image's intrinsic box. */
a.proj-featured-img-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------------------------------
 * Clickable roster cards
 *
 * The design stylesheet was written for cards that are themselves anchors —
 * .artist-card-content even sets pointer-events: none so a parent anchor's
 * click can bubble. The static site achieved that with an onclick on the div,
 * which can't be reproduced with nested anchors in valid HTML.
 *
 * Instead each card gets a stretched link covering the artwork, layered
 * beneath the text content so the name link and the social icons still win.
 * ------------------------------------------------------------------ */

.card-stretch-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Same stacking level as .card-overlay, but later in the DOM, so it sits
       above the gradient while staying below .artist-card-content (z-index 3). */
    z-index: 2;
    text-indent: -9999px;
    overflow: hidden;
}

/* The name is the real, focusable link. Its parent disables pointer events so
   clicks bubble, so re-enable them here. */
.artist-card-name a {
    pointer-events: auto;
}

/* Social icons must stay above the stretched link. */
.artist-card-links {
    position: relative;
    z-index: 3;
}

/* Homepage marquee: the overlay is z-index 10 and covers the whole card, so it
   has to stop swallowing clicks — its own children re-enable them. */
.artist-card-v2 .artist-card-overlay {
    pointer-events: none;
}

.artist-card-v2 .artist-name,
.artist-card-v2 .artist-name a,
.artist-card-v2 .artist-links,
.artist-card-v2 .artist-links a {
    pointer-events: auto;
}

.artist-card-v2 > .card-stretch-link {
    z-index: 5;
}

/* ---------------------------------------------------------------------
 * Producer cards
 *
 * The design stylesheet ties each card's colour gradient to a specific
 * producer's name (.producer-sarz, .producer-tempoe, …), which can't work
 * for a roster that is edited in WordPress. These are the same four
 * gradients, addressed by slot instead of by person.
 * ------------------------------------------------------------------ */

.producer-theme-1::before {
    background: linear-gradient(180deg, rgba(255, 196, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-1:hover::before {
    background: linear-gradient(180deg, rgba(255, 196, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.producer-theme-2::before {
    background: linear-gradient(180deg, rgba(162, 0, 255, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-2:hover::before {
    background: linear-gradient(180deg, rgba(162, 0, 255, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.producer-theme-3::before {
    background: linear-gradient(180deg, rgba(0, 255, 102, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-3:hover::before {
    background: linear-gradient(180deg, rgba(0, 255, 102, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.producer-theme-4::before {
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 90%);
}

.producer-theme-4:hover::before {
    background: linear-gradient(180deg, rgba(255, 77, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 100%);
}

/* Genre line under the producer's name — an addition, so it needs its own
   styling to sit correctly against the gradient. */
.producer-info .producer-genre {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
 * Footer
 *
 * The events section sits in normal flow but is position:relative, so it
 * paints over the static footer where their boxes overlap. Giving the
 * footer its own stacking position puts it back on top.
 * ------------------------------------------------------------------ */

.footer {
    /* Defensive: the events section before it is position:relative, and a
       positioned earlier sibling paints over a static later one. */
    position: relative;
    z-index: 3;
    clear: both;
}

.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 28px;
}

.footer-nav-link {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav-link:hover,
.footer-nav-link:focus {
    color: #ffffff;
}

@media screen and (max-width: 600px) {
    .footer-nav {
        gap: 10px 18px;
    }

    .footer-nav-link {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* ---------------------------------------------------------------------
 * Navigation placeholders
 *
 * TSA, Shop and Contact stay in the menu before their destinations exist, so
 * the navigation carries its final shape. They read as "not yet" rather than
 * looking broken, and become normal links the moment a URL is saved in
 * Global Site Settings.
 * ------------------------------------------------------------------ */

.nav-link--soon,
.mobile-link--soon,
.footer-nav-link--soon {
    opacity: 0.45;
    cursor: default;
}

.nav-link--soon:hover,
.mobile-link--soon:hover,
.footer-nav-link--soon:hover {
    opacity: 0.6;
}

/* ---------------------------------------------------------------------
 * Booking form
 *
 * The layout itself lives in style.css; these are the additions that only
 * exist because the form now posts to WordPress rather than simulating it.
 * ------------------------------------------------------------------ */

/* Honeypot. Hidden from people without display:none, which some bots skip. */
.booking-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.booking-error-note {
    margin: 12px 0 0;
    color: #ff6b6b;
    font-size: 14px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------
 * Contact page
 *
 * The static page carried these two rules as inline style attributes. Moved
 * to classes so the markup stays clean and both are themeable.
 * ------------------------------------------------------------------ */

.contact-offices-title {
    font-size: clamp(32px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
}

.contact-offices-title span {
    color: #6b6b6b;
}

.contact-faq-title {
    color: #8d8d8d;
}

/* The question row is a real control now (keyboard focusable), so it needs a
   pointer and a visible focus ring. */
.faq-question {
    cursor: pointer;
}

.faq-question:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* ---------------------------------------------------------------------
 * Shop
 *
 * The catalogue and cart styling all lives in style.css. These cover the two
 * states the static mock never had: an empty cart, and the note explaining
 * that online payment isn't live yet.
 * ------------------------------------------------------------------ */

.cart-empty {
    padding: 32px 0;
    text-align: center;
    opacity: 0.6;
    font-size: 14px;
}

.cart-checkout-note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.75;
}

.cart-checkout-note a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* An anchor styled as the checkout button needs to match the button's box. */
a.cart-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Global Navbar Logo constraint across ALL pages */
.navbar .logo-image,
.logo-group .logo-image,
.logo-link .logo-image,
.logo-image {
    height: 24px !important;
    max-height: 24px !important;
    width: auto !important;
    max-width: 180px !important;
    display: block !important;
    object-fit: contain !important;
}

.navbar .logo-link,
.logo-group {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

@media (max-width: 768px) {
    .navbar .logo-image,
    .logo-group .logo-image,
    .logo-link .logo-image,
    .logo-image {
        height: 20px !important;
        max-height: 20px !important;
    }
}

.global-cart-btn {
    color: #ffffff !important;
}

/* ---------------------------------------------------------------------
 * Editor output
 *
 * Post and page bodies come from the block editor, so they can contain
 * markup the static design never had.
 * ------------------------------------------------------------------ */

.article-body img,
.page-body img {
    max-width: 100%;
    height: auto;
}

.article-body figure,
.page-body figure {
    margin: 32px 0;
}

.article-body figcaption,
.page-body figcaption {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 8px;
}

.article-body blockquote,
.page-body blockquote {
    border-left: 2px solid currentColor;
    padding-left: 20px;
    margin: 32px 0;
    opacity: 0.9;
}

/* Empty grids and archives shouldn't collapse to nothing. */
.grid-empty {
    grid-column: 1 / -1;
    padding: 48px 0;
    opacity: 0.6;
}


/* ---------------------------------------------------------------------
 * Breadcrumbs
 * ------------------------------------------------------------------ */

.nmt-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-family: var(--font-heading, inherit);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.nmt-breadcrumbs a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nmt-breadcrumbs a:hover,
.nmt-breadcrumbs a:focus {
    color: #ffffff;
}

.nmt-breadcrumbs-separator {
    color: rgba(255, 255, 255, 0.3);
    user-select: none;
}

.nmt-breadcrumbs-current {
    color: #ffffff;
    pointer-events: none;
}

/* Specific position adjustments inside the hero containers */
.artists-hero .nmt-breadcrumbs,
.artist-single-hero .nmt-breadcrumbs,
.projects-hero .nmt-breadcrumbs,
.music-single-hero .nmt-breadcrumbs {
    margin-bottom: 12px;
}


/* Active state for footer navigation links */
.footer-nav-link.active {
    color: #ffffff !important;
}


/* Reduce nav hover text opacity to 70% */
.nav-link:hover:not(.active) {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* =====================================================================
 * Single Product Page Layout & Details Styling
 * ================================================================== */
.shop-single-section {
    padding-top: 140px;
    padding-bottom: 120px;
}

@media (min-width: 992px) {
    .shop-single-section {
        padding-top: 180px;
    }
}

.product-single-layout {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 24px;
}

@media (min-width: 768px) {
    .product-single-layout {
        flex-direction: row;
        gap: 60px;
        align-items: flex-start;
    }
}

@media (min-width: 992px) {
    .product-single-layout {
        gap: 80px;
    }
}

.product-single-image-wrapper {
    flex: 1;
    max-width: 100%;
}

@media (min-width: 768px) {
    .product-single-image-wrapper {
        max-width: 50%;
    }
}

@media (min-width: 992px) {
    .product-single-image-wrapper {
        max-width: 600px;
    }
}

.product-single-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.product-single-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

.product-single-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin: 8px 0 16px 0;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .product-single-title {
        font-size: 40px;
    }
}

.product-single-price {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
}

.product-single-desc {
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 32px;
}

.product-single-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    margin-top: auto;
}

.product-option-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.option-label {
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    width: 60px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.option-select-wrapper {
    position: relative;
    flex: 1;
    max-width: 240px;
}

.option-select {
    width: 100%;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #ffffff;
    padding: 10px 32px 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.option-select:focus {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}

.option-select-wrapper::after {
    content: 'â–¼';
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

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

.quantity-input-group {
    display: flex;
    align-items: center;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    overflow: hidden;
    height: 44px;
}

.qty-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    width: 36px;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.qty-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.qty-input {
    background: transparent;
    border: none;
    color: #ffffff;
    text-align: center;
    width: 44px;
    height: 100%;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    outline: none;
    -moz-appearance: textfield;
}

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

.product-add-to-cart-btn {
    flex: 1;
    height: 44px;
    min-width: 160px;
    max-width: 320px;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-add-to-cart-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

.product-add-to-cart-btn:active {
    transform: scale(0.98);
}

/* =====================================================================
 * Product Tabs Section
 * ================================================================== */
.product-tabs-wrapper {
    margin-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
}

.tabs-header-list {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
    margin-bottom: 32px;
    overflow-x: auto;
}

.tab-header-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: color 0.2s;
    white-space: nowrap;
}

.tab-header-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.tab-header-btn.active {
    color: #ffffff;
}

.tab-header-btn.active::after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #ffffff;
}

.tab-panel {
    animation: fadeIn 0.4s ease;
}

.additional-info-table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
}

.additional-info-table th,
.additional-info-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-family: var(--font-body);
    font-size: 14px;
}

.additional-info-table th {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    width: 160px;
}

.additional-info-table td {
    color: #ffffff;
}

/* Reviews Panel */
.reviews-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.no-reviews-msg {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 15px;
}

.review-form-wrapper {
    max-width: 600px;
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 24px;
}

@media (min-width: 768px) {
    .review-form-wrapper {
        padding: 32px;
    }
}

.review-form-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
}

.review-form-note {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
    font-size: 13px;
    margin-bottom: 24px;
}

.form-rating-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.rating-label {
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
}

.rating-stars {
    display: flex;
    gap: 6px;
}

.rating-stars i {
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.1s;
}

.rating-stars i:hover,
.rating-stars i.fa-solid {
    color: #ffffff;
}

.form-fields-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

@media (min-width: 576px) {
    .form-fields-row {
        flex-direction: row;
        gap: 20px;
    }
}

.submit-review-btn {
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-block;
    margin-top: 10px;
}

.submit-review-btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* =====================================================================
 * Related Products Section
 * ================================================================== */
.related-products-wrapper {
    margin-top: 80px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 60px;
}

.related-products-title {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 32px 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.cart-checkout-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Force storefront product card images to fill their 1:1 containers */
.product-card .product-image-container .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Set product title text color to white with green hover state */
.product-title,
.product-title a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.product-title a:hover {
    color: #1cb862 !important;
}

/* =====================================================================
 * Checkout Page Styles
 * ================================================================== */

.checkout-section {
    padding: 120px 0 80px;
    min-height: 100vh;
    background: #000000;
    color: #ffffff;
}

.checkout-breadcrumb {
    margin-bottom: 16px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.checkout-breadcrumb a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.checkout-breadcrumb a:hover {
    color: #1cb862;
}

.breadcrumb-separator {
    color: #555555;
    margin: 0 8px;
}

.breadcrumb-current {
    color: #ffffff;
}

.checkout-page-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Empty State */
.checkout-empty {
    text-align: center;
    padding: 80px 20px;
}

.checkout-empty-icon {
    font-size: 64px;
    color: #333333;
    margin-bottom: 24px;
    display: block;
}

.checkout-empty h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.checkout-empty p {
    color: #888888;
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 32px;
}

.checkout-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #1cb862;
    color: #000000;
    border: none;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.checkout-back-btn:hover {
    background: #15944d;
}

/* Layout */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 960px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.checkout-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px;
    margin-bottom: 24px;
}

.checkout-card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Form Fields */
.checkout-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 560px) {
    .checkout-form-row {
        grid-template-columns: 1fr;
    }
}

.checkout-field {
    margin-bottom: 20px;
}

.checkout-field label {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: #cccccc;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkout-field label .required {
    color: #1cb862;
}

.checkout-input,
.checkout-select,
.checkout-textarea {
    width: 100%;
    padding: 12px 16px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14px;
    transition: border-color 0.3s ease;
    outline: none;
    box-sizing: border-box;
}

.checkout-input:focus,
.checkout-select:focus,
.checkout-textarea:focus {
    border-color: #1cb862;
}

.checkout-input::placeholder,
.checkout-textarea::placeholder {
    color: #555555;
}

.checkout-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23888888' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.checkout-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Order Summary */
.checkout-order-summary {
    position: sticky;
    top: 100px;
}

.checkout-order-items {
    margin-bottom: 20px;
}

.checkout-order-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.checkout-order-item:last-child {
    border-bottom: none;
}

.checkout-item-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    overflow: hidden;
    background: #0d0d0d;
}

.checkout-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-item-details {
    flex: 1;
    min-width: 0;
}

.checkout-item-name {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.checkout-item-qty {
    font-family: var(--font-body);
    font-size: 12px;
    color: #888888;
}

.checkout-item-price {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #1cb862;
    flex-shrink: 0;
}

/* Totals */
.checkout-order-totals {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.checkout-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: #cccccc;
}

.checkout-grand-total {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.checkout-grand-total span:last-child {
    color: #1cb862;
}

/* Payment Methods */
.checkout-payment-card {
    position: sticky;
    top: calc(100px + 24px);
}

.checkout-gateway-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.checkout-gateway-item {
    margin-bottom: 12px;
}

.checkout-gateway-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.checkout-gateway-label:hover {
    border-color: #1cb862;
}

.checkout-gateway-radio {
    accent-color: #1cb862;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.checkout-gateway-radio:checked + .checkout-gateway-name {
    color: #1cb862;
}

.checkout-gateway-name {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    flex: 1;
    transition: color 0.3s ease;
}

.checkout-gateway-icon {
    flex-shrink: 0;
}

.checkout-gateway-icon img {
    max-height: 24px;
    width: auto;
}

.checkout-gateway-desc {
    padding: 16px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: none;
    margin-top: -1px;
    font-family: var(--font-body);
    font-size: 13px;
    color: #999999;
    line-height: 1.6;
}

.checkout-no-payment {
    text-align: center;
    padding: 32px;
    background: rgba(255, 165, 0, 0.08);
    border: 1px solid rgba(255, 165, 0, 0.2);
    margin-bottom: 24px;
}

.checkout-no-payment i {
    font-size: 32px;
    color: #ffa500;
    margin-bottom: 12px;
    display: block;
}

.checkout-no-payment p {
    font-family: var(--font-body);
    font-size: 14px;
    color: #cccccc;
    margin: 0;
}

/* Place Order Button */
.checkout-place-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 32px;
    background: #1cb862;
    color: #000000;
    border: none;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-place-order-btn:hover {
    background: #15944d;
}

.checkout-place-order-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkout-terms-text {
    font-family: var(--font-body);
    font-size: 12px;
    color: #666666;
    line-height: 1.6;
    margin-top: 16px;
    text-align: center;
}

/* WooCommerce default form field overrides */
.checkout-section .woocommerce-NoticeGroup,
.checkout-section .woocommerce-error,
.checkout-section .woocommerce-info,
.checkout-section .woocommerce-message {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    list-style: none !important;
}

.checkout-section .woocommerce-error {
    border-left: 3px solid #ff4444 !important;
}

.checkout-section .woocommerce-error li {
    color: #ff6666 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
}

.checkout-section .woocommerce-message {
    border-left: 3px solid #1cb862 !important;
}
/* =====================================================================
 * Cart Drawer Coupon & Discount Styles
 * ================================================================== */
.cart-coupon-wrap {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-coupon-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.cart-coupon-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.5px;
    outline: none;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.cart-coupon-input:focus {
    border-color: #1cb862;
}

.cart-coupon-input::placeholder {
    color: #666666;
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

.cart-coupon-btn {
    padding: 10px 18px;
    background: #151515;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.cart-coupon-btn:hover {
    background: #1cb862;
    border-color: #1cb862;
    color: #000000;
}

.cart-coupon-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.cart-coupon-status {
    margin-top: 8px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.4;
}

.cart-coupon-status.success {
    color: #1cb862;
}

.cart-coupon-status.error {
    color: #ff5555;
}

.cart-coupon-applied-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(28, 184, 98, 0.1);
    border: 1px solid rgba(28, 184, 98, 0.3);
    margin-top: 8px;
}

.cart-coupon-pill-text {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    color: #1cb862;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cart-coupon-remove-btn {
    background: transparent;
    border: none;
    color: #888888;
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.cart-coupon-remove-btn:hover {
    color: #ff5555;
}

.cart-discount-row .cart-total-value {
    color: #1cb862 !important;
}

.cart-grand-total-row {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-grand-total-row .cart-total-value {
    font-size: 20px;
    color: #ffffff;
}
/* =====================================================================
 * Checkout Order Received (Thank You) Styles
 * ================================================================== */
.checkout-order-success {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    padding: 40px 0 60px;
}

.order-success-icon-wrap {
    font-size: 64px;
    color: #1cb862;
    margin-bottom: 24px;
}

.order-success-title {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.order-success-subtitle {
    font-family: var(--font-body);
    font-size: 15px;
    color: #888888;
    margin-bottom: 40px;
}

.order-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 40px;
    text-align: left;
}

.order-overview-item {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
}

.overview-label {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.overview-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
}

.order-total-highlight {
    color: #1cb862 !important;
}

.order-details-card {
    text-align: left;
    margin-bottom: 40px;
}

.order-success-actions {
    text-align: center;
    margin-top: 32px;
}
/* =====================================================================
 * Dedicated Cart Page Styles
 * ================================================================== */
.cart-page-section {
    padding: 120px 0 80px;
    min-height: 100vh;
    background: #000000;
    color: #ffffff;
}

.cart-breadcrumb {
    margin-bottom: 16px;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.cart-breadcrumb a {
    color: #888888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cart-breadcrumb a:hover {
    color: #1cb862;
}

.cart-page-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Notices */
.cart-notices-wrapper .woocommerce-message,
.cart-notices-wrapper .woocommerce-error,
.cart-notices-wrapper .woocommerce-info {
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 16px 20px !important;
    margin-bottom: 24px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    list-style: none !important;
}

.cart-notices-wrapper .woocommerce-message {
    border-left: 4px solid #1cb862 !important;
}

.cart-notices-wrapper .woocommerce-error {
    border-left: 4px solid #ff4444 !important;
    color: #ff7777 !important;
}

.cart-notices-wrapper .woocommerce-info {
    border-left: 4px solid #00aaff !important;
}

.cart-notices-wrapper .button.wc-forward {
    background: #1cb862 !important;
    color: #000000 !important;
    padding: 8px 16px !important;
    font-family: var(--font-heading) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border: none !important;
}

/* Empty State */
.cart-empty-card {
    text-align: center;
    padding: 80px 20px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-empty-icon {
    font-size: 64px;
    color: #333333;
    margin-bottom: 24px;
    display: block;
}

.cart-empty-card h2 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.cart-empty-card p {
    color: #888888;
    font-family: var(--font-body);
    font-size: 14px;
    margin-bottom: 32px;
}

.cart-return-shop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: #1cb862;
    color: #000000;
    border: none;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.cart-return-shop-btn:hover {
    background: #15944d;
}

/* Layout */
.cart-page-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 960px) {
    .cart-page-layout {
        grid-template-columns: 1fr;
    }
}

/* Items List */
.cart-items-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.cart-item-card {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    align-items: center;
}

@media (max-width: 600px) {
    .cart-item-card {
        grid-template-columns: 80px 1fr;
        gap: 16px;
    }
    .cart-item-remove-box {
        grid-column: 2;
        justify-self: end;
    }
}

.cart-item-thumb-box {
    width: 100px;
    height: 100px;
    background: #0a0a0a;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-thumb-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.cart-item-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cart-item-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cart-item-title a:hover {
    color: #1cb862;
}

.cart-item-unit-price {
    font-family: var(--font-body);
    font-size: 13px;
    color: #888888;
    margin-bottom: 12px;
}

.cart-item-qty-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.cart-qty-spinner {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #000000;
}

.cart-qty-btn {
    background: transparent;
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 11px;
    transition: background 0.2s ease;
}

.cart-qty-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #1cb862;
}

.cart-qty-input {
    width: 44px;
    height: 32px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    -moz-appearance: textfield;
}

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

.cart-item-line-total {
    font-family: var(--font-heading);
    font-size: 14px;
    color: #cccccc;
}

.cart-item-line-total strong {
    color: #1cb862;
    font-size: 16px;
}

.cart-item-remove-link {
    color: #666666;
    font-size: 18px;
    text-decoration: none;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.cart-item-remove-link:hover {
    color: #ff4444;
}

/* Actions Bar: Coupon + Update */
.cart-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    flex-wrap: wrap;
}

.cart-coupon-input-group {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 260px;
}

.cart-coupon-box-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 0.5px;
    outline: none;
    transition: border-color 0.2s ease;
}

.cart-coupon-box-input:focus {
    border-color: #1cb862;
}

.cart-coupon-box-input::placeholder {
    color: #666666;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
}

.cart-coupon-apply-btn {
    padding: 12px 24px;
    background: #1cb862;
    color: #000000;
    border: none;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cart-coupon-apply-btn:hover {
    background: #15944d;
}

.cart-update-table-btn {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.cart-update-table-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* Totals Sidebar Card */
.cart-totals-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px;
    position: sticky;
    top: 100px;
}

.cart-totals-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cart-totals-breakdown {
    margin-bottom: 28px;
}

.cart-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: #cccccc;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.cart-discount-row {
    color: #1cb862 !important;
}

.cart-discount-row span:last-child {
    color: #1cb862 !important;
    font-weight: 600;
}

.cart-discount-row .woocommerce-remove-coupon {
    color: #888888;
    font-size: 11px;
    margin-left: 6px;
    text-decoration: underline;
}

.cart-discount-row .woocommerce-remove-coupon:hover {
    color: #ff4444;
}

.cart-grand-total {
    padding-top: 18px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: none;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.cart-grand-total span:last-child {
    color: #1cb862;
    font-size: 22px;
}

.cart-checkout-proceed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: #1cb862;
    color: #000000;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: background 0.3s ease;
    box-sizing: border-box;
    margin-bottom: 16px;
}

.cart-checkout-proceed-btn:hover {
    background: #15944d;
}

.cart-continue-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    color: #888888;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.cart-continue-link:hover {
    color: #ffffff;
}
/* =====================================================================
 * WooCommerce Notice Boxes (Fix Overlapping Icons & Text)
 * ================================================================== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.cart-notices-wrapper .woocommerce-message,
.cart-notices-wrapper .woocommerce-error,
.cart-notices-wrapper .woocommerce-info,
.checkout-section .woocommerce-message,
.checkout-section .woocommerce-error,
.checkout-section .woocommerce-info {
    position: relative !important;
    background: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 16px 24px 16px 56px !important;
    margin-bottom: 24px !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before,
.cart-notices-wrapper .woocommerce-message::before,
.cart-notices-wrapper .woocommerce-error::before,
.cart-notices-wrapper .woocommerce-info::before,
.checkout-section .woocommerce-message::before,
.checkout-section .woocommerce-error::before,
.checkout-section .woocommerce-info::before {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    display: inline-block !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.woocommerce-message,
.cart-notices-wrapper .woocommerce-message,
.checkout-section .woocommerce-message {
    border-left: 4px solid #1cb862 !important;
}

.woocommerce-message::before,
.cart-notices-wrapper .woocommerce-message::before,
.checkout-section .woocommerce-message::before {
    color: #1cb862 !important;
}

.woocommerce-error,
.cart-notices-wrapper .woocommerce-error,
.checkout-section .woocommerce-error {
    border-left: 4px solid #ff4444 !important;
    color: #ff7777 !important;
}

.woocommerce-error::before,
.cart-notices-wrapper .woocommerce-error::before,
.checkout-section .woocommerce-error::before {
    color: #ff4444 !important;
}

.woocommerce-error li,
.cart-notices-wrapper .woocommerce-error li,
.checkout-section .woocommerce-error li {
    color: #ff7777 !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    list-style: none !important;
}

.woocommerce-info,
.cart-notices-wrapper .woocommerce-info,
.checkout-section .woocommerce-info {
    border-left: 4px solid #00aaff !important;
}

.woocommerce-info::before,
.cart-notices-wrapper .woocommerce-info::before,
.checkout-section .woocommerce-info::before {
    color: #00aaff !important;
}
/* =====================================================================
 * Enhanced Thank You / Order Received Page Styles
 * ================================================================== */
.thankyou-page-container {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.thankyou-hero-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 32px;
    position: relative;
}

.thankyou-icon-circle {
    width: 72px;
    height: 72px;
    background: rgba(28, 184, 98, 0.15);
    border: 2px solid #1cb862;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 28px;
    color: #1cb862;
    box-shadow: 0 0 30px rgba(28, 184, 98, 0.2);
}

.thankyou-icon-failed {
    background: rgba(255, 68, 68, 0.15);
    border-color: #ff4444;
    color: #ff4444;
    box-shadow: 0 0 30px rgba(255, 68, 68, 0.2);
}

.thankyou-badge-tag {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(28, 184, 98, 0.12);
    border: 1px solid rgba(28, 184, 98, 0.3);
    color: #1cb862;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.thankyou-main-title {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.thankyou-main-desc {
    font-family: var(--font-body);
    font-size: 15px;
    color: #999999;
    max-width: 550px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.thankyou-main-desc strong {
    color: #ffffff;
}

/* Meta Grid */
.thankyou-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    text-align: left;
    margin-top: 24px;
}

.thankyou-meta-item {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 20px;
}

.thankyou-meta-label {
    display: block;
    font-family: var(--font-body);
    font-size: 11px;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.thankyou-meta-val {
    display: block;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.thankyou-val-highlight {
    color: #1cb862 !important;
    font-size: 16px !important;
}

.thankyou-status-pill {
    color: #1cb862;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Details Grid */
.thankyou-details-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
    margin-bottom: 40px;
}

@media (max-width: 900px) {
    .thankyou-details-grid {
        grid-template-columns: 1fr;
    }
}

.thankyou-card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px;
    margin-bottom: 24px;
}

.thankyou-card-title {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}

/* Items List */
.thankyou-items-list {
    margin-bottom: 24px;
}

.thankyou-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.thankyou-item-row:last-child {
    border-bottom: none;
}

.thankyou-item-thumb {
    width: 60px;
    height: 60px;
    background: #0a0a0a;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thankyou-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

.thankyou-no-thumb {
    color: #444444;
    font-size: 20px;
}

.thankyou-item-info {
    flex: 1;
    min-width: 0;
}

.thankyou-item-name {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.thankyou-item-qty {
    font-family: var(--font-body);
    font-size: 12px;
    color: #888888;
}

.thankyou-item-price {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #1cb862;
    flex-shrink: 0;
}

/* Breakdown */
.thankyou-totals-breakdown {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 16px;
}

.thankyou-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: #cccccc;
}

.thankyou-discount-row {
    color: #1cb862 !important;
}

.thankyou-discount-row span:last-child {
    color: #1cb862 !important;
    font-weight: 600;
}

.thankyou-grand-total {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}

.thankyou-grand-total span:last-child {
    color: #1cb862;
    font-size: 20px;
}

/* Address Block */
.thankyou-address-block {
    font-family: var(--font-body);
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.7;
}

.thankyou-customer-name {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 8px;
}

.thankyou-contact-details {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.thankyou-contact-details p {
    margin-bottom: 6px;
    color: #888888;
    display: flex;
    align-items: center;
    gap: 8px;
}

.thankyou-contact-details p i {
    color: #1cb862;
    font-size: 12px;
}

.thankyou-order-note {
    font-family: var(--font-body);
    font-size: 13px;
    color: #999999;
    line-height: 1.6;
    font-style: italic;
}

/* Actions */
.thankyou-footer-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.thankyou-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: #1cb862;
    color: #000000;
    border: none;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.thankyou-btn-primary:hover {
    background: #15944d;
}

.thankyou-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.thankyou-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* BACS / Bank Instructions Override */
.woocommerce-bacs-bank-details {
    list-style: none;
    padding: 20px;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}

.woocommerce-bacs-bank-details li {
    font-family: var(--font-body);
    font-size: 14px;
    color: #cccccc;
    margin-bottom: 8px;
}

.woocommerce-bacs-bank-details li strong {
    color: #ffffff;
}
/* =====================================================================
 * Header Action Buttons (Account & Cart)
 * ================================================================== */
.header-shop-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

.global-account-btn,
.global-cart-btn {
    position: relative;
    background: transparent;
    border: none;
    color: #ffffff !important;
    font-size: 18px;
    width: 38px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.global-account-btn:hover,
.global-cart-btn:hover {
    color: #1cb862 !important;
    transform: translateY(-1px);
}

.cart-badge-count {
    position: absolute;
    top: 18px;
    right: 2px;
    background: #1cb862;
    color: #000000;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 3px;
}

/* =====================================================================
 * 1789 MusicTech - Authentication & Customer Account Styling
 * ================================================================== */

/* --- Hero & Layout Wrappers --- */
.account-main-section {
    padding: 120px 0 90px;
    background: #000000;
    min-height: calc(100vh - 70px - 220px);
}

.account-main-section.is-auth-page {
    padding: 110px 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-hero-section {
    display: none !important;
}

.account-main-wrapper {
    width: 100%;
}

/* Fix generic WordPress page fallback (page.php) height without featured image */
.page:not(.single-post) .page-hero.blog-single-hero:not(:has(.featured-bg-img)) {
    height: auto !important;
    min-height: unset !important;
    padding: 140px 0 30px !important;
    align-items: center !important;
}

.page:not(.single-post) .page-hero.blog-single-hero:not(:has(.featured-bg-img)) .featured-container {
    padding-bottom: 0 !important;
}

.page:not(.single-post) .article-section {
    padding: 40px 0 80px !important;
}
/* --- WooCommerce Notice Overrides --- */
.account-main-wrapper .woocommerce-message,
.account-main-wrapper .woocommerce-info,
.account-main-wrapper .woocommerce-error {
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
    padding: 16px 20px;
    margin-bottom: 30px;
    font-family: var(--font-body);
    font-size: 14px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
}

.account-main-wrapper .woocommerce-message {
    border-left: 4px solid #1cb862;
}

.account-main-wrapper .woocommerce-info {
    border-left: 4px solid #3b82f6;
}

.account-main-wrapper .woocommerce-error {
    border-left: 4px solid #ef4444;
}

.account-main-wrapper .woocommerce-message a,
.account-main-wrapper .woocommerce-info a,
.account-main-wrapper .woocommerce-error a {
    color: #1cb862;
    text-decoration: underline;
    font-weight: 600;
}

.account-main-wrapper .woocommerce-message .button,
.account-main-wrapper .woocommerce-info .button {
    background: #ffffff;
    color: #000000 !important;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.account-main-wrapper .woocommerce-message .button:hover {
    background: #1cb862;
}

/* --- Authentication Card & Tabs --- */
.auth-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px 0;
}

.auth-card {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    position: relative;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #040404;
}

.auth-tab-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #777777;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 20px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.auth-tab-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.02);
}

.auth-tab-btn.active {
    color: #1cb862;
    border-bottom-color: #1cb862;
    background: #080808;
}

.auth-panel {
    display: none;
    padding: 40px;
}

.auth-panel.active {
    display: block;
    animation: fadeInAuth 0.3s ease-out;
}

@keyframes fadeInAuth {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-panel-header {
    margin-bottom: 30px;
}

.auth-icon-badge {
    width: 50px;
    height: 50px;
    background: rgba(28, 184, 98, 0.1);
    border: 1px solid rgba(28, 184, 98, 0.3);
    color: #1cb862;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.auth-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-family: var(--font-body);
    font-size: 14px;
    color: #999999;
    line-height: 1.5;
}

/* --- Form Fields & Inputs --- */
.auth-form .form-group,
.account-form .form-group {
    margin-bottom: 22px;
    position: relative;
}

.auth-form label,
.account-form label {
    display: block;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #cccccc;
    margin-bottom: 8px;
}

.auth-form label .required,
.account-form label .required {
    color: #1cb862;
}

.label-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.label-with-action label {
    margin-bottom: 0;
}

.link-lost-pw {
    font-family: var(--font-body);
    font-size: 12px;
    color: #888888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.link-lost-pw:hover {
    color: #1cb862;
    text-decoration: underline;
}

.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 16px;
    color: #555555;
    font-size: 14px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.input-with-icon .account-input {
    padding-left: 44px;
}

.input-with-icon:focus-within .input-icon {
    color: #1cb862;
}

.account-input,
.account-main-wrapper input[type="text"],
.account-main-wrapper input[type="email"],
.account-main-wrapper input[type="password"],
.account-main-wrapper input[type="tel"],
.account-main-wrapper select,
.account-main-wrapper textarea {
    width: 100%;
    background: #050505;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 14px;
    padding: 14px 16px;
    border-radius: 0px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.account-input:focus,
.account-main-wrapper input:focus,
.account-main-wrapper select:focus,
.account-main-wrapper textarea:focus {
    outline: none;
    background: #0c0c0c;
    border-color: #1cb862;
    box-shadow: 0 0 0 1px #1cb862;
}

.password-input-wrapper {
    position: relative;
}

.btn-toggle-pw {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #777777;
    font-size: 15px;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    z-index: 3;
}

.btn-toggle-pw:hover {
    color: #1cb862;
}

.field-hint {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    color: #777777;
    margin-top: 6px;
    line-height: 1.4;
}

/* Custom Checkbox */
.form-group-checkbox {
    margin: 18px 0 24px;
}

.custom-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    color: #aaaaaa;
    user-select: none;
}

.custom-checkbox-label input {
    accent-color: #1cb862;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.auth-terms-notice {
    font-family: var(--font-body);
    font-size: 12px;
    color: #777777;
    line-height: 1.5;
    margin: 16px 0 24px;
}

.auth-terms-notice a {
    color: #1cb862;
    text-decoration: underline;
}

/* Auth Submit Button */
.btn-account-primary,
.account-main-wrapper .button.btn-account-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #1cb862;
    color: #000000 !important;
    border: 1px solid #1cb862;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 16px 32px;
    cursor: pointer;
    text-decoration: none;
    border-radius: 0px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: auto;
}

.btn-account-primary:hover,
.account-main-wrapper .button.btn-account-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(28, 184, 98, 0.3);
}

.btn-auth-submit {
    width: 100%;
}

.auth-switch-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    color: #888888;
}

.btn-text-switch {
    background: transparent;
    border: none;
    color: #1cb862;
    font-weight: 600;
    cursor: pointer;
    padding: 0 4px;
    text-decoration: underline;
    font-family: inherit;
    font-size: inherit;
}

.btn-text-switch:hover {
    color: #ffffff;
}

.back-to-login-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #aaaaaa;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.back-to-login-link:hover {
    color: #1cb862;
}

/* =====================================================================
 * Customer Dashboard Layout (Sidebar + Content)
 * ================================================================== */
.account-dashboard-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

/* --- Account Sidebar Nav --- */
.account-sidebar-nav {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 100px;
}

.account-user-card {
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    background: #040404;
}

.account-user-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #1cb862;
    object-fit: cover;
}

.account-user-meta {
    overflow: hidden;
}

.account-user-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.account-user-email {
    font-family: var(--font-body);
    font-size: 12px;
    color: #888888;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.account-nav-list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.account-nav-list li {
    margin: 0;
}

.account-nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.account-nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
    border-left-color: rgba(255, 255, 255, 0.3);
}

.account-nav-link.active,
.account-nav-list li.is-active .account-nav-link {
    color: #1cb862;
    background: rgba(28, 184, 98, 0.05);
    border-left-color: #1cb862;
}

.account-nav-icon {
    font-size: 14px;
    width: 16px;
    text-align: center;
}

/* --- Dashboard Welcome & Metrics --- */
.dashboard-welcome-banner {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 36px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.welcome-tag {
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #1cb862;
    display: block;
    margin-bottom: 6px;
}

.welcome-heading {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 12px;
}

.welcome-description {
    font-family: var(--font-body);
    font-size: 14px;
    color: #999999;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

.welcome-description a {
    color: #1cb862;
    text-decoration: underline;
}

.btn-dashboard-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-dashboard-logout:hover {
    background: #ef4444;
    border-color: #ef4444;
    color: #ffffff;
}

/* Stat Cards Grid */
.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(28, 184, 98, 0.4);
}

/* About-page stat cards: fill the row */
.about-stats-section .stats-grid {
    grid-template-columns: repeat(3, 1fr);
}

.about-stats-section .stat-card {
    flex: 1;
}

.stat-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #1cb862;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-family: var(--font-body);
    font-size: 12px;
    color: #777777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1cb862;
    text-decoration: none;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: transform 0.2s ease;
}

.stat-link:hover {
    color: #ffffff;
}

.stat-link:hover i {
    transform: translateX(4px);
}

/* Quick Actions Hub */
.section-subheading {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 18px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.action-card {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.action-card:hover {
    background: #0e0e0e;
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.action-icon {
    width: 44px;
    height: 44px;
    background: rgba(28, 184, 98, 0.1);
    color: #1cb862;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-details h4 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0 0 4px;
}

.action-details p {
    font-family: var(--font-body);
    font-size: 12px;
    color: #888888;
    margin: 0;
    line-height: 1.4;
}

.action-arrow {
    color: #555555;
    font-size: 14px;
    margin-left: auto;
    transition: transform 0.2s ease, color 0.2s ease;
}

.action-card:hover .action-arrow {
    color: #1cb862;
    transform: translateX(4px);
}

/* =====================================================================
 * Orders & Tables
 * ================================================================== */
.account-panel-header {
    margin-bottom: 24px;
}

.account-panel-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 6px;
}

.account-panel-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: #888888;
    margin: 0;
}

.orders-table-container,
.order-items-table-wrapper {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
}

.account-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-family: var(--font-body);
    font-size: 14px;
}

.account-table th {
    background: #040404;
    padding: 16px 20px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888888;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.account-table td {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: #cccccc;
    vertical-align: middle;
}

.account-table tr:hover td {
    background: rgba(255, 255, 255, 0.015);
}

.order-number-link {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.order-number-link:hover {
    color: #1cb862;
    text-decoration: underline;
}

/* Status Badges */
.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.order-status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #888888;
}

.order-status-badge.status-completed {
    background: rgba(28, 184, 98, 0.12);
    color: #1cb862;
}
.order-status-badge.status-completed .status-dot { background: #1cb862; }

.order-status-badge.status-processing {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}
.order-status-badge.status-processing .status-dot { background: #f59e0b; }

.order-status-badge.status-on-hold {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}
.order-status-badge.status-on-hold .status-dot { background: #a855f7; }

.order-status-badge.status-cancelled,
.order-status-badge.status-failed {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.order-status-badge.status-cancelled .status-dot,
.order-status-badge.status-failed .status-dot { background: #ef4444; }

.btn-order-action {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-order-action:hover {
    background: #1cb862;
    border-color: #1cb862;
    color: #000000;
}

/* Empty States */
.account-empty-state {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 60px 40px;
    text-align: center;
}

.empty-icon {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #666666;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.empty-title {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 8px;
}

.empty-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: #888888;
    margin: 0 auto 24px;
    max-width: 400px;
}

/* =====================================================================
 * View Order Page
 * ================================================================== */
.view-order-header {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888;
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s ease;
}

.back-link:hover {
    color: #1cb862;
}

.order-headline {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0 0 10px;
}

.order-meta-chips {
    display: flex;
    align-items: center;
    gap: 12px;
}

.meta-chip {
    font-family: var(--font-body);
    font-size: 12px;
    color: #aaaaaa;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.order-header-total {
    text-align: right;
}

.total-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #777777;
    margin-bottom: 4px;
}

.total-amount {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 900;
    color: #1cb862;
}

.order-item-row .item-name-cell {
    display: flex;
    align-items: center;
    gap: 16px;
}

.item-thumb img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.item-title {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.item-title:hover {
    color: #1cb862;
}

.order-total-row th {
    background: #040404;
    color: #aaaaaa;
    font-weight: 600;
}

.order-total-row.total-order_total td {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 900;
    color: #1cb862;
}

.order-addresses-grid,
.account-addresses-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 30px;
}

.address-box,
.address-card {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
}

.address-box-title,
.address-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.address-box-content,
.formatted-address {
    font-family: var(--font-body);
    font-size: 14px;
    color: #bbbbbb;
    line-height: 1.7;
    font-style: normal;
}

.btn-address-edit,
.btn-address-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1cb862;
    text-decoration: none;
}

.btn-address-edit:hover,
.btn-address-add:hover {
    color: #ffffff;
}

.address-empty-text {
    color: #777777;
    margin-bottom: 16px;
}

/* =====================================================================
 * Downloads Grid
 * ================================================================== */
.downloads-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.download-card {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.download-card:hover {
    transform: translateY(-2px);
    border-color: rgba(28, 184, 98, 0.4);
}

.download-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(28, 184, 98, 0.1);
    color: #1cb862;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.download-card-info {
    flex-grow: 1;
}

.download-product-name {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 4px;
}

.download-product-name a {
    color: #ffffff;
    text-decoration: none;
}

.download-product-name a:hover {
    color: #1cb862;
}

.download-file-name {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: #888888;
    margin-bottom: 8px;
}

.download-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.meta-tag {
    font-family: var(--font-body);
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #aaaaaa;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-download-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1cb862;
    color: #000000;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-download-file:hover {
    background: #ffffff;
    color: #000000;
    transform: translateY(-1px);
}

/* =====================================================================
 * Forms (Edit Account / Edit Address)
 * ================================================================== */
.form-section-card {
    background: #080808;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 30px;
    margin-bottom: 30px;
}

.form-card-title {
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-card-desc {
    font-family: var(--font-body);
    font-size: 13px;
    color: #777777;
    margin: 0 0 24px;
}

.form-row-group.two-cols,
.form-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-actions-row {
    margin-top: 30px;
}

.text-right {
    text-align: right;
}


/* --- Shop Catalog Top Actions & Sorting Bar --- */
.catalog-top-actions,
.shop-toolbar,
.woocommerce .woocommerce-products-header + .woocommerce-notices-wrapper + form.woocommerce-ordering {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-bottom: 18px !important;
    margin-bottom: 35px !important;
    width: 100% !important;
}

.results-count,
.woocommerce .woocommerce-result-count {
    font-family: var(--font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    color: #bcbcbc !important;
    margin: 0 !important;
    float: none !important;
}

.sort-select-wrapper,
.sort-wrapper {
    position: relative !important;
    min-width: 190px !important;
    margin: 0 !important;
    float: none !important;
}

.sort-select-wrapper select,
.sort-wrapper select,
#catalogSort,
.woocommerce .woocommerce-ordering select.orderby {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 100% !important;
    min-width: 180px !important;
    background: #000000 !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 0px !important;
    color: #ffffff !important;
    padding: 10px 38px 10px 16px !important;
    font-family: var(--font-heading, 'Rajdhani', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: border-color 0.25s ease, background 0.25s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.sort-select-wrapper select:hover,
.sort-wrapper select:hover,
#catalogSort:hover,
.woocommerce .woocommerce-ordering select.orderby:hover {
    border-color: #ffffff !important;
    background: #0d0d0d !important;
}

.sort-select-wrapper select:focus,
.sort-wrapper select:focus,
#catalogSort:focus,
.woocommerce .woocommerce-ordering select.orderby:focus {
    border-color: #1cb862 !important;
    box-shadow: 0 0 0 1px rgba(28, 184, 98, 0.4) !important;
}

.sort-select-wrapper select option,
.sort-wrapper select option,
#catalogSort option,
.woocommerce .woocommerce-ordering select.orderby option {
    background: #0d0d0d !important;
    color: #ffffff !important;
    padding: 10px !important;
}

.sort-select-wrapper::after,
.sort-wrapper::after {
    content: "â–¾" !important;
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    pointer-events: none !important;
    line-height: 1 !important;
}


/* ---------------------------------------------------------------------
 * Hero background video (MP4 files and YouTube / Vimeo embeds)
 *
 * When an artist (or producer) profile has a hero_video URL, the
 * template renders a <video> (for direct video files) or a responsive
 * wrapper with an <iframe> (for YouTube / Vimeo) instead of an <img>.
 * This styles it identically - full-bleed, cover-fit, behind the overlay.
 * ------------------------------------------------------------------ */

.artist-single-hero .hero-bg-video,
.producer-single-hero .hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    z-index: 0;
}

.artist-single-hero .hero-video-wrapper,
.producer-single-hero .hero-video-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background-color: #000000;
}

.artist-single-hero .hero-video-wrapper iframe,
.producer-single-hero .hero-video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120vw;
    height: 67.5vw;
    min-height: 120vh;
    min-width: 213.33vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: none;
}

/* ---------------------------------------------------------------------
 * Media card artist name subtitle
 * ------------------------------------------------------------------ */
.media-artist-text {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    margin: -2px 0 0 0;
    letter-spacing: 0.3px;
}

#artistPopularSection .media-artist-text,
#producerPopularSection .media-artist-text {
    color: rgba(0, 0, 0, 0.65);
}