/*
WooCommerce styles extracted from current_style.css
Janson Coffee
*/

/* Custom Products / Quote responsive rules */
@media screen and (max-width:767px) {
    .quote-btn {
        width: 50%;
    }
}

@media screen and (min-width:768px) {
    .quote-btn {
        width: 25%;
    }
}

@media screen and (max-width:1024px) {
    .bottom-bar {
        display: none !important;
    }
}

@media screen and (max-width:1720px) {
    .bottom-bar {
        display: block;
    }

    .floating-validity {
        display: none;
    }
}

@media screen and (min-width:1721px) {
    .bottom-bar {
        display: none;
    }

    .floating-validity {
        display: block;
    }
}

/* WooCommerce Add to Order button — matches existing Add to Quote style */
.woo-order-control {
    text-align: center;
    margin-top: 4px;
}
.add-to-order-btn {
    border-radius: 20px;
    border: 1px solid #00291d;
    background-color: white;
    color: #00291d;
    padding: 2px 15px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}
.add-to-order-btn:hover {
    background-color: #00291d;
    color: white;
}
.add-to-order-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.order-qty-control {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.order-qty-control.minimized {
    display: none !important;
}
.add-to-order-btn.minimized {
    display: none !important;
}
.order-qty-minus,
.order-qty-plus {
    border: 1px solid #00291d;
    background-color: white;
    color: #00291d;
    padding: 2px 10px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}
.order-qty-minus:hover,
.order-qty-plus:hover {
    background-color: #00291d;
    color: white;
}
.order-qty-minus:disabled,
.order-qty-plus:disabled {
    opacity: 0.5;
    cursor: wait;
}
.order-qty-minus {
    border-radius: 20px 0 0 20px;
}
.order-qty-plus {
    border-radius: 0 20px 20px 0;
}
/* Changed 2026-09-21: was a plain <span>, now a real <input type="number">
   so a quantity like 100 can be typed directly instead of only +/- one at a
   time -- resets to look identical to the old span (no default input
   border/appearance, no spinner arrows), same pill shape/colors as before. */
.order-qty-value {
    -moz-appearance: textfield;
    appearance: textfield;
    border: none;
    border-top: 1px solid #00291d;
    border-bottom: 1px solid #00291d;
    border-radius: 0;
    padding: 0 8px;
    height: 26px;
    font-size: 14px !important;
    font-family: inherit;
    width: 44px;
    text-align: center;
    background: white;
    color: #00291d;
    outline: none;
}
.order-qty-value::-webkit-outer-spin-button,
.order-qty-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
@media (max-width: 991px) {
    .order-qty-value {
        height: 27px;
    }
}
.order-qty-value:focus {
    background: #f5f5f0;
}
.order-qty-value:disabled {
    opacity: 0.5;
    cursor: wait;
}


/* =========================================================================
 * WooCommerce Cart & Checkout — Janson Coffee brand styling
 * Brand green: #00291d | Brown: #45361f | Radius: 20px | Font: inherited
 * ========================================================================= */

/* --- WooCommerce cart/checkout overrides (not products page) --- */
.woocommerce-cart .entry-content,
.woocommerce-cart article,
.woocommerce-checkout .entry-content,
.woocommerce-checkout article {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 15px;
}

/* --- Cart page --- */
.wp-block-woocommerce-cart .wc-block-cart__main,
.wp-block-woocommerce-cart-items-block {
    font-size: 14px;
}

/* Cart table */
.wc-block-cart-items .wc-block-cart-items__row {
    border-bottom: 1px solid #e0e0e0;
    padding: 16px 0;
}

.wc-block-cart-items .wc-block-cart-items__row:last-child {
    border-bottom: none;
}

/* Cart product name */
.wc-block-components-product-name {
    color: #00291d !important;
    font-weight: 600;
    text-decoration: none !important;
}

.wc-block-components-product-name:hover {
    color: #45361f !important;
}

/* Cart quantity selector */
.wc-block-components-quantity-selector {
    border: 1px solid #00291d !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.wc-block-components-quantity-selector__button {
    background: white !important;
    color: #00291d !important;
    border: none !important;
    font-size: 14px;
    transition: all 0.3s;
}

.wc-block-components-quantity-selector__button:hover {
    background: #00291d !important;
    color: white !important;
}

.wc-block-components-quantity-selector__input {
    border: none !important;
    border-left: 1px solid #00291d !important;
    border-right: 1px solid #00291d !important;
    color: #00291d !important;
    font-weight: 600;
    text-align: center;
}

/* Cart remove link */
.wc-block-cart-item__remove-link {
    color: #dc3545 !important;
    font-size: 12px;
}

/* Cart totals */
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-components-totals-wrapper .wc-block-components-totals-item__label {
    color: #00291d;
    font-weight: 600;
}

.wc-block-components-totals-item__value {
    color: #00291d;
    font-weight: 700;
}

/* Proceed to Checkout button */
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-cart__submit-button {
    background-color: #00291d !important;
    color: white !important;
    border: 1px solid #00291d !important;
    border-radius: 20px !important;
    font-weight: bold;
    padding: 12px 30px !important;
    font-size: 16px;
    transition: all 0.3s;
    text-transform: none !important;
}

.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
    background-color: white !important;
    color: #00291d !important;
}

/* Coupon form */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
    border: 1px solid #00291d !important;
    border-radius: 10px !important;
    color: #00291d;
}

.wc-block-components-totals-coupon__button {
    background-color: #00291d !important;
    color: white !important;
    border-radius: 20px !important;
    border: 1px solid #00291d !important;
}

/* --- Checkout page --- */

/* Checkout heading */
.wc-block-checkout .wp-block-heading,
.wc-block-components-checkout-step__title {
    color: #00291d;
    font-weight: 700;
}

/* Checkout step numbers */
.wc-block-components-checkout-step__heading-content::before {
    color: #00291d;
}

/* Text inputs */
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input textarea,
.wc-block-checkout .wc-block-components-combobox .components-combobox-control input {
    border: 1px solid #ccc !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: #00291d;
    transition: border-color 0.3s;
}

.wc-block-checkout .wc-block-components-text-input input:focus,
.wc-block-checkout .wc-block-components-text-input textarea:focus {
    border-color: #00291d !important;
    box-shadow: 0 0 0 1px #00291d !important;
    outline: none !important;
}

/* Labels */
.wc-block-components-text-input label,
.wc-block-components-combobox label {
    color: #45361f !important;
}

/* Radio buttons / shipping methods */
.wc-block-components-radio-control__option {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px !important;
    margin-bottom: 8px;
}

.wc-block-components-radio-control__input:checked {
    border-color: #00291d !important;
    background-color: #00291d !important;
}

/* Place Order button */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions_row .wc-block-components-button {
    background-color: #00291d !important;
    color: white !important;
    border: 1px solid #00291d !important;
    border-radius: 20px !important;
    font-weight: bold;
    padding: 14px 40px !important;
    font-size: 16px;
    transition: all 0.3s;
    text-transform: none !important;
    width: 100%;
}

.wc-block-components-checkout-place-order-button:hover,
.wc-block-checkout__actions_row .wc-block-components-button:hover {
    background-color: white !important;
    color: #00291d !important;
}

/* Order summary sidebar */
.wc-block-components-order-summary .wc-block-components-order-summary-item__description {
    color: #00291d;
}

.wc-block-components-order-summary .wc-block-components-product-name {
    color: #00291d !important;
    font-weight: 600;
}

/* Payment method section */
.wc-block-components-radio-control--highlight-checked label {
    border-color: #00291d !important;
}

/* Checkout notices */
.wc-block-components-notice-banner.is-error {
    border-left-color: #dc3545;
}

.wc-block-components-notice-banner.is-success {
    border-left-color: #00291d;
}

/* --- Empty cart --- */
.wc-block-cart__empty-cart__title {
    color: #00291d;
}

/* --- Thank you / Order received page --- */
.woocommerce-order-received .woocommerce-thankyou-order-received {
    color: #00291d;
    font-weight: 600;
}

/* --- Responsive adjustments --- */
@media (max-width: 767px) {
    .wc-block-cart__submit-container .wc-block-components-button,
    .wc-block-cart__submit-button {
        padding: 10px 20px !important;
        font-size: 14px;
    }

    .wc-block-components-checkout-place-order-button {
        padding: 12px 20px !important;
        font-size: 14px;
    }
}


/* Hide coupon section on checkout */
.wc-block-components-totals-coupon,
.wp-block-woocommerce-checkout-order-summary-coupon-form-block {
    display: none !important;
}

/* Cart count badge on header icon (and on the sidebar cart icon -- same
   class, both instances updated together by janson-woo-order.js) */
.janson-cart-count {
    position: absolute;
    top: -4px;
    right: -8px;
    background: white;
    color: #00291d;
    border: 1.5px solid #00291d;
    font-size: 11px;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
/* Added 2026-09-21: "99+" (3 characters) doesn't fit the 18px circle used
   for a 1-2 digit count -- widen into a pill instead of a circle whenever
   the badge is showing the capped "99+" value. Class is added/removed by
   janson_format_cart_count() callers (PHP, initial render) and
   refreshCartUI() (JS, after every AJAX update). */
.janson-cart-count.is-wide {
    width: auto;
    min-width: 26px;
    padding: 0 4px;
    border-radius: 9px;
}

/* ── Sidebar floating cart icon ──────────────────────────────────────────
   Added 2026-09-21. Fixed to the right edge, vertically centered. Hidden
   (cart empty) until the first item is added -- server-rendered initial
   state matches the header badge's own logic (WC()->cart->get_cart_contents_count()),
   then janson-woo-order.js reveals/updates it on every add-to-cart AJAX
   response so it never depends on a page reload. */
/* Stuck flush to the right edge of the viewport, not floating with a gap --
   rounded only on the left side (a "tab" attached to the edge), flat/flush
   on the right so it reads as part of the screen edge rather than a
   detached floating button. Changed 2026-09-21 (was: 20px gap, full circle,
   heavy drop shadow all around -- that read as floating). */
#janson-sidebar-cart {
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9998;
    width: 56px;
    height: 56px;
    padding-right: 6px;
    border-radius: 50% 0 0 50%;
    background: #00291d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
#janson-sidebar-cart.is-visible {
    opacity: 1;
    pointer-events: auto;
}
#janson-sidebar-cart:hover {
    background: #0f3a2b;
}
#janson-sidebar-cart svg {
    width: 26px;
    height: 26px;
}
#janson-sidebar-cart .janson-cart-count {
    top: -4px;
    right: 4px;
}

@media (max-width: 767px) {
    #janson-sidebar-cart {
        width: 48px;
        height: 48px;
    }
    #janson-sidebar-cart svg {
        width: 22px;
        height: 22px;
    }
}

/* Wiggle now targets only the icon (svg), not the whole #janson-sidebar-cart
   button -- animating the button itself (its old target) also shook the
   badge count and the button's own fixed position/hit area, which read as
   the whole thing shaking rather than a small icon nudge. No scale, smaller
   rotation amplitude, shorter duration -- subtle by request (was: up to 14deg
   rotate + 1.12 scale on the entire button, "too aggressive"). */
@keyframes janson-cart-wiggle {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-6deg); }
    50%  { transform: rotate(4deg); }
    75%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}
#janson-sidebar-cart.is-wiggling svg {
    animation: janson-cart-wiggle 0.4s ease;
    transform-origin: center;
}

.woocommerce-thankyou-order-received {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #00291d;
    padding: 30px;
    margin-bottom: 30px;
    background: #f0f7f4;
    border-radius: 15px;
    border: 1px solid #00291d20;
}

.woocommerce-thankyou-order-received::before {
    content: "\2713";
    display: block;
    font-size: 48px;
    color: #00291d;
    margin-bottom: 10px;
}

/* ============================================================
   ORDER RECEIVED — ORDER OVERVIEW
   Desktop: 2 columns + final full-width row
   Mobile: 1 column
   ============================================================ */

.woocommerce ul.order_details.woocommerce-order-overview {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 30px !important;

    display: flex !important;
    flex-wrap: wrap !important;

    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}


/* Reset WooCommerce default LI styling */
.woocommerce ul.order_details.woocommerce-order-overview li {
    float: none !important;
    margin: 0 !important;
    padding: 16px 20px !important;

    width: auto !important;

    border: 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;

    font-size: 14px !important;
    color: #45361f;

    box-sizing: border-box;
}


/* Desktop: first 4 items = 2 columns */
.woocommerce ul.order_details.woocommerce-order-overview li:nth-child(-n+4) {
    flex: 0 0 50% !important;
}


/* Left column border */
.woocommerce ul.order_details.woocommerce-order-overview li:nth-child(odd):not(:last-child) {
    border-right: 1px solid #e0e0e0 !important;
}


/* Last item: full width */
.woocommerce ul.order_details.woocommerce-order-overview li:last-child {
    flex: 0 0 100% !important;
    border-bottom: 0 !important;
    border-right: 0 !important;
}


/* Value */
.woocommerce ul.order_details.woocommerce-order-overview li strong {
    display: block;
    margin-top: 5px;

    font-size: 14px !important;
    font-weight: 600;

    color: #00291d;
    text-transform: none;
}


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

@media (max-width: 767px) {

    .woocommerce ul.order_details.woocommerce-order-overview li,
    .woocommerce ul.order_details.woocommerce-order-overview li:nth-child(-n+4),
    .woocommerce ul.order_details.woocommerce-order-overview li:last-child {
        flex: 0 0 100% !important;
        width: 100% !important;

        border-right: 0 !important;
        border-left: 0 !important;
    }


    /* Every row except last gets horizontal separator */
    .woocommerce ul.order_details.woocommerce-order-overview li:not(:last-child) {
        border-bottom: 1px solid #e0e0e0 !important;
    }


    .woocommerce ul.order_details.woocommerce-order-overview li:last-child {
        border-bottom: 0 !important;
    }

}

.woocommerce-order-details,
.woocommerce-customer-details {
    margin-bottom: 30px;
}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {
    color: #00291d;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #00291d;
}

.woocommerce-order-received .woocommerce-table--order-details {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.woocommerce-order-received .woocommerce-table--order-details th,
.woocommerce-order-received .woocommerce-table--order-details td {
    padding: 12px 16px;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    color: #00291d;
}

.woocommerce-order-received .woocommerce-table--order-details thead th {
    background: #f8f8f8;
    font-weight: 700;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot th {
    font-weight: 600;
}

.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
    font-size: 16px;
    font-weight: 700;
    color: #00291d;
    border-top: 2px solid #00291d;
}

@media (max-width: 767px) {
    .woocommerce-order-overview li {
        flex: 1 1 100%;
    }
    .woocommerce-order-overview li:nth-child(odd) {
        border-right: none;
    }
}


/* --- Hide all links to individual product pages site-wide --- */
a.wc-block-components-product-name,
.wc-block-grid__product-link,
.wc-block-cart .wc-block-components-product-name,
.wc-block-checkout .wc-block-components-product-name {
    pointer-events: none !important;
    text-decoration: none !important;
    cursor: default !important;
    color: #00291d !important;
}

/* Also hide "add to cart" buttons in product grids (empty cart "New in store") */
.wc-block-grid__product .wp-block-button,
.wc-block-grid__product .wc-block-grid__product-add-to-cart,
.wc-block-grid__product .add_to_cart_button {
    display: none !important;
}

/* --- Style "New in store" product grid on empty cart --- */
.wc-block-grid__products {
    display: flex !important;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.wc-block-grid__product {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: box-shadow 0.3s;
}

.wc-block-grid__product:hover {
    box-shadow: 0 4px 12px rgba(0,41,29,0.1);
}

.wc-block-grid__product-title {
    color: #00291d !important;
    font-weight: 600;
    font-size: 14px;
}

.wc-block-grid__product-price {
    color: #45361f;
    font-weight: 700;
}

.wc-block-grid__product-image {
    border-radius: 8px;
    overflow: hidden;
}

/* --- Empty cart: "Browse Products" button + styling --- */
.wc-block-cart__empty-cart__title {
    color: #00291d !important;
    margin-bottom: 15px !important;
}

/* --- Cart page: hide product links in cart items too --- */
.wc-block-cart-items .wc-block-components-product-name {
    pointer-events: none !important;
    cursor: default !important;
}


/* --- Empty cart: hide "New in store" products, add browse button --- */
.wc-block-cart__empty-cart__title ~ .wp-block-heading,
.wc-block-cart__empty-cart__title ~ .wp-block-separator,
.wc-block-cart__empty-cart__title ~ .wc-block-grid,
.wp-block-woocommerce-product-new {
    display: none !important;
}

/* Browse Products button injected via CSS ::after on empty cart title */
.wc-block-cart__empty-cart__title::after {
    content: "";
    display: block;
    margin-top: 25px;
}

/* Style the empty cart container */
.wp-block-woocommerce-empty-cart-block {
    text-align: center;
    padding: 40px 20px;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon {
    font-size: 22px !important;
    color: #00291d !important;
}

/* Navbar offset for WooCommerce pages (fixed navbar is ~66px tall) */
.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-order-received .site-main,
.woocommerce-account .site-main {
    padding-top: 80px;
}

/* Green Coffee product image */
.GCoffee-1 {
    background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");
    background-position: center;
}

/* ============================================================
   PENDING FIXES — 2026-08-15
   ============================================================ */

/* 2. Order summary h3 — reduce line-height */
.wc-block-components-order-summary__button-text,
.wc-block-checkout__order-summary h3,
.wp-block-woocommerce-checkout-order-summary-block h3,
.woocommerce-checkout-review-order h3 {
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}

/* 3. Hide "Add order note" in checkout */
.wc-block-checkout__add-note {
    display: none !important;
}

/* 4. Remove gap between Cart totals heading & first total row */
.wc-block-cart__totals-title {
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
}
.wc-block-components-totals-wrapper {
    margin-top: 0 !important;
}

/* 5. Checkout labels — smaller font, not selectable */
.wc-block-components-text-input label,
.wc-block-components-combobox label,
.wc-block-components-select label {
    font-size: 0.72rem !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* 6. Product card description text on products page — slightly smaller */
.product-name {
    font-size: 0.9rem !important;
}

/* 7. Billing/shipping address labels — same size as contact labels */
.wc-block-checkout__shipping-fields .wc-block-components-text-input label,
.wc-block-checkout__billing-fields .wc-block-components-text-input label,
.wc-block-checkout__address-fields .wc-block-components-text-input label {
    font-size: 0.72rem !important;
}

/* 8. Payment radio button — fix input overlapping label text */
.wc-block-components-radio-control__option {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}
.wc-block-components-radio-control__input {
    flex-shrink: 0 !important;
    margin-top: 4px !important;
    position: static !important;
}
.wc-block-components-radio-control__label-group {
    flex: 1 !important;
}

/* 9. Mobile: reduce padding-top for navbar offset */
@media (max-width: 767px) {
    .woocommerce-cart .site-main,
    .woocommerce-checkout .site-main,
    .woocommerce-order-received .site-main {
        padding-top: 20px;
    }
    .woocommerce-account .site-main {
        padding-top: 0px;
    }
}

/* 10. Mobile: reduce space between checkout form & order summary */
@media (max-width: 767px) {
    .wp-block-woocommerce-checkout-order-summary-block,
    .wc-block-checkout__sidebar {
        margin-top: 12px !important;
        padding-top: 0 !important;
    }
}
/* Cart CTA button (a.quote-btn) — brand styling */
a.quote-btn,
button.quote-btn,
.quote-btn {
    display: inline-block;
    background-color: #00291d;
    color: #fff !important;
    border: 2px solid #00291d;
    border-radius: 20px;
    padding: 12px 36px;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none !important;
    transition: all 0.3s;
    cursor: pointer;
    letter-spacing: 0.5px;
}
a.quote-btn:hover,
button.quote-btn:hover,
.quote-btn:hover {
    background-color: #fff;
    color: #00291d !important;
}
/* ============================================================
   ROUND 2 FIXES — 2026-08-14
   ============================================================ */

/* Fix 1: Checkout Privacy Policy link — was cyan, force brand green */
.wc-block-checkout a[href*="privacy"],
.wc-block-checkout a[href*="Privacy"],
.wc-block-components-checkout-policies a {
    color: #00291d !important;
    font-weight: 600;
}

/* Fix 2: Input field values — 19.2px is too big, reduce to 14px */
.wc-block-components-text-input input,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-combobox input,
.wc-block-components-select select {
    font-size: 14px !important;
    padding: 24px 9px 8px !important;
}

/* Fix 3: Product description in cart/checkout — 18px too big */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata p,
.wc-block-components-product-metadata .wc-block-components-product-metadata__description {
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #555 !important;
}

/* Fix 3b: Product name in cart/checkout — also 18px, reduce */
.wc-block-components-product-name {
    font-size: 14px !important;
}

/* Fix 4: Cart totals gap — hide coupon on cart page, tighten spacing */
.wc-block-cart .wp-block-woocommerce-cart-order-summary-coupon-form-block {
    display: none !important;
}
.wc-block-cart .wp-block-woocommerce-cart-order-summary-totals-block {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
}
.wc-block-cart .wc-block-components-totals-wrapper {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
.wc-block-cart .wc-block-cart__totals-title {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Fix 5: Payment options — cleaner, more compact */
.wc-block-components-radio-control__option {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
    margin-bottom: 8px !important;
}
.wc-block-components-radio-control__option:has(input:checked) {
    border-color: #00291d !important;
    background: #f7faf9 !important;
}
.wc-block-components-radio-control__input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #00291d !important;
}
.wc-block-components-radio-control__label {
    font-size: 14px !important;
    font-weight: 600 !important;
}
.wc-block-components-radio-control__description {
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 2px !important;
}
/* Remove the default WC radio control list styling */
.wc-block-components-radio-control .wc-block-components-radio-control__option {
    list-style: none !important;
}


/* ============================================================
   EMPTY CHECKOUT / CART STYLING
   ============================================================ */

/* WooCommerce block checkout empty state */
.wc-block-checkout-empty {
    text-align: center;
    padding: 60px 20px;
}
.wc-block-checkout-empty .wc-block-checkout-empty__image {
    max-width: 120px;
    margin: 0 auto 20px;
}
.wc-block-checkout-empty .wc-block-checkout-empty__title,
.wc-block-checkout-empty h2 {
    color: #00291d !important;
    font-size: 22px !important;
}
.wc-block-checkout-empty .wc-block-checkout-empty__description {
    color: #555;
    margin-bottom: 24px;
}
/* "Browse store" or "Return to shop" WC block button */
.wc-block-checkout-empty a,
.wp-block-woocommerce-empty-cart-block a.wp-block-woocommerce-cart-return-to-shop-link,
a.wc-block-cart__return-to-shop-link {
    display: inline-block !important;
    background-color: #00291d !important;
    color: #fff !important;
    border: 2px solid #00291d !important;
    border-radius: 20px !important;
    padding: 12px 36px !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
}
.wc-block-checkout-empty a:hover,
.wp-block-woocommerce-empty-cart-block a.wp-block-woocommerce-cart-return-to-shop-link:hover,
a.wc-block-cart__return-to-shop-link:hover {
    background-color: #fff !important;
    color: #00291d !important;
}

/* Style the empty cart block button (already exists but ensure consistency) */
.wp-block-woocommerce-empty-cart-block .browse-products-btn,
.wp-block-woocommerce-empty-cart-block a {
    display: inline-block !important;
    background-color: #00291d !important;
    color: #fff !important;
    border: 2px solid #00291d !important;
    border-radius: 20px !important;
    padding: 12px 36px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    transition: all 0.3s !important;
}
.wp-block-woocommerce-empty-cart-block .browse-products-btn:hover,
.wp-block-woocommerce-empty-cart-block a:hover {
    background-color: #fff !important;
    color: #00291d !important;
}
/* Mobile: remove top padding on checkout entry-content (not products page) */
@media (max-width: 767px) {
    .woocommerce-checkout .entry-content,
    .woocommerce-cart .entry-content {
        padding-top: 0px !important;
    }
}



/* Order received: billing phone + email same size as address text */
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    font-size: inherit !important;
}

/* Order received: remove product hyperlinks in order details table */
.woocommerce-order-received .woocommerce-order-details a {
    color: inherit !important;
    text-decoration: none !important;
    pointer-events: none !important;
}
/* ── USA/Canada shipping notice banner ──────────────────────────────────── */
.janson-shipping-notice {
    background: #fff;
    color: #00291D;
    text-align: center;
    padding: 6px 12px;
    border-radius: 10px;
    margin-bottom: 34px;
    font-size: 16px;
    /* font-weight: 700 alone doesn't render bold here -- FuturaLightBT (the
       inherited body font) is a single-weight custom font file with no real
       bold variant, so a numeric font-weight has nothing to synthesize from.
       Switch to FuturaHeavyBT, the site's actual bold face in this same
       family (used by .general_title and the tab pill buttons), instead. */
    font-family: 'FuturaHeavyBT', sans-serif;
    line-height: 1.5;
}
.janson-shipping-notice p {
    margin: 0;
}
.janson-shipping-notice strong {
    color: #00291D;
}

/* ── Hide product short descriptions in cart / checkout ─────────────────── */
.wc-block-components-product-metadata {
    display: none !important;
}

/* ── Remove "checking out as guest" notice in block checkout ─────────────── */
.wc-block-checkout__guest-checkout-notice {
    display: none !important;
}

/* === Janson Products Page (page 280) inline styles === */
/*.text-wrapper::after {
	content: "We are not processing orders until June 5th";
	display: flex;
	letter-spacing: 2.5px;
	font-size: 25px;
	text-align: center;
	justify-content: center;
	align-items: center;
	background: rgb(255 255 255 / 60%);
	color: black;
	font-weight: bold;
	width: 350px;
	padding: 10px;
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 10px;
	}*/
	.intro-banner{
		background:url(https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Banner.jpg);
		background-color: #45361f; 
		height: 50vh;
		max-height:512px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index:1;
	}
	/*Begin Products Style*/
	/*JESR [20220305] New Code for Veronica Changes*/
	.FCoffeeRegularRoastWhole,
	.FCoffeeRegularRoastGround,
	.FCoffeeDarkRoastGround,
	.FCoffeeDarkRoastWhole,
	#cartIcon,
	#bottom-bar,
	#floating-validity
	{
		transition:0.25s ease-in all;
	}
	.minimized{
		min-height: 0px !important;
		padding: 0px !important;
	}
	.transparent{
		opacity:0;
	}
	.visible-cart{
		opacity:1;
	}

	.gw-btngroup {
		justify-content:center;
	}
	.gw-btngroup button{
		height:auto !important;
		min-width:auto !important;
		box-shadow:none !important;
		padding: 1px 7px;
		max-width:70px;
	}
	.product-name{
		line-height: 1.7;
	}
	.floating-validity{
		background-color:transparent;
		position:fixed;
		width:400px;
		right:0;
		margin-top:-350px;
		z-index:40;
	}
	.validiy-wrapper{
		background: white;
		border-radius:15px;
		border:0px solid transparent;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
		color:#00291d;
	}
	.f75r{
		font-size:0.75rem !important;
	}
	.bottom-bar{
		background: white;
		position:fixed;
		bottom:0;
		z-index:1000;
		color:#00291d;
		border-top:1px solid #00291d;
	}
	/*JESR [20220305] New Code for Veronica Changes*/
	.product-container{
		padding:5px;
	}

	#products-shipping .nav-link{
		margin: 5px 0px !important;
	}

	#products-picker .nav-link,
	#products-shipping .nav-link	 {

		border-radius: 25px;
		border: 1px solid #00291d;
		color: #45361f !important;
		font-size:90% !important;
		min-width:135px;


	}
	#products-shipping .nav-link.active,
	#products-picker .nav-link.active {
		color: #fff !important;
		background-color: #00291d;

	}
	#products-order .wpcf7-textarea {
		height:100px;
	}
	#products-order h5{
		display:none;
	}
	.hr-margin{
		margin-top:66px;
		margin-bottom:66px;
	}
	.OR-Image{
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: contain;
		height:100%;
		min-height:200px;
		padding:5px;
	}
	.Shipping-Image{
		background-color: #fff;
		background-repeat: no-repeat;
		background-size: contain;
		height:100%;
		min-height:275px;
		padding:5px;
		-webkit-backface-visibility: hidden;
		-ms-transform: translateZ(0);
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		image-rendering: -webkit-optimize-contrast;
	}
	.Table-Germany{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/ProductsTable.png");background-position:center;}



	/*[VQ][JESR] 20220427*/

	.Other-1{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/Coffee Capsule Medium Roast 10 units.jpg");background-position:center;}
	.Other-2{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/Coffee Capsule Dark Toast 10 units.jpg");background-position:center;}
	.Other-3{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/Coffee Capsule Geisha 10 units.jpg");background-position:center;}
	.Other-4{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/JansonToGoNew2025.jpg");background-position:center;}
	.Other-5{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/Trio Sampler 80 Grams.jpg");background-position:center;}
	.Other-6{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/Honey Miel Aguacate.jpg");background-position:center;}
	.Other-7{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/Honey Miel Flor Geisha.jpg");background-position:center;}
	/*Pacamara*/
	.Pacamara-1{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Pacamara/Pacamara 250g.webp");background-position:center;}
	.Pacamara-2{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Pacamara/PACAMARA 250g WHOLE.jpg");background-position:center;}
	.Pacamara-3{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Pacamara/PACAMARA 2-5Lb.jpg");background-position:center;}
	.Pacamara-4{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Pacamara/PACAMARA 6Lb.jpg");background-position:center;}
	/*Geisha*/
	.Geisha-1{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-2{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-3{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-4{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-5{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-6{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-7{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-8{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/wp-content/uploads/2026/08/GCW150-green-coffee-geisha-washed.jpg");background-position:center;}
	.Geisha-9{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Geisha/Janson Geisha 2.5Lb.webp");background-position:center;}
	.Geisha-10{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Geisha/Janson Geisha 2.5Lb.webp");background-position:center;}
	.Geisha-11{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Geisha/Janson Geisha 6Lb.webp");background-position:center;}
	.Geisha-12{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Geisha/Janson Geisha 6Lb.webp");background-position:center;}
	.Geisha-13{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Geisha/Geisha Cherry Cascara Tea 200g.jpg");background-position:center;}
	/*Family Coffee*/
	.FCoffee-1{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/ROJO-molido.jpg");background-position:center;}
	.FCoffee-2{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/VERDE-Grano.jpg");background-position:center;}
	.FCoffee-3{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/ROJO-molido.jpg");background-position:center;}
	.FCoffee-4{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/VERDE-Grano.jpg");background-position:center;}
	.FCoffee-5{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/Janson Family Coffee 2.5Lb.webp");background-position:center;}
	.FCoffee-6{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/Janson Family Coffee 2.5Lb.webp");background-position:center;}
	.FCoffee-7{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/Janson Family Coffee 6Lb.webp");background-position:center;}
	.FCoffee-8{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/FamilyCoffee/Janson Family Coffee 6Lb.webp");background-position:center;}
	.FCoffee-9{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/Trio Sampler 75 Grams.webp");background-position:center;}
	.FCoffee-10{background-image: url("https://janson-staging.devaapanel02.novavisiongrp.com/Media/Products/Otros/JansonToGoNew2025.jpg");background-position:center;}
	/*[VQ][JESR] 20220427*/
	/*End Products Style*/
	/*Begin Quote Buttons and other related styles*/
	#quote-btn-2,#quote-btn,.control-btn,.out-button{
		border-radius:20px;
		border: 1px solid #00291d;
	}
	#quote-btn-2,#quote-btn{
		background-color: #00291d;
		color:white;
		font-weight:bold;
		padding:5px;
	}
	.out-button,
	.control-btn:not(.added){
		background-color:white;
		color:#00291d;
		width: fit-content !important;

	}
	.control-btn.added{
		background-color:#00291d;
		color:white;
	}
	.btn-control-wrapper{
		max-height:0;
		height:100%;
		overflow:hidden;
		transition:0.25s ease-in all;
	}
	.first-control-wrapper{
		max-height:100px;
		height:100%;
		overflow:hidden;
		transition:0.25s ease-in all;
	}
	/*.added-btn:disabled, .del-btn:disabled {
	background-color: rgba(239, 239, 239, 0.3) !important;
	color: rgba(16, 16, 16, 0.3) !important;
	border-color: rgba(195, 195, 195, 0.3) !important;
	}*/
	.text-btn, .added-btn, .del-btn {
		border-radius:20px;
		box-shadow:none !important;
		padding: 1px 7px;
	}
	.added-btn:disabled, .del-btn:disabled, .text-btn, .added-btn, .del-btn, .btn-outline-primary:disabled, .btn-outline-primary.disabled {
		border: 1px solid #00291d !important;
		background: #00291d !important;
		color:white !important;
		opacity:1;

	}
	/*End Quote Buttons and other related styles*/
	/*Quote Table Styles*/
	table, th, td {
		border: 1px solid rgb(118, 118, 118);
		border-collapse: collapse;
		/*width:100%;*/
		font-size:80%;
		text-align:center;
	}
	table{width:100%;}
	.sen_btn_quote{color:#00291d !important;}
	/*End Quote Table Styles*/

	/*Begin Media Queries*/
	@media (max-width: 767px) {
		#products-picker .nav-link {
			display:flex;
			height:48px;
			align-items:center;
			justify-content:center;
			padding:3px;
			font-size:80%;
		}
	}
/* === End Products Page inline styles === */

/* --- Hide WooCommerce default product grid on shop/products page (page 280) --- */
.woocommerce-shop .woocommerce.columns-4,
.woocommerce-shop nav.woocommerce-pagination,
.woocommerce-shop .woocommerce-result-count,
.woocommerce-shop .woocommerce-ordering,
.woocommerce-shop ul.products,
.woocommerce-shop .wp-block-woocommerce-product-collection,
.woocommerce-shop .wc-block-product-template,
.woocommerce-shop .wp-block-woocommerce-store-notices,
.woocommerce-shop .woocommerce-products-header__title.page-title,
.woocommerce-shop .woocommerce-breadcrumb,
.woocommerce-shop .woocommerce-info,
.woocommerce-shop .woocommerce-no-products-found,
.woocommerce-shop p.woocommerce-info {
    display: none !important;
}


/* ============================================================
   CHECKOUT STYLING FIXES — 2026-08-19
   ============================================================ */

/* Fix 1: Checkbox checkmark invisible on twentytwentyone theme
   WC blocks hides the SVG mark via .theme-twentytwentyone selector
   and expects the theme's ::before pseudo to handle it — but WC also
   resets ::before/::after to empty content. Override to show the SVG. */
.theme-twentytwentyone .wc-block-components-checkbox__input[type="checkbox"]:checked + .wc-block-components-checkbox__mark {
    display: block !important;
}
/* Filled background when checked to make the checkmark visible */
.wc-block-components-checkbox__input[type="checkbox"]:checked {
    background-color: #00291d !important;
    border-color: #00291d !important;
}
.wc-block-components-checkbox__input[type="checkbox"]:checked + .wc-block-components-checkbox__mark {
    fill: #fff !important;
}

/* Fix 2: Product thumbnails in checkout order summary are squished (48x32) */
.wc-block-components-order-summary-item__image img {
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 6px !important;
}

/* Notice styling moved to css/janson-quote-checkout.css */

/* Quote button label — data-janson-label attr set by JS, rendered via ::after.
   Hides React's own text node so the attribute value shows instead.
   Safe: attribute mutation does not affect React's fiber tree. */
.wc-block-components-checkout-place-order-button[data-janson-label] .wc-block-components-button__text {
    font-size: 0 !important;
    visibility: hidden !important;
}
.wc-block-components-checkout-place-order-button[data-janson-label]::after {
    content: attr(data-janson-label);
    font-size: 1rem;
    visibility: visible;
    line-height: 1;
}
/* Products page H1 shadow
   NOTE: inline style="" on H1 is stripped by wp_kses_post() — always use a CSS class here. */
.woocommerce-shop h1.FuturaHeavy,
.woocommerce-shop h1.woocommerce-products-header__title {
	text-shadow: 4px 4px 2px black;
}

/* Cart page: "Shipping & handling" / "At Checkout" — same size as Estimated total (20px).
   Scoped to body.janson-cart-shipping-unknown (set by janson-cart-shipping-label.js)
   so this ONLY replaces the catch-all zone's $0 placeholder rate ("Shipping
   handled in checkout" - every quote/non-North-America country). A real,
   already-calculated rate (US/CA flat rate or DHL) renders normally instead,
   styled by the generic .wc-block-components-totals-item__label/__value
   rules above. Previously this fired unconditionally and hid a real DHL
   cost that was already included in the cart total behind a misleading
   "not known yet" label - fixed 2026-09-05. */
body.janson-cart-shipping-unknown .wp-block-woocommerce-cart .wc-block-components-totals-shipping .wc-block-components-totals-item {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	flex-wrap: nowrap !important;
}
body.janson-cart-shipping-unknown .wp-block-woocommerce-cart .wc-block-components-totals-shipping .wc-block-components-totals-item > * {
	display: none !important;
}
body.janson-cart-shipping-unknown .wp-block-woocommerce-cart .wc-block-components-totals-shipping .wc-block-components-totals-item::before {
	content: "Shipping & handling";
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 600;
}
body.janson-cart-shipping-unknown .wp-block-woocommerce-cart .wc-block-components-totals-shipping .wc-block-components-totals-item::after {
	content: "At Checkout";
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: 600;
}

/* Green Coffee — Sold Out message */
.gcoffee-soldout-title { color: #00291d; }
.gcoffee-soldout-body {
    font-size: 1rem;
    color: #333;
    line-height: 1.8;
}

/* Others tab — hidden (empty, honey moved to Roasted Coffee) */
li:has(#pills-Other-tab),
#pills-Other {
    display: none !important;
}


/* Cart page — rounded card borders + layout fixes */

/* 1. Cards: rounded border on both panels */
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-totals-block {
    border: 1px solid #d9d9d9;
    border-radius: 16px;
    padding: 24px;
    background: #fff;
}

/* 2+3. Gap between cards + right card content-height.
   WC sets main=65% and sidebar=35% (totalling 100%). Any margin-left
   overflows and causes the sidebar to wrap. Fix: shrink both widths by
   half the desired gap (12px each) via calc(), then add margin-left equal
   to the full gap. 65%-12 + 24 + 35%-12 = 100%. Layout stays in one row.

   DESKTOP ONLY (min-width: 768px) — bug fixed 2026-09-07: these !important
   widths were applying unconditionally, overriding WooCommerce Blocks' own
   responsive rule (an `@container (max-width: 699px)` query that switches
   both columns to width:100%, stacked) on every screen size, including
   mobile. That squeezed "Cart totals" into ~35% of a phone screen — severe
   text wrapping on every line ("Shipping & handling At Checkout", the price,
   the button label all broke across multiple lines). Gating this to desktop
   restores WC's own mobile stacking. */
@media (min-width: 768px) {
    .wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-main.wc-block-cart__main {
        width: calc(65% - 12px) !important;
    }
    .wc-block-components-sidebar.wc-block-cart__sidebar {
        width: calc(35% - 12px) !important;
        margin-left: 24px;
        min-width: 0;
        align-self: flex-start;
    }
}

/* Mobile (below 768px): let both cards stack full-width, with a gap between
   them instead of the desktop side-by-side margin-left. */
@media (max-width: 767px) {
    .wc-block-components-sidebar.wc-block-cart__sidebar {
        margin-top: 16px;
    }
}

/* 4. Remove td border-top (double-line fix) — leave only tr border-bottom. */
.wc-block-cart-items .wc-block-cart-items__row td {
    border-top: none !important;
}

/* Remove trailing separator. The line comes from border-bottom on the
   table element itself (not the last row), so target the table directly. */
.wp-block-woocommerce-cart-items-block .wc-block-cart-items {
    border-bottom: none !important;
}

/* Add bottom border under "PRODUCT / TOTAL" header row to match the
   "CART TOTALS" heading separator on the right card. */
.wc-block-cart-items .wc-block-cart-items__header th {
    border-bottom: 1px solid rgb(224, 224, 224) !important;
    padding-bottom: 12px;
}

/* Cart — right card spacing parity with left card
   Left card header: 8px top / 12px bottom
   Left card rows:   20px top / 20px bottom
   Right card brought up to match. */

/* CART TOTALS heading */
.wp-block-woocommerce-cart-order-summary-heading-block {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}


/* Checkout — 25px border-radius on all fields and boxes */

/* Text / email / tel inputs — 25px + more horizontal padding so text sits away from curves */
.wp-block-woocommerce-checkout .wc-block-components-text-input input,
.wp-block-woocommerce-checkout .wc-block-components-address-form input[type="text"],
.wp-block-woocommerce-checkout .wc-block-components-address-form input[type="email"],
.wp-block-woocommerce-checkout .wc-block-components-address-form input[type="tel"] {
    border-radius: 25px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Select dropdowns (country, state) */
.wp-block-woocommerce-checkout .wc-blocks-components-select__select {
    border-radius: 25px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Labels inside text inputs — consistent 13px, left aligned with new padding */
.wp-block-woocommerce-checkout .wc-block-components-text-input label,
.wp-block-woocommerce-checkout .wc-blocks-components-select__label {
    font-size: 13px !important;
    left: 20px !important;
}

/* Order summary sidebar card. Bug fixed 2026-09-07: border-radius was already
   25px here and genuinely applying (confirmed via computed style + a debug
   outline), but the element has no background fill of its own and only WC's
   default 1px/20%-opacity border — nearly invisible against the white page
   background, so it read as a plain square area rather than a rounded card.
   Matches the cart page's card treatment (background/border/radius/padding
   together, .wp-block-woocommerce-cart-items-block etc. above) instead of
   relying on radius alone. overflow:hidden clips the title/rows to the
   rounded shape. */
.wp-block-woocommerce-checkout-order-summary-block {
    border-radius: 25px !important;
    border: 1px solid #d9d9d9 !important;
    background: #fff;
    overflow: hidden;
}

/* Payment option boxes — 25px + overflow:hidden to clip inner content to curve
   Border toned down to a subtle tint (was full solid green, too heavy) */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option {
    border-radius: 25px !important;
    overflow: hidden !important;
    border-color: rgba(0, 41, 29, 0.25) !important;
    /* Bug fixed 2026-09-07: WC's own default is align-items:flex-start on this
       flex row, which top-aligns the radio circle against the label instead of
       centering it. Invisible for a single-line label, but visibly wrong once
       a label wraps to 2 lines (e.g. "DHL – EXPRESS WORLDWIDE" on a narrow
       screen) — the circle sits at the top of the text block instead of its
       vertical middle. Applies to both shipping options and payment options
       (this selector covers both on the checkout page). */
    align-items: center !important;
}

/* Shipping address saved-address card */
.wc-block-components-address-card {
    border-radius: 25px !important;
}

/* Quote notice banner */
.janson-quote-notice {
    border-radius: 25px !important;
}

/* Submit button (Place Order / Get a Quote) */
.wc-block-components-checkout-place-order-button {
    border-radius: 25px !important;
}

/* Submit button — higher specificity to beat WC's own 20px rule */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button.wc-block-components-button {
    border-radius: 25px !important;
}

/* Radio option borders — tone down both unselected AND selected (checked) states */
.wp-block-woocommerce-checkout .wc-block-components-radio-control__option:has(input:checked) {
    border-color: rgba(0, 41, 29, 0.4) !important;
}

/* Payment outer accordion box — wraps pill header + description content */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    border-radius: 25px !important;
    overflow: hidden !important;
}

/* When pill lives inside the accordion, wipe ALL its borders with the
   shorthand (beats individual border-* rules from WC's own stylesheet).
   Add back only a subtle bottom divider between header and description.
   The accordion itself provides the single outer border. */
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option:has(input:checked) {
    border: none !important;
    border-bottom: 1px solid rgba(0, 41, 29, 0.12) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

/* Accordion outer box: single clean border, 25px already set above */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option {
    border: 1px solid rgba(0, 41, 29, 0.25) !important;
}

/* Remove WC's inset box-shadow on the checked accordion option — it acts
   as a dark inner "border" on all sides, creating barely-visible side lines */
.wp-block-woocommerce-checkout .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    box-shadow: none !important;
}

/* WC renders a ::after overlay with a 4px-radius border on the highlight-checked
   container, creating faint side lines. We already have our own accordion border
   so remove this redundant pseudo-element border entirely. */
.wp-block-woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after {
    border: none !important;
}

/* ============================================================================
 * FDA Fee checkout row — instant show/hide + non-guessing "pending" state
 * (JS: js/janson-fda-fee-checkout.js). Toggles THREE body classes:
 *   .janson-country-is-us      — shipping country <select> currently == US
 *   .janson-country-pending    — country/field just changed, WC hasn't recalculated yet
 *   .janson-address-incomplete — a required field for this country is still empty
 *                                (no timer — always wins over "pending" clearing)
 *
 * Never asserts a guessed dollar amount. The FDA Fee placeholder shows the
 * label only (no price); Delivery and the grand total are shimmer-masked,
 * not replaced with a made-up number, while genuinely stale.
 * ========================================================================== */

/* Hide the real FDA Fee row instantly when country isn't US. Only hides an
   existing WooCommerce-rendered element — no DOM node is ever added/removed
   here, so this can never conflict with React's ownership of this subtree. */
body:not(.janson-country-is-us) .wp-block-woocommerce-checkout-order-summary-fee-block {
	display: none !important;
}

/* Country just changed to US but WooCommerce hasn't rendered the real fee row
   yet (the wrapper div is still empty) — show a plain "FDA Fee" placeholder
   with no dollar amount. Pure CSS generated content on an existing empty
   wrapper, not a new DOM node, so it can't collide with React's own render. */
body.janson-country-is-us.janson-country-pending .wp-block-woocommerce-checkout-order-summary-fee-block:empty,
body.janson-country-is-us.janson-address-incomplete .wp-block-woocommerce-checkout-order-summary-fee-block:empty {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	/* This placeholder is styled on the OUTER wrapper div (it has to be --
	   while :empty there's no inner div yet), but the real rendered row's
	   16px left/right gutter actually comes from the INNER
	   .wc-block-components-totals-item div (padding: 0 16px) that only
	   exists once WooCommerce fills this wrapper in. Match that horizontal
	   padding here too, or the placeholder text sits flush against the
	   edges with no side padding for that brief transitional moment. */
	padding: 8px 16px;
}
body.janson-country-is-us.janson-country-pending .wp-block-woocommerce-checkout-order-summary-fee-block:empty::before,
body.janson-country-is-us.janson-address-incomplete .wp-block-woocommerce-checkout-order-summary-fee-block:empty::before {
	content: "FDA Fee";
	font-weight: 500;
	color: #00291D;
}
body.janson-country-is-us.janson-country-pending .wp-block-woocommerce-checkout-order-summary-fee-block:empty::after,
body.janson-country-is-us.janson-address-incomplete .wp-block-woocommerce-checkout-order-summary-fee-block:empty::after {
	content: "…";
	font-weight: 500;
	color: #00291D;
}

/* Delivery + grand total are also stale the instant country changes (shipping
   cost is country-dependent too) — while pending, hide the (possibly wrong)
   real number and show a plain "--" placeholder instead. Was a sliding
   shimmer-gradient box (kept as the disabled janson-fda-shimmer keyframe
   below, in case a future need for it comes back) — changed 2026-09-22 per
   explicit request: the pending STATE is fine, just not that animation. */
body.janson-country-pending .wp-block-woocommerce-checkout-order-summary-shipping-block .wc-block-components-totals-item__value,
body.janson-address-incomplete .wp-block-woocommerce-checkout-order-summary-shipping-block .wc-block-components-totals-item__value,
body.janson-country-pending .wc-block-components-totals-footer-item-tax-value,
body.janson-address-incomplete .wc-block-components-totals-footer-item-tax-value {
	color: transparent !important;
	position: relative;
	display: inline-block;
	min-width: 24px;
}
body.janson-country-pending .wp-block-woocommerce-checkout-order-summary-shipping-block .wc-block-components-totals-item__value::after,
body.janson-address-incomplete .wp-block-woocommerce-checkout-order-summary-shipping-block .wc-block-components-totals-item__value::after,
body.janson-country-pending .wc-block-components-totals-footer-item-tax-value::after,
body.janson-address-incomplete .wc-block-components-totals-footer-item-tax-value::after {
	content: "--";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: #555;
}
/* Disabled 2026-09-22 (see comment above) -- no longer referenced by any
   animation: property, kept only so re-enabling the shimmer look later is a
   one-line change instead of rewriting it from scratch. */
@keyframes janson-fda-shimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

/* ============================================================================
 * FDA Fee — small caption underneath, in both Cart Totals and Checkout order
 * summary. Uses the existing (empty) WC totals-item description slot for
 * this fee row — no DOM node added, just CSS content on a real empty div
 * WooCommerce already renders for every totals item.
 * ========================================================================== */
.wc-block-components-totals-fees__fda-fee .wc-block-components-totals-item__description:empty::before {
	content: "Applies to US orders only";
	display: block;
	font-size: 11px;
	color: #767676;
	margin-top: 2px;
}

/* ============================================================================
 * Cart page: "Shipping will be calculated at checkout" — WooCommerce's own
 * native disclaimer, shown when no shipping rate can be resolved yet (Zone 1
 * is DHL-only now, which needs a full address the Cart page doesn't collect -
 * see decisions.md). Restyled to match the site's branding instead of WC's
 * plain default text; the message itself is left alone since it's accurate.
 * ========================================================================== */
.wc-block-components-totals-footer-item-shipping {
	font-size: 18px !important;
	color: #00291d !important;
	font-weight: 600 !important;
	margin-top: 4px !important;
}

/* ============================================================================
 * Extend "pending" and "incomplete" gating to Shipping options, Payment
 * options, and the Proceed/Place Order button (same janson-country-pending /
 * janson-address-incomplete classes built for the FDA fee/totals, from
 * woocommerce_cart's isCustomerDataUpdating() + safety-timeout, and the
 * per-country required-field check, both in janson-fda-fee-checkout.js).
 *
 * Confirmed via live testing: both the Shipping options radio list and the
 * Payment options gateway list can show STALE content for over a second
 * after a country change (e.g. still "Credit/Debit Card (Wompi)" selected
 * right after switching to a quote-mode country) - not just cosmetic, the
 * Proceed button stayed fully clickable throughout. Dimming + pointer-events
 * disables interaction without touching any DOM node WooCommerce/React owns
 * (CSS-only, same principle as the rest of this feature).
 * ========================================================================== */
body.janson-country-pending .wc-block-checkout__shipping-option .wc-block-components-checkout-step__content,
body.janson-address-incomplete .wc-block-checkout__shipping-option .wc-block-components-checkout-step__content,
body.janson-country-pending .wc-block-checkout__payment-method .wc-block-components-checkout-step__content,
body.janson-address-incomplete .wc-block-checkout__payment-method .wc-block-components-checkout-step__content {
	opacity: 0.35 !important;
	pointer-events: none !important;
	transition: opacity 0.15s ease;
}
body.janson-country-pending .wc-block-components-checkout-place-order-button,
body.janson-address-incomplete .wc-block-components-checkout-place-order-button {
	opacity: 0.5 !important;
	pointer-events: none !important;
}

/* ============================================================================
 * Address-incomplete message — shown under Shipping options and Payment
 * options while a required address field (per-country, from WooCommerce's
 * own locale rules) is still empty. Distinct from janson-country-pending:
 * that state means "waiting on a real recalculation"; this one means
 * "nothing will ever come back until the customer fills this in" - no timer
 * governs it, only janson-fda-fee-checkout.js's live field-completeness
 * check. Message lives on the outer <fieldset> (not the dimmed
 * .checkout-step__content div) via ::after, so it renders at full opacity
 * even though the real content right above it is dimmed to 0.35.
 * ========================================================================== */
body.janson-address-incomplete .wc-block-checkout__shipping-option,
body.janson-address-incomplete .wc-block-checkout__payment-method {
	position: relative;
}
body.janson-address-incomplete .wc-block-checkout__shipping-option::after,
body.janson-address-incomplete .wc-block-checkout__payment-method::after {
	content: "Complete your shipping address above to see accurate options";
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #00291d;
	padding: 4px 0 0;
}

/* ===========================================================================
   Cart/checkout/order-received page banner (janson_page_banner(), see
   woocommerce-functions.php). Changed 2026-09-18: was container-width only
   (matching the H1), now breaks out to full viewport width edge-to-edge.
   The banner sits inside <article class="... max-width:1200px; padding:0
   15px">, but every ancestor above that (#main, #primary, #content, body)
   is already unpadded full-width -- so the standard "break out of a
   centered container" trick works cleanly: pull the element to align with
   the true viewport edges via left:50%/margin-left:-50vw regardless of how
   deeply nested/padded it is.
   =========================================================================== */
/* 100vw always equals the FULL window width including the vertical
   scrollbar, while the real visible content area (clientWidth) is
   narrower by the scrollbar's width whenever one is present -- so on any
   cart/checkout page tall enough to scroll, the old -50vw breakout
   overflowed past the true right edge by exactly the scrollbar's width,
   producing an unwanted horizontal scrollbar. --janson-full-bleed-width
   is set by janson-woo-order.js to document.documentElement.clientWidth
   (the real content width, scrollbar already excluded), so left:50% (also
   resolved against that same real width, via the containing block) and
   the width/margin below now share one consistent basis instead of a
   mismatched vw-vs-percent pair. The 100vw fallback only matters for the
   instant before that JS runs. */
.janson-page-banner {
	position: relative;
	left: 50%;
	right: 50%;
	width: var(--janson-full-bleed-width, 100vw);
	margin-left: calc(var(--janson-full-bleed-width, 100vw) / -2);
	margin-right: calc(var(--janson-full-bleed-width, 100vw) / -2);
	margin-bottom: 24px;
}
.janson-page-banner img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

/* Height cap above was added 2026-09-18: at native aspect ratio (1366x291)
   "height: auto" made the banner grow taller as it went full-bleed on wide
   screens (e.g. ~306px at 1440px wide, more on larger monitors) -- a fixed
   height + object-fit: cover keeps it a consistent, shorter band regardless
   of viewport width, cropping top/bottom evenly instead of stretching. */
@media (max-width: 767px) {
	.janson-page-banner img {
		height: 160px;
	}
}

/* ===========================================================================
   Cart totals: hide the FDA Fee row and the "Estimated total" row's label +
   price, per request — only Subtotal and the Shipping row stay visible.
   The FDA Fee block's own description ("Applies to US orders only") is
   inside the same block, so hiding the block removes both in one step.

   Bug fixed 2026-09-07: an earlier version of this rule hid the ENTIRE
   "Estimated total" wrapper. That broke a THIRD cart state this hadn't been
   tested against — when no shipping rate has been calculated at all yet
   (e.g. country is set but city/state/postcode aren't filled in), WC nests
   its OWN "Shipping & handling at checkout" disclaimer paragraph
   (.wc-block-components-totals-footer-item-shipping) INSIDE this same
   wrapper's description, not in the separate shipping block used once a
   real rate exists. Hiding the whole wrapper hid that disclaimer too,
   leaving no shipping message visible at all in that state. Now only the
   label/value are hidden, and the wrapper's own border-top (the only
   divider in this box, confirmed via computed style) is removed
   explicitly, so the disclaimer paragraph stays visible with no line above
   it whichever state produced it.
   =========================================================================== */
.wp-block-woocommerce-cart-totals-block .wp-block-woocommerce-cart-order-summary-fee-block {
	display: none !important;
}
/* Request 2026-09-07: hide the WHOLE "Estimated total" row (label, value,
   loading skeleton, and the "Shipping & handling at checkout" disclaimer
   nested in its description for the no-rate-yet state) -- user wants ZERO
   shipping details shown on the cart page in any state, not just the price.
   This one rule replaces three narrower ones (label/value-only, then a
   skeleton-specific fix) that existed only to keep this row's disclaimer
   text visible -- no longer needed now that the whole row is hidden. */
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	display: none !important;
}

/* ===========================================================================
   Cart totals: Subtotal and Shipping now sit directly next to each other
   (FDA Fee/Estimated total hidden between them, see the rules above) — tighten
   the gap by removing Subtotal's own bottom padding and Shipping's own top
   padding, rather than leaving WC's default 20px+20px gap made for when a
   fee row used to sit between them.
   =========================================================================== */
.wp-block-woocommerce-cart-order-summary-subtotal-block {
	padding-bottom: 0 !important;
}
.wp-block-woocommerce-cart-order-summary-shipping-block {
	display: none !important;
}
/* The "no rate calculated yet" state (native disclaimer nested inside the
   "Estimated total" wrapper) is a DIFFERENT element — it carries no
   block-specific class of its own, only the bare wrapper class, so the
   rule above never matched it. This is the one actually seen for a plain
   "Shipping & handling at checkout" row with no real rate yet. */
.wp-block-woocommerce-cart-totals-block .wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	padding-top: 0 !important;
}