/* Hide the shared OpenCart breadcrumb strip across the storefront. */
.breadcrumb {
    display: none !important;
}

/* Keep comfortable separation after the breadcrumb strip is hidden. */
#main-content {
    padding-top: 20px !important;
}

/* Inner-page heading: styled title with divider for every page except the
   ones that ship their own hero section (home, contact, blog, about, help).
   category.twig renders this wrapper directly; footer.twig wraps the h1 on
   every other inner page. */
.shine-page-header {
    position: relative;
    margin: 16px 0 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--shine-line, #e5e7eb);
}

.shine-page-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: var(--shine-yellow, #f5b722);
}

.shine-page-header h1 {
    margin: 0;
    color: var(--shine-ink, #17212b);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

@media (max-width: 575.98px) {
    .shine-page-header {
        margin: 10px 0 20px;
        padding-bottom: 12px;
    }

    .shine-page-header h1 {
        font-size: 22px;
    }
}

/* Product-card polish and header icon alignment */
.product-thumb{height:100%;border:1px solid #eaeaea!important;border-radius:8px;background:#fff;overflow:hidden;padding:15px;transition:box-shadow .25s ease,transform .25s ease}
.product-thumb:hover{box-shadow:0 12px 30px rgba(23,33,43,.12);transform:translateY(-3px)}
.product-thumb .price{margin:.75rem 0;font-size:1.2rem;font-weight:800;line-height:1.25;color:var(--shine-ink)}
.product-thumb .price-new{font-weight:800;color:var(--shine-ink)}
.product-thumb .price-old{margin-left:.35rem;color:var(--shine-muted);font-size:.85rem;font-weight:400;text-decoration:line-through}

/* --- Theme base: root variables, body, link defaults (kept from the old minified line) --- */
:root{--shine-ink:#17212b;--shine-muted:#6b7280;--shine-line:#e5e7eb;--shine-soft:#f5f6f7;--shine-yellow:#f5b722;--shine-yellow-dark:#d79b05;--shine-navy:#172b3a;--shine-radius:8px}
*{box-sizing:border-box}
body.shinestore-page{margin:0;color:var(--shine-ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#f1f2f3}
a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease}
a:hover{color:var(--shine-yellow-dark)}
.shine-footer-brand span{color:var(--shine-yellow-dark)}
.shine-newsletter-form button{border:0;background:var(--shine-yellow);color:#17212b;font-weight:800;padding:.85rem 1.5rem}
.shine-newsletter-form button:hover{background:var(--shine-yellow-dark);color:#17212b}
#main-content{min-height:45vh}
.shine-footer{margin-top:4rem;background:var(--shine-navy);color:#dbe4e9}
.shine-newsletter{background:#eef5f7;color:var(--shine-ink);padding:2.25rem 0}
.shine-newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.shine-eyebrow{margin:0;color:var(--shine-yellow-dark);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}
.shine-newsletter h2{margin:.3rem 0;font-size:1.5rem}
.shine-newsletter p{margin:.25rem 0;color:var(--shine-muted);font-size:.85rem}
.shine-newsletter-form{display:flex;min-width:360px;border-radius:var(--shine-radius);overflow:hidden;background:#fff}
.shine-newsletter-form input{flex:1;min-width:0;border:0;padding:.9rem 1rem;outline:0}
.shine-footer-columns{padding:3rem 0}
.shine-footer-brand{font-size:1.4rem;font-weight:800;color:#fff}
.shine-footer-columns h3{margin:0 0 1rem;color:#fff;font-size:.9rem}
.shine-footer-columns a{display:block;margin:.55rem 0;color:#c8d2d8;font-size:.82rem}
.shine-footer-columns p{color:#aebdc5;font-size:.82rem;line-height:1.7}
.shine-footer-bottom{border-top:1px solid #ffffff1c}
.shine-footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 0;font-size:.72rem;color:#aebdc5}
.shine-trust-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.75rem}
.shine-trust-badges strong{color:var(--shine-yellow)}
@media(max-width:991.98px){.shine-newsletter-inner{align-items:flex-start;flex-direction:column}.shine-newsletter-form{width:100%;min-width:0}}
@media(max-width:575.98px){.shine-footer-columns{padding:2rem 1rem}.shine-footer-bottom-inner{align-items:flex-start;flex-direction:column;padding:1rem}.shine-trust-badges{justify-content:flex-start}}

/* Shoptimizer Product Card Button Overrides (Corrected for OpenCart 4) */
.product-thumb .button {
    display: flex !important;
    width: 100% !important;
    border-top: none !important;
    background: transparent !important;
}

/* Target the first button (Add to Cart) */
.product-thumb .button button:first-child,
.product-thumb .button button[formaction*="cart.add"] {
    width: 100% !important;
    background-color: #f5b722 !important;
    color: #111 !important;
    border: none !important;
    padding: 12px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;
    max-width: none !important;
}

.product-thumb .button button:first-child:hover,
.product-thumb .button button[formaction*="cart.add"]:hover {
    background-color: #dfa112 !important;
}

/* Hide Wishlist and Compare */
.product-thumb .button button:nth-child(2),
.product-thumb .button button:nth-child(3),
.product-thumb .button button[formaction*="wishlist.add"],
.product-thumb .button button[formaction*="compare.add"] {
    display: none !important;
}
/* Force Uniform Product Card Heights */
.product-thumb {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
}
   
.product-thumb .content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.product-thumb .description {
    flex-grow: 1 !important;
}
   
/* Push the pricing and buttons to the absolute bottom */
.product-thumb form {
    margin-top: auto !important;
    width: 100% !important;
}

/* Product Card Boundaries and Image Alignment */
.product-thumb .image {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.product-thumb .image img {
    display: block;
    margin: 0 auto;
}

.product-thumb .price-tax {
    display: none !important;
}

/* Side-by-Side Cart and Buy Now Buttons */
.product-thumb .button {
    gap: 8px !important;
}

.product-thumb .button button:first-child,
.product-thumb .button button[formaction*="cart.add"] {
    flex: 1 1 50% !important;
    width: 50% !important;
}

.product-thumb .button .shine-buy-now,
.product-thumb .button button.shine-buy-now:nth-child(2),
.product-thumb .button button.shine-buy-now:nth-child(3) {
    display: flex !important;
    flex: 1 1 50% !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50% !important;
    max-width: none !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 4px !important;
    background-color: #111 !important;
    color: #fff !important;
    font-weight: 600 !important;
    float: none !important;
}

.product-thumb .button .shine-buy-now:hover {
    background-color: #333 !important;
    color: #fff !important;
}

/* Modern OpenCart Slideshow */
.carousel,
.carousel-inner {
    border-radius: 0;
    overflow: hidden;
}

.carousel {
    box-shadow: none;
}

/* Homepage hero: two compact banner promos beside the main slideshow. */
.shine-home-hero {
    display: grid;
    grid-template-columns: minmax(190px, 30%) minmax(0, 70%);
    gap: 30px;
    align-items: stretch;
    margin: 0 auto 30px;
}

.shine-home-hero__promos {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 30px;
    min-width: 0;
}

.shine-home-hero__promo,
.shine-home-hero__slider {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #f0f0f0;
}

.shine-home-hero__promo img,
.shine-home-hero__slider img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shine-home-hero__promo .row,
.shine-home-hero__promo figure,
.shine-home-hero__promo picture {
    height: 100%;
    margin: 0;
}

.shine-home-hero__slider .carousel,
.shine-home-hero__slider .carousel-inner,
.shine-home-hero__slider .carousel-item {
    height: 100%;
}

.shine-home-hero__slider .carousel-item img {
    min-height: 300px;
}

.shine-home-hero__slider .carousel-indicators {
    margin-bottom: 10px;
}

.shine-home-hero__slider .carousel-indicators button {
    width: 29px;
    height: 6px;
    margin: 0 3px;
    border: 0;
    border-radius: 6px;
    background-color: #fff;
    opacity: 1;
}

.shine-home-hero__slider .carousel-indicators .active {
    background-color: #f0442e;
}

@media (max-width: 767.98px) {
    .shine-home-hero {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .shine-home-hero__promos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 15px;
        order: 2;
    }

    .shine-home-hero__slider {
        order: 1;
    }

    .shine-home-hero__promo {
        min-height: 110px;
    }

    .shine-home-hero__slider .carousel-item img {
        min-height: 190px;
    }
}

/* -------------------------------------------------------------------------- */
/* Editorial information pages: About, Blog, Help and the core Contact page. */
/* -------------------------------------------------------------------------- */
.shine-information-page {
    background: #f8f8f8;
    color: #40586a;
    font-size: 16px;
    line-height: 1.7;
}

.shine-information-hero {
    position: relative;
    overflow: hidden;
    min-height: 198px;
    padding: 56px 0 50px;
    background: #e9ebee;
    text-align: center;
}

.shine-information-hero::before {
    position: absolute;
    inset: -90px -5% 0;
    content: "";
    opacity: .42;
    background: repeating-radial-gradient(ellipse at 18% 125%, transparent 0 56px, #c7cdd1 57px 58px, transparent 59px 94px);
    transform: rotate(-10deg) scale(1.35);
}

.shine-information-hero .container { position: relative; z-index: 1; }
.shine-information-hero h1 {
    margin: 0 0 8px;
    color: #252a2d;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.8px;
}
.shine-information-hero p { margin: 0; color: #3f464c; }

.shine-information-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
    padding-top: 68px;
    padding-bottom: 76px;
}
.shine-information-content { min-width: 0; }
.shine-information-content p { margin: 0 0 30px; }
.shine-information-intro { font-size: 16px; }
.shine-information-dropcap {
    float: left;
    margin: -7px 10px 0 0;
    color: #202629;
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
}
.shine-information-quote {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 28px 0 31px;
    padding: 28px 30px;
    border-left: 5px solid #2e65c5;
    border-radius: 3px;
    background: #eef0f2;
}
.shine-information-quote-mark { color: #202629; font-size: 68px; font-weight: 700; line-height: .8; }
.shine-information-quote p { margin: 0; color: #40586a; font-style: italic; }

.shine-information-sidebar {
    align-self: start;
    padding: 30px 32px 27px;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 7px 24px rgba(34, 46, 55, .06);
}
.shine-information-sidebar h2 { margin: 0 0 22px; color: #293238; font-size: 16px; }
.shine-information-sidebar a { display: block; margin: 0 0 15px; color: #697177; font-size: 14px; text-decoration: none; }
.shine-information-sidebar a:hover, .shine-information-sidebar a.is-active { color: #293238; text-decoration: underline; }

.shine-blog-article, .shine-help-item, .shine-shipping-section {
    margin: 0 0 30px;
    padding: 26px 30px;
    border-left: 5px solid #2e65c5;
    border-radius: 3px;
    background: #eef0f2;
}
.shine-blog-article h2, .shine-help-item h2, .shine-shipping-section h2 { margin: 0 0 8px; color: #293238; font-size: 20px; }
.shine-blog-article p, .shine-help-item p, .shine-shipping-section p { margin-bottom: 10px; }
.shine-information-read-more { color: #2e65c5; font-size: 14px; font-weight: 600; text-decoration: none; }

/* The stock Contact template has no Shinestore wrapper. Give its stable main
   content the same hero and reading surface while retaining its form markup. */
body.shine-information-contact #main-content {
    position: relative;
    max-width: none;
    padding-top: 198px !important;
    padding-bottom: 76px;
    background: #f8f8f8;
    color: #40586a;
}
body.shine-information-contact #main-content::before {
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 198px;
    content: "";
    padding-top: 56px;
    background: #e9ebee;
}
body.shine-information-contact #main-content > .container {
    max-width: 1140px;
    padding-top: 50px;
}
body.shine-information-contact #information-contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
}
body.shine-information-contact #information-contact > .shine-information-sidebar { grid-column: 2; grid-row: 1 / span 4; }
body.shine-information-contact #main-content h1 {
    position: absolute;
    top: 54px; right: 0; left: 0;
    z-index: 1;
    margin: 0;
    color: #252a2d;
    font-size: 30px;
    line-height: 1.2;
    text-align: center;
}
body.shine-information-contact #main-content h1::after {
    display: block;
    margin-top: 8px;
    color: #3f464c;
    content: "We'd love to hear from you. Get in touch with our friendly team.";
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .shine-information-hero { min-height: 170px; padding: 44px 20px 38px; }
    .shine-information-hero h1, body.shine-information-contact #main-content h1 { font-size: 26px; }
    .shine-information-layout { display: block; padding: 42px 20px 52px; }
    .shine-information-sidebar { margin-top: 40px; }
    .shine-information-quote { padding: 23px 20px; gap: 12px; }
    .shine-information-quote-mark { font-size: 52px; }
    body.shine-information-contact #main-content { padding-top: 170px !important; }
    body.shine-information-contact #main-content::before { height: 170px; padding: 44px 20px 0; }
    body.shine-information-contact #main-content h1 { top: 42px; }
    body.shine-information-contact #information-contact { display: block; }
    body.shine-information-contact #information-contact > .shine-information-sidebar { margin-top: 40px; }
}


/* Compare-page compatibility rules.
   Some OpenCart installations render the stock compare view without the
   theme body class. Keep the component keyed to its stable core ID so the
   visual changes do not depend on the view event or JavaScript timing. */
#product-compare {
    max-width: 1180px;
    margin: 0 auto;
}

#product-compare table.table {
    width: 100%;
    min-width: 745px;
    table-layout: fixed;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

#product-compare table.table td {
    min-width: 0;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

#product-compare table.table td:first-child {
    width: 145px;
    min-width: 145px;
    max-width: 145px;
}

/* The stock compare template uses the second row for product images. */
#product-compare table.table tbody tr:nth-child(2) td:not(:first-child) {
    text-align: center;
}

#product-compare table.table tbody tr:nth-child(2) img,
#product-compare table.table img {
    display: block;
    width: 190px !important;
    max-width: 190px !important;
    height: 190px !important;
    margin: 0 auto;
    object-fit: contain;
}

/* Keep the five stars compact even when the stock rating markup has
   whitespace between each icon. */
#product-compare table.table .rating,
#product-compare table.table .rating i,
#product-compare table.table .fa-star,
#product-compare table.table .fa-star-o {
    letter-spacing: 0 !important;
}

#product-compare table.table .rating i,
#product-compare table.table .fa-star,
#product-compare table.table .fa-star-o {
    display: inline-block;
    width: 16px !important;
    margin-right: -1px !important;
    font-size: 14px !important;
    line-height: 16px !important;
    text-align: center;
}

@media (max-width: 767.98px) {
    #product-compare {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    #product-compare table.table img,
    #product-compare table.table tbody tr:nth-child(2) img {
        width: 140px !important;
        max-width: 140px !important;
        height: 140px !important;
    }
}

@media (max-width: 420px) {
    .shine-home-hero__promos {
        grid-template-columns: 1fr;
    }
}

/* Final compare-page overrides. The OpenCart compare view nests its table
   inside #content, so direct-child selectors do not reach the table. */
#product-compare table.table {
    width: 100% !important;
    min-width: 745px !important;
    table-layout: fixed !important;
}

#product-compare table.table td:first-child {
    width: 145px !important;
    min-width: 145px !important;
    max-width: 145px !important;
}

#product-compare table.table td:not(:first-child) {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow-wrap: anywhere !important;
}

#product-compare table.table tbody tr:nth-child(2) td:not(:first-child) {
    text-align: center !important;
}

#product-compare table.table img,
#product-compare table.table tbody tr:nth-child(2) img {
    display: block !important;
    width: 190px !important;
    max-width: 190px !important;
    height: 190px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

#product-compare table.table .rating i,
#product-compare table.table .fa-star,
#product-compare table.table .fa-star-o {
    display: inline-block !important;
    width: 16px !important;
    margin: 0 -1px 0 0 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    letter-spacing: 0 !important;
}

@media (max-width: 767.98px) {
    #product-compare #content {
        overflow-x: auto !important;
    }

    #product-compare table.table img,
    #product-compare table.table tbody tr:nth-child(2) img {
        width: 140px !important;
        max-width: 140px !important;
        height: 140px !important;
    }
}

/* Hide Product Description Text Globally */
.product-thumb .description p {
    display: none !important;
}
   
/* Keep the Price visible just in case it is inside the description div */
.product-thumb .description .price {
    display: block !important;
}

/* Mobile Optimization: one product card per row on phones.
   NOTE: this block used to be dead code — the rules below were nested inside
   the unclosed .price rule above, so no browser ever applied them. The brace
   is now closed and the mobile rules are wrapped in a real media query.
   The consolidated mobile card layout (one full-width card per row for every
   product grid, not just .shine-product-grid) lives in the media
   block further down this file. */
@media (max-width: 767.98px) {

    /* Full-width cards on phones: one card per row. */
    .shine-product-grid > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
       
    /* Reduce card padding slightly for mobile */
    .product-thumb {
        padding: 10px !important;
    }

    /* Ensure the title isn't too massive */
    .product-thumb .description h4 {
        font-size: 14px !important;
    }

    /* Make the dual buttons fit nicely in the tighter space */
    .product-thumb .button button:first-child,
    .product-thumb .button button[formaction*="cart.add"],
    .product-thumb .button button.buy-now-btn {
        font-size: 12px !important;
        padding: 8px 4px !important;
    }
}

/* Homepage card polish: populated by the theme product metadata enhancement. */
body .row:has(> .col > .product-thumb) .product-thumb .description h4::before { content: none !important; display: none !important; }
body .row:has(> .col > .product-thumb) .product-thumb .shine-product-category { display: block; margin: 0 0 11px; color: #777d80; font-size: 11px; line-height: 1; text-decoration: underline dotted; text-underline-offset: 4px; }

/* Stock status: same look as the category label, aligned to the opposite
   side of the card. A small status dot signals availability at a glance. */
body .row:has(> .col > .product-thumb) .product-thumb .shine-product-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 11px; }
body .row:has(> .col > .product-thumb) .product-thumb .shine-product-meta .shine-product-category { display: block; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .row:has(> .col > .product-thumb) .product-thumb .shine-product-stock { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: #777d80; font-size: 11px; line-height: 1; white-space: nowrap; }
body .row:has(> .col > .product-thumb) .product-thumb .shine-product-stock::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-color, #3bb54a); }
body .row:has(> .col > .product-thumb) .product-thumb .shine-stock-out::before { background: #c0392b; }
body .row:has(> .col > .product-thumb) .product-thumb .button button { font-size: 0 !important; }
body .row:has(> .col > .product-thumb) .product-thumb .button button span:not(.visually-hidden) { font-size: 12px; }
body .row:has(> .col > .product-thumb) .product-thumb .button button i { font-size: 16px !important; }
body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child::after { content: none !important; }
body .row:has(> .col > .product-thumb) .product-thumb .shine-product-badge { position: absolute; top: 18px; right: 14px; left: auto; z-index: 2; padding: 5px 9px; border: 1px solid #b7cdf8; border-radius: 2px; background: #eaf1ff; color: #2463c5; font-size: 12px; line-height: 1; }
body .row:has(> .col > .product-thumb) .product-thumb .shine-sale-badge { border-color: #f0b2aa; background: #fff0ee; color: #c0392b; }

/* -------------------------------------------------------------------------- */
/* Homepage product cards - match the supplied reference card design.         */
/* These selectors intentionally do not depend on .shine-product-grid because  */
/* homepage product modules render their own Bootstrap row.                   */
/* -------------------------------------------------------------------------- */
body .row:has(> .col > .product-thumb) {
    margin-right: -10px !important;
    margin-left: -10px !important;
    padding: 0 10px 36px !important;
    background: #f1f2f3 !important;
}

body .row:has(> .col > .product-thumb) > .col {
    display: flex !important;
    padding: 0 10px !important;
    margin-bottom: 20px !important;
}

body .row:has(> .col > .product-thumb) .product-thumb {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    /* Was a hard height: 441px. A wrapping (two-line) product title needed
       more room than the fixed box allowed, so the flex content was squeezed
       and the price spilled down over the divider above the action row. Keep
       441px as the minimum and let taller cards grow; the flex columns still
       stretch every card in a row to the same height. */
    height: auto !important;
    min-height: 441px !important;
    padding: 0 0 13px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    transform: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .image {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 278px !important;
    height: 278px !important;
    padding: 18px 24px !important;
    background: #fff !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body .row:has(> .col > .product-thumb) > .col:nth-child(n+2) .product-thumb .image::after {
    position: absolute !important;
    top: 17px !important;
    right: 17px !important;
    padding: 4px 7px !important;
    border: 1px solid #b8c8e7 !important;
    border-radius: 2px !important;
    background: #dce8ff !important;
    color: #2864c7 !important;
    content: "New" !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* The compact "New" badge above is the one we want to keep. The client-side
   card enhancer (footer.twig) also injects its own <span class="shine-product-badge">
   for new products, and because that element only overrode `right` while the
   base .shine-product-badge rule still set `left`, it stretched into a
   full-width "NEW" bar across the product image. Drop the duplicate so only
   the compact badge shows. The sale badge carries .shine-sale-badge, which
   positions itself correctly, so it stays untouched. */
body .row:has(> .col > .product-thumb) .product-thumb .image > .shine-product-badge:not(.shine-sale-badge) {
    display: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .image .shine-sale-badge {
    position: absolute !important;
    display: inline-block !important;
    top: 17px !important;
    left: 17px !important;
    right: auto !important;
    width: auto !important;
    max-width: max-content !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    border: 1px solid #dc3545 !important;
    border-radius: 2px !important;
    background: #dc3545 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .content {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 4px 16px 0 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .description {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .description h4,
body .row:has(> .col > .product-thumb) .product-thumb .description h4 a {
    margin: 0 0 7px !important;
    color: #5c6265 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .description p {
    display: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .price {
    margin: 0 !important;
    color: #252a2d !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .price-new {
    color: #252a2d !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .price-old {
    display: inline-block !important;
    margin-left: 8px !important;
    color: #c0392b !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    text-decoration: line-through !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .price-tax {
    display: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb form {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 12px !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button {
    display: flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 11px 0 0 !important;
    border-top: 1px solid #e5e5e5 !important;
    gap: 0 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 27px !important;
    padding: 0 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #777d80 !important;
    box-shadow: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child {
    flex: 1 1 auto !important;
    justify-content: flex-start !important;
    width: auto !important;
    font-size: 0 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child::after {
    content: none !important;
    display: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child i {
    font-size: 14px !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="wishlist.add"],
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="compare.add"] {
    display: inline-flex !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    font-size: 14px !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="wishlist.add"] i,
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="compare.add"] i {
    font-size: 15px !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .shine-buy-now,
body .row:has(> .col > .product-thumb) .product-thumb .buy-now-btn {
    display: none !important;
}

@media (max-width: 767.98px) {
    /* One product card per row on phones: two squeezed columns made the
       cards cramped and hard to read. Full-width columns keep the roomy
       desktop-style card design. */
    body .row:has(> .col > .product-thumb) > .col,
    .shine-product-grid > * {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Let cards grow with their content: long product titles wrap onto more
       lines, and a fixed height would clip the buttons. Flex stretch keeps
       every card in a row equally tall. */
    body .row:has(> .col > .product-thumb) .product-thumb {
        height: auto !important;
        min-height: 400px !important;
    }

    body .row:has(> .col > .product-thumb) .product-thumb .image {
        flex-basis: 280px !important;
        height: 280px !important;
        overflow: hidden !important;
    }

    body .row:has(> .col > .product-thumb) .product-thumb .image img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }
}


/* Flexbox for Description to align prices */
.product-thumb .description {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Push the price to the bottom of the description area */
.product-thumb .price {
    margin-top: auto !important;
    margin-bottom: 15px !important; /* Adds breathing room between the price and the buttons */
}
   
/* Add a little space under the title */
.product-thumb .description h4 {
    margin-bottom: 10px !important;
}

/* 1. Make Product Titles Smaller */
.product-thumb .description h4, 
.product-thumb .description h4 a {
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* 2. Make Prices Lighter (Less Bold) */
.product-thumb .price {
    font-weight: 500 !important; 
}
.product-thumb .price-new {
    font-weight: 600 !important; /* Slightly bolder for the new price if discounted, but lighter than before */
}

/* 3. Button Layout - Add spacing so they are narrower and centered */
.product-thumb .button {
    display: flex !important;
    gap: 8px !important; /* Adds space between the buttons */
    justify-content: center !important;
    padding: 0 10px 10px 10px !important; /* Keeps them off the very edge of the card */
}

/* Make buttons share the space but respect the gap */
.product-thumb .button button:first-child,
.product-thumb .button button[formaction*="cart.add"],
.product-thumb .button button.buy-now-btn {
    flex: 1 !important; 
    width: auto !important;
    border-radius: 6px !important;
}

/* 4. Cart Button - Solid Green */
.product-thumb .button button:first-child,
.product-thumb .button button[formaction*="cart.add"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: none !important;
}
.product-thumb .button button:first-child:hover,
.product-thumb .button button[formaction*="cart.add"]:hover {
    background-color: #329a3f !important; /* Slightly darker green on hover */
}

/* 5. Buy Now Button - Orange Outline */
.product-thumb .button button.buy-now-btn {
    background-color: transparent !important;
    color: var(--secondary-color) !important;
    border: 2px solid var(--secondary-color) !important;
    /* Subtract 2px from padding to account for the border and match the cart button height */
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.product-thumb .button button.buy-now-btn:hover {
    background-color: var(--secondary-color) !important;
    color: #ffffff !important;
}

/* Revert Button Widths & Reduce Height */
.product-thumb .button button:first-child,
.product-thumb .button button[formaction*="cart.add"],
.product-thumb .button button.buy-now-btn {
    flex: 1 !important; 
    width: 100% !important; /* Revert to full flex width */
    padding-top: 6px !important;  /* Reduced height */
    padding-bottom: 6px !important; /* Reduced height */
    font-size: 14px !important;
}


/* -------------------------------------------------------------------------- */
/* Reference product cards: four equal cards across the desktop grid.         */
/* -------------------------------------------------------------------------- */
.shine-product-grid {
    --shine-card-gap: 26px;
    margin-right: calc(var(--shine-card-gap) / -2) !important;
    margin-left: calc(var(--shine-card-gap) / -2) !important;
    padding: 0 13px;
}

.shine-product-grid > .col {
    display: flex;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.shine-product-grid .product-thumb {
    width: 100%;
    min-height: 388px !important;
    padding: 0 0 14px !important;
    border: 1px solid #e4e4e4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

.shine-product-grid .product-thumb:hover {
    box-shadow: 0 8px 20px rgba(23, 33, 43, .09) !important;
    transform: translateY(-2px) !important;
}

.shine-product-grid .product-thumb .image {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 235px;
    padding: 16px 18px 10px;
    background: #fff;
}

.shine-product-grid .product-thumb .image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.shine-product-grid .product-thumb .content {
    min-height: 112px;
    padding: 5px 16px 0 !important;
}

.shine-product-grid .product-thumb .description {
    min-height: 76px;
}

.shine-product-grid .product-thumb .description h4,
.shine-product-grid .product-thumb .description h4 a {
    margin: 0 0 10px !important;
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.shine-product-grid .product-thumb .price,
.shine-product-grid .product-thumb .price-new {
    margin: 0 !important;
    color: #111 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.shine-product-grid .product-thumb .price-old {
    font-size: 11px !important;
}

.shine-product-grid .product-thumb form {
    margin: 0 !important;
    padding: 0 16px;
}

.shine-product-grid .product-thumb .button {
    display: flex !important;
    align-items: center;
    min-height: 45px;
    gap: 9px !important;
    padding: 0 !important;
    border-top: 0 !important;
}

.shine-product-grid .product-thumb .button button {
    min-height: 45px;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.shine-product-grid .product-thumb .button button:first-child,
.shine-product-grid .product-thumb .button button[formaction*="cart.add"] {
    display: flex !important;
    flex: 1 1 50% !important;
    align-items: center;
    justify-content: center;
    width: 50% !important;
    max-width: none !important;
    text-align: left;
    background: #38b64b !important;
    color: #fff !important;
}

.shine-product-grid .product-thumb .button button:first-child::before,
.shine-product-grid .product-thumb .button button[formaction*="cart.add"]::before {
    margin-right: 8px;
    content: "\\f217";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.shine-product-grid .product-thumb .button button.buy-now-btn,
.shine-product-grid .product-thumb .button button.shine-buy-now,
.shine-product-grid .product-thumb .button button[formaction*="buy"] {
    display: inline-flex !important;
    flex: 1 1 50% !important;
    align-items: center;
    justify-content: center;
    width: 50% !important;
    border: 2px solid #e49a00 !important;
    background: #fff !important;
    color: #d88700 !important;
    font-size: 14px !important;
}

.shine-product-grid .product-thumb .button button.buy-now-btn:hover,
.shine-product-grid .product-thumb .button button.shine-buy-now:hover,
.shine-product-grid .product-thumb .button button[formaction*="buy"]:hover {
    background: #e49a00 !important;
    color: #fff !important;
}

.shine-product-grid .product-thumb .button button[formaction*="wishlist.add"],
.shine-product-grid .product-thumb .button button[formaction*="compare.add"] {
    display: none !important;
}

@media (max-width: 767.98px) {
    .shine-product-grid {
        padding: 0 5px 16px;
    }

    .shine-product-grid > .col {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    .shine-product-grid .product-thumb {
        min-height: 400px !important;
    }

    .shine-product-grid .product-thumb .image {
        height: 280px;
        overflow: hidden !important;
    }
    
    .shine-product-grid .product-thumb .image img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Keep product actions aligned on narrow screens. Earlier theme rules set
       every card button to full width, which makes the icon actions overlap
       the cart label when all three buttons are present. */
    .shine-product-grid .product-thumb form {
        width: 100%;
    }

    .shine-product-grid .product-thumb .button {
        display: flex !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .shine-product-grid .product-thumb .button button {
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .shine-product-grid .product-thumb .button button:first-child,
    .shine-product-grid .product-thumb .button button[formaction*="cart.add"] {
        flex: 1 1 auto !important;
        width: auto !important;
        justify-content: center !important;
        gap: 6px !important;
        font-size: 12px !important;
    }

    .shine-product-grid .product-thumb .button button:first-child::before,
    .shine-product-grid .product-thumb .button button[formaction*="cart.add"]::before {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .shine-product-grid .product-thumb .button button[formaction*="wishlist.add"],
    .shine-product-grid .product-thumb .button button[formaction*="compare.add"],
    .shine-product-grid .product-thumb .button button[formaction*="compare|add"],
    .shine-product-grid .product-thumb .button button.shine-compare-active {
        display: inline-flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
    }

    .shine-product-grid .product-thumb .button button[formaction*="wishlist.add"] i,
    .shine-product-grid .product-thumb .button button[formaction*="compare.add"] i,
    .shine-product-grid .product-thumb .button button[formaction*="compare|add"] i,
    .shine-product-grid .product-thumb .button button.shine-compare-active i {
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}

/* Premium product comparison view. The core OpenCart compare template is
   retained; these rules give its table a branded, responsive presentation. */
.shine-compare-page {
    background: #f7faf8 !important;
}

.shine-compare-page #main-content {
    padding-top: 32px !important;
    padding-bottom: 48px;
}

.shine-compare-page #product-compare {
    max-width: 1180px;
    margin: 0 auto;
}

.shine-compare-page #product-compare > h1 {
    position: relative;
    margin: 0 0 28px;
    padding: 26px 30px 25px 32px;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(110deg, #172b3a 0%, #214352 100%);
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -.04em;
    box-shadow: 0 12px 28px rgba(23, 43, 58, .14);
}

.shine-compare-page #product-compare > h1::after {
    position: absolute;
    right: 34px;
    bottom: -42px;
    width: 150px;
    height: 150px;
    border: 26px solid rgba(245, 183, 34, .2);
    border-radius: 50%;
    content: "";
}

.shine-compare-page #product-compare table.table {
    width: 100%;
    /* Keep the label column fixed and give the product columns a real,
       content-independent width. `table-layout: fixed` alone still lets the
       first row's intrinsic content influence auto-sized columns. */
    min-width: 745px;
    table-layout: fixed;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid #e1e9e4;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(23, 43, 58, .08);
    color: #17212b;
}

.shine-compare-page #product-compare table.table tbody tr:first-child td {
    padding: 15px 18px;
    border: 0;
    background: #edf7ef;
    color: #217b37;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.shine-compare-page #product-compare table.table td {
    min-width: 150px;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid #e8eeea;
    vertical-align: middle;
    font-size: .9rem;
}

.shine-compare-page #product-compare table.table td:first-child {
    border-color: transparent;
    min-width: 145px;
    background: #fbfcfb;
    color: #65736b;
    font-size: .75rem;
    font-weight: 700;
    max-width: 145px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Widths are supplied by the dynamically-created colgroup. Do not allow
   product names or descriptions to create intrinsic column widths. */
.shine-compare-page #product-compare table.table td:not(:first-child) {
    width: auto;
    min-width: 0;
    max-width: none;
    overflow-wrap: anywhere;
}

.shine-compare-page #product-compare table.table .rating,
.shine-compare-page #product-compare table.table .rating i,
.shine-compare-page #product-compare table.table .fa-star,
.shine-compare-page #product-compare table.table .fa-star-o {
    letter-spacing: 0 !important;
}

.shine-compare-page #product-compare table.table .rating i,
.shine-compare-page #product-compare table.table .fa-star,
.shine-compare-page #product-compare table.table .fa-star-o {
    display: inline-block;
    width: 16px;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

/* OpenCart still uses the Font Awesome 4 fa-star-o class for empty stars.
   Map both legacy classes to the Font Awesome 6 star glyph loaded by the
   theme, otherwise the empty-star class can render as a broken glyph. */
.shine-compare-page #product-compare table.table .rating i,
.shine-compare-page #product-compare table.table .fa-star,
.shine-compare-page #product-compare table.table .fa-star-o {
    font-family: "Font Awesome 6 Free" !important;
    color: #cbd5d1 !important;
}

.shine-compare-page #product-compare table.table .fa-star,
.shine-compare-page #product-compare table.table .rating i.fa-star {
    font-weight: 900 !important;
    color: #f5b722 !important;
}

.shine-compare-page #product-compare table.table .fa-star-o,
.shine-compare-page #product-compare table.table .rating i.fa-star-o {
    font-weight: 400 !important;
    color: #cbd5d1 !important;
}

.shine-compare-page #product-compare table.table .shine-rating-unrated i,
.shine-compare-page #product-compare table.table .shine-rating-unrated i::before {
    color: #cbd5d1 !important;
    font-weight: 400 !important;
}

.shine-compare-page #product-compare table.table .fa-star-o::before,
.shine-compare-page #product-compare table.table .rating i.fa-star-o::before {
    content: "\f005" !important;
}

.shine-compare-page #product-compare table.table .shine-rating-unrated i::before {
    content: "\f005" !important;
}

/* Keep rating cells as real table cells. Turning a TD into a flex item breaks
   the table's column sizing and collapses the rating content in some browsers. */
.shine-compare-page #product-compare table.table .shine-rating-row > td:not(:first-child) {
    display: table-cell !important;
    padding-top: 18px;
    padding-bottom: 18px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.shine-compare-page #product-compare table.table .shine-rating-row > td:not(:first-child) i {
    display: inline-block !important;
    width: 15px !important;
    height: 16px;
    margin: 0 -1px 0 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 16px !important;
    text-align: center;
}

.shine-compare-page #product-compare table.table .shine-rating-row .shine-rating-copy {
    display: inline-block !important;
    margin: 0 0 0 8px;
    font-size: .9rem;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

/* Compare buttons are deliberately visible in cards and turn blue when active. */
.shine-product-grid .product-thumb .button button[formaction*="compare.add"],
.shine-product-grid .product-thumb .button button[formaction*="compare|add"],
.product-thumb .button button.shine-compare-active {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

button.shine-compare-active {
    background: #1677e8 !important;
    border-color: #1677e8 !important;
    color: #fff !important;
}


.shine-compare-page #product-compare table.table tbody tr:nth-child(2) td:not(:first-child) {
    padding-top: 24px;
    color: #172b3a;
    font-weight: 800;
    line-height: 1.45;
}

.shine-compare-page #product-compare table.table img {
    display: block;
    width: 190px !important;
    max-width: 190px !important;
    height: 190px !important;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid #e4ebe6;
    border-radius: 12px;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 5px 15px rgba(23, 43, 58, .06);
}

.shine-compare-page #product-compare table.table tr td:nth-child(n+2) .price,
.shine-compare-page #product-compare table.table tr td:nth-child(n+2) strong {
    color: #d28e00;
    font-weight: 800;
}

/* Alternate the comparison rows while keeping the label and product cells on
   the same background. This deliberately targets cells instead of changing
   the table display model, so the fixed column widths and image dimensions
   remain untouched. */
.shine-compare-page #product-compare table.table tbody tr:nth-child(odd) > td,
#product-compare table.table tbody tr:nth-child(odd) > td {
    background-color: #ffffff;
}

.shine-compare-page #product-compare table.table tbody tr:nth-child(even) > td,
#product-compare table.table tbody tr:nth-child(even) > td {
    background-color: #f6faf7;
}

.shine-compare-page #product-compare table.table tbody tr:nth-child(odd) > td:first-child,
#product-compare table.table tbody tr:nth-child(odd) > td:first-child {
    background-color: #ffffff;
}

.shine-compare-page #product-compare table.table tbody tr:nth-child(even) > td:first-child,
#product-compare table.table tbody tr:nth-child(even) > td:first-child {
    background-color: #f6faf7;
}

.shine-compare-page #product-compare table.table .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 3px 4px 3px 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 7px;
    font-size: .76rem;
    font-weight: 800;
    line-height: 1.2;
}

.shine-compare-page #product-compare table.table .btn-primary {
    background: #38b64b;
    color: #fff;
}

.shine-compare-page #product-compare table.table .btn-primary:hover {
    background: #2c963c;
    color: #fff;
}

.shine-compare-page #product-compare table.table .btn-danger {
    background: #fff1f0;
    color: #c84b40;
}

.shine-compare-page #product-compare table.table .btn-danger:hover {
    background: #c84b40;
    color: #fff;
}

/* Use a lighter hierarchy for compare controls and product headings without
   changing their existing colors, dimensions, or table layout. */
.shine-compare-page #product-compare table.table .btn,
.shine-compare-page #product-compare table.table .btn-primary,
.shine-compare-page #product-compare table.table .btn-danger {
    font-weight: 500;
}

.shine-compare-page #product-compare table.table tbody tr:first-child > td,
.shine-compare-page #product-compare table.table tbody tr:nth-child(2) > td:not(:first-child) {
    font-weight: 600;
}
`r`n@media (max-width: 767.98px) {
    .shine-compare-page #main-content {
        padding: 22px 12px 36px !important;
    }

    .shine-compare-page #product-compare > h1 {
        margin-bottom: 18px;
        padding: 22px 20px;
    }

    .shine-compare-page #product-compare {
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .shine-compare-page #product-compare table.table td {
        padding: 14px 12px;
    }

    .shine-compare-page #product-compare table.table img {
        width: 140px !important;
        height: 140px !important;
        max-width: 140px !important;
    }
}

/* Final compare grid alignment: use one collapsed border grid so the outer
   edge, header band, and every internal column edge share the same pixel. */
.shine-compare-page #product-compare table.table {
    box-sizing: border-box;
    border: 1px solid #e1e9e4 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.shine-compare-page #product-compare table.table > tbody > tr > td {
    box-sizing: border-box;
    border: 1px solid #e1e9e4 !important;
}

.shine-compare-page #product-compare table.table > tbody > tr:first-child > td {
    border: 1px solid #e1e9e4 !important;
}

/* Restore the grid line on the label column as well as the product cells. */
.shine-compare-page #product-compare table.table > tbody > tr > td:first-child {
    border: 1px solid #e1e9e4 !important;
}

/* The browser reserves the far-right scrollbar gutter outside the page
   layout. Match its track to the navigation bar so the full-width bar does
   not appear to stop short at the viewport edge. */
html {
    scrollbar-color: var(--header-bar-color, #3f403f) #3f403f;
}

html::-webkit-scrollbar {
    width: 16px;
}

html::-webkit-scrollbar-track {
    background: var(--header-bar-color, #3f403f);
}

html::-webkit-scrollbar-thumb {
    background: #a9a9a9;
    border: 4px solid var(--header-bar-color, #3f403f);
    border-radius: 10px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #c4c4c4;
}

/* Keep standard OpenCart catalog actions on the configured primary color.
   Bootstrap's default blue is otherwise visible on search and compare pages. */
body.shinestore-page #button-search,
body.shinestore-page #compare-total,
body.shinestore-page .btn-primary:not(.btn-danger),
body.shinestore-page .btn-info {
    background-color: var(--primary-color, #3bb54a) !important;
    border-color: var(--primary-color, #3bb54a) !important;
    color: #fff !important;
}

body.shinestore-page #button-search:hover,
body.shinestore-page #button-search:focus,
body.shinestore-page #compare-total:hover,
body.shinestore-page #compare-total:focus,
body.shinestore-page .btn-primary:not(.btn-danger):hover,
body.shinestore-page .btn-primary:not(.btn-danger):focus,
body.shinestore-page .btn-info:hover,
body.shinestore-page .btn-info:focus {
    background-color: color-mix(in srgb, var(--primary-color, #3bb54a) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--primary-color, #3bb54a) 85%, #000) !important;
    color: #fff !important;
}

/* The selected catalog layout button should use the same primary accent. */
body.shinestore-page #list-view.active,
body.shinestore-page #grid-view.active,
body.shinestore-page .btn-group > .btn.active {
    background-color: var(--primary-color, #3bb54a) !important;
    border-color: var(--primary-color, #3bb54a) !important;
    color: #fff !important;
}

/* Final mobile product-card action override. Keep this after the homepage
   card rules above because those rules intentionally style the same buttons. */
@media (max-width: 767.98px) {
    .shine-product-grid .product-thumb .content {
        min-width: 0 !important;
    }

    .shine-product-grid .product-thumb form {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin-top: auto !important;
        clear: both !important;
    }

    .shine-product-grid .product-thumb form > .button {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .shine-product-grid .product-thumb form > .button > button {
        box-sizing: border-box !important;
        display: inline-flex !important;
        position: static !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .shine-product-grid .product-thumb form > .button > button:first-child,
    .shine-product-grid .product-thumb form > .button > button[formaction*="cart.add"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 12px !important;
        gap: 5px !important;
    }

    .shine-product-grid .product-thumb form > .button > button:first-child::before,
    .shine-product-grid .product-thumb form > .button > button:first-child::after,
    .shine-product-grid .product-thumb form > .button > button[formaction*="cart.add"]::before,
    .shine-product-grid .product-thumb form > .button > button[formaction*="cart.add"]::after {
        content: none !important;
        display: none !important;
    }

    .shine-product-grid .product-thumb form > .button > button[formaction*="wishlist.add"],
    .shine-product-grid .product-thumb form > .button > button[formaction*="compare.add"],
    .shine-product-grid .product-thumb form > .button > button[formaction*="compare|add"] {
        display: inline-flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        font-size: 0 !important;
    }

    .shine-product-grid .product-thumb form > .button > button > i {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}

/* Search results use OpenCart's core product grid, not .shine-product-grid.
   Apply the same narrow-screen action layout to those cards as well. */
@media (max-width: 767.98px) {
    body.shinestore-page .product-thumb form > .button {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 40px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    body.shinestore-page .product-thumb form > .button > button {
        box-sizing: border-box !important;
        display: inline-flex !important;
        position: static !important;
        float: none !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        height: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    body.shinestore-page .product-thumb form > .button > button:first-child,
    body.shinestore-page .product-thumb form > .button > button[formaction*="cart.add"] {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 12px !important;
        gap: 5px !important;
    }

    body.shinestore-page .product-thumb form > .button > button:first-child::before,
    body.shinestore-page .product-thumb form > .button > button:first-child::after,
    body.shinestore-page .product-thumb form > .button > button[formaction*="cart.add"]::before,
    body.shinestore-page .product-thumb form > .button > button[formaction*="cart.add"]::after {
        content: none !important;
        display: none !important;
    }

    body.shinestore-page .product-thumb form > .button > button[formaction*="wishlist.add"],
    body.shinestore-page .product-thumb form > .button > button[formaction*="compare.add"],
    body.shinestore-page .product-thumb form > .button > button[formaction*="compare|add"] {
        display: inline-flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        max-width: 40px !important;
        font-size: 0 !important;
    }

    body.shinestore-page .product-thumb form > .button > button > i {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }
}


/* ==========================================================================
   SHINESTORE HEADER v2 - consolidated header styles
   Covers: top utility bar, main header row (hamburger / logo / search /
   wishlist / compare / cart), navigation bar, nav dropdowns and the mobile
   offcanvas menu. This is the single source of truth for header styling.
   ========================================================================== */

/* ---- Top utility bar ---------------------------------------------------- */
.shine-topbar {
    background: #f7f8f9;
    border-bottom: 1px solid #ebedef;
    color: #5c6670;
    font-size: 12.5px;
}

.shine-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
}

.shine-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5c6670;
    font-weight: 600;
    white-space: nowrap;
}

.shine-topbar-link i { font-size: 15px; }
.shine-topbar-link:hover { color: var(--primary-color, #3bb54a); }

.shine-topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.shine-usp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.shine-usp i { font-size: 14px; color: var(--primary-color, #3bb54a); }

.shine-topbar-divider {
    width: 1px;
    height: 14px;
    background: #dde2e5;
}

/* Language / currency modules rendered by OpenCart inside the topbar. */
.shine-topbar-modules {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shine-topbar-modules > * { margin: 0; }

.shine-topbar-modules .btn {
    padding: 1px 6px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    color: #5c6670;
    font-size: 12.5px;
}

.shine-topbar-modules .btn:hover {
    color: var(--primary-color, #3bb54a);
    background: #eef2f0;
}

.shine-topbar-modules select {
    padding: 1px 4px;
    border: 1px solid #dde2e5;
    border-radius: 4px;
    background: #fff;
    color: #5c6670;
    font-size: 12.5px;
}

/* All three USP messages stay visible. On narrower desktop widths the USP
   group wraps to a second line instead of hiding USP 2 and USP 3. The whole
   topbar is still hidden on tablets and phones (rule below). */
.shine-topbar-right { flex-wrap: wrap; }

@media (max-width: 991.98px) {
    .shine-topbar { display: none; }
}

/* ---- Main header row ------------------------------------------------------ */
header.shine-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: #fff;
    border-bottom: 1px solid #ebebeb;
}

#custom-shinestore-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    height: 78px;
}

.shine-mobile-menu { display: none; }

#logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-width: 0;
}

#logo a {
    display: flex;
    align-items: center;
    min-width: 0;
}

#logo img {
    display: block;
    width: auto;
    /* Definite height is required: SVG logos that ship only a viewBox (no
       intrinsic width/height attributes) collapse to 0x0 when both width and
       height are auto inside the flex / min-width:0 header chain. A fixed
       height with object-fit keeps any logo (SVG or raster) visible and
       undistorted. */
    height: 46px;
    max-width: 190px;
    max-height: 46px;
    object-fit: contain;
    object-position: left center;
}

#logo .shine-logo-text {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--shine-ink, #17212b);
    white-space: nowrap;
}

/* ---- Search ------------------------------------------------------------------ */
#shine-search-col {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 660px;
}

.search-container { width: 100%; }

.shine-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 46px;
    border: 2px solid #e5e7ea;
    border-radius: 25px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.shine-search-form:focus-within {
    border-color: var(--primary-color, #3bb54a);
    box-shadow: 0 0 0 4px rgba(59, 181, 74, .12);
}

.shine-search-form .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 23px 0 0 23px;
    padding: 0 8px 0 20px;
    background: transparent;
    font-size: 14px;
    box-shadow: none;
}

.shine-search-form .form-control:focus {
    border-color: transparent;
    box-shadow: none;
}

.shine-search-btn {
    flex: 0 0 auto;
    width: 56px;
    height: 100%;
    border: 0;
    border-radius: 0 23px 23px 0;
    background: var(--primary-color, #3bb54a);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter .2s ease;
}

.shine-search-btn i { line-height: 1; }
.shine-search-btn:hover { color: #fff; filter: brightness(.93); }

/* ---- Action icons (wishlist / compare) ---------------------------------------- */
#shine-icons-col {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    height: 100%;
}

#shine-icons-col .shine-icon {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 64px;
    height: 100%;
    padding: 0 8px;
    color: #444;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

#shine-icons-col .shine-icon i {
    font-size: 22px;
    line-height: 1;
}

#shine-icons-col .shine-icon span {
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

#shine-icons-col .shine-icon:hover {
    color: var(--primary-color, #3bb54a);
    background: #f6faf7;
}

/* ---- Cart ------------------------------------------------------------------------ */
#header-cart { height: 100%; }

#header-cart #cart {
    display: flex;
    height: 100%;
}

#header-cart .shine-cart-button {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 76px;
    height: 100%;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #444;
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    transition: color .15s ease, background .15s ease;
}

#header-cart .shine-cart-button:hover {
    color: var(--primary-color, #3bb54a);
    background: #f6faf7;
}

#header-cart .shine-cart-button > i.ph-light {
    font-size: 22px;
    line-height: 1;
}

#header-cart .dropdown-toggle::after { display: none; }

#header-cart .dropdown-menu {
    min-width: 330px;
    max-width: calc(100vw - 24px);
    padding: 10px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .18);
}

#header-cart .dropdown-menu .table { margin-bottom: 8px; }

/* ---- Notification badges (cart / wishlist / compare) -------------------------------- */
.shine-compare-link,
.shine-wishlist-link { position: relative; }

.shine-cart-count,
.shine-wishlist-count,
.shine-compare-count {
    position: absolute;
    top: 10px;
    right: 13px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--primary-color, #3bb54a);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    font-style: normal;
    line-height: 13px;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

/* Empty badges are removed in the markup; keep the hidden attribute
   authoritative for the JS-updated bubbles as well. */
.shine-cart-count[hidden],
.shine-wishlist-count[hidden],
.shine-compare-count[hidden] {
    display: none !important;
}

/* ---- Navigation bar --------------------------------------------------------------- */
.shine-navigation {
    background: var(--header-bar-color, #3f403f);
}

.shine-navigation > .container {
    display: flex;
    align-items: center;
    height: 46px;
}

.shine-navigation .row {
    --bs-gutter-x: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
    margin: 0;
}

.shine-navigation .col-auto {
    flex: 0 0 auto;
    width: auto;
    padding: 0;
}

.shine-navigation .col {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
}

.shine-departments {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin: 6px 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--secondary-color, #dc9814);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.shine-departments i { font-size: 17px; line-height: 1; }
.shine-departments:hover { color: #fff; filter: brightness(.94); }
.shine-departments.dropdown-toggle::after { display: none; }

.shine-category-links {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 2px;
    /* Breathing room between the Menu dropdown button and the nav items. */
    padding-left: 26px;
}

.shine-category-links > a,
.shine-category-nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    padding: 0 14px;
    color: rgba(255, 255, 255, .92);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .15s ease;
}

/* Hover treatment: no highlight box. A thin animated line grows from the
   centre of the item in the theme's gold accent, exactly like the original
   header design (see _backup_v1.0.3). */
.shine-category-links > a::after,
.shine-category-nav-toggle::before {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    content: "";
    background: var(--shine-yellow, #f5b722);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .28s ease;
    pointer-events: none;
}

.shine-category-links > a:hover,
.shine-category-links > a:focus-visible,
.shine-category-nav-toggle:hover,
.shine-category-nav-toggle:focus-visible,
.shine-category-item.shine-hover-open .shine-category-nav-toggle,
.shine-category-nav-toggle[aria-expanded="true"] {
    color: #fff;
}

.shine-category-links > a:hover::after,
.shine-category-links > a:focus-visible::after,
.shine-category-nav-toggle:hover::before,
.shine-category-nav-toggle:focus-visible::before,
.shine-category-item.shine-hover-open .shine-category-nav-toggle::before,
.shine-category-nav-toggle[aria-expanded="true"]::before {
    transform: scaleX(1);
}

.shine-category-item {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.shine-category-nav-toggle i {
    font-size: 12px;
    transition: transform .28s ease;
}

/* Animated chevron for the "Menu" departments dropdown button. */
.shine-departments .shine-menu-caret {
    font-size: 12px;
    transition: transform .28s ease;
}

.shine-departments[aria-expanded="true"] .shine-menu-caret {
    transform: rotate(180deg);
}

.shine-category-item.shine-hover-open .shine-category-nav-toggle i,
.shine-category-nav-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.shine-category-links > a.shine-sale-link {
    color: var(--shine-yellow, #f5b722);
}

.shine-category-links > a.shine-sale-link:hover {
    color: #ffd24d;
}

/* ---- Nav dropdowns (fixed positioning; coordinates set by menu.twig JS) ------------ */
.shine-desktop-menu > .shine-menu-dropdown,
.shine-category-item > .shine-categories-dropdown {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    display: block;
    margin: 0;
    padding: 6px;
    min-width: 260px;
    list-style: none;
    background: #fff;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
    z-index: 2000 !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.shine-desktop-menu > .shine-menu-dropdown.show,
.shine-category-item > .shine-categories-dropdown.shine-hover-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.shine-menu-dropdown .dropdown-item {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    color: #333;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}

.shine-menu-dropdown .dropdown-item:hover,
.shine-menu-dropdown .dropdown-item:focus {
    background: #f3f6f4;
    color: var(--primary-color, #3bb54a);
}

/* Section headings inside the desktop "Menu" dropdown, mirroring the
   Menu / Categories / Information sections of the mobile offcanvas menu. */
.shine-menu-dropdown .shine-menu-heading {
    padding: 10px 14px 4px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    user-select: none;
}

.shine-menu-dropdown li.shine-menu-heading:not(:first-child) {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #eef1f4;
}

/* Sale link keeps the mobile menu's accent colour. */
.shine-menu-dropdown .dropdown-item.shine-menu-sale,
.shine-menu-dropdown .dropdown-item.shine-menu-sale i {
    color: #dc2626;
    font-weight: 700;
}

.shine-menu-dropdown .dropdown-item.shine-menu-sale:hover,
.shine-menu-dropdown .dropdown-item.shine-menu-sale:focus {
    background: #fdf1f1;
    color: #dc2626;
}

/* ---- Category flyout submenus inside the nav dropdowns ------------------------------- */
.shine-menu-group { position: relative; }

.shine-menu-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.shine-menu-parent .shine-menu-arrow {
    flex: 0 0 auto;
    font-size: 12px;
    color: #98a2b3;
    transition: transform .15s ease, color .15s ease;
}

.shine-menu-children {
    position: absolute;
    top: -6px;
    left: 100%;
    display: block;
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 2100;
}

.shine-menu-group:hover > .shine-menu-children,
.shine-menu-group:focus-within > .shine-menu-children {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.shine-menu-group:hover > .shine-menu-parent .shine-menu-arrow,
.shine-menu-group:focus-within > .shine-menu-parent .shine-menu-arrow {
    color: var(--primary-color, #3bb54a);
    transform: rotate(90deg);
}

/* Flipped flyouts (class set by menu.twig JS) open towards the left instead. */
.shine-menu-group--flip > .shine-menu-children {
    left: auto;
    right: 100%;
    transform: translateX(6px);
}

.shine-menu-group--flip:hover > .shine-menu-children,
.shine-menu-group--flip:focus-within > .shine-menu-children {
    transform: translateX(0);
}

.shine-menu-group--flip:hover > .shine-menu-parent .shine-menu-arrow,
.shine-menu-group--flip:focus-within > .shine-menu-parent .shine-menu-arrow {
    transform: rotate(-90deg);
}

/* ---- Mobile header (below 992px) ------------------------------------------------------ */
@media (max-width: 991.98px) {
    .shine-navigation { display: none; }

    .shine-mobile-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        height: 100%;
        border: 0;
        background: transparent;
        color: #333;
        font-size: 24px;
        cursor: pointer;
    }

    .shine-mobile-menu:hover { color: var(--primary-color, #3bb54a); }

    header.shine-header > .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    #custom-shinestore-header {
        gap: 0;
        height: 60px;
    }

    #logo {
        flex: 1 1 auto;
        justify-content: center;
    }

    #logo a { max-width: 100%; }

    #logo img {
        max-width: 100%;
        height: 34px;
        max-height: 34px;
        object-fit: contain;
    }

    #logo .shine-logo-text { font-size: 19px; }

    /* Collapsed search = compact icon cell. */
    #shine-search-col {
        flex: 0 0 44px;
        width: 44px;
    }

    .search-container { height: 100%; }

    .shine-search-form {
        width: 44px;
        height: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .shine-search-form .form-control { display: none; }

    .shine-search-btn {
        width: 44px;
        height: 100%;
        border-radius: 0;
        background: transparent;
        color: #333;
        font-size: 23px;
    }

    .shine-search-btn:hover {
        background: transparent;
        color: var(--primary-color, #3bb54a);
        filter: none;
    }

    /* Expanded search = full-width bar below the header row. */
    .search-container.mobile-search-open .shine-search-form {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        height: 50px;
        display: flex;
        border: 2px solid #e5e7ea;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(16, 24, 40, .2);
        z-index: 40;
    }

    .search-container.mobile-search-open .shine-search-form .form-control {
        display: block;
        flex: 1 1 auto;
        border: 0;
        border-radius: 10px 0 0 10px;
        padding: 0 6px 0 16px;
        background: transparent;
        font-size: 16px; /* 16px prevents iOS focus zoom */
    }

    .search-container.mobile-search-open .shine-search-btn {
        width: 52px;
        height: 42px;
        margin: 2px 2px 2px 0;
        border-radius: 10px;
        background: var(--primary-color, #3bb54a);
        color: #fff;
        font-size: 18px;
    }

    /* Action cells collapse to 44px squares, labels hidden. */
    #shine-icons-col .shine-icon,
    #header-cart .shine-cart-button {
        flex: 0 0 44px;
        width: 44px;
        min-width: 0;
        height: 100%;
        padding: 0;
        gap: 0;
    }

    #shine-icons-col .shine-icon span,
    #header-cart .shine-cart-button > span { display: none; }

    #shine-icons-col .shine-icon i { font-size: 23px; }

    #header-cart .shine-cart-button > i.ph-light {
        font-size: 23px;
    }

    .shine-cart-count,
    .shine-wishlist-count,
    .shine-compare-count {
        top: 8px;
        right: 7px;
    }
}

/* Very narrow phones: drop the compare shortcut to save space. */
@media (max-width: 479.98px) {
    #shine-icons-col .shine-compare-link { display: none; }
}

/* ---- Mobile offcanvas menu ------------------------------------------------------------- */
#shine-mobile-menu {
    --bs-offcanvas-width: min(86vw, 330px);
}

#shine-mobile-menu .offcanvas-header {
    padding: 14px 16px;
    border-bottom: 1px solid #eceef0;
}

#shine-mobile-menu .offcanvas-header h5,
#shine-mobile-menu .shine-offcanvas-brand {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--shine-ink, #17212b);
}

#shine-mobile-menu .offcanvas-body {
    display: block;
    padding: 0;
}

.shine-mobile-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f2f3;
}

.shine-mobile-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: 10px;
    background: #f6f7f8;
    color: #444;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.shine-mobile-quick a i {
    font-size: 20px;
    line-height: 1;
    color: var(--shine-ink, #17212b);
}

.shine-mobile-quick a:hover,
.shine-mobile-quick a:active {
    background: var(--primary-color, #3bb54a);
    color: #fff;
}

.shine-mobile-quick a:hover i { color: #fff; }

.shine-mobile-heading {
    padding: 16px 16px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa3ab;
}

.shine-mobile-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    color: #333;
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f5;
}

.shine-mobile-link i {
    font-size: 13px;
    color: #b6bec4;
}

.shine-mobile-link:hover {
    background: #f6faf7;
    color: var(--primary-color, #3bb54a);
}

.shine-mobile-link.shine-mobile-sale,
.shine-mobile-link.shine-mobile-sale i {
    color: #dc2626;
    font-weight: 700;
}

.shine-mobile-child {
    display: block;
    padding: 9px 16px 9px 32px;
    color: #666;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f5;
}

.shine-mobile-child--sub {
    padding-left: 44px;
    font-size: 12.5px;
}

.shine-mobile-child:hover {
    color: var(--primary-color, #3bb54a);
}

/* ==========================================================================
   Collapsing sticky header, product reviews, newsletter signup and blog
   product discussions.
   ========================================================================== */

/* ---- Collapsing sticky header --------------------------------------------
   header.twig measures the top utility bar and the main header row and
   stores the heights in CSS variables. After the visitor scrolls, the
   .shine-header-collapsed class hides both rows while the green navigation
   bar stays glued to the top; the compact logo slides into the navigation.

   clip-path (instead of a static overflow: hidden) keeps the cart and
   language dropdowns fully visible while the header is expanded. While the
   rows animate (and while they stay collapsed) header.twig adds the
   .shine-header-animating class, which clips them to their shrinking box
   (overflow: hidden) so the logo and search bar slide away smoothly behind
   the navigation instead of vanishing in a single frame.

   The page also opts out of the browser's scroll anchoring (the html rule
   below). Collapsing the header removes the two rows from the document
   flow, which shortens the page mid-scroll; scroll anchoring then drags
   the position back below the expand threshold, the header expands, the
   page grows again and the cycle repeats as visible flicker. With
   anchoring disabled the scroll position stays where the visitor put it. */
html {
    overflow-anchor: none;
}

@media (min-width: 992px) {
    .shine-topbar {
        position: relative;
        z-index: 3;
        max-height: var(--shine-topbar-h, 40px);
        clip-path: inset(0 -200px -260px -200px);
        transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, border-bottom-width .4s ease, visibility 0s linear 0s;
    }

    header.shine-header > .container {
        max-height: var(--shine-main-h, 78px);
        clip-path: inset(0 -360px -460px -360px);
        transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, visibility 0s linear 0s;
    }

    /* The cart panel only opens while the header is expanded; keeping it
       inside the viewport also keeps it inside the generous clip-path. */
    #header-cart .dropdown-menu {
        max-height: calc(100vh - 220px);
        overflow-y: auto;
    }

    /* While the rows animate (or stay collapsed) they are clipped to their
       shrinking box, so the content slides away behind the navigation. */
    header.shine-header.shine-header-animating .shine-topbar,
    header.shine-header.shine-header-collapsed .shine-topbar,
    header.shine-header.shine-header-animating > .container,
    header.shine-header.shine-header-collapsed > .container {
        overflow: hidden;
    }

    header.shine-header.shine-header-collapsed .shine-topbar {
        max-height: 0;
        opacity: 0;
        border-bottom-width: 0;
        visibility: hidden;
        pointer-events: none;
        transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, border-bottom-width .4s ease, visibility 0s linear .4s;
    }

    header.shine-header.shine-header-collapsed > .container {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: max-height .4s cubic-bezier(.4, 0, .2, 1), opacity .28s ease, visibility 0s linear .4s;
    }
}

/* ---- Compact logo inside the navigation bar --------------------------------
   The slot is zero-width while the header is expanded, so the Menu button
   and the nav links keep their normal position. When the header collapses,
   the slot grows and pushes the menu and links to the right. */
.shine-nav-logo {
    display: flex;
    align-items: center;
    height: 100%;
    max-width: 0;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-width .4s cubic-bezier(.4, 0, .2, 1) .04s, margin-right .4s ease .04s, opacity .3s ease .06s, visibility 0s linear .4s;
}

.shine-nav-logo a {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
    text-decoration: none;
}

.shine-nav-logo img {
    display: block;
    width: auto;
    height: 26px;
    max-width: 150px;
    object-fit: contain;
    transform: translateX(-30px);
    transition: transform .4s cubic-bezier(.4, 0, .2, 1) .04s;
}

.shine-nav-logo-text {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
}

header.shine-header.shine-header-collapsed .shine-nav-logo {
    max-width: 160px;
    margin-right: 16px;
    opacity: 1;
    visibility: visible;
    transition: max-width .4s cubic-bezier(.4, 0, .2, 1) .04s, margin-right .4s ease .04s, opacity .3s ease .06s, visibility 0s linear 0s;
}

header.shine-header.shine-header-collapsed .shine-nav-logo img {
    transform: translateX(0);
}

header.shine-header.shine-header-collapsed .shine-nav-logo a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    border-radius: 4px;
}

/* ---- Product page: star rating widget ------------------------------------
   footer.twig converts the "Bad 1 2 3 4 5 Good" radio row of the review
   form into clickable / hoverable stars. The radios stay in the DOM
   (visually hidden) so the form keeps working with keyboards and screen
   readers. */
.shine-rating-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 0;
}

.shine-rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border: 0;
    background: transparent;
    color: #cfd6dd;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease, transform .12s ease;
}

.shine-rating-star:hover {
    transform: scale(1.15);
}

.shine-rating-star.is-filled {
    color: #f5b722;
}

.shine-rating-star:focus-visible {
    outline: 2px solid var(--primary-color, #3bb54a);
    outline-offset: 1px;
    border-radius: 4px;
}

/* Keyboard focus lands on the visually hidden radio; highlight its star. */
.shine-rating-radio:focus-visible + .shine-rating-star {
    outline: 2px solid var(--primary-color, #3bb54a);
    outline-offset: 1px;
    border-radius: 4px;
}

/* The stock review script flags a missing rating with .is-invalid. */
.shine-rating-stars.is-invalid .shine-rating-star {
    color: #dc3545;
}

.shine-rating-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    opacity: 0;
    pointer-events: none;
}

/* "Write a review" smooth-scrolls here; leave room for the sticky nav. */
#tab-review {
    scroll-margin-top: 92px;
}

/* ---- Product page: review list ---------------------------------------------
   review_list.twig renders each published review as a compact card with
   Phosphor star icons (the stock template ships FontAwesome icons, which
   the theme does not load). */
#review .shine-review {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

#review .shine-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#review .shine-review-author {
    font-weight: 600;
    color: #232623;
}

#review .shine-review-date {
    font-size: 12px;
    color: #8a8f8a;
}

#review .shine-review-stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1;
    color: #f5b722;
}

#review .shine-review-stars i:not(.ph-fill) {
    color: #cfd6dd;
}

#review .shine-review-text {
    margin: 8px 0 0;
    color: #3f403f;
    line-height: 1.55;
}

/* Confirmation / error banner shown right above the review form. */
.shine-review-alert {
    margin-bottom: 1rem;
}

/* ---- Newsletter signup feedback ------------------------------------------- */
.shine-newsletter-message {
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
}

.shine-newsletter-message.is-success { color: #158a2c; }
.shine-newsletter-message.is-error { color: #c0392b; }

/* ---- Blog: product discussions --------------------------------------------
   Logged-in customers can discuss store products. The form offers a live
   product picker (AJAX search) and every comment shows the product it is
   about, linking straight to the product page. */
.shine-discussions {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid #ececec;
}

.shine-discussions > h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    color: #161d27;
}

.shine-discussion-intro {
    margin: 0 0 18px;
    color: #5c6670;
    font-size: 14px;
    line-height: 1.6;
}

.shine-alert {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}

.shine-alert--success {
    border: 1px solid #bfe3c6;
    background: #f0faf2;
    color: #1e7c34;
}

.shine-alert--error {
    border: 1px solid #f3c6c2;
    background: #fdf2f1;
    color: #b3362c;
}

.shine-discussion-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border: 1px solid #e8ebee;
    border-radius: 14px;
    background: #f8fafb;
}

.shine-discussion-form label {
    font-size: 13px;
    font-weight: 700;
    color: #333;
}

.shine-discussion-form input[type="text"],
.shine-discussion-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d9dee3;
    border-radius: 9px;
    background: #fff;
    color: #26313b;
    font-size: 14px;
    font-family: inherit;
}

.shine-discussion-form input[type="text"]:focus,
.shine-discussion-form textarea:focus {
    border-color: var(--primary-color, #3bb54a);
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 181, 74, .15);
}

.shine-discussion-form .shine-discussion-error {
    color: #c0392b;
    font-size: 13px;
}

.shine-discussion-picker { position: relative; }

.shine-discussion-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #e3e7ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16, 24, 40, .14);
}

.shine-discussion-suggestion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #333;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.shine-discussion-suggestion:hover {
    background: #f2f6f3;
    color: var(--primary-color, #3bb54a);
}

.shine-discussion-hint {
    padding: 8px 10px;
    color: #8a939c;
    font-size: 13px;
}

.shine-discussion-submit {
    align-self: flex-start;
    padding: 10px 22px;
    border: 0;
    border-radius: 9px;
    background: var(--primary-color, #3bb54a);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.shine-discussion-submit:hover { filter: brightness(.94); }

.shine-discussion-login {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border: 1px dashed #d5dbe0;
    border-radius: 14px;
    background: #f8fafb;
    color: #4c5761;
    font-size: 14px;
}

.shine-discussion-login a {
    color: var(--primary-color, #3bb54a);
    font-weight: 700;
    text-decoration: none;
}

.shine-discussion-login a:hover { text-decoration: underline; }

.shine-discussion-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 26px;
}

.shine-discussion-comment {
    display: flex;
    gap: 12px;
    padding: 16px;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.shine-discussion-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color, #3bb54a);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
}

.shine-discussion-body {
    flex: 1 1 auto;
    min-width: 0;
}

.shine-discussion-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.shine-discussion-meta strong {
    color: #1d262f;
    font-size: 14px;
}

.shine-discussion-meta time {
    color: #98a1aa;
    font-size: 12px;
}

.shine-discussion-product {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef6f0;
    color: #1e7c34;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.shine-discussion-product:hover { background: #e2f1e6; }

.shine-discussion-text {
    margin: 0;
    color: #454f59;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.shine-discussion-empty {
    padding: 18px;
    border: 1px dashed #dfe3e7;
    border-radius: 12px;
    color: #8a939c;
    font-size: 14px;
    text-align: center;
}

/* ---- Blog: discussion actions (like / reply) ------------------------------- */
.shine-discussion-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.shine-discussion-like-form {
    display: inline-flex;
    margin: 0;
}

.shine-discussion-like,
.shine-discussion-reply-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid #e0e4e8;
    border-radius: 999px;
    background: #fff;
    color: #55606b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.shine-discussion-like:hover,
.shine-discussion-reply-toggle:hover {
    border-color: var(--primary-color, #3bb54a);
    color: var(--primary-color, #3bb54a);
}

.shine-discussion-like.is-liked {
    border-color: var(--primary-color, #3bb54a);
    background: #eaf6ec;
    color: #1e7c34;
}

.shine-discussion-like:disabled {
    opacity: .6;
    cursor: default;
}

.shine-discussion-like i,
.shine-discussion-reply-toggle i {
    font-size: 15px;
}

/* Nested reply form: reuses the discussion form styles, more compact. */
.shine-discussion-reply-form {
    margin-top: 12px;
    gap: 10px;
}

.shine-discussion-reply-form[hidden] { display: none; }

.shine-discussion-reply-form textarea { min-height: 70px; }

.shine-discussion-replies {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-left: 16px;
    border-left: 2px solid #eef1f3;
}

.shine-discussion-reply { background: #fafcfd; }

@media (max-width: 575.98px) {
    .shine-discussion-comment { flex-direction: column; }
    .shine-discussion-replies { padding-left: 10px; }
}

/* ==========================================================================
   Product page (product/product.twig override). The layout mirrors the
   category pages: white cards on the light gray page background, green
   primary actions, yellow accents and Phosphor icons.
   ========================================================================== */

/* ---- Gallery ---------------------------------------------------------------
   .magnific-popup wraps both the main image and the thumbnail strip, so
   the lightbox gallery can browse every product image; the thumbnails
   only swap the main image (see the click handler in product.twig). */
.shine-product .shine-product-stage-wrap {
    position: relative;
}

@media (min-width: 992px) {
    .shine-product .shine-product-gallery {
        position: sticky;
        top: 90px;
        align-self: flex-start;
    }
}

.shine-product-stage {
    display: block;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
}

.shine-product-stage img {
    display: block;
    width: 100%;
    height: auto;
}

.shine-product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 12px;
    border: 1px solid #f0b2aa;
    border-radius: 999px;
    background: #fff0ee;
    color: #c0392b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.shine-product-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.shine-product-thumb {
    display: block;
    width: 74px;
    height: 74px;
    padding: 0;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.shine-product-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shine-product-thumb:hover {
    border-color: var(--shine-yellow, #f5b722);
}

.shine-product-thumb.is-active {
    border-color: var(--primary-color, #3bb54a);
    box-shadow: 0 0 0 1px var(--primary-color, #3bb54a);
}

/* ---- Details column -------------------------------------------------------- */
.shine-product-title {
    margin: 0 0 .55rem;
    color: var(--shine-ink, #17212b);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
}

.shine-product-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.shine-product-rating-stars {
    display: inline-flex;
    gap: 1px;
    color: var(--shine-yellow, #f5b722);
    font-size: 17px;
    line-height: 1;
}

.shine-product-rating-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--shine-muted, #6b7280);
    font-size: 13.5px;
    text-decoration: none;
}

.shine-product-rating-link:hover {
    color: var(--shine-yellow-dark, #d79b05);
}

.shine-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0 0 1.1rem;
    padding: .8rem 0;
    border-top: 1px solid var(--shine-line, #e5e7eb);
    border-bottom: 1px solid var(--shine-line, #e5e7eb);
}

.shine-product-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shine-muted, #6b7280);
    font-size: 13px;
}

.shine-product-meta-item > i {
    font-size: 15px;
    color: #9aa4ad;
}

.shine-product-meta-item a,
.shine-product-meta-item span {
    color: var(--shine-ink, #17212b);
    font-weight: 600;
}

.shine-product-meta-item a:hover {
    color: var(--primary-color, #3bb54a);
}

/* ---- Price ----------------------------------------------------------------- */
.shine-product-price {
    margin-bottom: 1.25rem;
}

.shine-product-price-value {
    color: var(--shine-ink, #17212b);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

.shine-product-price-old {
    margin-left: 10px;
    color: #98a1aa;
    font-size: 17px;
    font-weight: 500;
}

/* ---- Price: keep the number and its currency symbol as one bidi unit --------
   With an RTL currency symbol (e.g. the Iraqi dinar "د.ع") next to an LTR
   number, the Unicode bidi algorithm reorders the symbol across the sibling
   inline price, so the discounted price lost its symbol and it piled up after
   the crossed-out price ("25,000  338,000  د.ع"). Isolating each price stops
   that cross-element reordering so every symbol stays with its own number
   ("25,000د.ع  338,000د.ع"). Applied to the product page and the product
   cards, which both show a special price next to an old price. */
.shine-product-price-value,
.shine-product-price-old,
.product-thumb .price-new,
.product-thumb .price-old {
    unicode-bidi: isolate;
}

.shine-product-price-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    color: var(--shine-muted, #6b7280);
    font-size: 13px;
}

.shine-product-price-note i {
    font-size: 15px;
    color: #9aa4ad;
}

.shine-product-discounts {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.shine-product-discounts li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--shine-muted, #6b7280);
    font-size: 13px;
}

.shine-product-discounts i {
    color: var(--shine-yellow-dark, #d79b05);
    font-size: 15px;
}
/* ---- Wishlist / compare ---------------------------------------------------- */
.shine-product-aux {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.shine-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 50%;
    background: #fff;
    color: #5b646d;
    font-size: 19px;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.shine-icon-btn:hover {
    border-color: var(--primary-color, #3bb54a);
    background: #f2faf3;
    color: var(--primary-color, #3bb54a);
}

/* ---- Options card ------------------------------------------------------------
   Radio and checkbox values become clickable chips: the native inputs stay
   in the markup (hidden but focusable) so OpenCart's error highlighting and
   the quick options modal keep working. Selects, text inputs and the file
   upload button get the same soft card look. */
.shine-product-options {
    margin: 0 0 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 12px;
    background: #fff;
}

.shine-product-options-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    color: var(--shine-ink, #17212b);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.shine-product-options-title i {
    color: var(--primary-color, #3bb54a);
    font-size: 17px;
}

#product-info .form-label {
    color: var(--shine-ink, #17212b);
    font-size: 13.5px;
    font-weight: 700;
}

#product-info .form-control,
#product-info .form-select {
    border-color: var(--shine-line, #e5e7eb);
    border-radius: 8px;
    font-size: 14px;
}

#product-info .form-control:focus,
#product-info .form-select:focus {
    border-color: var(--primary-color, #3bb54a);
    box-shadow: 0 0 0 .2rem rgba(59, 181, 74, .12);
}

#product-info .input-group-text {
    border-color: var(--shine-line, #e5e7eb);
    background: var(--shine-soft, #f5f6f7);
    color: #5b646d;
}

.shine-product-options .form-check {
    position: relative;
    display: inline-flex;
    margin: 0 8px 8px 0;
    padding: 0;
}

.shine-product-options .form-check-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.shine-product-options .shine-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: #414b55;
    font-size: 13.5px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.shine-product-options .shine-choice:hover {
    border-color: var(--shine-yellow, #f5b722);
}

.shine-product-options .form-check-input:checked + .shine-choice {
    border-color: var(--primary-color, #3bb54a);
    background: #f2faf3;
    color: var(--shine-ink, #17212b);
    font-weight: 600;
}

.shine-product-options .form-check-input:focus-visible + .shine-choice {
    box-shadow: 0 0 0 3px rgba(59, 181, 74, .2);
}

.shine-product-options .form-check-input.is-invalid + .shine-choice,
.shine-product-options .shine-choice.is-invalid {
    border-color: #f0b2aa;
}

.shine-product-options .shine-choice em {
    color: var(--shine-muted, #6b7280);
    font-style: normal;
    font-size: 12.5px;
}

.shine-product-options .shine-choice-img {
    width: 36px;
    height: 36px;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 6px;
    object-fit: cover;
}

.shine-btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .55rem 1rem;
    border: 1px dashed #c7ced4;
    border-radius: 8px;
    background: var(--shine-soft, #f5f6f7);
    color: #414b55;
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease;
}

.shine-btn-upload:hover {
    border-color: var(--primary-color, #3bb54a);
    color: var(--primary-color, #3bb54a);
}

/* ---- Quantity stepper + buy row -------------------------------------------- */
.shine-product-qty .form-label {
    margin-bottom: .4rem;
}

.shine-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.shine-qty-btn {
    width: 42px;
    border: 0;
    background: transparent;
    color: #5b646d;
    font-size: 16px;
    transition: background .15s ease, color .15s ease;
}

.shine-qty-btn:hover {
    background: var(--shine-soft, #f5f6f7);
    color: var(--shine-ink, #17212b);
}

.shine-qty-input {
    width: 58px;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-weight: 700;
    box-shadow: none;
}

.shine-qty-input:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}

.shine-product-buy {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 1rem 0 .75rem;
}

.shine-btn-cart,
.shine-btn-buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 48px;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    transition: background .15s ease, color .15s ease;
}

.shine-btn-cart {
    flex: 1 1 220px;
    background: var(--primary-color, #3bb54a);
    color: #fff;
}

.shine-btn-cart:hover {
    background: color-mix(in srgb, var(--primary-color, #3bb54a) 85%, #000);
    color: #fff;
}

.shine-btn-buy {
    flex: 0 1 auto;
    background: var(--shine-navy, #172b3a);
    color: #fff;
}

.shine-btn-buy:hover {
    background: #0f1d28;
    color: var(--shine-yellow, #f5b722);
}

.shine-btn-cart:disabled,
.shine-btn-buy:disabled {
    opacity: .65;
    cursor: not-allowed;
}

.shine-product-minimum {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    padding: 10px 14px;
    border-radius: 8px;
    background: #eef5f7;
    color: #41505e;
    font-size: 13px;
}

.shine-product-minimum i {
    color: #2d6a7c;
    font-size: 16px;
}

/* ---- Trust badges (admin editable USPs) ------------------------------------- */
.shine-product-usps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 1.25rem;
}

.shine-product-usp {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 10px;
    background: #fff;
    color: var(--shine-muted, #6b7280);
    font-size: 12px;
    line-height: 1.45;
}

.shine-product-usp i {
    flex: 0 0 auto;
    color: var(--primary-color, #3bb54a);
    font-size: 20px;
}

@media (max-width: 767.98px) {
    .shine-product-usps {
        grid-template-columns: 1fr;
    }
}

/* ---- Tabs -------------------------------------------------------------------- */
.shine-product-tabs {
    gap: 4px;
    margin: 2.5rem 0 0;
    border-bottom: 2px solid var(--shine-line, #e5e7eb);
}

.shine-product-tabs .nav-link {
    margin-bottom: -2px;
    padding: 12px 20px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    background: transparent;
    color: var(--shine-muted, #6b7280);
    font-size: 14.5px;
    font-weight: 700;
}

.shine-product-tabs .nav-link:hover {
    color: var(--shine-ink, #17212b);
}

.shine-product-tabs .nav-link.active {
    color: var(--shine-ink, #17212b);
    border-bottom-color: var(--primary-color, #3bb54a);
}

.shine-product-tab-content {
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #fff;
}

@media (max-width: 575.98px) {
    .shine-product-tab-content {
        padding: 1.1rem 1rem;
    }
}

#tab-description img {
    max-width: 100%;
    height: auto;
}

#tab-description > :first-child {
    margin-top: 0;
}

#tab-review h2 {
    margin: 1.5rem 0 .8rem;
    color: var(--shine-ink, #17212b);
    font-size: 1.1rem;
    font-weight: 800;
}

/* ---- Specification table ------------------------------------------------------ */
.shine-spec-table {
    margin: 0;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
}

.shine-spec-table thead td {
    padding: 10px 14px;
    background: var(--shine-soft, #f5f6f7);
    color: var(--shine-muted, #6b7280);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.shine-spec-table tbody td {
    padding: 10px 14px;
    border-top: 1px solid #eef0f2;
    color: var(--shine-ink, #17212b);
    font-size: 14px;
}

.shine-spec-table tbody td:first-child {
    width: 34%;
    color: var(--shine-muted, #6b7280);
    font-weight: 600;
}

/* ---- Related products ---------------------------------------------------------- */
.shine-product-related {
    margin-top: 3rem;
}

.shine-related-header {
    position: relative;
    padding-bottom: .6rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--shine-line, #e5e7eb);
}

.shine-related-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 54px;
    height: 3px;
    border-radius: 2px;
    background: var(--shine-yellow, #f5b722);
}

.shine-related-header h2 {
    margin: 0;
    color: var(--shine-ink, #17212b);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* ---- Tags ------------------------------------------------------------------------ */
.shine-product-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2rem;
}

.shine-product-tags-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shine-muted, #6b7280);
    font-size: 13px;
    font-weight: 700;
}

.shine-product-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--shine-line, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: #414b55;
    font-size: 12.5px;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.shine-product-tag:hover {
    border-color: var(--shine-yellow, #f5b722);
    color: var(--shine-ink, #17212b);
}

/* ---- Toasts (#alert) --------------------------------------------------------------- */
#alert .alert {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(23, 33, 43, .16);
    font-size: 14px;
    font-weight: 600;
}

#alert .alert i {
    margin-right: 4px;
}

/* ---- Small screens ------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .shine-product-buy {
        flex-direction: column;
    }

    .shine-btn-cart,
    .shine-btn-buy {
        flex: 1 1 auto;
        width: 100%;
    }
}


/* ==========================================================================
   FIX: product grids were showing 3 cards per row instead of 4.
   Bootstrap's row-cols-* utilities set `flex: 0 0 auto; width: 25%`, but a
   flex item also keeps the default `min-width: auto`. The product card's
   minimum content width (the 250px catalogue image plus the card padding) is
   wider than 25% of the row, so every column grew past its 25% share and only
   three of them fitted. Releasing the minimum lets the columns take the width
   Bootstrap gives them, so four fit. The columns still stretch, so every card
   in a row stays the same height.
   ========================================================================== */
body .row:has(> .col > .product-thumb) > .col {
    min-width: 0 !important;
}

@media (min-width: 992px) {
    body .row:has(> .col > .product-thumb) > .col {
        flex-basis: 25% !important;
        max-width: 25% !important;
    }
}

/* A fixed-width product image must be allowed to shrink with its column. */
body .row:has(> .col > .product-thumb) .product-thumb .image img {
    min-width: 0;
}

/* ==========================================================================
   Search / "All Products" page (core product/search.twig).
   The unskinned core markup is dressed to match the rest of the theme:
   rounded fields, the theme focus ring, green controls and a soft panel
   around the search criteria.
   ========================================================================== */
#product-search #content > .row.row-cols-md-2:not(.row-cols-lg-4) {
    margin-bottom: 24px;
    padding: 18px 18px 2px;
    border: 1px solid #e8ebee;
    border-radius: 14px;
    background: #f8fafb;
}

#product-search .col-form-label,
#product-search .form-check-label {
    margin-bottom: 4px;
    color: #4b5563;
    font-size: 13.5px;
    font-weight: 600;
}

#product-search .form-control,
#product-search .form-select {
    min-height: 44px;
    padding: 10px 14px;
    border-color: var(--shine-line, #e5e7eb);
    border-radius: 10px;
    color: #26313b;
    font-size: 14px;
}

#product-search .form-control:focus,
#product-search .form-select:focus {
    border-color: var(--primary-color, #3bb54a);
    box-shadow: 0 0 0 .2rem rgba(59, 181, 74, .12);
}

#product-search .form-check {
    padding-left: 1.6em;
}

#product-search .form-check-input {
    border-color: #cfd6dd;
}

#product-search .form-check-input:checked {
    border-color: var(--primary-color, #3bb54a);
    background-color: var(--primary-color, #3bb54a);
}

#product-search .form-check-input:focus {
    border-color: var(--primary-color, #3bb54a);
    box-shadow: 0 0 0 .2rem rgba(59, 181, 74, .12);
}

#product-search #button-search {
    padding: 11px 34px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-color, #3bb54a);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

#product-search #button-search:hover {
    filter: brightness(.94);
}

#product-search hr {
    margin: 24px 0 20px;
    border-color: #eceef0;
    opacity: 1;
}

#product-search > .row > #content > h2 {
    margin: 0 0 16px;
    color: #161d27;
    font-size: 22px;
    font-weight: 800;
}

#product-search #display-control {
    align-items: center;
    margin-bottom: 4px;
}

#product-search #compare-total {
    border: 0;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
}

#product-search #button-list,
#product-search #button-grid {
    min-height: 44px;
    border-color: var(--shine-line, #e5e7eb);
    color: #55606b;
}

#product-search .btn-group > #button-list { border-radius: 8px 0 0 8px; }
#product-search .btn-group > #button-grid { border-radius: 0 8px 8px 0; }

#product-search .input-group-text {
    border-color: var(--shine-line, #e5e7eb);
    border-radius: 10px 0 0 10px;
    background: var(--shine-soft, #f5f6f7);
    color: #5b646d;
    font-size: 13px;
    font-weight: 600;
}

#product-search .input-group > .form-select {
    border-radius: 0 10px 10px 0;
}


/* ==========================================================================
   PRODUCT CARD v3 — matches the reference design.
   Clean bordered card, hairline dividers, a quiet category/stock line, a
   larger price, and an action row that keeps "Add to Cart" on the left while
   the icon buttons (wishlist, compare, buy now) sit neatly on the right with
   no overlap.
   ========================================================================== */
body .row:has(> .col > .product-thumb) .product-thumb {
    border: 1px solid #e9e9e9 !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .image {
    border-bottom: 1px solid #efefef !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .content {
    padding: 12px 16px 0 !important;
}

/* ---- Category + stock line ------------------------------------------------ */
body .row:has(> .col > .product-thumb) .product-thumb .shine-product-meta {
    margin: 0 0 9px !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .shine-product-category {
    color: #8a9096 !important;
    font-size: 12px !important;
    text-decoration: none !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .shine-product-stock {
    color: #8a9096 !important;
    font-size: 12px !important;
}

/* ---- Title / price -------------------------------------------------------- */
body .row:has(> .col > .product-thumb) .product-thumb .description h4,
body .row:has(> .col > .product-thumb) .product-thumb .description h4 a {
    margin: 0 0 8px !important;
    color: #3f4348 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .description h4 a:hover {
    color: var(--primary-color, #3bb54a) !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .price,
body .row:has(> .col > .product-thumb) .product-thumb .price-new {
    color: #1b1f23 !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .price-old {
    margin-left: 7px !important;
    font-size: 13px !important;
}

/* ---- Action row ----------------------------------------------------------- */
body .row:has(> .col > .product-thumb) .product-thumb form {
    padding: 0 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    min-height: 48px !important;
    margin: 12px 0 0 !important;
    padding: 10px 0 8px !important;
    border-top: 1px solid #efefef !important;
}

/* "Add to Cart" stays on the left as a quiet text + icon control. */
body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child,
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="cart.add"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    margin: 0 auto 0 0 !important;
    padding: 0 4px 0 0 !important;
    gap: 6px !important;
    border: 0 !important;
    background: transparent !important;
    color: #5f6b76 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child:hover {
    color: var(--primary-color, #3bb54a) !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child i,
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="cart.add"] i {
    flex: 0 0 auto !important;
    font-size: 17px !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button:first-child span:not(.visually-hidden) {
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Icon buttons: wishlist, compare and Buy Now grouped on the right. */
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="wishlist.add"],
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="compare.add"],
body .row:has(> .col > .product-thumb) .product-thumb .button .shine-buy-now {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #6b7681 !important;
    font-size: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="wishlist.add"] i,
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="compare.add"] i,
body .row:has(> .col > .product-thumb) .product-thumb .button .shine-buy-now i {
    flex: 0 0 auto !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="wishlist.add"]:hover,
body .row:has(> .col > .product-thumb) .product-thumb .button button[formaction*="compare.add"]:hover,
body .row:has(> .col > .product-thumb) .product-thumb .button .shine-buy-now:hover {
    color: var(--primary-color, #3bb54a) !important;
}

/* ---- Red "Out of Stock" banner over the card's action row ------------------ */
body .row:has(> .col > .product-thumb) .product-thumb .shine-oos-banner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    margin: 0;
    padding: 8px 12px;
    background: #8d8d8d;
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
}

/* ==========================================================================
   Sale badge + search toolbar refinements.
   ========================================================================== */

/* The Sale badge inherited the theme product badge's heavy 800 weight and wide
   tracking, which made it look much louder than the compact "New" badge.
   Match the New badge (normal weight, no extra tracking). */
body .row:has(> .col > .product-thumb) .product-thumb .image .shine-sale-badge,
body .row:has(> .col > .product-thumb) .product-thumb .image .shine-product-badge.shine-sale-badge {
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* Search page toolbar: the "Product Compare" button stretched its contents
   apart so the label drifted out of the rounded box. Centre the icon and the
   label as a single unit and keep the text inside the button. */
#product-search #display-control .btn,
#product-search #compare-total {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    white-space: nowrap !important;
}

#product-search #compare-total {
    width: 100% !important;
    overflow: hidden !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

#product-search #compare-total i,
#product-search #compare-total span {
    flex: 0 0 auto;
    color: #fff !important;
}

#product-search #compare-total span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Result toolbar: keep every control on one line ------------------------
   The compare button, the list/grid toggle, Sort By and Show each lived in a
   different box (some with .mb-3, some without) and had different heights, so
   the row never lined up. Drop the inner margins, give every control the same
   44px height and centre the whole row. */
#product-search #display-control {
    align-items: center !important;
    margin-bottom: 14px !important;
}

#product-search #display-control .mb-3 {
    margin-bottom: 0 !important;
}

#product-search #display-control .input-group,
#product-search #display-control .input-group-text,
#product-search #display-control .form-select {
    min-height: 44px !important;
    height: 44px !important;
}

#product-search #display-control .input-group-text {
    display: flex !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#product-search #display-control .form-select {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   CHECKOUT — dressed to match the rest of the theme.
   The page title is deliberately left untouched.
   ========================================================================== */
body #checkout-checkout fieldset {
    margin-bottom: 20px;
    padding: 20px 20px 8px;
    min-inline-size: 0;
    border: 1px solid #e8ebee;
    border-radius: 14px;
    background: #fff;
}

body #checkout-checkout legend {
    float: none;
    width: auto;
    margin: 0 0 26px;
    padding: 0;
    color: #161d27;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    /* A <legend> is painted on the fieldset's top border, which made the
       section titles look like they were bleeding out of the card. Nudge the
       text into the card's padding (the extra margin-bottom leaves room). */
    transform: translateY(18px);
}

body #checkout-checkout .form-label,
body #checkout-checkout label.col-form-label {
    margin-bottom: 5px;
    color: #333c45;
    font-size: 13.5px;
    font-weight: 700;
}

body #checkout-checkout .form-control,
body #checkout-checkout .form-select {
    min-height: 44px;
    padding: 10px 14px;
    border-color: var(--shine-line, #e5e7eb);
    border-radius: 10px;
    color: #26313b;
    font-size: 14px;
}

body #checkout-checkout .form-control:focus,
body #checkout-checkout .form-select:focus {
    border-color: var(--primary-color, #3bb54a);
    box-shadow: 0 0 0 .2rem rgba(59, 181, 74, .12);
}

body #checkout-checkout textarea.form-control {
    min-height: 118px;
}

body #checkout-checkout .form-check-input:checked {
    border-color: var(--primary-color, #3bb54a);
    background-color: var(--primary-color, #3bb54a);
}

body #checkout-checkout .form-check-label {
    color: #4b5563;
    font-size: 13.5px;
}

body #checkout-checkout .btn-primary {
    border: 0;
    border-radius: 10px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
}

/* OpenCart renders a disabled "Confirm Order" button until a payment method is
   in place; make that unmistakable instead of a faded green button. */
body #checkout-checkout .btn-primary:disabled,
body #checkout-checkout .btn-primary.disabled {
    background-color: #d7dde3 !important;
    border-color: #d7dde3 !important;
    color: #8a939c !important;
    opacity: 1;
    cursor: not-allowed;
}

body #checkout-checkout .input-group-text {
    border-color: var(--shine-line, #e5e7eb);
    background: var(--shine-soft, #f5f6f7);
    color: #5b646d;
}

body #checkout-checkout table.table {
    margin-bottom: 0;
    border-color: #eceef0;
}

body #checkout-checkout table.table thead th {
    border-color: #eceef0;
    background: #f8fafb;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body #checkout-checkout table.table td {
    border-color: #eceef0;
}

body #checkout-checkout table.table tfoot td {
    background: #fafbfc;
}

/* The theme's shipping/payment method dropdowns. */
body #checkout-checkout .shine-method-select {
    width: 100%;
    max-width: 100%;
}