/* Saveur de la Vigne - brand overrides on top of Oscar's default theme */
:root {
    --sdlv-wine: #6d1a36;
    --sdlv-gold: #c9a227;
}

.sdlv-hero {
    padding: 3rem 1rem 2.5rem;
    border-bottom: 1px solid #e5e0da;
}
.sdlv-hero h1 {
    color: var(--sdlv-wine);
    font-size: 2.6rem;
}
.sdlv-tagline {
    font-style: italic;
    color: #6c5f55;
}
.sdlv-intro {
    max-width: 40rem;
    margin: 1rem auto 1.5rem;
}
.sdlv-btn {
    background: var(--sdlv-wine);
    border-color: var(--sdlv-wine);
    color: #fff;
}
.sdlv-btn:hover,
.sdlv-btn:focus {
    background: #551229;
    color: #fff;
}

.sdlv-featured,
.sdlv-info,
.sdlv-signature {
    padding-top: 2.5rem;
}
.sdlv-featured h2,
.sdlv-info h2 {
    color: var(--sdlv-wine);
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.sdlv-featured ol {
    padding-left: 0;
}
.sdlv-signature {
    padding-bottom: 2rem;
    text-align: right;
    font-style: italic;
}

/* Rounded wine pictures (product tiles, product page, basket) */
.img-thumbnail {
    border-radius: 12px;
}
img.img-thumbnail {
    padding: 0;
}
#product_gallery .img-thumbnail {
    overflow: hidden;
}
#product_gallery .carousel-item img {
    border-radius: 8px;
}

/* Basket quantity field: Oscar's input group squeezes it until the number is hidden */
.checkout-quantity .input-group {
    max-width: 220px;
}
.checkout-quantity .input-group .form-control {
    min-width: 4.5rem;
}

/* Logo in the header, one copy per theme */
.sdlv-brand {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.sdlv-logo img {
    display: block;
    width: 160px;
    height: auto;
}
.sdlv-brand-tagline {
    font-size: 1.6rem;
    font-style: italic;
    color: #6c5f55;
}
.theme-dark .sdlv-logo-light,
.theme-light .sdlv-logo-dark {
    display: none !important;
}
@media (max-width: 575.98px) {
    .sdlv-logo img {
        width: 110px;
    }
    .sdlv-brand-tagline {
        font-size: 1.25rem;
    }
}

/* Wine finder: checkboxes/radios shown as pills */
.sdlv-finder-label {
    font-weight: 600;
}
.sdlv-finder-or {
    font-style: italic;
    color: #6c5f55;
}
.sdlv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.sdlv-chip-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sdlv-chip {
    margin: 0;
    padding: 0.3rem 0.8rem;
    border: 1px solid #ced4da;
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
}
.sdlv-chip:hover {
    border-color: var(--sdlv-wine);
}
.sdlv-chip-input:checked + .sdlv-chip {
    background: var(--sdlv-wine);
    border-color: var(--sdlv-wine);
    color: #fff;
}
.sdlv-chip-input:focus-visible + .sdlv-chip {
    outline: 2px solid var(--sdlv-gold);
    outline-offset: 2px;
}
.sdlv-badge {
    background: var(--sdlv-wine);
    color: #fff;
    font-weight: normal;
    margin-right: 0.25rem;
}
.sdlv-pairing {
    font-size: 0.9rem;
}
.theme-dark .sdlv-chip {
    border-color: var(--sdlv-border);
}
.theme-dark .sdlv-chip:hover {
    border-color: var(--sdlv-accent);
}
.theme-dark .sdlv-chip-input:checked + .sdlv-chip {
    border-color: #8a2a4a;
}
.theme-dark .sdlv-finder-or {
    color: var(--sdlv-muted);
}

/* Top bar: language + theme stay visible at the top right on every screen size */
.sdlv-prefs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sdlv-prefs select {
    width: auto;
}

/* Phones: no breadcrumb, and no category/filter sidebar before the wines on product listings */
@media (max-width: 767.98px) {
    .breadcrumb {
        display: none;
    }
    .sdlv-listing .sidebar {
        display: none;
    }
    .sdlv-listing .sidebar + div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .sdlv-all-wines .page-header {
        display: none;
    }
}
/* Main menu bar on small screens: finder and basket buttons side by side, never wrapping */
.sdlv-nav-buttons {
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}
@media (max-width: 359.98px) {
    .header .navbar {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .header .navbar-toggler {
        padding: 0.25rem 0.5rem;
    }
    .sdlv-nav-buttons {
        gap: 0.35rem;
    }
    .sdlv-nav-buttons .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* Phones: less padding around the page content (Oscar uses 30px), and a tighter finder card */
@media (max-width: 575.98px) {
    .page_inner {
        padding: 12px;
    }
    .sdlv-finder.card-body {
        padding: 0.9rem 0.75rem;
    }
    .sdlv-finder .sdlv-chips {
        gap: 0.3rem;
    }
    .sdlv-finder .sdlv-chip {
        padding: 0.2rem 0.6rem;
        font-size: 0.875rem;
    }
}

/* Theme toggle (top bar): show the icon of the theme you'd switch to */
.theme-dark .sdlv-icon-dark,
.theme-light .sdlv-icon-light {
    display: none;
}

/* ------------------------------------------------------------------
   Dark theme (default). Oscar ships Bootstrap 4, which has no dark mode,
   so its components are recoloured here; the light theme is Oscar's own look.
   ------------------------------------------------------------------ */
.theme-dark {
    --sdlv-bg: #16110f;
    --sdlv-surface: #211a17;
    --sdlv-surface-2: #2b2320;
    --sdlv-border: #3d332e;
    --sdlv-text: #ece4da;
    --sdlv-muted: #a99b8e;
    --sdlv-accent: #e3a0b5;
    --sdlv-link: #e6c27a;
    --sdlv-link-hover: #f3d9a4;
    color-scheme: dark;
}

.theme-dark body {
    background: var(--sdlv-bg);
    color: var(--sdlv-text);
}
.theme-dark a {
    color: var(--sdlv-link);
}
.theme-dark a:hover,
.theme-dark a:focus {
    color: var(--sdlv-link-hover);
}
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6,
.theme-dark .h1, .theme-dark .h2, .theme-dark .h3 {
    color: var(--sdlv-text);
}
.theme-dark .text-muted,
.theme-dark small,
.theme-dark .sdlv-tagline,
.theme-dark .sdlv-brand-tagline,
.theme-dark .header .h1 small {
    color: var(--sdlv-muted) !important;
}
.theme-dark hr,
.theme-dark .page-header,
.theme-dark .sub-header,
.theme-dark .sdlv-hero {
    border-color: var(--sdlv-border);
}

/* Header, top bar and main navigation */
.theme-dark .navbar.bg-light,
.theme-dark .bg-light {
    background-color: var(--sdlv-surface) !important;
}
.theme-dark .navbar-light .navbar-nav .nav-link,
.theme-dark .navbar-light .navbar-brand {
    color: var(--sdlv-text);
}
.theme-dark .navbar-light .navbar-nav .nav-link:hover,
.theme-dark .navbar-light .navbar-nav .nav-link:focus {
    color: var(--sdlv-link-hover);
}
.theme-dark .navbar-light .navbar-toggler {
    border-color: var(--sdlv-border);
}
.theme-dark .navbar-light .navbar-toggler-icon {
    filter: invert(1);
}
.theme-dark .header .h1 a {
    color: var(--sdlv-accent);
}
.theme-dark .navbar-dark.bg-dark,
.theme-dark .bg-dark {
    background-color: #3a1020 !important;
}

/* Content box (product pages, checkout, account...) sits on the page like in Oscar's light look */
.theme-dark .page .page_inner {
    background: var(--sdlv-surface);
}
.theme-dark .page_inner .card,
.theme-dark .page_inner .breadcrumb,
.theme-dark .page_inner .bg-light {
    background-color: var(--sdlv-surface-2) !important;
}
.theme-dark .sub-header h2,
.theme-dark .sub-header h3,
.theme-dark .sub-header h4 {
    color: var(--sdlv-text);
}
.theme-dark .basket-mini-item a:not(.btn) {
    color: var(--sdlv-link);
}
.theme-dark .basket-mini-item li {
    border-color: var(--sdlv-border);
}
.theme-dark .navbar-dark .navbar-nav .nav-link {
    color: var(--sdlv-text);
}
.theme-dark .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--sdlv-link-hover);
}

/* Cards, wells, tables, list groups, dropdowns, modals */
.theme-dark .card,
.theme-dark .list-group-item,
.theme-dark .dropdown-menu,
.theme-dark .modal-content,
.theme-dark .popover,
.theme-dark .jumbotron {
    background-color: var(--sdlv-surface);
    border-color: var(--sdlv-border);
    color: var(--sdlv-text);
}
.theme-dark .card-header,
.theme-dark .card-footer,
.theme-dark .modal-header,
.theme-dark .modal-footer {
    background-color: var(--sdlv-surface-2);
    border-color: var(--sdlv-border);
}
.theme-dark .dropdown-item {
    color: var(--sdlv-text);
}
.theme-dark .dropdown-item:hover,
.theme-dark .dropdown-item:focus,
.theme-dark .list-group-item-action:hover {
    background-color: var(--sdlv-surface-2);
    color: var(--sdlv-text);
}
.theme-dark .dropdown-divider {
    border-color: var(--sdlv-border);
}
.theme-dark .close {
    color: var(--sdlv-text);
    text-shadow: none;
}
.theme-dark .table {
    color: var(--sdlv-text);
}
.theme-dark .table th,
.theme-dark .table td,
.theme-dark .table thead th,
.theme-dark .table-bordered,
.theme-dark .table-bordered th,
.theme-dark .table-bordered td {
    border-color: var(--sdlv-border);
}
.theme-dark .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.03);
}
.theme-dark .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--sdlv-text);
}
.theme-dark .table-light, .theme-dark .table-light > th, .theme-dark .table-light > td,
.theme-dark .thead-light th {
    background-color: var(--sdlv-surface-2);
    border-color: var(--sdlv-border);
    color: var(--sdlv-text);
}

/* Basket and checkout */
.theme-dark .basket-title,
.theme-dark .basket-items {
    border-color: var(--sdlv-border);
}
.theme-dark .basket-items:nth-child(even) {
    background: var(--sdlv-surface-2);
}
.theme-dark .basket-items .price_color .price-title {
    color: var(--sdlv-muted);
}
.theme-dark .total {
    background-color: #3a2a1c !important;
}

/* Breadcrumbs and pagination */
.theme-dark .breadcrumb {
    background-color: var(--sdlv-surface);
}
.theme-dark .breadcrumb-item.active,
.theme-dark .breadcrumb-item + .breadcrumb-item::before {
    color: var(--sdlv-muted);
}
.theme-dark .page-link {
    background-color: var(--sdlv-surface);
    border-color: var(--sdlv-border);
    color: var(--sdlv-link);
}
.theme-dark .page-link:hover {
    background-color: var(--sdlv-surface-2);
    color: var(--sdlv-link-hover);
}
.theme-dark .page-item.active .page-link {
    background-color: var(--sdlv-wine);
    border-color: var(--sdlv-wine);
    color: #fff;
}
.theme-dark .page-item.disabled .page-link {
    background-color: var(--sdlv-surface);
    border-color: var(--sdlv-border);
    color: var(--sdlv-muted);
}

/* Forms */
.theme-dark .form-control,
.theme-dark .custom-select,
.theme-dark .input-group-text {
    background-color: var(--sdlv-surface-2);
    border-color: var(--sdlv-border);
    color: var(--sdlv-text);
}
.theme-dark .form-control:focus {
    background-color: var(--sdlv-surface-2);
    border-color: var(--sdlv-accent);
    box-shadow: 0 0 0 0.2rem rgba(227, 160, 181, 0.25);
    color: var(--sdlv-text);
}
.theme-dark .form-control::placeholder {
    color: var(--sdlv-muted);
}
.theme-dark .form-control:disabled,
.theme-dark .form-control[readonly] {
    background-color: var(--sdlv-surface);
}
.theme-dark .form-text {
    color: var(--sdlv-muted) !important;
}

/* Buttons: Oscar's blue primary becomes the wine colour in both themes' spirit */
.theme-dark .btn-primary,
.theme-dark .btn-info {
    background-color: var(--sdlv-wine);
    border-color: #8a2a4a;
    color: #fff;
}
.theme-dark .btn-primary:hover,
.theme-dark .btn-primary:focus,
.theme-dark .btn-info:hover {
    background-color: #872444;
    border-color: #a23a5c;
    color: #fff;
}
.theme-dark .btn-secondary,
.theme-dark .btn-light,
.theme-dark .btn-default {
    background-color: var(--sdlv-surface-2);
    border-color: var(--sdlv-border);
    color: var(--sdlv-text);
}
.theme-dark .btn-secondary:hover,
.theme-dark .btn-light:hover {
    background-color: #3a302b;
    color: var(--sdlv-text);
}
.theme-dark .btn-outline-secondary {
    border-color: var(--sdlv-border);
    color: var(--sdlv-text);
}
.theme-dark .btn-outline-secondary:hover,
.theme-dark .btn-outline-secondary:focus {
    background-color: var(--sdlv-surface-2);
    border-color: var(--sdlv-muted);
    color: var(--sdlv-text);
}
.theme-dark .btn-outline-primary {
    border-color: var(--sdlv-accent);
    color: var(--sdlv-accent);
}
.theme-dark .btn-outline-primary:hover {
    background-color: var(--sdlv-wine);
    border-color: var(--sdlv-wine);
    color: #fff;
}

/* Alerts and badges */
.theme-dark .alert-success { background-color: #1d2e22; border-color: #2f5a3b; color: #b7e2c2; }
.theme-dark .alert-info    { background-color: #1b2a30; border-color: #2d5361; color: #b4dbe6; }
.theme-dark .alert-warning { background-color: #33290f; border-color: #6b5520; color: #f0d999; }
.theme-dark .alert-danger  { background-color: #3a1a1d; border-color: #6d2d33; color: #f2b8be; }
.theme-dark .alert a {
    color: inherit;
    text-decoration: underline;
}
.theme-dark .badge-light,
.theme-dark .badge-secondary {
    background-color: var(--sdlv-surface-2);
    color: var(--sdlv-text);
}

/* Product tiles and product page */
.theme-dark .product_pod,
.theme-dark .product_main {
    color: var(--sdlv-text);
}
.theme-dark .product_pod h3 a,
.theme-dark .product_pod .h3 a {
    color: var(--sdlv-text);
}
.theme-dark .price_color {
    color: var(--sdlv-link);
}
.theme-dark .instock,
.theme-dark .availability.instock {
    color: #8fd19e;
}
.theme-dark .outofstock,
.theme-dark .availability.outofstock {
    color: #f2a5ad;
}
.theme-dark img.thumbnail,
.theme-dark .img-thumbnail {
    background-color: var(--sdlv-surface);
    border-color: var(--sdlv-border);
}

/* Home page */
.theme-dark .sdlv-hero h1,
.theme-dark .sdlv-featured h2,
.theme-dark .sdlv-info h2 {
    color: var(--sdlv-accent);
}
.theme-dark .sdlv-btn {
    border-color: #8a2a4a;
    color: #fff;
}

footer {
    padding: 2rem 0;
}

/* Search suggestions under the header search box (static/js/search-suggest.js) */
.sdlv-search-field {
    position: relative;
}
.sdlv-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 1050;
    width: 22rem;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--sdlv-surface, #fff);
    color: var(--sdlv-text, #212529);
    border: 1px solid var(--sdlv-border, #ddd5cc);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 0.25rem 0;
}
.sdlv-suggestion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    color: inherit;
}
.sdlv-suggestion:hover, .sdlv-suggestion.active {
    background: var(--sdlv-surface-2, #f3eee8);
    color: inherit;
    text-decoration: none;
}
.sdlv-suggestion-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.sdlv-suggestion-title {
    font-weight: 600;
}
.sdlv-suggestion-producer {
    font-size: 0.8rem;
    color: var(--sdlv-muted, #6c757d);
}
.sdlv-suggestion-price {
    white-space: nowrap;
    font-size: 0.9rem;
}
.sdlv-suggestion-all {
    border-top: 1px solid var(--sdlv-border, #ddd5cc);
    margin-top: 0.25rem;
    padding: 0.55rem 0.75rem;
    color: var(--sdlv-link, var(--sdlv-wine));
    font-weight: 600;
}
.sdlv-suggestion-none {
    padding: 0.55rem 0.75rem;
    color: var(--sdlv-muted, #6c757d);
}
@media (max-width: 575.98px) {
    .sdlv-search, .sdlv-search-field { width: 100%; }
    .sdlv-search-field .form-control { width: 100%; }
    .sdlv-suggestions { width: 100%; }
}