/*html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}*/

:root {
    --primary-color: var(--brand); /* legacy alias; points at the unified brand accent */

    /* --- Design tokens (dark theme) --- */
    /* Brand accent */
    --brand: #2dd4bf; /* bright teal - primary actions */
    --brand-strong: #14b8a6; /* hover / pressed */
    --brand-ink: #06231f; /* text on brand fills */
    --brand-soft: rgba(45, 212, 191, 0.12); /* subtle brand tint */
    --brand-line: rgba(45, 212, 191, 0.45); /* brand borders */

    /* Semantic */
    --danger: #ef4444;
    --danger-strong: #dc2626;
    --success: #22c55e;

    /* Surfaces */
    --surface-1: #1c1a2b; /* panels / cards */
    --surface-2: #26243a; /* raised items inside panels */
    --surface-3: #2f2c46; /* hover / inputs on dark */

    /* Borders & lines */
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Text */
    --text: #f4f4f5;
    --text-muted: #a9a7b8;
    --text-dim: #7c7a90;

    /* Shape & motion */
    --radius: 10px;
    --radius-sm: 8px;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
    --ease: 0.18s ease;
}

body {
    /* Clears the fixed-top navbar. Must match its real height (see the navbar       rules in "EXTENDING BOOTSTRAP - Round 2"), or the top of every page       renders underneath the bar. Before it was 50px, then later 56px */
    padding-top: 50px;
    padding-bottom: 20px;
    /*background-image: url('../images/background 6.jpg');*/
    background-color: #333333;
    background-repeat: repeat;
    min-width: 323px;
    color: whitesmoke;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    background-color: #111111;
    color: whitesmoke;
    min-width: 323px;
    border: 1px solid #000000;
}

/* The gutter was on the left only, so every page ran flush into the right edge
   of the window - most obviously wherever something sits hard right, like the
   cart's summary panel and its Proceed button. */
.view {
    min-height: 532px;
    margin: 0 9px;
    display: none;
}

h2 {
    font-size: 48px;
    letter-spacing: 1px;
    font: 700 32px / 1.13 "futura-pt-bold", sans-serif;
    color: var(--text);
    margin: 0;
    text-transform: uppercase;
}

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 282px;
    min-width: 282px;
    border-radius: 3px;
    box-shadow: #C0C0C0 0px -1px initial;
    height: 32px;
    font-size: 14pt;
}

    input[type="checkbox"] {
        max-width: 30px; /* remove fixed width */
        min-width: 30px;
        width: auto; /* natural size */
        height: auto; /* natural size */
        box-shadow: none; /* no shadow */
        border-radius: 2px;
        transform: scale(1.5); /* slightly bigger checkbox */
        cursor: pointer;
    }

.inputNumber {
    max-width: 62px;
    min-width: 62px;
}

textarea {
    height: 99px;
}

select {
    padding-top: 3px;
    padding-bottom: 3px;
}
/* Set padding to display errors that occur during databinding */
.padding-error {
    padding-top: 20px;
}

@media only screen and (max-width: 767px) {
    .nofloat {
        float: none;
        padding: 10px 15px;
    }
}

@media screen and (min-width: 767px) {
    div.homeAddress {
        font-size: 14px;
    }
}

@media screen and (max-width: 767px) {
    div.homeAddress {
        font-size: 10px;
    }
}
/*@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}*/

table {
}

    table thead th {
        border: 1px solid #808080;
        padding: 0px 9px 0px 9px;
    }

    table tbody tr {
        border-bottom: 1px solid #808080;
    }

    table tbody td {
        padding: 0px 9px 0px 9px;
        border-right: 1px dashed #444444;
    }


.tdcontrols {
    border-right: none;
}

.mainHr {
    border-top: 1px solid #222222;
}

.divForLink {
    border-bottom: 1px solid #222222;
    font-size: large;
    padding-bottom: 30px;
    min-height: 90px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

    .divForLink a {
        font: bold;
        font-size: larger;
        text-decoration: none;
    }

    .divForLink span {
        /*position: relative;*/ /* Move the span */
        /*top: -1px;*/ /* Move the span up */
        margin-left: 10px;
        margin-right: 5px; /* Space between text and image */
    }

    .divForLink img {
        margin-right: 10px; /* Space between image and link */
    }

    .divForLink a {
        margin-left: -9px; /* Space between link and previous element (if needed) */
        position: relative; /* Move the span */
        bottom: -20px; /* Move the span up */
    }

.simpleLink {
    text-decoration: none;
    font-weight: 400;
    color: #808080;
}

    .simpleLink:hover {
        text-decoration: none;
        color: white;
    }

section {
    padding-top: 21px;
    padding-bottom: 32px;
    min-height: 200px;
}

.controls {
    margin: 0px 14px 21px 3px;
    padding: 0px 0px 21px 23px;
}

.controlsHorizontal {
    margin: 21px 0px 21px 0px;
    padding: 21px 0px 21px 0px;
    display: flex;
    border-bottom: 1px solid #444444;
}

.controls a {
    text-decoration: none;
    font-weight: bold;
    color: var(--brand); /*#00498a;*/
    background-color: #222222;
    padding: 5px 21px;
    border: 2px solid #808080;
    border-radius: 5px;
    white-space: nowrap;
}

.controlsHorizontal a {
    text-decoration: none;
    font-weight: bold;
    color: var(--brand); /*#00498a;*/
    background-color: #222222;
    padding: 5px 21px;
    border: 2px solid #808080;
    border-radius: 5px;
    white-space: nowrap;
    margin-left: 9px;
}

    .controls a:hover,
    .controlsHorizontal a:hover
    button:hover {
        text-decoration: none;
        background-color: #111111;
    }

.controls .element {
    margin: 21px 0px;
}

.controls button,
.controlsHorizontal button {
    padding: 5px 9px;
    min-width: 82px;
    margin-left: 9px;
}

button { /*same as .control a but fit padding*/
    text-decoration: none;
    font-weight: bold;
    color: var(--brand); /*#00498a;*/
    background-color: #222222;
    padding: 3px 9px;
    border: 2px solid #808080;
    border-radius: 5px;
}

    button:disabled {
        color: #999999;
    }

form {
    /*border: 1px solid #222222;*/
    border-radius: 3px;
    padding: 30px;
}

.formForEdit {
    border: none;
}

.viewName {
    font-size: x-large;
    font-weight: 900;
    letter-spacing: 3px;
    color: var(--brand);
    margin: 9px 0px 0px 21px;
    text-transform: uppercase;
}

.singleLined {
    margin-top: 21px;
}

.submenu {
    font-size: x-large;
    padding: 0px;
    font-weight: 900;
}

#controlPanelMenu {
    white-space: nowrap;
}

.nav > li > #controlPanelMenu {
    font-size: 32px;
}

    .nav > li > #controlPanelMenu:hover {
        font-size: 35px;
        text-align: left;
        box-shadow: 0px 3px 9px #111111;
        border-radius: 3px;
        background-color: #222222;
        color: #0a79c2;
    }

.nav > li > a:hover {
    /* get it here */
    background-color: #333333;
}

/*----------------------------------------------*/
.ordersTable,
.readOnlyTable {
    min-width: 90%;
    border-collapse: separate;
    border-spacing: 0 8px; /* vertical spacing between rows */
}

    .ordersTable thead tr th,
    .readOnlyTable thead tr th {
        font-size: 14px;
        background-color: #2b2b2b;
        color: #f1f1f1;
        border-bottom: 2px solid #444;
        white-space: nowrap;
    }


    .ordersTable tbody tr,
    .readOnlyTable tbody tr {
        font-size: 12px;
        height: 48px;
        background-color: #1e1e1e;
        border-radius: 6px;
        /*box-shadow: inset 0px 2px 9px #999999;*/ /* old */
        /*background: linear-gradient( to bottom, #242424, #1b1b1b );*/ /* better */
    }

    /* zebra begin */
        .ordersTable tbody tr:nth-child(even) {
            background-color: #202020;
        }

        .ordersTable tbody tr:nth-child(odd) {
            background-color: #1a1a1a;
        }
    /* zebra end */


        .ordersTable tbody tr:hover {
            text-decoration: none;
            background-color: rgba(65, 105, 225, 0.15);
            cursor: pointer;
        }

        .readOnlyTable tbody tr:hover {
            text-decoration: none;
            background-color: #222222;
        }

.customer4OrdersTable {
    font-weight: bold;
    font-size: 14px;
    color: #77a8a8; /* #77a8a8 */
}

.customer4Desktop {
    font-weight: bold;
    font-size: 14px;
    color: #000000; /* # */
}
/*-----------------------------------------------*/
.commonTable tbody tr {
    font-size: 12px;
    box-shadow: inset 0px 2px 9px #999999;
    height: 32px;
}

    .commonTable tbody tr:hover {
        text-decoration: none;
        background-color: #111111;
    }

.tableValueLabel {
    font-size: 9px;
    font-weight: bold;
}

.tableCounter {
    font-size: 9px;
    font-weight: bold;
    margin-left: 3px;
}

.consoleMessage {
    text-align: right;
    color: var(--brand);
    font-family: 'Times New Roman', Times, serif;
    font-size: x-large;
    width: 333px;
    text-overflow: ellipsis;
}

.statusMessage {
    margin: 10px 0px;
    color: var(--brand);
    font-family: 'Times New Roman', Times, serif;
    font-size: large;
    text-overflow: ellipsis;
}

.detailsPane, .editPane {
    max-width: 349px;
    min-width: 349px;
    line-height: 17px;
    /*background-color: #57574f;*/
}

    .detailsPane span, .editPane span {
        font-weight: 300;
        color: #000000;
        margin-left: 9px;
        font-size: 16px;
    }

    .detailsPane a, .editPane a {
        margin-left: 14px;
        color: #0a25a5;
        font-weight: 600;
    }

    .detailsPane hr, .editPane hr {
        border-color: #808080;
        margin: 0px 0px 3px 0px;
        padding: 0px;
    }

    .detailsPane label, .editPane label {
        max-width: inherit;
        min-width: inherit;
        color: #000;
        margin-top: 5px;
        font-size: 13px;
    }

    .detailsPane div {
        padding: 3px 5px 5px 9px;
        /*
        box-shadow: 1px -1px 9px #555555 inset;
        border-bottom: 1px solid #333333;
        */
        display: block;
        background-color: #eee7ab; /*#57574f #374346  #a0a08d #97f3ad 9ad4a8*/
        /*margin-bottom: 1px;
        margin-top: 1px;*/
        border-bottom: 1px solid #9e9449;
    }

    .editPane div {
        padding: 3px 5px 21px 9px;
        /*
        box-shadow: 1px -1px 9px #555555 inset;
        border-bottom: 1px solid #333333;
        */
        display: block;
        background-color: #eee7ab; /*#57574f #374346  #a0a08d #97f3ad 9ad4a8*/
        /*margin-bottom: 1px;
        margin-top: 1px;*/
        border-bottom: 1px solid #9e9449;
    }

    .editPane input, .editPane select, .editPane textarea {
        background-color: #eee7ab;
    }

    .editPane .detailsPaneSurrogate {
        padding: 3px 5px 5px 9px;
    }

.dPCommonHr {
    border-color: #444444;
    margin: 0px 0px 3px 0px;
    padding: 0px;
}

.noteLane {
    max-height: 353px;
    min-height: 353px;
    overflow: auto;
}

.noteA {
    border: 1px solid #336699;
    border-radius: 9px;
    margin: 3px 3px 9px 3px;
    padding: 3px 3px 3px 9px;
    background-color: #808080;
    width: 232px;
    float: left;
}

.noteB {
    border: 1px solid #336699;
    border-radius: 9px;
    margin: 3px 3px 9px 3px;
    padding: 3px 3px 3px 9px;
    background-color: #26734d; /*#26734d #206040 #339966 #133a26*/
    width: 232px;
    float: right;
}

.noteA .noteDate {
    font-size: x-small;
    color: #ffffff;
    white-space: nowrap;
    text-align: left;
    margin: 3px 0 3px 0;
}

.noteB .noteDate {
    font-size: x-small;
    color: #ffffff;
    white-space: nowrap;
    text-align: right;
    margin: 3px 0 3px 0;
}

.noteText {
    color: orange;
    font-size: 17px;
    padding-bottom: 3px;
    border-bottom: 1px solid #999999;
    overflow-wrap: break-word;
}

.noteA .noteUser {
    color: #000000;
    font-weight: bolder;
    font-size: 14px;
    margin-top: 2px;
}

.noteB .noteUser {
    color: #000000;
    font-weight: bolder;
    font-size: 14px;
    margin-top: 2px;
    margin-right: 3px;
    text-align: right;
}

.noteA .noteActions {
    white-space: nowrap;
    text-align: left;
}

.noteB .noteActions {
    white-space: nowrap;
    text-align: right;
}

#notesContainer {
    width: 314px;
    min-width: 214px;
    border: 1px solid #444444;
    padding-bottom: 3px;
    display: table-cell;
    vertical-align: bottom;
}

.notesControlsContainer {
    max-width: 314px;
    margin-top: 14px;
}

.imageTitle {
    background-color: #CCCCCC;
    color: black;
    padding: 3px 0px 3px 21px;
    border-radius: 2px;
    font-size: large;
    font-weight: bold;
    margin: 0px 3px 3px 3px;
}

.newNoteTextBox {
    margin-left: 9px;
}

.inputFile {
    color: var(--brand);
}

.pagination > li a {
    cursor: pointer;
}

.pagination > li a,
.pagination > li b {
    color: var(--brand);
}

.confirmationDialog {
    margin-left: -50px;
    /* display: inline-block;*/
}

    .confirmationDialog > b {
        font-weight: 200;
        font-size: 11px;
    }

    .confirmationDialog > button {
        padding: 5px 9px;
        min-width: 53px;
    }

.confirmationDialogForNotes {
    margin: 23px 0 0 23px;
    display: inline-block;
}

.confirmationDialog > b {
    margin-right: 5px;
}

.confirmationDialogForNotes > button {
    padding: 5px 9px;
    min-width: 53px;
}

.reportContainer {
    margin-bottom: 114px;
    border-bottom: 3px solid #222222;
    padding: 3px 3px 9px 3px;
    min-height: 90px;
    background-color: #292929;
    border-radius: 5px;
}

.reportTitle {
    text-align: center;
    font-size: 21px;
    color: #E9E9E9;
    padding-top: 30px;
}

.reportLoading {
    position: absolute;
    left: 49%;
    margin-top: 9px;
}

.requiredField {
    margin-left: 3px;
    color: #999999;
    display: inline;
}

/*img {
     opacity:1;
    transition:opacity 0.5s linear;
}

.img-responsive
{

}*/

.mainImageContainer {
    text-align: center;
    box-shadow: 0 0 2em 0.3em #222222;
    border: 1px solid #000000;
}

.mainImageContainerWhite {
    background-color: white;
}

/**/

/* Ensuring images are square and responsive */
.square-image {
    width: 100%; /* Make image fill the container's width */
    height: 0;
    padding-bottom: 100%; /* Aspect ratio of 1:1 (square) */
    object-fit: cover; /* Ensure the image covers the square area */
}

/* Container for images to make them responsive */
.row {
    display: flex;
    flex-wrap: wrap; /* Allow images to wrap when the screen size is smaller */
    gap: 10px; /* Optional: space between images */
}

/* Ensure each column takes up 33% of the available space */
.col-md-4 {
    width: 33.33%; /* Each image container takes 33% of the row width */
    padding: 5px 5px; /* Optional: add space between columns */
    box-sizing: border-box;
}

/* Optional: make the row responsive */
@media (max-width: 768px) {
    .col-md-4 {
        width: 50%; /* On medium screens, each item takes up 50% width */
    }
}

@media (max-width: 480px) {
    .col-md-4 {
        width: 100%; /* On small screens, images take up 100% width */
    }
}

/* Optional: styling for the thumbnail container */
.thumbnail {
    border: none;
    padding: 0;
    overflow: hidden;
    border-radius: 8px; /* Optional: rounded corners for the images */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: shadow for the images */
}

    .thumbnail img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image is resized to cover the square area */
    }

/* Smooth image translate/scale inside the square wrapper */
.square-wrapper img {
    transition: transform 0.35s cubic-bezier(.2,.9,.2,1);
    transform-origin: center center;
    display: block;
}

/* Keep thumbnail hover cursor consistent */
.thumbnail:hover {
    cursor: pointer;
}

.square-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

    .square-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.thumbnail {
    margin-bottom: 5px;
    padding: 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

    .thumbnail:hover {
        cursor: pointer;
    }

/**/

/*CAROUSEL*/
.carousel-fade .carousel-inner .item {
    transition-property: opacity;
}

.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0.2;
}

.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

    .carousel-fade .carousel-inner .next,
    .carousel-fade .carousel-inner .prev,
    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

.carousel-fade .carousel-control {
    z-index: 2;
}

.flexContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.flexImage {
    flex-shrink: 0;
    width: 146px;
    height: auto
}

#homeCarouselSmall {
}

    #homeCarouselSmall img {
        border: 2px solid #555555;
        border-radius: 5px;
    }

.homeAddress {
    color: #999999;
    margin-left: 21px;
}
/**/

/*TextBoxes { */
.searchLong {
    padding-left: 3px;
    min-width: 282px;
}

.searchShort {
    padding-left: 3px;
    max-width: 130px;
    min-width: 130px;
}

.searchPhonebook {
    padding-left: 3px;
    max-width: 173px;
    min-width: 173px;
}

.searchShort:disabled,
.searchLong:disabled,
.searchSelect:disabled {
    background-color: #444444;
    color: #999999;
    border: 1px solid #222222;
}

.searchMedium {
    padding-left: 3px;
    max-width: 182px;
    min-width: 182px;
    margin-top: 9px;
}
/* } */

/*DESKTOP { */
.level1,
.level2,
.level3 {
    margin-bottom: 30px;
}

    .level1 .desktopItem1 {
        background-color: #477844; /*#1d391a*/
    }

    .level2 .desktopItem1 {
        background-color: #aa4808;
    }

    .level3 .desktopItem1 {
        background-color: #1d4f6c;
    }

.desktopItem1 {
    border: 1px solid #111111;
    border-radius: 3px;
    margin: 0px 0px 9px 0px;
    padding: 3px 3px 3px 9px;
    box-shadow: inset 0px 2px 9px #111111;
    color: #000000;
    cursor: pointer;
}

.desktopSpan {
    margin-right: 21px;
}
/*DESKTOP } */

.ui-datepicker .ui-datepicker-prev::before {
    content: "<";
}

.ui-datepicker .ui-datepicker-next::before {
    content: ">";
}

.reportFiltersContainer {
    border-bottom: 1px solid #444444;
    margin: 0px 14px 21px 3px;
    padding: 0px 0px 21px 0px;
}

.yearSelect {
    font-size: 17px;
    font-weight: 600;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #333333;
    border: 1px solid #999999;
    max-width: 82px;
    min-width: 82px;
    margin-right: 3px;
}

    .yearSelect:active {
    }

.yearButton {
    padding: 4px 14px 4px 14px;
    margin-right: 30px;
}

.reportFiltersContainer a {
    text-decoration: none;
    font-weight: bold;
    color: var(--brand); /*#00498a;*/
    background-color: #222222;
    padding: 7px 21px;
    border: 2px solid #808080;
    border-radius: 5px;
    white-space: nowrap;
    margin-left: 7px;
}

#homeRowServices {
    margin-top: 90px;
}

#homeImgHouse {
    padding: 0px 0px 9px 0px;
    width: 200px;
}

#homeImgCar {
    width: 200px;
    padding: 0px 0px 7px 0px;
}

#homeImgCommercial {
    width: 200px;
    padding: 0px 0px 2px 0px;
}

/*SPINNERS*/
.loadingSpinnerNextToButton {
    float: right;
    margin: 6px 0px 0px 9px;
    min-width: 23px;
}

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

    .breadcrumb > li {
        display: inline-block;
    }

        .breadcrumb > li + li:before {
            padding: 0 5px;
            color: #cccccc;
            content: "/\00a0";
        }

    .breadcrumb > .active {
        color: #999999;
    }


.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

    .pagination > li {
        display: inline;
    }



        .pagination > li > a,
        .pagination > li > span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.428571429;
            text-decoration: none;
            background-color: #222222;
            border: 1px solid #dddddd;
        }

        .pagination > li:first-child > a,
        .pagination > li:first-child > span {
            margin-left: 0;
            border-bottom-left-radius: 4px;
            border-top-left-radius: 4px;
        }

        .pagination > li:last-child > a,
        .pagination > li:last-child > span {
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
        }

        .pagination > li > a:hover,
        .pagination > li > span:hover,
        .pagination > li > a:focus,
        .pagination > li > span:focus {
            background-color: #111111;
        }

    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 2;
        color: #ffffff;
        cursor: default;
        background-color: #428bca;
        border-color: #428bca;
    }

    .pagination > .disabled > span,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #999999;
        cursor: not-allowed;
        background-color: #ffffff;
        border-color: #dddddd;
    }

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none;
}

    .pager:before,
    .pager:after {
        display: table;
        content: " ";
    }

    .pager:after {
        clear: both;
    }

    .pager:before,
    .pager:after {
        display: table;
        content: " ";
    }

    .pager:after {
        clear: both;
    }

    .pager li {
        display: inline;
    }

        .pager li > a,
        .pager li > span {
            display: inline-block;
            padding: 5px 14px;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            border-radius: 15px;
        }

            .pager li > a:hover,
            .pager li > a:focus {
                text-decoration: none;
                background-color: #eeeeee;
            }

    .pager .next > a,
    .pager .next > span {
        float: right;
    }

    .pager .previous > a,
    .pager .previous > span {
        float: left;
    }

    .pager .disabled > a,
    .pager .disabled > a:hover,
    .pager .disabled > a:focus,
    .pager .disabled > span {
        color: #999999;
        cursor: not-allowed;
        background-color: #ffffff;
    }

/*
div {
    border: 1px dashed black;
}*/

/* - -------------------------------------- EXTENDING BOOTSTRAP - Round 2 --------------------------*/

/* Expanded (desktop) navbar. The cart icon is rendered at 1.5rem, so its line
   box is ~12px taller than the text links. That inflated the whole bar to 68px
   — past the 56px `body { padding-top }` reserved for it — and left every item
   sitting high, because flex items stretch and the links then render at the top
   of their over-tall row. Collapse the icon's line box and centre the rows so
   the bar is a predictable 56px and "Log in" lines up with the cart. (The
   signed-in avatar was already immune: its link carries `h-100
   d-flex align-items-center`.) */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        align-items: center;
    }
}

/* Applies at every width. Laying the cart link out with flex keeps the icon off
   the text baseline, so the row is exactly the glyph's height with no descender
   space reserved underneath. Together with the explicit height below, the bar
   stops depending on the icon font's metrics — which matters because its height
   has to stay in step with `body { padding-top }`. */
.navbar .cart-nav-link {
    display: flex;
    align-items: center;
}

.navbar .cart-nav-link .bi-cart3 {
    display: block;
    line-height: 1;
    height: 1.5rem; /* matches the inline font-size on the element */
}

/* Collapsed (mobile) navbar: give the stacked items breathing room so the cart
   icon no longer touches the profile picture. Only applies below the lg
   breakpoint, where navbar-expand-lg switches to the vertical layout. */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item {
        margin-top: 0.5rem;
    }

    /* The cart item carries an inline margin-left for the desktop layout;
       drop it when stacked so it lines up with the other items. */
    .navbar-nav .nav-item[style] {
        margin-left: 0 !important;
    }

    /* When the cart shows its item-count badge, the badge overflows upward and
       crowds the item above. Add clearance — but only while the badge is
       present, so an empty cart keeps the normal, even spacing. */
    .navbar-nav .nav-item.cart-item-badged {
        margin-top: 1.1rem;
    }
}

.modal-header {
    background-color: darkslategrey
}

.modal-body {
    background-color: darkslategrey
}

.modal-footer {
    background-color: darkslategrey
}

.cartModalh {
    color: black;
}

/* Slide-in modal from right */
.modal.modal-right .modal-dialog {
    position: fixed;
    right: 0;
    margin: 0;
    height: 100%;
    width: 400px; /* adjust as needed */
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}

.modal.modal-right.show .modal-dialog {
    transform: translateX(0);
}

.modal.modal-right .modal-content {
    height: 100%;
    border-radius: 0;
}

/* paymen form */
/* Multi-line Stripe Card Form */
.payment-form {
    max-width: none; /* allow it to grow */
    width: 100%; /* fill available column */
    margin: 0; /* don't force centering inside the column */
    background-color: transparent; /* the inner .formFieldContainer is the card */
    padding: 0;
    border: none;
    color: var(--text);
}

    .payment-form label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
        font-size: 14px;
        color: var(--text);
    }

    /* Stripe fields render dark default text, so keep a light field surface.
       Applies to the SetupIntent card field on the account page, which still uses the old
       individually-mounted elements. */
    .payment-form .stripe-element {
        background-color: #fff;
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        padding: 12px 14px;
        margin-bottom: 16px;
        font-size: 15px;
        color: #1a1a1a;
        min-height: 46px;
    }

    /* The Payment Element is themed from JS (see services/stripeAppearance.js) and draws its own
       panel, labels and method tabs. Wrapping it in the light surface above put a white box
       inside a white box and fought the dark theme, so it opts out entirely and only keeps
       the outer spacing.

       max-width is the important part. Stripe lays the element out to fill whatever container it
       is given, and the checkout panel runs the full page width — so on a wide monitor each
       payment-method tab stretched to several hundred pixels for a twelve-character label, and
       the card row spread just as thin. Stripe cannot fix this from the appearance API; the
       constraint has to come from the container, which is here in CSS where it belongs. */
    .payment-form #payment-element {
        background-color: transparent;
        border: 0;
        padding: 0;
        min-height: 0;
        margin-bottom: 16px;
        max-width: 720px;
    }

    .payment-form .cc {
        width: 100%;
        max-width: 340px;
    }

    .payment-form .ex,
    .payment-form .cv {
        width: 100%;
    }

    /* Placeholder / input text inside Stripe Elements */
    .payment-form .StripeElement--empty {
        color: #555555;
    }

    /* Stripe element focus */
    .payment-form .StripeElement--focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
    }

    /* Error styling */
    .payment-form .StripeElement--invalid {
        border-color: var(--danger);
    }

    /* Error message text */
    .payment-form #card-errors {
        color: red;
        font-size: 13px;
        margin-bottom: 16px;
        min-height: 20px; /* reserve space */
        margin-top: 8px;
    }

    /* Buttons in the payment flow use the unified .btn system (see redesign
       block). Only bare <button> without .btn falls back to defaults. */
    .payment-form button:not(.btn) {
        cursor: pointer;
    }

/* Responsive: make elements stack nicely on small screens */
@media (max-width: 480px) {
    .payment-form {
        max-width: 90%;
        padding: 15px;
    }

        .payment-form .stripe-element {
            font-size: 13pt;
        }
}


/* checkout progress status bar - begin */
.checkout-progress {
    background: #1c1a2b;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e9ecef;
    border: 2px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #6c757d;
}

.progress-step.active .step-circle {
    background: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.progress-step.completed .step-circle {
    background: #198754;
    border-color: #198754;
    color: white;
}

.step-label {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
}

.progress-step.active .step-label {
    color: #0d6efd;
    font-weight: 600;
}

.progress-line {
    flex: 1;
    height: 2px;
    background: #dee2e6;
    margin: 0 10px;
}

    .progress-line.completed {
        background: #198754;
    }

/* align-items: start, as .order-details-container already does. Grid items
   stretch by default, so the summary panel was drawn to the full height of the
   row beside it - a box of empty surface under the total whenever the form or
   the item list was the taller of the two. It also gives position: sticky room
   to work: an item stretched to its container's height has nowhere to travel. */
.checkout-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    margin-top: 30px;
    align-items: start;
}

    /* An empty cart has no summary to stand beside, so the empty state takes the
       whole width rather than being held to the left of a 400px void. */
    .checkout-container.checkout-single {
        grid-template-columns: 1fr;
    }

.formFieldContainer {
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* The 15px gap was set when every field was capped at 282px and so left slack
   inside its own track. Now that a field fills the column it was given, that
   gap is the only thing between two boxes several hundred pixels wide, and the
   pair reads as one run-on control.
   column-gap rather than gap: every .form-row in the app holds exactly two
   fields, so a row gap never applies, and .form-group carries its own 20px
   below itself in any case. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
}

/* Two side-by-side fields stop being side-by-side long before a phone: below
   this each column is too narrow to read its own label. */
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
        color: #212529;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 15px;
        line-height: 20px; /* ensures full vertical space */
        height: auto;
    }

/* Sits inside the label, against the field name, not as a word of its own. */
.requiredField {
    color: #dc3545;
    margin-left: 3px;
}

.payment-security-info {
    font-size: 13px;
    color: black;
}

.order-summary-sidebar {
    background: #1c1a2b;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 20px;
}

    .order-summary-sidebar h3 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 18px;
    }

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
}

.item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name {
    font-weight: 500;
}

.item-quantity {
    font-size: 14px;
    color: #6c757d;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.summary-total {
    font-size: 18px;
    margin-top: 10px;
}

.secure-checkout {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
    text-align: center;
    color: #198754;
    font-size: 14px;
}

.checkout-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding: 20px 0;
    border-top: 2px solid #dee2e6;
}

    .checkout-navigation .btn {
        padding: 12px 30px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 6px;
        border: none;
        color: white;
        text-decoration: none;
    }

.btn-secondary {
    background: #6c757d;
}

.btn-primary {
    background: #0d6efd;
}

.validation-error {
    display: block;
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

.input-error {
    border-color: #dc3545 !important;
}

    .input-error:focus {
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1) !important;
    }

/* saved address selector */
.address-select {
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
}

.manage-addresses-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
}

/* checkout option checkboxes */
.checkout-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    cursor: pointer;
}

    .checkout-checkbox input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

/* shipping method selection */
.shipping-method-heading {
    margin-top: 25px;
    font-size: 20px;
}

.shipping-methods {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 10px;
}

.shipping-method-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid #e9ecef;
}

    .shipping-method-option:last-child {
        border-bottom: none;
    }

    .shipping-method-option input[type="radio"] {
        margin-top: 4px;
    }

.method-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.method-name {
    font-weight: 500;
}

.method-description {
    font-size: 13px;
    color: #6c757d;
}

/* order summary extras */
.summary-muted {
    color: #6c757d;
    font-style: italic;
    font-size: 14px;
}

.sidebar-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
}

.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .sidebar-section-header h4 {
        margin: 0;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.edit-link {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-address {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
}

.method-line {
    margin-top: 8px;
    font-size: 13px;
    color: #6c757d;
}

.same-as-shipping-recap {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

/* coupon / promo code */
.coupon-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 25px;
    padding: 15px 20px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

    .coupon-row input {
        flex: 1;
        min-width: 180px;
        max-width: 320px;
        padding: 10px 12px;
        border: 1px solid #ced4da;
        border-radius: 6px;
    }

    .coupon-row .btn {
        padding: 10px 25px;
        border: none;
        border-radius: 6px;
        color: white;
    }

.coupon-message {
    font-size: 13px;
    color: #dc3545;
    flex-basis: 100%;
}

/* accepted payment badges */
.we-accept {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.we-accept-right {
    justify-content: flex-end;
}

.we-accept-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.cc-badge {
    display: inline-block;
    background: #212529;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* cart modal footer */
.cart-modal-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.cart-modal-subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 17px;
}

.cart-modal-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* Accepted-payments row inside the cart modal footer — tighter than the page
   version (payment-trust-compact) so it doesn't leave a big gap at the bottom. */
.cart-modal-footer .payment-trust-section {
    padding: 12px 0 0;
    margin-top: 6px;
    /* Cancel the global `section { min-height: 200px }` so the row hugs the bottom */
    min-height: auto;
}

.cart-item-link {
    color: inherit;
    text-decoration: none;
}

    .cart-item-link:hover {
        text-decoration: underline;
    }
/* checkout progress status bar - end */

/* homepage sections - begin */
.promo-banner {
    background-color: #2c4973;
    color: white;
    text-align: center;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 500;
}

    .promo-banner a {
        color: white;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .promo-banner a:hover {
            text-decoration: none;
        }

            .promo-banner a:hover .promo-banner-arrow {
                transform: translateX(4px);
            }

    .promo-banner-icon {
        font-size: 18px;
    }

    .promo-banner-arrow {
        font-size: 20px;
        transition: transform 0.2s ease;
    }

.hero-section {
    position: relative;
    margin-bottom: 60px;
}

.hero-slider {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.hero-slide {
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .hero-slide::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
    }

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 20px;
}

.hero-title {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
    font-size: 24px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-cta {
    display: inline-block;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
}

.hero-prev,
.hero-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
}

    .hero-prev:hover,
    .hero-next:hover {
        background: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

.hero-prev {
    left: 20px;
}

.hero-next {
    right: 20px;
}

.hero-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

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

    .hero-dot.active {
        background: white;
        width: 32px;
        border-radius: 6px;
    }

.value-props-section {
    padding: 60px 20px;
}

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

.value-prop-item {
    text-align: center;
    padding: 24px 16px;
    border-radius: 12px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

    .value-prop-item:hover {
        transform: translateY(-6px);
        background-color: rgba(255, 255, 255, 0.06);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    }

.value-prop-icon {
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.55);
    font-size: 40px;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
}

    .value-prop-item:hover .value-prop-icon {
        color: rgba(255, 255, 255, 0.75);
        transform: scale(1.08);
    }

.value-prop-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #f1f1f1;
}

.value-prop-desc {
    font-size: 14px;
    color: #adb5bd;
    margin: 0;
}

.categories-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #f1f1f1;
}

    /* Accent underline for section headings */
    .section-title::after {
        content: '';
        display: block;
        width: 64px;
        height: 3px;
        margin: 14px auto 0;
        border-radius: 3px;
        background: linear-gradient(90deg, #2c4973, #3d6bb0);
    }

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.category-card {
    position: relative;
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    }

.category-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

    .category-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
    }

.category-name {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: white;
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    z-index: 1;
}

.featured-products-section {
    padding: 60px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Products search / browse page (#/Products) - begin */
.shop-header-section {
    padding: 40px 20px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

    .shop-header-section .section-title {
        margin-bottom: 24px;
    }

.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.shop-search-box {
    position: relative;
    flex: 1 1 320px;
    max-width: 420px;
}

.shop-search-input {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 42px;
    padding: 0 40px 0 38px;
    border: 1px solid #555555;
    border-radius: 21px;
    background-color: #222222;
    color: whitesmoke;
    font-size: 15px;
}

    .shop-search-input:focus {
        outline: none;
        border-color: #3d6bb0;
    }

.shop-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #999999;
    pointer-events: none;
}

.shop-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .shop-search-clear:hover {
        color: whitesmoke;
        background-color: #333333;
    }

.shop-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shop-filter-pill {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 20px;
    border: 1px solid #555555;
    background-color: #222222;
    color: whitesmoke;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

    .shop-filter-pill:hover {
        border-color: #3d6bb0;
        color: whitesmoke;
        text-decoration: none;
    }

    .shop-filter-pill.active {
        background: linear-gradient(90deg, #2c4973, #3d6bb0);
        border-color: transparent;
        color: white;
    }

.admin-card {
    max-width: 900px;
    background-color: #262626;
    border: 1px solid #222222;
    border-radius: 8px;
    padding: 18px;
}

/* Per-item return inspection grid. Each returned line is judged on its own row, so a partly
   damaged return can be recorded as such instead of forcing an all-or-nothing verdict. */

/* The inputs inside the cells have intrinsic widths that push the table's min-content past
   .admin-card's 900px, so it spilled outside the panel. Fixed layout plus full-width inputs
   keeps it inside; the scroll container is the fallback on genuinely narrow screens. */
.inspection-table-scroll {
    overflow-x: auto;
}

.inspection-table {
    width: 100%;
    table-layout: fixed;
    margin: 10px 0;
    border-collapse: collapse;
}

    .inspection-table th:nth-child(1) { width: 30%; }
    .inspection-table th:nth-child(2) { width: 10%; }
    .inspection-table th:nth-child(3) { width: 14%; }
    .inspection-table th:nth-child(4) { width: 20%; }
    .inspection-table th:nth-child(5) { width: 26%; }

    .inspection-table th,
    .inspection-table td {
        padding: 6px 8px;
        text-align: left;
        border-bottom: 1px solid #333333;
        vertical-align: middle;
    }

    .inspection-table th {
        font-size: 13px;
        color: #a9a7b8;
        font-weight: 600;
    }

    .inspection-table input,
    .inspection-table select {
        margin: 0;
        width: 100%;
        min-width: 0; /* lets the input shrink inside a fixed-layout cell */
        box-sizing: border-box;
    }

.inspection-qty {
    max-width: 80px;
}

.inspection-summary {
    margin: 10px 0;
}

.inspection-note {
    color: #a9a7b8;
    font-size: 12px;
}

/* Operator alerts on an order (fraud warning, oversell). Deliberately louder than .admin-card:
   these sit above the fold and must not read as just another panel — one of them blocks
   fulfillment, the other means a customer paid for goods that aren't on the shelf. */
.attention-banner {
    max-width: 900px;
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 18px;
    border-left: 4px solid;
}

    .attention-banner h4 {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 700;
    }

    .attention-banner p {
        margin-bottom: 8px;
    }

.attention-banner-danger {
    background-color: #3a1c1f;
    border: 1px solid #5c2a2f;
    border-left-color: #e5484d;
}

    .attention-banner-danger h4 {
        color: #ff8a8f;
    }

.attention-banner-warning {
    background-color: #3a2f1c;
    border: 1px solid #5c4a2a;
    border-left-color: #e5a03d;
}

    .attention-banner-warning h4 {
        color: #ffc978;
    }

/* Informational sibling of the two above: something is in progress and the customer does NOT need
   to act. Deliberately not styled as a warning — a payment that is merely still clearing, dressed
   up as a problem, is what prompted customers to pay a second time. */
.attention-banner-info {
    background-color: #1c2f3a;
    border: 1px solid #2a4a5c;
    border-left-color: #3da8e5;
}

    .attention-banner-info h4 {
        color: #78c9ff;
    }

/* Confirmation that an operator action landed. Same shape as its siblings so the detail view has
   one banner slot, not a separate toast system. */
.attention-banner-success {
    background-color: #1c3a24;
    border: 1px solid #2a5c37;
    border-left-color: #3dc46a;
}

    .attention-banner-success p {
        color: #8ee0a6;
        margin-bottom: 0;
    }

/* Internal notes accumulate one appended line per staff action, so newlines have to survive. */
.internal-notes {
    white-space: pre-wrap;
    font-size: 13px;
    color: #adb5bd;
}

    .admin-card h3 {
        margin-top: 0;
        color: var(--brand);
    }

    /* Fields inside an admin panel fill the column they were given. The legacy
       input/select/textarea rule both caps and floors every field at 282px, so a
       field in a .form-row track stopped well short of its own column on a wide
       screen and could not shrink below it on a narrow one. Checkboxes are
       excluded - they want their intrinsic size, not the column's. */
    .admin-card .form-group input:not([type="checkbox"]),
    .admin-card .form-group select,
    .admin-card .form-group textarea {
        max-width: none;
        min-width: 0;
    }


.shop-results-section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

.shop-results-count {
    color: #adb5bd;
    font-size: 14px;
    margin: 0 0 20px;
}

/* Shown when the server could not match every search term and relaxed the query. */
.shop-relaxed-notice {
    color: #d0a24c;
    font-size: 14px;
    margin: -8px 0 20px;
}

    .shop-relaxed-notice i {
        margin-right: 6px;
    }

.shop-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #adb5bd;
}

    .shop-empty-state i {
        font-size: 40px;
        display: block;
        margin-bottom: 16px;
        color: #666666;
    }

    .shop-empty-state p {
        margin-bottom: 20px;
    }
/* Products search / browse page - end */

@media (max-width: 768px) {
    .shop-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .shop-search-box {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 36px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-prev,
    .hero-next {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .value-props-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .category-card {
        height: 200px;
    }
}

@media (max-width: 480px) {
    .hero-slider {
        height: 400px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .value-props-grid {
        grid-template-columns: 1fr;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }
}

.payment-trust-section {
    padding: 40px 20px 70px;
    text-align: center;
}

.payment-trust-label {
    color: #adb5bd;
    font-size: 14px;
    letter-spacing: 0.4px;
    margin-bottom: 18px;
}

    .payment-trust-label .bi {
        color: #4caf50;
    }

.payment-trust-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.payment-trust-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 28px;
    transition: color 0.2s ease, transform 0.2s ease;
}

    .payment-trust-item:hover {
        color: rgba(255, 255, 255, 0.75);
        transform: translateY(-3px);
    }
/* homepage sections - end */

/* --- product console --- */

/* Row thumbnails in the product list. Fixed square so a table of mixed aspect ratios still reads
   as a column, and so the placeholder for a product with no main image occupies the same space. */
.admin-product-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background-color: rgba(255, 255, 255, 0.04);
}

.admin-product-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 1.25rem;
}

/* The explanatory line under a form field. Was an inline style repeated per field. */
.fieldHint {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
    color: var(--text-muted);
}

/* status badges */
/* Base badge */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 5px;
    line-height: 1;
    white-space: nowrap;
}

/* Status colors */
.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-processing {
    background-color: #e7f3ff;
    color: #0c63e4;
}

.status-shipped {
    background-color: #e3f2fd;
    color: #0d6efd;
}

.status-delivered {
    background-color: #d1e7dd;
    color: #0f5132;
}

.status-cancelled {
    background-color: #f8d7da;
    color: #842029;
}

.status-refunded {
    background-color: #e2e3e5;
    color: #41464b;
}

.status-completed {
    background-color: #d1e7dd;
    color: #16351d;
}

.status-failed {
    background-color: #f8d7da;
    color: #500920;
}

.status-unknown {
    background-color: #f1f1f1;
    color: #6c757d;
}

/* --- account pages (addresses, payment methods, wishlist, settings) - begin --- */
.account-card {
    background-color: #2b2b2b;
    border: 1px solid #222222;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
    height: 100%;
    color: whitesmoke;
}

    .account-card h5 {
        color: var(--brand);
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 14px;
    }

    .account-card p {
        margin: 3px 0;
        color: #e6e6e6;
    }

    .account-card label {
        display: block;
        margin-bottom: 4px;
        font-weight: bold;
        font-size: 13px;
        color: #cccccc;
    }

    .account-card input:not([type="checkbox"]),
    .account-card select {
        width: 100%;
        max-width: 349px;
        min-width: 0;
    }

    .account-card .form-check label {
        display: inline;
        margin-left: 9px;
        font-size: 14px;
        color: #cccccc;
        font-weight: normal;
    }

    .account-card .confirmationDialog {
        margin-left: 0;
    }

    /* Stripe Elements container - match the checkout payment form */
    .account-card .stripe-element {
        background-color: #eee7ab;
        border: 1px solid #9e9449;
        border-radius: 3px;
        padding: 10px;
        font-size: 14pt;
        color: #000;
        min-height: 42px;
        max-width: 349px;
    }

    .account-card .StripeElement--focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    .account-card .StripeElement--invalid {
        border-color: red;
    }

    .account-card .wishlistImage {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 6px;
        margin-bottom: 12px;
        cursor: pointer;
        background-color: #ffffff;
    }

.accountIntroText {
    color: #adb5bd;
    margin-bottom: 18px;
}

.accountError {
    color: #ff6b6b;
    margin-top: 8px;
    font-size: 14px;
}

.accountSuccess {
    color: #4caf50;
    margin-top: 8px;
    font-size: 14px;
}

.accountEmptyState {
    text-align: center;
    padding: 40px 20px;
    color: #adb5bd;
}

/* Preference groups: the visual separation is what turns a flat list of checkboxes into a
   matrix the customer can reason about (transactional vs. alerts vs. marketing). */
.prefGroup {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

    .prefGroup:first-of-type {
        border-top: none;
        padding-top: 4px;
    }

.prefGroupTitle {
    font-size: 12px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}

/* Irreversible actions get a visual warning that a normal button does not carry. */
.accountDangerZone {
    border-color: rgba(239, 68, 68, 0.35);
}

    .accountDangerZone h5 {
        color: var(--danger);
    }

.dangerButton {
    background: var(--danger);
    border-color: var(--danger-strong);
    color: #ffffff;
}

    .dangerButton:hover {
        background: var(--danger-strong);
    }

/* --- account shell: sidebar + content, shared by every account page --- */

/* Sidebar is a fixed rail next to a fluid content column. The whole shell is centred so the
   content column keeps roughly the width each page used to set inline. */
.account-shell {
    max-width: 1140px;
    margin: 18px auto;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.account-content {
    min-width: 0; /* lets wide tables scroll inside the column instead of stretching the grid */
}

.account-nav {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 10px;
    position: sticky;
    top: 88px;
}

.account-nav-heading {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 2px 12px 10px;
}

.account-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: background-color var(--ease), color var(--ease);
}

    .account-nav a:hover {
        background: var(--surface-3);
        color: var(--text);
    }

    /* Current section. The left rule is what makes the active item readable at a glance rather
       than relying on the fill alone. */
    .account-nav a.is-active {
        background: var(--brand-soft);
        color: var(--brand);
        box-shadow: inset 3px 0 0 var(--brand);
    }

    .account-nav a i {
        font-size: 16px;
        width: 18px;
        text-align: center;
        flex: none;
    }

.account-nav-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* --- Profile hub --- */

.account-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 18px;
}

    .account-identity img {
        height: 72px;
        width: 72px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        flex: none;
    }

    .account-identity h3 {
        margin: 0 0 4px;
        font-size: 20px;
        color: var(--text);
    }

    .account-identity p {
        margin: 0;
        color: var(--text-muted);
        font-size: 14px;
    }

.account-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.account-hub-tile {
    display: block;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-decoration: none;
    transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

    .account-hub-tile:hover {
        border-color: var(--brand-line);
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .account-hub-tile i {
        font-size: 20px;
        color: var(--brand);
    }

    .account-hub-tile .account-hub-title {
        display: block;
        margin: 8px 0 4px;
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
    }

    .account-hub-tile .account-hub-blurb {
        display: block;
        font-size: 13px;
        line-height: 1.5;
        color: var(--text-muted);
    }

/* Below the grid breakpoint the rail becomes a normal block above the content: a sticky
   sidebar on a phone would eat most of the screen. */
@media (max-width: 860px) {
    .account-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .account-nav {
        position: static;
    }

        .account-nav ul {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .account-nav a.is-active {
            box-shadow: none;
        }
}
/* --- account pages - end --- */

/* --- new order details layout styles --- */
.order-details-container {
    max-width: 1100px;
    margin: 18px auto;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 22px;
    align-items: start;
    padding: 0 12px;
}

.order-main {
    background-color: #262626;
    border: 1px solid #222222;
    border-radius: 8px;
    padding: 18px;
}

.order-sidebar {
    background-color: #2b2b2b;
    border: 1px solid #222222;
    border-radius: 8px;
    padding: 18px;
    color: whitesmoke;
    position: sticky;
    top: 20px;
}

.order-summary h2 {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: var(--brand);
}

.order-totals h3 {
    margin-top: 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px dashed #222;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding-top: 10px;
    border-top: 1px solid #222;
}

.order-sidebar > h3 {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #222;
}

.address-block {
    background: transparent;
    padding: 8px 0;
    margin-bottom: 8px;
}

.address-block p {
    margin: 3px 0;
    color: #e6e6e6;
}

.address-empty {
    margin: 3px 0 8px 0;
    color: #888888;
    font-style: italic;
}

/* Responsive fallback */
@media (max-width: 900px) {
    .order-details-container {
        grid-template-columns: 1fr;
        padding: 0 8px;
    }

    .order-sidebar {
        position: relative;
        top: auto;
        margin-top: 12px;
    }
}

/* --- order status timeline (stepper) --- */
.order-timeline {
    margin: 18px 0 8px 0;
}

.order-timeline .timeline {
    list-style: none;
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    counter-reset: none;
}

.order-timeline .timeline-step {
    position: relative;
    flex: 1 1 0;
    text-align: center;
    padding-top: 26px;
    color: #888888;
    font-size: 13px;
}

/* connector line between steps */
.order-timeline .timeline-step::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -50%;
    width: 100%;
    height: 2px;
    background-color: #2a2a2a;
    z-index: 0;
}

.order-timeline .timeline-step:first-child::before {
    display: none;
}

.order-timeline .timeline-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: 2px solid #2a2a2a;
    z-index: 1;
}

.order-timeline .timeline-label {
    display: block;
    font-weight: 600;
}

.order-timeline .timeline-date {
    display: block;
    font-size: 11px;
    color: #777777;
    margin-top: 2px;
}

/* completed + current steps light up teal; the line leading into them too */
.order-timeline .timeline-done,
.order-timeline .timeline-current {
    color: #e6e6e6;
}

.order-timeline .timeline-done .timeline-marker,
.order-timeline .timeline-current .timeline-marker {
    background-color: var(--brand);
    border-color: var(--brand);
}

.order-timeline .timeline-done::before,
.order-timeline .timeline-current::before {
    background-color: var(--brand);
}

.order-timeline .timeline-current .timeline-marker {
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.25);
}

.timeline-canceled {
    margin: 18px 0 8px 0;
    padding: 10px 14px;
    background-color: #2a1416;
    border: 1px solid #842029;
    border-radius: 6px;
    color: #f1b0b7;
    font-size: 14px;
}

/* --- return-window eligibility banner --- */
.return-eligibility {
    margin: 8px 0 4px 0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.return-eligibility.eligible {
    background-color: #14261a;
    border: 1px solid #0f5132;
    color: #a3d9b8;
}

.return-eligibility.ineligible {
    background-color: #2a2410;
    border: 1px solid #6b5a1e;
    color: #e6d59a;
}

/* --- shipment tracking block --- */
.order-tracking {
    margin: 16px 0;
    padding: 14px 16px;
    background-color: #2b2b2b;
    border: 1px solid #222222;
    border-radius: 8px;
}

.order-tracking h3 {
    margin-top: 0;
    color: var(--brand);
}

.order-tracking p {
    margin: 4px 0;
    color: #e6e6e6;
}

.track-shipment-link {
    display: inline-block;
    margin-top: 8px;
    color: #4dd0c4;
    font-weight: 600;
    text-decoration: none;
}

.track-shipment-link:hover {
    text-decoration: underline;
}

/* Reorder proposal. Borrows the .order-tracking card shape so it reads as another panel on the
   order rather than as a modal — it is a list to check, not a decision to interrupt for. */
.reorder-panel {
    margin: 16px 0;
    padding: 14px 16px;
    background-color: #2b2b2b;
    border: 1px solid #222222;
    border-radius: 8px;
}

.reorder-panel h3 {
    margin-top: 0;
    color: var(--brand);
}

.reorder-note {
    margin: 0 0 10px;
    font-size: 13px;
    color: #d0a24c;
}

.reorder-lines {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.reorder-lines li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #3a3a3a;
    color: #e6e6e6;
}

/* Struck through rather than hidden: the shopper asked for this order back, so being told what
   is missing is the answer, not clutter. */
.reorder-lines li.is-unavailable .reorder-line-name {
    text-decoration: line-through;
    color: #8b9199;
}

.reorder-line-qty {
    color: #adb5bd;
    font-size: 13px;
}

.reorder-line-note {
    font-size: 12px;
    color: #d0a24c;
}

/* "1 canceled" beside a line's quantity. Quiet and on its own line — it explains a number that
   changed, it is not a number itself. */
.item-adjustment {
    display: block;
    font-size: 11px;
    color: #d0a24c;
}

/* The per-line "how many to cancel" box. Narrow and explicitly min-width:0 to escape the legacy
   input{min-width:282px} rule, which would otherwise push one number field across the panel. */
.item-cancel-qty {
    width: 70px;
    min-width: 0;
    max-width: none;
    margin-left: auto;
    padding: 4px 8px;
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #e6e6e6;
}

/* Route from a delivered order line to the product's review form. Quiet by design — it sits in a
   table cell next to the product name and must not compete with it. */
.review-product-link {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--brand);
    text-decoration: none;
}

.review-product-link:hover {
    text-decoration: underline;
}

/* ---------- Product reviews ---------- */

.pdp-reviews {
    margin-top: 36px;
}

.reviews-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    margin-bottom: 20px;
}

.reviews-score {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reviews-average {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: #e6e6e6;
}

.reviews-count {
    font-size: 13px;
    color: #adb5bd;
}

/* Stars are text, so they cost no requests and scale with the surrounding font. */
.reviews-stars .star {
    color: #55595e;
    font-size: 16px;
}

.reviews-stars .star.is-filled {
    color: #f5b301;
}

.reviews-distribution {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 220px;
    min-width: 200px;
}

.reviews-distribution li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #adb5bd;
}

.reviews-dist-label {
    width: 28px;
    text-align: right;
}

.reviews-dist-bar {
    flex: 1;
    height: 6px;
    background: #3a3a3a;
    border-radius: 3px;
    overflow: hidden;
}

.reviews-dist-bar i {
    display: block;
    height: 100%;
    background: #f5b301;
}

.reviews-dist-count {
    width: 24px;
}

.reviews-empty,
.reviews-note {
    color: #adb5bd;
    font-size: 13px;
}

.review-form {
    margin: 20px 0;
    padding: 16px;
    background: #2b2b2b;
    border: 1px solid #222222;
    border-radius: 8px;
}

.review-form h3 {
    margin-top: 0;
    font-size: 15px;
    color: var(--brand);
}

.review-star-button {
    background: none;
    border: none;
    padding: 0 2px;
    font-size: 26px;
    line-height: 1;
    color: #55595e;
    cursor: pointer;
}

.review-star-button.is-selected {
    color: #f5b301;
}

/* Overrides the global input{min-width:282px} rule, which would otherwise stop these shrinking
   inside the review card on a narrow screen. See the CSS unification notes. */
.review-form-title,
.review-form-body {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 10px;
    padding: 8px 10px;
    background: #1f1f1f;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #e6e6e6;
}

.review-form-error {
    margin: 8px 0 0;
    color: #e08585;
    font-size: 13px;
}

.review-form-submit {
    margin-top: 12px;
    padding: 8px 18px;
    background: var(--brand);
    color: #111111;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.review-form-submit:disabled {
    opacity: 0.55;
    cursor: default;
}

.reviews-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}

.review {
    padding: 14px 0;
    border-top: 1px solid #3a3a3a;
}

.review-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.review-title {
    font-weight: 600;
    color: #e6e6e6;
}

.review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px 0;
    font-size: 12px;
    color: #8b9199;
}

.review-verified {
    color: #4caf50;
    font-weight: 600;
}

.review-body {
    margin: 6px 0 0;
    white-space: pre-wrap;
    color: #d5d5d5;
}

/* Carrier scan timeline. A rail with a dot per scan, reading newest-first — customers open this
   to answer "where is it now", not to read the parcel's biography from the beginning. */
.carrier-timeline {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #3a3a3a;
}

.carrier-timeline h4 {
    margin: 0 0 2px;
    color: var(--brand);
    font-size: 14px;
}

.carrier-eta {
    margin: 0 0 10px;
    font-size: 12px;
    color: #adb5bd;
}

.carrier-timeline ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
    border-left: 2px solid #3a3a3a;
}

.carrier-scan {
    position: relative;
    padding: 0 0 12px 4px;
    font-size: 13px;
    line-height: 1.45;
}

.carrier-scan::before {
    content: '';
    position: absolute;
    left: -21px;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6c757d;
}

/* Only the states a customer would want picked out of the list get a colour. Everything else
   stays grey on purpose — colouring every scan makes none of them stand out. */
.carrier-scan-delivered::before {
    background: #4caf50;
}

.carrier-scan-out_for_delivery::before {
    background: var(--brand);
}

.carrier-scan-exception::before,
.carrier-scan-return_to_sender::before {
    background: #d9822b;
}

.carrier-scan-when {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #8b9199;
}

.carrier-scan-what {
    display: block;
    color: #e6e6e6;
}

.carrier-scan-where {
    display: block;
    font-size: 12px;
    color: #adb5bd;
}

/* Invoice download. A secondary action next to the order heading — it should be findable without
   competing with Cancel or Return, which are the buttons that actually change something. */
.invoice-download-button {
    margin-top: 10px;
    padding: 7px 14px;
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.invoice-download-button:hover:not(:disabled) {
    background: var(--brand);
    color: #111111;
}

.invoice-download-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Gift message. Borrows the .order-tracking card shape so it reads as another fact about the
   shipment rather than as body copy, and pre-wrap because the customer typed real line breaks
   into a textarea and a card that reflows them into one paragraph is not what they wrote. */
.order-gift-message {
    margin: 16px 0;
    padding: 14px 16px;
    background-color: #2b2b2b;
    border: 1px solid #222222;
    border-radius: 8px;
}

.order-gift-message h3 {
    margin-top: 0;
    color: var(--brand);
}

.order-gift-message p,
.confirmation-gift-message,
.gift-message {
    margin: 4px 0;
    white-space: pre-wrap;
    color: #e6e6e6;
}
/* --- end new styles --- */


/* =====================================================================
   CHECKOUT & CART REDESIGN — unified design system
   Loaded last so it refines Bootstrap + earlier rules on equal footing.
   Scope: cart, shipping, billing (pattern to extend to other views).
   ===================================================================== */

/* ---- 1. Unified button system --------------------------------------- */
/* One shape/size language for every button in the flow. Variants only
   change color, never geometry, so buttons feel like one family.       */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease);
}

    .btn:active {
        transform: translateY(1px);
    }

/* Primary — bright teal fill, dark ink (pops against the dark page) */
.btn-primary,
.hero-cta.btn-primary {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: var(--brand-ink);
}

    .btn-primary:hover,
    .btn-primary:focus,
    .hero-cta.btn-primary:hover {
        background: var(--brand-strong);
        border-color: var(--brand-strong);
        color: var(--brand-ink);
        box-shadow: 0 6px 18px rgba(45, 212, 191, 0.25);
    }

    .btn-primary:disabled,
    .btn-primary[disabled] {
        background: var(--surface-3);
        border-color: var(--border-strong);
        color: var(--text-dim);
        box-shadow: none;
    }

/* Secondary — ghost/outline (quiet companion to the primary CTA) */
.btn-secondary,
.btn-outline-light {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-outline-light:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--text-muted);
        color: var(--text);
    }

/* Danger — reserved strictly for destructive actions (remove) */
.btn-danger {
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

    .btn-danger:hover,
    .btn-danger:focus {
        background: var(--danger);
        border-color: var(--danger);
        color: #fff;
    }

/* Navigation footer buttons inherit the family (were overriding it) */
.checkout-navigation {
    border-top: 1px solid var(--border);
}

    /* Override the older `.checkout-navigation .btn { color:white; border:none }`
       so primary keeps dark ink on teal and secondary keeps its outline. */
    .checkout-navigation .btn-primary {
        color: var(--brand-ink);
        border: 1px solid var(--brand);
    }

    .checkout-navigation .btn-secondary {
        color: var(--text);
        border: 1px solid var(--border-strong);
    }

    .checkout-navigation .btn-primary:hover,
    .checkout-navigation .btn-primary:focus {
        color: var(--brand-ink);
    }

/* ---- 2. Progress indicator ------------------------------------------ */
.checkout-progress {
    background: var(--surface-1);
    border: 1px solid var(--border);
}

.step-circle {
    background: var(--surface-3);
    border: 2px solid var(--border-strong);
    color: var(--text-muted);
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

.progress-step.active .step-circle {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.progress-step.completed .step-circle {
    background: var(--success);
    border-color: var(--success);
    color: #06210f;
}

.step-label {
    color: var(--text-muted);
}

.progress-step.active .step-label {
    color: var(--brand);
}

.progress-line {
    background: var(--border-strong);
}

    .progress-line.completed {
        background: var(--success);
    }

/* ---- 3. Cart page title + item list --------------------------------- */
.cart-heading {
    text-align: center;
    margin-bottom: 4px;
}

.cart-subcount {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 22px;
}

/* Panel wrapper (replaces bg-black block; blue "items in cart" alert gone) */
.cart-content {
    background: transparent;
    padding: 0;
}

.cart-lines {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cart-line {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    align-items: center;
    gap: 18px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    transition: border-color var(--ease), transform var(--ease);
}

    .cart-line:hover {
        border-color: var(--border-strong);
    }

.cart-line-thumb {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
}

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

.cart-line-info {
    min-width: 0;
}

.cart-line-name {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    line-height: 1.3;
}

    .cart-line-name:hover {
        color: var(--brand);
    }

.cart-line-price {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 14px;
}

.cart-line-controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.cart-line-subtotal {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

/* Quantity stepper — one component, used on the cart line */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
}

.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}

    .qty-btn:hover {
        background: var(--brand-soft);
        color: var(--brand);
    }

.qty-value {
    width: 44px;
    /* Override the global input min/max-width (282px) so the stepper stays compact */
    min-width: 44px;
    max-width: 44px;
    height: 36px;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: center;
    font-weight: 600;
    padding: 0;
}

    .qty-value:focus {
        outline: none;
    }

.cart-line-remove {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: color var(--ease);
}

    .cart-line-remove:hover {
        color: #fca5a5;
    }

/* Empty cart state */
.cart-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
}

.cart-empty-icon {
    font-size: 46px;
    color: var(--text-dim);
    display: block;
    margin-bottom: 14px;
}

.cart-empty p {
    margin-bottom: 20px;
    font-size: 16px;
}

/* ---- 4. Coupon panel ------------------------------------------------- */
/* The cart estimate that used to share these rules is now .order-summary-sidebar,
   the same panel the other three checkout steps put their summary in. */
.coupon-row {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

    .coupon-row label {
        color: var(--text);
    }

    .coupon-row input {
        background: #fff;
        border: 1px solid var(--border-strong);
        color: #1a1a1a;
    }

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: var(--text);
}

.summary-total {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    margin-top: 6px;
}

.summary-muted {
    color: var(--text-muted);
}

/* ---- 5. Accepted-payments row (matches Home, compact for checkout) --- */
.payment-trust-compact {
    padding: 26px 20px 8px;
    border-top: 1px solid var(--border);
    margin-top: 30px;
}

    .payment-trust-compact .payment-trust-label {
        font-size: 12.5px;
        margin-bottom: 12px;
    }

    .payment-trust-compact .payment-trust-item {
        font-size: 22px;
    }

/* ---- 6. Two-column checkout (shipping / billing) -------------------- */
.formFieldContainer {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* Labels were dark (#212529) — invisible on the dark panel. Lighten. */
.form-group label,
.checkout-checkbox,
.shipping-method-heading,
.address-select label {
    color: var(--text);
}

/* .account-card label and .form-group label carry the same weight, so which one
   applied came down to source order: the card's won, and a field label was 13px
   bold grey on the account and sign-in pages but 500-weight body text on
   checkout and in the admin console. The field's own rule decides. */
.account-card .form-group label,
.admin-card .form-group label {
    margin-bottom: 6px;
    font-size: inherit;
    font-weight: 500;
    color: var(--text);
}

/* A <form> inside a card is not a box of its own - the card owns the padding.
   The global `form { padding: 30px }` indented the fields a further 30px, but
   only where the card wraps the form (Login, Register, the account pages) and
   not where the form wraps the card (Product Create). Same field, same classes,
   two different widths, and inside the card the fields sat 30px right of the
   heading above them. */
.account-card form,
.admin-card form {
    padding: 0;
}

.form-group input,
.form-group select,
.form-group textarea,
.address-select select {
    background: #fff;
    border: 1px solid var(--border-strong);
    color: #1a1a1a;
}

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus,
    .coupon-row input:focus {
        outline: none;
        border-color: var(--brand);
        box-shadow: 0 0 0 3px var(--brand-soft);
    }

.address-select {
    border-bottom: 1px solid var(--border);
}

/* Shipping method cards */
.shipping-methods {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-1);
}

.shipping-method-option {
    border-bottom: 1px solid var(--border);
}

.method-name {
    color: var(--text);
}

.method-description {
    color: var(--text-muted);
}

/* Order summary sidebar */
.order-summary-sidebar {
    background: var(--surface-1);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.summary-item {
    border-bottom: 1px solid var(--border);
}

.item-quantity {
    color: var(--text-muted);
}

.sidebar-section {
    border-top: 1px solid var(--border);
}

.same-as-shipping-recap,
.sidebar-address {
    color: var(--text);
}

.same-as-shipping-recap {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.method-line {
    color: var(--text-muted);
}

.secure-checkout {
    border-top: 1px solid var(--border);
    color: var(--success);
}

.edit-link,
.manage-addresses-link {
    color: var(--brand);
}

    .edit-link:hover,
    .manage-addresses-link:hover {
        color: var(--brand-strong);
    }

/* ---- 7. Responsive: collapse the two-column checkout on small screens */
@media (max-width: 900px) {
    .checkout-container {
        grid-template-columns: 1fr;
    }

    .order-summary-sidebar {
        position: static;
    }
}

@media (max-width: 560px) {
    .cart-line {
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "thumb info"
            "controls controls";
    }

    .cart-line-thumb {
        grid-area: thumb;
        width: 72px;
        height: 72px;
    }

    .cart-line-info {
        grid-area: info;
    }

    .cart-line-controls {
        grid-area: controls;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 4px;
    }
}
/* ================= end checkout & cart redesign ====================== */


/* =====================================================================
   PAYMENT PAGE + ORDER CONFIRMATION + DEFAULT BUTTON
   ===================================================================== */

/* ---- Default (bare) button — the "confirmation page" look, refined ----
   These are the plain <button>/<a> controls (Print, Back to Store, and
   generic buttons elsewhere). One clean outlined-teal aesthetic.        */
button {
    background-color: var(--surface-2);
    color: var(--brand);
    font-weight: 600;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}

    button:hover {
        background-color: var(--surface-3);
        border-color: var(--brand-line);
        color: var(--brand);
    }

    button:active {
        transform: translateY(1px);
    }

    button:disabled {
        color: var(--text-dim);
        border-color: var(--border);
        cursor: not-allowed;
    }

/* Note: `.btn` variants (0,1,0) outrank this element selector (0,0,1),
   so Bootstrap-classed buttons keep their own fill automatically. */

.controls a,
.controlsHorizontal a,
.controls button,
.controlsHorizontal button {
    background-color: var(--surface-2);
    color: var(--brand);
    font-weight: 600;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 8px 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}

    .controls a:hover,
    .controlsHorizontal a:hover,
    .controls button:hover,
    .controlsHorizontal button:hover {
        background-color: var(--surface-3);
        border-color: var(--brand-line);
        color: var(--brand);
        text-decoration: none;
    }

/* The 21px of padding dates from when this had a border-bottom to hold off.
   The border went in the redesign and the padding stayed, so every action row
   on the site carried 42px of dead space it no longer needed - most visibly
   between the last field of a form and its submit button. Margins keep the
   row clear of what surrounds it; the padding does nothing. */
.controlsHorizontal {
    border-bottom: none;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    margin: 18px 0;
    padding: 0;
}

/* ---- Payment page fixes -------------------------------------------- */
.payment-security-info {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 13px;
}

.payment-secure-note {
    margin-bottom: 12px;
}

    .payment-secure-note .bi {
        color: var(--success);
    }

.payment-trust-inline {
    justify-content: flex-start;
    gap: 12px;
}

    .payment-trust-inline .payment-trust-item {
        font-size: 22px;
        padding: 0;
    }

/* The Stripe error text and card-errors already themed; keep red readable */
.payment-form #card-errors,
.card-errors {
    color: #fca5a5;
}

/* ---- Saved cards at checkout --------------------------------------- */
.saved-card-list {
    margin-bottom: 20px;
}

.saved-card-heading {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.saved-card-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
}

    .saved-card-option:hover {
        background: var(--surface-3);
    }

    .saved-card-option.selected {
        border-color: var(--border-strong);
        background: var(--surface-3);
    }

.saved-card-label {
    flex: 1;
    color: var(--text);
}

.saved-card-default {
    font-size: 12px;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
}

.save-card-option {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 14px;
}

/* ---- Order confirmation -------------------------------------------- */
.confirmation-view {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.confirmation-hero {
    padding: 20px 16px 30px;
}

.confirmation-logo {
    max-height: 56px;
    margin-bottom: 18px;
}

.confirmation-check {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
}

/* A payment that came back from a redirect unpaid, still settling, or unverifiable. The green
   tick above is reassurance, and showing it over "that payment was not completed" told the
   customer the opposite of the truth. */
.confirmation-check.confirmation-check-pending {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.confirmation-title {
    margin-bottom: 12px;
}

.confirmation-lead {
    color: var(--text-muted);
    font-size: 16px;
    max-width: 620px;
    margin: 6px auto 0;
    line-height: 1.5;
}

.confirmation-card {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 30px;
    text-align: left;
    margin-bottom: 30px;
}

.confirmation-section-title {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    font-size: 20px;
}

.confirmation-subtitle {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.confirmation-meta {
    line-height: 1.9;
    margin-bottom: 26px;
    color: var(--text);
}

    .confirmation-meta strong {
        color: var(--text);
        margin-right: 4px;
    }

.confirmation-block {
    margin-bottom: 26px;
}

.confirmation-totals {
    max-width: 380px;
}

    .confirmation-totals .summary-total {
        border-top: 1px solid var(--border);
        margin-top: 8px;
        padding-top: 10px;
    }

.confirmation-addresses {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.confirmation-address {
    flex: 1;
    min-width: 240px;
}

.confirmation-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

    .confirmation-item:last-child {
        border-bottom: none;
    }

.confirmation-item-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
    flex: 0 0 auto;
}

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

.confirmation-item-info {
    flex: 1;
    min-width: 0;
}

.confirmation-item-name {
    font-weight: 600;
    color: var(--text);
}

.confirmation-item .muted,
.confirmation-view .muted {
    color: var(--text-muted);
    font-size: 14px;
}

.confirmation-item-total {
    text-align: right;
    white-space: nowrap;
    color: var(--text);
}

.confirmation-actions {
    margin: 24px 0 0;
    padding: 0;
    justify-content: flex-start;
}

@media (max-width: 560px) {
    .confirmation-card {
        padding: 22px 18px;
    }
}
/* ================= end payment / confirmation ======================== */


/* ========================= Contact Us page =========================== */
.contact-page {
    color: var(--text);
    padding-bottom: 40px;
}

.contact-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 20px;
}

.contact-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 14px;
}

.contact-eyebrow-dark {
    color: var(--brand-strong);
}

/* ---- Hero ---- */
.contact-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 96px 20px;
    text-align: center;
    overflow: hidden;
}

.contact-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 9, 18, 0.72), rgba(10, 9, 18, 0.86));
}

.contact-hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto;
}

.contact-hero-title {
    font-size: 60px;
    font-weight: 700;
    margin: 0 0 18px;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.contact-hero-subtitle {
    font-size: 20px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
}

/* ---- Ways to reach us ---- */
.contact-methods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.contact-method-card {
    display: flex;
    flex-direction: column;
    padding: 28px 22px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

    .contact-method-card:hover {
        transform: translateY(-5px);
        border-color: var(--brand-line);
        box-shadow: var(--shadow);
    }

.contact-method-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 24px;
    margin-bottom: 18px;
}

.contact-method-title {
    font-size: 19px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--text);
}

.contact-method-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 16px;
    flex: 1;
}

.contact-method-link {
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

    .contact-method-link:hover {
        color: var(--brand-strong);
    }

.contact-method-meta {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-dim);
}

/* ---- Form + aside split ---- */
.contact-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: stretch;
}

.contact-form-panel {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px;
}

.contact-panel-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}

.contact-panel-lead {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 26px;
}

.req-mark {
    color: var(--brand);
}

.contact-optional {
    color: var(--text-dim);
    font-weight: 400;
    font-size: 13px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

    .contact-field label {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 7px;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea {
        width: 100%;
        background: var(--surface-2);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        color: var(--text);
        padding: 11px 13px;
        font-size: 15px;
        transition: border-color var(--ease), box-shadow var(--ease);
    }

    .contact-field textarea {
        resize: vertical;
        min-height: 110px;
    }

        .contact-field input::placeholder,
        .contact-field textarea::placeholder {
            color: var(--text-dim);
        }

        .contact-field input:focus,
        .contact-field select:focus,
        .contact-field textarea:focus {
            outline: none;
            border-color: var(--brand);
            box-shadow: 0 0 0 3px var(--brand-soft);
        }

.contact-form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    font-weight: 600;
}

.contact-privacy-note {
    font-size: 13px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .contact-privacy-note .bi {
        color: var(--success);
    }

/* ---- Aside (team reassurance) ---- */
.contact-aside {
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.contact-aside-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.contact-aside-body {
    padding: 28px;
}

.contact-aside-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 20px;
}

.contact-aside-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .contact-aside-list li {
        display: flex;
        gap: 14px;
        padding: 14px 0;
        border-top: 1px solid var(--border);
        font-size: 14px;
        line-height: 1.5;
        color: var(--text-muted);
    }

        .contact-aside-list li:first-child {
            border-top: none;
            padding-top: 0;
        }

        .contact-aside-list li .bi {
            color: var(--brand);
            font-size: 20px;
            flex: 0 0 auto;
        }

        .contact-aside-list li strong {
            color: var(--text);
        }

/* ---- Departments ---- */
.contact-depts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.contact-dept-card {
    padding: 26px 22px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--ease), background var(--ease);
}

    .contact-dept-card:hover {
        border-color: var(--brand-line);
        background: var(--surface-2);
    }

.contact-dept-icon {
    font-size: 26px;
    color: var(--brand);
    margin-bottom: 14px;
    display: block;
}

.contact-dept-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
}

.contact-dept-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 14px;
}

.contact-dept-link {
    font-weight: 600;
    font-size: 14px;
    color: var(--brand);
    text-decoration: none;
}

    .contact-dept-link:hover {
        color: var(--brand-strong);
        text-decoration: underline;
    }

/* ---- Store ---- */
.contact-store {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 44px;
    align-items: center;
}

.contact-store-img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.contact-store-title {
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 14px;
}

.contact-store-lead {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 24px;
}

.contact-store-details {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

    .contact-store-details li {
        display: flex;
        gap: 14px;
        align-items: flex-start;
        padding: 10px 0;
        font-size: 15px;
        line-height: 1.5;
        color: var(--text);
    }

        .contact-store-details li .bi {
            color: var(--brand);
            font-size: 18px;
            margin-top: 2px;
            flex: 0 0 auto;
        }

.contact-store-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    font-weight: 600;
}

/* ---- FAQ deflector + social ---- */
.contact-faq-cta {
    max-width: 1000px;
}

.contact-faq-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 30px 34px;
    background: var(--brand-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius);
}

.contact-faq-icon {
    font-size: 34px;
    color: var(--brand);
    flex: 0 0 auto;
}

.contact-faq-text {
    flex: 1;
}

.contact-faq-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 4px;
}

.contact-faq-desc {
    font-size: 14.5px;
    color: var(--text-muted);
    margin: 0;
}

.contact-faq-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.contact-social {
    text-align: center;
    margin-top: 40px;
}

.contact-social-label {
    display: block;
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.contact-social-icons {
    display: flex;
    justify-content: center;
    gap: 14px;
}

    .contact-social-icons a {
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--surface-1);
        border: 1px solid var(--border);
        color: var(--text-muted);
        font-size: 20px;
        text-decoration: none;
        transition: transform var(--ease), color var(--ease), border-color var(--ease);
    }

        .contact-social-icons a:hover {
            transform: translateY(-3px);
            color: var(--brand);
            border-color: var(--brand-line);
        }

/* ---- Contact page responsive ---- */
@media (max-width: 960px) {
    .contact-methods-grid,
    .contact-depts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-split,
    .contact-store {
        grid-template-columns: 1fr;
    }

    .contact-hero-title {
        font-size: 44px;
    }
}

@media (max-width: 560px) {
    .contact-section {
        padding: 44px 16px;
    }

    .contact-methods-grid,
    .contact-depts-grid,
    .contact-form-row {
        grid-template-columns: 1fr;
    }

    .contact-hero {
        padding: 66px 18px;
    }

    .contact-hero-title {
        font-size: 36px;
    }

    .contact-hero-subtitle {
        font-size: 17px;
    }

    .contact-form-panel {
        padding: 24px 20px;
    }

    .contact-faq-inner {
        flex-direction: column;
        text-align: center;
    }
}
/* ======================= end Contact Us page ========================= */


/* ===================================================================== H1 */
h1:not([class]),
.page-title {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #f1f1f1;
    margin: 0 0 40px;
}

    h1:not([class])::after,
    .page-title::after {
        content: '';
        display: block;
        width: 64px;
        height: 3px;
        margin: 14px auto 0;
        border-radius: 3px;
        background: linear-gradient(90deg, #2c4973, #3d6bb0);
    }

/* Default (unclassed) links picked up Bootstrap's blue (#0d6efd) — "Manage",
   "Register", "View order", etc. — clashing with the teal theme. Anything
   with its own class (nav-link, .controls a, .cart-item-link, .simpleLink,
   the checkout link helpers) keeps its styling; only bare links change. */
a:not([class]) {
    color: var(--brand);
    text-decoration: none;
}

    a:not([class]):hover {
        color: var(--brand-strong);
        text-decoration: underline;
    }

/* The details/edit panes sit on a light cream surface, so keep their links
   the original dark blue (teal would be low-contrast there). */
.detailsPane a,
.editPane a {
    color: #0a25a5;
}


/* =====================================================================
   PRODUCT CARD + PRODUCT PAGE
   Written against the design tokens rather than the older hard-coded
   greys, since these are new surfaces with no legacy to match.
   ===================================================================== */

/* ---- The grid ------------------------------------------------------- */
/* Grid rather than the old flexbox: with `flex: 1 1 33%` a final row of
   one product stretched that card across the full width. auto-fill keeps
   every card the same size no matter how many are in the last row.      */
/* Width and page padding belong to the section holding the grid (the home
   strip, the shop results, the related row), so the grid can be dropped
   into any of them without doubling their gutters. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    width: 100%;
}

/* ---- The card ------------------------------------------------------- */
.product-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color var(--ease);
}

    .product-card:hover {
        transform: translateY(-6px);
        border-color: var(--border-strong);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    }

    /* Sold out is stated in words on the card; the fade is the second,
       faster signal that stops a shopper reaching for the button.       */
    .product-card-sold-out .product-card-media {
        opacity: 0.55;
    }

.product-card-media {
    position: relative;
    background: var(--surface-2);
}

.product-card-image-link {
    display: block;
    text-decoration: none;
}

.product-card:hover .square-wrapper img {
    transform: scale(1.05);
}

/* ---- Badges --------------------------------------------------------- */
/* Stacked top-left, out of the way of the heart on the right.           */
.product-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
}

.product-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.product-badge-sale {
    background: var(--danger);
    color: #ffffff;
}

.product-badge-new {
    background: var(--brand);
    color: var(--brand-ink);
}

.product-badge-out {
    background: rgba(0, 0, 0, 0.75);
    color: var(--text);
    border: 1px solid var(--border-strong);
}

/* ---- The heart ------------------------------------------------------ */
.product-card-wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(0, 0, 0, 0.55);
    color: var(--text);
    font-size: 16px;
    backdrop-filter: blur(2px);
}

    .product-card-wish:hover {
        background: rgba(0, 0, 0, 0.75);
        border-color: var(--brand-line);
        color: var(--brand);
    }

    .product-card-wish.saved,
    .product-card-wish.saved:hover {
        color: var(--danger);
        border-color: rgba(239, 68, 68, 0.55);
    }

/* ---- Body ----------------------------------------------------------- */
.product-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px 16px;
    /* Pushes the price/stock/button block to the bottom so cards of
       differing name and description lengths still line up.            */
    flex: 1 1 auto;
}

.product-card-category {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-dim);
}

.product-card-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

    .product-card-name a {
        color: var(--text);
        text-decoration: none;
    }

        .product-card-name a:hover {
            color: var(--brand);
        }

/* Two lines, then an ellipsis: a long description must not make one card
   twice the height of the one beside it. */
.product-card-description {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The price is the first of the bottom block; margin-top auto pins that
   block to the foot so cards with different name lengths still line up. */
.product-card-price {
    margin: auto 0 0;
    padding-top: 6px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}

.product-price-now {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.product-price-was {
    font-size: 14px;
    color: var(--text-dim);
}

/* ---- Stock wording -------------------------------------------------- */
/* One vocabulary for stock, shared by the card and the product page.    */
.product-card-stock,
.pdp-stock {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

.stock-in {
    color: var(--success);
}

.stock-low {
    color: #fbbf24;
}

.stock-out {
    color: var(--text-dim);
}

.product-card-actions {
    margin-top: 10px;
}

.product-card-add {
    width: 100%;
    padding: 9px 14px;
    font-size: 14px;
}

/* ---- Home strip ----------------------------------------------------- */
.featured-products-more {
    text-align: center;
    margin: 32px 0 0;
}

/* ---- Shop toolbar: sort --------------------------------------------- */
.shop-sort {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-sort-label {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* The native arrow sits hard against the pill's curve, so it is replaced by a
   chevron we can inset ourselves. */
.shop-sort-select {
    height: 42px;
    min-width: 190px;
    padding: 0 40px 0 18px;
    border: 1px solid #555555;
    border-radius: 21px;
    background-color: #222222;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23d5d5d5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    color: whitesmoke;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    .shop-sort-select:focus {
        outline: none;
        border-color: #3d6bb0;
    }

/* =====================================================================
   PRODUCT PAGE (#/Summary/Product/:id)
   ===================================================================== */
.pdp {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

.pdp-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 20px 0;
}

.pdp-breadcrumb {
    font-size: 13px;
    color: var(--text-dim);
}

.pdp-back {
    padding: 6px 16px;
    font-size: 14px;
    white-space: nowrap;
}

    .pdp-breadcrumb a {
        color: var(--text-muted);
        text-decoration: none;
    }

        .pdp-breadcrumb a:hover {
            color: var(--brand);
        }

.pdp-breadcrumb-separator {
    margin: 0 8px;
    color: var(--text-dim);
}

.pdp-breadcrumb-current {
    color: var(--text);
}

/* Image and buy box side by side, and stacked once there is no room for
   both — the buy box must never be squeezed to a column of wrapped words. */
.pdp-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    margin-top: 16px;
}

/* ---- Gallery -------------------------------------------------------- */
.pdp-gallery-main {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.pdp-gallery-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
}

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

.pdp-gallery-thumb {
    width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
}

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

    .pdp-gallery-thumb:hover {
        border-color: var(--border-strong);
    }

    .pdp-gallery-thumb.active {
        border-color: var(--brand);
    }

/* ---- Buy box -------------------------------------------------------- */
.pdp-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pdp-category {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-dim);
    text-decoration: none;
}

    .pdp-category:hover {
        color: var(--brand);
    }

.pdp-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
}

.pdp-item-code {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
}

.pdp-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin: 4px 0 0;
}

.pdp-price-now {
    font-size: 30px;
    font-weight: 700;
    color: var(--text);
}

.pdp-price-was {
    font-size: 17px;
    color: var(--text-dim);
}

.pdp-price-save {
    font-size: 13px;
    font-weight: 700;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 999px;
    padding: 3px 10px;
}

.pdp-tax-note {
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
}

.pdp-description {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ---- Quantity + actions --------------------------------------------- */
.pdp-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.pdp-quantity-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.pdp-quantity-stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
}

.pdp-quantity-step {
    width: 38px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--brand);
    font-size: 18px;
    line-height: 1;
}

    .pdp-quantity-step:hover {
        background: var(--surface-3);
    }

/* The number is typed as well as stepped, so the field stays a real input
   with its spinner removed — two sets of arrows on one control is noise. */
.pdp-quantity-input {
    width: 56px;
    height: 40px;
    min-width: 0;
    padding: 0;
    border: none;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    -moz-appearance: textfield;
}

    .pdp-quantity-input::-webkit-outer-spin-button,
    .pdp-quantity-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.pdp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 260px;
}

.pdp-add {
    flex: 1 1 180px;
    padding: 11px 20px;
    font-size: 15px;
}

.pdp-wish {
    padding: 11px 18px;
    font-size: 14px;
}

    .pdp-wish.saved {
        color: #fca5a5;
        border-color: rgba(239, 68, 68, 0.5);
    }

/* ---- Assurances ----------------------------------------------------- */
.pdp-assurances {
    list-style: none;
    margin: 8px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .pdp-assurances li {
        display: flex;
        align-items: baseline;
        gap: 10px;
        font-size: 13px;
        color: var(--text-muted);
    }

    .pdp-assurances i {
        color: var(--brand);
        font-size: 15px;
    }

    .pdp-assurances strong {
        color: var(--text);
        font-weight: 600;
    }

/* ---- Details + related ---------------------------------------------- */
.pdp-details {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

.pdp-details-title,
.pdp-related-title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.pdp-details-description {
    margin: 0 0 24px;
    max-width: 80ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted);
}

.pdp-spec-list {
    margin: 0;
    max-width: 560px;
}

.pdp-spec {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

    .pdp-spec dt {
        flex: 0 0 160px;
        color: var(--text-muted);
        font-weight: 600;
    }

    .pdp-spec dd {
        margin: 0;
        color: var(--text);
    }

.pdp-related {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
    .pdp-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .pdp-title {
        font-size: 25px;
    }

    .pdp-price-now {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
    }

    .shop-sort {
        width: 100%;
    }

    .shop-sort-select {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* =====================================================================
   SHORT CENTRED FORMS (#/Login, #/Register, the #/TrackOrder lookup)
   The same centred single-column shape the password-reset page already used,
   so the whole sign-in flow reads as one screen. The guest order lookup is
   the same thing - a couple of fields and a button in one card - so it shares
   these rules rather than restating them.

   The fields inside are plain .form-group, the same as checkout and the admin
   console: these pages used to carry their own .auth-field, which is a bare
   div, so the inputs fell through to the legacy `input` rule and were 32px
   tall at 14pt with a 3px radius while every other form on the site was auto
   height at 15px with a 6px radius.
   ===================================================================== */
.form-column {
    max-width: 520px;
    margin: 18px auto 0;
}

    /* .account-card caps fields at 349px, which leaves them short of the card's
       right edge in this narrower column. */
    .form-column .form-group input,
    .form-column .form-group select,
    .form-column .form-group textarea {
        max-width: none;
    }

/* A row of actions at the foot of a form card. Deliberately not
   .controlsHorizontal: that styles its links as buttons, and the sign-in
   card's "Forgot your password?" is a link. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

    .form-actions a {
        font-size: 14px;
    }

.auth-register {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 15px;
    color: var(--text);
}

.auth-register-arrow {
    width: 110px;
    height: auto;
    flex: none;
}

@media (max-width: 600px) {
    .form-actions {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

/* Below this the question + arrows + link no longer fit on one line. The
   arrows stay - the question moves to its own line above, so they still run
   left-to-right into the link rather than being dropped. */
@media (max-width: 520px) {
    .auth-register span {
        flex: 0 0 100%;
        text-align: center;
        margin-bottom: 2px;
    }

    .auth-register-arrow {
        width: 84px;
    }
}

/* =====================================================================
   TRACK ORDER (#/TrackOrder)
   The lookup card, the panels the result opens and their button rows all
   reuse what already exists - .form-column and .form-actions above,
   .account-card supplies the panels, .accountError the messages. What the
   view had no equivalent for is a page column: the heading and back link ran
   the full window width while .order-details-container capped itself at
   1100px and centred, so on a wide monitor the title sat well to the left of
   the order it titled.
   ===================================================================== */
.track-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 12px;
}

    /* .order-details-container centres and pads itself for the views that use
       it stand-alone. Inside the shared column that inset the grid a second
       time, leaving the result narrower than the heading above it. */
    .track-page .order-details-container {
        max-width: none;
        margin: 0;
        padding: 0;
    }

/* .controlsHorizontal has been a flex row with its own gap since the redesign,
   so this margin no longer separates anything - it just indents the first item
   of every row by 9px, out of line with the heading or panel above it.
   .controls is untouched: it is still a plain block, where the margin is the
   only thing holding its items apart. */
.controlsHorizontal a,
.controlsHorizontal button {
    margin-left: 0;
}

/* Shared with the order, admin-order and return detail views, which lay the
   sidebar out the same way: .summary-total is declared twice and the later of
   the two drops the flex the rows above it use, so the Total alone lost its
   right-aligned amount and collapsed to "Total: $12.34". */
.order-totals .summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

/* A disabled field still has to READ. The browser default greys the value against a grey box, so
   the return form's prefilled quantity looked like an empty input — i.e. like nothing on the row
   was on offer. Scoped to these tables so the legacy white forms keep their own disabled styling. */
.ordersTable input:disabled,
.ordersTable select:disabled {
    opacity: 1;
    color: var(--text-muted);
    background-color: var(--surface-2);
    border: 1px solid var(--border);
    cursor: not-allowed;
}

/* Secondary explanatory text. Sized here rather than per-panel so the return forms, the exchange
   picker and the confirmation views all read the same. */
.muted {
    font-size: 13px;
    color: var(--text-muted);
}

/* ----- Exchange picker (return forms, customer + guest) -----
   Refund is the default, so the picker stays collapsed until someone asks to swap a line. */
.exchange-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

    .exchange-toggle input {
        /* The global input rule sets a 282px min-width, which would push this checkbox and its
           label right out of the table cell. */
        min-width: 0;
        width: auto;
        margin: 0;
    }

.exchange-picker {
    margin-top: 8px;
    padding: 10px;
    border-radius: 6px;
    background-color: var(--surface-2);
    border: 1px solid var(--border);
}

    .exchange-picker select {
        min-width: 0;
        width: 100%;
        max-width: 320px;
    }

    .exchange-picker .muted {
        margin: 6px 0 0;
        font-size: 12px;
        color: var(--text-muted);
    }