/* =========================================================
   GLOBAL UI SYSTEM
   ========================================================= */

body {
    font-family: Arial, sans-serif;
    color: #000000;
} 


/* =========================================================
   ACCESSIBILITY / CRAWLABLE SUPPORT TEXT
   =========================================================

   Use this for honest support text that should be available to
   screen readers and crawlers without changing the compact visual
   catalogue layout. Do not use it to hide misleading or keyword-
   stuffed content.

   Activity logging note:
   - CSS helpers should not write logs.
   - Log the admin action that changes the underlying product or SEO data.
   ========================================================= */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================================
   BUTTONS
   =========================================================

   The legacy W. W. Doak storefront uses a distinctive blue,
   rounded, shadowed button treatment. This shared UI rule keeps
   that look available across normal <button> elements, .button
   links, and submit inputs.

   Activity logging note:
   - Button CSS should not write logs.
   - Add logs in the PHP controller/JavaScript action that handles
     an important click, such as CartController::add(), checkout
     submission, or modal open/submit behavior.
   ========================================================= */

button,
.button,
input[type="submit"] {
    /* Keep buttons usable on both <button> tags and <a class="button"> links. */
    display: inline-block;
    box-sizing: border-box;
    

    /* Required for the pressed-button movement in the :active state below. */
    position: relative;

    /* Legacy blue pill background. The solid colour is the base layer before the gradient. */
    background: var(--wwd-colour-dark-blue);
    background: -webkit-linear-gradient(var(--wwd-colour-button-gradient-edge), var(--wwd-colour-dark-blue) 50%, var(--wwd-colour-button-gradient-edge));
    background: var(--wwd-button-gradient);

    /* Legacy black outline and rounded corners. */
    border: 1px solid var(--wwd-colour-black);
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;

    /* Legacy button face size. Page-specific CSS may override this for larger controls. */
    padding: 2px 8px;

    /* Legacy typography. Arial is retained as a safe fallback if Calibri is unavailable. */
    color: var(--wwd-colour-white);
    font: normal 700 14px/1 "Calibri", Arial, sans-serif;
    text-align: center;
    text-shadow: -2px 2px var(--wwd-colour-black);
    text-decoration: none;

    /* Legacy raised-button shadow. */
    -webkit-box-shadow: -3px 3px var(--wwd-colour-button-shadow);
    -moz-box-shadow: -3px 3px var(--wwd-colour-button-shadow);
    box-shadow: -3px 3px var(--wwd-colour-button-shadow);

    /* Prevent accidental text selection while repeatedly clicking small order buttons. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    cursor: pointer;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    /* Preserve the legacy hover appearance while using the central light-blue token. */
    background: var(--wwd-colour-light-blue);
    background: -webkit-linear-gradient(var(--wwd-colour-button-gradient-edge), var(--wwd-colour-light-blue) 50%, var(--wwd-colour-button-gradient-edge));
    background: var(--wwd-button-hover-gradient);

    color: var(--wwd-colour-white);
    text-align: center;
    text-shadow: -2px 2px var(--wwd-colour-black);
    text-decoration: none;
}

button:active,
.button:active,
input[type="submit"]:active {
    /* Legacy pressed state: remove the shadow and move the button into the shadow space. */
    -webkit-box-shadow: 0 0 var(--wwd-colour-button-shadow);
    -moz-box-shadow: 0 0 var(--wwd-colour-button-shadow);
    box-shadow: 0 0 var(--wwd-colour-button-shadow);

    top: 3px;
    left: -3px;
}

button:disabled,
button[disabled],
input[type="submit"]:disabled,
input[type="submit"][disabled],
.button.disabled,
.button[aria-disabled="true"] {
    /* Disabled controls should keep the same family look but not appear clickable. */
    opacity: 0.55;
    cursor: not-allowed;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    top: 0;
    left: 0;
}

/*
   Backward compatibility class from the legacy storefront.
   New markup can simply use .button, but old copied markup using
   .button.buttonAction will still render correctly.
*/
.buttonAction {
    -webkit-box-shadow: -3px 3px var(--wwd-colour-button-shadow);
    -moz-box-shadow: -3px 3px var(--wwd-colour-button-shadow);
    box-shadow: -3px 3px var(--wwd-colour-button-shadow);
}

.buttonAction:hover {
    color: var(--wwd-colour-white);
    display: inline-block;
    font: normal 700 15px/1 "Calibri", Arial, sans-serif;
    text-align: center;
    text-shadow: -2px 2px var(--wwd-colour-black);
    text-decoration: none;
}

.buttonAction:active:hover {
    -webkit-box-shadow: 0 0 var(--wwd-colour-button-shadow);
    -moz-box-shadow: 0 0 var(--wwd-colour-button-shadow);
    box-shadow: 0 0 var(--wwd-colour-button-shadow);

    top: 3px;
    left: -3px;
}

/* =========================================================
   FORM ELEMENTS
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    width: 100%;

    padding: 10px;

    border: 1px solid #c0c0c0;

    font-size: 14px;

    box-sizing: border-box;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

label {
    display: block;

    margin-top: 16px;
    margin-bottom: 6px;

    font-weight: bold;
}

/* =========================================================
   TABLES
   ========================================================= */

table {
    width: 100%;

    border-collapse: collapse;

    margin-bottom: 20px;
}

th,
td {
    padding: 10px;

    border: 1px solid #d0d0d0;

    text-align: left;
    vertical-align: top;
}

th {
    background: #f5f5f5;
}

/* =========================================================
   NOTICES
   ========================================================= */

.notice {
    padding: 12px;
    margin-bottom: 20px;

    background: #fff8d8;
    border: 1px solid #e0d28a;
}

.success {
    padding: 12px;
    margin-bottom: 20px;

    background: #e5f7e5;
    border: 1px solid #9fd09f;
}

/* =========================================================
   MOBILE REFINEMENTS
   ========================================================= */

@media (max-width: 768px) {

    body {
        font-size: 15px;
    }

    button,
    .button,
    input[type="submit"] {
        /*
            Desktop product/order buttons are intentionally compact at 14px.
            On phones the same legacy button face is easier to tap and read at
            17px, especially inside stacked technical-table product cards.
        */
        width: 100%;
        font: normal 700 17px/1 "Calibri", Arial, sans-serif;
    }

    th,
    td {
        padding: 8px;
    }
}

/* =========================================================
   CART / CHECKOUT ORDER FLOW
   =========================================================

   These rules format the customer order path from cart review through final
   order submission. The layout card itself is created by layout.css; this file
   handles the tables, forms, address panels, summary areas, and action rows
   inside that card.

   Activity logging note:
   - CSS does not write logs.
   - Cart update/remove clicks should continue to be logged in CartController.
   - Checkout address, shipping, payment, and submit actions should continue to
     be logged in CheckoutController where the request changes durable state.
   ========================================================= */

.page--order-flow h1 {
    margin: 0 0 18px;
    padding: 0 0 12px;
    color: var(--wwd-colour-dark-blue);
    border-bottom: 2px solid #d7dce2;
    font-size: 28px;
    font-weight: 700;
}

.page--order-flow h2 {
    margin: 24px 0 12px;
    padding: 0 0 8px;
    color: var(--wwd-colour-dark-blue);
    border-bottom: 1px solid #dbe0e5;
    font-size: 20px;
    font-weight: 700;
}

.page--order-flow p {
    line-height: 1.45;
}

.page--order-flow .notice,
.page--order-flow .success {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 8px;
}

.page--order-flow table {
    width: 100%;
    margin: 10px 0 20px;
    border-collapse: collapse;
    background: var(--wwd-colour-white);
    border: 1px solid #d6dbe1;
    font-size: 14px;
}

.page--order-flow th {
    padding: 10px 11px;
    background: #f3f5f7;
    color: var(--wwd-colour-dark-blue);
    border: 1px solid #d6dbe1;
    font-weight: 700;
    text-align: left;
}

.page--order-flow td {
    padding: 10px 11px;
    border: 1px solid #e0e4e8;
    vertical-align: middle;
}

.page--order-flow tbody tr:nth-child(even) td {
    background: #fafbfc;
}

.page--order-flow table small {
    color: #555;
}

.page--order-flow table form {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;
}

.page--order-flow table input[type="number"] {
    width: 72px;
    min-width: 72px;
    text-align: center;
}

.page--order-flow table button {
    width: auto;
    white-space: nowrap;
}

.cart-subtotal,
.checkout-subtotal {
    margin: 18px 0 8px;
    padding-top: 12px;
    border-top: 2px solid #d7dce2;
    color: var(--wwd-colour-dark-blue);
    font-size: 23px;
    font-weight: 700;
    text-align: right;
}

.cart-actions,
.checkout-actions,
.page--order-flow form > p:last-child {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid #d7dce2;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

.cart-actions {
    justify-content: space-between;
}

.cart-shipping-estimate {
    margin: 20px 0 18px;
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
    gap: 18px;
    border: 1px solid #d6dbe1;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fa 100%);
}

.cart-shipping-estimate h2,
.cart-shipping-estimate h3 {
    margin-top: 0;
}

.cart-shipping-estimate-form-panel,
.cart-shipping-estimate-result {
    min-width: 0;
}

.cart-shipping-estimate-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.cart-shipping-estimate-form label {
    color: var(--wwd-colour-dark-blue);
    font-weight: 700;
}

.cart-shipping-estimate-form input[type="text"] {
    width: 150px;
    max-width: 100%;
    text-transform: uppercase;
}

.cart-shipping-estimate-help,
.cart-shipping-estimate-note {
    margin: 10px 0 0;
    color: #555;
    font-size: 14px;
}

.cart-shipping-estimate-result {
    padding: 14px;
    border: 1px solid rgba(var(--wwd-colour-dark-blue-rgb), 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
}

.cart-shipping-estimate-result dl {
    margin: 0;
}

.cart-shipping-estimate-result dl > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #e3e7eb;
}

.cart-shipping-estimate-result dl > div:last-child {
    border-bottom: none;
}

.cart-shipping-estimate-result dt {
    color: var(--wwd-colour-dark-blue);
    font-weight: 700;
}

.cart-shipping-estimate-result dd {
    margin: 0;
    text-align: right;
}

.cart-shipping-estimate-total-row {
    margin-top: 4px;
    padding-top: 10px !important;
    color: var(--wwd-colour-dark-blue);
    font-size: 18px;
    font-weight: 700;
}

.page--order-flow .button,
.page--order-flow button,
.page--order-flow input[type="submit"] {
    min-width: 145px;
}

.page--order-flow table .button,
.page--order-flow table button,
.page--order-flow table input[type="submit"] {
    min-width: 0;
}

.checkout-form {
    max-width: none;
}

.checkout-section {
    margin-bottom: 30px;
}

.checkout-section h2 {
    margin-bottom: 14px;
}

/* =========================================================
   CHECKOUT ADDRESS FORM
   ========================================================= */

.checkout-address-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 10px;
}

.checkout-address-panel {
    min-width: 0;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #d6dbe1;
    border-radius: 10px;
}

.checkout-address-panel h2 {
    margin-top: 0;
    padding-bottom: 8px;
    font-size: 18px;
}

.form-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.form-row label {
    margin: 0;
    color: #111;
    font-weight: 700;
}

.page--order-flow form > label {
    display: block;
    max-width: 520px;
    margin: 14px 0 6px;
    color: var(--wwd-colour-dark-blue);
    font-weight: 700;
}

.page--order-flow form > select {
    max-width: 520px;
}

.form-row input,
.form-row select,
.form-row textarea,
.payment-fields input,
.payment-fields select,
.page--order-flow input[type="text"],
.page--order-flow input[type="email"],
.page--order-flow select,
.page--order-flow textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 7px 9px;
    background: #ffffff;
    border: 1px solid #bfc6cf;
    border-radius: 4px;
    font: inherit;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
.payment-fields input:focus,
.payment-fields select:focus,
.page--order-flow input[type="text"]:focus,
.page--order-flow input[type="email"]:focus,
.page--order-flow select:focus,
.page--order-flow textarea:focus {
    outline: 2px solid rgba(var(--wwd-colour-dark-blue-rgb), 0.22);
    border-color: var(--wwd-colour-dark-blue);
}

.same-address-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 14px;
    font-weight: 700;
}

.same-address-row input {
    width: auto;
    min-height: 0;
}

.comments-row {
    max-width: 820px;
    margin: 20px auto 0;
}

.comments-row textarea {
    min-height: 105px;
}

.checkout-section form > button[type="submit"],
.checkout-form form > button[type="submit"] {
    display: block;
    margin: 24px 0 0 auto;
}

/* =========================================================
   SHIPPING / PAYMENT / SUCCESS CLEANUP
   ========================================================= */

.page--checkout form > h2:first-of-type,
.page--checkout h2:first-of-type {
    margin-top: 18px;
}

.shipping-option-radio {
    margin-right: 8px;
}

.payment-fields {
    max-width: 520px;
    margin: 16px 0 18px;
    padding: 16px;
    background: #f9fafb;
    border: 1px solid #d6dbe1;
    border-radius: 10px;
}

.payment-fields label {
    display: block;
    margin: 12px 0 5px;
    color: var(--wwd-colour-dark-blue);
    font-weight: 700;
}

.payment-fields label:first-child {
    margin-top: 0;
}

.payment-fields button {
    margin-top: 12px;
}

.payment-field-help {
    display: block;
    margin: 4px 0 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.35;
}

.payment-expiry-fields {
    /*
        The checkout view submits month/year as separate POST fields, but this
        row presents them as one MM/YY control. Browser-only movement between
        fields is handled in checkout.js; final validation and activity logging
        remain in CheckoutController.
    */
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 170px;
}

.payment-fields .payment-expiry-fields input {
    width: 58px;
    min-width: 58px;
    text-align: center;
}

.payment-expiry-separator {
    color: var(--wwd-colour-dark-blue);
    font-weight: 700;
    line-height: 1;
}

.page--order-flow em {
    color: #555;
}

.cart-inventory-warning,
.cart-inventory-feedback {
    display: block;
    margin-top: 6px;
}

@media (max-width: 900px) {
    .checkout-address-layout {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 118px minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    /*
        Preserve the previous mobile behavior for wide tables throughout the
        storefront. Order-flow tables receive additional cleanup below.
    */
    table {
        display: block;
        overflow-x: auto;
    }

    .page--order-flow h1 {
        font-size: 24px;
    }

    .page--order-flow table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cart-actions,
    .checkout-actions,
    .page--order-flow form > p:last-child {
        flex-direction: column;
        align-items: stretch;
    }

    .cart-shipping-estimate {
        grid-template-columns: 1fr;
    }

    .cart-shipping-estimate-form {
        align-items: stretch;
    }

    .cart-shipping-estimate-form input[type="text"] {
        width: 100%;
    }

    .cart-subtotal,
    .checkout-subtotal {
        text-align: left;
    }

    .page--order-flow .button,
    .page--order-flow button,
    .page--order-flow input[type="submit"] {
        width: 100%;
    }

    .page--order-flow table button,
    .page--order-flow table input[type="submit"] {
        width: auto;
        font-size: 14px;
    }

    .page--order-flow table form {
        flex-wrap: nowrap;
    }
}

@media (max-width: 560px) {
    .checkout-address-panel {
        padding: 12px;
    }

    .form-row {
        display: block;
    }

    .form-row label {
        display: block;
        margin-bottom: 5px;
    }

    .comments-row {
        margin-top: 16px;
    }
}

/* =========================================================
   ORDER VIEWER SPLIT LAYOUT
   ========================================================= */

/*
   =========================================================
   PROTECTED VIEW ORDERS AUTHENTICATION
   =========================================================

   Activity-log note:
   These styles are passive presentation only. Login success/failure and logout
   events are logged by OrdersLoginController; routine rendering is not logged.
*/
.orders-login-shell {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 36px 16px;
}

.orders-login-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 460px;
    padding: 26px;
    border: 1px solid rgba(33, 54, 99, 0.35);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.orders-login-card h1 {
    margin-top: 0;
}

.orders-login-intro {
    margin: 0 0 20px;
}

.orders-login-form {
    display: grid;
    gap: 10px;
}

.orders-login-form input[type="text"],
.orders-login-form input[type="password"] {
    width: 100%;
}

.orders-login-form .button {
    justify-self: start;
    margin-top: 8px;
}

.orders-viewer-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.orders-viewer-heading h1 {
    margin-bottom: 3px;
}

.orders-viewer-signed-in {
    margin: 0;
    font-size: 0.92rem;
    color: #4b5563;
}

.orders-viewer-logout-form {
    flex: 0 0 auto;
    margin: 4px 0 0;
}

@media (max-width: 600px) {
    .orders-viewer-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .orders-viewer-logout-form .button {
        width: 100%;
    }
}

.orders-split-layout {
    display: grid;
    grid-template-columns: minmax(520px, 48%) minmax(420px, 52%);
    gap: 18px;
    align-items: start;
}

.orders-list-pane,
.orders-detail-pane {
    overflow-x: auto;
}

.orders-detail-pane {
    border: 1px solid #d0d0d0;
    background: #fff;
    padding: 12px;
}

/*
    Structural wrapper for wide tables inside the selected order. It is inert on
    desktop; the mobile breakpoint below turns it into the horizontal scroll
    surface so the entire page does not become wider than the viewport.

    Activity-log note:
    This is display-only CSS. Durable order actions and failures continue to be
    logged by OrdersController and the existing order/inventory workflows.
*/
.orders-detail-table-scroll {
    max-width: 100%;
}

.orders-list-table {
    font-size: 13px;
}

/*
    Prominent operational warning for orders that were accepted even though the
    secondary inventory-decrement workflow failed. The order remains valid; the
    warning tells staff to process it and correct stock manually.

    Activity-log note:
    This is display-only. The durable failure is logged by CheckoutController.
*/
.order-inventory-failure-alert {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 14px 0;
    padding: 12px 14px;
    border: 2px solid #9a6400;
    border-radius: 8px;
    background: #fff4cc;
    color: #4d3500;
}

.order-inventory-failure-alert strong {
    font-size: 1.08rem;
}

.order-inventory-status {
    margin: 12px 0;
    padding: 10px 12px;
    border: 1px solid #d0d0d0;
    background: #f8f8f8;
}


.order-gift-card-pending-alert {
    margin: 12px 0 16px;
    padding: 14px 16px;
    border: 2px solid #b00020;
    background: #fff4f4;
    color: #5f0010;
    font-size: 16px;
    line-height: 1.4;
}

.order-gift-card-pending-alert strong {
    display: block;
    margin-bottom: 4px;
    font-size: 20px;
    text-transform: uppercase;
}

.order-gift-card-pending-list {
    margin: 8px 0 0 20px;
    padding: 0;
}

.order-gift-card-used-pending-row {
    background: #fff4f4;
}

.order-gift-card-cancelled-alert {
    margin: 12px 0 16px;
    padding: 16px 18px;
    border: 3px solid #8a0000;
    background: #ffe2e2;
    color: #4a0000;
    font-size: 17px;
    line-height: 1.45;
}

.order-gift-card-cancelled-alert strong {
    display: block;
    margin-bottom: 6px;
    font-size: 22px;
    text-transform: uppercase;
}

.order-gift-card-used-cancelled-row {
    background: #ffe2e2;
}

.order-gift-card-used-cancelled-row td {
    border-top: 2px solid #8a0000;
    border-bottom: 2px solid #8a0000;
}

.order-e-gift-card-recipient-form,
.order-e-gift-card-resend-form {
    margin: 0 0 8px;
}

.order-e-gift-card-recipient-form label {
    display: block;
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
}

.order-e-gift-card-recipient-form input {
    display: block;
    width: 100%;
    min-width: 170px;
    box-sizing: border-box;
    margin-top: 2px;
    padding: 4px 6px;
    font-size: 13px;
}

.order-e-gift-card-action-help {
    display: block;
    max-width: 260px;
    color: #555555;
}

.order-cancel-form {
    margin: 14px 0 18px;
    padding: 12px;
    border: 1px solid #d0d0d0;
    background: #fffdf4;
}

.order-cancel-form textarea {
    min-height: 72px;
    margin-bottom: 10px;
}

.order-cancel-help {
    margin: 10px 0 0;
    font-size: 13px;
}

.order-unviewed {
    font-weight: bold;
}

.order-selected {
    background: #f3f3f3;
}

@media (max-width: 1000px) {

    /*
        On the stacked phone/tablet layout, show the selected order before the
        order list so staff immediately see the order they opened. Desktop keeps
        the original two-column list-left/detail-right grid above this breakpoint.

        Activity-log note:
        This is display-only responsive ordering and does not change or log any
        order, viewed-status, filter, authentication, or customer data.
    */
    .orders-split-layout {
        display: flex;
        flex-direction: column;

        /* Prevent a wide child table from establishing a page-wide minimum. */
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .orders-detail-pane,
    .orders-list-pane {
        /*
            Flex items default to min-width:auto, which can preserve a table's
            desktop minimum width and push the right side beyond the phone.
        */
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .orders-detail-pane {
        order: 1;
        margin-bottom: 18px;

        /*
            Individual table wrappers handle side-to-side movement on mobile.
            Keep ordinary prose breakable, but do not force every table word to
            split at arbitrary letters; table cells receive explicit rules below.
        */
        overflow-x: hidden;
        overflow-wrap: break-word;
    }

    .orders-list-pane {
        order: 2;
    }

    .orders-detail-table-scroll {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    /*
        Override the generic mobile table display:block rule inside these
        dedicated wrappers. The wrapper becomes the single, reliable scroll
        surface, allowing normal one-finger horizontal swiping on Android/iOS.
    */
    .orders-detail-table-scroll > table {
        display: table;
        width: max-content;
        min-width: 100%;
        max-width: none;
        margin-bottom: 0;
        overflow: visible;
        table-layout: auto;
    }

    /*
        Preserve readable column widths instead of squeezing every table into the
        phone viewport. The surrounding .orders-detail-table-scroll element is
        the horizontal scroll surface, so these widths remain usable with a
        normal one-finger swipe.

        Activity-log note:
        These are presentation-only widths. No order, gift-card, inventory,
        authentication, or staff-action data is changed or logged here.
    */
    .orders-detail-table-scroll > table th,
    .orders-detail-table-scroll > table td {
        word-break: normal;
        overflow-wrap: normal;
        hyphens: manual;
    }

    .orders-detail-table-scroll > table th {
        white-space: nowrap;
    }

    .orders-detail-table-scroll--items > table {
        width: 760px;
    }

    .orders-detail-table-scroll--online-gift-cards > table {
        width: 1500px;
    }

    .orders-detail-table-scroll--online-gift-cards > table th:nth-child(2),
    .orders-detail-table-scroll--online-gift-cards > table td:nth-child(2) {
        min-width: 190px;
    }

    .orders-detail-table-scroll--online-gift-cards > table th:nth-child(7),
    .orders-detail-table-scroll--online-gift-cards > table td:nth-child(7) {
        min-width: 180px;
    }

    .orders-detail-table-scroll--online-gift-cards > table th:nth-child(8),
    .orders-detail-table-scroll--online-gift-cards > table td:nth-child(8) {
        min-width: 330px;
    }

    .orders-detail-table-scroll--online-gift-cards > table th:nth-child(9),
    .orders-detail-table-scroll--online-gift-cards > table td:nth-child(9) {
        min-width: 170px;
    }

    .orders-detail-table-scroll--online-gift-cards > table th:nth-child(10),
    .orders-detail-table-scroll--online-gift-cards > table td:nth-child(10) {
        min-width: 220px;
    }

    .orders-detail-table-scroll--totals > table {
        width: 560px;
    }

    .orders-detail-table-scroll--gift-cards-used > table {
        width: 820px;
    }
}

/*
    Disabled button-style control.

    Used when an action must remain visually aligned with normal legacy-style
    buttons, but must not behave as a clickable link. Example: checkout is
    blocked while cart quantities exceed effective inventory.
*/
.button-disabled,
.button-disabled:hover,
.button-disabled:focus {
    cursor: not-allowed;
    opacity: 0.55;
    text-decoration: none;
}

/*
    Inventory feedback shown beside product quantity fields.

    Purpose:
        When a customer tries to add more than current effective inventory allows,
        the server redirects back to the product/category page and the product
        form displays this notice near the quantity field.

    Activity-log location:
        Do not log CSS/UI display. CartController logs the failed add attempt.
*/
.cart-inventory-feedback {
    color: #c00000;
    font-weight: bold;
    margin: 8px 0;
}

/* =========================================================
   CART ACTION FEEDBACK OVERLAY
   =========================================================

   Purpose:
       Shows short-lived cart feedback after redirects.

       Successful add-to-cart confirmations are centered near the top of the
       viewport and intentionally larger than ordinary notices. Inventory
       warnings on category/listing pages can be anchored near the related
       Add to Cart / Select button when there is no quantity field for a native
       browser validation bubble.

       Colour note:
           Keep these overlays tied to the shared storefront theme variables
           from theme.css. The visible text and borders use the dark blue; the
           background is a transparent tint of the light blue so the message is
           obvious without feeling disconnected from the rest of the site.

   Activity-log location:
       Do not log overlay display. Log the server-side action that caused it.
   ========================================================= */
.cart-feedback-overlay {
    position: fixed;
    top: 18px;
    left: 50%;
    right: auto;
    z-index: 3000;

    width: auto;
    max-width: min(720px, calc(100vw - 36px));
    padding: 18px 26px;

    border: 2px solid var(--wwd-colour-dark-blue);
    border-radius: 10px;

    /*
        Readable theme-colour panel.

        The previous very transparent tint let product-card text show through
        too strongly. This layered background still uses the light-blue theme
        token, but adds a white wash and enough opacity to keep the message
        readable over busy category grids.

        Layer order:
        1. A translucent white wash that keeps dark-blue text readable.
        2. A strong light-blue theme tint.

        The fallback uses the RGB companion variable from theme.css so this file
        does not need to hard-code the brand colour.
    */
    background:
        linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
        rgba(var(--wwd-colour-light-blue-rgb), 0.86);

    /*
        Blur the page content behind the notice where supported. Browsers that
        do not support backdrop-filter will still get the readable layered
        background above.
    */
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);

    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.34);

    color: var(--wwd-colour-dark-blue);
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;

    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity 0.35s ease, transform 0.35s ease;

    pointer-events: none;
}

.cart-feedback-overlay--visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.cart-feedback-overlay--leaving {
    opacity: 0;
    transform: translate(-50%, -12px);
}

.cart-feedback-overlay--success,
.cart-feedback-overlay--notice,
.cart-feedback-overlay--warning,
.cart-feedback-overlay--error {
    /*
        All cart feedback types now share the site theme colours. The type class
        remains useful for future icons or analytics-free styling refinements.
    */
    border-color: var(--wwd-colour-dark-blue);
    background:
        linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
        rgba(var(--wwd-colour-light-blue-rgb), 0.86);
    color: var(--wwd-colour-dark-blue);
}

.cart-feedback-overlay--anchored {
    max-width: min(360px, calc(100vw - 20px));
    padding: 12px 14px;

    /*
        Anchored category warnings usually sit over product cards, so keep them
        compact but still readable.
    */
    font-size: 0.98rem;
    text-align: left;

    transform: translateY(-4px);
}

.cart-feedback-overlay--anchored.cart-feedback-overlay--visible {
    transform: translateY(0);
}

.cart-feedback-overlay--anchored.cart-feedback-overlay--leaving {
    transform: translateY(-4px);
}

@media (max-width: 600px) {
    .cart-feedback-overlay {
        top: 10px;
        left: 10px;
        right: 10px;

        max-width: none;
        padding: 15px 16px;
        font-size: 1.05rem;

        transform: translateY(-12px);
    }

    .cart-feedback-overlay--visible {
        transform: translateY(0);
    }

    .cart-feedback-overlay--leaving {
        transform: translateY(-12px);
    }

    .cart-feedback-overlay--anchored {
        right: auto;
        max-width: min(340px, calc(100vw - 20px));
        padding: 11px 13px;
        font-size: 0.95rem;
    }
}



/* =========================================================
   Customer-facing error pages
   =========================================================

   Used by:
   - app/views/errors/404.php
   - app/views/errors/500.php

   Activity-log note:
   This is presentation only. Do not log CSS-driven page rendering. Error
   events are logged in the front controller/response layer before the view is
   rendered.
*/
.error-page {
    width: min(1100px, calc(100% - 28px));
    margin: 34px auto 48px;
}

.error-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
    gap: 32px;
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #f3f7fb 100%);
    border: 1px solid rgba(33, 54, 99, 0.18);
    border-radius: 26px;
    box-shadow: 0 16px 36px rgba(33, 54, 99, 0.16);
    padding: clamp(24px, 4vw, 46px);
    overflow: hidden;
}

.error-card__code {
    display: inline-block;
    margin: 0 0 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(33, 54, 99, 0.10);
    color: var(--wwd-colour-dark-blue, #213663);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.error-card h1 {
    margin: 0;
    color: var(--wwd-colour-dark-blue, #213663);
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.08;
}

.error-card__message {
    max-width: 620px;
    margin: 18px 0 0;
    color: #222222;
    font-size: clamp(1rem, 2vw, 1.18rem);
    line-height: 1.55;
}

.error-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.error-card__graphic {
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-card__graphic img {
    display: block;
    width: min(100%, 420px);
    height: auto;
}

.error-page .button {
    text-decoration: none;
}

.error-page .button-secondary {
    background: #ffffff;
    color: var(--wwd-colour-dark-blue, #213663);
    border: 1px solid rgba(33, 54, 99, 0.35);
}

.error-page .button-secondary:hover,
.error-page .button-secondary:focus {
    background: rgba(33, 54, 99, 0.08);
}

@media (max-width: 760px) {
    .error-page {
        width: min(95%, 620px);
        margin-top: 22px;
    }

    .error-card {
        grid-template-columns: 1fr;
        gap: 22px;
        text-align: center;
        border-radius: 20px;
    }

    .error-card__message {
        margin-left: auto;
        margin-right: auto;
    }

    .error-card__actions {
        justify-content: center;
    }

    .error-card__graphic {
        order: -1;
    }

    .error-card__graphic img {
        width: min(100%, 340px);
    }
}

/* =========================================================
   Logged-in public edit overlay
   =========================================================

   These controls are only rendered for authenticated Admin sessions. They are
   positioned outside normal document flow so they do not change customer-facing
   product, tab, header, or menu layout.

   Activity-log note:
   This CSS is presentation-only. Do not activity-log hover/click visibility.
   The Admin pages reached by these links log durable saves/deletes/uploads.
*/
.body--admin-public-edit .wwd-admin-edit-target {
    position: relative;
}

.body--admin-public-edit .wwd-admin-edit-link,
.body--admin-public-edit a.wwd-admin-edit-link {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: calc(100% - 14px);
    padding: 3px 7px;
    border: 1px solid rgba(33, 54, 99, 0.55);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.86);
    color: #213663;
    font: 700 12px/1.1 Arial, Helvetica, sans-serif;
    text-decoration: none;
    text-shadow: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    cursor: pointer;
}

.body--admin-public-edit .wwd-admin-edit-link:hover,
.body--admin-public-edit .wwd-admin-edit-link:focus {
    background: #ffffff;
    border-color: #213663;
    color: #800000;
    text-decoration: underline;
    outline: 2px solid rgba(33, 54, 99, 0.2);
    outline-offset: 1px;
}

.body--admin-public-edit .wwd-admin-edit-link:active {
    top: 7px;
    left: 7px;
    transform: none;
}

.body--admin-public-edit .wwd-admin-public-toolbar {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10000;
    pointer-events: none;
}

.body--admin-public-edit .wwd-admin-public-toolbar .wwd-admin-edit-link,
.body--admin-public-edit .wwd-admin-public-toolbar a.wwd-admin-edit-link {
    position: static;
    pointer-events: auto;
}

.body--admin-public-edit .wwd-admin-edit-link--tabs,
.body--admin-public-edit .wwd-admin-edit-link--tab {
    top: -16px;
    left: 0;
}

.body--admin-public-edit .catalogue-tab-admin-wrap {
    display: inline-block;
    position: relative;
}

.body--admin-public-edit .catalogue-tab-admin-wrap .wwd-admin-edit-link--tab {
    opacity: 0.85;
}

.body--admin-public-edit .wwd-admin-edit-target--page-title .wwd-admin-edit-link {
    top: -14px;
    left: 0;
}

.body--admin-public-edit .wwd-admin-edit-link--product-card,
.body--admin-public-edit .wwd-admin-edit-link--product-detail,
.body--admin-public-edit .wwd-admin-edit-link--custom-page,
.body--admin-public-edit .wwd-admin-edit-link--catalogue-header {
    opacity: 0.9;
}

.body--admin-public-edit .wwd-admin-edit-target:hover > .wwd-admin-edit-link,
.body--admin-public-edit .wwd-admin-edit-target:focus-within > .wwd-admin-edit-link,
.body--admin-public-edit .wwd-admin-edit-link:hover,
.body--admin-public-edit .wwd-admin-edit-link:focus {
    opacity: 1;
}

@media (max-width: 760px) {
    .body--admin-public-edit .wwd-admin-edit-link,
    .body--admin-public-edit a.wwd-admin-edit-link {
        font-size: 11px;
        padding: 3px 6px;
    }

    .body--admin-public-edit .wwd-admin-public-toolbar {
        top: 8px;
        left: 8px;
    }
}

/* =========================================================
   CART THUMBNAILS
   =========================================================

   Purpose:
       Give customers a quick visual confirmation of the exact item in the
       cart without changing cart math or checkout behavior.

   Activity-log note:
       This is display-only CSS. Cart quantity updates, removals, and add-to-cart
       actions remain logged in CartController where the session changes.
   ========================================================= */

.cart-thumbnail-heading,
.cart-thumbnail-cell {
    width: 74px;
    text-align: center;
}

.cart-thumbnail-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: #ffffff;
    border: 1px solid #d6dbe1;
    text-decoration: none;
}

.cart-thumbnail-image {
    display: block;
    max-width: 54px;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 620px) {
    .cart-thumbnail-heading,
    .cart-thumbnail-cell {
        width: 52px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .cart-thumbnail-link {
        width: 44px;
        height: 44px;
    }

    .cart-thumbnail-image {
        max-width: 40px;
        max-height: 40px;
    }
}

/*
   Cart delivery lead-time note.

   Special-order timing should sit below the item description in the cart, not
   run inline with the description. The same server-side delivery note still
   follows the item through checkout/order records.

   Activity-log note: display-only CSS; cart updates/removals remain logged in
   CartController.
*/
.cart-delivery-note {
    display: inline-block;
    margin-top: 4px;
    color: #5f3f00;
    font-weight: 700;
}