/*
 Theme Name:   Pens (Blocksy Child)
 Theme URI:    https://pens.jap42.net
 Description:  Glassy teal dark-themed WooCommerce store for injection pens.
 Author:       Joe Payton
 Author URI:   https://jap42.net
 Template:     blocksy
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  pens-blocksy-child
*/

/* ==========================================================================
   Design Tokens & Dark Glassy Teal Palette
   ========================================================================== */
:root {
    --theme-palette-color-1: #14b8a6; /* Teal accent primary */
    --theme-palette-color-2: #0d9488; /* Teal dark hover */
    --theme-palette-color-3: #5eead4; /* Teal light accent */
    --theme-palette-color-4: #0f172a; /* Slate 900 base dark */
    --theme-palette-color-5: #1e293b; /* Slate 800 card/surface */
    --theme-palette-color-6: #334155; /* Slate 700 borders */
    --theme-palette-color-7: #94a3b8; /* Slate 400 muted text */
    --theme-palette-color-8: #f8fafc; /* Slate 50 heading/body text */

    /* Blocksy form variable overrides */
    --theme-form-text-initial-color: #ffffff;
    --theme-form-text-focus-color: #ffffff;
    --theme-form-field-background-initial-color: #0f172a;
    --theme-form-field-background-focus-color: #1e293b;
    --theme-form-field-border-initial-color: rgba(20, 184, 166, 0.45);
    --theme-form-field-border-focus-color: #14b8a6;
    --theme-form-field-height: 48px;

    --pens-bg: #0b1120;
    --pens-surface: rgba(30, 41, 59, 0.75);
    --pens-surface-hover: rgba(30, 41, 59, 0.95);
    --pens-border: rgba(20, 184, 166, 0.2);
    --pens-border-strong: rgba(20, 184, 166, 0.45);
    --pens-accent: #14b8a6;
    --pens-accent-hover: #0d9488;
    --pens-text: #f1f5f9;
    --pens-text-muted: #94a3b8;
    --pens-radius: 8px;
    --pens-blur: 16px;
}

/* ==========================================================================
   Global Dark Base
   ========================================================================== */
body {
    background-color: var(--pens-bg) !important;
    color: var(--pens-text) !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Ensure main containers sit transparent over the dark background */
#main-container,
.site-main,
.ct-container,
.ct-container-fluid,
.entry-content {
    background-color: transparent !important;
    color: var(--pens-text);
}

/* Links */
a {
    color: var(--pens-accent);
    transition: color 0.2s ease;
}
a:hover {
    color: #5eead4;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title {
    color: #ffffff !important;
    font-weight: 700;
}

/* Hide WooCommerce Archive Page Title & Header Box */
.woocommerce-products-header,
.woocommerce.archive .hero-section,
.woocommerce.archive .entry-header.ct-container-narrow,
.tax-product_cat .hero-section,
.tax-product_tag .hero-section {
    display: none !important;
}

/* ==========================================================================
   Free Shipping Topbar & Progress Bars
   ========================================================================== */
.pens-free-shipping-topbar {
    background: linear-gradient(90deg, #091e28 0%, #0f353b 50%, #091e28 100%);
    border-bottom: 1px solid rgba(20, 184, 166, 0.35);
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    color: #f1f5f9;
    position: relative;
    z-index: 99;
}

.pens-shipping-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pens-shipping-bar-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pens-shipping-unlocked {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #5eead4;
    font-weight: 700;
}

.pens-shipping-unlocked svg {
    color: #14b8a6;
}

.pens-shipping-progress-track {
    width: 220px;
    height: 8px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 50px;
    overflow: hidden;
}

.pens-shipping-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0d9488, #14b8a6, #5eead4);
    border-radius: 50px;
    transition: width 0.4s ease;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.5);
}

/* Cart & Checkout Free Shipping Banner */
.pens-cart-shipping-banner {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--pens-border);
    border-left: 4px solid var(--pens-accent);
    border-radius: var(--pens-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(var(--pens-blur));
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.35);
}

.pens-cart-shipping-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pens-shipping-badge-unlocked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #5eead4;
    font-size: 0.95rem;
}

.pens-shipping-badge-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #e2e8f0;
    font-size: 0.95rem;
}

.pens-shipping-tier-tag {
    background: rgba(20, 184, 166, 0.15);
    border: 1px solid rgba(20, 184, 166, 0.3);
    color: var(--pens-accent);
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pens-shipping-progress-track-lg {
    width: 100%;
    height: 14px;
    background: rgba(2, 6, 23, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    overflow: hidden;
    position: relative;
}

.pens-shipping-progress-fill-lg {
    height: 100%;
    background: linear-gradient(90deg, #0d9488 0%, #14b8a6 50%, #5eead4 100%);
    border-radius: 50px;
    transition: width 0.4s ease;
    box-shadow: 0 0 12px rgba(20, 184, 166, 0.6);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
}

.pens-shipping-progress-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: #0b1120;
    line-height: 1;
}

/* ==========================================================================
   Header & Navigation (Dark Slate with Teal Highlights)
   ========================================================================== */
.ct-header,
.ct-header [data-row],
.ct-header [data-row*="middle"],
header[data-device="desktop"],
header[data-device="mobile"],
.ct-header [data-device] {
    background-color: #070d18 !important;
    background-image: none !important;
    backdrop-filter: blur(var(--pens-blur)) !important;
    -webkit-backdrop-filter: blur(var(--pens-blur)) !important;
    border-bottom: 2px solid var(--pens-accent) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(20, 184, 166, 0.15) !important;
}

.ct-header .site-title a,
.ct-header [data-id="logo"] .site-title a,
.ct-header [data-id="logo"] .site-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    letter-spacing: -0.03em !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ct-header .site-title a::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2314b8a6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6M7 2h10M7 22h10"/></svg>') no-repeat center center;
    background-size: contain;
}

.ct-header .site-title a:hover {
    color: var(--pens-accent) !important;
}

/* Nav Menu Links — boxed around text only, not full navbar height */
.ct-header [data-id="menu"] {
    display: flex;
    align-items: center;
}

.ct-header [data-id="menu"] > ul {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ct-header [data-id="menu"] > ul > li {
    display: flex;
    align-items: center;
    height: auto !important;
}

.ct-header [data-id="menu"] > ul > li > a,
.ct-header .menu-item a,
.ct-header .ct-menu-link {
    height: auto !important;
    min-height: unset !important;
    line-height: 1.4 !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 0.45rem 0.9rem !important;
    border-radius: var(--pens-radius) !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header .menu-item a:hover,
.ct-header .ct-menu-link:hover {
    color: #ffffff !important;
    background: rgba(20, 184, 166, 0.2) !important;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.3) !important;
}

.ct-header [data-id="menu"] > ul > li.current-menu-item > a,
.ct-header .current-menu-item > a,
.ct-header .current_page_item > a {
    color: #ffffff !important;
    background: var(--pens-accent) !important;
    box-shadow: 0 2px 10px rgba(20, 184, 166, 0.4) !important;
}

/* Header Icons (Search, Cart, Trigger) */
.ct-header .ct-header-search,
.ct-header .ct-toggle,
.ct-header .ct-icon,
.ct-header [data-id="search"] {
    color: #e2e8f0 !important;
    fill: #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.ct-header .ct-header-search:hover,
.ct-header .ct-toggle:hover,
.ct-header .ct-toggle:hover .ct-icon {
    color: var(--pens-accent) !important;
    fill: var(--pens-accent) !important;
}

/* Mobile Header / Drawer */
.ct-header [data-id="trigger"] {
    color: #ffffff !important;
    fill: #ffffff !important;
}
#offcanvas .ct-panel-inner {
    background-color: #0b1120 !important;
    border-left: 2px solid var(--pens-accent) !important;
}

/* ==========================================================================
   WooCommerce Catalog & Product Cards
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.ct-woocommerce-archive .product {
    background: var(--pens-surface) !important;
    backdrop-filter: blur(var(--pens-blur));
    -webkit-backdrop-filter: blur(var(--pens-blur));
    border: 1px solid var(--pens-border) !important;
    border-radius: var(--pens-radius) !important;
    padding: 1.5rem !important;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    border-color: var(--pens-border-strong) !important;
    box-shadow: 0 8px 30px rgba(20, 184, 166, 0.15), 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce ul.products li.product img {
    border-radius: calc(var(--pens-radius) - 2px);
    margin-bottom: 1rem;
    background: #0f172a;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.woocommerce-loop-product__title {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin: 0.5rem 0 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce-Price-amount {
    color: var(--pens-accent) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
    color: var(--pens-text-muted) !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   WooCommerce Single Product Page
   ========================================================================== */
.single-product .product {
    background: transparent !important;
}

.single-product .summary {
    color: var(--pens-text);
}

.single-product .summary .product_title {
    color: #ffffff !important;
    font-size: 2rem !important;
    margin-bottom: 0.75rem !important;
}

.single-product .summary .price {
    font-size: 1.5rem !important;
    color: var(--pens-accent) !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
}

.single-product .woocommerce-product-details__short-description {
    color: var(--pens-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.single-product .product .woocommerce-product-gallery {
    background: var(--pens-surface);
    border: 1px solid var(--pens-border);
    border-radius: var(--pens-radius);
    padding: 1rem;
    backdrop-filter: blur(var(--pens-blur));
}

.single-product div.product form.cart {
    background: var(--pens-surface);
    border: 1px solid var(--pens-border);
    border-radius: var(--pens-radius);
    padding: 1.5rem;
    backdrop-filter: blur(var(--pens-blur));
}

/* Variations Table */
.single-product table.variations {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
}

.single-product table.variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.single-product table.variations td,
.single-product table.variations th {
    padding: 0;
    border: none !important;
    background: transparent !important;
}

.single-product table.variations td.label label {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.4rem;
}

/* Clear link styling */
.single-product .reset_variations {
    color: var(--pens-text-muted) !important;
    font-size: 0.85rem;
    margin-top: 0.4rem;
    display: inline-block;
}
.single-product .reset_variations:hover {
    color: var(--pens-accent) !important;
}

/* Quantity inputs */
.woocommerce .quantity .qty {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid var(--pens-border-strong) !important;
    border-radius: var(--pens-radius) !important;
    padding: 0.6rem !important;
    font-weight: 600;
    height: 48px;
}

/* ==========================================================================
   Select Dropdowns & Form Controls (High Visibility & Proper Padding)
   ========================================================================== */
select,
.single-product table.variations select,
.pens-product-addons select,
.woocommerce select,
.ct-select {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 1.5 !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid var(--pens-border-strong) !important;
    border-radius: var(--pens-radius) !important;
    padding: 0.6rem 2.5rem 0.6rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%2314b8a6' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.85rem center !important;
    background-size: 1.25rem auto !important;
}

/* Dropdown Option Items */
select option,
.single-product table.variations select option,
.pens-product-addons select option {
    background-color: #0f172a !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
}

select option:checked,
select option:hover {
    background-color: #1e293b !important;
    color: var(--pens-accent) !important;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1px solid var(--pens-border-strong) !important;
    border-radius: var(--pens-radius) !important;
    padding: 0.75rem 1rem !important;
    font-size: 1rem !important;
    width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--pens-accent) !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3) !important;
}

/* ==========================================================================
   Buttons (Teal Glass Accent)
   ========================================================================== */
.button,
button.button,
input.button,
a.button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--pens-accent) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--pens-radius) !important;
    border: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.3) !important;
    text-transform: none !important;
    cursor: pointer;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button:hover,
button.button:hover,
input.button:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
    background: var(--pens-accent-hover) !important;
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.45) !important;
    transform: translateY(-2px);
    color: #ffffff !important;
}

/* ==========================================================================
   Cart & Checkout Pages & WooCommerce Notices
   ========================================================================== */
.woocommerce-cart table.cart,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-order-received .woocommerce-order {
    background: var(--pens-surface) !important;
    border: 1px solid var(--pens-border) !important;
    border-radius: var(--pens-radius) !important;
    padding: 1.5rem !important;
    backdrop-filter: blur(var(--pens-blur));
}

/* Notices & Alert Banners (Thank you, Info, Success, Error) */
.woocommerce-info,
.woocommerce-message,
.woocommerce-thankyou-order-received,
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid var(--pens-border-strong) !important;
    border-left: 4px solid var(--pens-accent) !important;
    color: #ffffff !important;
    border-radius: var(--pens-radius) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    font-weight: 500 !important;
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-thankyou-order-received a {
    color: #5eead4 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.woocommerce-info a:hover,
.woocommerce-message a:hover {
    color: #ffffff !important;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-thankyou-order-received::before {
    color: var(--pens-accent) !important;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(239, 68, 68, 0.5) !important;
    border-left: 4px solid #ef4444 !important;
    color: #ffffff !important;
    border-radius: var(--pens-radius) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.woocommerce-error::before {
    color: #ef4444 !important;
}

/* Tables Spacing & Styling (Fixing first column 0 padding) */
table.shop_table {
    border: 1px solid var(--pens-border) !important;
    border-radius: var(--pens-radius);
    color: var(--pens-text);
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

table.shop_table th {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #ffffff !important;
    border-bottom: 1px solid var(--pens-border) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 700;
}

table.shop_table td {
    border-top: 1px solid var(--pens-border) !important;
    color: var(--pens-text) !important;
    padding: 1rem 1.25rem !important;
}

table.shop_table tr > *:first-child {
    padding-inline-start: 1.25rem !important;
    padding-left: 1.25rem !important;
}

table.shop_table tr > *:last-child {
    padding-inline-end: 1.25rem !important;
    padding-right: 1.25rem !important;
}

/* ==========================================================================
   Checkout Form Floating/Notched Border Field Labels
   ========================================================================== */
.woocommerce form.checkout p.form-row,
.woocommerce-page form.checkout p.form-row,
.woocommerce form p.form-row,
.woocommerce-page form p.form-row,
.woocommerce .woocommerce-billing-fields .form-row,
.woocommerce .woocommerce-shipping-fields .form-row,
.woocommerce .woocommerce-additional-fields .form-row {
    position: relative !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1.85rem !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Ensure floats & clears work properly for 2-column First/Last Name */
.woocommerce form .form-row-first,
.woocommerce-page form .form-row-first {
    width: 48% !important;
    float: left !important;
    clear: left !important;
}

.woocommerce form .form-row-last,
.woocommerce-page form .form-row-last {
    width: 48% !important;
    float: right !important;
    clear: none !important;
}

.woocommerce form .form-row-wide,
.woocommerce-page form .form-row-wide {
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

.woocommerce form.checkout p.form-row > label,
.woocommerce-page form.checkout p.form-row > label,
.woocommerce form p.form-row > label,
.woocommerce-page form p.form-row > label,
.woocommerce .woocommerce-billing-fields .form-row > label,
.woocommerce .woocommerce-shipping-fields .form-row > label,
.woocommerce .woocommerce-additional-fields .form-row > label {
    position: absolute !important;
    top: -10px !important;
    left: 14px !important;
    background: #0f172a !important; /* Matches slate dark surface */
    padding: 0 8px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #5eead4 !important; /* Bright teal label */
    letter-spacing: 0.02em;
    z-index: 10 !important;
    border-radius: 4px;
    line-height: 1.2 !important;
    margin: 0 !important;
    display: inline-block !important;
    pointer-events: none;
}

.woocommerce form.checkout p.form-row input.input-text,
.woocommerce form.checkout p.form-row textarea,
.woocommerce form.checkout p.form-row select,
.woocommerce form p.form-row input.input-text,
.woocommerce form p.form-row textarea,
.woocommerce form p.form-row select,
.woocommerce-page form p.form-row input.input-text,
.woocommerce-page form p.form-row textarea,
.woocommerce-page form p.form-row select,
.woocommerce .woocommerce-billing-fields input.input-text,
.woocommerce .woocommerce-shipping-fields input.input-text {
    background: #09121f !important;
    border: 1.5px solid rgba(20, 184, 166, 0.45) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 14px 16px !important;
    min-height: 50px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    display: block !important;
}

.woocommerce form.checkout p.form-row input.input-text:focus,
.woocommerce form.checkout p.form-row textarea:focus,
.woocommerce form.checkout p.form-row select:focus,
.woocommerce form p.form-row input.input-text:focus,
.woocommerce form p.form-row textarea:focus,
.woocommerce form p.form-row select:focus,
.woocommerce-page form p.form-row input.input-text:focus,
.woocommerce-page form p.form-row textarea:focus,
.woocommerce-page form p.form-row select:focus {
    border-color: #14b8a6 !important;
    box-shadow: 0 0 14px rgba(20, 184, 166, 0.4) !important;
    outline: none !important;
}

/* Fix for Select2 / Dropdowns in Checkout (Country/State) */
.woocommerce form .form-row .select2-container--default .select2-selection--single,
.woocommerce-page form .form-row .select2-container--default .select2-selection--single {
    background: #09121f !important;
    border: 1.5px solid rgba(20, 184, 166, 0.45) !important;
    border-radius: 8px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered,
.woocommerce-page form .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    padding-left: 16px !important;
    line-height: 50px !important;
}

.woocommerce form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow,
.woocommerce-page form .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    right: 12px !important;
}

/* Radio buttons list inside Shipping Methods (Cart & Checkout) */
ul.woocommerce-shipping-methods,
#shipping_method {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

ul.woocommerce-shipping-methods li,
#shipping_method li {
    background: rgba(15, 23, 42, 0.85) !important;
    border: 1px solid rgba(20, 184, 166, 0.35) !important;
    border-radius: 8px !important;
    padding: 0.85rem 1rem !important;
    margin-bottom: 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    transition: all 0.2s ease !important;
}

ul.woocommerce-shipping-methods li:hover,
#shipping_method li:hover {
    border-color: var(--pens-accent) !important;
    background: rgba(20, 184, 166, 0.15) !important;
}

ul.woocommerce-shipping-methods li input.shipping_method,
#shipping_method li input.shipping_method {
    margin-right: 0.6rem !important;
    accent-color: #14b8a6 !important;
}

ul.woocommerce-shipping-methods li label,
#shipping_method li label {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer.ct-footer {
    background: #070d18 !important;
    border-top: 1px solid var(--pens-border);
    color: var(--pens-text-muted);
    text-align: center;
}

.ct-footer-copyright,
.ct-footer .ct-copyright {
    color: var(--pens-text-muted) !important;
    font-size: 0.88rem !important;
}

.ct-footer-copyright a,
.ct-footer .ct-copyright a {
    color: #5eead4 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.ct-footer-copyright a:hover,
.ct-footer .ct-copyright a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* ==========================================================================
   Custom Full-Width Shop Layout & Product Cards
   ========================================================================== */
.pens-shop-page-wrap {
    width: 100%;
    padding: 1.5rem 0 4rem;
}

.pens-shop-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Top Jump Banner */
.pens-supplies-jump-banner {
    margin-bottom: 2rem;
    text-align: center;
}

.pens-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid var(--pens-border-strong);
    color: #5eead4 !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    backdrop-filter: blur(var(--pens-blur));
    transition: all 0.25s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.pens-jump-btn:hover {
    background: rgba(20, 184, 166, 0.2);
    border-color: var(--pens-accent);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.35);
}

/* Large Group Container Cards */
.pens-group-card {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid var(--pens-border);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    margin-bottom: 3rem;
    backdrop-filter: blur(var(--pens-blur));
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.45);
    position: relative;
}

.pens-group-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
}

.pens-group-badge {
    display: inline-block;
    background: rgba(20, 184, 166, 0.15);
    color: var(--pens-accent);
    border: 1px solid rgba(20, 184, 166, 0.35);
    padding: 0.3rem 0.85rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.pens-group-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 0.6rem;
    letter-spacing: -0.02em;
}

.pens-group-desc {
    color: var(--pens-text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Individual Full-Width Product Cards Inside Group */
.pens-product-fullcard {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid var(--pens-border);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.25s ease;
}

.pens-product-fullcard:last-child {
    margin-bottom: 0;
}

.pens-product-fullcard:hover {
    border-color: var(--pens-border-strong);
    box-shadow: 0 8px 30px rgba(20, 184, 166, 0.15);
}

.pens-product-card-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: center;
}

.pens-product-card-media {
    text-align: center;
}

.pens-prod-img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 10px;
    background: #0f172a;
    border: 1px solid var(--pens-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 1rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pens-details-link {
    display: inline-block;
    color: var(--pens-text-muted) !important;
    font-size: 0.88rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

.pens-details-link:hover {
    color: var(--pens-accent) !important;
}

.pens-prod-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.pens-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}

.pens-tag-pro {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
}

.pens-custom-peptide-wrap input {
    background: #0f172a !important;
    border: 1px solid var(--pens-border-strong) !important;
    color: #ffffff !important;
    border-radius: var(--pens-radius) !important;
    padding: 0.6rem 0.85rem !important;
    width: 100%;
}

.pens-pro-kit-suggestion {
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-size: 0.84rem;
    color: #e2e8f0;
    line-height: 1.45;
    text-align: left;
}

.pens-scroll-pro-link {
    color: #5eead4 !important;
    font-weight: 700;
    text-decoration: underline;
}

.pens-scroll-pro-link:hover {
    color: #ffffff !important;
}

.pens-prod-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0;
}

.pens-prod-price {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--pens-accent);
}

.pens-prod-desc {
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.pens-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.pens-form-col label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.45rem;
}

.pens-action-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.pens-qty-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pens-qty-selector label {
    font-weight: 700;
    color: #cbd5e1;
    font-size: 0.95rem;
}

.pens-qty-input {
    width: 65px !important;
    height: 48px !important;
    text-align: center;
    font-weight: 700;
    padding: 0.5rem !important;
}

.pens-add-cart-btn {
    flex: 1;
    min-width: 220px;
    gap: 0.6rem;
}

/* Supplies 2-Column Grid */
.pens-supplies-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.pens-supply-item-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--pens-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.pens-supply-media img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    background: #0f172a;
    border: 1px solid var(--pens-border);
    object-fit: cover;
}

.pens-supply-info {
    flex: 1;
}

.pens-supply-title-wrap {
    margin-bottom: 0.5rem;
}

.pens-supply-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 0.25rem;
}

.pens-supply-price {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pens-accent);
}

.pens-sub-note {
    font-size: 0.8rem;
    color: var(--pens-text-muted);
    font-weight: normal;
}

.pens-supply-desc {
    font-size: 0.88rem;
    color: var(--pens-text-muted);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.pens-supply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pens-mini-link {
    font-size: 0.82rem;
    color: var(--pens-text-muted) !important;
    font-weight: 600;
}
.pens-mini-link:hover {
    color: var(--pens-accent) !important;
}

.pens-inline-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pens-qty-stepper {
    display: flex;
    align-items: center;
    background: #0f172a;
    border: 1px solid var(--pens-border-strong);
    border-radius: 6px;
    overflow: hidden;
}

.pens-qty-stepper button {
    background: transparent;
    color: #ffffff;
    border: none;
    width: 32px;
    height: 38px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.pens-qty-stepper button:hover {
    background: rgba(20, 184, 166, 0.2);
    color: var(--pens-accent);
}

.pens-qty-stepper .qty-display {
    width: 30px;
    text-align: center;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.95rem;
}

.pens-add-mini-btn {
    padding: 0.5rem 1rem !important;
    min-height: 38px !important;
    font-size: 0.9rem !important;
}

/* ==========================================================================
   LIGHTBOX CART POPUP MODAL
   ========================================================================== */
.pens-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 7, 18, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 1.25rem;
}

.pens-modal-backdrop.is-open,
.pens-modal-backdrop.pens-modal-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
}

.pens-upsell-option-card:hover {
    border-color: var(--pens-accent) !important;
    background: rgba(20, 184, 166, 0.15) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(20, 184, 166, 0.25);
}

@media (max-width: 600px) {
    .pens-upsell-options-grid {
        grid-template-columns: 1fr !important;
    }
}

.pens-modal-card {
    background: rgba(15, 23, 42, 0.96);
    border: 1px solid var(--pens-border-strong);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(20, 184, 166, 0.2);
    text-align: center;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pens-modal-backdrop.is-open .pens-modal-card {
    transform: translateY(0) scale(1);
}

.pens-modal-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: var(--pens-text-muted);
    cursor: pointer;
    line-height: 1;
}
.pens-modal-close:hover {
    color: #ffffff;
}

.pens-modal-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(20, 184, 166, 0.15);
    border: 2px solid var(--pens-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}

.pens-modal-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 1rem;
}

.pens-modal-items {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid var(--pens-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    text-align: left;
    font-size: 0.95rem;
    color: #e2e8f0;
}

.pens-modal-items ul {
    margin: 0;
    padding-left: 1.25rem;
}

.pens-modal-items li {
    margin-bottom: 0.35rem;
}
.pens-modal-items li:last-child {
    margin-bottom: 0;
}

.pens-modal-subtotal-wrap {
    display: flex;
    justify-content: space-between;
    font-size: 1.15rem;
    color: #ffffff;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
}

.pens-modal-subtotal-wrap strong {
    color: var(--pens-accent);
    font-size: 1.3rem;
}

.pens-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.pens-btn-secondary {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--pens-border);
    color: #ffffff;
    font-weight: 600;
    padding: 0.85rem 1rem;
    border-radius: var(--pens-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}
.pens-btn-secondary:hover {
    background: rgba(51, 65, 85, 0.9);
    border-color: var(--pens-border-strong);
}

.pens-btn-checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem !important;
}

/* Responsive adjustments */
@media (max-width: 860px) {
    .pens-product-card-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .pens-product-card-media {
        margin: 0 auto;
    }
    .pens-form-row {
        grid-template-columns: 1fr;
    }
    .pens-supplies-grid {
        grid-template-columns: 1fr;
    }
    .pens-prod-header {
        justify-content: center;
        text-align: center;
    }
    .pens-action-row {
        justify-content: center;
    }
    .pens-modal-actions {
        grid-template-columns: 1fr;
    }
}