/* --- Base ----------------------------------------------- */
body {
    font-family:    var(--ft-font);
    font-weight:    var(--ft-weight-body);
    font-size:      1rem;
    line-height:    var(--ft-lh-body);
    color:          var(--ft-text);
    background:     var(--ft-bg);
}

/* --- Typography ----------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family:   var(--ft-font);
    font-weight:   var(--ft-weight-heading);
    line-height:   var(--ft-lh-heading);
    color:         var(--ft-text);
    margin-bottom: 0.5em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: var(--ft-weight-display); }
h2 { font-size: clamp(1.4rem,  3vw, 2rem); }
h3 { font-size: clamp(1.1rem,  2.5vw, 1.5rem); }

p {
    margin-bottom: 1em;
    color: var(--ft-text);
}

a {
    color:           var(--ft-secondary);
    text-decoration: none;
}
a:hover {
    color:           var(--ft-secondary-hover);
    text-decoration: underline;
}

/* --- Navigation / header -------------------------------- */
.navbar,
header.navbar {
    background:    var(--ft-nav-bg) !important;
    border-bottom: 1px solid var(--ft-nav-border);
    padding-top:    0.75rem;
    padding-bottom: 0.75rem;
}

.navbar-brand,
.navbar-brand:hover {
    color:          var(--ft-nav-text) !important;
    font-weight:    var(--ft-weight-display);
    font-size:      1.25rem;
    letter-spacing: 0.02em;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:focus {
    color:          var(--ft-nav-text) !important;
    font-weight:    var(--ft-weight-bold);
    font-size:      0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-left:   0.75rem;
    padding-right:  0.75rem;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--ft-secondary) !important;
}

.navbar-toggler {
    border:        1px solid var(--ft-nav-border);
    border-radius: 0;
    height:        44px;
}

/* --- Animated hamburger → X toggler icon ---------------- */
.navbar-toggler-icon {
    -webkit-mask-image: none;
    mask-image:         none;
    display:            block;
    position:           relative;
    overflow:           visible;
    width:              1.25em;
    height:             2px;
    background-color:   var(--ft-nav-text);
    transition:         background-color 0.25s ease;
    /* snap to device-pixel grid to avoid sub-pixel blur on fractional DPRs */
    transform:          translateZ(0);
    will-change:        transform;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content:          '';
    position:         absolute;
    left:             0;
    width:            100%;
    height:           2px;
    background-color: var(--ft-nav-text);
    transition:       transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.navbar-toggler-icon::before { top:    -8px; }
.navbar-toggler-icon::after  { bottom: -8px; }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    top:       0;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    bottom:    0;
    transform: rotate(-45deg);
}

.dropdown-menu {
    border-radius: 0;
    border:        1px solid var(--ft-hairline);
    font-family:   var(--ft-font);
    font-weight:   var(--ft-weight-body);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ft-bg-accent);
    color:      var(--ft-text);
}

/* --- Nav pills / tabs ----------------------------------- */
.nav-pills .nav-link {
    border-radius: 0;
    color:         var(--ft-secondary);
    font-family:   var(--ft-font);
    font-weight:   var(--ft-weight-bold);
    font-size:     0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--ft-secondary);
    color:            var(--ft-bg);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--ft-bg-accent);
    color:            var(--ft-secondary);
}

/* --- Buttons -------------------------------------------- */
.btn,
button,
input[type="submit"],
input[type="button"] {
    font-family:    var(--ft-font);
    font-weight:    var(--ft-weight-bold);
    font-size:      0.875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius:  var(--ft-btn-radius);
    padding:        var(--ft-btn-py) var(--ft-btn-px);
    line-height:    1;
    cursor:         pointer;
    transition:     background 0.2s, color 0.2s;
}

.btn-primary,
.btn-success {
    background:   var(--ft-secondary);
    border-color: var(--ft-secondary);
    color:        var(--ft-bg);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    background:   var(--ft-secondary-hover);
    border-color: var(--ft-secondary-hover);
    color:        var(--ft-bg);
}

.btn-default,
.btn-secondary,
.btn-light {
    background:   var(--ft-primary);
    border-color: var(--ft-primary);
    color:        var(--ft-bg);
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background:   var(--ft-primary-hover);
    border-color: var(--ft-primary-hover);
    color:        var(--ft-bg);
}

.btn-outline-primary {
    border:        1px solid var(--ft-secondary);
    color:         var(--ft-secondary);
    background:    transparent;
    border-radius: 0;
}
.btn-outline-primary:hover {
    background: var(--ft-secondary);
    color:      var(--ft-bg);
}

/* --- Forms ---------------------------------------------- */
/* count of product in basket */
input[type="number"] {
    height: unset;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    font-family:   var(--ft-font);
    font-weight:   var(--ft-weight-body);
    border-radius: 0;
    border:        1px solid var(--ft-hairline);
    color:         var(--ft-text);
    background:    var(--ft-bg);
    padding:       0.6rem 0.8rem;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ft-secondary);
    box-shadow:   0 0 0 2px rgba(4, 59, 49, 0.15);
    outline:      none;
}

label {
    font-family:    var(--ft-font);
    font-weight:    var(--ft-weight-bold);
    font-size:      0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--ft-text);
    margin-bottom:  0.25rem;
}

/* --- Cards / product tiles ------------------------------ */
.card {
    border-radius: 0;
    border:        1px solid var(--ft-hairline);
    font-family:   var(--ft-font);
}

.card-title {
    font-weight: var(--ft-weight-heading);
    font-size:   1rem;
}

.card-body {
    padding: var(--ft-gap-sm);
}

/* --- Tables --------------------------------------------- */
.table {
    font-family:  var(--ft-font);
    font-weight:  var(--ft-weight-body);
}

.table thead th {
    font-weight:    var(--ft-weight-heading);
    font-size:      0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom:  2px solid var(--ft-text);
    color:          var(--ft-text);
}

/* --- Breadcrumbs ---------------------------------------- */
.breadcrumb {
    background:     transparent;
    font-family:    var(--ft-font);
    font-weight:    var(--ft-weight-body);
    font-size:      0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding:        0;
}

.breadcrumb-item a      { color: var(--ft-secondary); }
.breadcrumb-item.active { color: var(--ft-text-light); }

/* --- Alerts / messages ---------------------------------- */
.alert {
    border-radius: 0;
    border-width:  0 0 0 3px;
    font-family:   var(--ft-font);
}

.alert-success {
    border-color: var(--ft-secondary);
    background:   rgba(4, 59, 49, 0.1);
    color:        var(--ft-secondary);
}

.alert-danger,
.alert-error {
    border-color: var(--ft-error);
    background:   rgba(208, 46, 46, 0.1);
    color:        var(--ft-error);
}

/* --- Badges / tags -------------------------------------- */
.badge {
    border-radius:  0;
    font-family:    var(--ft-font);
    font-weight:    var(--ft-weight-bold);
    font-size:      0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Footer --------------------------------------------- */
footer,
footer.page {
    background:              var(--ft-footer-bg);
    color:                   var(--ft-footer-text);
    margin-top:              3rem;
    border-top:              1px solid var(--ft-nav-border);
    border-top-left-radius:  0;
    border-top-right-radius: 0;
    padding:                 2rem var(--ft-gap);
}

footer a,
footer .flatpage {
    color:          var(--ft-secondary) !important;
    font-family:    var(--ft-font);
    font-weight:    var(--ft-weight-bold);
    font-size:      0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius:  0;
    padding:        0.4rem 0.75rem;
    transition:     background 0.2s, color 0.2s;
}

footer a:hover,
footer .flatpage:hover {
    background-color: var(--ft-bg-accent);
    color: var(--ft-secondary);
}

footer .flatpage.selected {
    color:           var(--ft-bg) !important;
    text-decoration: none;
    background:      var(--ft-secondary);
}

.flatpages {
    display:         flex;
    flex-direction:  row-reverse;
    flex-wrap:       wrap;
    gap:             0.25rem;
    justify-content: flex-start;
}

.flatpage:hover, .flatpage.selected {
    text-decoration: none;
}

/* --- Flatpage content ----------------------------------- */
.flatpage-last-updated {
    display:        block;
    margin-top:     2rem;
    padding-top:    1rem;
    border-top:     1px solid var(--ft-hairline);
    color:          var(--ft-text-light);
    font-size:      0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Container ------------------------------------------ */
.container,
.container-fluid {
    max-width: var(--ft-max-width);
}

/* --- Product carousel (overview swipe strip) ------------ */
.products-carousel-wrap {
    position: relative;
}

.products-carousel__btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         2;
    width:           2rem;
    height:          2rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      var(--ft-bg);
    border:          1px solid var(--ft-nav-border);
    color:           var(--ft-nav-text);
    cursor:          pointer;
    font-size:       1rem;
    padding:         0;
    transition:      background 0.2s, color 0.2s, border-color 0.2s,
                     opacity 0.2s, visibility 0.2s;
}

.products-carousel__btn:hover {
    background:   var(--ft-secondary);
    color:        var(--ft-bg);
    border-color: var(--ft-secondary);
}

.products-carousel__btn:disabled {
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
}

.products-carousel__btn--prev { left:  -1rem; }
.products-carousel__btn--next { right: -1rem; }

.products-carousel {
    display:                    flex;
    flex-wrap:                  nowrap;
    overflow-x:                 auto;
    scroll-snap-type:           x mandatory;
    -webkit-overflow-scrolling: touch;
    gap:                        var(--ft-gap-sm);
    padding-bottom:             var(--ft-gap-sm);
    scrollbar-width:            none;
    margin:                     0;
    padding-left:               0;
}

.products-carousel::-webkit-scrollbar {
    display: none;
}

.products-carousel__item {
    flex:              0 0 72vw;
    max-width:         260px;
    scroll-snap-align: start;
}

@media (min-width: 480px) {
    .products-carousel__item { flex-basis: 48vw; }
}

@media (min-width: 768px) {
    .products-carousel__item { flex-basis: 200px; }
}

/* Browse card — same shape as a product_pod */
.products-carousel__browse-link {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      260px;
    height:          100%;
    border:          1px solid var(--ft-hairline);
    color:           var(--ft-secondary);
    font-weight:     var(--ft-weight-bold);
    font-size:       0.85rem;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-decoration: none;
    gap:             0.75rem;
    transition:      background 0.2s, color 0.2s;
}

.products-carousel__browse-link:hover,
.products-carousel__browse-link:focus {
    background:      var(--ft-secondary);
    color:           var(--ft-bg);
    text-decoration: none;
}

.products-carousel__browse-arrow {
    font-size:   2rem;
    line-height: 1;
}

/* --- Accent areas --------------------------------------- */
.bg-accent,
.well {
    background:    var(--ft-bg-accent);
    border-radius: 0;
    border:        none;

}

.well {
    padding: var(--ft-gap-sm);
}

/* =========================================================
   Mobile-first responsive adjustments
   ========================================================= */

@media (max-width: 767px) {
    :root {
        --ft-gap:    1rem;
        --ft-gap-lg: 2rem;
        --ft-btn-px: 1.2rem;
        --ft-btn-py: 0.7rem;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.1rem; }

    .navbar-nav .nav-link {
        padding-left:  0.5rem;
        padding-right: 0.5rem;
        font-size:     0.85rem;
    }

    footer {
        padding: 1.5rem 1rem;
    }

    .flatpages {
        flex-direction: column;
        gap:            0.1rem;
    }

    /* Full-width buttons on mobile for easy tapping */
    .btn,
    button,
    input[type="submit"] {
        width:      100%;
        text-align: left;
    }

    .card {
        margin-bottom: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 989px) {
    :root {
        --ft-gap: 1.2rem;
    }
}


.navbar-dark .navbar-toggler {
    border-color: var(--ft-nav-border);
}

.checkout-quantity .input-group {
  max-width: unset !important;
}


/* Product info dropdowns (<details>/<summary>) */
details.product-info-dropdown {
    border: 1px solid var(--ft-hairline);
    border-radius: var(--ft-btn-radius);
    padding: 0;
    overflow: hidden;
}
details.product-info-dropdown summary {
    padding: var(--ft-gap-sm) var(--ft-gap);
    font-weight: var(--ft-weight-bold);
    font-family: var(--ft-font);
    color: var(--ft-text);
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
details.product-info-dropdown summary::-webkit-details-marker { display: none; }
details.product-info-dropdown summary::after {
    content: '+';
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ft-secondary);
}
details.product-info-dropdown[open] summary::after { content: '−'; }
details.product-info-dropdown[open] summary {
    border-bottom: 1px solid var(--ft-hairline);
}
.product-info-dropdown-body {
    padding: var(--ft-gap-sm) var(--ft-gap);
    color: var(--ft-text-light);
}