/*
Theme Name: rootBoutique
Theme URI: https://www.linkedin.com/in/amen-khaled-b9a706131/
Author: Amen Khaled
Author URI: https://www.linkedin.com/in/amen-khaled-b9a706131/
Description: WooCommerce theme based on static Root Boutique design
Version: 1.0.0
License: GPLv2 or later
Text Domain: rootbotique
Tags: e-commerce, rtl-language-support, woocommerce
*/

html, body { height:100%; }
body{ background:#fdf6f1; font-family:Arial, sans-serif; }

/* Social Icons */
.social-icons{ position:fixed; top:40%; left:10px; z-index:1000; }
.social-icons a{ display:block; margin:15px 0;border-radius: 50px }
.social-icons img{ width:35px; height:35px; }

/* Desktop: only RIGHT pane scrolls */
@media (min-width:992px){
    body{ overflow:hidden; }
    .main-wrap{ height:100vh; }
    .row-no-gutters{ --bs-gutter-x:0; }
    .hero-left{ position:sticky; top:0; height:100vh; }
    .right-pane{ height:100vh; overflow-y:auto; padding-bottom:2rem; background:#fff; scroll-behavior:smooth; }
}
@media (max-width:991.98px){
    body{ overflow:auto; }
    .right-pane{ height:auto; overflow:visible; }
    .hero-left{ min-height:420px; height:auto; }
}

/* Left hero */
/* Mobile sticky header hidden by default (desktop) */
.mobile-sticky-header{ display:none; }
.hero-left img{ width:100%; height:100%; object-fit:cover; }
.hero-actions{
    position:absolute; top:16px; left:50%; transform:translateX(-50%);
    z-index:5; display:flex; gap:.8rem; align-items:center;
}
.btn-round{
    width:48px;height:48px;border-radius:50%;background:#fff;border:none;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:.9rem;font-weight:600;box-shadow:0 4px 12px rgba(0,0,0,.08);
    position:relative;
}
.btn-round i{ font-size:1.2rem; }
.btn-round.text-btn{ width:auto;padding:0 16px;border-radius:50px;font-size:.85rem;text-decoration: none; color: #000; }
@media (max-width:991.98px){ .hero-actions{ right:12px; left:auto; transform:none; top:12px; } }

/* Right Pane – header & delivery */
.shop-header{ background:#fff; padding:12px 16px; border-bottom:1px solid #eee; }
.shop-brand{ display:flex; align-items:center; gap:10px; }
.shop-brand .logo{ width:44px; height:44px; border-radius:50%; background:#efefef; object-fit:cover; }
.shop-title{ margin:0; font-weight:800; }
.shop-sub{ color:#86909c; font-size:.9rem; }
.delivery-section{ background:#fff; border-bottom:1px solid #eee; }
.delivery-actions{ padding:18px 16px 6px; text-align:center; }
.delivery-actions .btn{ min-width:110px; }
.delivery-rows{ padding:10px 16px 16px; }
.delivery-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; }
.delivery-row + .delivery-row{ border-top:1px solid #f0f0f0; }
.delivery-row small{ color:#86909c; }
.link-green{ color:#1aa251; font-weight:700; cursor:pointer; }

/* Controls */
.controls-strip{
    background:#f6f7f8; border-top:1px solid #eee; border-bottom:1px solid #eee;
    padding:10px 12px; display:flex; align-items:center; justify-content:space-between;
}
.controls-icons{ display:flex; gap:10px; color:#6b7280; }
.i-btn{
    width:36px; height:36px; border-radius:50%; border:1px solid #e5e7eb;
    display:flex; align-items:center; justify-content:center; background:#fff; cursor:pointer;
}

/* Sticky categories bar */
.categories-row{
    position:sticky; top:0; z-index:6;
    background:#fff; border-bottom:1px solid #eee; padding:12px 8px;
    transition: box-shadow .2s ease;
}
.categories-row.is-stuck{ box-shadow:0 6px 16px rgba(0,0,0,.06); }
.pre-cats.hide-when-stuck{ display:none; }

.cat-scroll{ overflow-x:auto; white-space:nowrap; scrollbar-width:thin; }
.cat-chip{ display:inline-block; text-align:center; margin:0 8px; cursor:pointer; }
.cat-chip .thumb{
    width:72px; height:72px; border-radius:50%; background:#f6e3d2;
    border:2px solid #eee; display:inline-flex; align-items:center; justify-content:center;
    overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,0.03) inset;
}
.cat-chip img{ width:100%; height:100%; object-fit:cover; opacity:.5; transition:opacity .25s ease; }
.cat-chip:hover img, .cat-chip.active img{ opacity:1; }
.cat-chip span{ display:block; margin-top:8px; font-size:.9rem; color:#374151; }

/* Section title bar */
.section-title{
    background:#eff1f3; border:1px solid #e6e8ea; color:#6b7280;
    padding:10px 12px; border-radius:8px; font-weight:700;
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:10px 8px 16px;
}

/* Cards */
.consult-card{ text-align:center; padding-bottom:8px; }
.consult-img{ width:200px; max-width:100%; border-radius:2px; }
.consult-title{ font-weight:800; color:#1f2937; }
.consult-desc{ color:#6b7280; max-width:720px; margin:0 auto; }
.price{ color:#0d660d; font-weight:800; }

.btn-add{
    border:2px solid #0d660d; color:#0d660d; border-radius:6px;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:8px 18px; width:260px; background:#fff;
}
.btn-add:hover{ background:#0d660d; color:#fff; }

.product-card{ background:#fff; border:1px solid #eaeaea; border-radius:8px; padding:8px; margin-bottom:18px; }
.product-img{ width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; border-radius:6px; background:#f6e3d2; }
.product-title{ font-weight:800; color:#1f2937; text-align:center; margin-top:10px; }
.product-desc{ color:#6b7280; min-height:56px; text-align:right; font-size:.95rem; }

/* Filters/Menu headers */
.panel-header{ position:sticky; top:0; background:#fff; z-index:7; padding:10px 12px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; }
.panel-header h6{ margin:0; font-weight:800; }
.filters-block-title{ background:#f3f4f6; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb; padding:10px 14px; font-weight:700; display:flex; align-items:center; justify-content:space-between; }
.filters-clear{ color:#1aa251; font-weight:700; cursor:pointer; }
.sort-row{ display:grid; grid-template-columns: 1fr 120px; align-items:center; padding:10px 8px; }
.sort-row + .sort-row{ border-top:1px solid #f1f1f1; }
.sort-right-label{ text-align:right; color:#1f2937; font-weight:700; }
.custom-radio{ display:flex; align-items:center; gap:8px; justify-content:center; }
.custom-radio input[type="radio"]{ appearance:none; width:10px; height:10px; border-radius:50%; background:transparent; cursor:pointer; }
.custom-radio input[type="radio"]:checked{ background:#0d660d; }
.acc{ background:#fff; }
.acc-row{ border-bottom:1px solid #eee; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.acc-body{ padding:12px; display:none; }
.acc.acc-open .acc-body{ display:block; }
.cats-list .cat-item{ padding:10px 12px; border-bottom:1px solid #f7f7f7; }
.price-slider{ padding:12px; }
.range-wrap{ display:flex; align-items:center; gap:12px; }
.range-wrap input[type=range]{ accent-color:#1aa251; flex:1; }
.filters-actions{ padding:10px 12px 20px; display:flex; gap:10px; }

/* ===== Product Details ===== */
.pd-hero{ width:100%; height:400px; object-fit:contain; background:#f6e3d2; }
.pd-title{ font-weight:800; color:#1f2937; }
.qty-wrap{ display:inline-flex; align-items:center; border:1px solid #e5e7eb; border-radius:999px; overflow:hidden; background:#fff; }
.qty-wrap button{ border:0; background:#fff; width:40px; height:36px; color:#0d660d; font-weight:700; }
.qty-wrap span{ display:inline-block; width:46px; text-align:center; color:#6b7280; }
.pd-sec{ border-top:1px solid #eee; padding:16px; }
.pd-sec h6{ font-weight:800; color:#6b7280; margin-bottom:10px; }
.pd-bullets{ padding-right:18px; }
.pd-bullets li{ margin-bottom:6px; }
.pd-gift-card{ background:#fff; border:1px solid #eaeaea; border-radius:8px; padding:12px; }
.related-scroll{ overflow-x:auto; white-space:nowrap; padding:2px 4px 8px; }
.related-card{ display:inline-block; width:180px; margin:0 8px; vertical-align:top; }
.related-card .product-img{ height:150px; }
.related-card .product-title{
    font-size:.9rem;
    line-height:1.3;
    margin-top:8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-overflow:ellipsis;
    word-break:break-word;
    overflow-wrap:anywhere;
    max-height:2.6em; /* 2 lines */
    text-align:center;
}
.related-card .price{ text-align:center; }
.sticky-addbar{
    position:sticky; bottom:0; z-index:9; background:#fff; border-top:1px solid #e5e7eb;
    padding:10px 12px; display:flex; align-items:center; gap:10px; justify-content:space-between;
}
.btn-green{ background:#116e11; color:#fff; border:0; border-radius:8px; padding:10px 16px; min-width:180px; }
.btn-green:hover{ background:#0f5f0f; }

/* OLD share row (kept in case you reuse) */
.share-row{ border-top:1px solid #eee; border-bottom:1px solid #eee; padding:14px 16px; display:flex; align-items:center; gap:10px; color:#6b7280; }
.share-row i{ font-size:20px; }

/* ===== New share strip (centered like screenshot) ===== */
.share-strip {
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 18px 12px;
    text-align: center;
}
.share-btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#9ca3af;          /* muted grey text */
    font-weight:700;
    letter-spacing:.02em;
    text-decoration:none !important;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:0;
}
.share-btn i {
    font-size:1.1rem;
    vertical-align:-2px;
}
.share-modal .share-icon{
    width:48px; height:48px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid #e5e7eb; border-radius:12px; font-size:22px;
}
.empty-wrap{padding:40px 16px;text-align:center;color:#6b7280}
.empty-icon{font-size:64px;margin-bottom:12px}
.empty-icon img{
    width: 50px;
}
.search-wrap{padding:12px}
.search-list{padding:12px}
.search-card{border:1px solid #eee;border-radius:8px;padding:8px;margin-bottom:10px;background:#fff;display:flex;gap:10px;align-items:center}
.search-card img{width:84px;height:60px;object-fit:cover;border-radius:6px;background:#f6e3d2}
.search-card .ttl{font-weight:800;margin-bottom:4px}
.search-card .prc{color:#0d660d;font-weight:800}


.cart-badge{ position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#dc3545; color:#fff; font-weight:800; font-size:.7rem; display:inline-flex; align-items:center; justify-content:center; }
/* --- general helpers --- */
.right-pane { position:relative; height:100vh; overflow:auto; background:#fff; }

/* Fix: prevent inner scrolling on mobile (ensure page scroll controls) */
@media (max-width: 991.98px){
  .right-pane{ height:auto !important; overflow:visible !important; }
}
.panel-header{
    position:sticky; top:0; z-index:10; background:#fff;
    padding:.75rem .75rem; border-bottom:1px solid #eee;
    display:flex; align-items:center; gap:.5rem; justify-content:space-between;
}
.panel-header h6{ margin:0; font-weight:700; }
.empty-wrap{ text-align:center; padding:3rem 1rem; color:#6c757d; }
.empty-icon{ font-size:2rem; opacity:.5; margin-bottom:.5rem; }

/* --- sticky CTA at bottom of main content (as in first image) --- */
.sticky-region-cta{
    position:sticky; bottom:0; z-index:9; background:#fff;
    border-top:1px solid #e9ecef; padding:.5rem .75rem;
}
.btn-region{
    width:100%; font-weight:700; letter-spacing:.25px;
    background:#1f6f2a; color:#fff; border:none; height:44px; border-radius:.5rem;
}
.btn-region:active{ transform:translateY(1px); }

/* --- location view (second image) --- */
#locationView .wrap{ padding:.75rem; }
.method-row{
    display:flex; gap:.75rem; margin-bottom:1rem;
}
.method-card{
    flex:1; border:1px solid #e0e5e9; border-radius:.75rem;
    background:#fff; padding:.75rem; display:flex; align-items:center; justify-content:center; gap:.5rem;
    cursor:pointer; user-select:none;
}
.method-card i{ font-size:1.2rem; }
.method-card.active{ border-color:#1f6f2a; box-shadow:0 0 0 2px rgba(31,111,42,.1) inset; }
.method-card .lbl{ font-weight:700; }

.block-title{
    font-weight:700; color:#6b6f76; margin:.25rem 0 .35rem; padding:.25rem .2rem;
}

.country-row{
    display:flex; gap:.75rem; overflow:auto; padding:.25rem .2rem .5rem;
}
.flag-pill{
    min-width:72px; height:56px; border:1px solid #e0e5e9; border-radius:.75rem;
    display:flex; align-items:center; justify-content:center; background:#fff; cursor:pointer;
}
.flag-pill.active{ border-color:#1f6f2a; box-shadow:0 0 0 2px rgba(31,111,42,.08) inset; }
.flag-pill img{ width:32px; height:32px; object-fit:contain; }

.addr-input .input-group{ border:1px solid #e0e5e9; border-radius:.75rem; overflow:hidden; }
.addr-input input{ border:none; }
.addr-input .input-group-text{ background:#fff; border:none; }

.gov-list{
    margin-top:.5rem;
    border-top:1px solid #eff1f3;
}
.gov-item{
    padding:1rem .25rem; border-bottom:1px solid #eff1f3; font-weight:700;
    display:flex; align-items:center; justify-content:space-between; cursor:pointer;
}
.gov-item i{ color:#9aa3aE; }

/* keep your category bar behavior intact */
.categories-row.is-stuck{ position:sticky; top:0; z-index:8; background:#fff; border-bottom:1px solid #eee; }

/* search chips etc (tiny polish while we’re here) */
.cat-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .6rem; border-radius:999px; border:1px solid #eee; cursor:pointer; margin-inline:.25rem; white-space:nowrap; }
.cat-chip.active{ border-color:#1f6f2a; background:#f0f7f2; }
.cat-chip .thumb{ width:28px; height:28px; overflow:hidden; border-radius:999px; }
.cat-chip img{ width:100%; height:100%; object-fit:cover; }

/* product & related quick tweaks so the button isn’t cramped */
section{ scroll-margin-top:76px; }
/* --- governorates accordion (adds to your existing .gov-list styles) --- */
.gov { border-bottom:1px solid #eff1f3; }
.gov:last-child { border-bottom:0; }

/* make <summary> look like your .gov-item */
.gov summary { list-style:none; }
.gov summary::-webkit-details-marker { display:none; }

/* reuse your .gov-item look; just ensure pointer + layout */
.gov summary.gov-item { cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.gov .chev { transition:transform .2s ease; color:#9aa3ae; }
.gov[open] .chev { transform:rotate(180deg); }

/* areas list under each governorate */
.areas { padding:.25rem 0 .75rem; }
.area{
    width:100%; text-align:right; background:#fff; border:0;
    border-radius:.65rem; padding:.75rem .6rem; margin:.25rem 0;
    color:#2f3439; font-size:15px;
    transition:background .15s ease, box-shadow .15s ease;
}
.area:hover{ background:#f7f9f9; }
.area:focus{ outline:2px solid rgba(31,111,42,.15); }


html[lang="ar"] body { font-family: 'Cairo', Arial, sans-serif; }
/* ===== Orders view ===== */
#ordersView .orders-wrap { max-width: 860px; }

.orders-filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.orders-filters input{ display:none; }
.orders-filters .chip{
    border:1px solid #e6eaee; background:#fff; color:#2f3439;
    padding:.45rem .8rem; border-radius:999px; cursor:pointer; user-select:none;
    font-weight:700; font-size:.95rem;
}
.orders-filters input:checked + .chip{ border-color:#1f6f2a; background:#f0f7f2; }

.track-search .input-group{ border:1px solid #e0e5e9; border-radius:.75rem; overflow:hidden; }
.track-search .form-control{ border:0; }
.track-search .input-group-text{ background:#fff; border:0; }

.order-card{
    border:1px solid #edf0f3; border-radius:1rem; background:#fff;
    padding:1rem; margin-bottom:1rem; box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.order-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.ord-no{ font-weight:800; } .ord-date{ font-size:.875rem; }
.status-badge{ display:inline-block; padding:.35rem .6rem; border-radius:.5rem; font-weight:800; font-size:.8rem; }
.status-processing{ background:#fff3cd; color:#8a6d00; border:1px solid #ffe39c; }
.status-completed{ background:#eaf7ee; color:#1f6f2a; border:1px solid #cfead8; }
.status-canceled{ background:#fdeaea; color:#b42318; border:1px solid #f6c7c7; }

.items{ display:flex; flex-direction:column; gap:.75rem; margin-top:.75rem; }
.item{ display:flex; align-items:center; gap:.75rem; }
.item img{ width:60px; height:60px; object-fit:cover; border-radius:.5rem; border:1px solid #f0f0f0; }
.it-txt{ flex:1; min-width:0; }
.it-title{ font-weight:700; line-height:1.2; }
.it-sub{ font-size:.85rem; }
.it-price{ white-space:nowrap; font-weight:700; }

.summary{ margin-top:.75rem; padding-top:.5rem; border-top:1px dashed #e8ecef; }
.sum-line{ display:flex; align-items:center; justify-content:space-between; background:#fafbfc; border:1px solid #f0f2f4; padding:.5rem .75rem; border-radius:.6rem; }
.sum-line.total{ background:#f0f7f2; border-color:#d8eadf; font-weight:800; }

.order-foot{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.75rem; }
.order-foot .btn-success{ background:#1f6f2a; border-color:#1f6f2a; }

/* CSS-only status filtering */
#ordersView .orders-list .order-card{ display:block; }
#tabProc:checked ~ .orders-list .order-card{ display:none; }
#tabProc:checked ~ .orders-list .order-card[data-status="processing"]{ display:block; }

#tabDone:checked ~ .orders-list .order-card{ display:none; }
#tabDone:checked ~ .orders-list .order-card[data-status="completed"]{ display:block; }

#tabCancel:checked ~ .orders-list .order-card{ display:none; }
#tabCancel:checked ~ .orders-list .order-card[data-status="canceled"]{ display:block; }

/* ===== Contact (guest) & Address flow ===== */
.contact-wrap{padding:2rem 1rem; text-align:center}
.contact-hero{width:120px;height:120px;margin:0 auto 1rem auto;display:block}
.contact-title{font-weight:800;margin:.5rem 0 1rem 0}
.contact-list{max-width:360px;margin:.5rem auto 1.25rem auto;text-align:right}
.contact-list .row{display:flex;align-items:center;gap:.5rem;margin:.4rem 0;color:#333}
.contact-list i{opacity:.75}

.btn-solid-green{
    background:#0f4f12;color:#fff;border:none;border-radius:.5rem;
    height:46px;width:100%;font-weight:800
}
.btn-solid-green:active{transform:translateY(1px)}
.link-guest{display:inline-block;margin-top:.75rem;font-weight:700;color:#0f4f12;cursor:pointer}
.link-guest:hover{text-decoration:underline}

.guest-form{max-width:700px;margin:1rem auto 0 auto;text-align:right}
.uf{position:relative;margin:.75rem 0}
.uf input{width:100%;border:none;border-bottom:2px solid #eaecef;padding:1rem .25rem .75rem .25rem;outline:none}
.uf input:focus{border-bottom-color:#0f4f12}
.uf label{position:absolute;top:.15rem;right:.25rem;font-size:.85rem;color:#7a7f86}
.uf .req{color:#0f4f12;font-weight:700;margin-inline:.35rem}
.inline-flag{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.35rem}
.inline-flag img{width:18px;height:12px;object-fit:cover}
.inline-flag span{color:#7a7f86;font-size:.9rem}
.btn-next{margin-top:1rem}

.addr-wrap{padding:1rem; min-height: calc(100vh - 120px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
.addr-tabs{display:flex;gap:.75rem;justify-content:center;margin-bottom:1rem}
.addr-tab{flex:0 0 auto;min-width:120px;border:1px solid #e0e5e9;background:#fff;border-radius:.5rem;height:40px;
    display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;cursor:pointer}
.addr-tab.active{background:#0f4f12;color:#fff;border-color:#0f4f12}
.addr-form{width:80%;margin:0 auto}
.addr-field{margin:.5rem 0}
.addr-field label{display:block;margin:.1rem .1rem .2rem;color:#7a7f86}
.addr-field input{width:100%;border:none;border-bottom:2px solid #eaecef;padding:.8rem .25rem .6rem}
.addr-field input:focus{border-bottom-color:#0f4f12;outline:none}
.addr-footer{position:sticky;bottom:0;background:#fff;border-top:1px solid #eaecef;padding:.75rem;margin-top:auto}
.map-box{border:1px solid #e9ecef;border-radius:.5rem;overflow:hidden;margin:0 0 1rem 0;background:#fff}
.map-head{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid #f1f3f5}
.map-left{display:flex;align-items:center;gap:1rem}
.map-change{color:#6d747c;text-decoration:none;font-weight:700}
.map-change:hover{text-decoration:underline}
.map-area{display:flex;align-items:center;gap:.4rem;font-weight:800;color:#1f6f2a}
.leaflet-wrap{height:220px;width:100%}
.map-foot{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-top:1px solid #f1f3f5}
.leaflet-full{height:calc(100vh - 180px);width:100%;}

/* Highlight selected area in Location view */
.gov .areas .area.active, .areas .area.active {
    background: #198754;
    color: #fff;
    border-color: #198754;
}
/* ===== Checkout ===== */
.co-wrap{padding:12px 12px 96px;}
.co-card{
    background:#fff;border:1px solid #eee;border-radius:14px;
    padding:12px 12px;margin-bottom:10px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.co-row{display:flex;align-items:center;gap:8px}
.co-head{justify-content:space-between;margin-bottom:6px}
.co-head-title{font-weight:700}

.co-mapbox{position:relative;border:1px solid #e7e7e7;border-radius:12px;overflow:hidden}
.mapbox{height:180px;width:100%}
.co-map-edit{position:absolute;right:10px;top:10px}

.co-addr{justify-content:space-between;padding-top:10px}
.co-addr-lines>div:first-child{font-weight:600}
.co-contact{color:#333;padding-top:4px}

.co-item{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed #eee}
.co-item:first-of-type{border-top:0}
.co-item-title{font-weight:700}
.co-item-opts{margin:6px 0 0;padding-right:18px}
.co-item-opts li{font-size:.875rem;color:#666}

.co-pay{
    display:flex;align-items:center;gap:10px;padding:10px 8px;border:1px solid #eee;
    border-radius:10px;margin-bottom:8px;cursor:pointer;transition:background .15s ease,border-color .15s ease
}
.co-pay:hover{ background:#f8faf8; border-color:#e0efe4; }
.co-pay input{margin-left:6px}
.co-pay i{font-size:1.2rem;vertical-align:middle}

.co-total{padding-top:2px}
.co-total-row{display:flex;justify-content:space-between;padding:6px 0}
.co-total-row:not(:last-child){border-bottom:1px dashed #eee}

.coupon-badge{ display:inline-block; padding:.15rem .5rem; border-radius:999px; background:#e7f5ee; color:#166534; font-weight:800; font-size:.85rem; border:1px solid #c8ead6; }

.co-placebar{
    position:sticky;bottom:0;left:0;right:0;background:
        linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,.85));
    padding:12px;border-top:1px solid #eee
}

/* small polish */
#checkoutView .panel-header{position:sticky;top:0;background:#fff;z-index:2}


/* Contact phones card adjustments */
#coPhonesCard .form-control{ border:1px solid #e0e5e9; }
#coPhonesCard .form-control:focus{ border-color:#1f6f2a; box-shadow:0 0 0 .2rem rgba(31,111,42,.08); }

/* === Checkout coupon input enhancements === */
#checkoutView .co-card .input-group{
    border:1px solid #e0e5e9; border-radius:.75rem; overflow:hidden; background:#fff;
}
#checkoutView .co-card .form-control#checkoutCouponInput{
    border:0; box-shadow:none; padding:.6rem .75rem; direction:ltr; text-align:right;
}
#checkoutApplyCouponBtn{
    border-color:#1f6f2a; color:#1f6f2a; font-weight:700;
}
#checkoutApplyCouponBtn:hover{ background:#1f6f2a; color:#fff; }
#checkoutClearCouponBtn{ color:#6b7280; border-color:#e5e7eb; }
#checkoutCouponMsg{ min-height:1.25rem; transition: color .15s ease; }

/* Validation feedback for address inputs */
.addr-form input.is-invalid{ border-color:#dc3545 !important; outline:0; box-shadow:0 0 0 .2rem rgba(220,53,69,.1); }

/* ==== Mobile tweaks: product images, card border, and container padding ==== */
@media (max-width: 767px){
    /* Apply requested image CSS on mobile for product cards */
    .product-card .product-img{
        max-width: 100%;
        max-height: 240px;
        min-height: 240px;
        height: 240px;
        border-radius: 7px;
        object-fit: cover;
        width: 100%;
    }
    /* Product Details hero: make full width, cover, white bg, and 414px height on mobile */
    .pd-hero{
        width: 100%;
        height: 414px;
        object-fit: cover;
        background: #fff;
        display: block;
        border-radius: 0;
    }
    /* Mobile sticky header: fixed at top on mobile only */
    .mobile-sticky-header{
        position: fixed;
        left: 0; right: 0; top: 0;
        z-index: 1000;
        background: #fff;
        height: 56px;
        display: none;
        border-bottom: 1px solid #eee;
        padding: 0 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .mobile-sticky-header .msl{ display:flex; align-items:center; gap:6px; }
    .mstick-btn{
        background: transparent;
        border: 0;
        padding: 6px 10px;
        height: 50px;
        color: #000;
        box-shadow: none;
        border-radius: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }
    .mstick-btn i{ font-size: 1.3rem; line-height: 1; }
    .mstick-text{ font-size: 1rem; }
    .mobile-sticky-header.is-visible{ display:flex; }
    .mcart-count{ margin-left: 6px; font-weight: 700; color: #000; font-size: .9rem; }

    /* Use mobile header as default on small screens */
    .site-header{ display:none; }
    body{ padding-top:56px; }
    .hero-actions{ display:none !important; }

    /* Slide-in mobile menu drawer */
    #menuView.drawer{
        position: fixed;
        top: 0; right: 0; bottom: 0;
        width: 85vw; max-width: 420px;
        background: #fff;
        z-index: 1100;
        transform: translateX(100%);
        transition: transform .3s ease;
        display: block; /* override d-none */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -8px 0 24px rgba(0,0,0,.15);
    }
    #menuView.drawer.open{ transform: translateX(0); }
    .menu-close-btn{ background: transparent; border: 0; font-size: 1.5rem; line-height: 1; padding: 6px 10px; }
    .menu-backdrop{
        position: fixed; inset: 0; background: rgba(0,0,0,.25);
        z-index: 1090; opacity: 0; visibility: hidden; transition: opacity .2s ease;
    }
    .menu-backdrop.show{ opacity: 1; visibility: visible; }
    body.no-scroll{ overflow: hidden; }

    /* Hide left hero column on mobile for single product (product details) pages */
    .single-product .col-lg-6.p-0.position-relative.hero-left{ display:none !important; }

    /* Remove product card border on mobile for cleaner look */
    .product-card{ border:0; box-shadow:none; }
    /* Reduce outer container padding to gain more horizontal space */
    section .container-fluid.px-3,
    .container-fluid.px-3{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* ===== Video Popup (shared styles) ===== */
#rbv-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 12000; padding: 16px; }
#rbv-backdrop.show{ display: flex; }
#rbv-modal{ position: relative; background: #000; border-radius: 10px; overflow: hidden; max-width: 900px; width: 90vw; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
#rbv-modal video{ display:block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; background: #000; position: relative; z-index: 1; }
#rbv-close{ position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.9); color:#000; border: 0; width: 32px; height: 32px; border-radius: 50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size: 18px; line-height: 1; z-index: 2; pointer-events: auto; }
#rbv-close:focus{ outline: 2px solid #1f6f2a; }
@media (max-width: 767px){
  #rbv-modal{ width: 95vw; }
  #rbv-close{ width: 30px; height: 30px; font-size: 16px; }
    .categories-row.is-stuck{ position:sticky; top:50px; z-index:8; background:#fff; border-bottom:1px solid #eee; }
}