/* ============================================
   SHIKO THEME - WOOCOMMERCE OVERRIDES
   v1.6.1.5 — Full UX overhaul
   ============================================ */

/* --- General WooCommerce form styling --- */
body.shiko-theme .woocommerce form .form-row { margin-bottom: 16px; }
body.shiko-theme .woocommerce form .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--shiko-text);
}
body.shiko-theme .woocommerce form .form-row .required { color: var(--shiko-accent); }

body.shiko-theme .woocommerce form .form-row input.input-text,
body.shiko-theme .woocommerce form .form-row textarea,
body.shiko-theme .woocommerce form .form-row select,
body.shiko-theme .woocommerce .select2-container--default .select2-selection--single,
body.shiko-theme .woocommerce-page .select2-container--default .select2-selection--single {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    height: auto;
    line-height: 1.5;
}

body.shiko-theme .woocommerce form .form-row input.input-text:focus,
body.shiko-theme .woocommerce form .form-row textarea:focus,
body.shiko-theme .woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--shiko-accent);
    box-shadow: 0 0 0 3px rgba(228, 3, 3, 0.1);
}

/* 3.17.1: Digital-account PDPs use decision cards, not quantity picking. */
body.shiko-theme.single-product.shiko-pdp-single-qty .summary form.cart .quantity {
    display: none !important;
}

/* Select2 styling */
.select2-container--default .select2-selection--single {
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    background: var(--shiko-input-bg) !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: var(--shiko-radius) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--shiko-text) !important;
    line-height: 1.5 !important;
    padding: 0 14px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px !important;
}
.select2-dropdown {
    background: var(--shiko-bg-secondary) !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: var(--shiko-radius) !important;
}
.select2-results__option {
    color: var(--shiko-text) !important;
    padding: 8px 14px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--shiko-accent) !important;
    color: #fff !important;
}



/* ===================================================================
   CART PAGE — v1.9.18 Complete rewrite
   Overrides WooCommerce responsive table & smallscreen styles
   =================================================================== */

/* Container */
body.shiko-theme.woocommerce-cart .woocommerce {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 10px 80px;
}

/* Hide default title */
body.shiko-theme.woocommerce-cart .entry-title,
body.shiko-theme.woocommerce-cart .page-title {
    display: none !important;
}

/* --- Kill WC responsive table ::before labels --- */
body.shiko-theme.woocommerce-cart table.shop_table td::before {
    display: none !important;
}

/* --- Table → card layout on ALL screens --- */
body.shiko-theme.woocommerce-cart table.shop_table {
    border: none !important;
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
    background: transparent !important;
    width: 100% !important;
}
body.shiko-theme.woocommerce-cart table.shop_table thead {
    display: none !important;
}
body.shiko-theme.woocommerce-cart table.shop_table tbody {
    display: block !important;
}

/* --- Product row = card --- */
body.shiko-theme.woocommerce-cart table.shop_table tr.cart_item,
body.shiko-theme.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--shiko-bg-secondary) !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    padding-right: 30px !important; /* space for × button */
    position: relative !important;
    margin: 0 !important;
}

/* --- All cells: reset WC responsive table --- */
body.shiko-theme.woocommerce-cart table.shop_table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    width: auto !important;
    float: none !important;
}

/* --- Remove button: × at top-right --- */
body.shiko-theme.woocommerce-cart td.product-remove {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    order: 99 !important;
}
body.shiko-theme.woocommerce-cart td.product-remove a.remove {
    color: var(--shiko-text-muted) !important;
    font-size: 20px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: transparent !important;
    line-height: 1 !important;
    text-decoration: none !important;
    z-index: 8 !important;
    pointer-events: auto !important;
}
body.shiko-theme.woocommerce-cart td.product-remove a.remove:hover {
    background: rgba(228,3,3,0.1) !important;
    color: var(--shiko-accent) !important;
}

/* --- Thumbnail --- */
body.shiko-theme.woocommerce-cart td.product-thumbnail {
    width: 64px !important;
    flex-shrink: 0 !important;
    order: 1 !important;
}
body.shiko-theme.woocommerce-cart td.product-thumbnail a {
    display: block !important;
}
body.shiko-theme.woocommerce-cart td.product-thumbnail img {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid var(--shiko-border) !important;
}

/* --- Product name --- */
body.shiko-theme.woocommerce-cart td.product-name {
    flex: 1 !important;
    min-width: 0 !important;
    order: 2 !important;
}
body.shiko-theme.woocommerce-cart td.product-name a {
    color: var(--shiko-text) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: block !important;
}
body.shiko-theme.woocommerce-cart td.product-name dl.variation {
    margin: 4px 0 0 !important;
}
body.shiko-theme.woocommerce-cart td.product-name dl.variation dt,
body.shiko-theme.woocommerce-cart td.product-name dl.variation dd {
    font-size: 11px !important;
    color: var(--shiko-text-muted) !important;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- Price --- */
body.shiko-theme.woocommerce-cart td.product-price {
    font-size: 12px !important;
    color: var(--shiko-text-muted) !important;
    order: 5 !important;
}

/* --- Quantity --- */
body.shiko-theme.woocommerce-cart td.product-quantity {
    flex-shrink: 0 !important;
    order: 3 !important;
}
body.shiko-theme.woocommerce-cart td.product-quantity .quantity {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: var(--shiko-bg-tertiary) !important;
}
body.shiko-theme.woocommerce-cart td.product-quantity .qty {
    width: 40px !important;
    height: 36px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    color: var(--shiko-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    -moz-appearance: textfield !important;
}
body.shiko-theme.woocommerce-cart td.product-quantity .qty::-webkit-inner-spin-button,
body.shiko-theme.woocommerce-cart td.product-quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

/* --- Subtotal --- */
body.shiko-theme.woocommerce-cart td.product-subtotal {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--shiko-accent) !important;
    margin-left: auto !important;
    order: 4 !important;
}
body.shiko-theme.woocommerce-cart td.product-subtotal .woocommerce-Price-amount {
    color: var(--shiko-accent) !important;
}

/* --- Actions row (update cart + coupon) --- */
body.shiko-theme.woocommerce-cart table.shop_table tr td.actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    background: transparent !important;
    border: none !important;
}
body.shiko-theme.woocommerce-cart .coupon {
    display: flex !important;
    gap: 6px !important;
    flex: 1 !important;
}
body.shiko-theme.woocommerce-cart .coupon label {
    display: none !important;
}
body.shiko-theme.woocommerce-cart .coupon input.input-text {
    flex: 1 !important;
    padding: 10px 12px !important;
    background: var(--shiko-bg-secondary) !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: 8px !important;
    color: var(--shiko-text) !important;
    font-size: 13px !important;
    font-family: inherit !important;
}
body.shiko-theme.woocommerce-cart .coupon button,
body.shiko-theme.woocommerce-cart button[name="update_cart"] {
    padding: 10px 16px !important;
    font-size: 13px !important;
    background: var(--shiko-bg-secondary) !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: 8px !important;
    color: var(--shiko-text) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-family: inherit !important;
}
body.shiko-theme.woocommerce-cart .coupon button:hover,
body.shiko-theme.woocommerce-cart button[name="update_cart"]:hover {
    border-color: var(--shiko-accent) !important;
    color: var(--shiko-accent) !important;
}
/* Disabled update button — subtle, not red */
body.shiko-theme.woocommerce-cart button[name="update_cart"]:disabled {
    opacity: 0.4 !important;
    cursor: default !important;
}

/* --- Cart totals card --- */
body.shiko-theme.woocommerce-cart .cart-collaterals {
    display: block !important;
    width: 100% !important;
    float: none !important;
}
body.shiko-theme.woocommerce-cart .cart_totals {
    background: var(--shiko-bg-secondary) !important;
    border: 1px solid var(--shiko-border) !important;
    border-radius: 12px !important;
    padding: 14px !important;
    width: 100% !important;
    float: none !important;
    margin-top: 20px !important;
}
body.shiko-theme.woocommerce-cart .cart_totals h2 {
    font-size: 15px !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--shiko-border) !important;
    color: var(--shiko-text) !important;
}
body.shiko-theme.woocommerce-cart .cart_totals table {
    border: none !important;
    background: transparent !important;
}
body.shiko-theme.woocommerce-cart .cart_totals th,
body.shiko-theme.woocommerce-cart .cart_totals td {
    background: transparent !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--shiko-border) !important;
    font-size: 13px !important;
    color: var(--shiko-text-secondary) !important;
}
body.shiko-theme.woocommerce-cart .cart_totals .order-total th,
body.shiko-theme.woocommerce-cart .cart_totals .order-total td {
    font-size: 16px !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    padding-top: 12px !important;
    color: var(--shiko-text) !important;
}
body.shiko-theme.woocommerce-cart .cart_totals .order-total td .woocommerce-Price-amount {
    color: var(--shiko-accent) !important;
}
/* Cart totals responsive table — kill labels */
body.shiko-theme.woocommerce-cart .cart_totals td::before {
    display: none !important;
}

/* --- Proceed to checkout --- */
body.shiko-theme.woocommerce-cart .wc-proceed-to-checkout a {
    display: block !important;
    padding: 14px 20px !important;
    background: var(--shiko-accent) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    margin-top: 12px !important;
}
body.shiko-theme.woocommerce-cart .wc-proceed-to-checkout a:hover {
    opacity: 0.9 !important;
}

/* Hide proceed button when sticky bar is visible */
body.shiko-theme.shiko-has-sticky-checkout .woocommerce-cart .wc-proceed-to-checkout {
    display: none !important;
}

/* --- Sticky checkout bar --- */
.shiko-sticky-checkout {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--shiko-bg-secondary);
    border-top: 1px solid var(--shiko-border);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
}
.shiko-sticky-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.shiko-sticky-total { flex: 1; }
.shiko-sticky-label { display: block; font-size: 11px; color: var(--shiko-text-muted); }
.shiko-sticky-amount { font-size: 20px; font-weight: 700; color: var(--shiko-accent); }
.shiko-sticky-save { display: block; font-size: 11px; color: var(--shiko-success); font-weight: 500; }
.shiko-sticky-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    background: var(--shiko-accent);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    white-space: nowrap;
}
.shiko-sticky-btn:hover { opacity: 0.9; }
body.shiko-has-sticky-checkout { padding-bottom: 80px; }

/* --- WC messages (success/error/info) --- */
body.shiko-theme.woocommerce-cart .woocommerce-message,
body.shiko-theme.woocommerce-cart .woocommerce-error,
body.shiko-theme.woocommerce-cart .woocommerce-info {
    background: var(--shiko-bg-secondary) !important;
    border: 1px solid var(--shiko-border) !important;
    border-left: 4px solid var(--shiko-accent) !important;
    border-radius: 8px !important;
    color: var(--shiko-text) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    font-size: 14px !important;
}
body.shiko-theme.woocommerce-cart .woocommerce-message a,
body.shiko-theme.woocommerce-cart .woocommerce-info a {
    color: var(--shiko-accent) !important;
}
body.shiko-theme.woocommerce-cart .woocommerce-message::before,
body.shiko-theme.woocommerce-cart .woocommerce-error::before,
body.shiko-theme.woocommerce-cart .woocommerce-info::before {
    color: var(--shiko-accent) !important;
}

/* Hide Ecomus emoji trust badges */
body.shiko-theme.shiko-cart-page-body [class*="trust"],
body.shiko-theme.shiko-cart-page-body [class*="safe-pay"] {
    display: none !important;
}

/* ===== CHECKOUT PAGE — Clean form layout ===== */

body.shiko-theme.woocommerce-checkout .woocommerce {
    max-width: var(--shiko-max-width);
    margin: 0 auto;
    padding: 0 16px 60px;
}

/* Hide default checkout title */
body.shiko-theme.woocommerce-checkout .entry-title,
body.shiko-theme.woocommerce-checkout .page-title {
    display: none !important;
}

/* 2-column layout */
body.shiko-theme.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    max-width: 100%;
}
body.shiko-theme.woocommerce-checkout #customer_details {
    grid-column: 1;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    padding: 24px;
}
body.shiko-theme.woocommerce-checkout .woocommerce-checkout-review-order {
    grid-column: 2;
    grid-row: 1 / span 10;
    position: sticky;
    top: 80px;
    height: fit-content;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    padding: 24px;
}
body.shiko-theme.woocommerce-checkout #payment {
    grid-column: 1;
}
body.shiko-theme.woocommerce-checkout h3 {
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--shiko-border);
    color: var(--shiko-text);
}
body.shiko-theme.woocommerce-checkout .col2-set {
    display: block;
}

/* Form fields */
body.shiko-theme.woocommerce-checkout .form-row {
    margin-bottom: 14px;
}
body.shiko-theme.woocommerce-checkout .form-row label {
    font-size: 13px;
    font-weight: 600;
    color: var(--shiko-text);
    margin-bottom: 6px;
    display: block;
}
body.shiko-theme.woocommerce-checkout .form-row input.input-text,
body.shiko-theme.woocommerce-checkout .form-row select,
body.shiko-theme.woocommerce-checkout .form-row textarea {
    background: var(--shiko-input-bg);
    color: var(--shiko-text);
    border: 1px solid var(--shiko-border);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    width: 100%;
}
body.shiko-theme.woocommerce-checkout .form-row input:focus,
body.shiko-theme.woocommerce-checkout .form-row select:focus {
    border-color: var(--shiko-accent);
    outline: none;
}

/* Order review table */
body.shiko-theme.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}
body.shiko-theme.woocommerce-checkout-review-order-table th,
body.shiko-theme.woocommerce-checkout-review-order-table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--shiko-border);
    font-size: 13px;
    color: var(--shiko-text-secondary);
}
body.shiko-theme.woocommerce-checkout-review-order-table .order-total td {
    font-size: 18px;
    font-weight: 700;
    color: var(--shiko-accent);
}
.shiko-checkout-item-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.shiko-checkout-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--shiko-border);
    flex-shrink: 0;
}

/* Place order button */
body.shiko-theme.woocommerce-checkout #place_order {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    background: var(--shiko-accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 12px;
    transition: opacity 0.2s;
}
body.shiko-theme.woocommerce-checkout #place_order:hover {
    opacity: 0.9;
}

/* Payment methods — container */
body.shiko-theme.woocommerce-checkout #payment {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    padding: 10px;
}
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

/* Select2 (country) dark mode */
body.shiko-theme .select2-container--default .select2-selection--single {
    background: var(--shiko-input-bg) !important;
    border-color: var(--shiko-border) !important;
    border-radius: 8px !important;
    height: 44px !important;
}
body.shiko-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--shiko-text) !important;
    line-height: 42px !important;
    padding: 0 14px !important;
}
body.shiko-theme .select2-dropdown {
    background: var(--shiko-bg-secondary) !important;
    border-color: var(--shiko-border) !important;
}
body.shiko-theme .select2-results__option {
    color: var(--shiko-text) !important;
    padding: 8px 14px !important;
}
body.shiko-theme .select2-results__option--highlighted {
    background: var(--shiko-bg-tertiary) !important;
}
body.shiko-theme .select2-search__field {
    background: var(--shiko-input-bg) !important;
    color: var(--shiko-text) !important;
}

/* Validation */
body.shiko-theme.woocommerce-checkout .form-row.woocommerce-validated input {
    border-color: #28a745 !important;
}
body.shiko-theme.woocommerce-checkout .form-row.woocommerce-invalid input {
    border-color: #dc3545 !important;
}

/* Checkout — single column, centered */
body.shiko-theme.woocommerce-checkout form.checkout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
body.shiko-theme.woocommerce-checkout .woocommerce-checkout-review-order {
    position: static;
}
@media (max-width: 768px) {
    body.shiko-theme.woocommerce-checkout #payment {
        padding: 10px;
    }
}

/* ===== PAYMENT METHODS — Layout ===== */
/* Each card: flex row → radio + label inline, payment_box wraps below */
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--shiko-border);
    border-radius: 8px;
    margin-bottom: 6px;
    background: var(--shiko-bg-tertiary);
}
/* Hidden toggle — must beat the flex rule above */
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method.shiko-payment-hidden {
    display: none !important;
}
/* Radio */
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input[type="radio"] {
    accent-color: var(--shiko-accent);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin: 0 10px 0 0;
    cursor: pointer;
}
/* Label: image + text in a row */
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--shiko-text);
}
/* Payment images — uniform 80×48, dark-mode safe */
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
    width: 80px !important;
    height: 48px !important;
    object-fit: contain !important;
    background: rgba(255,255,255,0.95) !important;
    padding: 4px 6px !important;
    border-radius: 6px !important;
    flex-shrink: 0;
}
/* Payment description: full width below */
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box {
    flex-basis: 100%;
    background: transparent;
    color: var(--shiko-text-secondary);
    padding: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    border-top: none;
    margin-top: 4px;
}
body.shiko-theme.woocommerce-checkout #payment div.payment_box::before { display: none; }

/* Active payment method — highlight */
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.shiko-payment-active,
body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
    background: var(--shiko-bg-tertiary);
}

/* Place order button */
body.shiko-theme.woocommerce-checkout #place_order {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    margin-top: 8px;
}

/* Mobile: larger payment images, smaller description text */
@media (max-width: 768px) {
    body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label img {
        width: 100px !important;
        height: 56px !important;
    }
    body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method div.payment_box {
        font-size: 11px;
        line-height: 1.4;
        padding: 6px 0 0;
    }
    body.shiko-theme.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
        font-size: 13px;
    }
}

/* ===== ACCOUNT PAGES ===== */
/* =====================================================================
 * MY ACCOUNT — Gaming-themed login + dashboard
 * ===================================================================== */

body.shiko-theme .woocommerce-account .woocommerce {
    max-width: var(--shiko-max-width);
    margin: 0 auto;
    padding: 0 20px 60px;
}

/* --- LOGIN/REGISTER PAGE (not logged in) --- */

.shiko-account-hero {
    text-align: center;
    padding: 32px 0 24px;
}
.shiko-account-hero-icon { font-size: 40px; margin-bottom: 8px; line-height: 1; }
.shiko-account-hero-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--shiko-text);
    margin: 0 0 6px;
    letter-spacing: -0.5px;
}
.shiko-account-hero-sub {
    color: var(--shiko-text-muted);
    font-size: 14px;
    margin: 0;
}

.shiko-account-tabs {
    display: flex;
    justify-content: center;
    gap: 4px;
    max-width: 300px;
    margin: 0 auto 28px;
    background: var(--shiko-bg-tertiary);
    border-radius: 12px;
    padding: 4px;
}
.shiko-account-tab {
    flex: 1;
    padding: 10px 0;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--shiko-text-muted);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.shiko-account-tab.active {
    background: var(--shiko-accent);
    color: #fff;
}

.shiko-account-card {
    max-width: 440px;
    margin: 0 auto;
    background: var(--shiko-bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--shiko-border);
    padding: 32px 28px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
[data-theme="dark"] .shiko-account-card {
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

/* ── Desktop Split Layout (Proposal A) ──
   Two-column: left branded panel + right form card.
   Mobile: stacks to single-column with brand panel on top. */
.shiko-account-split {
    display: flex;
    flex-direction: column;
}
.shiko-account-split-brand {
    display: none;
}
@media (min-width: 960px) {
    .shiko-account-split {
        display: grid;
        grid-template-columns: 1fr 460px;
        min-height: calc(100vh - 240px);
        align-items: stretch;
        gap: 0;
    }
    .shiko-account-split-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #B7080A 0%, #8B0000 40%, #1a1a2e 100%);
        border-radius: 20px;
        padding: 60px 48px;
        position: relative;
        overflow: hidden;
    }
    .shiko-account-split-brand::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(255,255,255,0.04);
    }
    .shiko-account-split-brand::after {
        content: '';
        position: absolute;
        bottom: -20%;
        left: -10%;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255,255,255,0.03);
    }
    .shiko-account-split-brand-inner {
        position: relative;
        z-index: 1;
        text-align: center;
    }
    .shiko-account-split-icon {
        font-size: 64px;
        margin-bottom: 20px;
        line-height: 1;
    }
    .shiko-account-split-title {
        color: #fff;
        font-size: 32px;
        font-weight: 800;
        margin: 0 0 8px;
        letter-spacing: -0.5px;
    }
    .shiko-account-split-tagline {
        color: rgba(255,255,255,0.7);
        font-size: 15px;
        margin: 0 0 36px;
    }
    .shiko-account-split-features {
        display: flex;
        flex-direction: column;
        gap: 14px;
        text-align: left;
    }
    .shiko-account-split-feat {
        color: rgba(255,255,255,0.85);
        font-size: 14px;
        font-weight: 500;
        padding: 10px 16px;
        background: rgba(255,255,255,0.08);
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,0.1);
    }
    .shiko-account-split-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 40px;
        /* 3.14.25 (ACC-2): subtle tint on the right (action) panel so the
           split visually announces which side is the action. Color is
           derived from --shiko-bg-tertiary so dark mode inherits naturally. */
        background: linear-gradient(180deg, rgba(228, 3, 3, 0.025), rgba(228, 3, 3, 0.05));
        border-radius: 16px;
        padding-block: 40px;
        padding-inline: 40px;
    }
    [dir="rtl"] .shiko-account-split-form {
        padding-left: 0;
        padding-right: 40px;
    }
    .shiko-account-split .shiko-account-hero { display: none; }
    .shiko-account-split .shiko-account-card {
        max-width: 100%;
    }
    .shiko-account-split .shiko-account-trust {
        justify-content: flex-start;
        gap: 20px;
    }
}

/* ── Wide Centered Card with Banner (Proposal B) ──
   Desktop: top gradient banner + wider centered card.
   Activate by replacing "shiko-account-split" with
   "shiko-account-banner" on the wrapper div. */
@media (min-width: 960px) {
    .shiko-account-banner {
        max-width: 680px;
        margin: 0 auto;
    }
    .shiko-account-banner .shiko-account-hero {
        background: linear-gradient(135deg, #B7080A 0%, #8B0000 100%);
        border-radius: 16px;
        padding: 40px 32px;
        margin-bottom: -32px;
        position: relative;
        z-index: 1;
    }
    .shiko-account-banner .shiko-account-hero-title,
    .shiko-account-banner .shiko-account-hero-sub {
        color: #fff !important;
    }
    .shiko-account-banner .shiko-account-card {
        max-width: 100%;
        position: relative;
        z-index: 2;
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

.shiko-account-panel { display: none; }
.shiko-account-panel.active { display: block; }

/* Social login */
.shiko-social-login { margin-bottom: 4px; }
.shiko-social-login .nsl-container { margin: 0; }
.shiko-social-login .nsl-container-buttons { gap: 8px; }
.shiko-social-login .nsl-container-buttons a {
    border-radius: 10px;
    border: 1px solid var(--shiko-border);
    background: var(--shiko-bg-tertiary);
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.15s;
}
.shiko-social-login .nsl-container-buttons a:hover {
    border-color: var(--shiko-accent);
}

.shiko-account-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--shiko-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.shiko-account-divider::before,
.shiko-account-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--shiko-border);
}

/* 3.14.25 (ACC-2): eyebrow above the form panel. Small caps, brand
   accent. On desktop split it lives at the top of the form column so
   the right side reads "this is the action"; on mobile it sits above
   the hero icon. */
.shiko-account-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--shiko-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-block-end: 12px;
    text-align: center;
}
.shiko-account-split .shiko-account-eyebrow {
    text-align: start;
}

/* 3.14.24 (ACC-1): passwordless sign-in stack — WhatsApp (filled green)
   on top + Email magic-link (outline) below. Both rendered above the
   collapsed password form so the primary path matches what Egyptian
   customers already use to reach us. */
.shiko-account-passwordless {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-block-end: 20px;
}
.shiko-account-wa-btn,
.shiko-account-magic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 12px;
    padding-inline: 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
    min-height: 48px;
    line-height: 1.2;
}
.shiko-account-wa-btn {
    background: #25D366;
    color: #ffffff;
    border: 2px solid #25D366;
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.25);
}
.shiko-account-wa-btn:hover,
.shiko-account-wa-btn:focus-visible {
    background: #128C7E;
    border-color: #128C7E;
    color: #fff;
    outline: none;
}
.shiko-account-wa-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}
.shiko-account-magic-btn {
    background: var(--shiko-bg-secondary);
    color: var(--shiko-text);
    border: 1px solid var(--shiko-border);
}
.shiko-account-magic-btn:hover,
.shiko-account-magic-btn:focus-visible {
    border-color: var(--shiko-accent);
    color: var(--shiko-accent);
    outline: none;
}
.shiko-account-magic-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}
.shiko-account-passwordless-hint {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--shiko-text-muted);
    text-align: center;
}

/* 3.14.24 (ACC-1): collapsed password form. Default closed; opens on
   click of the summary row. Marker chevron rotates 180° on open via
   :where the parent has [open]. */
.shiko-account-password-toggle {
    margin-block-start: 8px;
}
.shiko-account-password-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-block: 10px;
    list-style: none;
    cursor: pointer;
    color: var(--shiko-text-muted);
    font-size: 13px;
    font-weight: 600;
    user-select: none;
    border-radius: var(--shiko-radius);
    transition: color .15s ease;
}
.shiko-account-password-summary::-webkit-details-marker { display: none; }
.shiko-account-password-summary::marker { content: ''; }
.shiko-account-password-summary:hover { color: var(--shiko-text); }
.shiko-account-password-chev {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}
.shiko-account-password-toggle[open] .shiko-account-password-chev {
    transform: rotate(180deg);
}
.shiko-account-password-toggle[open] .shiko-account-password-summary {
    color: var(--shiko-text);
    margin-block-end: 12px;
}
@media (prefers-reduced-motion: reduce) {
    .shiko-account-password-chev { transition: none; }
}

/* Form fields */
.shiko-form-field { margin-bottom: 16px; }
.shiko-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--shiko-text);
    margin-bottom: 6px;
}
.shiko-form-field label .required { color: var(--shiko-accent); }
.shiko-form-field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.shiko-form-field-header label { margin-bottom: 0; }
.shiko-forgot-link {
    font-size: 12px;
    color: var(--shiko-accent);
    text-decoration: none;
    font-weight: 500;
}
.shiko-forgot-link:hover { text-decoration: underline; }

.shiko-form-field input[type="text"],
.shiko-form-field input[type="email"],
.shiko-form-field input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--shiko-border);
    background: var(--shiko-bg);
    color: var(--shiko-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.shiko-form-field input:focus {
    border-color: var(--shiko-accent);
}
.shiko-field-hint {
    font-size: 11px;
    color: var(--shiko-text-muted);
    margin: 4px 0 0;
}

.shiko-remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
.shiko-remember-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--shiko-text-muted);
    cursor: pointer;
}
.shiko-remember-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--shiko-accent);
}

.shiko-account-submit {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, var(--shiko-accent), #d41010);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(183,8,10,0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.shiko-account-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(183,8,10,0.4);
}

.shiko-account-switch {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--shiko-text-muted);
}
.shiko-account-switch a,
.shiko-switch-tab {
    color: var(--shiko-accent);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    font-size: inherit;
    font-family: inherit;
}
.shiko-account-switch a:hover,
.shiko-switch-tab:hover { text-decoration: underline; }

/* Trust badges */
.shiko-account-trust {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 28px;
    flex-wrap: wrap;
}
.shiko-account-trust-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.shiko-account-trust-item span:first-child { font-size: 20px; }
.shiko-account-trust-item span:last-child {
    font-size: 11px;
    color: var(--shiko-text-muted);
    letter-spacing: 0.3px;
}

/* Hide default WooCommerce elements on login page */
body.shiko-theme .woocommerce-account .u-columns { display: none; }
body.shiko-theme .woocommerce-account h2:not(.shiko-account-hero-title) { display: none; }

/* Hide the page-level h1 "My account" when our custom hero is showing */
body.shiko-account-page-body > .site-content .shiko-container > h1,
body.shiko-account-page-body .entry-content > .woocommerce > h2 { display: none; }

/* --- LOGGED-IN DASHBOARD --- */

body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
}

body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid var(--shiko-border);
}
body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }

body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 20px;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}
body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-accent);
}

body.shiko-theme .woocommerce-account .woocommerce-MyAccount-content {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding: 32px;
    min-height: 300px;
}

@media (min-width: 769px) {
    body.shiko-theme .woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content {
        display: grid;
    }
    .woocommerce-account .woocommerce {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 24px;
        align-items: start;
    }
    .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
    .woocommerce-account .woocommerce-MyAccount-navigation { position: sticky; top: 90px; }
}

@media (max-width: 480px) {
    .shiko-account-card { padding: 24px 20px; }
    .shiko-account-hero-title { font-size: 24px; }
    .shiko-account-trust { gap: 20px; }
}

/* Order status badges */
body.shiko-theme .woocommerce-orders-table__cell-order-status mark {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text-secondary);
}
body.shiko-theme .woocommerce-orders-table__cell-order-status mark.order-status--completed { background: #D1FAE5; color: #065F46; }
body.shiko-theme .woocommerce-orders-table__cell-order-status mark.order-status--processing { background: #DBEAFE; color: #1E40AF; }
body.shiko-theme .woocommerce-orders-table__cell-order-status mark.order-status--on-hold { background: #FEF3C7; color: #92400E; }
body.shiko-theme .woocommerce-orders-table__cell-order-status mark.order-status--cancelled { background: #FEE2E2; color: #991B1B; }

/* ===== SINGLE PRODUCT PAGE — Revamped v1.6.3 ===== */

/* PDP Container — reset WC defaults */
.shiko-pdp {
    max-width: var(--shiko-max-width);
    margin: 0 auto;
}
/* Kill WC default float layout */
.shiko-pdp div.images,
.shiko-pdp .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
}
.shiko-pdp .summary.entry-summary {
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}
.shiko-pdp .woocommerce-tabs {
    clear: none !important;
}

/* Hero: 2-column grid */
.shiko-pdp-hero {
    display: grid;
    /* 3.3.97: clamp gallery column to a sensible max so very wide
       viewports don't blow up the cover image; summary takes the
       remaining space fluidly. */
    grid-template-columns: minmax(280px, clamp(320px, 38%, 560px)) minmax(360px, 1fr);
    gap: 24px;
    align-items: start;
    margin-bottom: 18px;
}

/* Gallery — minimal approach: DON'T touch FlexSlider internals */
.shiko-pdp-gallery {
    position: sticky;
    top: 76px;
}

/* Kill WC default float/width, force opacity visible */
.shiko-pdp-gallery .woocommerce-product-gallery,
.shiko-pdp-gallery .images {
    float: none !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
    position: relative;
}

/* FlexSlider viewport — rounded, bordered container, no clipping */
.shiko-pdp-gallery .flex-viewport {
    border-radius: var(--shiko-radius-lg);
    border: 1px solid var(--shiko-border);
    background: var(--shiko-bg-tertiary);
    overflow: hidden;
    /* 3.3.99: cap viewport at the gallery container width even when
       FlexSlider sets a larger inline width from a previous render.
       Without this the carousel overflows its grid column when the
       window is resized smaller. */
    max-width: 100% !important;
}
/* 3.3.99: ditto for the inner slide list and individual slides — JS
   resets the inline values on resize, this CSS makes sure the visual
   doesn't flash overflow before JS catches up. */
.shiko-pdp-gallery .flex-viewport ul.slides {
    max-width: 100% !important;
}
.shiko-pdp-gallery .woocommerce-product-gallery__image {
    overflow: visible !important;
}
.shiko-pdp-gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-height: none !important;
    object-fit: contain !important;
}
/* 3.3.67: hide every text-bearing element inside / around the product
   gallery. Captions, descriptions, alt-text-as-caption fallbacks, and
   the PhotoSwipe lightbox caption all suppressed — customers asked
   for image-only product galleries. */
.shiko-pdp-gallery figcaption,
.shiko-pdp-gallery .woocommerce-product-gallery__image figcaption,
.shiko-pdp-gallery .wp-caption-text,
.pswp__caption,
.pswp__caption__center,
.pswp__top-bar .pswp__counter {
    display: none !important;
}

/* Single-image (no FlexSlider) — style the image div directly */
.shiko-pdp-gallery .woocommerce-product-gallery--without-images .woocommerce-product-gallery__image,
.shiko-pdp-gallery .woocommerce-product-gallery:not(.woocommerce-product-gallery--with-images) .woocommerce-product-gallery__image {
    border-radius: var(--shiko-radius-lg);
    border: 1px solid var(--shiko-border);
    background: var(--shiko-bg-tertiary);
    overflow: hidden;
}

/* Sale badge */
.shiko-pdp-gallery .onsale,
.shiko-pdp .onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
}

/* Zoom trigger icon */
.shiko-pdp-gallery .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.shiko-pdp-gallery .woocommerce-product-gallery__trigger:hover {
    opacity: 1;
}

/* Thumbnails (<ol> from FlexSlider) */
.shiko-pdp-gallery .flex-control-thumbs {
    display: flex !important;
    gap: 8px;
    margin: 10px 0 0 !important;
    padding: 0;
    list-style: none;
    overflow-x: auto;
}
.shiko-pdp-gallery .flex-control-thumbs li {
    flex: 0 0 56px;
    width: 56px !important;
    margin: 0 !important;
}
.shiko-pdp-gallery .flex-control-thumbs li img {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent !important;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0.5;
    display: block;
}
.shiko-pdp-gallery .flex-control-thumbs li img:hover,
.shiko-pdp-gallery .flex-control-thumbs li img.flex-active {
    border-color: var(--shiko-accent) !important;
    opacity: 1;
}

/* Summary */
.shiko-pdp-summary {
    padding: 0 !important;
}

.shiko-pdp-category {
    font-size: 11px;
    color: var(--shiko-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.shiko-pdp-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--shiko-text);
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.2;
}

.shiko-pdp-price {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--shiko-accent);
    margin-bottom: 12px;
}
.shiko-pdp-price del {
    color: var(--shiko-text-muted);
    font-weight: 400;
    font-size: 1rem;
}
.shiko-pdp-price ins {
    text-decoration: none;
    color: var(--shiko-accent);
}
.shiko-pdp-price .woocommerce-Price-amount { color: inherit; }

.shiko-pdp-excerpt {
    color: var(--shiko-text-secondary);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--shiko-border);
    overflow: visible;
}
.shiko-pdp-excerpt p { margin: 0 0 6px; }
.shiko-pdp-excerpt p:last-child { margin-bottom: 0; }
.shiko-pdp-excerpt img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; }
/* 3.3.72: WP [caption] shortcode injects width="600" on the figure
   AND on the inner img — those inline width attrs override our
   max-width:100% on narrow viewports, so the image overflowed off
   the right edge on mobile. Force responsive sizing on every
   excerpt-embedded media element. */
.shiko-pdp-excerpt figure,
.shiko-pdp-excerpt .wp-caption,
.shiko-pdp-excerpt p > a > img,
.shiko-pdp-excerpt .wp-caption img,
.shiko-pdp-excerpt figure img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box;
}

/* Mobile: collapse excerpt, hide images, show Read more */
@media (max-width: 768px) {
    .shiko-pdp-excerpt {
        max-height: 4.5em;
        overflow: hidden;
        position: relative;
        transition: max-height 0.3s ease;
    }
    .shiko-pdp-excerpt.shiko-excerpt-expanded {
        /* 3.3.71: was 200vh which still clipped on products with very
           long descriptions / tall viewports. `none` removes the cap
           entirely; we lose the expand-transition animation but
           guarantee no clipping regardless of content length. */
        max-height: none;
        overflow: visible;
    }
    .shiko-pdp-excerpt img,
    .shiko-pdp-excerpt figure {
        display: none;
    }
    .shiko-pdp-excerpt.shiko-excerpt-expanded img,
    .shiko-pdp-excerpt.shiko-excerpt-expanded figure {
        display: block;
    }
    .shiko-excerpt-toggle {
        display: block;
        font-size: 12px;
        color: var(--shiko-accent);
        cursor: pointer;
        padding: 4px 0;
        border: none;
        background: none;
        font-family: inherit;
    }
}
@media (min-width: 769px) {
    .shiko-excerpt-toggle { display: none; }
}

.shiko-pdp-summary .variations_form table.variations,
.shiko-pdp-summary form.cart table.variations {
    margin-bottom: 0 !important;
}

.shiko-pdp-summary .woocommerce-variation-add-to-cart,
.shiko-pdp-summary .single_variation_wrap {
    margin-top: 8px;
}

/* Trust Badges */
.shiko-pdp-trust {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--shiko-border);
}
.shiko-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--shiko-text-secondary);
    font-weight: 500;
}
.shiko-trust-item svg {
    width: 16px;
    height: 16px;
    stroke: #28a745;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Add to cart form inside summary */
.shiko-pdp-summary form.cart {
    margin-bottom: 0 !important;
}
.shiko-pdp-summary .variations {
    margin-bottom: 10px;
}
.shiko-pdp-summary .variations td,
.shiko-pdp-summary .variations th {
    background: transparent;
    border: none;
    padding: 6px 0;
}
.shiko-pdp-summary .variations td.label label {
    font-size: 13px;
    font-weight: 600;
    color: var(--shiko-text);
}
.shiko-pdp-summary .variations td.value select {
    background: var(--shiko-input-bg);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    padding: 10px 14px;
    color: var(--shiko-text);
    width: 100%;
    font-size: 14px;
}
/* Add-to-cart row: qty beside button */
.shiko-pdp-summary .cart,
body.shiko-theme .product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    margin-top: 10px;
}
.shiko-pdp-summary .single_add_to_cart_button {
    flex: 1 !important;
    width: auto !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 700;
    border-radius: var(--shiko-radius) !important;
    margin-top: 0 !important;
}
/* Show qty with +/- wrapper */
.shiko-pdp-summary .quantity,
body.shiko-theme .product form.cart .quantity {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--shiko-border, #333) !important;
    border-radius: var(--shiko-radius, 8px) !important;
    overflow: hidden !important;
    background: var(--shiko-bg-tertiary, #1a1a1a) !important;
}
/* +/- buttons injected by JS */
.shiko-qty-btn {
    width: 36px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--shiko-text, #fff);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.shiko-qty-btn:hover {
    background: rgba(255,255,255,0.08);
}
.shiko-qty-btn:active {
    background: rgba(255,255,255,0.12);
}
body.shiko-theme .product .quantity .qty {
    width: 40px !important;
    height: 42px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid var(--shiko-border, #333) !important;
    border-right: 1px solid var(--shiko-border, #333) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--shiko-text, #fff) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    padding: 0 !important;
}
/* Variation price update */
.shiko-pdp-summary .woocommerce-variation-price {
    margin-bottom: 12px;
}
.shiko-pdp-summary .woocommerce-variation-price .price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--shiko-accent);
}
/* Reset variations link */
.shiko-pdp-summary .reset_variations {
    font-size: 13px;
    color: var(--shiko-text-muted);
    margin-left: 8px;
}

/* ── Collapsible Accordion Sections ── */
.shiko-pdp-section {
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--shiko-bg-secondary);
}

.shiko-pdp-accordion {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--shiko-text);
    font-family: inherit;
    text-align: left;
    transition: background 0.2s;
}
.shiko-pdp-accordion:hover {
    background: var(--shiko-bg-tertiary);
}
.shiko-pdp-accordion svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-left: auto;
    transition: transform 0.25s ease;
}
.shiko-pdp-accordion[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.shiko-pdp-review-count {
    font-size: 13px;
    color: var(--shiko-text-muted);
    font-weight: 400;
}

.shiko-pdp-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.shiko-pdp-accordion-body.open {
    max-height: 5000px;
}

.shiko-pdp-accordion-inner {
    padding: 0 20px 20px;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    line-height: 1.8;
}
.shiko-pdp-accordion-inner p {
    margin: 0 0 8px;
}
.shiko-pdp-accordion-inner p:last-child {
    margin-bottom: 0;
}
.shiko-pdp-accordion-inner table {
    width: 100%;
    border-collapse: collapse;
}
.shiko-pdp-accordion-inner table th,
.shiko-pdp-accordion-inner table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--shiko-border);
    font-size: 14px;
    text-align: left;
    background: transparent;
}
.shiko-pdp-accordion-inner table th {
    color: var(--shiko-text-muted);
    font-weight: 500;
    width: 35%;
}
.shiko-pdp-accordion-inner table td p {
    margin: 0;
}

/* ── FAQ accordion (uses .shiko-pdp-accordion shell) ── */
.shiko-pdp-faq .shiko-faq-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}
.shiko-pdp-faq .shiko-faq-q {
    margin: 0;
    font-weight: 600;
    color: var(--shiko-text);
    font-size: 15px;
    line-height: 1.45;
}
.shiko-pdp-faq .shiko-faq-a {
    margin: 4px 0 0;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    line-height: 1.6;
}
.shiko-pdp-faq[dir="rtl"] .shiko-faq-q,
.shiko-pdp-faq[dir="rtl"] .shiko-faq-a {
    text-align: right;
}

/* ── Related / Upsell Products ── */
.shiko-pdp .related.products,
.shiko-pdp .upsells.products {
    margin-top: 24px;
    clear: both;
}
.shiko-pdp .related.products > h2,
.shiko-pdp .upsells.products > h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--shiko-text);
}
.shiko-pdp .related.products ul.products,
.shiko-pdp .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.shiko-pdp .related.products ul.products::before,
.shiko-pdp .related.products ul.products::after,
.shiko-pdp .upsells.products ul.products::before,
.shiko-pdp .upsells.products ul.products::after {
    display: none !important;
}
.shiko-pdp .related.products ul.products li.product,
.shiko-pdp .upsells.products ul.products li.product {
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    overflow: hidden;
    transition: all 0.2s;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.shiko-pdp .related.products ul.products li.product:hover,
.shiko-pdp .upsells.products ul.products li.product:hover {
    border-color: var(--shiko-border-hover);
    transform: translateY(-2px);
}
.shiko-pdp .related.products ul.products li.product a img,
.shiko-pdp .upsells.products ul.products li.product a img {
    width: 100% !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    margin: 0 !important;
}
.shiko-pdp .related.products ul.products li.product .woocommerce-loop-product__title,
.shiko-pdp .upsells.products ul.products li.product .woocommerce-loop-product__title,
.shiko-pdp .related.products ul.products li.product h2,
.shiko-pdp .upsells.products ul.products li.product h2 {
    font-size: 13px !important;
    font-weight: 600;
    padding: 10px 12px 4px !important;
    margin: 0 !important;
    color: var(--shiko-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.shiko-pdp .related.products ul.products li.product .price,
.shiko-pdp .upsells.products ul.products li.product .price {
    padding: 0 12px 10px;
    font-size: 12px;
    font-weight: 700;
    color: var(--shiko-accent);
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.shiko-pdp .related.products ul.products li.product .price del,
.shiko-pdp .upsells.products ul.products li.product .price del {
    color: var(--shiko-text-muted) !important;
    font-weight: 400 !important;
    font-size: 11px !important;
}
.shiko-pdp .related.products ul.products li.product .price ins,
.shiko-pdp .upsells.products ul.products li.product .price ins {
    text-decoration: none !important;
    color: var(--shiko-accent) !important;
    font-size: 12px !important;
}
.shiko-pdp .related.products ul.products li.product .button,
.shiko-pdp .upsells.products ul.products li.product .button,
.shiko-pdp .related.products ul.products li.product .add_to_cart_button,
.shiko-pdp .upsells.products ul.products li.product .add_to_cart_button {
    display: none !important;
}
.shiko-pdp .related.products ul.products li.product .star-rating,
.shiko-pdp .upsells.products ul.products li.product .star-rating {
    display: none;
}

/* ── Responsive ──
   3.3.97: tighter intermediate breakpoints + container-width fluidity.
   Below 992px (tablet landscape and down) the PDP hero columns
   re-balance to put the gallery on top and summary below; below
   767px the layout fully stacks. The `position: sticky` on the
   gallery is also released early so it doesn't lock up at narrow
   viewports where the summary is much taller than the viewport.
*/
@media (max-width: 991px) {
    .shiko-pdp-hero {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .shiko-pdp-gallery {
        position: static;
        max-width: 600px;
        margin: 0 auto;
    }
}
@media (max-width: 767px) {
    /* 3.14.10 (PDP-1): image hero capped at 45vh on mobile + tighter
       hero gap, so title + price + first variation card fit above the
       fold at 390x844. The cap applies to the image element directly
       (not the gallery wrapper) so portrait covers fit-letterbox into
       a landscape band — preserves brand artwork without hiding it. */
    .shiko-pdp-hero {
        gap: 12px;
        margin-bottom: 12px;
    }
    .shiko-pdp-gallery {
        max-width: none;
        max-height: 45vh;
    }
    .shiko-pdp-gallery .woocommerce-product-gallery,
    .shiko-pdp-gallery .images,
    .shiko-pdp-gallery .flex-viewport,
    .shiko-pdp-gallery .woocommerce-product-gallery__image {
        max-height: 45vh !important;
    }
    .shiko-pdp-gallery .woocommerce-product-gallery__image img {
        max-height: 45vh !important;
        object-fit: contain !important;
        width: 100% !important;
        height: 45vh !important;
    }
    /* Compact excerpt to 2 lines on mobile — buys ~50px above the fold
       without losing the description (the toggle still expands it). */
    .shiko-pdp-excerpt {
        max-height: 3em;
        font-size: 13px;
        margin-block: 4px 8px;
    }
    .shiko-pdp-category { margin-block-end: 4px; }
    .shiko-pdp-title { font-size: 1.25rem; margin-block: 2px 6px; }
    .shiko-pdp-price { font-size: 1.25rem; margin-block: 0 6px; }
    .shiko-pdp-trust { grid-template-columns: 1fr 1fr; gap: 6px; }
    .shiko-pdp .related.products ul.products,
    .shiko-pdp .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* Star rating */
body.shiko-theme .woocommerce .star-rating { color: #FBBF24; }

/* Sale badge — branded, high specificity to override plugin/theme defaults */
body.shiko-theme .woocommerce span.onsale,
body.shiko-theme .onsale,
.shiko-pdp span.onsale,
.shiko-pdp-gallery span.onsale,
.woocommerce span.onsale {
    background: var(--shiko-accent, #E40303) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    margin: 0 !important;
}

/* ===== WooCommerce Notices ===== */
body.shiko-theme .woocommerce-info,
body.shiko-theme .woocommerce-message,
body.shiko-theme .woocommerce-error {
    border-top: 3px solid var(--shiko-accent) !important;
    background: var(--shiko-bg-secondary);
    color: var(--shiko-text);
    padding: 12px 16px 12px 48px;
    margin-bottom: 20px;
    border-radius: var(--shiko-radius-lg);
    position: relative;
    line-height: 1.5;
}
body.shiko-theme .woocommerce-info::before,
body.shiko-theme .woocommerce-message::before,
body.shiko-theme .woocommerce-error::before {
    color: var(--shiko-accent) !important;
}
body.shiko-theme .woocommerce-error {
    border-top-color: #e74c3c !important;
}
body.shiko-theme .woocommerce-error::before {
    color: #e74c3c !important;
}
body.shiko-theme .woocommerce-info a,
body.shiko-theme .woocommerce-message a {
    color: var(--shiko-accent);
    font-weight: 600;
}

/* v3.3.27: Notice icon font can fallback to tofu square on some cached/mobile paths.
   Hide pseudo icons and remove extra left padding for cleaner cart/checkout microcopy. */
body.shiko-theme.woocommerce-cart .woocommerce-info,
body.shiko-theme.woocommerce-cart .woocommerce-message,
body.shiko-theme.woocommerce-cart .woocommerce-error,
body.shiko-theme.woocommerce-checkout .woocommerce-info,
body.shiko-theme.woocommerce-checkout .woocommerce-message,
body.shiko-theme.woocommerce-checkout .woocommerce-error {
    padding-inline: 16px !important;
    padding-left: 16px !important;  /* fallback */
    padding-right: 16px !important; /* fallback */
}
body.shiko-theme.woocommerce-cart .woocommerce-info::before,
body.shiko-theme.woocommerce-cart .woocommerce-message::before,
body.shiko-theme.woocommerce-cart .woocommerce-error::before,
body.shiko-theme.woocommerce-checkout .woocommerce-info::before,
body.shiko-theme.woocommerce-checkout .woocommerce-message::before,
body.shiko-theme.woocommerce-checkout .woocommerce-error::before {
    display: none !important;
    content: none !important;
}
body.shiko-theme .woocommerce-info a:hover,
body.shiko-theme .woocommerce-message a:hover {
    color: var(--shiko-accent-hover);
}

/* ===== Fix blue text globally ===== */
body.shiko-theme .woocommerce a { color: var(--shiko-text); }
body.shiko-theme .woocommerce a:hover { color: var(--shiko-accent); }
body.shiko-theme .woocommerce td a,
body.shiko-theme .woocommerce th a {
    color: var(--shiko-text);
}
body.shiko-theme .woocommerce td a:hover,
body.shiko-theme .woocommerce th a:hover {
    color: var(--shiko-accent);
}

/* ===== WPLoyalty Widget Compatibility ===== */
.wlr-launcher-icon,
.wlr-myaccount-page { color: var(--shiko-text); }
.wlr-myaccount-page .wlr-heading { color: var(--shiko-text); }
.wlr-myaccount-page .wlr-point-value { color: var(--shiko-accent); }

/* ===== PayTabs Gateway Specific ===== */
.wc_payment_method .payment_box iframe {
    max-width: 100%;
    border-radius: var(--shiko-radius);
}

/* ===== Shop loop: hide default WC buttons (using card-as-link pattern) ===== */
body.shiko-theme .woocommerce ul.products li.product a.button,
body.shiko-theme .woocommerce ul.products li.product a.add_to_cart_button,
body.shiko-theme .woocommerce ul.products li.product a.product_type_variable,
body.shiko-theme .woocommerce ul.products li.product a.product_type_grouped,
body.shiko-theme .woocommerce ul.products li.product a.product_type_external {
    display: none;
}

/* ===== Product Description: Hide image captions ===== */
.shiko-pdp-section figcaption,
.shiko-pdp-section .wp-caption-text,
.woocommerce-product-details__short-description figcaption,
.woocommerce-product-details__short-description .wp-caption-text,
.woocommerce-Tabs-panel figcaption,
.woocommerce-Tabs-panel .wp-caption-text,
.product .entry-content figcaption,
.product .entry-content .wp-caption-text {
    display: none !important;
}
.shiko-pdp-section .wp-caption,
.woocommerce-product-details__short-description .wp-caption,
.product .entry-content .wp-caption {
    max-width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ===== Global: Add-to-Cart button (all product page templates) ===== */
body.shiko-theme .single_add_to_cart_button,
body.shiko-theme .product .cart .single_add_to_cart_button,
body.shiko-theme .woocommerce .single_add_to_cart_button {
    flex: 1 !important;
    width: auto !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    background: var(--shiko-accent, #E40303) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--shiko-radius, 8px) !important;
    cursor: pointer !important;
    transition: opacity 0.2s, transform 0.1s !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    margin-top: 0 !important;
}
body.shiko-theme .single_add_to_cart_button:hover {
    opacity: 0.9 !important;
}
body.shiko-theme .single_add_to_cart_button:active {
    transform: scale(0.98) !important;
}

/* ===== Global: Quantity input — spin button removal ===== */
body.shiko-theme .product .quantity .qty::-webkit-inner-spin-button,
body.shiko-theme .product .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ===== Global: Variation table + selects (dark-mode safe) ===== */
body.shiko-theme .product .variations select,
body.shiko-theme .woocommerce div.product .variations select {
    background: var(--shiko-bg-tertiary, #1a1a1a) !important;
    color: var(--shiko-text, #fff) !important;
    border: 1px solid var(--shiko-border, #333) !important;
    border-radius: var(--shiko-radius, 8px) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    width: 100% !important;
}
body.shiko-theme .product .variations td,
body.shiko-theme .product .variations th {
    padding: 8px 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}
body.shiko-theme .product .variations label {
    color: var(--shiko-text-secondary, #aaa) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ===== WooCommerce Tabs: Dark-mode border fix ===== */
body.shiko-theme .woocommerce-tabs,
body.shiko-theme .woocommerce div.product .woocommerce-tabs {
    border-color: var(--shiko-border, #333) !important;
}
body.shiko-theme .woocommerce-tabs .panel,
body.shiko-theme .woocommerce-tabs ul.tabs {
    border-color: var(--shiko-border, #333) !important;
    background: transparent !important;
}

/* ===== Responsive: All sections auto-width on resize ===== */
body.shiko-theme .product,
body.shiko-theme .product .entry-summary,
body.shiko-theme .product .summary,
body.shiko-theme .woocommerce div.product,
body.shiko-theme .woocommerce div.product div.summary {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
body.shiko-theme .product .woocommerce-product-gallery,
body.shiko-theme .woocommerce div.product div.images {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
body.shiko-theme .product img {
    max-width: 100% !important;
    height: auto !important;
}
body.shiko-theme .product .woocommerce-tabs,
body.shiko-theme .product .related.products,
body.shiko-theme .product .upsells.products,
body.shiko-theme .product form.cart,
body.shiko-theme .product .woocommerce-variation-add-to-cart,
body.shiko-theme .shiko-pdp-section,
body.shiko-theme .shiko-pdp-trust,
body.shiko-theme .shiko-pdp-meta {
    max-width: 100% !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* =================================================================
 * PRODUCT PAGE — Universal styling (works with any template)
 * v1.7.10 — Element-level styles, no forced layout overrides
 * ================================================================= */

/* ── Gallery: cinematic framing ── */
body.shiko-theme div.product .flex-viewport,
body.shiko-theme div.product .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    border-radius: 12px !important;
    border: 1px solid var(--shiko-border, #333) !important;
    overflow: hidden !important;
    background: var(--shiko-bg-tertiary, #111) !important;
}
body.shiko-theme div.product .woocommerce-product-gallery__image:only-child img {
    border-radius: 12px !important;
    border: 1px solid var(--shiko-border, #333) !important;
}
body.shiko-theme div.product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
body.shiko-theme div.product .woocommerce-product-gallery {
    opacity: 1 !important;
}

/* ── Thumbnails: horizontal strip ── */
body.shiko-theme div.product .flex-control-thumbs {
    display: flex !important;
    gap: 8px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
    overflow-x: auto !important;
}
body.shiko-theme div.product .flex-control-thumbs li {
    flex: 0 0 60px !important;
    width: 60px !important;
    margin: 0 !important;
}
body.shiko-theme div.product .flex-control-thumbs li img {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    opacity: 0.5 !important;
    display: block !important;
}
body.shiko-theme div.product .flex-control-thumbs li img:hover,
body.shiko-theme div.product .flex-control-thumbs li img.flex-active {
    border-color: var(--shiko-accent, #E40303) !important;
    opacity: 1 !important;
}

/* ── Zoom trigger ── */
body.shiko-theme div.product .woocommerce-product-gallery__trigger {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 5 !important;
    background: rgba(0,0,0,0.4) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}
body.shiko-theme div.product:hover .woocommerce-product-gallery__trigger {
    opacity: 0.8 !important;
}
body.shiko-theme div.product .woocommerce-product-gallery__trigger img {
    width: 16px !important;
    height: 16px !important;
    filter: invert(1) !important;
}

/* ── Nav arrows ── */
body.shiko-theme div.product .flex-direction-nav a {
    background: rgba(0,0,0,0.4) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    text-align: center !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}
body.shiko-theme div.product .woocommerce-product-gallery:hover .flex-direction-nav a {
    opacity: 0.7 !important;
}

/* ── Product title ── */
body.shiko-theme div.product .product_title,
body.shiko-theme div.product .entry-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--shiko-text) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
}

/* ── Price ── */
body.shiko-theme div.product .price,
body.shiko-theme div.product .summary .price {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--shiko-accent) !important;
    margin-bottom: 16px !important;
}
body.shiko-theme div.product .price del {
    color: var(--shiko-text-muted) !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
}
body.shiko-theme div.product .price ins {
    text-decoration: none !important;
    color: var(--shiko-accent) !important;
}
body.shiko-theme div.product .price .woocommerce-Price-amount {
    color: inherit !important;
}

/* ── Summary text ── */
body.shiko-theme div.product .woocommerce-product-details__short-description {
    color: var(--shiko-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
}

/* ── Add-to-cart form ── */
body.shiko-theme div.product form.cart {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
}
body.shiko-theme div.product .single_add_to_cart_button {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    background: var(--shiko-accent, #E40303) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--shiko-radius, 8px) !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
    text-transform: none !important;
}
body.shiko-theme div.product .single_add_to_cart_button:hover {
    opacity: 0.9 !important;
}

/* ── Quantity ── */
body.shiko-theme div.product .quantity {
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--shiko-border, #333) !important;
    border-radius: var(--shiko-radius, 8px) !important;
    overflow: hidden !important;
    background: var(--shiko-bg-tertiary, #1a1a1a) !important;
    flex-shrink: 0 !important;
}
body.shiko-theme div.product .quantity .qty {
    width: 48px !important;
    height: 42px !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    color: var(--shiko-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    -moz-appearance: textfield !important;
}
body.shiko-theme div.product .quantity .qty::-webkit-inner-spin-button,
body.shiko-theme div.product .quantity .qty::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
}

/* ── Variation table ── */
body.shiko-theme div.product .variations {
    margin-bottom: 12px !important;
}
body.shiko-theme div.product .variations td,
body.shiko-theme div.product .variations th {
    padding: 8px 0 !important;
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}
body.shiko-theme div.product .variations td.label label {
    color: var(--shiko-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
body.shiko-theme div.product .variations select {
    background: var(--shiko-bg-tertiary, #1a1a1a) !important;
    color: var(--shiko-text) !important;
    border: 1px solid var(--shiko-border, #333) !important;
    border-radius: var(--shiko-radius, 8px) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    width: 100% !important;
}
body.shiko-theme div.product .reset_variations {
    color: var(--shiko-text-muted) !important;
    font-size: 13px !important;
}

/* ── Variation price update ── */
body.shiko-theme div.product .woocommerce-variation-price .price {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--shiko-accent) !important;
}

/* ── Product meta ── */
body.shiko-theme div.product .product_meta {
    font-size: 13px !important;
    color: var(--shiko-text-muted) !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--shiko-border) !important;
}
body.shiko-theme div.product .product_meta a {
    color: var(--shiko-text-secondary) !important;
}
body.shiko-theme div.product .product_meta a:hover {
    color: var(--shiko-accent) !important;
}

/* ── WC Tabs (default, non-accordion) — dark mode ── */
body.shiko-theme div.product .woocommerce-tabs {
    margin-top: 32px !important;
}
body.shiko-theme div.product .woocommerce-tabs ul.tabs {
    list-style: none !important;
    display: flex !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 0 -1px !important;
    border-bottom: 1px solid var(--shiko-border) !important;
    background: transparent !important;
}
body.shiko-theme div.product .woocommerce-tabs ul.tabs::before,
body.shiko-theme div.product .woocommerce-tabs ul.tabs::after {
    display: none !important;
}
body.shiko-theme div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
body.shiko-theme div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--shiko-accent) !important;
}
body.shiko-theme div.product .woocommerce-tabs ul.tabs li a {
    color: var(--shiko-text-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    display: block !important;
}
body.shiko-theme div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--shiko-text) !important;
}
body.shiko-theme div.product .woocommerce-tabs .panel {
    border: none !important;
    padding: 24px 0 !important;
    background: transparent !important;
    color: var(--shiko-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}
body.shiko-theme div.product .woocommerce-tabs .panel h2 {
    font-size: 1.1rem !important;
    margin-bottom: 12px !important;
}

/* ── Related / Upsell ── */
body.shiko-theme div.product .related.products,
body.shiko-theme div.product .upsells.products {
    margin-top: 48px !important;
    padding-top: 32px !important;
    border-top: 1px solid var(--shiko-border) !important;
}
body.shiko-theme div.product .related.products > h2,
body.shiko-theme div.product .upsells.products > h2 {
    font-size: 1.25rem !important;
    margin-bottom: 20px !important;
}
body.shiko-theme div.product .related.products ul.products,
body.shiko-theme div.product .upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.shiko-theme div.product .related.products li.product,
body.shiko-theme div.product .upsells.products li.product {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    body.shiko-theme div.product .flex-control-thumbs li {
        flex: 0 0 48px !important;
        width: 48px !important;
    }
    body.shiko-theme div.product .flex-control-thumbs li img {
        width: 48px !important;
        height: 48px !important;
        border-radius: 6px !important;
    }
    body.shiko-theme div.product form.cart {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    body.shiko-theme div.product .single_add_to_cart_button {
        flex: 1 !important;
        min-width: 0 !important;
        padding: 12px 16px !important;
    }
    body.shiko-theme div.product .quantity {
        flex-shrink: 0 !important;
        width: auto !important;
    }
    body.shiko-theme div.product .quantity .qty {
        width: 44px !important;
        height: 40px !important;
        font-size: 14px !important;
    }
    body.shiko-theme div.product .related.products ul.products,
    body.shiko-theme div.product .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.shiko-theme div.product .woocommerce-tabs ul.tabs {
        overflow-x: auto !important;
    }
    body.shiko-theme div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}


/* ===== Cart readability and conversion refinements ===== */
body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper {
    margin: 14px 0 18px;
    border: 1px solid var(--shiko-border);
    border-radius: 14px;
    background: var(--shiko-bg-secondary);
    overflow: hidden;
}
body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    color: var(--shiko-text);
    font-weight: 600;
}
body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper summary::-webkit-details-marker { display: none; }
body.shiko-theme.woocommerce-cart .shiko-coupon-summary-hint {
    font-size: 12px;
    color: var(--shiko-text-muted);
    font-weight: 500;
}
body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper:not([open]) .coupon {
    display: none !important;
}
body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper[open] .coupon {
    display: flex !important;
    padding: 0 18px 18px;
}
body.shiko-theme.woocommerce-cart .shiko-cart-pricing-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
}
body.shiko-theme.woocommerce-cart .shiko-cart-price-was {
    color: var(--shiko-text-muted);
}
body.shiko-theme.woocommerce-cart .shiko-cart-price-now {
    color: var(--shiko-text);
    font-weight: 700;
}
body.shiko-theme.woocommerce-cart .shiko-save-text,
body.shiko-theme.woocommerce-cart .shiko-save-amount,
body.shiko-theme.woocommerce-cart .shiko-sticky-save {
    color: var(--shiko-success) !important;
    font-weight: 700;
}
body.shiko-theme.woocommerce-cart .cart_totals .shop_table .cart-subtotal td,
body.shiko-theme.woocommerce-cart .cart_totals .shop_table .order-total td {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}
body.shiko-theme.woocommerce-cart .cart_totals .shop_table .cart-subtotal td .woocommerce-Price-amount,
body.shiko-theme.woocommerce-cart .cart_totals .shop_table .order-total td .woocommerce-Price-amount {
    color: var(--shiko-accent);
    font-weight: 700;
}
body.shiko-theme.woocommerce-cart .product-name {
    line-height: 1.45;
}
body.shiko-theme.woocommerce-cart .product-name a {
    display: inline-block;
    margin-bottom: 4px;
    font-weight: 700;
}
@media (max-width: 768px) {
    body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper {
        margin-bottom: 16px;
    }
    body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper[open] .coupon {
        flex-direction: column;
        align-items: stretch !important;
    }
    body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper[open] .coupon .input-text,
    body.shiko-theme.woocommerce-cart .shiko-coupon-wrapper[open] .coupon button {
        width: 100%;
    }
    body.shiko-theme.woocommerce-cart .cart_totals .shop_table .cart-subtotal td,
    body.shiko-theme.woocommerce-cart .cart_totals .shop_table .order-total td {
        justify-content: space-between;
    }
}


/* v1.9.8 cart recovery */
body.shiko-theme.woocommerce-cart .shiko-cart-cta-fallback {
    display: block !important;
    max-width: 680px !important;
    margin: 16px auto 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.shiko-theme.woocommerce-cart .shiko-cart-cta-fallback a {
    display: block !important;
    width: 100% !important;
    padding: 14px 20px !important;
    background: var(--shiko-accent) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

/* v3.3.23: retire legacy floating cart bar to prevent CTA overlap */
.shiko-sticky-checkout {
    display: none !important;
}
body.shiko-has-sticky-checkout {
    padding-bottom: 0 !important;
}
body.shiko-theme.shiko-has-sticky-checkout .woocommerce-cart .wc-proceed-to-checkout {
    display: block !important;
}


/* ============================================
 * 3.10.0 — PDP decision-first redesign (spec 033)
 * Mobile gallery cap + flex stack + sticky buy bar + WhatsApp CTA
 * ============================================ */

/* US1 + US2: compress mobile hero so title + price + first ATC card sit within first scroll */
@media (max-width: 768px) {
    .shiko-pdp-hero { flex-direction: column; }
    .shiko-pdp-summary { padding-block-start: 16px; }
    .shiko-pdp-gallery { max-block-size: 60vh; }
    .shiko-pdp-gallery img,
    .shiko-pdp-gallery .woocommerce-product-gallery__image,
    .shiko-pdp-gallery .woocommerce-product-gallery__image img {
        max-block-size: 55vh;
        object-fit: contain;
    }
}

/* US3: sticky buy bar (mobile only; hidden when inline ATC button is in viewport).
   3.14.11 (PDP-2): added env(safe-area-inset-bottom) to padding-block-end so the
   button doesn't sit under the iPhone home-indicator gesture zone. Mirror of the
   safe-area pattern shipped for the bottom nav (.shiko-bottom-nav, 3.14.3). */
.shiko-pdp-sticky-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 99995;
    background: var(--shiko-bg-secondary);
    border-block-start: 1px solid var(--shiko-border);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
    padding-block-start: 10px;
    padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
    padding-inline: 16px;
    display: none;
}
body.has-shiko-pdp-stickybar .shiko-pdp-sticky-bar { display: block; }
.shiko-pdp-sticky-bar-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-inline-size: var(--shiko-max-width, 1280px);
    margin-inline: auto;
}
.shiko-pdp-sticky-bar-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-inline-size: 0;
}
.shiko-pdp-sticky-bar-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--shiko-text-secondary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shiko-pdp-sticky-bar-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--shiko-accent);
    line-height: 1.2;
}
.shiko-pdp-sticky-bar-btn {
    flex-shrink: 0;
    min-inline-size: 140px;
    padding-block: 12px;
    padding-inline: 18px;
    background: var(--shiko-accent);
    color: #fff;
    border: none;
    border-radius: var(--shiko-radius);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.shiko-pdp-sticky-bar-btn:disabled,
.shiko-pdp-sticky-bar-btn[disabled] {
    background: var(--shiko-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}
@media (min-width: 769px) {
    .shiko-pdp-sticky-bar { display: none !important; }
}
/* Push competing fixed elements above the bar on mobile when bar is visible */
@media (max-width: 768px) {
    body.has-shiko-pdp-stickybar .shiko-feedback-btn,
    body.has-shiko-pdp-stickybar .shiko-chatbot-fab,
    body.has-shiko-pdp-stickybar .shiko-back-to-top {
        inset-block-end: 84px;
    }
}

/* PDP-3 (3.14.12): WhatsApp helper as quiet TEXT LINK by default — Add to
   cart is the only filled button in the buy area when variations are
   selectable. The .is-promoted modifier promotes it to a bordered button
   when no variation is selectable (full OOS, etc.); JS in main.js toggles
   the class based on the inline ATC's disabled state.
   Spec: claude-code-handoff.md PDP-3 acceptance #1+#2. */
.shiko-pdp-wa-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block: 8px 12px;
    padding: 0;
    background: transparent;
    color: var(--shiko-text-secondary);
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: underline;
    text-decoration-color: var(--shiko-success);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.shiko-pdp-wa-help:hover,
.shiko-pdp-wa-help:focus-visible {
    color: var(--shiko-success);
    text-decoration-color: var(--shiko-success);
    outline: none;
}
.shiko-pdp-wa-help svg {
    width: 14px;
    height: 14px;
    fill: var(--shiko-success);
    flex-shrink: 0;
}

/* Button-promoted state — used when the inline ATC is disabled (no
   variation selectable / OOS) so the user has a real fallback action. */
.shiko-pdp-wa-help.is-promoted {
    margin-block: 12px;
    padding-block: 10px;
    padding-inline: 16px;
    background: var(--shiko-success);
    color: #111;
    border: 1px solid var(--shiko-success);
    border-radius: var(--shiko-radius);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
}
.shiko-pdp-wa-help.is-promoted:hover,
.shiko-pdp-wa-help.is-promoted:focus-visible {
    color: #111;
    background: var(--shiko-success);
    text-decoration: none;
    filter: brightness(1.05);
}
.shiko-pdp-wa-help.is-promoted svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}


/* ============================================
 * 3.11.0 — Guided shop browsing (spec 034)
 * Intent chip row + mobile category-intro collapse + product-card CTA
 * ============================================ */

/* 3.19.26: .shiko-shop-chip* styles removed alongside the
   shiko_render_shop_chips() row. The unified chip row on archives now
   uses the home-intent styles (.shiko-home-intent-chip*) defined in
   main.css. */

/* 3.19.26: when the home-intent chip row renders inside the archive
   page's outer .shiko-container (via shiko_render_intent_chips_on_archives()
   in archive-product.php), the section's inner .shiko-container would
   compound horizontal padding and indent the chips ~20px past the H1
   above and the result-count below. Flatten the inner container's
   constraints so the chip row lines up with the rest of the archive
   content. The homepage call sits at the document root, so this
   archive-only rule won't affect the under-hero rendering. CodeRabbit
   raised this on PR #62 — alignment fix instead of moving the call
   outside the wrapper to keep the chip row under the H1 where users
   expect a filter bar. */
.shiko-container > .shiko-home-intent > .shiko-container {
    padding-inline: 0;
    max-width: none;
}

/* SHOP-3 (3.14.19): mobile category-intro collapse via line-clamp.
   Replaces the previous <details>-based pattern (3.11.0) with the
   handoff spec: 2-line preview + "Read more" toggle on mobile, full
   text inline on desktop. SEO/crawlers always see full text since
   line-clamp is a pure CSS visual clip. */
.shiko-archive-intro {
    margin-block-end: 16px;
}
.shiko-archive-intro-text {
    color: var(--shiko-text);
    line-height: 1.55;
}
.shiko-archive-intro-toggle {
    display: none; /* desktop: no toggle */
    margin-block-start: 4px;
    padding: 4px 0;
    background: transparent;
    border: 0;
    color: var(--shiko-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.shiko-archive-intro-toggle::after {
    content: " ↓";
    display: inline-block;
    margin-inline-start: 4px;
    transition: transform .15s;
}
.shiko-archive-intro:not([data-collapsed]) .shiko-archive-intro-toggle::after {
    transform: rotate(180deg);
}
.shiko-archive-intro-toggle:hover,
.shiko-archive-intro-toggle:focus-visible {
    text-decoration: underline;
    outline: none;
}

@media (max-width: 600px) {
    .shiko-archive-intro-toggle {
        display: inline-flex;
        align-items: center;
    }
    .shiko-archive-intro[data-collapsed] .shiko-archive-intro-text {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* US3: product-card visible CTA — View / Choose account */
/* 3.14.16 (SHOP-2): filled-by-default 36px CTA per handoff spec.
   Was outline + filled-on-hover; spec wants the CTA to read as a
   primary action without requiring hover (touch devices have no
   hover state). */
.shiko-product-card-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-block-size: 36px;
    margin-block-start: 10px;
    padding-block: 10px;
    padding-inline: 14px;
    border: 1px solid var(--shiko-primary);
    border-radius: var(--shiko-radius);
    background: var(--shiko-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .15s, border-color .15s, transform .12s;
}
.shiko-product-card:hover .shiko-product-card-cta,
.shiko-product-card:focus-visible .shiko-product-card-cta {
    background: var(--shiko-accent);
    border-color: var(--shiko-accent);
}
.shiko-product-card:active .shiko-product-card-cta {
    transform: translateY(1px);
}


/* ============================================
 * 3.12.0 — Loyalty launch-ready page (spec 035)
 * Slug-based template page-loyalty-reward-page.php
 * ============================================ */

.shiko-loyalty-page {
    max-inline-size: 880px;
    margin-inline: auto;
    padding-block: 32px 64px;
    padding-inline: 16px;
    color: var(--shiko-text);
}
.shiko-loyalty-page section {
    margin-block-end: 48px;
}

/* Hero */
.shiko-loyalty-hero {
    text-align: center;
    padding-block: 48px 32px;
    border-block-end: 1px solid var(--shiko-border);
}
.shiko-loyalty-hero-badge {
    display: inline-block;
    max-inline-size: 100%;
    padding-block: 5px;
    padding-inline: 12px;
    border-radius: 999px;
    background: rgba(138, 101, 0, 0.12);
    color: var(--shiko-success);
    border: 1px solid var(--shiko-success);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-block-end: 16px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.shiko-loyalty-hero-heading {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-block: 0 16px;
    color: var(--shiko-text);
}
.shiko-loyalty-hero-sub {
    font-size: 16px;
    color: var(--shiko-text-secondary);
    margin-block: 0 24px;
    max-inline-size: 600px;
    margin-inline: auto;
    line-height: 1.55;
}
.shiko-loyalty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    padding-block: 12px;
    padding-inline: 28px;
    background: var(--shiko-primary);
    color: #fff;
    border: 2px solid var(--shiko-primary);
    border-radius: var(--shiko-radius);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
.shiko-loyalty-cta:hover {
    background: var(--shiko-accent);
    border-color: var(--shiko-accent);
    color: #fff;
}

/* Section headings */
.shiko-loyalty-section-heading {
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    color: var(--shiko-text);
    margin-block: 0 16px;
    text-align: center;
}

/* 3.14.23 (LOYAL-1): four ways-to-earn cards. Replaces the prior
   .shiko-loyalty-how / .shiko-loyalty-step grid (3-step funnel) with
   a 4-card grid. Mobile = 2-col, ≥768px = 4-col. The legacy classes
   are kept aliased below so any older content snippets keep rendering
   while we transition. */
.shiko-loyalty-earn-grid,
.shiko-loyalty-how-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-block-start: 24px;
}
@media (min-width: 768px) {
    .shiko-loyalty-earn-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .shiko-loyalty-how-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
}
.shiko-loyalty-earn-card,
.shiko-loyalty-step {
    min-inline-size: 0;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding-block: 20px;
    padding-inline: 18px;
    transition: border-color .15s ease, transform .15s ease;
}
.shiko-loyalty-earn-card:hover {
    border-color: var(--shiko-accent);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .shiko-loyalty-earn-card { transition: none; }
    .shiko-loyalty-earn-card:hover { transform: none; }
}
.shiko-loyalty-earn-icon,
.shiko-loyalty-step-icon {
    inline-size: 40px;
    block-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(228, 3, 3, 0.08);
    color: var(--shiko-accent);
    border-radius: 50%;
    margin-block-end: 12px;
}
.shiko-loyalty-earn-icon svg,
.shiko-loyalty-step-icon svg { inline-size: 20px; block-size: 20px; }
.shiko-loyalty-earn-title,
.shiko-loyalty-step-title {
    font-size: 15px;
    font-weight: 700;
    margin-block: 0 8px;
    color: var(--shiko-text);
}
.shiko-loyalty-earn-desc,
.shiko-loyalty-step-desc {
    font-size: 13px;
    color: var(--shiko-text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* 3.14.23 (LOYAL-1): bottom Join CTA — capture intent for both
   logged-out and logged-in visitors. Card-shape with brand-accent
   border so it visually closes the page. */
.shiko-loyalty-join {
    background: var(--shiko-bg-tertiary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius-lg);
    padding-block: 28px;
    padding-inline: 24px;
    text-align: center;
}
.shiko-loyalty-join-heading {
    font-size: clamp(1.25rem, 3vw, 1.625rem);
    font-weight: 700;
    color: var(--shiko-text);
    margin-block: 0 8px;
}
.shiko-loyalty-join-sub {
    font-size: 14px;
    color: var(--shiko-text-secondary);
    margin-block: 0 16px;
    line-height: 1.55;
}
.shiko-loyalty-join-cta {
    min-inline-size: 200px;
}

/* Sample rewards */
.shiko-loyalty-rewards-intro {
    text-align: center;
    color: var(--shiko-text-secondary);
    font-size: 14px;
    margin-block: 8px 16px;
}
.shiko-loyalty-rewards-table {
    inline-size: 100%;
    max-inline-size: 480px;
    margin-inline: auto;
    border-collapse: collapse;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: var(--shiko-radius);
    overflow: hidden;
}
.shiko-loyalty-rewards-table th,
.shiko-loyalty-rewards-table td {
    padding-block: 12px;
    padding-inline: 18px;
    border-block-end: 1px solid var(--shiko-border);
    text-align: start;
    font-size: 14px;
}
.shiko-loyalty-rewards-table thead th {
    background: var(--shiko-bg-tertiary);
    font-weight: 700;
    color: var(--shiko-text);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.shiko-loyalty-rewards-table tbody tr:last-child td {
    border-block-end: none;
}
.shiko-loyalty-rewards-table tbody td:last-child {
    color: var(--shiko-accent);
    font-weight: 700;
}

/* WhatsApp help CTA — same pattern as 032/033/034 */
.shiko-loyalty-wa-help {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-block: 0;
    padding-block: 10px;
    padding-inline: 18px;
    background: transparent;
    color: var(--shiko-success);
    border: 1px solid var(--shiko-success);
    border-radius: var(--shiko-radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
}
.shiko-loyalty-wa-help:hover {
    background: var(--shiko-success);
    color: #111;
}
.shiko-loyalty-wa-help svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 768px) {
    .shiko-loyalty-page { padding-inline: 12px; padding-block: 16px 48px; }
    .shiko-loyalty-page section { margin-block-end: 32px; }
    .shiko-loyalty-hero { padding-block: 24px 16px; }
    .shiko-loyalty-how-grid,
    .shiko-loyalty-earn-grid { gap: 12px; }
    .shiko-loyalty-earn-card,
    .shiko-loyalty-step { padding-block: 16px; padding-inline: 14px; }
    /* 3.14.23: tighter title/desc on the 4-col-collapsed-to-2 grid so
       cards stack at similar visual heights. */
    .shiko-loyalty-earn-title { font-size: 14px; }
    .shiko-loyalty-earn-desc  { font-size: 12.5px; }
    .shiko-loyalty-join { padding-block: 24px; padding-inline: 18px; }
    .shiko-loyalty-join-cta { min-inline-size: 0; inline-size: 100%; }
}


/* ============================================
 * 3.13.0 — Header loyalty points pill (spec 037)
 * ============================================ */
.shiko-header-points {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding-block: 0;
    padding-inline: 12px;
    margin-inline-start: 4px;
    border-radius: 999px;
    background: var(--shiko-bg-tertiary);
    color: var(--shiko-text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--shiko-border);
    transition: border-color .15s, background .15s;
}
.shiko-header-points:hover {
    border-color: var(--shiko-success);
    background: rgba(138, 101, 0, 0.08);
    color: var(--shiko-success);
}
.shiko-header-points svg {
    width: 16px;
    height: 16px;
    fill: var(--shiko-success);
    stroke: var(--shiko-success);
    stroke-width: 1.5;
}
.shiko-header-points-label {
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .shiko-header-points { display: none !important; }
}

/* 3.14.14 (PDP-4): "From EGP X" label + small sale strikethrough.
   The label sits beside the lowest variation price wherever the price
   block renders (PDP .shiko-pdp-price + product cards .price). */
.shiko-from-label {
    display: inline-block;
    font-size: 0.6em;
    font-weight: 500;
    color: var(--shiko-text-secondary);
    margin-inline-end: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    vertical-align: middle;
}
.shiko-from-empty {
    color: var(--shiko-text-secondary);
    font-weight: 400;
}

/* Small strikethrough on sale prices — only the previous price is
   demoted; the new price keeps its full weight + size. Applies to
   PDP price block + product cards uniformly. */
.shiko-pdp-price del .woocommerce-Price-amount,
.shiko-pdp-price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del {
    font-size: 0.7em;
    opacity: 0.6;
    font-weight: 400;
    margin-inline-end: 4px;
}
.shiko-pdp-price ins,
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    font-weight: 700;
}

/* SHOP-4 (3.14.20): destination tiles for /shop/product-categories/.
   4-col desktop, 2-col mobile, 1-col extra-narrow. Each tile is a full
   anchor (entire card clickable). Brand tokens; logical CSS only. */
.shiko-pcat-header {
    margin-block-end: 24px;
}
.shiko-pcat-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-block-end: 32px;
}
.shiko-pcat-tile {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    background: var(--shiko-bg-secondary);
    border: 1px solid var(--shiko-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.shiko-pcat-tile:hover,
.shiko-pcat-tile:focus-visible {
    transform: translateY(-2px);
    border-color: var(--shiko-accent);
    box-shadow: 0 8px 18px rgba(228, 3, 3, 0.12);
    outline: none;
    text-decoration: none;
    color: inherit;
}
.shiko-pcat-tile-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--shiko-bg-tertiary);
    overflow: hidden;
}
.shiko-pcat-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shiko-pcat-tile-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.shiko-pcat-tile-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--shiko-text);
    line-height: 1.25;
}
.shiko-pcat-tile-tagline {
    margin: 0;
    font-size: 13px;
    color: var(--shiko-text-secondary);
    line-height: 1.45;
    flex: 1;
}
.shiko-pcat-tile-price {
    margin-block-start: 8px;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--shiko-accent);
}
.shiko-pcat-tile-price-from {
    font-size: 0.65em;
    font-weight: 500;
    color: var(--shiko-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shiko-pcat-prose {
    color: var(--shiko-text-secondary);
    font-size: 14px;
    line-height: 1.7;
    border-block-start: 1px solid var(--shiko-border);
    padding-block-start: 24px;
}
.shiko-pcat-prose p { margin-block: 0 12px; }
.shiko-pcat-prose a { color: var(--shiko-accent); }

@media (max-width: 900px) {
    .shiko-pcat-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 420px) {
    .shiko-pcat-tiles { grid-template-columns: 1fr; }
    .shiko-pcat-tile-body { padding: 12px; }
    .shiko-pcat-tile-title { font-size: 16px; }
}