/* =============================================================
   Philippine Guitar — Theme (unified for public + admin)
   Carried forward from v1 /css/custom.css with CSS custom properties
   added on top so colors live in one place.
   ============================================================= */

/* Mobile horizontal-scroll guard — Bootstrap row negative margins
   sometimes escape their container's padding (especially with g-5
   gutter classes), causing iOS rubber-band horizontal scrolling
   when the user accidentally swipes left/right. overflow-x: clip
   prevents the scroll without creating a new scroll container,
   which keeps position:sticky working on child elements. */
html, body { overflow-x: clip; }

:root {
  /* Brand palette — single source of truth */
  --pg-peach:  #F4E7E1;
  --pg-orange: #FF9B45;
  --pg-rust:   #D5451B;     /* primary brand */
  --pg-brown:  #521C0D;

  /* Common derivations */
  --pg-navbar-gradient: linear-gradient(to right, var(--pg-rust), var(--pg-orange));
  --pg-card-bg:         rgba(255, 255, 255, 0.92);
  --pg-border-soft:     rgba(82, 28, 13, 0.12);

  /* Bootstrap overrides */
  --bs-primary:     var(--pg-rust);
  --bs-primary-rgb: 213, 69, 27;
  --bs-body-color:  var(--pg-brown);
}

/* Layout Styles */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/*
body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    background-image: url('/css/img/bg-02.svg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
*/

/* Fixed background with right side visible */
body:before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('/css/img/bg-02.svg');
    background-size: cover;
   background-position: 100% 50%;
    background-repeat: no-repeat;
    z-index: -1;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    /* Prevent horizontal scroll from full-bleed sections that use
       margin-left: calc(50% - 50vw) (100vw includes the scrollbar width). */
    overflow-x: clip;
}

/*
@media (max-width: 600px) {
    body {
        background: url('/css/img/bg-02.svg') no-repeat right center;
        background-size: cover !important;
        background-attachment: fixed !important;
    }
}
*/

/* Mobile background image adjustment - move 30px to the right */
@media (max-width: 767px) {
    body:before {
        background-position: calc(100% + 20px) 50%;
    }
}

/* Heading Styles with Cormorant Garamond */
h1, h2, h3, h4, h5 {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0px;
}

/* Typography Refinements */
h1 { font-weight: 500; }
h2 { font-weight: 500; }
h3 { font-weight: 500; }
h4 { font-weight: 500; }
h5 { font-weight: 500; }

/* Navbar Styles */
/*.navbar{background-color: var(--pg-rust);}*/
 
.navbar {
  background: linear-gradient(45deg, var(--pg-rust), var(--pg-orange));
  background-size: 130% 130%;
  animation: gradientAnimation 2s ease infinite;
  z-index: 1030;
  position: relative;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 30% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


/* Style for SVG logo — explicit height anchors aspect-ratio sizing because
   the source SVG declares width="100%" height="100%" at its root, which would
   otherwise collapse to 0 when used as an external <img>. */
.navbar-logo {
    width: 200px;
    height: 70px;
    vertical-align: middle;
}
@media (max-width: 991.98px) {
    .navbar-logo { width: 160px; height: 56px; }
}
@media (max-width: 767.98px) {
    .navbar-logo { width: 140px; height: 49px; }
}
.navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.offcanvas-logo {
    height: 36px;
    width: auto;
    max-width: 140px;
    vertical-align: middle;
}

/* Ensure SVG aligns properly in navbar */
.navbar-brand .navbar-logo {
    display: inline-block;
}

/* Optional: Hover effect */
.navbar-logo:hover, .offcanvas-logo:hover {
    filter: brightness(1.2);
}

.navbar .btn-light{background-color: var(--pg-peach);}
.nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* ─── Public footer ─── */
.pg-footer {
  background: var(--pg-brown);
  color: white;
}
.pg-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.pg-footer a:hover {
  color: white;
  text-decoration: underline;
}
.pg-footer-links { font-size: 0.9rem; }
.pg-footer-links a { padding: 0 0.35rem; }
.pg-footer-sep { color: rgba(255, 255, 255, 0.4); padding: 0 0.15rem; }
.pg-footer-fineprint {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

/* ─── FROST GLASS TRIAL — applies to public cards ─── */
/* Roll back by deleting this whole block (between the matching markers) and
   restoring `.pg-product-card { ... background: white }` to its original. */
main.container .card,
.pg-product-card,
.pg-article-row {
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.pg-article-row {
  /* The article row was originally just bottom-bordered; give it card-like
     padding so the frost reads as a panel rather than a transparent strip. */
  padding: 1.5rem;
  border: 1px solid rgba(82, 28, 13, 0.08);
  border-radius: 10px;
  margin-bottom: 1.5rem;
}
.pg-article-row:first-child { padding-top: 1.5rem; }
.pg-article-row:last-child { margin-bottom: 0; }
/* ─── /FROST GLASS TRIAL ─── */

/* ─── Product card ─── */
.pg-product-card {
  border: 1px solid rgba(82, 28, 13, 0.10);
  border-radius: 8px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pg-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(82, 28, 13, 0.12);
  border-color: rgba(213, 69, 27, 0.4);
}
.pg-card-image-link { display: block; overflow: hidden; }
.pg-card-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  /* Anchor to the top of the image so the title and first staff lines
     are always visible (sheet-music previews are tall portraits). */
  object-position: top center;
  background: var(--pg-peach);
  display: block;
  transition: transform .3s ease;
}
.pg-product-card:hover .pg-card-image { transform: scale(1.02); }
.pg-card-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pg-peach);
  color: rgba(82, 28, 13, 0.35);
  font-size: 3rem;
}
.pg-card-title-link {
  color: var(--pg-brown);
  text-decoration: none;
  font-weight: 600;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.25;
}
.pg-card-title-link:hover { color: var(--pg-rust); }
.pg-card-title-sub {
  display: inline-block;
  font-size: 0.78em;
  font-weight: 500;
  color: rgba(82, 28, 13, 0.78);
  margin-top: 0.1em;
}
/* Darker text inside frost-glass cards — pure muted gray washes out against
   the translucent panel; brand-tinted dark reads cleanly. */
.pg-product-card .card-text.text-muted,
.pg-product-card .card-text {
  color: var(--pg-brown) !important;
}
.pg-product-card .card-text em { color: rgba(82, 28, 13, 0.7); }
/* View button — make brand-tinted instead of generic gray. */
.pg-product-card .btn-outline-secondary {
  color: var(--pg-brown);
  border-color: rgba(82, 28, 13, 0.35);
  background: rgba(255, 255, 255, 0.6);
}
.pg-product-card .btn-outline-secondary:hover {
  color: white;
  background: var(--pg-brown);
  border-color: var(--pg-brown);
}

/* Public navbar — links sit on the rust-orange gradient. */
.pg-navbar .navbar-nav .nav-link {
    color: rgba(244, 231, 225, 0.85);
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}
/* Tablet (768–991): bump container padding so the last nav link ("Contact")
   doesn't sit too close to the viewport edge. !important required because
   Bootstrap's .px-4 utility class also uses !important. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .pg-navbar > .container-fluid {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    .pg-navbar .navbar-nav .nav-link {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        font-size: 0.9rem;
    }
}
/* Right-most nav link: zero the inner right-padding so the link's text edge
   aligns with the container's right padding — visually symmetric with the
   logo, which starts at the container's left padding. Applies all viewports. */
.pg-navbar .navbar-nav > li:last-child > .nav-link {
    padding-right: 0;
}
.pg-navbar .navbar-nav .nav-link:hover,
.pg-navbar .navbar-nav .nav-link:focus {
    color: white;
}
.pg-navbar .navbar-nav .nav-link.active {
    color: white;
    font-weight: 600;
}
/* Account dropdown — surfaces in the public navbar between Articles and Contact.
   The toggle inherits the navbar's nav-link styling; we just style the dropdown
   panel to match the storefront palette. */
.pg-nav-dropdown {
    background: var(--pg-peach);
    border: 1px solid rgba(82, 28, 13, 0.10);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(82, 28, 13, 0.15);
    padding: 0.4rem 0;
    min-width: 240px;
}
.pg-nav-dropdown .dropdown-item {
    color: var(--pg-brown);
    font-size: 0.92rem;
    padding: 0.55rem 1rem;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.pg-nav-dropdown .dropdown-item:hover,
.pg-nav-dropdown .dropdown-item:focus {
    background: rgba(213, 69, 27, 0.10);
    color: var(--pg-rust);
}
.pg-nav-dropdown .dropdown-divider {
    border-top-color: rgba(82, 28, 13, 0.12);
    margin: 0.3rem 0;
}
.pg-nav-dropdown .btn-link {
    color: var(--pg-brown);
    font-size: 0.92rem;
    font-weight: 400;
}
.pg-nav-dropdown .btn-link:hover {
    color: var(--pg-rust);
}

/* Cart icon nav item — sits as the right-most link on md+ viewports.
   Faint when the cart is empty, bright with a count badge when it has items.
   On mobile (collapsed nav), it renders as a normal stacked link with the
   word "Cart" alongside the icon. */
.pg-navbar .nav-link.pg-nav-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.pg-navbar .nav-link.pg-nav-cart .bi-bag {
    font-size: 1.15rem;
    line-height: 1;
}
@media (min-width: 768px) {
    .pg-navbar .nav-link.pg-nav-cart {
        opacity: 0.7;          /* faint when empty */
    }
    .pg-navbar .nav-link.pg-nav-cart.has-items,
    .pg-navbar .nav-link.pg-nav-cart:hover,
    .pg-navbar .nav-link.pg-nav-cart:focus,
    .pg-navbar .nav-link.pg-nav-cart.active {
        opacity: 1;
    }
}
.pg-nav-cart-badge {
    position: absolute;
    top: 2px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pg-brown);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
    box-shadow: 0 0 0 2px rgba(213, 69, 27, 0.95);  /* ring matches navbar bg */
}
/* On the home page the navbar is translucent brown — match the badge ring. */
body.pg-home .pg-nav-cart-badge {
    box-shadow: 0 0 0 2px rgba(95, 40, 20, 0.7);
}
/* In the collapsed mobile menu, the badge would sit awkwardly since the link
   is a full-width row. Inline it next to the "Cart (n)" label instead. */
@media (max-width: 767.98px) {
    .pg-nav-cart-badge { display: none; }
}

.pg-navbar .navbar-toggler {
    border-color: rgba(244, 231, 225, 0.5);
    padding: 0.35rem 0.6rem;
}
.pg-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(244, 231, 225, 0.25);
}

/* Collapsed mobile menu (< md) — items stack with comfortable spacing,
   right-aligned text on phones doesn't help so revert ms-auto effect there. */
@media (max-width: 767.98px) {
    .pg-navbar .navbar-collapse {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(244, 231, 225, 0.2);
    }
    .pg-navbar .navbar-nav {
        gap: 0.25rem;
    }
    .pg-navbar .navbar-nav .nav-link {
        padding: 0.6rem 0.5rem;
        border-radius: 4px;
    }
    .pg-navbar .navbar-nav .nav-link.active {
        background: rgba(244, 231, 225, 0.12);
    }
    /* On the home page, the nav is position:absolute over the hero. When the
       mobile menu opens it grows downward — give it a solid backdrop so the
       links don't fight the photograph. */
    body.pg-home .pg-navbar .navbar-collapse.show {
        background: rgba(20, 8, 4, 0.55);
        backdrop-filter: blur(16px) saturate(1.2);
        -webkit-backdrop-filter: blur(16px) saturate(1.2);
        margin: 0.5rem -1rem 0;
        padding: 0.5rem 1rem 0.75rem;
        border-radius: 8px;
    }
}

/* ─── Home-page nav: translucent brown overlay over the hero ───
   Activated by body.pg-home (set in views/layout.php only when path === '/').
   All other pages keep the default rust-orange gradient navbar.
   Background matches .pg-hero-text so the nav and the hero card read as a
   single visual treatment over the photograph. */
body.pg-home .pg-navbar {
    background: rgba(95, 40, 20, 0.5) !important;    /* warm dark, half-transparent */
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    animation: none !important;
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
}
/* Force the public navbar logo to pure white on every page. The source SVG
   embeds a peach-colored PNG; this filter chain neutralizes whatever color
   is in the image data and outputs pure white at the original alpha. */
.pg-navbar .navbar-logo {
    filter: brightness(0) invert(1);
}
body.pg-home main.container {
    padding-top: 0 !important;       /* let the hero sit flush to the top */
}

/* Offcanvas Navbar Customization */
.navbar .offcanvas{background-color:var(--pg-peach);color:var(--pg-brown);}
.offcanvas {
    width: 300px;
    font-family: 'Montserrat', sans-serif;
    background-color:var(--pg-peach);
    color:var(--pg-brown);
}
.navbar .offcanvas .offcanvas-header .btn-close{background-color: var(--pg-peach);color:var(--pg-brown);}

.offcanvas-header {
    background-color: var(--pg-rust);
    border-bottom: 1px solid var(--pg-brown);
}

.offcanvas-body .nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: var(--pg-brown);
    transition: color 0.3s ease;
    padding-left: 10px;
}

.offcanvas-body .nav-link:hover {
    color: var(--pg-peach);
    background-color: var(--pg-orange);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .offcanvas {
        width: 100%;
    }
}

main {flex: 1 0 auto;}

footer {
    flex-shrink: 0;
    background-color: #f8f9fa;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

.footer{background-color: var(--pg-brown);color:#fff;}
.footer .copyright{font-size: .7em;}

/* Utility Classes for Typography */
.text-serif {
    font-family: 'Cormorant Garamond', serif;
}

.text-sans {
    font-family: 'Montserrat', sans-serif;
}

/* Server-Side Cookie Banner Styles (CLEAN VERSION) */
.cookie-banner-server {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--pg-rust);
    padding: 15px 0;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    z-index: 10;
    box-sizing: border-box;
    border-bottom: 2px solid var(--pg-brown);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cookie-banner-server p {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
}

.cookie-banner-server a {
    color: var(--pg-peach);
    text-decoration: underline;
    font-weight: 500;
}

.cookie-banner-server a:hover {
    color: #fff;
    text-decoration: none;
}

.btn-cookie-accept, .btn-cookie-decline {
    background-color: var(--pg-peach);
    color: var(--pg-brown);
    border: 1px solid var(--pg-brown);
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-cookie-accept:hover {
    background-color: var(--pg-brown);
    color: var(--pg-peach);
    border-color: var(--pg-peach);
}

.btn-cookie-decline:hover {
    background-color: var(--pg-orange);
    color: var(--pg-brown);
    border-color: var(--pg-brown);
}

/* Responsive cookie banner */
@media (max-width: 768px) {
    .cookie-banner-server {
        padding: 12px 0;
        position: relative;
        top: auto;
    }
    
    .cookie-banner-server p {
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .btn-cookie-accept,
    .btn-cookie-decline {
        display: block;
        width: 100%;
        max-width: 200px;
        margin: 5px auto;
        text-align: center;
    }
    
    .cookie-banner-server .col-md-4 {
        text-align: center !important;
    }
}

/* Adjust main content when banner is shown */
body:has(.cookie-banner-server) main {
    margin-top: 80px;
}

@media (max-width: 768px) {
    body:has(.cookie-banner-server) main {
        margin-top: 0;
    }
}

/* Content Styles */
main .card {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
} 

main .row.mb-4 .card .card-body {
    padding: 0.75rem;
}

main .row.mb-4 .card .card-header {
    padding: 0.5rem 0.75rem;
}

@media (max-width: 600px) {
    main .card {background-color: rgba(255, 255, 255, 0.9);} 
}

img {loading: lazy;}

.fadeInUp{
    loading: lazy;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Define the fadeInUp animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sheet Music Page Color Scheme 
   Using: var(--pg-peach) (light peach), var(--pg-orange) (orange), var(--pg-rust) (rust), var(--pg-brown) (dark brown) */

/* Main container background and text */
main {
    color: var(--pg-brown);
    max-width: 100%;
    overflow: visible;
    padding: 0 20px;
}


/*  Remove later!!!!
@media (min-width: 768px) {
    main .row.mb-4 .col-md-6:first-child {
        padding-right: 10px;
    }
    
    main .row.mb-4 .col-md-6:last-child {
        padding-left: 10px;
    }
}

REmove later!!!!!!!! */




/* Mobile-specific main content padding */
@media (max-width: 767px) {
    main {
        padding: 0 8px !important;
    }
}

/* Card styling */
main .card {
    background-color: rgba(244, 231, 225, 0.9);
    border-color: var(--pg-rust);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    border-radius: 8px;
}

/* Make sure containers don't add unwanted margins */
main .container, 
main .container-fluid,
main .container-lg, 
main .container-md, 
main .container-sm, 
main .container-xl, 
main .container-xxl {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}


main .card-header {
    background-color: var(--pg-rust);
    color: var(--pg-peach);
    border-bottom: 1px solid var(--pg-brown);
    padding: 0.75rem 1rem;
}

/* Ensure content stays within cards */
main .card-body {
    padding: 1rem;
    overflow: hidden;
}

/* Filter/Sort buttons */
main .btn-outline-primary {
    color: var(--pg-rust);
    border-color: var(--pg-rust);
}

main .btn-outline-primary:hover, 
main .btn-outline-primary:focus {
    background-color: var(--pg-orange);
    color: var(--pg-peach);
    border-color: var(--pg-rust);
}

main .btn-primary {
    background-color: #B73914;        /* darkened from #D5451B for WCAG AA: 5.62:1 with white text */
    border-color: var(--pg-brown);
    color: #fff !important;
}

main .btn-primary:hover,
main .btn-primary:focus {
    background-color: var(--pg-brown);
    border-color: var(--pg-rust);
}

/* Product list header - HIDDEN COMPLETELY FOR ALL DEVICES */
main .card-header.bg-primary {
    display: none !important;
}

/* Product list styling */
main .card-body.p-0 {
    overflow-x: auto;
}

main .card-body.p-0 .row {
    margin: 0;
    flex-wrap: nowrap;
    min-width: 768px;
    border: none !important;
}

/* Remove ALL borders from product rows */
main .card-body.p-0 .row.border-bottom,
main .card-body.p-0 .row {
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Remove any separation between rows */
main .card-body.p-0 .row.p-3:not(:last-child) {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Even rows in the product list */
main .bg-light {
    background-color: rgba(255, 155, 69, 0.2) !important;
    border: none !important;
}

/* Make sure all rows have no borders */
main .row {
    border: none !important;
}

/* Title column styling with improved structure */
main .product-title {
    margin-bottom: 8px;
}

main .product-title strong {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: 0px;
    font-size: 1.5em !important;
    line-height: 1.2;
    display: block;
}


main .product-composer {
    margin-bottom: 4px;
    font-weight: 500;
}

main .product-arranger {
    margin-bottom: 4px;
    color: var(--pg-brown);
    opacity: 0.9;
}

/* Catalog number */
main .product-title .small.text-muted {
    margin-top: 4px;
    display: block;
}

/* Badge styling for categories */
main .category-badge,
main .tablature-badge,
main .skill-badge {
    display: inline-block;
    color: var(--pg-brown);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Add more spacing between columns */
main .row > [class*="col-"] {
    padding-left: 20px;
    padding-right: 20px;
}

/* Add extra spacing for media and purchase columns specifically */
main .row > .col-md-3:last-of-type {
    padding-right: 30px;
}

main .row > .col-md-2:last-of-type {
    padding-left: 30px;
}

/* For tablets and larger screens, remove the left padding on the media column */
@media (min-width: 768px) {
    main .row > .col-md-3:nth-of-type(3) {
        padding-left: 0;
    }
}

/* Media buttons grid layout */
main .media-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 10px 0 0;
}

main .media-buttons-grid .btn {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

@media (max-width: 991px) {
    main .media-buttons-grid {
        grid-template-columns: 1fr;
    }
}

/* Force images to stay contained */
main img {
    max-width: 100%;
    height: auto;
}

/* Media buttons - Enhanced hover states */
main .btn-outline-secondary {
    color: var(--pg-brown);
    border-color: var(--pg-brown);
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.8);
}

main .btn-outline-secondary:hover,
main .btn-outline-secondary:focus {
    background-color: var(--pg-orange);
    color: var(--pg-peach);
    border-color: var(--pg-brown);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(82, 28, 13, 0.2);
}

/* Active state for media buttons */
main .btn-outline-secondary.active,
main .btn-outline-secondary:active {
    background-color: var(--pg-brown);
    color: var(--pg-peach);
    border-color: var(--pg-brown);
}



/* Description toggle styling */
.description-row {
    background-color: rgba(244, 231, 225, 0.5);
    border-top: 1px solid var(--pg-rust);
}

.description-row .alert {
    margin: 0;
    background-color: rgba(255, 155, 69, 0.3);
    color: var(--pg-brown);
    border-color: var(--pg-orange);
}

/* Alert styling */
main .alert-info {
    background-color: rgba(255, 155, 69, 0.3);
    color: var(--pg-brown);
    border-color: var(--pg-orange);
}

/* Text colors */
main .text-muted {
    color: var(--pg-brown) !important;
    opacity: 0.7;
}

/* Link styling */
main a:not(.btn) {
    color: var(--pg-rust);
}

main a:not(.btn):hover {
    color: var(--pg-brown);
}


/* ========================================
   ANIMATED BUY NOW BUTTONS
   ======================================== */

/* Buy Now button animated gradient */
.payhip-buy-button.btn-primary {
    background: linear-gradient(-45deg, var(--pg-rust), var(--pg-orange), var(--pg-rust), var(--pg-orange));
    background-size: 400% 400%;
    animation: gradientShift 37.5s ease infinite;
    border: 2px solid var(--pg-rust);
    color: var(--pg-peach);
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
}

/* Scalable random animation delays for unlimited buttons */
/* Using CSS custom properties and calc() for pseudo-random distribution */
.payhip-buy-button.btn-primary:nth-of-type(1) { animation-delay: calc(-0.23 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(2) { animation-delay: calc(-0.67 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(3) { animation-delay: calc(-0.41 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(4) { animation-delay: calc(-0.89 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(5) { animation-delay: calc(-0.15 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(6) { animation-delay: calc(-0.73 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(7) { animation-delay: calc(-0.52 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(8) { animation-delay: calc(-0.96 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(9) { animation-delay: calc(-0.08 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(10) { animation-delay: calc(-0.34 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(11) { animation-delay: calc(-0.78 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(12) { animation-delay: calc(-0.61 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(13) { animation-delay: calc(-0.27 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(14) { animation-delay: calc(-0.84 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(15) { animation-delay: calc(-0.12 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(16) { animation-delay: calc(-0.56 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(17) { animation-delay: calc(-0.93 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(18) { animation-delay: calc(-0.39 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(19) { animation-delay: calc(-0.71 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(20) { animation-delay: calc(-0.18 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(21) { animation-delay: calc(-0.85 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(22) { animation-delay: calc(-0.46 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(23) { animation-delay: calc(-0.62 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(24) { animation-delay: calc(-0.29 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(25) { animation-delay: calc(-0.76 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(26) { animation-delay: calc(-0.13 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(27) { animation-delay: calc(-0.58 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(28) { animation-delay: calc(-0.91 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(29) { animation-delay: calc(-0.35 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(30) { animation-delay: calc(-0.69 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(31) { animation-delay: calc(-0.22 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(32) { animation-delay: calc(-0.87 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(33) { animation-delay: calc(-0.44 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(34) { animation-delay: calc(-0.64 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(35) { animation-delay: calc(-0.17 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(36) { animation-delay: calc(-0.83 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(37) { animation-delay: calc(-0.37 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(38) { animation-delay: calc(-0.72 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(39) { animation-delay: calc(-0.26 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(40) { animation-delay: calc(-0.88 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(41) { animation-delay: calc(-0.11 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(42) { animation-delay: calc(-0.54 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(43) { animation-delay: calc(-0.79 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(44) { animation-delay: calc(-0.33 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(45) { animation-delay: calc(-0.66 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(46) { animation-delay: calc(-0.24 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(47) { animation-delay: calc(-0.81 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(48) { animation-delay: calc(-0.48 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(49) { animation-delay: calc(-0.65 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(50) { animation-delay: calc(-0.19 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(51) { animation-delay: calc(-0.86 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(52) { animation-delay: calc(-0.42 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(53) { animation-delay: calc(-0.77 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(54) { animation-delay: calc(-0.31 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(55) { animation-delay: calc(-0.68 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(56) { animation-delay: calc(-0.14 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(57) { animation-delay: calc(-0.59 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(58) { animation-delay: calc(-0.92 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(59) { animation-delay: calc(-0.36 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(60) { animation-delay: calc(-0.74 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(61) { animation-delay: calc(-0.21 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(62) { animation-delay: calc(-0.82 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(63) { animation-delay: calc(-0.47 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(64) { animation-delay: calc(-0.63 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(65) { animation-delay: calc(-0.16 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(66) { animation-delay: calc(-0.89 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(67) { animation-delay: calc(-0.38 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(68) { animation-delay: calc(-0.75 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(69) { animation-delay: calc(-0.28 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(70) { animation-delay: calc(-0.84 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(71) { animation-delay: calc(-0.49 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(72) { animation-delay: calc(-0.67 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(73) { animation-delay: calc(-0.23 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(74) { animation-delay: calc(-0.91 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(75) { animation-delay: calc(-0.43 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(76) { animation-delay: calc(-0.76 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(77) { animation-delay: calc(-0.32 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(78) { animation-delay: calc(-0.69 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(79) { animation-delay: calc(-0.15 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(80) { animation-delay: calc(-0.57 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(81) { animation-delay: calc(-0.94 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(82) { animation-delay: calc(-0.51 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(83) { animation-delay: calc(-0.78 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(84) { animation-delay: calc(-0.25 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(85) { animation-delay: calc(-0.87 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(86) { animation-delay: calc(-0.34 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(87) { animation-delay: calc(-0.71 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(88) { animation-delay: calc(-0.18 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(89) { animation-delay: calc(-0.62 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(90) { animation-delay: calc(-0.95 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(91) { animation-delay: calc(-0.41 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(92) { animation-delay: calc(-0.73 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(93) { animation-delay: calc(-0.29 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(94) { animation-delay: calc(-0.85 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(95) { animation-delay: calc(-0.46 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(96) { animation-delay: calc(-0.68 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(97) { animation-delay: calc(-0.12 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(98) { animation-delay: calc(-0.54 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(99) { animation-delay: calc(-0.81 * 37.5s); }
.payhip-buy-button.btn-primary:nth-of-type(100) { animation-delay: calc(-0.37 * 37.5s); }

/* Fallback pattern for buttons beyond 100 - uses modular arithmetic approach */
.payhip-buy-button.btn-primary:nth-of-type(n+101) {
    animation-delay: calc(var(--random-seed, -0.5) * 37.5s);
}

/* Gradient animation keyframes */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Buy Now button hover effect */
.payhip-buy-button.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(213, 69, 27, 0.3);
    animation-duration: 30s; /* Slightly faster but still super slow on hover */
    border-color: var(--pg-rust);
}

/* Buy Now button active/focus states */
.payhip-buy-button.btn-primary:active,
.payhip-buy-button.btn-primary:focus {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(213, 69, 27, 0.25);
    outline: none;
    border-color: var(--pg-rust);
}

/* Optional: Add a subtle pulse effect on focus for accessibility */
.payhip-buy-button.btn-primary:focus {
    animation: gradientShift 33s ease infinite, pulse 12s ease infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(213, 69, 27, 0.25);
    }
    50% {
        box-shadow: 0 4px 12px rgba(213, 69, 27, 0.35);
    }
}

/* ========================================
   EXTRA SMALL BUTTONS (btn-xs) - Medium and Large Screens Only
   ======================================== */
@media (min-width: 768px) {
    .btn-xs {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1.25;
        border-radius: 0.25rem;
        font-weight: 500;
        letter-spacing: 0.25px;
        min-height: auto;
    }
    
    /* Make sure gap between buttons is appropriate for smaller size */
    .d-none.d-md-block .card-body .d-flex {
        gap: 0.375rem !important;
    }
}

/* ========================================
   AUTO-FIT FILTER BUTTONS (DESKTOP ONLY - 1200px and above)
   Add this to your custom.css file
   ======================================== */

@media (min-width: 1200px) {
    /* Make filter and sort buttons auto-fit their container */
    .d-none.d-md-block .card-body .d-flex {
        display: flex !important;
        flex-wrap: nowrap !important; /* Prevent wrapping */
        gap: 0.5rem !important; /* Consistent spacing */
        width: 100%;
    }
    
    /* Make each button flex to fill available space */
    .d-none.d-md-block .card-body .d-flex .btn {
        flex: 1 1 auto; /* Allow buttons to grow and shrink equally */
        white-space: nowrap; /* Prevent text wrapping */
        min-width: 0; /* Allow buttons to shrink if needed */
        text-align: center;
        padding: 0.375rem 0.75rem; /* Better padding for desktop */
    }
    
    /* Ensure consistent button heights */
    .d-none.d-md-block .card-body .btn-sm {
        min-height: 2.5rem; /* Consistent height for all buttons */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Alternative approach: If you prefer equal-width buttons regardless of text length */
    /*
    .d-none.d-md-block .card-body .d-flex .btn {
        flex: 1 1 0%; 
        max-width: none;
    }
    */
}

/* ========================================
   MOBILE RESPONSIVE STYLES  (max-width: 767px)
   ======================================== */
@media (max-width: 767px) {
    /* Main content padding */
    main {
        padding: 0 8px !important;
    }
    
    /* Product list layout adjustments */
    main .card-body.p-0 .row {
        min-width: auto;
        flex-wrap: wrap;
    }
    
    /* Make all columns full width on mobile */
    main .col-md-4, 
    main .col-md-3, 
    main .col-md-2 {
        width: 100%;
        padding: 10px 15px;
    }
    
    /* Product information spacing */
    main .product-title,
    main .product-composer,
    main .product-arranger {
        margin-bottom: 8px;
    }
    

    /* Visual separation between sections */
    main .col-md-4,
    main .col-md-3:nth-of-type(2) {
        border-bottom: 1px solid rgba(82, 28, 13, 0.1);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    
    /* Touch-friendly button sizing */
    main .btn-sm {
        padding: 0.375rem 0.75rem;
    }
    
    /* Cookie banner mobile layout */
    .cookie-banner-server .btn-cookie-accept,
    .cookie-banner-server .btn-cookie-decline {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto 10px;
        text-align: center;
    }
    
    .cookie-banner-server .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .cookie-banner-server .col-12:last-child {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Mobile price styling adjustments - removed since price now matches catalog styling */
}

/* ========================================
   TABLET AND DESKTOP STYLES (768px and above)
   Add this section to your custom.css file
   ======================================== */

@media (min-width: 768px) {
    /* Make filter cards expand to container edges with spacing */
    .d-none.d-md-block .row {
        margin: 0;
        width: 100%;
        display: flex;
    }
    
    .d-none.d-md-block .col-md-6 {
        flex: 1; /* Take up equal space */
        max-width: none; /* Remove Bootstrap's max-width constraint */
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    /* Add spacing between the cards */
    .d-none.d-md-block .col-md-6:first-child {
        padding-right: 1rem;
    }
    
    .d-none.d-md-block .col-md-6:last-child {
        padding-left: 1rem;
    }
    
    /* Enhanced card styling with shadows */
    .d-none.d-md-block .card {
        width: 100%;
        height: fit-content;
        box-shadow: 0 2px 8px rgba(82, 28, 13, 0.15);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .d-none.d-md-block .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(82, 28, 13, 0.2);
    }
    
    /* Desktop price styling - removed since price now matches catalog styling */
}

/* For larger screens (1200px+), add more spacing */
@media (min-width: 1200px) {
    .d-none.d-md-block .col-md-6:first-child {
        padding-right: 1.5rem;
    }
    
    .d-none.d-md-block .col-md-6:last-child {
        padding-left: 1.5rem;
    }
}

/* ========================================
   TABLET ONLY STYLES (768px - 1199px)
   Add this section to your custom.css file
   ======================================== */

@media (min-width: 768px) and (max-width: 1199px) {
    /* Make product list header font smaller for tablets */
    .card-header.bg-primary .row.fw-bold {
        font-size: 0.875rem; /* Smaller than default */
    }
    
    /* Alternative: target individual columns if needed */
    .card-header.bg-primary .col-md-4,
    .card-header.bg-primary .col-md-3,
    .card-header.bg-primary .col-md-2 {
        font-size: 0.875rem;
    }
}

/* ========================================
   MOBILE DROPDOWN STYLES
   Add this section to your custom.css file
   ======================================== */

/* Mobile dropdown buttons */
@media (max-width: 767px) {
    /* Dropdown button styling to match theme */
    .dropdown-toggle.btn-outline-primary {
        color: var(--pg-rust);
        border-color: var(--pg-rust);
        background-color: rgba(244, 231, 225, 0.9);
        font-weight: 500;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    .dropdown-toggle.btn-outline-primary:hover,
    .dropdown-toggle.btn-outline-primary:focus,
    .dropdown-toggle.btn-outline-primary.show {
        background-color: var(--pg-orange);
        color: var(--pg-peach);
        border-color: var(--pg-rust);
        box-shadow: 0 0 0 0.2rem rgba(213, 69, 27, 0.25);
    }
    
    /* Dropdown menu styling */
    .dropdown-menu {
        background-color: rgba(244, 231, 225, 0.95);
        border: 2px solid var(--pg-rust);
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(82, 28, 13, 0.2);
        backdrop-filter: blur(5px);
        margin-top: 4px;
    }
    
    /* Dropdown items */
    .dropdown-item {
        color: var(--pg-brown);
        font-weight: 500;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--pg-orange);
        color: var(--pg-peach);
    }
    
    /* Active dropdown item */
    .dropdown-item.active {
        background-color: var(--pg-rust);
        color: var(--pg-peach);
    }
    
    .dropdown-item.active:hover {
        background-color: var(--pg-brown);
        color: var(--pg-peach);
    }
    
    /* Checkmark icons in dropdown */
    .dropdown-item .bi-check-circle {
        font-size: 1.1rem;
        flex-shrink: 0;
    }
    
    .dropdown-item .bi-check-circle.invisible {
        opacity: 0;
    }
    
    .dropdown-item .bi-check-circle.text-primary {
        color: var(--pg-peach) !important;
    }
    
    /* Ensure dropdown text doesn't wrap */
    .dropdown-toggle {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Make dropdown full width */
    .dropdown-menu {
        width: 100%;
        min-width: 100%;
    }
    
    /* Dropdown dividers if needed */
    .dropdown-divider {
        border-color: rgba(213, 69, 27, 0.3);
    }
    
    /* Focus states for accessibility */
    .dropdown-toggle:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(213, 69, 27, 0.25);
    }
    
    .dropdown-item:focus {
        outline: none;
    }
    
    /* Adjust spacing between stacked dropdowns */
    .row.g-3 > .col-12:first-child {
        margin-bottom: 0.5rem;
    }
    
    /* Hide product list header on mobile - REMOVED (now hidden globally above) */
    
    /* Adjust card styling when header is hidden */
    .card-body.p-0 {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
    
    /* Reduce padding in product rows for mobile */
    .card-body.p-0 .row.p-3 {
        padding: 0.75rem 0.5rem !important;
    }
    
    /* Reduce column padding for mobile */
    .card-body.p-0 .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Adjust spacing for product elements on mobile */
    .product-title,
    .product-composer,
    .product-arranger,
    .product-category,
    .product-tablature,
    .product-skill-level {
        margin-bottom: 0.5rem;
    }
    
    /* Make media buttons more compact */
    .media-buttons-grid .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.8rem;
    }
    
    /* Adjust catalog number spacing */
    .small.text-muted {
        margin-bottom: 0.5rem !important;
    }
    
    /* Combine category and tablature on same line, skill level on separate line */
    .col-md-3:nth-of-type(2) {
        display: flex !important;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5ch; /* Reduced gap between elements */
    }
    
    .product-category.mb-1,
    .product-tablature.mb-1 {
        margin-bottom: 0 !important;
        display: inline-flex !important;
        visibility: visible !important;
    }
    
    .product-skill-level.mb-1 {
        width: 100%;
        margin-bottom: 0 !important;
        margin-top: 0.25rem !important;
        display: block !important;
        visibility: visible !important;
        order: 3;
    }
    
    .product-category.mb-1 {
        order: 1;
    }
    
    .product-tablature.mb-1 {
        order: 2;
    }
    
    /* Ensure all badge content is visible and styled */
    .category-badge,
    .tablature-badge,
    .skill-badge {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--pg-brown) !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }
}








/* =============================================================
   Global UI quality (admin + public). Override v1's older `main .*`
   rules where they hurt readability. Lives at the bottom so cascade
   wins. Where v1's rust-on-peach styling was a brand statement
   (e.g. `main .card-header`), we override only the legibility-killing
   parts and keep the spirit.
   ============================================================= */

/* Cards — white surface, soft border. Override v1's rust border + peach bg
   that made cards bleed into the storefront warm background. */
main .card,
.card {
  background-color: #ffffff !important;
  border-color: var(--pg-border-soft) !important;
  border-radius: 10px;
}

/* Card header — peach + dark brown text. Replaces v1's rust-bg + peach-text
   that killed legend-strip readability (the "Edit / Hide / Delete" row). */
main .card-header,
.card-header {
  background-color: var(--pg-peach) !important;
  color: var(--pg-brown) !important;
  border-bottom: 1px solid var(--pg-border-soft) !important;
  padding: 0.75rem 1rem;
}
main .card-header strong,
.card-header strong { color: var(--pg-brown) !important; }

/* text-muted darker shade — Bootstrap default #6c757d washes out on peach */
main .text-muted,
.text-muted { color: #6B5A52 !important; }

/* Primary button — bold rust + white text. Hits both Bootstrap CSS tokens
   AND raw properties so the cascade can't escape the override. */
main .btn-primary,
.btn-primary {
  --bs-btn-color:                #ffffff;
  --bs-btn-bg:                   var(--pg-rust);
  --bs-btn-border-color:         var(--pg-rust);
  --bs-btn-hover-color:          #ffffff;
  --bs-btn-hover-bg:             var(--pg-brown);
  --bs-btn-hover-border-color:   var(--pg-brown);
  --bs-btn-focus-shadow-rgb:     213, 69, 27;
  --bs-btn-active-color:         #ffffff;
  --bs-btn-active-bg:            var(--pg-brown);
  --bs-btn-active-border-color:  var(--pg-brown);
  --bs-btn-disabled-color:       #ffffff;
  --bs-btn-disabled-bg:          var(--pg-rust);
  --bs-btn-disabled-border-color: var(--pg-rust);
  background-color: var(--pg-rust) !important;
  border-color: var(--pg-rust) !important;
  color: #ffffff !important;
  font-weight: 600;
}
main .btn-primary:hover, main .btn-primary:focus,
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--pg-brown) !important;
  border-color: var(--pg-brown) !important;
  color: #ffffff !important;
}

/* Outline primary — visible at rest, fills on hover */
main .btn-outline-primary,
.btn-outline-primary {
  color: var(--pg-rust) !important;
  border-color: var(--pg-rust) !important;
  background: transparent !important;
}
main .btn-outline-primary:hover, main .btn-outline-primary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--pg-rust) !important;
  border-color: var(--pg-rust) !important;
  color: #ffffff !important;
}

/* Outline secondary — neutral but readable */
main .btn-outline-secondary,
.btn-outline-secondary {
  color: #6B5A52 !important;
  border-color: var(--pg-border-soft) !important;
  background: transparent !important;
}
main .btn-outline-secondary:hover, main .btn-outline-secondary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background-color: #6B5A52 !important;
  border-color: #6B5A52 !important;
  color: #ffffff !important;
}

/* Outline success — readable green */
main .btn-outline-success,
.btn-outline-success {
  color: #157347 !important;
  border-color: #157347 !important;
  background: transparent !important;
}
main .btn-outline-success:hover, main .btn-outline-success:focus,
.btn-outline-success:hover, .btn-outline-success:focus {
  background-color: #157347 !important;
  color: #ffffff !important;
}

/* Outline danger */
main .btn-outline-danger,
.btn-outline-danger {
  color: #b02a37 !important;
  border-color: #b02a37 !important;
  background: transparent !important;
}
main .btn-outline-danger:hover, main .btn-outline-danger:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background-color: #b02a37 !important;
  color: #ffffff !important;
}

/* Status pills — high contrast white-on-dark */
.badge.bg-secondary { background-color: #6B5A52 !important; color: #ffffff !important; font-weight: 600; }
.badge.bg-success   { background-color: #157347 !important; color: #ffffff !important; font-weight: 600; }
.badge.bg-warning   { background-color: #c47200 !important; color: #ffffff !important; font-weight: 600; }
.badge.bg-danger    { background-color: #b02a37 !important; color: #ffffff !important; font-weight: 600; }

/* Tables — clean stripes, neutral borders, readable headers */
main .table,
.table {
  --bs-table-bg: #ffffff;
  --bs-table-color: #2A1408;
  --bs-table-hover-bg: var(--pg-peach);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { border-bottom-color: var(--pg-border-soft); }
.table thead th {
  font-weight: 700;
  color: #6B5A52;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
  border-bottom-width: 2px;
}
.table thead th a { color: inherit !important; }
.table thead th a:hover { color: var(--pg-rust) !important; }

/* Inline <code> chips */
code {
  color: var(--pg-rust);
  background: rgba(213, 69, 27, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* Form controls — brand focus ring; resting borders + placeholder readable */
.form-control,
.form-select {
  border-color: var(--pg-border-soft);
  color: var(--pg-brown);
}
.form-control::placeholder { color: #9A8B83; }
.form-control:focus,
.form-select:focus {
  border-color: var(--pg-rust);
  box-shadow: 0 0 0 .2rem rgba(213, 69, 27, .15);
  color: var(--pg-brown);
}
.form-label { color: var(--pg-brown); font-weight: 600; }

/* Input group addons (e.g. "$" prefix on price) */
.input-group-text {
  background-color: var(--pg-peach);
  border-color: var(--pg-border-soft);
  color: var(--pg-brown);
}

/* Alerts — keep readable */
main .alert-info,
.alert-info {
  background-color: #fff3e6 !important;
  color: var(--pg-brown) !important;
  border-color: var(--pg-orange) !important;
}
.alert-success { background-color: #e8f5ed; color: #0f5132; border-color: #157347; }
.alert-warning { background-color: #fff3cd; color: #6c4f02; border-color: #c47200; }
.alert-danger  { background-color: #f8d7da; color: #842029; border-color: #b02a37; }

/* Pagination — hit Bootstrap tokens AND raw props so active state holds */
.pagination {
  --bs-pagination-color:               var(--pg-rust);
  --bs-pagination-bg:                  #ffffff;
  --bs-pagination-border-color:        var(--pg-border-soft);
  --bs-pagination-hover-color:         var(--pg-brown);
  --bs-pagination-hover-bg:            var(--pg-peach);
  --bs-pagination-hover-border-color:  var(--pg-border-soft);
  --bs-pagination-focus-color:         var(--pg-brown);
  --bs-pagination-focus-bg:            var(--pg-peach);
  --bs-pagination-focus-box-shadow:    0 0 0 .25rem rgba(213, 69, 27, .2);
  --bs-pagination-active-color:        #ffffff;
  --bs-pagination-active-bg:           var(--pg-rust);
  --bs-pagination-active-border-color: var(--pg-rust);
  --bs-pagination-disabled-color:      #9A8B83;
  --bs-pagination-disabled-bg:         transparent;
  --bs-pagination-disabled-border-color: var(--pg-border-soft);
}
.pagination .page-item.active .page-link {
  background-color: var(--pg-rust) !important;
  border-color: var(--pg-rust) !important;
  color: #ffffff !important;
}

/* Nav pills (filter tabs on Submissions Queue, etc.) — brand the active state */
.nav-pills {
  --bs-nav-pills-link-active-bg:    var(--pg-rust);
  --bs-nav-pills-link-active-color: #ffffff;
}
.nav-pills .nav-link {
  color: var(--pg-brown);
  border: 1px solid transparent;
  font-weight: 500;
}
.nav-pills .nav-link:hover {
  background-color: var(--pg-peach);
  color: var(--pg-rust);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--pg-rust) !important;
  color: #ffffff !important;
}
/* Count badge inside the nav pill — visible on both active (brand) and idle (peach) backgrounds */
.nav-pills .nav-link .badge.bg-light {
  background-color: rgba(82, 28, 13, .08) !important;
  color: var(--pg-brown) !important;
}
.nav-pills .nav-link.active .badge.bg-light {
  background-color: rgba(255, 255, 255, .25) !important;
  color: #ffffff !important;
}

/* Dropdowns (admin nav, sort menus) */
.dropdown-menu {
  border-color: var(--pg-border-soft);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(82, 28, 13, .12);
}
.dropdown-item { color: var(--pg-brown); }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--pg-peach);
  color: var(--pg-brown);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--pg-rust);
  color: #ffffff;
}

/* Modals */
.modal-content { border: 1px solid var(--pg-border-soft); }
.modal-header  { background-color: var(--pg-peach); color: var(--pg-brown); border-bottom: 1px solid var(--pg-border-soft); }
.modal-footer  { border-top: 1px solid var(--pg-border-soft); }

/* Required asterisk — keep red but readable on warm bg */
.text-danger { color: #b02a37 !important; }