/* =====================================================
   Penify Shop - WooCommerce Override (Shopier-style luxury)
   ===================================================== */

/* ----- General ----- */
.woocommerce-notices-wrapper { margin-bottom: 1.5rem; }
/* Message / info: single-line notices (flex is fine) */
.woocommerce-message,
.woocommerce-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    background-color: #f9f6ff;
    border: 1px solid rgba(114, 14, 236, 0.15);
    border-left: 4px solid var(--mor, #720eec);
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
    box-shadow: 0 2px 10px rgba(114, 14, 236, 0.06);
    margin: 0 0 1rem;
    list-style: none;
}
/* Error: this is a <ul> with <li> items — must stack vertically, NOT flex */
.woocommerce ul.woocommerce-error,
.woocommerce-account .woocommerce-error,
.woocommerce-error {
    display: block !important;
    list-style: none !important;
    background-color: #fdf0f1 !important;
    border: 1px solid rgba(220, 53, 69, 0.25) !important;
    border-left: 4px solid #dc3545 !important;
    padding: 1rem 1.15rem 1rem 2.85rem !important;
    border-radius: 10px !important;
    margin: 0 0 1.25rem !important;
    position: relative !important;
    color: #b02a37 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    box-shadow: 0 2px 10px rgba(220, 53, 69, 0.06) !important;
    overflow: visible !important;
}
/* single clean error icon (top-left) */
.woocommerce-error::before {
    content: "\F623" !important; /* bootstrap-icons exclamation */
    font-family: "bootstrap-icons" !important;
    display: block !important;
    position: absolute !important;
    left: 1rem !important;
    top: 0.95rem !important;
    color: #dc3545 !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
}
.woocommerce-error li {
    list-style: none !important;
    padding: 0.12rem 0 !important;
    margin: 0 !important;
    color: #b02a37 !important;
}
.woocommerce-error li::before { content: none !important; display: none !important; }
.woocommerce-error li .button { margin-top: 0.5rem; }
.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--mor, #720eec);
    position: static;
    margin: 0;
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}
/* The inline "View cart / Checkout" button inside the notice */
.woocommerce-message .button,
.woocommerce-info .button {
    margin-left: auto;
    padding: 0.4rem 1.1rem;
    font-size: 0.85rem;
}

/* Star ratings */
.woocommerce .star-rating { color: #f5b400; }

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--mor, #720eec);
    color: #fff;
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    transition: 0.25s;
    border: 1px solid var(--mor, #720eec);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: #5a0bbb;
    border-color: #5a0bbb;
    color: #fff;
    transform: translateY(-1px);
}

/* Primary / "alt" buttons — Proceed to Checkout, Place order, etc. WooCommerce
   core paints these with its own (grey/blue) alt colour; force the theme purple
   so the cart's checkout button matches every other button on the site. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    background-color: var(--mor, #720eec) !important;
    border-color: var(--mor, #720eec) !important;
    color: #fff !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #5a0bbb !important;
    border-color: #5a0bbb !important;
    color: #fff !important;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
    font-size: 1.05rem;
    padding: 0.85rem 1.4rem;
}

/* =====================================================
   SHOP / ARCHIVE — uniform product cards
   ===================================================== */
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
}
.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.1);
    border-radius: 12px;
    padding: 0;
    transition: 0.3s;
    text-align: center;
    display: flex !important;
    flex-direction: column;
    height: auto;
    margin: 0 !important;
    overflow: hidden;
    /* 4 columns on desktop (accounts for the 1rem flex gap) */
    flex: 0 0 calc(25% - 0.75rem) !important;
    max-width: calc(25% - 0.75rem) !important;
    width: auto !important;
    float: none !important;
}
@media (max-width: 991px) {
    .woocommerce ul.products li.product {
        flex-basis: calc(33.333% - 0.667rem) !important;
        max-width: calc(33.333% - 0.667rem) !important;
    }
}
.woocommerce ul.products li.product a img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    padding: 1rem;
    margin: 0;
}
.woocommerce ul.products li.product:hover {
    border-color: var(--mor, #720eec);
    box-shadow: 0 10px 20px rgba(114, 14, 236, 0.12);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #222;
    padding: 0.5rem 0.75rem 0;
    height: 2.6em;
    min-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
    word-break: break-word;
}
.woocommerce ul.products li.product .star-rating {
    margin: 0 auto 0.25rem;
    font-size: 12px;
    display: inline-block;
    float: none;
    min-height: 1.2em;
}
/* Rating placeholder for uniform height in archive */
.woocommerce ul.products li.product:not(:has(.star-rating)) .woocommerce-loop-product-link::after {
    content: "";
    display: block;
    height: 22px;
    width: 100%;
}
.woocommerce ul.products li.product .price {
    color: var(--mor, #720eec);
    font-weight: 700;
    font-size: 1.05rem;
    padding: 0 0.75rem;
    margin-bottom: 0.5rem;
}
.woocommerce ul.products li.product .price del { color: #999; opacity: 0.7; }
.woocommerce ul.products li.product .button {
    margin-top: auto;
    font-size: 13px;
    padding: 0.55rem 1rem;
    border-radius: 0 0 12px 12px !important;
}
.woocommerce ul.products li.product .button::after { display: none; }

/* =====================================================
   SINGLE PRODUCT — Shopier-style luxury layout
   ===================================================== */

/* Free shipping strip at top */
.penify-free-ship-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}
.penify-free-ship-strip i { font-size: 1rem; color: #16a34a; }
.penify-free-ship-strip strong { font-weight: 600; }
@media (max-width: 575px) {
    .penify-free-ship-strip { font-size: 12px; padding: 0.35rem 0.75rem; }
}

/* Main layout */
.penify-product-main { align-items: flex-start; }
.penify-gallery-col { margin-bottom: 2rem; }
.penify-info-col { margin-bottom: 2rem; }

/* Gallery (Hepsiburada-style) */
.penify-gallery {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: sticky;
    top: 100px;
}
.penify-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 88px;
    box-sizing: border-box;
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(114,14,236,0.2) transparent;
    padding: 4px;
}
.penify-gallery-thumbs::-webkit-scrollbar { width: 4px; }
.penify-gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.penify-gallery-thumbs::-webkit-scrollbar-thumb { background: rgba(114,14,236,0.2); border-radius: 2px; }
.penify-gallery-thumbs::-webkit-scrollbar-thumb:hover { background: var(--mor, #720eec); }

.penify-gallery-stage {
    flex: 1;
    min-width: 0;
    position: relative;
}

.penify-thumb {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    border: 2px solid #e8e8e8;
    border-radius: 10px;
    background: #fff;
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.penify-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.penify-thumb:hover {
    border-color: rgba(114,14,236,0.4);
    box-shadow: 0 2px 8px rgba(114,14,236,0.18);
}
.penify-thumb.active {
    border-color: var(--mor, #720eec);
    box-shadow: 0 0 0 2px rgba(114, 14, 236, 0.15);
}

/* Video thumb */
.penify-thumb-video .penify-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    color: #fff;
    font-size: 28px;
    pointer-events: none;
}

/* 360 thumb */
.penify-thumb-360 {
    flex-direction: column;
    gap: 0;
    color: var(--mor, #720eec);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    background: #f9f6ff;
}
.penify-thumb-360 i { font-size: 22px; }
.penify-thumb-360 span { line-height: 1; margin-top: 2px; }

.penify-gallery-main {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
    padding: 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
@supports not (aspect-ratio: 1 / 1) {
    .penify-gallery-main { height: 0; padding-bottom: 100%; }
    .penify-gallery-main > * {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
        max-width: calc(100% - 3rem); max-height: calc(100% - 3rem);
    }
}
.penify-gallery-main img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
    display: block;
}
.penify-gallery-main:hover img { transform: scale(1.05); }
.penify-sold-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #dc3545;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    letter-spacing: 1px;
    z-index: 3;
}
.penify-gallery-counter {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    letter-spacing: 0.3px;
}

/* 360 viewer (overlays main image) */
.penify-360-viewer {
    position: absolute;
    inset: 0;
    background: #fafafa;
    border-radius: 12px;
    overflow: hidden;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    user-select: none;
}
.penify-360-viewer img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.penify-360-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 6;
    pointer-events: none;
}
.penify-360-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 7;
    transition: background 0.2s;
}
.penify-360-close:hover { background: rgba(0,0,0,0.9); }

/* Mobile: thumbs become horizontal below */
@media (max-width: 767px) {
    .penify-gallery {
        flex-direction: column-reverse;
        gap: 10px;
        /* Base rule is `align-items: flex-start` (correct for the desktop ROW
           layout). In this mobile COLUMN layout that same value pins children
           to the left at content-width, so the image sat left with a gap on
           the right. `stretch` makes stage + thumbs fill the width → centered. */
        align-items: stretch;
    }
    .penify-gallery-thumbs {
        flex-direction: row;
        width: 100%;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 2px;
    }
    .penify-thumb {
        flex: 0 0 60px;
        width: 60px;
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .penify-thumb:hover { transform: none; }
    .penify-gallery-main { aspect-ratio: 1 / 1; }
    .penify-gallery-counter { bottom: 8px; right: 8px; font-size: 11px; padding: 4px 10px; }
    .penify-sold-badge { top: 8px; left: 8px; font-size: 11px; padding: 4px 10px; }
}

/* Info column */
.penify-info-col { padding-left: 0.5rem; }
@media (max-width: 991px) {
    .penify-info-col { padding-left: 15px; }
}

.penify-brand-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #f9f6ff;
    color: var(--mor, #720eec);
    font-size: 13px;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    transition: 0.2s;
}
.penify-brand-ribbon:hover { background: var(--mor, #720eec); color: #fff; }

.penify-product-title {
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
    word-break: break-word;
    /* Keyword-stuffed product names can run 3-4 lines and shove the price
       below the fold — cap the visible title at 2 lines. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 768px) {
    .penify-product-title { font-size: 1.25rem; }
}

.penify-product-rating .star-rating { display: inline-block; vertical-align: middle; }

/* Price box — price on the left, stock badge on the right (one row) */
.penify-price-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    background: linear-gradient(135deg, #f9f6ff 0%, #fff 100%);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.25rem;
    border: 1px solid rgba(114, 14, 236, 0.1);
}
.penify-price-main { display: flex; flex-direction: column; gap: 0.3rem; }
.penify-price {
    color: var(--mor, #720eec);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}
.penify-price del { color: #999; font-size: 1.1rem; font-weight: 500; margin-right: 0.5rem; }
.penify-price ins { background: transparent; color: var(--mor, #720eec); text-decoration: none; }
.penify-save-badge {
    display: inline-block;
    margin-top: 0.4rem;
    color: #198754;
    background: #d1e7dd;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.penify-short-desc {
    color: #555;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.penify-stock-line { margin-bottom: 1rem; }
.penify-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 999px;
}
.penify-stock.in { color: #198754; background: #d1e7dd; }
.penify-stock.out { color: #dc3545; background: #f8d7da; }

/* Add to cart area */
.penify-add-to-cart-area { margin: 1rem 0; }
.penify-cta { border-radius: 12px; padding: 1rem; font-size: 1.05rem; }

/* Trust badges */
.penify-trust-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 1rem 0 0.75rem;
    padding: 1.25rem;
    background: #f9f6ff;
    border-radius: 12px;
}
.penify-trust-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 13px;
}
.penify-trust-item i {
    color: var(--mor, #720eec);
    font-size: 1.4rem;
    flex-shrink: 0;
}
.penify-trust-item strong { display: block; color: #222; font-size: 13px; }
.penify-trust-item small { color: #666; font-size: 11.5px; line-height: 1.3; display: block; }
@media (max-width: 575px) {
    .penify-trust-badges { grid-template-columns: 1fr; }
}

/* Secondary actions (wishlist / compare) — compact single row so they
   stay below the buy button + trust signals instead of two full-width
   buttons that stretched the page. */
.penify-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
}
.penify-secondary-btn {
    flex: 1 1 0;
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.75rem;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    background: #fff;
    border: 1.5px solid #e4e4e4;
    border-radius: 999px;
    cursor: pointer;
    transition: 0.2s;
    line-height: 1.2;
}
.penify-secondary-btn i { font-size: 1rem; }
.penify-secondary-btn:hover {
    border-color: var(--mor, #720eec);
    color: var(--mor, #720eec);
}
.penify-secondary-btn.active {
    border-color: var(--mor, #720eec);
    color: var(--mor, #720eec);
    background: rgba(114, 14, 236, 0.06);
}
html[data-penify-mode="dark"] .penify-secondary-btn {
    background: var(--bg-card);
    color: #ccc;
    border-color: rgba(255,255,255,0.15);
}

.penify-meta-line strong { color: #555; }
.penify-meta-line a { text-decoration: none; }
.penify-meta-line a:hover { color: var(--mor, #720eec) !important; text-decoration: underline; }

/* =====================================================
   PAYMENT METHODS STRIP
   ===================================================== */
.penify-payment-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    background: #fff;
    border: 1px dashed rgba(114, 14, 236, 0.3);
    border-radius: 10px;
    font-size: 13px;
}
.penify-payment-strip-label {
    color: #555;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.penify-payment-strip-label i { color: var(--mor, #720eec); }
.penify-payment-strip-items {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.penify-payment-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 10px;
    background: #f9f6ff;
    border: 1px solid rgba(114, 14, 236, 0.15);
    border-radius: 999px;
    color: #333;
    font-size: 12px;
    font-weight: 500;
    transition: 0.2s;
}
.penify-payment-item:hover {
    background: var(--mor, #720eec);
    color: #fff;
    border-color: var(--mor, #720eec);
}
.penify-payment-item i { font-size: 14px; color: var(--mor, #720eec); }
.penify-payment-item:hover i { color: #fff; }
.penify-payment-item-text { line-height: 1; }
@media (max-width: 575px) {
    .penify-payment-strip { font-size: 12px; }
    .penify-payment-item-text { display: none; }
}

/* Brand payment logos on the product page — full colour (footer keeps them dim) */
.penify-payment-logos { gap: 8px; }
.penify-payment-logos .penify-pay-logo {
    height: 30px;
    padding: 2px 5px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.penify-payment-logos .penify-pay-logo:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(114, 14, 236, 0.15);
}
.penify-payment-logos .penify-pay-logo-svg {
    height: 24px;
    opacity: 1;
    filter: none;
}

/* =====================================================
   VARIATIONS & QUANTITY — professional styled
   ===================================================== */
.woocommerce div.product form.cart .variations {
    margin-bottom: 1.25rem;
    width: 100%;
}
.woocommerce div.product form.cart .variations tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.85rem;
    border: none;
    background: #fafafa;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #eee;
}
.woocommerce div.product form.cart .variations th {
    color: #444;
    font-weight: 700;
    font-size: 13px;
    padding: 0 0 0.5rem 0;
    text-align: left;
    border: none;
    background: transparent;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    width: 100%;
}
.woocommerce div.product form.cart .variations th label {
    color: #444;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}
.woocommerce div.product form.cart .variations td {
    padding: 0;
    border: none;
    background: transparent;
    display: block;
    width: 100%;
}
.woocommerce div.product form.cart .variations select {
    width: 100%;
    max-width: 100%;
    height: 44px;
    padding: 0 2.5rem 0 1rem;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23720eec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.woocommerce div.product form.cart .variations select:hover {
    border-color: rgba(114,14,236,0.3);
}
.woocommerce div.product form.cart .variations select:focus {
    outline: none;
    border-color: var(--mor, #720eec);
    box-shadow: 0 0 0 3px rgba(114, 14, 236, 0.12);
}

/* Variation swatches (if used) */
.woocommerce div.product form.cart .variations .swatches-select { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.woocommerce div.product form.cart .variations .swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid #eee; cursor: pointer; transition: 0.2s; }
.woocommerce div.product form.cart .variations .swatch:hover { border-color: rgba(114,14,236,0.4); transform: scale(1.05); }
.woocommerce div.product form.cart .variations .swatch.selected { border-color: var(--mor, #720eec); box-shadow: 0 0 0 2px rgba(114, 14, 236, 0.2); }

/* Reset/Clear variations — buton gibi */
.woocommerce div.product form.cart .reset_variations,
.reset_variations {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-top: 10px !important;
    padding: 6px 14px !important;
    background: #f9f6ff !important;
    color: var(--mor, #720eec) !important;
    border: 1px solid rgba(114, 14, 236, 0.25) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: 0.2s;
    cursor: pointer;
}
.woocommerce div.product form.cart .reset_variations::before,
.reset_variations::before {
    content: "\F5AE";
    font-family: "bootstrap-icons";
    font-size: 12px;
    line-height: 1;
}
.woocommerce div.product form.cart .reset_variations:hover,
.reset_variations:hover {
    background: var(--mor, #720eec) !important;
    color: #fff !important;
    border-color: var(--mor, #720eec) !important;
}

/* Quantity input */
.woocommerce .quantity {
    display: inline-flex !important;
    align-items: stretch;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    height: 46px;
    width: auto;
    float: none !important;
    margin: 0 0.5rem 0 0;
    vertical-align: middle;
}
.woocommerce .quantity .qty {
    width: 60px;
    min-width: 60px;
    height: 100%;
    text-align: center;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    background: transparent;
    -moz-appearance: textfield;
    padding: 0 4px;
}
.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce .quantity .qty:focus { outline: none; }
.woocommerce .quantity .minus,
.woocommerce .quantity .plus {
    width: 40px;
    height: 100%;
    background: #f9f6ff;
    border: none;
    color: var(--mor, #720eec);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer !important;
    transition: 0.2s;
    padding: 0;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.woocommerce .quantity .minus:hover,
.woocommerce .quantity .plus:hover { background: var(--mor, #720eec); color: #fff; }
.woocommerce .quantity .minus { border-right: 1px solid #eee; }
.woocommerce .quantity .plus  { border-left:  1px solid #eee; }

.woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}
/* Quantity label (added via JS) */
.penify-qty-label {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-weight: 700;
    color: #444;
    font-size: 14px;
    background: #f9f6ff;
    height: 100%;
    border-right: 1px solid #e8e8e8;
    flex-shrink: 0;
}

/* Quantity boxed field — matches the Style/Color variation boxes so the
   "Adet" control reads as its own field and is clearly spaced from the
   Add-to-cart button (wrapped in JS as .penify-qty-box). */
.penify-qty-box {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px 14px;
    order: 1;
}
.penify-qty-boxlabel {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
    line-height: 1;
}
.penify-qty-box .quantity { margin: 0 !important; }
@media (max-width: 768px) {
    .penify-qty-box { width: 100%; align-items: stretch; }
    .penify-qty-box .quantity { width: 100%; }
    .penify-qty-box .quantity .qty { flex: 1 1 auto; width: auto; min-width: 0; }
}
html[data-penify-mode="dark"] .penify-qty-box { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }

/* Variation price — a compact, self-contained price tag (was a naked purple
   number orphaned in the corner). Light branded pill so it reads as an
   intentional "selected price" chip, not a floating duplicate. */
.woocommerce-variation-price {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 14px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #f3ebff 0%, #faf7ff 100%);
    border: 1.5px solid rgba(114, 14, 236, 0.18);
    border-radius: 999px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--mor, #720eec);
    line-height: 1.2;
    box-shadow: 0 2px 10px rgba(114, 14, 236, 0.08);
}
.woocommerce-variation-price:empty { display: none; }
.woocommerce-variation-price::before { content: none; }
.woocommerce div.product form.cart .quantity { order: 1; }
.woocommerce div.product form.cart .single_add_to_cart_button {
    order: 2;
    flex: 1 1 200px;
    min-height: 46px;
    background: var(--mor, #720eec);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 2rem;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: 0.25s;
    text-transform: uppercase;
    line-height: 1;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
    background: #5a0bbb;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(114, 14, 236, 0.25);
}
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
    background: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* -----------------------------------------------------------------
   IMPORTANT: single-product.php renders the product as <article class="product">,
   NOT <div class="product">, so the ".woocommerce div.product form.cart" rules
   above do NOT match on the single product page. Re-declare the essentials
   scoped to the .penify-add-to-cart-area wrapper so variations, the option
   dropdown and quantity get styled there too.
   ----------------------------------------------------------------- */
.penify-add-to-cart-area form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}
/* On variable products the price + qty + button live inside this wrapper;
   force it full-width so it isn't shrunk/centered (which left the button
   floating mid-row). */
.penify-add-to-cart-area .single_variation_wrap { width: 100%; }
/* gap handles spacing; drop the theme's default right-margin on quantity */
.penify-add-to-cart-area .quantity { margin: 0 !important; }
.penify-add-to-cart-area .variations {
    margin-bottom: 1.25rem;
    width: 100%;
    display: block;
}
/* Attribute rows (Color, Size, …) stacked full-width — Hepsiburada-style —
   so the swatch buttons (XS/S/M/L/XL) sit in a single row instead of
   wrapping inside a cramped half-width column. */
.penify-add-to-cart-area .variations tbody { display: block; }
.penify-add-to-cart-area .variations tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0.75rem;
    background: #fafafa;
    border-radius: 12px;
    padding: 12px 14px;
    border: 1px solid #eee;
}
.penify-add-to-cart-area .variations th,
.penify-add-to-cart-area .variations th label {
    color: #444;
    font-weight: 700;
    font-size: 13px;
    padding: 0 0 0.5rem 0;
    text-align: left;
    border: none;
    background: transparent;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    width: 100%;
    margin: 0;
}
.penify-add-to-cart-area .variations td {
    padding: 0;
    border: none;
    background: transparent;
    display: block;
    width: 100%;
}
.penify-add-to-cart-area .variations select {
    width: 100%;
    max-width: 100%;
    height: 44px;
    padding: 0 2.5rem 0 1rem;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23720eec' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    line-height: 1.4;
}
.penify-add-to-cart-area .variations select:hover { border-color: rgba(114,14,236,0.3); }
.penify-add-to-cart-area .variations select:focus {
    outline: none;
    border-color: var(--mor, #720eec);
    box-shadow: 0 0 0 3px rgba(114, 14, 236, 0.12);
}
/* Variable products render qty + button inside .woocommerce-variation-add-to-cart,
   not as direct children of form.cart, so flex them here too — otherwise the
   button hugs its text and floats mid-row. */
.penify-add-to-cart-area .woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
}
.penify-add-to-cart-area .woocommerce-variation-add-to-cart .quantity { order: 1; margin: 0 !important; }
.penify-add-to-cart-area .woocommerce-variation-add-to-cart .single_add_to_cart_button { order: 2; }

.penify-add-to-cart-area .quantity { order: 1; }
.penify-add-to-cart-area .single_add_to_cart_button {
    order: 2;
    flex: 1 1 200px;
    min-height: 46px;
    background: var(--mor, #720eec);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0 2rem;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: 0.25s;
    text-transform: uppercase;
    line-height: 1;
}
.penify-add-to-cart-area .single_add_to_cart_button:hover {
    background: #5a0bbb;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(114, 14, 236, 0.25);
}
.penify-add-to-cart-area .single_add_to_cart_button:disabled {
    background: #999;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
@media (max-width: 768px) {
    .penify-add-to-cart-area form.cart { flex-direction: column; align-items: stretch; }
    .penify-add-to-cart-area .single_add_to_cart_button { width: 100%; }
}

/* =====================================================
   TABS (sticky under header when scrolling)
   ===================================================== */
.penify-tabs {
    border-bottom: 2px solid #f0eaff;
    gap: 0.4rem;
    position: sticky;
    top: 140px;
    z-index: 99;
    background: #f9f6ff;
    padding: 0.6rem 0.75rem;
    margin: 2rem 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border-radius: 12px 12px 0 0;
    list-style: none;
}
@media (max-width: 991px) {
    .penify-tabs { top: 0; }
}
.penify-tabs .nav-item { list-style: none; }
.penify-tabs .nav-link {
    color: #333 !important;
    font-weight: 600;
    font-size: 14px;
    border-radius: 10px;
    padding: 0.65rem 1.25rem;
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.15);
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.2;
    text-decoration: none;
}
.penify-tabs .nav-link:hover { color: var(--mor, #720eec) !important; background: #fff; border-color: var(--mor, #720eec); transform: translateY(-1px); }
.penify-tabs .nav-link.active {
    background: var(--mor, #720eec) !important;
    color: #fff !important;
    border-color: var(--mor, #720eec) !important;
    box-shadow: 0 4px 12px rgba(114, 14, 236, 0.3);
}
.penify-tabs .nav-link .badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 20px;
    padding: 0.15rem 0.5rem;
    font-size: 11px;
    font-weight: 700;
}
.penify-tabs .nav-link:not(.active) .badge {
    background: var(--mor, #720eec);
    color: #fff;
}
.penify-tab-content {
    border: 1px solid rgba(114, 14, 236, 0.1);
    border-top: none;
    border-radius: 0 0 12px 12px;
    line-height: 1.7;
    color: #444;
    min-height: 200px;
    overflow: visible;
}
.penify-tab-content h2, .penify-tab-content h3, .penify-tab-content h4 { color: #1a1a1a; }
.penify-tab-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* Ensure tab panes are visible even if Bootstrap JS fails */
.penify-tab-content .tab-pane { display: none; }
.penify-tab-content .tab-pane.active { display: block !important; visibility: visible !important; opacity: 1 !important; animation: penifyFadeIn 0.3s ease; }
@keyframes penifyFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.penify-info-list { list-style: none; padding: 0; }
.penify-info-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}
.penify-info-list li:last-child { border-bottom: none; }
.penify-info-list li strong { min-width: 140px; color: #222; }
.penify-info-list li a { color: var(--mor, #720eec); text-decoration: none; }
.penify-info-list li a:hover { text-decoration: underline; }

.penify-no-description { color: #444; }
.penify-no-description p { line-height: 1.7; }

.penify-reviews-disabled {
    padding: 2rem;
    text-align: center;
    background: #f9f6ff;
    border-radius: 12px;
    color: #666;
}
.penify-reviews-disabled i { font-size: 2rem; color: var(--mor, #720eec); display: block; margin-bottom: 0.5rem; }

/* Related + Recently viewed use penify_product_card() — the exact same card as
   the homepage/shop. No extra overrides here so they stay pixel-identical. */

/* Override WC default tabs to look like our pill style */
.woocommerce div.product .woocommerce-tabs { display: none; } /* we use our own .penify-tabs */

/* =====================================================
   REVIEWS — images as small thumbnails + lightbox
   ===================================================== */
.commentlist .comment-text .description img,
.woocommerce-Reviews .description img,
.penify-tab-content #reviews img,
.penify-tab-content .comment-text img {
    max-width: 100px !important;
    max-height: 100px !important;
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 0.25rem 0.25rem 0.25rem 0 !important;
    cursor: pointer;
    transition: 0.2s;
    display: inline-block !important;
}
.commentlist .comment-text .description img:hover,
.woocommerce-Reviews .description img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.woocommerce #review_form .comment-form-images,
.woocommerce #review_form .comment-form-image { display: block; margin: 0.5rem 0; }

/* No reviews placeholder */
.penify-no-reviews {
    background: #f9f6ff;
    border-radius: 12px;
    border: 1px dashed rgba(114, 14, 236, 0.2);
}
.penify-no-reviews i { color: var(--mor, #720eec); opacity: 0.5; }

/* Review form */
.penify-review-form-wrapper { clear: both; padding-top: 1.5rem; }
.penify-comment-form .form-control { border-radius: 8px; }
.penify-comment-form input[type="submit"],
.penify-comment-form .submit {
    background: var(--mor, #720eec);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.75rem 2rem;
    font-weight: 600;
    transition: 0.2s;
}
.penify-comment-form input[type="submit"]:hover,
.penify-comment-form .submit:hover { background: #5a0bbb; transform: translateY(-1px); }

/* Comment list */
.woocommerce-Reviews .commentlist,
.woocommerce #reviews .commentlist { list-style: none; padding: 0; }
.woocommerce-Reviews .commentlist li,
.woocommerce #reviews .commentlist li {
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 1rem;
    background: #fff;
}
.woocommerce-Reviews .comment-text .author,
.woocommerce #reviews .comment-text .author { font-weight: 600; }
.woocommerce-Reviews .comment-text .meta,
.woocommerce #reviews .comment-text .meta { font-size: 12px; color: #888; margin-bottom: 0.5rem; }
.woocommerce-Reviews .star-rating,
.woocommerce #reviews .star-rating { color: #f5b400; }

/* Review rating stars */
.woocommerce p.stars a { color: #f5b400; }
.woocommerce p.stars.selected a.active::before,
.woocommerce p.stars:hover a:hover::before,
.woocommerce p.stars a:focus::before { color: #f5b400; }

/* =====================================================
   CART
   ===================================================== */
.woocommerce table.shop_table {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
}
.woocommerce table.shop_table th { background: #f9f6ff; }
.woocommerce-cart .cart-collaterals .cart_totals {
    background: #f9f6ff;
    padding: 1.5rem;
    border-radius: 12px;
}
.woocommerce a.remove { color: #dc3545 !important; }

/* =====================================================
   CHECKOUT
   ===================================================== */
.woocommerce form .form-row label { font-weight: 500; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--mor, #720eec); }

/* =====================================================
   PAGINATION
   ===================================================== */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    color: var(--mor, #720eec);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: rgba(114, 14, 236, 0.08); }
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--mor, #720eec);
    color: #fff;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.penify-shop-sidebar .widget { background: #fff; padding: 1.25rem; border-radius: 12px; border: 1px solid rgba(114, 14, 236, 0.1); }
.penify-shop-sidebar .widget-title { color: var(--mor, #720eec); }
.penify-shop-sidebar .woocommerce-widget-layered-nav-list li { padding: 0.25rem 0; }
.penify-shop-sidebar .woocommerce-widget-layered-nav-list li.chosen a::before { color: var(--mor, #720eec); }

/* =====================================================
   MY ACCOUNT — Professional Layout
   ===================================================== */
.woocommerce-account .woocommerce {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
    flex: 0 0 240px;
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.1);
    border-radius: 12px;
    padding: 1rem 0;
    height: fit-content;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: #444;
    text-decoration: none;
    border-left: 3px solid transparent;
    font-weight: 500;
    transition: 0.2s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: #f9f6ff;
    color: var(--mor, #720eec);
    border-left-color: var(--mor, #720eec);
}
.woocommerce-account .woocommerce-MyAccount-content {
    flex: 1 1 600px;
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
}
.woocommerce-account .woocommerce-MyAccount-content p:first-child {
    background: #f9f6ff;
    border-left: 4px solid var(--mor, #720eec);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}
.woocommerce-account .woocommerce-orders-table {
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.woocommerce-account .woocommerce-orders-table th { background: #f9f6ff; font-weight: 600; }
.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #f1ecfa;
}
.woocommerce-account .woocommerce-orders-table tr:last-child td { border-bottom: 0; }
.woocommerce-account .woocommerce-orders-table__cell-order-actions { text-align: right; white-space: nowrap; }
.woocommerce-account .woocommerce-orders-table .button {
    margin: 2px;
    font-size: 12px;
    padding: 0.4rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--mor, #720eec);
    background: #fff;
    color: var(--mor, #720eec);
}
/* primary action (View) filled; Track outlined for a clean distinction */
.woocommerce-account .woocommerce-orders-table .button.view {
    background: var(--mor, #720eec);
    color: #fff;
}
.woocommerce-account .woocommerce-orders-table .button:hover {
    background: var(--mor, #720eec);
    color: #fff;
}

/* ----- Mobile: turn the orders table into stacked cards ----- */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-orders-table { border: 0; }
    .woocommerce-account .woocommerce-orders-table thead { display: none; }
    .woocommerce-account .woocommerce-orders-table tbody,
    .woocommerce-account .woocommerce-orders-table tr,
    .woocommerce-account .woocommerce-orders-table td { display: block; width: 100%; }
    .woocommerce-account .woocommerce-orders-table tr {
        border: 1px solid #ece6ff;
        border-radius: 12px;
        padding: 10px 14px;
        margin-bottom: 14px;
        background: #fff;
        box-shadow: 0 4px 14px rgba(114,14,236,.05);
    }
    .woocommerce-account .woocommerce-orders-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 8px 0;
        border-bottom: 1px solid #f4f0fb;
    }
    .woocommerce-account .woocommerce-orders-table td::before {
        content: attr(data-title);
        font-weight: 600;
        color: #777;
        text-align: left;
        margin-right: 10px;
    }
    .woocommerce-account .woocommerce-orders-table td:last-child { border-bottom: 0; }
    .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
        display: block;
        text-align: center;
        padding-top: 10px;
    }
    .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
    .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button {
        display: block;
        width: 100%;
        margin: 6px 0;
        padding: 0.6rem;
        text-align: center;
    }
}
.woocommerce-account .woocommerce-EditAccountForm fieldset,
.woocommerce-account .woocommerce-address-fields fieldset {
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}
.woocommerce-account .woocommerce-EditAccountForm legend,
.woocommerce-account .woocommerce-address-fields legend {
    background: var(--mor, #720eec);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.woocommerce-form-login,
.woocommerce-form-register {
    max-width: 480px;
    margin: 2rem auto;
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.1);
    border-radius: 12px;
    padding: 2rem;
}
/* Login / Register form fields — clean & spacious (fixes cramped inputs) */
#customer_login.col2-set,
.woocommerce-account .u-columns.col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: stretch;
    justify-content: center;
}
#customer_login .u-column1,
#customer_login .u-column2 {
    flex: 1 1 320px;
    max-width: 460px;
    display: flex;
    flex-direction: column;
}
#customer_login .woocommerce-form-login,
#customer_login .woocommerce-form-register {
    max-width: none !important;
    margin: 0 !important;
    width: 100%;
    flex: 1;
}
#customer_login h2 {
    font-size: 1.3rem;
    font-weight: 800;
    text-align: center;
    color: #1a1a1a;
    margin: 0 0 1rem;
}
.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row {
    display: block;
    margin-bottom: 1.15rem;
    padding: 0;
}
.woocommerce-form-login label,
.woocommerce-form-register label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #444;
    margin-bottom: 0.45rem;
}
.woocommerce-form-login input.input-text,
.woocommerce-form-login input[type="text"],
.woocommerce-form-login input[type="email"],
.woocommerce-form-login input[type="password"],
.woocommerce-form-register input.input-text,
.woocommerce-form-register input[type="text"],
.woocommerce-form-register input[type="email"],
.woocommerce-form-register input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 1rem;
    border: 1.5px solid #e2dcf0;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    transition: 0.2s;
}
.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus {
    outline: none;
    border-color: var(--mor, #720eec);
    box-shadow: 0 0 0 3px rgba(114, 14, 236, 0.12);
}
.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: #555;
    margin: 0 !important;
}
.woocommerce-form-login__rememberme input {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}
.woocommerce-form-login .button,
.woocommerce-form-register .button {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1rem !important;
    border-radius: 999px !important;
    font-weight: 700;
    margin-top: 0.25rem;
}
.woocommerce-LostPassword { text-align: center; margin: 1rem 0 0; }
.woocommerce-LostPassword a { color: var(--mor, #720eec); font-size: 13px; text-decoration: none; }
.woocommerce-LostPassword a:hover { text-decoration: underline; }

/* Social login (Nextend) inside the login/register forms */
.penify-social-login {
    position: relative;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}
.penify-social-login::before {
    content: "OR";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 12px;
    color: #999;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}
.penify-social-login { text-align: center !important; }
.penify-social-login .nsl-container,
.penify-social-login .nsl-container-block {
    margin: 0 auto !important;
    text-align: center !important;
    max-width: 340px !important;
    float: none !important;
}
.penify-social-login .nsl-container-buttons {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
.penify-social-login .nsl-button {
    border-radius: 10px !important;
    margin: 0 auto !important;
}
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 100%; }
}

/* =====================================================
   Mobile
   ===================================================== */
@media (max-width: 768px) {
    .woocommerce ul.products li.product { flex-basis: calc(50% - 0.5rem) !important; max-width: calc(50% - 0.5rem) !important; width: auto !important; float: none !important; }
    .woocommerce div.product .product_title { font-size: 1.4rem; }
    .penify-product-main { gap: 1.5rem; }
    .penify-trust-badges { grid-template-columns: 1fr; }
    .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
    .woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
}

/* =====================================================
   MINICART DROPDOWN
   ===================================================== */
.penify-minicart-wrap { position: relative; }
.penify-minicart-trigger { cursor: pointer; }
.penify-minicart-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 360px;
    max-width: 92vw;
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: 0.2s;
}
.penify-minicart-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.penify-minicart-arrow {
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-top: 1px solid rgba(114, 14, 236, 0.1);
    border-left: 1px solid rgba(114, 14, 236, 0.1);
    transform: rotate(45deg);
}
.penify-minicart-content { max-height: 480px; overflow-y: auto; }
.penify-minicart-items { padding: 0.5rem 0; }
.penify-minicart-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0eaff;
    position: relative;
}
.penify-minicart-thumb { width: 56px; height: 56px; flex-shrink: 0; }
.penify-minicart-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.penify-minicart-info { flex: 1; min-width: 0; }
.penify-minicart-title {
    display: block;
    color: #222;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}
.penify-minicart-title:hover { color: var(--mor, #720eec); }
.penify-minicart-meta { font-size: 12px; color: #777; line-height: 1.3; }
.penify-minicart-meta .quantity { display: inline-block; margin: 0; }
.penify-minicart-meta .amount { font-weight: 600; color: var(--mor, #720eec); white-space: nowrap; }
.penify-minicart-meta .woocommerce-Price-amount { display: inline-block; }
.penify-minicart-meta .woocommerce-Price-currencySymbol { display: inline; }
.penify-minicart-remove {
    background: none;
    border: none;
    color: #999;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
    align-self: flex-start;
    margin-top: 2px;
}
.penify-minicart-remove:hover { color: #dc3545; }
.penify-minicart-footer {
    border-top: 2px solid #f0eaff;
    padding: 1rem;
    background: #f9f6ff;
}
.penify-minicart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: 14px;
}
.penify-minicart-total-amount { color: var(--mor, #720eec); font-weight: 700; }
.penify-count-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    font-size: 0.65rem;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: var(--mor, #720eec) !important;
    color: #fff !important;
}

/* =====================================================
   PRODUCT CARD ACTIONS (hover overlay)
   ===================================================== */
.product-card-image { position: relative; }
.woocommerce ul.products li.product .penify-archive-card-image { position: relative; display: block; }
.product-card-actions,
.penify-card-actions-archive {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
    opacity: 0;
    transform: translateX(10px);
    transition: 0.25s;
}
.product-card:hover .product-card-actions,
.woocommerce ul.products li.product:hover .penify-card-actions-archive { opacity: 1; transform: translateX(0); }
.penify-card-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #555;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    font-size: 15px;
    padding: 0;
}
.penify-card-btn:hover {
    background: var(--mor, #720eec);
    color: #fff;
    transform: scale(1.08);
}
.penify-card-btn.active {
    background: #dc3545;
    color: #fff;
}

/* =====================================================
   SHOP / ARCHIVE GRID SIZING
   The homepage shows 4 cards per row across the full-width container.
   On shop / category / brand pages a sidebar sits beside the product
   column (col-lg-9), so 4-per-row there squeezes the cards tiny and the
   title collides with the price. Only when the sidebar is actually beside
   the content (lg and up) drop to 3 per row so each card keeps the same
   size as on the homepage. Below lg the sidebar stacks on top, the content
   is full width, and the default column classes already match the homepage.
   ===================================================== */
@media (min-width: 992px) {
    .penify-shop-content .penify-product-grid > [class*="col-"] {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/* =====================================================
   SECTION TITLES (You may also like / Recently Viewed …)
   One shared style so every product-page section heading is the same size
   and look, with the theme's purple accent bar.
   ===================================================== */
.penify-section-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0 0 1rem;
    padding-left: 0.85rem;
    border-left: 4px solid var(--mor, #720eec);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
@media (max-width: 575px) {
    .penify-section-title { font-size: 1.15rem; }
}

/* =====================================================
   SHOP TOOLBAR — result count + sorting on their own row
   ===================================================== */
.penify-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(114, 14, 236, 0.12);
}
.penify-shop-toolbar .woocommerce-result-count {
    margin: 0;
    float: none;
    color: #666;
    font-size: 0.95rem;
}
.penify-shop-toolbar .woocommerce-ordering {
    margin: 0;
    float: none;
}
.penify-shop-toolbar .woocommerce-ordering select {
    border: 1px solid rgba(114, 14, 236, 0.25);
    border-radius: 999px;
    padding: 0.45rem 2rem 0.45rem 1rem;
    background-color: #fff;
    cursor: pointer;
}

/* =====================================================
   EMPTY-CART "NEW IN STORE" BLOCK — match the homepage card
   WooCommerce renders this with its own block markup (.wc-block-grid__*);
   restyle it so those products look identical to the site's product cards.
   !important is needed to beat the WooCommerce Blocks stylesheet.
   ===================================================== */
.wc-block-grid__products {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.wc-block-grid__products .wc-block-grid__product {
    flex: 0 0 calc(25% - 0.5625rem) !important;
    max-width: calc(25% - 0.5625rem) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 0 0.85rem !important;
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.12);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: all 0.3s ease;
}
.wc-block-grid__products .wc-block-grid__product:hover {
    border-color: var(--mor, #720eec);
    box-shadow: 0 10px 20px rgba(114, 14, 236, 0.15);
    transform: translateY(-2px);
}
.wc-block-grid__product-link { display: block; }
/* No underline in any state (the homepage cards never underline either). */
.wc-block-grid__product-link,
.wc-block-grid__product-link:hover,
.wc-block-grid__product-link:focus,
.wc-block-grid__product-title,
.wc-block-grid__product-link:hover .wc-block-grid__product-title,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    text-decoration: none !important;
}
/* Product cards (home + shop) never underline, even inside .woocommerce. */
.product-card a,
.product-card a:hover,
.product-card a:focus,
.product-card a:hover .product-title {
    text-decoration: none !important;
}
.wc-block-grid__product-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
    margin: 0 0 0.5rem;
}
.wc-block-grid__product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 0.5rem;
    margin: 0;
}
.wc-block-grid__product-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    padding: 0 0.6rem;
    margin: 0 0 0.35rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.2em;
}
.wc-block-grid__product-price {
    color: var(--mor, #720eec) !important;
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
}
.wc-block-grid__product-price .woocommerce-Price-amount { color: var(--mor, #720eec); }
.wc-block-grid__product-add-to-cart { padding: 0 0.6rem; margin-top: auto; }
.wc-block-grid__product-add-to-cart .wp-block-button__link {
    display: inline-block;
    background: var(--mor, #720eec);
    color: #fff;
    border-radius: 999px;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--mor, #720eec);
    transition: 0.2s;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
    background: #5a0bbb;
    border-color: #5a0bbb;
    color: #fff;
}
@media (max-width: 767px) {
    .wc-block-grid__products .wc-block-grid__product {
        flex: 0 0 calc(50% - 0.375rem) !important;
        max-width: calc(50% - 0.375rem) !important;
    }
    .wc-block-grid__product-image { height: 150px; }
}

/* =====================================================
   EMPTY CART ICON — swap the default sad face for a purple paw print
   ===================================================== */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    /* WooCommerce draws its sad-face via mask-image + background-color, so we
       must override the MASK (not background-image) or both icons overlap. */
    background-image: none !important;
    background-color: var(--mor, #720eec) !important;
    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><ellipse cx='176' cy='150' rx='44' ry='56'/><ellipse cx='336' cy='150' rx='44' ry='56'/><ellipse cx='86' cy='262' rx='42' ry='52'/><ellipse cx='426' cy='262' rx='42' ry='52'/><path d='M256 250c-60 0-112 46-112 102 0 40 32 66 72 66 24 0 32-10 40-10s16 10 40 10c40 0 72-26 72-66 0-56-52-102-112-102z'/></svg>") !important;
    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><ellipse cx='176' cy='150' rx='44' ry='56'/><ellipse cx='336' cy='150' rx='44' ry='56'/><ellipse cx='86' cy='262' rx='42' ry='52'/><ellipse cx='426' cy='262' rx='42' ry='52'/><path d='M256 250c-60 0-112 46-112 102 0 40 32 66 72 66 24 0 32-10 40-10s16 10 40 10c40 0 72-26 72-66 0-56-52-102-112-102z'/></svg>") !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 5em;
    height: 5em;
}

/* =====================================================
   BLOCK CART — Proceed to Checkout button + line-item image
   The cart page is the block-based cart, so it uses .wc-block-* classes
   (not the classic .checkout-button). Paint the primary buttons purple and
   keep the item thumbnail contained (not stretched/zoomed) like the cards.
   ===================================================== */
.wc-block-cart__submit-button,
.wc-block-components-button.contained,
.wc-block-components-checkout-place-order-button {
    background-color: var(--mor, #720eec) !important;
    color: #fff !important;
    border: 1px solid var(--mor, #720eec) !important;
    border-radius: 999px !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button.contained:hover,
.wc-block-components-checkout-place-order-button:hover {
    background-color: #5a0bbb !important;
    border-color: #5a0bbb !important;
    color: #fff !important;
}
.wc-block-cart__submit-button .wc-block-components-button__text,
.wc-block-components-button.contained .wc-block-components-button__text {
    color: #fff !important;
}
/* Line-item thumbnail — square box, image contained (matches the site cards). */
.wc-block-cart-item__image img {
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    background: #fff;
    border-radius: 6px;
}

/* Empty cart: hide the leftover "New in store" heading + separator (the product
   block itself is removed in PHP), leaving just the "cart is empty" message. */
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title),
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new {
    display: none !important;
}

/* Empty cart → "Recently Viewed" products (injected in place of New in store). */
.penify-empty-recent {
    max-width: 960px;
    margin: 2.5rem auto 0;
    text-align: left;
}
.penify-empty-recent-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 1.25rem;
}
.penify-empty-recent .penify-product-grid { justify-content: center; }
.penify-card-btn.active i { color: #fff; }
.penify-wishlist-btn-lg { margin-bottom: 0.5rem; }
.penify-wishlist-btn-lg.active {
    background: linear-gradient(135deg, var(--mor, #720eec) 0%, var(--mor-dark, #5a0bbb) 100%);
    border-color: var(--mor, #720eec);
    color: #fff;
    box-shadow: 0 4px 14px rgba(114, 14, 236, 0.3);
}

/* =====================================================
   QUICK VIEW MODAL
   ===================================================== */
.penify-quickview-modal .modal-content {
    border-radius: 16px;
    border: 1px solid rgba(114, 14, 236, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.penify-quickview-modal .modal-header { padding: 1.25rem 1.5rem 0.5rem; }
.penify-qv-brand {
    display: inline-block;
    background: #f9f6ff;
    color: var(--mor, #720eec);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}
.penify-qv-price {
    color: var(--mor, #720eec);
    font-size: 1.5rem;
    font-weight: 800;
}
.penify-qv-desc { color: #555; font-size: 14px; line-height: 1.6; }

/* =====================================================
   WISHLIST OFFCANVAS
   ===================================================== */
.penify-offcanvas .offcanvas-header { background: #f9f6ff; }

/* HORIZONTAL-OVERFLOW FIX: Bootstrap slides a closed .offcanvas-end fully
   off-screen to the RIGHT with transform: translateX(100%). Because the
   drawer is position:fixed it escapes the body's overflow-x clipping and
   adds a horizontal-scroll gap on mobile (the whole page — even the admin
   bar — could be panned right). Keep the drawer INSIDE the viewport while
   closed and hide it with opacity/visibility instead of moving it out, so
   it can never widen the page. Bootstrap's .show toggle still opens it. */
.penify-offcanvas.offcanvas-end {
    transform: none !important;
    right: 0;
    left: auto;
    width: min(400px, 100%);
    max-width: 100%;
    transition: opacity 0.25s ease;
}
.penify-offcanvas.offcanvas-end:not(.show):not(.showing) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.penify-offcanvas.offcanvas-end.show,
.penify-offcanvas.offcanvas-end.showing {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.penify-wishlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid #f0eaff;
}
.penify-wishlist-remove { color: #dc3545; }
.penify-wishlist-toggle-all { cursor: pointer; }

/* =====================================================
   VARIATION SWATCHES
   ===================================================== */
.penify-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}
.penify-swatch {
    border: 2px solid #e5e5e5;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}
.penify-swatch.is-size {
    min-width: 44px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.penify-swatch.is-color {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    position: relative;
}
.penify-swatch.is-color::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-radius: 50%;
    transition: 0.2s;
}
.penify-swatch:hover { border-color: var(--mor, #720eec); }
.penify-swatch.selected {
    border-color: var(--mor, #720eec);
    box-shadow: 0 0 0 2px rgba(114, 14, 236, 0.25);
}
.penify-swatch.is-color.selected::after { border-color: var(--mor, #720eec); }

/* =====================================================
   STICKY ADD-TO-CART (mobile)
   ===================================================== */
.penify-sticky-cart {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid rgba(114, 14, 236, 0.15);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s;
    padding: 0.75rem 0;
}
.penify-sticky-cart.visible { transform: translateY(0); }
.penify-sticky-title {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.penify-sticky-price {
    color: var(--mor, #720eec);
    font-weight: 700;
    font-size: 14px;
}
@media (min-width: 769px) {
    .penify-sticky-cart { display: none; }
}

/* =====================================================
   FULLSCREEN WISHLIST ITEMS
   ===================================================== */
.penify-wishlist-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* =====================================================
   SEARCH AUTOCOMPLETE
   ===================================================== */
.penify-search-form { position: relative; }
.penify-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(114, 14, 236, 0.15);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    max-height: 480px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: 0.2s;
}
.penify-search-results.open { opacity: 1; visibility: visible; transform: translateY(0); }
.penify-search-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    transition: 0.15s;
}
.penify-search-item:last-of-type { border-bottom: none; }
.penify-search-item:hover,
.penify-search-item.active { background: #f9f6ff; }
.penify-search-item img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}
.penify-search-info { flex: 1; min-width: 0; }
.penify-search-title {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.penify-search-price {
    font-size: 12px;
    color: var(--mor, #720eec);
    font-weight: 700;
}
.penify-search-viewall {
    display: block;
    padding: 0.75rem;
    text-align: center;
    color: var(--mor, #720eec);
    font-weight: 600;
    font-size: 13px;
    background: #f9f6ff;
    text-decoration: none;
    border-top: 1px solid #f0eaff;
}
.penify-search-viewall:hover { background: var(--mor, #720eec); color: #fff; }
.penify-search-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* =====================================================
   COMPARE
   ===================================================== */
.penify-compare-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
}
.penify-compare-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.penify-compare-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid #f0eaff;
    border-radius: 8px;
    background: #fff;
}
.penify-compare-title {
    display: block;
    color: #222;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 2px;
}
.penify-compare-title:hover { color: var(--mor, #720eec); }
.penify-compare-remove {
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
}
.penify-compare-remove:hover { color: #dc3545; }
.penify-compare-table th { background: #f9f6ff; vertical-align: middle; }
.penify-compare-table th img {
    max-width: 120px;
    height: auto;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}

/* =====================================================
   STICKY FILTER (shop sidebar)
   ===================================================== */
.penify-sticky-filter {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
}
.penify-sticky-filter::-webkit-scrollbar { width: 6px; }
.penify-sticky-filter::-webkit-scrollbar-thumb { background: rgba(114, 14, 236, 0.2); border-radius: 3px; }
@media (max-width: 991px) {
    .penify-sticky-filter { position: static; max-height: none; }
}

/* =====================================================
   INFINITE SCROLL
   ===================================================== */
.penify-infinite-sentinel {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
}
.penify-spinner { display: none; }
.penify-infinite-sentinel.loading .penify-spinner { display: block; }
.penify-infinite-sentinel .spinner-border { width: 2rem; height: 2rem; }

/* =====================================================
   PRODUCT VIDEO
   ===================================================== */
.penify-product-video {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer;
}
.penify-product-video.hidden { display: none; }
.penify-play-btn {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 5rem;
    cursor: pointer;
    transition: 0.2s;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.penify-play-btn:hover { background: rgba(114, 14, 236, 0.9); transform: scale(1.05); }
.penify-video-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 1px;
}
.penify-thumb-video {
    position: relative;
}
.penify-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 4px;
    pointer-events: none;
}
/* YouTube-Shorts-style fullscreen popup. The dialog fills the viewport height
   and centres the video; the black backdrop shows through around a portrait
   video. Works portrait & landscape, desktop & mobile. */
.penify-video-modal .modal-content {
    background: #000;
    border: 0;
    border-radius: 0;
    width: 100%;
}
.penify-video-modal .modal-body { padding: 0; }
.penify-video-modal .modal-dialog {
    max-width: 500px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
}
/* Close button fixed to the viewport and above the modal (1055) + backdrop
   (1050), so it is ALWAYS visible and clickable in any orientation. */
.penify-video-close {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1060;
    opacity: 1;
    filter: invert(1);
    padding: 12px;
}
.penify-video-wrapper {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    width: 100%;
}
.penify-video-wrapper video,
.penify-video-wrapper iframe {
    /* Keep the native aspect ratio while fitting the screen. */
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
    border: 0;
}
.penify-video-wrapper iframe {
    width: 100%;
    aspect-ratio: 9 / 16;
}
@media (max-width: 575.98px) {
    .penify-video-modal .modal-dialog { max-width: 100%; margin: 0; }
    .penify-video-wrapper video,
    .penify-video-wrapper iframe { max-height: 100vh; max-height: 100dvh; }
}

/* =====================================================
   SOCIAL SHARE BAR (product page — free, no plugin)
   ===================================================== */
.penify-share {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.penify-share-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.penify-share-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.penify-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    color: #444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.penify-share-btn:hover { transform: translateY(-2px); }
.penify-share-btn.is-wa:hover  { background: #25D366; color: #fff; border-color: #25D366; }
.penify-share-btn.is-fb:hover  { background: #1877F2; color: #fff; border-color: #1877F2; }
.penify-share-btn.is-x:hover   { background: #000;    color: #fff; border-color: #000; }
.penify-share-btn.is-pin:hover { background: #E60023; color: #fff; border-color: #E60023; }
.penify-share-btn.is-tg:hover  { background: #229ED9; color: #fff; border-color: #229ED9; }
.penify-share-native { background: var(--mor, #720eec); color: #fff; border-color: var(--mor, #720eec); }
.penify-share-btn.copied { background: #28a745; color: #fff; border-color: #28a745; }
/* Owner-only Reels/TikTok helper */
.penify-share-reels {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem;
    background: #f7f2ff;
    border: 1px dashed rgba(114, 14, 236, 0.35);
    border-radius: 0.6rem;
}
.penify-reels-hint {
    flex: 0 0 100%;
    font-size: 0.75rem;
    font-weight: 700;
    color: #720eec;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.penify-share-reels a,
.penify-share-reels button {
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 2rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(114, 14, 236, 0.4);
    background: #fff;
    color: #5a0bbb;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.penify-share-reels a:hover,
.penify-share-reels button:hover { background: #720eec; color: #fff; }
html[data-penify-mode="dark"] .penify-share-btn { background: var(--bg-card); color: #ddd; border-color: rgba(255,255,255,0.15); }
html[data-penify-mode="dark"] .penify-share-reels { background: rgba(114,14,236,0.12); }

/* =====================================================
   IMPORTED PRODUCT CONTENT (CJ / dropshipping HTML)
   Keep fixed-width images, tables and long strings from
   pushing the whole page wider than the phone screen.
   ===================================================== */
.product-description img,
.product-description video,
.product-description iframe,
.penify-tab-content img,
.penify-tab-content video,
.penify-tab-content iframe,
.penify-short-desc img { max-width: 100%; height: auto; }
.product-description table,
.penify-tab-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.product-description,
.penify-tab-content,
.penify-short-desc { overflow-wrap: anywhere; word-break: break-word; }

/* =====================================================
   STICKY ADD-TO-CART (top + bottom variants)
   ===================================================== */
.penify-sticky-top {
    top: 0;
    bottom: auto;
    border-top: none;
    border-bottom: 1px solid rgba(114, 14, 236, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    background: #fff;
}
.penify-sticky-cart .penify-sticky-qty { border-radius: 6px; }
.penify-sticky-cart .penify-sticky-title {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}
.penify-sticky-cart .penify-sticky-meta { font-size: 12px; }
.penify-sticky-cart .penify-sticky-price {
    color: var(--mor, #720eec);
    font-weight: 700;
    font-size: 14px;
}
@media (max-width: 768px) {
    .penify-sticky-cart .penify-sticky-title { max-width: 160px; font-size: 13px; }
}
@media (min-width: 769px) {
    .penify-sticky-cart.visible { transform: translateY(0); }
}

/* =====================================================
   MINI-CART VARIATION
   ===================================================== */
.penify-mini-var {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 10px;
    color: #888;
}
.penify-mini-var-item {
    background: #f9f6ff;
    padding: 1px 6px;
    border-radius: 4px;
}
.penify-mini-var-item em { font-style: normal; color: #aaa; margin-right: 2px; }

/* =====================================================
   BREADCRUMB (enhanced)
   ===================================================== */
.penify-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 0;
}
.penify-breadcrumb .breadcrumb-item,
.penify-breadcrumb .breadcrumb-item a { font-size: 12px; }
@media (max-width: 575px) {
    .penify-breadcrumb .breadcrumb { font-size: 11px; flex-wrap: nowrap; overflow: hidden; }
    .penify-breadcrumb .breadcrumb-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* keep the current page (last crumb) from pushing others off-screen */
    .penify-breadcrumb .breadcrumb-item.active { max-width: 45vw; }
}
.penify-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #999; }
.penify-breadcrumb .breadcrumb-item a { color: var(--mor, #720eec); text-decoration: none; font-weight: 500; }
.penify-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.penify-breadcrumb .breadcrumb-item.active { color: #666; }

/* =====================================================
   VARIATION "select your options" — friendly toast + highlight
   ===================================================== */
.penify-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 90vw;
    background: #2b2340;
    color: #fff;
    padding: 14px 20px;
    border-radius: 12px;
    border-left: 4px solid #f0ad4e;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .25);
    font-size: 14px;
    line-height: 1.4;
    z-index: 99999;
    opacity: 0;
    transition: opacity .3s ease, transform .3s ease;
}
.penify-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.penify-toast-ic { font-size: 18px; }

/* highlight the unselected option row */
.variations tr.penify-opt-missing th { color: #d9822b; }
.variations tr.penify-opt-missing .penify-swatches,
.variations tr.penify-opt-missing select {
    outline: 2px solid #f0ad4e;
    outline-offset: 4px;
    border-radius: 8px;
    background-color: #fff8ec;
}
.variations tr.penify-opt-missing { animation: penify-opt-shake .4s ease; }
@keyframes penify-opt-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}