/* resources/css/app.css — overrides layered on top of the Furni template styles */

/* Brand identity — Bitter (slab serif) for the whole site, headings and body
   alike, replacing the template's Inter. The template hardcodes "Inter" on
   body and .form-control specifically (not just inherited), so those need
   an explicit override too, not just a body { font-family } rule. The brand
   mark itself is the client's logo image (below), not styled text. */
body,
.form-control,
.btn,
input,
textarea,
select {
    font-family: 'Bitter', serif;
}

/* The template ships a cramped 14px body size — bump it so paragraph text,
   form labels and price figures (description, price breakdown, quantity
   labels, etc.) are comfortably readable instead of looking undersized
   next to the bigger brand headings. */
body {
    font-size: 16px;
    line-height: 1.75;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.hero h1 {
    font-family: 'Bitter', serif;
    font-weight: 700;
}

/* Logo image — replaces the old text wordmark in the navbar and footer.
   Both use the white cutout since both sit on the dark olive brand bg. */
.navbar-brand-logo {
    height: 34px;
    width: auto;
}

.footer-logo-img {
    height: 30px;
    width: auto;
}

/* Products page sidebar — categories (radio list), search, price range and
   stock toggle, all stacked in one card to the left of the product grid. */
.shop-sidebar {
    background: #FBF7EF;
    border: 1px solid #E3D9C8;
    border-radius: 16px;
    padding: 24px;
}

/* Cart checkout page — order summary and shipping form cards, replacing the
   plain Bootstrap "border bg-white" rectangle with the same soft, rounded
   card style used for the shop sidebar elsewhere on the site. */
.checkout-card {
    background: #ffffff;
    border: 1px solid #E3D9C8;
    border-radius: 16px;
    padding: 24px;
}

.cart-summary-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-summary-table th {
    text-align: left;
    padding-bottom: 12px;
    border-bottom: 1px solid #E3D9C8;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9C8C7C;
}

.cart-summary-table th:last-child,
.cart-summary-table td:last-child {
    text-align: right;
}

.cart-summary-table td {
    padding: 12px 0;
    border-bottom: 1px solid #F0E9DC;
    color: #4C403A;
}

.cart-summary-table tr:last-child td {
    border-bottom: none;
}

.cart-summary-table .cart-summary-total td {
    padding-top: 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #2b2b2b;
}

.filter-block {
    margin-bottom: 24px;
}

.filter-block:last-child {
    margin-bottom: 0;
}

.filter-title {
    font-size: 1rem;
    font-weight: 700;
    color: #4C403A;
    margin-bottom: 14px;
}

.filter-category-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.92rem;
    color: #4C403A;
}

.filter-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #4D5147;
    cursor: pointer;
}

.filter-search-input {
    background-color: #F7F1E6;
    border-radius: 30px;
    font-size: 0.9rem;
}

.filter-price-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-price-inputs input {
    width: 0;
    flex: 1 1 auto;
    background-color: #F7F1E6;
    border-radius: 30px;
    text-align: center;
    padding: 8px;
    font-size: 0.9rem;
}

.filter-price-sep {
    color: #C7B9A8;
    flex-shrink: 0;
}

.filter-reset-btn {
    background: #F7F3EC;
    border: 1px solid #E3D9C8;
    color: #4C403A;
    font-weight: 600;
    border-radius: 30px;
    padding: 10px;
}

.filter-reset-btn:hover {
    background: #EFE7D8;
}

.stock-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #4C403A;
    cursor: pointer;
    white-space: nowrap;
}

.stock-filter-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4D5147;
    cursor: pointer;
}

/* Header row above the product grid — result count + sort dropdown. */
.products-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.products-count {
    margin: 0;
    font-weight: 600;
    color: #4C403A;
}

.products-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.products-sort-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #4C403A;
    white-space: nowrap;
}

.products-sort-select {
    max-width: 200px;
    background-color: #F7F1E6;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4C403A;
}

/* Bootstrap ships cold neutral grays for borders/badges by default; swap them
   for warm tones from the brand palette so the whole UI reads as one piece. */
.form-control,
.form-select {
    border-color: #C7B9A8;
}

/* Checkout and contact forms get a warm input fill instead of the default
   white, matching the section tint used elsewhere on those pages. */
.checkout-card .form-control,
.contact-form .form-control {
    background-color: #F7F1E6;
}

.modal-header,
.modal-footer {
    border-color: #E3D9C8 !important;
}

.dropdown-menu {
    border-color: #E3D9C8;
}

hr {
    border-color: #E3D9C8;
    opacity: 1;
}

.bg-secondary {
    background-color: #D9A48F !important;
}

.border {
    border-color: #E3D9C8 !important;
}

/* Stock badges, recolored from Bootstrap's stock red/yellow/green to warm
   tones pulled from the brand palette so they don't clash with it. */
.badge.bg-danger {
    background-color: #A8503F !important;
}

.badge.bg-warning {
    background-color: #DAB88B !important;
    color: #4C403A !important;
}

.badge.bg-success {
    background-color: #4D5147 !important;
}

/* Soft placeholder for products without a photo yet — a warm gradient with
   a centered icon reads as "no photo" instead of a blank, broken-looking tile. */
.slide-placeholder {
    background: linear-gradient(135deg, #EFE2CE, #E3D9C8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-placeholder i {
    font-size: 2.5rem;
    color: #C7B9A8;
}

/* Contact page "Our Information" list — admin-managed emails/phones/addresses. */
.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    line-height: 1.6;
}

.contact-info-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4D5147;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.contact-info-label {
    background: #DAB88B;
    color: #4C403A;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 6px;
    vertical-align: middle;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Baseline offset for the fixed header, in case the JS that measures its
   real height (see layouts/app.blade.php) hasn't run yet on first paint. */
body {
    padding-top: 84px;
}

/* The About page's "why choose us" photo is nearly full-resolution and towers
   over the text column at full column width — cap its height and crop nicely. */
.why-choose-section .img-wrap img {
    max-height: 480px;
    width: 100%;
    object-fit: cover;
}

/* Page sections (admin-managed via PageSectionResource, shared by every page
   through partials/page-sections.blade.php) — text+image blocks alternate
   sides per section; text-only ones become a centered band. Every section
   (image or not) shares the alternating tint for rhythm. */
.about-section {
    padding: 80px 0;
}

.about-section-alt {
    background: #F7F1E6;
}

.about-section .section-title {
    margin-bottom: 22px;
}

.about-story-section .img-wrap img {
    max-height: 460px;
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 24px 48px -16px rgba(76, 64, 58, 0.25);
}

.about-section p {
    color: #4C403A;
    line-height: 1.8;
}

.about-banner-section p {
    max-width: 640px;
    margin: 0 auto 12px;
}

@media (max-width: 991px) {
    .about-story-section .row > [class^="col-lg-"]:first-child {
        margin-bottom: 32px;
    }
}

/* The template's hero image is hard-coded to max-width:780px and uses
   absolute positioning with negative offsets so it intentionally bleeds past
   its column — fine for the original demo photo, but it pushes any image
   past the section's edge. Force it to stay inside its column at every
   breakpoint (the !important beats the template's own min-width:992px rule,
   which is more specific than a plain class override). */
.hero-img-wrap img {
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2;
}

.hero-img-wrap:after {
    display: none !important;
}

/* The stock hero photo sits close in tone to the olive backdrop and reads
   flat without it. A soft ivoire glow behind it gives the product separation. */
.hero-img-wrap:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 90%;
    max-width: 520px;
    max-height: 420px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(239, 226, 206, 0.18) 0%, rgba(239, 226, 206, 0) 70%);
    z-index: 1;
}

.hero {
    position: relative;
    z-index: 0;
}

.hero p {
    color: rgba(239, 226, 206, 0.7) !important;
}

/* Eases the hard cut from the dark hero block into the light body section below. */
.hero:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.12));
    pointer-events: none;
}

/* Hero slider — full-bleed background slideshow behind the hero text/CTA,
   cycling through featured products' photos automatically, like a typical
   e-commerce homepage banner. */
.hero.hero-bg-slider-mode {
    position: relative;
    overflow: hidden;
    /*padding: 60px 0;*/
    min-height: 380px;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    .hero.hero-bg-slider-mode {
        min-height: 560px;
    }
}

.hero.hero-bg-slider-mode .hero-slider-track {
    position: absolute;
    inset: 0;
    display: flex;
    height: 100%;
    transition: transform 0.8s ease;
    z-index: 0;
}

.hero.hero-bg-slider-mode .hero-slide {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(77, 81, 71, 0.92) 0%, rgba(77, 81, 71, 0.65) 50%, rgba(77, 81, 71, 0.25) 100%);
    z-index: 1;
}

.hero.hero-bg-slider-mode .container {
    position: relative;
    z-index: 2;
}

.hero-slider-dots {
    position: absolute;
    bottom: 24px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dot:hover,
.hero-dot.active {
    background: #DAB88B;
    transform: scale(1.2);
}

.slider-container {
    position: relative;
    width: 100%;
    height: 340px;
    overflow: hidden;
    background: #E3D9C8;
    border-radius: 10px;
}

.slider {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #E3D9C8;
}

.slider-nav {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
}

.slider-dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot:hover,
.slider-dot.active {
    background: #4D5147;
    transform: scale(1.2);
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

.slider-arrow:hover {
    background: rgba(0, 0, 0, 0.6);
}

.slider-arrow.prev {
    left: 10px;
}

.slider-arrow.next {
    right: 10px;
}

/* Color swatches on the product detail page — each one is tied to a
   specific product image and jumps the slider to it when clicked. The
   active swatch gets a soft halo ring (white gap + brand-colored ring)
   instead of a checkmark overlay, for a cleaner, more professional look. */
.color-swatch {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #E3D9C8;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.color-swatch:hover {
    transform: scale(1.08);
}

.color-swatch.active {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #4D5147;
}

/* Out-of-stock color — a red ring + diagonal slash over the swatch (like a
   "not available" sign), so it reads as unavailable at a glance instead of
   just looking like any other color option. */
.color-swatch.out-of-stock {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #A8503F;
    opacity: 0.55;
}

.color-swatch.out-of-stock::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    right: -4px;
    height: 2px;
    background: #A8503F;
    transform: rotate(-45deg);
}

.color-swatch.out-of-stock.active {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #A8503F;
}

/* Thumbnail strip under the product detail's main image — each thumbnail
   jumps the slider to its image when clicked, mirroring the color swatches. */
.thumbnail-strip {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.thumbnail-item {
    flex: 0 0 70px;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    border: 2px solid transparent;
    padding: 0;
    background-size: cover;
    background-position: center;
    background-color: #E3D9C8;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.thumbnail-item:hover {
    border-color: #D9CFBE;
}

.thumbnail-item.active {
    border-color: #4D5147;
}

/* Product card extras — category subtitle and color swatch preview shown
   on the products/category/home grids. */
.product-category {
    margin: -4px 0 6px;
    font-size: 0.9rem;
    color: #9C8C7C;
}

.product-color-swatches {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    min-height: 18px;
}

/* Smaller than the cart's color-swatch-sm — product cards are compact, so
   the dots stay little instead of competing with the title/price. */
.product-color-swatches .color-swatch-sm {
    width: 18px;
    height: 18px;
}

.product-color-more {
    font-size: 0.85rem;
    color: #9C8C7C;
    font-weight: 600;
}

/* "Unit price" caption under the product detail page's price — a bit larger
   than Bootstrap's .small so it stays legible next to the big price figure. */
.product-unit-price {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9C8C7C;
}

/* Small, non-interactive variant used to show the chosen color in the cart tables. */
.color-swatch-sm {
    width: 20px;
    height: 20px;
    cursor: default;
    box-shadow: 0 0 0 1px #E3D9C8;
}

/* The navbar forces all descendant links to white (for the dark nav bar),
   which bleeds into the Bootstrap dropdown menu's white background and makes
   the category dropdown text invisible. Force it back to dark text there. */
.custom-navbar .dropdown-menu .dropdown-item {
    color: #4C403A !important;
}

.custom-navbar .dropdown-menu .dropdown-item:hover,
.custom-navbar .dropdown-menu .dropdown-item:focus,
.custom-navbar .dropdown-menu .dropdown-item.active {
    color: #ffffff !important;
    background-color: #4D5147;
}

/* Nav underline (template default was a dusty rose) and the cart item-count
   badge share the same brand gold accent. */
.custom-navbar .custom-navbar-nav li a:before {
    background: #DAB88B;
}

.cart-badge {
    background-color: #DAB88B !important;
}

/* Language switcher — a pill-style toggle with a globe icon, replacing the
   plain "EN"/"FR" text link (which sat in .custom-navbar-cta and needed its
   color forced to white explicitly). */
.lang-switcher-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.03em;
    padding: 8px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.lang-switcher-toggle i {
    font-size: 11px;
}

.lang-switcher-toggle .lang-switcher-caret {
    font-size: 9px;
    opacity: 0.7;
    transition: transform 0.25s ease;
}

.lang-switcher-toggle:hover,
.lang-switcher-toggle:focus,
#langSwitcher.show {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
}

#langSwitcher.show .lang-switcher-caret {
    transform: rotate(180deg);
}

.lang-switcher-menu {
    min-width: 0;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-top: 14px !important;
    padding: 6px;
    border: none;
    border-radius: 12px;
    box-shadow: 0 24px 48px -16px rgba(76, 64, 58, 0.35);
}

.lang-switcher-menu li:not(:first-child) {
    margin-top: 4px;
}

.lang-switcher-item {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Bootstrap's own .dropdown-item:hover/:focus/.active rule (further up this
   file, scoped to .custom-navbar) sets the dark background but doesn't know
   about our border-radius — without !important here the browser's default
   focus/tap-highlight rectangle can show through with square corners against
   our rounded pill. */
.lang-switcher-item:hover,
.lang-switcher-item:focus {
    border-radius: 10px !important;
    background-color: #4D5147 !important;
}

.lang-switcher-item:focus-visible {
    box-shadow: 0 0 0 2px rgba(76, 64, 58, 0.45);
}

/* Branded footer — dark, on-brand background instead of the template's plain
   white footer, to bookend the page with the same color as the hero/navbar. */
.footer-section-branded {
    background: #4D5147;
    color: rgba(255, 255, 255, 0.75);
    position: relative;
    overflow: hidden;
}

.footer-section-branded:before {
    content: "";
    position: absolute;
    top: 20px;
    right: 20px;
    width: 200px;
    height: 170px;
    background-image: url('/vendor/furni/images/dots-light.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.footer-section-branded .footer-logo-wrap .footer-logo {
    color: #ffffff;
}

.footer-section-branded a {
    color: rgba(255, 255, 255, 0.75);
}

.footer-section-branded a:hover {
    color: #DAB88B;
}

.footer-section-branded .footer-heading {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.footer-section-branded .links-wrap ul li,
.footer-section-branded ul li {
    margin-bottom: 12px;
}

.footer-section-branded .border-top {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.footer-section-branded .border-top.copyright p {
    color: rgba(255, 255, 255, 0.55);
}

/* Quantity stepper — mobile browsers don't render the native number input's
   spin arrows and there's no keyboard (inputmode="none"), so without these
   buttons there's no way to change quantity by touch at all. */
.qty-stepper {
    display: flex;
    align-items: stretch;
    background: #F7F1E6;
    border: 1px solid #C7B9A8;
    border-radius: 30px;
    overflow: hidden;
}

.qty-stepper .form-control {
    background: transparent;
    border: none;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    color: #4C403A;
    font-weight: 600;
    /* Quantity is only ever changed via the +/- buttons — this field is a
       readonly display, not an editable input, so it shouldn't look or act
       clickable (no cursor, no focus caret). */
    caret-color: transparent;
    cursor: default;
    pointer-events: none;
}

.qty-stepper .form-control:focus {
    background: transparent;
    box-shadow: none;
}

.qty-stepper-btn {
    flex: 0 0 36px;
    min-width: 36px;
    border: none;
    background: transparent;
    color: #4D5147;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.qty-stepper-btn:hover {
    background: #EFE7D8;
}

/* Remove-from-cart — a plain trash icon instead of a boxed Bootstrap
   button, so it reads as a quiet secondary action next to the qty stepper. */
.cart-remove-btn {
    background: transparent;
    border: none;
    padding: 6px;
    color: #9C8C7C;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease;
}

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

/* Mobile cart — the desktop table's columns don't fit a phone screen
   without horizontal scrolling, so below md it's replaced with one stacked
   card per item (image + name/color/price, then qty, then subtotal, then
   remove), each fully visible without scrolling sideways. */
.cart-mobile-item {
    background: #ffffff;
    border: 1px solid #E3D9C8;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.cart-mobile-item-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.cart-mobile-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    background: #E3D9C8;
}

.cart-mobile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-mobile-info {
    flex: 1 1 auto;
    padding-top: 2px;
}

.cart-mobile-title {
    display: block;
    font-weight: 700;
    color: #2b2b2b;
    text-decoration: none;
    margin-bottom: 6px;
}

.cart-mobile-price {
    margin-top: 6px;
    font-weight: 700;
    color: #4C403A;
}

.cart-mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-top: 1px solid #F0E9DC;
}

.cart-mobile-label {
    color: #9C8C7C;
    font-size: 0.9rem;
}

.cart-mobile-item .cart-remove-form {
    padding-top: 8px;
    border-top: 1px solid #F0E9DC;
}

.cart-mobile-item .cart-remove-btn {
    font-size: 1.15rem;
}

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

.qty-stepper .form-control[type=number] {
    -moz-appearance: textfield;
}

/* Product card actions — stacked and centered, sized to content rather
   than stretched to the card's full width, so a two-word label like
   "Aperçu rapide" never wraps mid-button the way it did sitting side by
   side with the order button in a narrow card column. */
.product-actions .btn,
.modal-footer .btn {
    white-space: nowrap;
    padding: 8px 24px;
    min-width: 160px;
}

/* Product card — a flex column filling the grid column's stretched height,
   with the action button pinned to the bottom via margin-top: auto. This
   keeps the "Voir Détails" button on the same line across cards whether or
   not a given product has color swatches (which otherwise shortens the
   card and leaves the button floating higher than its neighbors). */
.product-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-actions {
    margin-top: auto;
    padding-top: 12px;
}

/* Featured products slider (home page) — the same product-item markup as
   the grid, but as tiny-slider items instead of Bootstrap columns. */
.product-slider-nav {
    display: flex;
    gap: 8px;
}

.product-slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #C7B9A8;
    border-radius: 50%;
    background: #F7F1E6;
    color: #4D5147;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.product-slider-arrow:hover {
    background: #EFE7D8;
}

.product-slider-arrow[disabled] {
    opacity: 0.4;
    cursor: default;
}

.product-slide-item {
    padding: 0 12px;
}

.product-slider .tns-outer {
    padding: 0 !important;
    margin: 0 -12px;
}

.btn-outline-brand {
    background: transparent;
    color: #4D5147;
    border: 2px solid #4D5147;
}

.btn-outline-brand:hover,
.btn-outline-brand:focus {
    background: #4D5147;
    border-color: #4D5147;
    color: #ffffff;
}

/* Price breakdown box (subtotal / shipping / total) shown on the product,
   checkout and cart pages. */
.price-breakdown {
    background: #F7F3EC;
    border: 1px solid #E5DDD0;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 1rem;
}

.price-breakdown-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    color: #6b6b6b;
    font-size: 1.05rem;
}

.price-breakdown-row.price-breakdown-total {
    border-top: 1px solid #E5DDD0;
    margin-top: 8px;
    padding-top: 10px;
    font-weight: 700;
    color: #2b2b2b;
    font-size: 1.25rem;
}

/* Back-to-top button — fixed bottom-right, hidden until scrolled down
   (toggled via the .is-visible class in layouts/app.blade.php). */
.back-to-top-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #4D5147;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 1010;
    cursor: pointer;
}

.back-to-top-btn:hover {
    background: #3A3D33;
}

.back-to-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Fixed (not sticky) header, always visible on both mobile and desktop while
   scrolling. Plain CSS position: sticky breaks here because html/body have
   overflow-x: hidden above (any ancestor with non-visible overflow stops a
   sticky descendant from sticking) — fixed sidesteps that entirely. The
   matching body padding-top (added via JS, see DOMContentLoaded below) keeps
   the header from overlapping the page content it's no longer in flow with. */
.custom-navbar.sticky-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Home page section rhythm — the vendor theme's 7rem/12rem padding assumes
   one spacious section per page; stacking several of them (as the home page
   does) compounds into a very tall page. These trim the gaps between
   adjacent sections while keeping a bit more room on the last one before
   the footer, and add a subtle alternating tint so sections read as
   distinct bands instead of relying on whitespace alone. */
.blog-section-tight {
    padding: 4.5rem 0 2.5rem 0;
}

.section-compact {
    padding: 4.5rem 0;
}

.section-compact-last {
    padding: 2.5rem 0 6rem 0;
}

.section-alt {
    background-color: #F7F1E6;
}

/* Tips & Inspiration / Actualité card thumbnails — the source photos are
   large landscape shots, so at full column width they render very tall.
   Capping the height and cropping with object-fit keeps the cards compact. */
.post-thumbnail img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

/* "We Help" section on the home page — an optional admin-uploaded video
   replacing the default 3-image grid, styled to match its rounded corners.
   The uploaded video is portrait, so object-fit: contain left empty beige
   bars down both sides; cover fills the box edge-to-edge with no bars,
   cropping top/bottom instead (a portrait clip cropped this way reads
   better than one boxed in on the sides). */
.we-help-video {
    display: block;
    width: 100%;
    height: 600px;
    object-fit: cover;
    border-radius: 20px;
}

/* Empty cart state — a centered icon badge above the heading/description,
   replacing the single line of plain text with a proper empty-state layout. */
.cart-empty-state {
    padding: 3rem 0;
}

.cart-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    background: #F7F1E6;
    color: #DAB88B;
    font-size: 2.25rem;
}

/* 404 page — an oversized serif numeral in the brand gold, standing in for
   an illustration, above the usual heading/description/CTA empty-state. */
.error-404-state {
    padding: 4rem 0;
}

.error-404-number {
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-size: 8rem;
    line-height: 1;
    color: #DAB88B;
    margin-bottom: 0.5rem;
}

@media (max-width: 576px) {
    .error-404-number {
        font-size: 5.5rem;
    }
}