/* =============================================
   TOP HITS EMPORIUM — THEME STYLESHEET
   ============================================= */

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

:root {
    --navy:        #0b1523;
    --navy-mid:    #0d1e30;
    --navy-header: #0e1f32;
    --teal:        #4ecdc4;
    --teal-light:  #6eddd6;
    --teal-dark:   #39b5ac;
    --steel:       #4a6b8a;
    --steel-light: #5a7d9e;
    --white:       #ffffff;
    --off-white:   #d8e4ec;
    --text-sm:     #b0c4d4;
    --font-display: 'Cinzel', serif;
    --font-deco:    'Cinzel Decorative', cursive;
    --font-body:    'Cinzel', serif;
}

html { scroll-behavior: smooth; }

body {
    background-color: var(--navy);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    overflow-x: hidden;
}

a { color: var(--teal); text-decoration: none; transition: color 0.25s; }
a:hover { color: var(--teal-light); }

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

/* =============================================
   SITE HEADER
   ============================================= */

.site-header {
    background-color: var(--navy-header);
    padding: 24px 40px 0;
    position: relative;
    z-index: 100;
}

.site-header::after {
    content: '';
    display: block;
    height: 60px;
    background: var(--navy-header);
    clip-path: ellipse(55% 100% at 50% 0%);
    margin-top: -2px;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Logo */
.site-logo-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1;
}

.logo-top-hits {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--white);
}

.logo-top-hits .logo-top {
    font-style: italic;
    color: var(--teal);
    font-weight: 400;
    margin-right: 4px;
}

.logo-top-hits .logo-hits {
    color: var(--white);
    font-weight: 700;
}

.logo-emporium {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.35em;
    color: var(--teal);
    text-transform: uppercase;
    margin-top: 2px;
    align-self: center;
}

.logo-icon svg {
    width: 70px;
    height: 70px;
}

/* Navigation */
.main-nav ul {
    list-style: none;
    display: flex;
    gap: 36px;
    padding: 12px 0 8px;
}

.main-nav ul li a {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--white);
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s, color 0.25s;
    position: relative;
}

.main-nav ul li a:hover,
.main-nav ul li.current-menu-item a {
    color: var(--white);
    border-bottom-color: var(--teal);
}

.main-nav ul li .dropdown-arrow { font-size: 9px; margin-left: 3px; }

.main-nav ul li.menu-item-has-children { position: relative; }
.main-nav ul li.menu-item-has-children .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--navy-mid);
    min-width: 160px;
    padding: 8px 0;
    border-top: 2px solid var(--teal);
    z-index: 200;
}
.main-nav ul li.menu-item-has-children:hover .sub-menu { display: block; }
.main-nav ul li.menu-item-has-children .sub-menu li a {
    display: block;
    padding: 8px 20px;
    border-bottom: none;
    white-space: nowrap;
}
.main-nav ul li.menu-item-has-children .sub-menu li a:hover { color: var(--teal); }

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--teal);
    color: var(--teal);
    padding: 8px 14px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 3px;
}

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

.hero-section {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: -60px;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.45);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    padding: 100px 40px 80px;
}

.hero-content h1 {
    font-family: var(--font-display);
    font-size: clamp(26px, 4vw, 44px);
    font-weight: 400;
    letter-spacing: 0.12em;
    color: var(--teal);
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 22px;
}

.hero-content p {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--off-white);
    max-width: 460px;
    margin: 0 auto;
    line-height: 2;
}

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

.btn {
    display: inline-block;
    padding: 10px 28px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid var(--teal);
    color: var(--white);
    background: transparent;
    transition: background 0.25s, color 0.25s;
    cursor: pointer;
    margin-top: 20px;
}

.btn:hover { background: var(--teal); color: var(--navy); }

.btn-filled {
    background: var(--teal);
    color: var(--navy);
}
.btn-filled:hover { background: var(--teal-light); color: var(--navy); }

/* =============================================
   QUALITY SECTION (TEXT + IMAGE SPLIT)
   ============================================= */

.quality-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.quality-section .text-col h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.3;
    margin-bottom: 20px;
}

.quality-section .text-col p {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-sm);
    line-height: 2.2;
    margin-bottom: 24px;
}

.quality-section .img-col img {
    width: 100%;
    border-radius: 2px;
    object-fit: cover;
}

/* =============================================
   WHY CHOOSE SECTION
   ============================================= */

.why-section {
    padding: 60px 40px 80px;
    text-align: center;
    background-color: var(--navy);
}

.why-section .section-heading {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
}

.why-section .section-subheading {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin-bottom: 50px;
}

.features-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.feature-item { text-align: center; }

.feature-item .feature-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-bottom: 16px;
}

.feature-item h3 {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 12px;
    line-height: 1.5;
}

.feature-item p {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    line-height: 2;
}

/* =============================================
   CTA BANNER SECTION
   ============================================= */

.cta-banner {
    position: relative;
    padding: 80px 40px;
    text-align: center;
    overflow: hidden;
}

.cta-banner .cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.35);
    z-index: 0;
}

.cta-banner .cta-content {
    position: relative;
    z-index: 2;
}

.cta-banner h2 {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
}

.cta-banner p {
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--off-white);
}

/* =============================================
   CONTACT SECTION
   ============================================= */

.contact-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 70px 40px;
}

.contact-section h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 30px;
}

.contact-info {
    margin-bottom: 36px;
}

.contact-info p {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin-bottom: 6px;
}

.contact-info p strong {
    color: var(--off-white);
    font-weight: 600;
}

.contact-form label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin-bottom: 6px;
    margin-top: 20px;
}

.contact-form label .required { color: var(--teal); }

.contact-form input[type="text"],
.contact-form textarea {
    width: 100%;
    background: transparent;
    border: 1px solid var(--steel);
    color: var(--white);
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.25s;
    resize: vertical;
}

.contact-form input[type="text"]:focus,
.contact-form textarea:focus {
    border-color: var(--teal);
}

.contact-form textarea { min-height: 160px; }

.contact-form .consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
}

.contact-form .consent-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--teal);
}

.contact-form .consent-row label {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin: 0;
    line-height: 1.8;
}

.contact-form .required-note {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin-top: 12px;
}

.contact-form input[type="submit"],
.contact-form button[type="submit"] {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 14px;
    background: var(--teal);
    color: var(--navy);
    border: none;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.25s;
}

.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
    background: var(--teal-light);
}

.contact-form .visitor-note {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 10px 14px;
    background: var(--teal);
    color: var(--navy);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
}

.contact-success {
    padding: 20px;
    border: 1px solid var(--teal);
    color: var(--teal);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-align: center;
}

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

.social-bar {
    background-color: var(--steel);
    padding: 28px 40px;
    text-align: center;
}

.social-bar .social-icons {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.social-bar .social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 50%;
    color: var(--white);
    font-size: 16px;
    transition: border-color 0.25s, color 0.25s;
}

.social-bar .social-icons a:hover {
    border-color: var(--white);
    color: var(--white);
}

.footer-bottom {
    background-color: var(--navy-header);
    padding: 18px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-nav ul {
    list-style: none;
    display: flex;
    gap: 28px;
}

.footer-nav ul li a {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-sm);
    border-bottom: 1px solid transparent;
    transition: color 0.25s, border-color 0.25s;
}

.footer-nav ul li.current-menu-item a,
.footer-nav ul li a:hover {
    color: var(--teal);
    border-bottom-color: var(--teal);
}

.footer-copy {
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-sm);
    text-align: right;
    line-height: 1.6;
}

/* =============================================
   ABOUT PAGE — HERO
   ============================================= */

.about-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: -60px;
    padding-bottom: 60px;
}

.about-hero .hero-bg { filter: brightness(0.4); }

.about-hero .hero-content h1 {
    font-size: clamp(20px, 3vw, 36px);
}

/* =============================================
   ABOUT PAGE — OUR STORY
   ============================================= */

.story-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.story-section .text-col h2 {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.4;
    margin-bottom: 22px;
}

.story-section .text-col p {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    line-height: 2.2;
    margin-bottom: 30px;
}

.story-section .img-col .magazine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}

.story-section .img-col .magazine-grid img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    filter: grayscale(0.6);
}

.story-section .img-col .story-img {
    width: 80%;
    aspect-ratio: 4/3;
    object-fit: cover;
    margin-top: 20px;
}

/* =============================================
   SEAMLESS BANNER (ABOUT PAGE)
   ============================================= */

.seamless-banner {
    position: relative;
    padding: 100px 40px;
    text-align: center;
    overflow: hidden;
}

.seamless-banner .cta-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.4);
    z-index: 0;
}

.seamless-banner .cta-content {
    position: relative;
    z-index: 2;
}

.seamless-banner h2 {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 26px);
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
}

.seamless-banner .sub {
    font-family: var(--font-display);
    font-size: clamp(14px, 1.6vw, 20px);
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 16px;
}

.seamless-banner p {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--off-white);
    max-width: 540px;
    margin: 0 auto 24px;
    line-height: 2;
}

/* =============================================
   SHOP PAGE
   ============================================= */

.shop-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 40px;
}

.shop-section h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 40px;
    text-align: center;
}

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

.product-card {
    background: var(--navy-mid);
    border: 1px solid rgba(78,205,196,0.15);
    transition: border-color 0.25s;
}

.product-card:hover { border-color: var(--teal); }

.product-card img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.product-card .card-body {
    padding: 18px;
}

.product-card h3 {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    color: var(--white);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.product-card .price {
    color: var(--teal);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* =============================================
   GENERIC PAGE
   ============================================= */

.page-content-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 40px;
}

.page-content-section h1 {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 30px;
}

.page-content-section h2 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 30px 0 14px;
}

.page-content-section p {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--text-sm);
    line-height: 2;
    margin-bottom: 16px;
}

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

@media (max-width: 900px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .quality-section,
    .story-section { grid-template-columns: 1fr; }
    .quality-section .img-col,
    .story-section .img-col { order: -1; }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .site-header { padding: 20px 20px 0; }
    .main-nav { width: 100%; }
    .main-nav ul { flex-direction: column; gap: 0; display: none; }
    .main-nav ul.is-open { display: flex; }
    .main-nav ul li a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .menu-toggle { display: block; }
    .features-grid { grid-template-columns: 1fr; }
    .products-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-copy { text-align: center; }
    .logo-top-hits { font-size: 26px; }
}

/* =============================================
   PRODUCT CARDS — ALIDROPSHIP / SELLVIA
   ============================================= */

.products-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

.product-card {
    background: var(--navy-mid);
    border: 1px solid rgba(78,205,196,0.15);
    transition: border-color 0.25s, transform 0.25s;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--teal);
    transform: translateY(-3px);
}

.product-img-link { display: block; overflow: hidden; }

.product-card .product-thumb {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.product-card:hover .product-thumb { transform: scale(1.03); }

.product-thumb-placeholder {
    width: 100%;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, #1a3a5c, #0b1523);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-thumb-placeholder i {
    font-size: 40px;
    color: var(--teal);
    opacity: 0.5;
}

.product-thumb-placeholder.large { aspect-ratio: 1/1; }
.product-thumb-placeholder.large i { font-size: 80px; }

.product-card .card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card .card-body h3 {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    flex: 1;
    line-height: 1.5;
}

.product-card .card-body h3 a { color: var(--white); }
.product-card .card-body h3 a:hover { color: var(--teal); }

.product-card .price {
    color: var(--teal);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.product-card .old-price {
    color: var(--text-sm);
    font-size: 11px;
    text-decoration: line-through;
    margin-right: 8px;
    font-weight: 400;
}

.product-card .btn {
    margin-top: 0;
    width: 100%;
    text-align: center;
}

/* Shop page layout */
.shop-section { max-width: 1200px; margin: 0 auto; padding: 70px 40px; }
.shop-intro {
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin-bottom: 40px;
}

.no-products-msg {
    text-align: center;
    color: var(--text-sm);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 60px 0;
}

.shop-pagination {
    text-align: center;
    margin-top: 50px;
}

.shop-pagination .page-numbers {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 3px;
    border: 1px solid rgba(78,205,196,0.3);
    color: var(--text-sm);
    font-size: 11px;
    letter-spacing: 0.1em;
    transition: border-color 0.25s, color 0.25s;
}

.shop-pagination .page-numbers.current,
.shop-pagination .page-numbers:hover {
    border-color: var(--teal);
    color: var(--teal);
}

/* Single product page */
.single-product-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 70px 40px;
}

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

.single-product-img img {
    width: 100%;
    border-radius: 2px;
}

.single-product-details h1 {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 400;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.single-price {
    margin-bottom: 24px;
}

.single-price .current-price {
    font-size: 28px;
    font-weight: 700;
    color: var(--teal);
}

.single-price .old-price {
    font-size: 16px;
    color: var(--text-sm);
    text-decoration: line-through;
    margin-right: 12px;
}

.single-product-description {
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-sm);
    line-height: 2;
    margin-bottom: 30px;
}

@media (max-width: 900px) {
    .products-grid--4col { grid-template-columns: repeat(2, 1fr); }
    .single-product-inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .products-grid--4col { grid-template-columns: 1fr; }
}

/* =============================================
   SHOP — SEARCH + FILTER CONTROLS
   ============================================= */

.shop-title {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 400;
    color: var(--teal);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-align: center;
    margin-bottom: 8px;
}

.shop-controls {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(78,205,196,0.15);
}

/* Search form */
.shop-search-form { width: 100%; max-width: 520px; margin: 0 auto; }

.search-input-wrap {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--steel);
    transition: border-color 0.25s;
}

.search-input-wrap:focus-within { border-color: var(--teal); }

.shop-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--white);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.05em;
    outline: none;
}

.shop-search-input::placeholder { color: var(--text-sm); }

.shop-search-btn {
    background: var(--teal);
    border: none;
    color: var(--navy);
    padding: 0 18px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.25s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-search-btn:hover { background: var(--teal-light); }

/* Category filter pills */
.shop-filter-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    border: 1px solid rgba(78,205,196,0.2);
    border-radius: 2px;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
    white-space: nowrap;
}

.filter-pill:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.filter-pill.active {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--navy);
    font-weight: 700;
}

.pill-count {
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 1px 6px;
    font-size: 9px;
    line-height: 1.6;
}

.filter-pill.active .pill-count { background: rgba(11,21,35,0.25); }

/* Active filter tags */
.active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(78,205,196,0.1);
    border: 1px solid rgba(78,205,196,0.3);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--off-white);
}

.active-filter-tag strong { color: var(--teal); font-weight: 600; }

.remove-filter {
    color: var(--text-sm);
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.remove-filter:hover { color: var(--teal); }

.clear-all-filters {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color 0.2s;
}

.clear-all-filters:hover { color: var(--teal); }

/* Results count */
.results-count {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin-bottom: 24px;
}

/* Category badge on card */
.product-card { position: relative; }

.product-cat-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(11,21,35,0.85);
    border: 1px solid rgba(78,205,196,0.4);
    color: var(--teal);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px 8px;
    pointer-events: none;
}

/* No results */
.no-results-box {
    text-align: center;
    padding: 80px 40px;
}

.no-results-icon {
    font-size: 48px;
    color: var(--teal);
    opacity: 0.25;
    margin-bottom: 20px;
    display: block;
}

/* Responsive */
@media (max-width: 640px) {
    .shop-filter-nav { justify-content: flex-start; }
    .active-filters { flex-direction: column; align-items: flex-start; }
}

/* =============================================
   SINGLE PRODUCT — EXTENDED STYLES
   ============================================= */

/* Breadcrumb */
.product-breadcrumb {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-sm);
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.product-breadcrumb a { color: var(--text-sm); transition: color 0.2s; }
.product-breadcrumb a:hover { color: var(--teal); }
.product-breadcrumb span:last-child { color: var(--teal); }

/* Category links */
.product-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.product-cat-link {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    border: 1px solid rgba(78,205,196,0.4);
    padding: 3px 10px;
    transition: background 0.2s;
}
.product-cat-link:hover { background: rgba(78,205,196,0.1); }

/* Product title */
.product-title {
    font-family: var(--font-display);
    font-size: clamp(18px, 2.2vw, 28px);
    font-weight: 400;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

/* Discount badge */
.discount-badge {
    display: inline-block;
    background: var(--teal);
    color: var(--navy);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    margin-left: 10px;
    vertical-align: middle;
}

/* Price unavailable state */
.price-unavailable .current-price {
    font-size: 18px !important;
    color: var(--text-sm) !important;
    font-style: italic;
}

/* Gallery */
.product-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.product-gallery .gallery-thumb:first-child {
    grid-column: 1 / -1;
}
.product-gallery img {
    width: 100%;
    display: block;
    border-radius: 2px;
    transition: opacity 0.2s;
}
.product-gallery a:hover img { opacity: 0.85; }

/* Product actions */
.single-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}
.btn-cart { display: flex; align-items: center; gap: 8px; }

/* No description placeholder */
.no-description {
    font-style: italic;
    color: var(--text-sm);
    opacity: 0.6;
}

/* Admin debug panel */
.admin-debug-panel {
    margin-top: 30px;
    border: 1px dashed rgba(255,200,0,0.4);
    padding: 16px;
    font-size: 11px;
    color: var(--off-white);
    background: rgba(255,200,0,0.04);
}
.admin-debug-panel summary {
    cursor: pointer;
    font-weight: 700;
    color: #ffd700;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.admin-debug-panel table { width: 100%; border-collapse: collapse; }
.admin-debug-panel th, .admin-debug-panel td {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    text-align: left;
    font-size: 10px;
}
.admin-debug-panel th { color: var(--teal); }
.admin-debug-panel code {
    background: rgba(255,255,255,0.08);
    padding: 1px 5px;
    font-family: monospace;
    font-size: 10px;
}

/* Admin tip */
.admin-tip {
    margin-top: 28px;
    padding: 10px 14px;
    border: 1px dashed rgba(78,205,196,0.25);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--text-sm);
    line-height: 1.8;
}
.admin-tip code {
    background: rgba(255,255,255,0.08);
    padding: 1px 6px;
    font-family: monospace;
}

/* =============================================
   ALIDROPSHIP / SELLVIA PRODUCT PAGE — DARK THEME
   Overrides AliDropship's default light styles to match
   the navy theme. Targets both the standalone plugin's
   CSS classes and any WooCommerce-compatible classes.
   ============================================= */

/* ── Page background ── */
body.single-product,
body.posttype-product,
body[class*="product-template"] {
    background-color: var(--navy) !important;
}

/* ── Main wrappers AliDropship/Sellvia may output ── */
.woocommerce-section,
.woo-inner,
.adi-product-page,
.alidropship-product,
.product-page-wrap,
.woocommerce div.product,
.woocommerce-page div.product {
    background: transparent !important;
    color: var(--off-white) !important;
}

/* ── Outer content area background ── */
#page, #content, .site-content, main.site-main,
.woocommerce-section .woo-inner,
.entry-content, .post-content {
    background-color: var(--navy) !important;
}

/* ── Product title ── */
.adi-product-title,
.product_title,
h1.product_title,
h1.adi-title {
    font-family: var(--font-display) !important;
    font-size: clamp(18px, 2.2vw, 28px) !important;
    font-weight: 400 !important;
    color: var(--white) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* ── Price display ── */
.adi-price,
.adi-product-price,
.price,
p.price,
span.price,
.woocommerce-Price-amount,
.amount {
    font-family: var(--font-display) !important;
    color: var(--teal) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
}
.adi-price ins, .price ins,
.woocommerce-Price-amount ins {
    color: var(--teal) !important;
    text-decoration: none !important;
}
.adi-price del, .price del,
.woocommerce-Price-amount del {
    color: var(--text-sm) !important;
    font-size: 16px !important;
    opacity: 0.7 !important;
}
/* Remove "US" country-code prefix Sellvia adds */
.price .woocommerce-Price-currencySymbol::before { content: none !important; }

/* ── HIDE ALL DELIVERY / SHIPPING INFO ──
   Sellvia and AliDropship inject a "FREE 4-Day Delivery" block.
   Digital products don't ship — hide everything delivery-related.
   ── */
.adi-shipping,
.adi-delivery,
.sellvia-delivery,
.sellvia-shipping,
.free-delivery,
.free-shipping,
.shipping-block,
.delivery-block,
.delivery-info,
.shipping-info,
.adi-shipping-info,
.adi-shipping-block,
.woo-delivery,
[class*="adi-shipping"],
[class*="adi-delivery"],
[class*="sellvia-ship"],
[class*="sellvia-deliv"],
[class*="shipping-info"],
[class*="delivery-info"],
[class*="delivery-block"],
[class*="free-delivery"],
[class*="free-shipping"] {
    display: none !important;
}

/* ── Product tabs (Product Details / Customer Reviews) ── */
.adi-tabs,
.woocommerce-tabs,
.adi-product-tabs,
.wc-tabs-wrapper {
    background: transparent !important;
    border-top: 1px solid rgba(78,205,196,0.15) !important;
    margin-top: 32px !important;
    padding-top: 0 !important;
}

/* Tab buttons */
.adi-tabs ul.tabs,
.adi-tabs ul.adi-tabs-nav,
.woocommerce-tabs ul.tabs,
.adi-product-tabs ul {
    list-style: none !important;
    display: flex !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 0 0 0 !important;
    border-bottom: 1px solid rgba(78,205,196,0.2) !important;
    background: transparent !important;
}

.adi-tabs ul.tabs li,
.adi-tabs ul.adi-tabs-nav li,
.woocommerce-tabs ul.tabs li,
.adi-product-tabs ul li {
    background: var(--navy-mid) !important;
    border: 1px solid rgba(78,205,196,0.2) !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    list-style: none !important;
}

.adi-tabs ul.tabs li a,
.adi-tabs ul.adi-tabs-nav li a,
.woocommerce-tabs ul.tabs li a,
.adi-product-tabs ul li a {
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--off-white) !important;
    padding: 10px 20px !important;
    display: block !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.adi-tabs ul.tabs li.active,
.adi-tabs ul.adi-tabs-nav li.active,
.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.ui-tabs-active,
.adi-product-tabs ul li.active {
    background: var(--navy) !important;
    border-bottom-color: var(--navy) !important;
}

.adi-tabs ul.tabs li.active a,
.adi-tabs ul.adi-tabs-nav li.active a,
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.ui-tabs-active a,
.adi-product-tabs ul li.active a {
    color: var(--teal) !important;
}

/* Tab panels / content areas */
.adi-tabs .tab-content,
.adi-tabs .adi-tab-panel,
.woocommerce-tabs .panel,
.woocommerce-Tabs-panel,
.adi-product-tabs .tab-pane {
    background: var(--navy-mid) !important;
    color: var(--off-white) !important;
    border: 1px solid rgba(78,205,196,0.12) !important;
    border-top: none !important;
    padding: 24px 28px !important;
    font-size: 12px !important;
    line-height: 2 !important;
    letter-spacing: 0.04em !important;
}

.adi-tabs .tab-content p,
.woocommerce-tabs .panel p,
.adi-product-tabs .tab-pane p {
    color: var(--off-white) !important;
    line-height: 2 !important;
}

/* ── Add to Cart button ── */
.adi-add-to-cart,
.single_add_to_cart_button,
button.cart,
.adi-cart-btn {
    background: var(--teal) !important;
    color: var(--navy) !important;
    font-family: var(--font-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    border: none !important;
    padding: 14px 40px !important;
    cursor: pointer !important;
    transition: background 0.25s !important;
    border-radius: 0 !important;
}
.adi-add-to-cart:hover,
.single_add_to_cart_button:hover,
button.cart:hover { background: var(--teal-light) !important; }

/* ── Star ratings ── */
.adi-rating .star,
.adi-stars,
.star-rating span,
.woocommerce-product-rating .star-rating span::before {
    color: var(--teal) !important;
}
.woocommerce-product-rating a {
    color: var(--text-sm) !important;
    font-size: 11px !important;
}

/* ── Product description ── */
.woocommerce-product-details__short-description,
.adi-product-description,
.adi-short-description {
    color: var(--off-white) !important;
    font-size: 12px !important;
    line-height: 2 !important;
    margin: 16px 0 24px !important;
}

/* ── Product meta (SKU, categories) ── */
.product_meta,
.adi-product-meta {
    font-size: 10px !important;
    letter-spacing: 0.1em !important;
    color: var(--text-sm) !important;
}
.product_meta a,
.adi-product-meta a { color: var(--teal) !important; }

/* ── Review form ── */
#review_form_wrapper,
#reviews,
.adi-reviews {
    background: transparent !important;
    color: var(--off-white) !important;
}
#review_form input,
#review_form textarea,
.adi-reviews input,
.adi-reviews textarea {
    background: var(--navy-mid) !important;
    border: 1px solid var(--steel) !important;
    color: var(--white) !important;
    padding: 10px 14px !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    width: 100% !important;
}
#review_form .submit,
.adi-reviews .submit,
.adi-reviews button[type="submit"] {
    background: var(--teal) !important;
    color: var(--navy) !important;
    border: none !important;
    padding: 10px 28px !important;
    font-family: var(--font-display) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 0 !important;
}
.comment-respond h3,
#reviews h2,
.adi-reviews h2 {
    font-family: var(--font-display) !important;
    font-size: 14px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--teal) !important;
    margin-bottom: 16px !important;
}

/* ── About page: magazine grid image ── */
.magazine-grid-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 2px;
}
.magazine-grid-placeholder {
    background: var(--navy-mid);
    border: 1px solid rgba(78,205,196,0.15);
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-size: 48px;
    opacity: 0.3;
}

/* ── AliDropship: product image gallery sidebar thumbnails ── */
.adi-thumbnails,
.flex-control-thumbs,
.woocommerce-product-gallery__wrapper {
    background: transparent !important;
}
.adi-thumbnails img,
.flex-control-thumbs img {
    border: 2px solid transparent !important;
    transition: border-color 0.2s !important;
    opacity: 0.7 !important;
}
.adi-thumbnails img:hover,
.flex-control-thumbs img:hover,
.flex-control-thumbs li.flex-active img {
    border-color: var(--teal) !important;
    opacity: 1 !important;
}