* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #faf8f4;
    color: #242424;
}

button,
input {
    font-family: inherit;
}


/* TOP BAR */

.top-bar {
    background: #6f5328;
    color: white;
    padding: 9px 5%;
    display: flex;
    justify-content: center;
    gap: 35px;
    font-size: 13px;
}


/* HEADER */

.header {
    background: white;
    min-height: 105px;
    padding: 20px 4%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-circle {
    width: 72px;
    height: 72px;

    border: 2px solid #b08a4a;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-family: Georgia, serif;
    font-size: 38px;
    color: #7a5a27;
}

.brand h1 {
    font-family: Georgia, serif;
    font-size: 25px;
    letter-spacing: 4px;
}

.brand p {
    font-size: 10px;
    letter-spacing: 3px;
    color: #806a4b;
    margin-top: 5px;
}


/* SEARCH */

.search-box {
    flex: 1;
    max-width: 420px;

    border: 1px solid #d5d0c8;
    border-radius: 30px;

    padding: 13px 18px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
}


/* HEADER BUTTONS */

.header-buttons {
    display: flex;
    gap: 12px;
}

.header-buttons button {
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.cart-button {
    position: relative;
}

.cart-count {
    position: absolute;

    right: -7px;
    top: -8px;

    background: #b68b47;
    color: white;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    font-size: 11px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* NAV */

.navigation {
    background: white;
    border-top: 1px solid #eee;

    display: flex;
    justify-content: center;
    gap: 55px;

    padding: 14px;
}

.navigation a {
    color: #222;
    text-decoration: none;
    font-size: 14px;
}

.navigation a.active {
    color: #8a672e;
    font-weight: bold;
}


/* HERO */

.hero {
    position: relative;
    height: 430px;
    overflow: hidden;
    background: #2d2925;
}

.hero::before {
    content: "";
    position: absolute;
    inset: -35px;
    z-index: 0;
    background-image: var(--hero-bg-image);
    background-size: cover;
    background-position: center center;
    filter: blur(24px);
    transform: scale(1.08);
    opacity: .72;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .20);
    pointer-events: none;
}

.hero img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
}

.hero-overlay {
    position: absolute;
    z-index: 3;

    inset: 0;

    padding: 80px 8%;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,.65),
        rgba(0,0,0,.1)
    );

    color: white;
}

.script-text {
    font-family: cursive;
    font-size: 35px;
    color: #e3c58d;
}

.hero h2 {
    font-family: Georgia, serif;
    font-size: 58px;
    line-height: .95;
    margin: 10px 0;
}

.hero-overlay > p:not(.script-text) {
    font-size: 17px;
    margin: 20px 0;
}


/* BUTTON */

.gold-button {
    background: #b38a4a;
    color: white;

    border: none;
    border-radius: 25px;

    padding: 13px 28px;

    font-weight: bold;
    cursor: pointer;
}


/* CATEGORIES */

.categories {
    background: white;

    display: grid;
    grid-template-columns: repeat(7, 1fr);

    gap: 15px;

    padding: 25px 5%;
}

.category {
    text-align: center;
    cursor: pointer;
}

.category-icon {
    width: 85px;
    height: 85px;

    background: #f7f1e8;

    border-radius: 50%;

    margin: auto auto 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 38px;
}

.category span {
    font-size: 14px;
}


/* SERVICES */

.services {
    background: white;

    margin: 15px 4%;

    border: 1px solid #eee;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.services div {
    padding: 20px;
    text-align: center;

    border-right: 1px solid #eee;
}

.services strong {
    display: block;
    margin-bottom: 5px;
}

.services small {
    color: #777;
}


/* PRODUCTS */

.products-section,
.featured {
    padding: 45px 4%;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 25px;
}

.section-title h2 {
    font-family: Georgia, serif;
    font-size: 30px;
}

.section-title p {
    color: #777;
    margin-top: 5px;
}

.section-title a {
    color: #8a672e;
    text-decoration: none;
}


.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.product-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;

    border: 1px solid #eee;

    transition: .2s;
}

.product-card:hover {
    transform: translateY(-4px);
}

.product-image {
    height: 300px;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.new-badge {
    position: absolute;
    left: 10px;
    top: 10px;

    background: #a8792e;
    color: white;

    padding: 5px 9px;

    border-radius: 5px;

    font-size: 11px;
}

.favorite {
    position: absolute;
    right: 10px;
    top: 10px;

    border: none;
    background: white;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    font-size: 20px;
}

.product-info {
    padding: 15px;
}

.product-info h3 {
    font-family: Georgia, serif;
    margin-bottom: 8px;
}

.product-info p {
    color: #777;
    font-size: 13px;
    margin-bottom: 12px;
}

.product-info strong {
    display: block;
    color: #171717;
    font-size: 17px;
    margin-bottom: 15px;
}

.add-cart {
    width: 100%;

    padding: 11px;

    background: #8d682f;
    color: white;

    border: none;
    border-radius: 7px;

    cursor: pointer;
}


/* WHOLESALE BANNER */

.wholesale-banner {
    margin: 20px 4%;

    min-height: 250px;

    border-radius: 15px;

    background:
        linear-gradient(
            90deg,
            rgba(30,20,10,.8),
            rgba(30,20,10,.15)
        ),
        url("assets/warehouse2.jpg");

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;

    padding: 40px 7%;

    color: white;
}

.wholesale-banner p {
    color: #e5c98d;
    font-family: cursive;
    font-size: 25px;
}

.wholesale-banner h2 {
    font-family: Georgia, serif;
    font-size: 40px;
    margin: 8px 0;
}


/* VIDEOS */

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.video-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #eee;
}

.video-placeholder {
    height: 210px;

    background: #403a32;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    font-size: 45px;
}

.video-card h3 {
    padding: 15px;
}


/* FOOTER */

footer {
    background: #2d2418;
    color: white;

    padding: 45px 5%;
}

.footer-brand {
    margin-bottom: 30px;
}

.footer-brand h2 {
    font-family: Georgia, serif;
    margin-top: 15px;
}

.footer-brand p {
    color: #cdb98f;
    font-size: 12px;
    letter-spacing: 2px;
}

.footer-links {
    display: flex;
    gap: 80px;
}

.footer-links div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: #ddd;
    text-decoration: none;
    font-size: 14px;
}

.copyright {
    margin-top: 40px;
    border-top: 1px solid #594a36;
    padding-top: 20px;

    color: #aaa;
    font-size: 12px;
}


/* CHAT */

.chat-admin {
    position: fixed;

    right: 25px;
    bottom: 25px;

    background: #9a7132;
    color: white;

    width: 65px;
    height: 65px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 27px;

    text-decoration: none;

    box-shadow: 0 5px 20px rgba(0,0,0,.25);

    z-index: 999;
}

.chat-admin span {
    display: none;
}


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

@media (max-width: 700px) {

    .top-bar {
        display: none;
    }

    .header {
        padding: 12px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 10px;
    }

    .brand {
        gap: 8px;
    }

    .logo-circle {
        width: 48px;
        height: 48px;
        font-size: 25px;
    }

    .brand h1 {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .brand p {
        font-size: 7px;
        letter-spacing: 1px;
    }

    .search-box {
        grid-column: 1 / -1;
        max-width: none;
    }

    .header-buttons {
        position: absolute;
        right: 12px;
        top: 18px;
    }

    .header-buttons button {
        font-size: 19px;
    }

    .navigation {
        overflow-x: auto;
        justify-content: flex-start;
        gap: 25px;
        padding: 12px 15px;
        white-space: nowrap;
    }

    .hero {
        height: 300px;
    }

    .hero-overlay {
        padding: 45px 25px;
    }

    .script-text {
        font-size: 25px;
    }

    .hero h2 {
        font-size: 40px;
    }

    .hero-overlay > p:not(.script-text) {
        font-size: 13px;
    }

    .categories {
        display: flex;
        overflow-x: auto;
        gap: 18px;
        padding: 18px 12px;
    }

    .category {
        min-width: 65px;
    }

    .category-icon {
        width: 55px;
        height: 55px;
        font-size: 25px;
    }

    .category span {
        font-size: 12px;
    }

    .services {
        margin: 10px;
        grid-template-columns: repeat(2, 1fr);
    }

    .services div {
        padding: 13px 5px;
        border-bottom: 1px solid #eee;
    }

    .products-section,
    .featured {
        padding: 30px 12px;
    }

    .section-title h2 {
        font-size: 23px;
    }

    .products {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .product-image {
        height: 190px;
    }

    .product-info {
        padding: 10px;
    }

    .product-info h3 {
        font-size: 14px;
    }

    .product-info strong {
        font-size: 14px;
    }

    .wholesale-banner {
        margin: 10px;
        min-height: 220px;
        padding: 25px;
    }

    .wholesale-banner h2 {
        font-size: 30px;
    }

    .video-grid {
        grid-template-columns: 1fr;
    }

    .video-placeholder {
        height: 180px;
    }

    footer {
        padding: 35px 20px;
    }

    .footer-links {
        gap: 30px;
    }

}
/* =========================
   MOBILE BOTTOM NAV
========================= */

.mobile-bottom-nav {
    display: none;
}

@media (max-width: 700px) {

    body {
        padding-bottom: 70px;
    }

    .mobile-bottom-nav {
        position: fixed;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        left: 0;
        right: 0;
        bottom: 0;
        height: 68px;
        background: rgba(255,255,255,.97);
        border-top: 1px solid #e7e0d5;
        z-index: 998;
        box-shadow: 0 -4px 18px rgba(0,0,0,.08);
    }

    .mobile-bottom-nav a {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        text-decoration: none;
        color: #555;
        font-size: 20px;
    }

    .mobile-bottom-nav a:first-child {
        color: #8d682f;
    }

    .mobile-bottom-nav small {
        font-size: 10px;
    }

    .mobile-cart-count {
        position: absolute;
        top: 8px;
        right: 25%;
        width: 17px;
        height: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #b38336;
        color: white;
        border-radius: 50%;
        font-size: 9px;
    }

    .chat-admin {
        right: 15px;
        bottom: 82px;
        width: 58px;
        height: 58px;
    }
}

/* =========================
   PRODUCT DETAILS MODAL
========================= */

.product-card {
    cursor: pointer;
}

.product-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
}

.product-modal.show {
    display: flex;
}

.product-modal-box {
    width: min(1000px, 100%);
    max-height: 90vh;
    background: #fff;
    border-radius: 18px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
}

.product-modal-image {
    background: #f5f1eb;
    height: 560px;
    min-height: 0;
    overflow: hidden;
}

.product-modal-image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    display: block;
}

.product-modal-info {
    padding: 35px;
    overflow-y: auto;
    max-height: 90vh;
    min-width: 0;
}

.product-modal-info .modal-badge {
    display: inline-block;
    background: #9a7132;
    color: white;
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 11px;
    margin-bottom: 15px;
}

.product-modal-info h2 {
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 12px;
}

.modal-description {
    color: #777;
    line-height: 1.6;
    margin-bottom: 20px;
}

.modal-pcs {
    background: #f8f4ed;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.modal-price {
    display: block;
    font-size: 25px;
    font-weight: bold;
    margin: 15px 0;
}

.modal-stock {
    color: #3f7a45;
    font-weight: bold;
    margin-bottom: 20px;
}

.modal-additional-details {
    margin: 20px 0;
    color: #555;
    line-height: 1.6;
}

.modal-additional-details h4 {
    color: #222;
    margin-bottom: 8px;
}

.modal-gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.modal-gallery-image {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background: #f5f1eb;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #ddd;
    padding: 3px;
}

.modal-gallery-image:hover {
    opacity: .8;
}

.modal-video {
    margin: 20px 0;
}

.modal-video a {
    display: inline-block;
    color: #9a7132;
    font-weight: 600;
    text-decoration: none;
}

.modal-add-cart {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 9px;
    background: #8d682f;
    color: white;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
}

.modal-chat {
    width: 100%;
    padding: 13px;
    margin-top: 10px;
    border: 1px solid #8d682f;
    border-radius: 9px;
    background: white;
    color: #8d682f;
    font-weight: bold;
    cursor: pointer;
}

.modal-close {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    font-size: 22px;
    cursor: pointer;
    z-index: 5;
}
@media (max-width: 700px) {

    .product-modal {
        padding: 10px;
        align-items: flex-end;
    }

    .product-modal-box {
        grid-template-columns: 1fr;
        max-height: 94vh;
        border-radius: 18px 18px 0 0;
    }

    .product-modal-image {
        min-height: 280px;
        height: 280px;
    }

    .product-modal-image img {
        min-height: 280px;
        height: 280px;
    }

    .product-modal-info {
        padding: 22px;
    }

    .product-modal-info h2 {
        font-size: 23px;
    }

    .modal-price {
        font-size: 21px;
    }
}

/* MOBILE WIDTH FIX */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.product-card {
    min-width: 0;
}

.products {
    width: 100%;
}

@media (max-width: 700px) {

    .products {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-card {
        width: 100%;
        min-width: 0;
    }

    .product-image {
        width: 100%;
        height: 190px;
    }

    .product-image img {
        width: 100%;
        max-width: 100%;
    }

    .product-info {
        width: 100%;
        min-width: 0;
    }

    .product-info h3 {
        overflow-wrap: break-word;
    }

}

/* =========================
   CHAT WITH ADMIN LABEL
========================= */

.chat-admin {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: auto !important;
    height: 58px !important;
    min-width: 58px;
    padding: 0 18px !important;
    border-radius: 30px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;

    white-space: nowrap;
    z-index: 3000;

    font-size: 14px;
    font-weight: 700;

    box-shadow: 0 5px 18px rgba(0,0,0,.22);
}

.chat-admin::after {
    content: "CHAT WITH ADMIN";
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 700px) {

    .chat-admin {
        right: 14px;
        bottom: 75px;
        width: 52px !important;
        height: 52px !important;
        min-width: 52px;
        padding: 0 !important;
        border-radius: 50% !important;
        gap: 0;
    }

    .chat-admin::after {
        content: "";
    }
}

/* =========================
   CART MODAL
========================= */

.cart-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    display: none;
    justify-content: flex-end;
    z-index: 5000;
}

.cart-modal.show {
    display: flex;
}

.cart-box {
    width: 430px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    padding: 25px;
    overflow-y: auto;
    box-shadow: -5px 0 20px rgba(0,0,0,.2);
}

.cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.cart-header h2 {
    margin: 0;
    font-family: Georgia, serif;
}

.cart-close {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #f3eee6;
    cursor: pointer;
    font-weight: bold;
}

.cart-empty {
    text-align: center;
    padding: 60px 10px;
    color: #888;
}

.cart-item {
    display: flex;
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.cart-item img {
    width: 90px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    background: #f5f1eb;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-info h3 {
    margin: 0 0 5px;
    font-size: 16px;
}

.cart-item-info p {
    margin: 3px 0;
    color: #777;
    font-size: 12px;
}

.cart-item-info strong {
    display: block;
    margin: 7px 0;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 7px;
}

.quantity-controls button {
    border: 1px solid #ddd;
    background: white;
    border-radius: 5px;
    cursor: pointer;
}

.qty-minus,
.qty-plus {
    width: 28px;
    height: 28px;
}

.quantity-controls span {
    min-width: 20px;
    text-align: center;
}

.quantity-controls .remove-item {
    padding: 6px 8px;
    color: #a33;
    margin-left: auto;
}

.cart-footer {
    border-top: 1px solid #eee;
    margin-top: 15px;
    padding-top: 20px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    margin-bottom: 15px;
}

.checkout-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 9px;
    background: #8d682f;
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.checkout-btn:hover {
    opacity: .9;
}


@media (max-width: 700px) {

    .cart-box {
        width: 100%;
        padding: 20px;
    }

    .cart-item img {
        width: 75px;
        height: 95px;
    }

    .cart-item-info h3 {
        font-size: 14px;
    }

}

/* =========================
   CHECKOUT SYSTEM
========================= */

.checkout-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 7000;
  overflow-y: auto;
}

.checkout-modal.show {
  display: flex;
}

.checkout-box {
  width: min(760px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  background: #fffdf9;
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
}

.checkout-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
  border-bottom: 1px solid #e8dfd2;
  padding-bottom: 18px;
  margin-bottom: 22px;
}

.checkout-header h2 {
  margin: 4px 0 0;
  font-size: 30px;
  color: #3b2a20;
}

.checkout-small-title {
  font-size: 11px;
  letter-spacing: 2px;
  color: #a27b42;
  font-weight: 700;
}

.checkout-close {
  border: none;
  background: #f1ebe3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 25px;
  cursor: pointer;
  color: #4b382c;
}

.checkout-section {
  background: #fff;
  border: 1px solid #eadfd1;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
}

.checkout-section h3 {
  margin: 0 0 16px;
  color: #3b2a20;
  font-size: 18px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.checkout-field {
  margin-bottom: 14px;
}

.checkout-field label,
.delivery-extra label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #4b382c;
  margin-bottom: 7px;
}

.checkout-field input,
.checkout-field textarea,
.delivery-extra select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9cbbb;
  background: #fffdfb;
  border-radius: 9px;
  padding: 12px 13px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}

.checkout-field input:focus,
.checkout-field textarea:focus,
.delivery-extra select:focus {
  border-color: #a27b42;
}

.checkout-field textarea {
  min-height: 90px;
  resize: vertical;
}

.delivery-options {
  display: grid;
  gap: 10px;
  margin-bottom: 15px;
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #ded2c4;
  border-radius: 12px;
  padding: 13px;
  cursor: pointer;
  background: #fffdfb;
}

.delivery-option:has(input:checked) {
  border-color: #a27b42;
  background: #fbf5ec;
}

.delivery-option input {
  accent-color: #8e6939;
}

.delivery-option span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.delivery-option strong {
  color: #3b2a20;
}

.delivery-option small {
  color: #817267;
}

.delivery-extra {
  margin-top: 10px;
}

.checkout-note {
  font-size: 12px;
  color: #7c7067;
  line-height: 1.5;
  margin: 9px 0 0;
}

.admin-shipping-notice {
  border: 1px solid #d9c39f;
  background: #fbf5e9;
  border-radius: 13px;
  padding: 16px;
  margin-bottom: 18px;
}

.admin-shipping-title {
  font-weight: 800;
  color: #654923;
  font-size: 15px;
  margin-bottom: 5px;
}

.admin-shipping-notice p {
  margin: 0;
  color: #756755;
  font-size: 13px;
  line-height: 1.5;
}

.checkout-summary-item {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #eee7df;
}

.checkout-summary-item div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-summary-item strong {
  color: #3b2a20;
}

.checkout-summary-item small {
  color: #817267;
}

.checkout-price-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  color: #5d5148;
}

.shipping-row {
  border-top: 1px dashed #d8cabb;
  margin-top: 5px;
}

.shipping-row strong {
  color: #98723c;
}

.checkout-grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #3b2a20;
  margin-top: 8px;
  padding-top: 16px;
}

.checkout-grand-total span {
  font-weight: 800;
  color: #3b2a20;
}

.checkout-grand-total strong {
  font-size: 22px;
  color: #3b2a20;
}

.confirm-order-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 15px;
  background: #3b2a20;
  color: white;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  margin-top: 4px;
}

.confirm-order-btn:hover {
  opacity: .92;
}

.checkout-bottom-note {
  text-align: center;
  color: #83776e;
  font-size: 11px;
  line-height: 1.5;
  margin: 12px 10px 0;
}

.shopee-box {
  border: 1px solid #e1d1ba;
  background: #fffaf1;
  border-radius: 12px;
  padding: 16px;
}

.shopee-box strong {
  color: #3b2a20;
}

.shopee-box p {
  color: #756b63;
  font-size: 13px;
  line-height: 1.5;
}

.shopee-button {
  display: inline-block;
  text-decoration: none;
  background: #3b2a20;
  color: #fff;
  padding: 11px 18px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
}

.checkout-pending {
  text-align: center;
  padding: 40px 28px;
}

.pending-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #f0e6d6;
  color: #8d6939;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 800;
}

.pending-status {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 800;
  color: #8d6939;
  margin-bottom: 8px;
}

.checkout-pending h2 {
  color: #3b2a20;
  margin: 5px 0 8px;
  font-size: 29px;
}

.success-message {
  color: #756b63;
  margin-bottom: 22px;
}

.order-number-box {
  background: #f7f1e9;
  border: 1px solid #e2d5c5;
  border-radius: 13px;
  padding: 17px;
  margin-bottom: 18px;
}

.order-number-box span {
  display: block;
  color: #81756b;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.order-number-box strong {
  font-size: 22px;
  color: #3b2a20;
}

.pending-message-box {
  text-align: left;
  background: #fbf5e9;
  border: 1px solid #dfcba8;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
}

.pending-message-box strong {
  color: #654923;
}

.pending-message-box p {
  color: #756b63;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 0;
}

.success-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  text-align: left;
  margin-bottom: 18px;
}

.success-details div {
  background: #fff;
  border: 1px solid #e9e0d7;
  border-radius: 10px;
  padding: 11px;
}

.success-details span {
  display: block;
  font-size: 10px;
  color: #8a7d73;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.success-details strong {
  color: #3b2a20;
  font-size: 13px;
  word-break: break-word;
}


/* =========================================
   PREMIUM FACEBOOK TRANSACTION NOTICE
========================================= */

.facebook-order-notice {
  position: relative;
  text-align: left;
  margin: 20px 0 18px;
  padding: 20px 20px 18px;
  background: linear-gradient(145deg, #fffdf9 0%, #fbf5e9 100%);
  border: 1px solid #d9bf8b;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(76, 58, 28, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.facebook-order-notice::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #b88932 0%, #e0bd6b 50%, #9a6d23 100%);
}

.facebook-notice-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 13px;
}

.facebook-notice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 10px;
  background: #f1e4c9;
  border: 1px solid #dfc89b;
  font-size: 18px;
}

.facebook-notice-header > div {
  min-width: 0;
}

.facebook-notice-label {
  display: block;
  margin-bottom: 4px;
  color: #98702d;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.facebook-notice-header strong {
  display: block;
  color: #3b2a20;
  font-size: 15px;
  line-height: 1.35;
}

.facebook-order-notice p {
  margin: 0 0 10px;
  color: #665b52;
  font-size: 12.5px;
  line-height: 1.65;
}

.facebook-order-notice p:last-of-type {
  margin-bottom: 15px;
}

.facebook-order-notice p strong {
  color: #493b2d;
  font-weight: 800;
}

.facebook-order-chat-btn {
  width: 100%;
  min-height: 46px;
  border: 1px solid #b58a3a;
  border-radius: 11px;
  background: linear-gradient(135deg, #3b2a20 0%, #514033 100%);
  color: #fffdf8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(59, 42, 32, 0.15);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.facebook-order-chat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(59, 42, 32, 0.2);
  background: linear-gradient(135deg, #4a3528 0%, #5c493b 100%);
}

.facebook-order-chat-btn:active {
  transform: translateY(0);
}

@media(max-width:700px) {
  .facebook-order-notice {
    margin: 17px 0 15px;
    padding: 17px 15px 15px;
    border-radius: 13px;
  }

  .facebook-notice-header {
    gap: 10px;
    margin-bottom: 11px;
  }

  .facebook-notice-icon {
    width: 33px;
    height: 33px;
    flex-basis: 33px;
    font-size: 16px;
  }

  .facebook-notice-label {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .facebook-notice-header strong {
    font-size: 14px;
  }

  .facebook-order-notice p {
    font-size: 12px;
    line-height: 1.6;
  }

  .facebook-order-chat-btn {
    min-height: 44px;
    font-size: 11.5px;
  }
}

.success-close-btn {
  width: 100%;
  border: none;
  background: #3b2a20;
  color: #fff;
  padding: 14px;
  border-radius: 11px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
}

@media(max-width:700px) {

  .checkout-modal {
    padding: 8px;
    align-items: flex-start;
  }

  .checkout-box {
    width: 100%;
    max-height: 96vh;
    padding: 17px;
    border-radius: 15px;
    margin-top: 5px;
  }

  .checkout-header h2 {
    font-size: 25px;
  }

  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .checkout-section {
    padding: 15px;
  }

  .delivery-option {
    padding: 11px;
  }

  .checkout-grand-total strong {
    font-size: 19px;
  }

  .success-details {
    grid-template-columns: 1fr;
  }

  .checkout-pending {
    padding: 30px 17px;
  }

}

/* =========================
   END CHECKOUT SYSTEM
========================= */


/* =========================
   SHOPEE CHECKOUT
========================= */

.shopee-payment-panel {
  border: 1px solid #e2d1b7;
  background: #fffaf2;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 18px;
}

.shopee-title {
  font-size: 20px;
  font-weight: 900;
  color: #3b2a20;
  margin-bottom: 5px;
}

.shopee-intro {
  font-size: 13px;
  color: #756b63;
  line-height: 1.5;
  margin: 0 0 15px;
}

.shopee-payment-options {
  display: grid;
  gap: 10px;
  margin-bottom: 15px;
}

.shopee-payment-option {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid #decfbc;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.shopee-payment-option:has(input:checked) {
  border-color: #9b743e;
  background: #fbf4e8;
}

.shopee-payment-option input {
  margin-top: 3px;
  accent-color: #8d6939;
}

.shopee-payment-option div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.shopee-payment-option strong {
  color: #3b2a20;
  font-size: 14px;
}

.shopee-payment-option span {
  color: #756b63;
  font-size: 12px;
  line-height: 1.5;
}

.shopee-computation {
  border: 1px solid #d9c7ac;
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  margin-bottom: 15px;
}

.shopee-computation-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  color: #6d4f27;
  margin-bottom: 12px;
}

.shopee-calc-row,
.shopee-calc-total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 0;
}

.shopee-calc-row {
  color: #63574e;
  font-size: 13px;
}

.shopee-calc-row strong {
  color: #3b2a20;
}

.shopee-calc-row.discount strong {
  color: #8b6130;
}

.shopee-calc-row.fee strong {
  color: #8b6130;
}

.shopee-calc-total {
  border-top: 2px solid #3b2a20;
  margin-top: 5px;
  padding-top: 13px;
  font-weight: 800;
  color: #3b2a20;
}

.shopee-calc-total strong {
  font-size: 18px;
}

.shopee-pay-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed #d7c7b4;
  margin-top: 12px;
  padding-top: 12px;
}

.shopee-pay-note strong {
  color: #5f4528;
  font-size: 13px;
}

.shopee-pay-note span {
  color: #746960;
  font-size: 12px;
}

.shopee-simple-explanation {
  background: #fbf5e9;
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
}

.shopee-simple-explanation strong {
  color: #654923;
  font-size: 12px;
}

.shopee-simple-explanation p {
  margin: 5px 0 0;
  color: #756b63;
  font-size: 12px;
  line-height: 1.5;
}

.shopee-dp-box,
.shopee-balance-box {
  border-radius: 10px;
  padding: 13px;
  margin-top: 10px;
}

.shopee-dp-box {
  background: #f8f0e3;
  border: 1px solid #dfccb0;
}

.shopee-balance-box {
  background: #f7f5f1;
  border: 1px solid #ddd5cb;
}

.shopee-dp-box div,
.shopee-balance-box div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.shopee-dp-box span,
.shopee-balance-box span {
  color: #5e5147;
  font-size: 12px;
}

.shopee-dp-box strong,
.shopee-balance-box strong {
  color: #3b2a20;
  font-size: 15px;
}

.shopee-dp-box small,
.shopee-balance-box small {
  display: block;
  margin-top: 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
  color: #8a6a3e;
}

.shopee-courier-box {
  border: 1px solid #ded3c7;
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
}

.shopee-courier-box > strong {
  color: #3b2a20;
  font-size: 14px;
}

.shopee-courier-box p {
  margin: 5px 0 12px;
  font-size: 12px;
  color: #756b63;
}

.courier-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.courier-options label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px;
  border: 1px solid #d9cbbb;
  border-radius: 9px;
  cursor: pointer;
  background: #fffdfb;
  font-weight: 800;
  font-size: 12px;
  color: #3b2a20;
}

.courier-options label:has(input:checked) {
  border-color: #9b743e;
  background: #fbf4e8;
}

.courier-options input {
  accent-color: #8d6939;
}

.shopee-important-box {
  background: #fff8ed;
  border: 1px solid #e2cda9;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
}

.shopee-important-box > strong {
  color: #654923;
  font-size: 13px;
}

.shopee-important-box ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.shopee-important-box li {
  color: #756b63;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 4px;
}

.shopee-disclaimer {
  border-top: 1px solid #e4d9cc;
  padding-top: 13px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.shopee-disclaimer strong {
  font-size: 11px;
  color: #5d4a37;
}

.shopee-disclaimer p {
  font-size: 11px;
  line-height: 1.5;
  color: #83776e;
  margin: 5px 0 0;
}

.shopee-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  background: #3b2a20;
  color: #fff;
  padding: 14px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3px;
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .18s ease;
}

.shopee-button.copy-success {
  box-shadow:
    inset 0 0 0 2px #4caf50,
    0 0 0 1px rgba(76,175,80,.18);
}

.shopee-button:hover {
  opacity: .92;
}

.shopee-final-reminder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.shopee-final-reminder div {
  background: #fff;
  border: 1px solid #e3d9cf;
  border-radius: 10px;
  padding: 12px;
}

.shopee-final-reminder span {
  display: block;
  font-size: 10px;
  color: #8a7d73;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.shopee-final-reminder strong {
  font-size: 13px;
  color: #3b2a20;
}

@media(max-width:700px) {

  .shopee-payment-panel {
    padding: 15px;
  }

  .shopee-title {
    font-size: 18px;
  }

  .shopee-payment-option {
    padding: 12px;
  }

  .shopee-calc-row,
  .shopee-calc-total {
    font-size: 12px;
  }

  .shopee-calc-total strong {
    font-size: 16px;
  }

  .courier-options {
    grid-template-columns: 1fr 1fr;
  }

  .shopee-final-reminder {
    grid-template-columns: 1fr;
  }

}

/* =========================
   END SHOPEE CHECKOUT
========================= */


/* =========================
   FINAL SHOPEE SUMMARY FIX
========================= */

#checkoutShippingRow {
  transition: .2s ease;
}

#checkoutShippingRow[style*="display: none"] {
  display: none !important;
}

/* Keep Shopee calculation visually separate */
.shopee-computation {
  margin-bottom: 15px;
}

/* =========================
   END SHOPEE SUMMARY FIX
========================= */





/* =========================================
   PRODUCT GALLERY ARROWS
   ========================================= */

.product-modal-image-wrap {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

.modal-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255,255,255,.75);
    border-radius: 50%;

    background: rgba(0,0,0,.40);
    color: #fff;

    font-size: 38px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        opacity .2s ease;

    padding: 0;
}

.modal-gallery-arrow:hover {
    background: rgba(0,0,0,.70);
    transform: translateY(-50%) scale(1.06);
}

.modal-gallery-prev {
    left: 14px;
}

.modal-gallery-next {
    right: 14px;
}

.modal-gallery-image {
    transition:
        opacity .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.modal-gallery-image.active {
    border: 2px solid #8b6f47;
    opacity: 1;
}

@media (max-width: 768px) {

    .modal-gallery-arrow {
        width: 40px;
        height: 40px;
        font-size: 32px;
    }

    .modal-gallery-prev {
        left: 8px;
    }

    .modal-gallery-next {
        right: 8px;
    }

}


/* =========================================
   PRODUCT VIDEO
   ========================================= */

.product-video-title {
    margin: 20px 0 10px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #6f5638;
}

.product-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;
    border-radius: 12px;

    background: #111;

    box-shadow:
        0 8px 24px rgba(0,0,0,.12);
}

.product-video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}

.product-video-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 12px 20px;

    border-radius: 8px;

    background: #6f5638;
    color: #fff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.product-video-link:hover {
    opacity: .88;
    transform: translateY(-1px);
}

@media (max-width: 768px) {

    .product-video-title {
        margin-top: 16px;
        font-size: 13px;
    }

    .product-video-frame {
        border-radius: 10px;
    }

    .product-video-link {
        width: 100%;
    }

}


/* =========================================
   PRODUCT VIDEO PLAYER
   ========================================= */

.product-video-player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border: 0;
}


/* =========================================
   MOBILE PRODUCT MODAL FIX
   ========================================= */

@media (max-width: 700px) {

    /* Lock the product modal to the viewport */
    .product-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        overflow: hidden;
        overscroll-behavior: none;
        touch-action: none;
    }

    /* Full-screen mobile modal */
    .product-modal-box {
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    /* Full-width product image */
    .product-modal-image {
        width: 100%;
        min-width: 100%;
        height: 42dvh;
        min-height: 260px;
        max-height: 430px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f1eb;
        overflow: hidden;
        position: relative;
    }

    /* IMPORTANT:
       The actual image itself has this class */
    .product-modal-image {
        object-fit: contain;
    }

    /* Modal information becomes the ONLY scrollable area */
    .product-modal-info {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    /* Keep video inside the modal */
    .product-video-frame {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        touch-action: pan-y;
    }

    .product-video-player {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
    }

    /* Gallery stays inside modal width */
    .modal-gallery {
        width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    .modal-gallery-image {
        flex: 0 0 auto;
    }

    /* Keep close button above everything */
    .modal-close {
        z-index: 50;
    }
}


/* =========================================
   MOBILE PRODUCT IMAGE CORRECTION
   ========================================= */

@media (max-width: 700px) {

    .product-modal-image-wrap {
        width: 100%;
        height: 42dvh;
        min-height: 260px;
        max-height: 430px;
        background: #f5f1eb;
        overflow: hidden;
        position: relative;
        flex: 0 0 auto;
    }

    .product-modal-image-wrap .product-modal-image {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        display: block;
        object-fit: contain;
        object-position: center;
        background: #f5f1eb;
    }

}


/* =========================================
   SEARCH / CATEGORY RESULTS
   ========================================= */

.browse-results-section {
    display: none;
}

.browse-results-section.show {
    display: block;
}

.browse-results-section .section-heading {
    margin-bottom: 25px;
}

.section-kicker {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    letter-spacing: 2px;
    color: #9a7740;
    font-weight: 700;
}

.contact-section {
    padding: 70px 5%;
    background: #f5f0e8;
    text-align: center;
    scroll-margin-top: 20px;
}

.contact-inner {
    max-width: 700px;
    margin: 0 auto;
}

.contact-inner h2 {
    margin-bottom: 18px;
    font-family: Georgia, serif;
    color: #3d3021;
}

.contact-phone {
    display: inline-block;
    margin: 8px 0 15px;
    color: #8b6834;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
}

.contact-phone:hover {
    text-decoration: underline;
}

.contact-inner p {
    color: #666;
    line-height: 1.6;
}

#categories,
#new-arrivals,
#featured,
#contact {
    scroll-margin-top: 20px;
}

@media (max-width: 700px) {

    .contact-section {
        padding: 50px 20px;
    }

    .contact-phone {
        font-size: 20px;
    }

}




/* =========================================
   DYNAMIC FEATURED VIDEOS
   ========================================= */

.featured-videos-loading {
    grid-column: 1 / -1;
    padding: 45px 20px;
    text-align: center;
    color: #6f5638;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
}

.featured-video-media {
    width: 100%;
    height: 210px;
    background: #403a32;
    overflow: hidden;
}

.featured-video-media iframe,
.featured-video-player {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.featured-video-player {
    object-fit: contain;
    background: #111;
}

.featured-video-media iframe {
    background: #111;
}

.video-card h3 {
    min-height: 52px;
    margin: 0;
    padding: 15px;
    display: flex;
    align-items: center;
}

@media (max-width: 700px) {

    .featured-video-media {
        height: 180px;
    }

    .video-card h3 {
        min-height: auto;
    }

}



/* =========================================
   FEATURED VIDEO BLURRED BACKGROUND
   ========================================= */

.featured-video-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    overflow: hidden;
}

.featured-video-background {
    position: absolute;
    inset: -18px;
    width: calc(100% + 36px);
    height: calc(100% + 36px);
    object-fit: cover;
    filter: blur(18px);
    opacity: 0.72;
    transform: scale(1.06);
    pointer-events: none;
}

.featured-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.16);
    pointer-events: none;
    z-index: 1;
}

.featured-video-player {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent;
}

.featured-video-media iframe {
    position: relative;
    z-index: 2;
}



/* CATEGORY IMAGE SIZING */
.category-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .category-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}


/* IMGLAM PREMIUM UI RESTORED */

/* ================================
   FACEBOOK ACCOUNT
   ================================ */

.facebook-account-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 42px !important;
    padding: 5px 12px 5px 7px !important;

    border: 1px solid rgba(180, 139, 58, 0.35) !important;
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.82) !important;

    color: #3a3025 !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;

    box-shadow:
        0 3px 12px rgba(76, 58, 28, 0.08),
        inset 0 0 0 1px rgba(255,255,255,.65);

    transition: .2s ease;
}

.facebook-account-button:hover {
    border-color: rgba(180, 139, 58, .65) !important;
    box-shadow:
        0 5px 16px rgba(76, 58, 28, .13);
}

#mainFacebookAccountIcon {
    display: flex !important;
    align-items: center;
    justify-content: center;

    width: 31px !important;
    height: 31px !important;
    flex: 0 0 31px;

    padding: 2px;
    box-sizing: border-box;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #b88932,
        #e2bd6b,
        #9a6d23
    );

    box-shadow:
        0 2px 8px rgba(137, 96, 28, .22);
}

#mainFacebookAccountIcon img {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    background: #f3efe8;
}

.facebook-account-name {
    font-size: 13px !important;
    font-weight: 600 !important;
}


/* ================================
   ORDERS
   ================================ */

.main-orders-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 38px !important;
    padding: 7px 15px !important;

    border: 1px solid rgba(180, 139, 58, .45) !important;
    border-radius: 999px !important;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,.96),
        rgba(248,243,234,.96)
    ) !important;

    color: #8d641f !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .8px !important;

    cursor: pointer;

    box-shadow:
        0 3px 12px rgba(76,58,28,.08),
        inset 0 0 0 1px rgba(255,255,255,.7);

    transition: .2s ease;
}

.main-orders-button:hover {
    border-color: rgba(180,139,58,.75) !important;

    background: linear-gradient(
        135deg,
        #fffdf8,
        #f3e6cb
    ) !important;

    box-shadow:
        0 5px 16px rgba(76,58,28,.14);

    transform: translateY(-1px);
}


/* ================================
   CHAT WITH ADMIN SIDE TAB
   ================================ */

.chat-admin {
    position: fixed !important;

    right: -6px !important;
    bottom: 145px !important;

    width: 48px !important;
    min-width: 48px !important;
    height: 150px !important;

    padding: 12px 8px !important;
    box-sizing: border-box;

    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border: 1px solid rgba(255,255,255,.55);
    border-right: none;

    border-radius: 16px 0 0 16px !important;

    background: linear-gradient(
        180deg,
        #d1a653 0%,
        #a87827 48%,
        #8d641f 100%
    ) !important;

    color: #fff !important;

    box-shadow:
        -4px 8px 22px rgba(0,0,0,.18),
        inset 1px 0 rgba(255,255,255,.18);

    text-decoration: none !important;

    z-index: 3000;

    transition: right .25s ease, box-shadow .25s ease;
}

.chat-admin:hover {
    right: 0 !important;

    box-shadow:
        -6px 10px 28px rgba(0,0,0,.24);
}

.chat-admin {
    font-size: 0 !important;
}

.chat-admin::before {
    content: "✦";

    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;

    background: rgba(255,255,255,.12);

    color: #fff;
    font-size: 13px;
}

.chat-admin::after {
    content: "CHAT\A WITH\A ADMIN";

    white-space: pre;
    text-align: center;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .7px;
}

.chat-admin span {
    display: none !important;
}


/* ================================
   MY ACCOUNT PREMIUM POPUP
   ================================ */

.my-account-modal {
    position: fixed !important;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 10000;
}

.my-account-overlay {
    position: absolute;
    inset: 0;

    background: rgba(28, 23, 17, .72);

    backdrop-filter: blur(7px);
}

.my-account-panel {
    position: relative;
    z-index: 1;

    width: min(620px, calc(100% - 32px));
    max-height: 90vh;

    overflow-y: auto;

    padding: 30px;

    border: 1px solid rgba(180,139,58,.55);
    border-radius: 26px;

    background: #fffdf9;

    box-shadow:
        0 24px 70px rgba(0,0,0,.28),
        0 0 0 5px rgba(180,139,58,.06);
}

.my-account-close {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 38px;
    height: 38px;

    border: 1px solid rgba(180,139,58,.25);
    border-radius: 50%;

    background: #f8f4ed;

    color: #514331;

    font-size: 20px;
    cursor: pointer;
}

.my-account-header {
    display: flex;
    align-items: center;
    gap: 18px;

    padding-bottom: 22px;
    margin-bottom: 22px;

    border-bottom: 1px solid rgba(180,139,58,.20);
}

.my-account-avatar {
    width: 78px;
    height: 78px;

    flex: 0 0 78px;

    padding: 3px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #b88932,
        #e2bd6b,
        #9a6d23
    );

    box-shadow:
        0 5px 16px rgba(137,96,28,.22);
}

.my-account-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}

.my-account-header h2 {
    margin: 0 0 5px;

    color: #30271f;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 27px;
}

.my-account-facebook-name {
    color: #9a7132;
    font-size: 13px;
    font-weight: 600;
}

.my-account-section {
    margin-bottom: 18px;
    padding: 18px;

    border: 1px solid rgba(180,139,58,.18);
    border-radius: 18px;

    background: #fff;
    box-shadow: 0 4px 15px rgba(76,58,28,.05);
}

.my-account-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;

    color: #30271f;

    font-size: 16px;
    font-weight: 700;
}

.my-account-section-title span {
    min-width: 28px;
    height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #bd8b2e;
    color: #fff;

    font-size: 12px;
}

.my-account-empty {
    padding: 13px;

    border-radius: 12px;

    background: #f7f4ef;

    color: #8a8177;

    text-align: center;
    font-size: 13px;
}

.my-account-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

.my-account-details > div {
    padding: 13px;

    border: 1px solid #ece4d8;
    border-radius: 12px;

    background: #faf8f4;
}

.my-account-signout {
    width: 100%;

    padding: 13px;

    border: 1px solid rgba(170,60,45,.25);
    border-radius: 12px;

    background: #fff7f5;

    color: #9a4639;

    font-weight: 700;

    cursor: pointer;
}


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

@media (max-width: 700px) {

    .facebook-account-button {
        min-height: 38px !important;
        padding: 4px 9px 4px 5px !important;
        gap: 6px;
    }

    #mainFacebookAccountIcon {
        width: 29px !important;
        height: 29px !important;
        flex-basis: 29px;
    }

    .facebook-account-name {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px !important;
    }

    .main-orders-button {
        min-height: 36px !important;
        padding: 6px 11px !important;

        font-size: 11px !important;
    }

    .chat-admin {
        right: -5px !important;
        bottom: 92px !important;

        width: 44px !important;
        min-width: 44px !important;
        height: 132px !important;

        border-radius: 14px 0 0 14px !important;
    }

    .chat-admin::before {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .chat-admin::after {
        font-size: 8px;
        letter-spacing: .55px;
    }

    .my-account-panel {
        width: calc(100% - 20px);
        max-height: 92vh;

        padding: 20px;

        border-radius: 20px;
    }

    .my-account-header {
        gap: 12px;
    }

    .my-account-avatar {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .my-account-header h2 {
        font-size: 21px;
    }

    .my-account-details {
        grid-template-columns: 1fr;
    }
}



/* IMGLAM PREMIUM FACEBOOK LOGIN MODAL */

.facebook-account-modal {
    position: fixed !important;
    inset: 0 !important;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    z-index: 11000 !important;
}

.facebook-account-overlay {
    position: absolute;
    inset: 0;

    background: rgba(28, 23, 17, .72);

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.facebook-account-panel {
    position: relative;
    z-index: 1;

    width: min(390px, calc(100% - 32px));

    padding: 34px 30px 30px;

    box-sizing: border-box;

    border: 1px solid rgba(180, 139, 58, .55);
    border-radius: 24px;

    background: #fffdf9;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .30),
        0 0 0 5px rgba(180, 139, 58, .06);
}

.facebook-account-panel > button:first-child {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 1px solid rgba(180, 139, 58, .25);
    border-radius: 50%;

    background: #f8f4ed;

    color: #514331;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition: .2s ease;
}

.facebook-account-panel > button:first-child:hover {
    background: #f1e5cf;

    border-color: rgba(180, 139, 58, .55);

    transform: rotate(90deg);
}

.facebook-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    margin: 5px auto 18px;

    border: 3px solid transparent;
    border-radius: 50%;

    background:
        linear-gradient(#f5f0e8, #f5f0e8) padding-box,
        linear-gradient(
            135deg,
            #b88932,
            #e2bd6b,
            #9a6d23
        ) border-box;

    color: #8d641f;

    font-size: 34px;

    box-shadow:
        0 6px 18px rgba(137, 96, 28, .20);
}

.facebook-account-panel h3 {
    margin: 0 0 8px;

    color: #30271f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;
    font-weight: 700;
}

#globalFacebookStatus {
    margin: 0 auto 22px;

    max-width: 290px;

    color: #81776b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;
    line-height: 1.5;
}

.global-facebook-login-btn,
.global-facebook-logout-btn {
    width: 100%;

    min-height: 46px;

    padding: 12px 18px;

    border-radius: 12px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.global-facebook-login-btn {
    border: 1px solid #a87827;

    background: linear-gradient(
        135deg,
        #c99b45,
        #a87827
    );

    color: #fff;

    box-shadow:
        0 5px 16px rgba(137, 96, 28, .20);
}

.global-facebook-login-btn:hover {
    background: linear-gradient(
        135deg,
        #d5aa57,
        #b58430
    );

    box-shadow:
        0 8px 22px rgba(137, 96, 28, .28);

    transform: translateY(-1px);
}

.global-facebook-login-btn:active,
.global-facebook-logout-btn:active {
    transform: translateY(0);
}

.global-facebook-logout-btn {
    margin-top: 10px;

    border: 1px solid rgba(170, 60, 45, .25);

    background: #fff7f5;

    color: #9a4639;
}

@media (max-width: 700px) {

    .facebook-account-panel {
        width: calc(100% - 24px);

        padding: 30px 22px 24px;

        border-radius: 20px;
    }

    .facebook-account-avatar {
        width: 70px;
        height: 70px;

        margin-bottom: 15px;

        font-size: 29px;
    }

    .facebook-account-panel h3 {
        font-size: 22px;
    }
}


/* =========================================================
   IMGLAM MOBILE HEADER � COMPACT FACEBOOK ACCOUNT
   ========================================================= */
@media (max-width: 600px) {
    .header-buttons {
        gap: 5px !important;
        flex-shrink: 0 !important;
    }

    .facebook-account-button {
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 4px 7px !important;
        gap: 4px !important;
        overflow: hidden !important;
    }

    #mainFacebookAccountIcon {
        width: 29px !important;
        height: 29px !important;
        flex: 0 0 29px !important;
    }

    #mainFacebookAccountName {
        display: block !important;
        width: 20px !important;
        max-width: 20px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    #mainFacebookAccountName::after {
        content: "Mer" !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .1px !important;
    }

    .main-orders-button {
        min-height: 38px !important;
        height: 38px !important;
        padding: 7px 10px !important;
        font-size: 11px !important;
        letter-spacing: .5px !important;
        white-space: nowrap !important;
    }
}
/* =========================================================
   MOBILE BOTTOM NAV FINAL
   ========================================================= */

@media (max-width: 600px) {

    /* Hide floating Chat With Admin on mobile */
    .chat-admin {
        display: none !important;
    }

    /* Keep bottom navigation balanced */
    .mobile-bottom-nav {
        justify-content: space-around !important;
    }

    /* Mobile cart */
    .mobile-cart {
        position: relative !important;
    }

    .mobile-cart-count {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: -5px !important;
        right: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 18px !important;
        font-weight: 700 !important;
        z-index: 5 !important;
    }

    /* Mobile Messenger link */
    .mobile-chat {
        text-decoration: none !important;
        color: inherit !important;
    }
}

/* MOBILE BOTTOM NAV � 4 ITEMS EVENLY SPACED */
@media (max-width: 600px) {
    .mobile-bottom-nav {
        display: flex !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    .mobile-bottom-nav > a {
        flex: 1 1 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
}

/* MOBILE CART BADGE � POSITION NEXT TO ICON */
@media (max-width: 600px) {
    .mobile-cart {
        position: relative !important;
    }

    .mobile-cart-count {
        top: 1px !important;
        right: 24px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        font-size: 10px !important;
        line-height: 18px !important;
    }
}

/* ===== PREMIUM CATEGORY LABELS ===== */

.category {
    transition: transform .25s ease !important;
}

.category span {
    display: inline-block !important;
    margin-top: 4px !important;
    padding-bottom: 8px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.15px !important;
    text-transform: uppercase !important;
    color: #3a3025 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    position: relative !important;
}

.category span::after {
    content: "" !important;
    display: block !important;
    width: 30px !important;
    height: 2px !important;
    margin: 7px auto 0 !important;
    background: #c9a46a !important;
    border-radius: 2px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: width .25s ease !important;
}

.category:hover {
    transform: translateY(-3px) !important;
}

.category:hover span::after {
    width: 40px !important;
}

@media (max-width: 600px) {
    .category span {
        margin-top: 3px !important;
        padding-bottom: 7px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .7px !important;
    }

    .category span::after {
        width: 21px !important;
        height: 2px !important;
        margin-top: 5px !important;
    }

    .category:hover {
        transform: none !important;
    }
}



/* =========================================
   PREMIUM BALE SELECTOR + PURCHASE UI
   ========================================= */

.modal-bale-section {
    margin: 18px 0 14px;
    padding: 14px;
    border: 1px solid #eadfce;
    border-radius: 14px;
    background: linear-gradient(145deg, #fffdf9, #f9f3e8);
    box-shadow:
        0 4px 14px rgba(80, 60, 30, 0.06),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

.modal-bale-label {
    margin-bottom: 9px;
    color: #76551f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.modal-bale-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.modal-bale-option {
    appearance: none;
    width: 100%;
    padding: 13px 12px;
    border: 1px solid #dccdb6;
    border-radius: 12px;
    background: #ffffff;
    color: #4a4034;
    text-align: left;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.modal-bale-option:hover {
    transform: translateY(-1px);
    border-color: #c8a45f;
    box-shadow: 0 5px 14px rgba(100, 75, 30, .09);
}

.modal-bale-option:active {
    transform: translateY(1px) scale(.985);
}

.modal-bale-option.active {
    border-color: #b88932;
    background: linear-gradient(145deg, #fffaf0, #f7ecd5);
    box-shadow:
        0 5px 15px rgba(180, 139, 58, .14),
        inset 0 0 0 1px rgba(255,255,255,.7);
}

.modal-bale-option-title {
    display: block;
    margin-bottom: 4px;
    color: #76551f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .8px;
}

.modal-bale-option strong {
    display: block;
    margin-bottom: 3px;
    color: #2f2923;
    font-size: 18px;
    line-height: 1.2;
}

.modal-bale-option small {
    display: block;
    color: #817566;
    font-size: 11px;
    line-height: 1.35;
}

.modal-quantity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 16px;
    padding: 11px 13px;
    border: 1px solid #e7dccd;
    border-radius: 11px;
    background: #fff;
}

.modal-quantity-row label {
    color: #5b5043;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .7px;
}

.modal-quantity-row input {
    width: 78px;
    height: 38px;
    padding: 5px 9px;
    border: 1px solid #d9c9b4;
    border-radius: 9px;
    outline: none;
    background: #fffdf9;
    color: #342d26;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}

.modal-quantity-row input:focus {
    border-color: #b88932;
    box-shadow: 0 0 0 3px rgba(184,137,50,.10);
}

.modal-purchase-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.modal-purchase-actions button {
    min-height: 47px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .45px;
    cursor: pointer;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        filter .16s ease;
}

.modal-purchase-actions button:hover {
    transform: translateY(-1px);
}

.modal-purchase-actions button:active {
    transform: translateY(2px) scale(.985);
}

.modal-purchase-actions button:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.modal-add-cart {
    border: 1px solid #c8a45f;
    background: linear-gradient(145deg, #fffaf0, #f4e7c9);
    color: #76551f;
    box-shadow: 0 4px 12px rgba(120,90,35,.08);
}

.modal-buy-now {
    border: 1px solid #4f7f58;
    background: linear-gradient(145deg, #f4faf4, #e3f1e5);
    color: #35623e;
    box-shadow: 0 4px 12px rgba(53,98,62,.08);
}

.modal-chat {
    margin-top: 10px;
}

@media (max-width: 600px) {

    .modal-bale-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .modal-bale-option {
        padding: 12px;
    }

    .modal-bale-option strong {
        font-size: 17px;
    }

    .modal-purchase-actions {
        grid-template-columns: 1fr;
    }

    .modal-purchase-actions button {
        min-height: 45px;
    }

    .modal-quantity-row {
        margin-top: 12px;
    }
}


/* =========================================
   PREMIUM PRODUCT MODAL IMAGE FRAME
   ========================================= */

.product-modal-image-wrap {
    position: relative;
    padding: 14px;
    box-sizing: border-box;
    background: linear-gradient(145deg, #f8f3eb, #eee5d7);
    border: 1px solid rgba(184, 137, 50, .28);
    border-radius: 20px;
    box-shadow:
        0 10px 30px rgba(74, 54, 25, .10),
        inset 0 0 0 1px rgba(255, 255, 255, .72);
}

.product-modal-image {
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    border: 1px solid rgba(184, 137, 50, .22);
    border-radius: 15px;
    background: #fffdf9;
    overflow: hidden;
    box-shadow:
        0 5px 18px rgba(64, 48, 25, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .85);
}

.product-modal-image img {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    background: #fffdf9;
}

/* Cleaner gallery thumbnails */
.modal-gallery-image {
    border: 1px solid #dfd2bd;
    border-radius: 10px;
    padding: 3px;
    background: #fffdf9;
    box-sizing: border-box;
    transition:
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;
}

.modal-gallery-image:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.modal-gallery-image.active {
    border: 2px solid #b88932;
    box-shadow: 0 3px 10px rgba(137, 96, 28, .16);
}

/* Premium gallery arrows */
.modal-gallery-arrow {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 50%;
    background: rgba(255, 253, 249, .88);
    color: #725323;
    box-shadow: 0 4px 14px rgba(55, 40, 18, .14);
    backdrop-filter: blur(5px);
}

.modal-gallery-arrow:hover {
    background: #fffdf9;
    color: #9a7132;
    box-shadow: 0 6px 18px rgba(55, 40, 18, .20);
}

/* Keep mobile frame comfortable */
@media (max-width: 700px) {

    .product-modal-image-wrap {
        padding: 10px;
        border-radius: 17px;
    }

    .product-modal-image {
        border-radius: 13px;
    }

    .product-modal-image img {
        border-radius: 12px;
    }

    .modal-gallery-arrow {
        width: 40px;
        height: 40px;
    }

}


/* =========================================
   PREMIUM VIEW ALL PRODUCT POPUP
   ========================================= */

.view-all-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(35, 27, 18, .62);
    backdrop-filter: blur(6px);
}

.view-all-modal.show {
    display: flex;
}

.view-all-modal-box {
    width: min(1180px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fffdf9;
    border: 1px solid rgba(184, 137, 50, .28);
    border-radius: 22px;
    box-shadow:
        0 24px 70px rgba(35, 25, 12, .24),
        inset 0 0 0 1px rgba(255, 255, 255, .8);
}

.view-all-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px 18px;
    border-bottom: 1px solid #eee5d8;
    background:
        linear-gradient(
            135deg,
            #fffdf9,
            #f8f1e5
        );
    flex: 0 0 auto;
}

.view-all-modal-kicker {
    display: block;
    margin-bottom: 5px;
    color: #a2762f;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.view-all-modal-header h2 {
    margin: 0;
    color: #34291e;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 27px;
    line-height: 1.15;
    letter-spacing: .2px;
}

.view-all-modal-header p {
    margin: 6px 0 0;
    color: #8a7967;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.view-all-modal-close {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddcfbb;
    border-radius: 50%;
    background: #fffdf9;
    color: #70542a;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(75, 55, 25, .08);
    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.view-all-modal-close:hover {
    transform: rotate(90deg);
    background: #f8f0e3;
    box-shadow: 0 5px 16px rgba(75, 55, 25, .14);
}

.view-all-modal-products {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 24px;
    box-sizing: border-box;

    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            minmax(190px, 1fr)
        );
    grid-auto-rows: max-content;
    align-items: start;
    gap: 18px;

    overscroll-behavior: contain;
}

.view-all-modal-products .product-card {
    min-width: 0;
    align-self: start;
}

body.view-all-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {

    .view-all-modal {
        padding: 8px;
        align-items: flex-end;
    }

    .view-all-modal-box {
        width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 0 0;
    }

    .view-all-modal-header {
        padding: 18px 16px 15px;
    }

    .view-all-modal-header h2 {
        font-size: 21px;
    }

    .view-all-modal-header p {
        font-size: 11px;
    }

    .view-all-modal-close {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        font-size: 22px;
    }

    .view-all-modal-products {
        padding: 14px;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

}


/* =========================================
   VIEW ALL PAGINATION
   ========================================= */

.view-all-modal-pagination {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 20px 18px;
    border-top: 1px solid #eee5d8;
    background: #fffdf9;
}

.view-all-modal-pagination button {
    border: 1px solid rgba(184, 137, 50, .45);
    border-radius: 9px;
    background: #fff;
    color: #8d682f;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: .2s;
}

.view-all-modal-pagination button:hover:not(:disabled) {
    background: #f8f1e5;
    transform: translateY(-1px);
}

.view-all-modal-pagination button:disabled {
    opacity: .45;
    cursor: default;
}

.view-all-modal-pagination span {
    min-width: 90px;
    text-align: center;
    color: #5b4b38;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 700px) {

    .view-all-modal-pagination {
        gap: 8px;
        padding: 11px 12px 14px;
    }

    .view-all-modal-pagination button {
        padding: 8px 12px;
        font-size: 12px;
    }

    .view-all-modal-pagination span {
        min-width: 76px;
        font-size: 12px;
    }

}
/* =========================================
   PRODUCT CODE / NAME READABILITY
   ========================================= */

.product-info h3 {
    margin: 0 0 8px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    color: #29231d;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    min-height: 40px;
    max-height: 40px;
    letter-spacing: .1px;
}

@media (max-width: 700px) {
    .product-info h3 {
        font-size: 14px;
        line-height: 1.25;
        min-height: 35px;
        max-height: 35px;
    }
}



/* =========================================
   FLOATING FACEBOOK MESSENGER BUTTON
   ========================================= */

.chat-admin {
    position: fixed !important;
    right: 22px !important;
    bottom: 82px !important;

    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 3px solid rgba(255,255,255,.92) !important;
    border-radius: 50% !important;

    background:
        linear-gradient(
            145deg,
            #36a8ff 0%,
            #1687f0 48%,
            #0068d9 100%
        ) !important;

    color: #fff !important;

    box-shadow:
        0 6px 20px rgba(0, 91, 190, .30),
        0 2px 7px rgba(0,0,0,.16) !important;

    text-decoration: none !important;

    z-index: 3000 !important;

    right: 22px !important;
    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

.chat-admin:hover {
    right: 22px !important;
    transform: translateY(-3px) scale(1.04) !important;

    box-shadow:
        0 9px 26px rgba(0, 91, 190, .38),
        0 3px 9px rgba(0,0,0,.18) !important;
}

.chat-admin::before {
    content: "➤" !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    border: 2px solid rgba(255,255,255,.96) !important;
    border-radius: 50% 50% 50% 12% !important;

    background: rgba(255,255,255,.08) !important;

    color: #fff !important;
    font-size: 19px !important;
    font-weight: 900 !important;

    transform: rotate(-18deg) !important;
    box-sizing: border-box !important;
}

.chat-admin::after {
    content: "Chat with Admin" !important;

    position: absolute !important;
    right: 68px !important;
    top: 50% !important;

    transform: translateY(-50%) translateX(6px) !important;

    padding: 9px 13px !important;

    border-radius: 9px !important;

    background: rgba(35,35,35,.94) !important;
    color: #fff !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;

    opacity: 0 !important;
    visibility: hidden !important;

    box-shadow: 0 5px 16px rgba(0,0,0,.20) !important;

    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease !important;

    pointer-events: none !important;
}

.chat-admin:hover::after {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(0) !important;
}

.chat-admin span {
    display: none !important;
}

@media (max-width: 700px) {

    .chat-admin {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;

        right: 14px !important;
        bottom: 72px !important;

        border-width: 2px !important;
    }

    .chat-admin:hover {
        right: 14px !important;
    }

    .chat-admin::before {
        width: 30px !important;
        height: 30px !important;
        font-size: 17px !important;
    }

    .chat-admin::after {
        display: none !important;
    }
}


/* =========================================
   REAL FACEBOOK MESSENGER FLOATING ICON
   ========================================= */

.chat-admin::before,
.chat-admin::after {
    content: none !important;
    display: none !important;
}

.chat-admin {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;

    padding: 0 !important;
    box-sizing: border-box !important;

    right: 20px !important;
    bottom: 82px !important;

    border: none !important;
    border-radius: 50% !important;

    background: transparent !important;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, .18) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: visible !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease !important;
}

.chat-admin:hover {
    right: 20px !important;
    transform: translateY(-3px) scale(1.05) !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .24) !important;
}

.messenger-floating-icon {
    display: block !important;

    width: 64px !important;
    height: 64px !important;

    max-width: 64px !important;
    max-height: 64px !important;

    object-fit: contain !important;

    border: none !important;
    border-radius: 50% !important;

    background: transparent !important;
}

.chat-admin span {
    display: none !important;
}

@media (max-width: 700px) {

    .chat-admin {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;

        right: 12px !important;
        bottom: 70px !important;
    }

    .chat-admin:hover {
        right: 12px !important;
    }

    .messenger-floating-icon {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }
}/* =========================================
   PREMIUM MESSENGER CHAT WIDGET
   (replaces old floating button + hidden state)
   ========================================= */

.chat-widget {
    position: fixed !important;
    right: 20px !important;
    bottom: 78px !important;
    z-index: 3000 !important;
    font-family: inherit;
}

/* ---- Floating Messenger button ---- */

.chat-admin {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 62px !important;
    height: 62px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    cursor: pointer !important;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .22),
        0 2px 6px rgba(0, 0, 0, .12) !important;

    transition: transform .2s ease, box-shadow .2s ease !important;

    animation: chatPulse 2.6s ease-out infinite;
}

.chat-admin:hover {
    right: auto !important;
    transform: translateY(-3px) scale(1.06) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .28),
        0 3px 9px rgba(0, 0, 0, .15) !important;
}

.chat-admin::before {
    content: "" !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(13, 111, 240, .45) !important;
    animation: chatRing 2.6s ease-out infinite;
    pointer-events: none !important;
}

@keyframes chatPulse {
    0%, 100% { box-shadow: 0 6px 20px rgba(13, 111, 240, .30), 0 2px 6px rgba(0,0,0,.12); }
    50% { box-shadow: 0 6px 26px rgba(13, 111, 240, .48), 0 2px 6px rgba(0,0,0,.12); }
}

@keyframes chatRing {
    0% { transform: scale(1); opacity: .8; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.messenger-floating-icon {
    display: block !important;
    width: 62px !important;
    height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
    object-fit: contain !important;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
}

/* Notification badge */

.chat-admin-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;

    min-width: 20px !important;
    height: 20px !important;
    padding: 0 5px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #e02f2f !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
}

.chat-admin-badge.seen {
    display: none !important;
}

/* ---- Popup card ---- */

.chat-widget-popup {
    position: absolute !important;
    right: 0 !important;
    bottom: 76px !important;

    width: 300px !important;
    max-width: calc(100vw - 32px) !important;

    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #eadfcd !important;
    box-shadow:
        0 18px 50px rgba(40, 30, 18, .22),
        0 4px 14px rgba(40, 30, 18, .10) !important;

    opacity: 0 !important;
    transform: translateY(14px) scale(.96) !important;
    transform-origin: bottom right !important;
    pointer-events: none !important;

    transition:
        opacity .22s ease,
        transform .22s ease !important;

    overflow: hidden !important;
}

.chat-widget-popup.open {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.chat-widget-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;

    width: 26px !important;
    height: 26px !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.25) !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    z-index: 2 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.chat-widget-close:hover {
    background: rgba(255,255,255,.4) !important;
}

.chat-widget-head {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 15px 16px !important;
    background: linear-gradient(135deg, #3d3329 0%, #57493a 100%) !important;
    color: #fff !important;
}

.chat-widget-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #fff !important;
    object-fit: contain !important;
    padding: 3px !important;
}

.chat-widget-head-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.chat-widget-head-text strong {
    font-size: 14px !important;
    letter-spacing: .4px !important;
}

.chat-widget-head-text span {
    font-size: 11px !important;
    color: rgba(255,255,255,.82) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.chat-widget-dot {
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #5fd07a !important;
    box-shadow: 0 0 0 2px rgba(95, 208, 122, .25) !important;
    display: inline-block !important;
}

.chat-widget-body {
    padding: 15px 16px 6px !important;
}

.chat-widget-msg {
    margin: 0 0 10px !important;
    background: #f6f1e8 !important;
    border: 1px solid #eadfcd !important;
    border-radius: 12px 12px 12px 3px !important;
    padding: 11px 13px !important;
    font-size: 12.8px !important;
    line-height: 1.6 !important;
    color: #3d3329 !important;
}

.chat-wave {
    display: inline-block !important;
    animation: chatWave 1.6s ease-in-out infinite !important;
    transform-origin: 70% 70% !important;
}

@keyframes chatWave {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(14deg); }
    75% { transform: rotate(-8deg); }
}

.chat-widget-sub {
    margin: 0 0 8px !important;
    font-size: 11.5px !important;
    line-height: 1.55 !important;
    color: #8a8178 !important;
}

.chat-widget-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;

    margin: 10px 14px 14px !important;
    padding: 12px 14px !important;

    background: linear-gradient(135deg, #1e88f7 0%, #0d6ff0 55%, #0b5ed7 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    text-decoration: none !important;
    border-radius: 11px !important;

    box-shadow:
        0 6px 16px rgba(13, 111, 240, .35),
        inset 0 1px 0 rgba(255,255,255,.22) !important;

    transition: transform .15s ease, box-shadow .15s ease !important;
}

.chat-widget-cta:hover {
    transform: translateY(-1px) !important;
    box-shadow:
        0 9px 22px rgba(13, 111, 240, .42),
        inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.chat-widget-cta-icon {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
}

/* Bubble tail */

.chat-widget-popup::after {
    content: "" !important;
    position: absolute !important;
    bottom: -7px !important;
    right: 24px !important;
    width: 14px !important;
    height: 14px !important;
    background: #ffffff !important;
    border-right: 1px solid #eadfcd !important;
    border-bottom: 1px solid #eadfcd !important;
    transform: rotate(45deg) !important;
}

/* =========================================
   WAVE HELLO BUBBLE
   (pops up beside the Messenger button,
    waves hello, hides, comes back)
   ========================================= */

.chat-wave-bubble {
    position: fixed !important;
    right: 92px !important;
    bottom: 82px !important;

    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    background: #ffffff !important;
    border: 1px solid #eadfcd !important;
    border-radius: 14px 14px 4px 14px !important;
    box-shadow:
        0 10px 30px rgba(40, 30, 18, .18),
        0 3px 9px rgba(40, 30, 18, .10) !important;

    padding: 10px 16px 10px 12px !important;
    white-space: nowrap !important;

    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) scale(.85) !important;
    transform-origin: bottom right !important;

    transition:
        opacity .35s ease,
        transform .35s cubic-bezier(.34, 1.56, .64, 1),
        visibility 0s linear .35s !important;

    pointer-events: none !important;
    z-index: 2 !important;
}

.chat-wave-bubble.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    transition:
        opacity .35s ease,
        transform .35s cubic-bezier(.34, 1.56, .64, 1) !important;
}

.chat-wave-hand {
    display: inline-block !important;
    font-size: 22px !important;
    line-height: 1 !important;
    transform-origin: 70% 70% !important;
    animation: chatWaveHand 1.1s ease-in-out infinite !important;
}

@keyframes chatWaveHand {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(16deg); }
    45% { transform: rotate(-10deg); }
    70% { transform: rotate(12deg); }
}

.chat-wave-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #3d3329 !important;
    letter-spacing: .2px !important;
}

.chat-wave-bubble::after {
    content: "" !important;
    position: absolute !important;
    bottom: 6px !important;
    right: -6px !important;
    width: 12px !important;
    height: 12px !important;
    background: #ffffff !important;
    border-right: 1px solid #eadfcd !important;
    border-top: 1px solid #eadfcd !important;
    transform: rotate(45deg) !important;
}

/* Mobile */

@media (max-width: 700px) {

    .chat-widget {
        right: 12px !important;
        bottom: 70px !important;
    }

    .chat-admin {
        width: 54px !important;
        height: 54px !important;
        right: auto !important;
        bottom: auto !important;
    }

    .messenger-floating-icon {
        width: 54px !important;
        height: 54px !important;
        max-width: 54px !important;
        max-height: 54px !important;
    }

    .chat-widget-popup {
        width: min(320px, calc(100vw - 24px)) !important;
        bottom: 66px !important;
    }
}






/* ===== CUSTOMER ACCOUNT LOGIN FORM POLISH ===== */
.facebook-account-panel{
  width:min(430px,calc(100% - 28px))!important;
  max-height:min(92vh,680px)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:34px 32px 30px!important;
  box-sizing:border-box!important;
}
.facebook-account-panel h3{
  margin:0 0 7px!important;
  font-size:27px!important;
  line-height:1.15!important;
}
#globalFacebookStatus{
  max-width:330px!important;
  margin:0 auto 24px!important;
  font-size:13px!important;
  line-height:1.55!important;
}
.facebook-account-panel #customerAccountLoginView,
.facebook-account-panel #customerAccountRegisterView{
  width:100%!important;
  text-align:left!important;
}
.facebook-account-panel label{
  display:block!important;
  width:100%!important;
  margin:0 0 14px!important;
  color:#4a4036!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.35px!important;
}
.facebook-account-panel input,
.facebook-account-panel textarea,
.facebook-account-panel select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  margin-top:7px!important;
  padding:12px 14px!important;
  box-sizing:border-box!important;
  border:1px solid #d9cdbb!important;
  border-radius:10px!important;
  outline:none!important;
  background:#fff!important;
  color:#30271f!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;
  line-height:1.35!important;
}
.facebook-account-panel input:focus,
.facebook-account-panel textarea:focus,
.facebook-account-panel select:focus{
  border-color:#b88932!important;
  box-shadow:0 0 0 3px rgba(184,137,50,.12)!important;
}
.facebook-account-panel .global-facebook-login-btn,
.facebook-account-panel #customerCreateAccountBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:46px!important;
  margin:8px 0 0!important;
  padding:12px 18px!important;
  box-sizing:border-box!important;
  border-radius:11px!important;
  font-size:14px!important;
  font-weight:800!important;
}
.facebook-account-panel .global-facebook-logout-btn{
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:46px!important;
  margin:8px 0 0!important;
  padding:12px 18px!important;
  box-sizing:border-box!important;
  border-radius:11px!important;
  font-size:14px!important;
  font-weight:800!important;
}
.facebook-account-panel .global-facebook-logout-btn[style*="display: none"]{
  display:none!important;
}
.facebook-account-panel #customerShowRegisterBtn,
.facebook-account-panel #customerShowLoginBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:42px!important;
  margin:10px 0 0!important;
  padding:10px 16px!important;
  box-sizing:border-box!important;
  border:1px solid #d8c9b2!important;
  border-radius:10px!important;
  background:#faf6ef!important;
  color:#73552a!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.35px!important;
  cursor:pointer!important;
}
.facebook-account-panel #customerShowRegisterBtn:hover,
.facebook-account-panel #customerShowLoginBtn:hover{
  background:#f3eadb!important;
  border-color:#c8ad7e!important;
}
@media(max-width:700px){
  .facebook-account-modal{
    padding:12px!important;
    align-items:center!important;
    overflow-y:auto!important;
    box-sizing:border-box!important;
  }
  .facebook-account-panel{
    width:min(430px,calc(100vw - 24px))!important;
    max-height:calc(100dvh - 24px)!important;
    padding:31px 20px 22px!important;
    border-radius:20px!important;
  }
  .facebook-account-panel h3{font-size:23px!important}
  .facebook-account-avatar{
    width:72px!important;height:72px!important;
    margin:3px auto 15px!important;font-size:30px!important;
  }
  #globalFacebookStatus{margin-bottom:20px!important;font-size:12.5px!important}
  .facebook-account-panel label{font-size:11.5px!important;margin-bottom:12px!important}
  .facebook-account-panel input,
  .facebook-account-panel textarea,
  .facebook-account-panel select{
    padding:11px 12px!important;font-size:14px!important;border-radius:9px!important;
  }
}

/* ===== CUSTOMER ORDERS VISIBILITY OVERRIDE ===== */
#mainOrdersBtn {
    display: none !important;
}

#mainOrdersBtn.customer-orders-visible {
    display: inline-flex !important;
}

/* =========================================================
   IMGLAM PREMIUM CUSTOMER NOTIFICATION
   ========================================================= */

#imglamNotificationOverlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.68) !important;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    z-index: 999999 !important;
}

#imglamNotificationOverlay.show {
    display: flex !important;
}

.imglam-notification-card {
    position: relative;
    width: min(470px, 94vw);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 38px 32px 30px;
    text-align: center;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fffafb 72%,
        #fff0f6 100%
    );
    border: 1px solid rgba(205, 25, 91, 0.28);
    border-radius: 26px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    animation: imglamNotificationIn 0.32s ease-out;
}

.imglam-notification-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #fbe8f0;
    color: #222;
    font-size: 23px;
    line-height: 36px;
    cursor: pointer;
    transition: 0.2s ease;
}

.imglam-notification-close:hover {
    background: #f5d2df;
    transform: rotate(90deg);
}

.imglam-notification-logo {
    margin-bottom: 18px;
}

.imglam-notification-logo strong {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 31px;
    line-height: 1;
    letter-spacing: 7px;
    color: #111;
    font-weight: 800;
}

.imglam-notification-logo span {
    display: block;
    margin-top: 7px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    letter-spacing: 6px;
    color: #222;
}

.imglam-notification-logo::after {
    content: "";
    display: block;
    width: 145px;
    height: 2px;
    margin: 9px auto 0;
    background: linear-gradient(
        90deg,
        transparent,
        #d4145a,
        transparent
    );
}

.imglam-notification-icon {
    width: 82px;
    height: 82px;
    margin: 12px auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        #e91e63,
        #c2185b
    );
    box-shadow:
        0 0 0 11px rgba(225, 29, 92, 0.08),
        0 12px 30px rgba(194, 24, 91, 0.28);
    color: #fff;
    font-size: 46px;
    font-weight: 700;
    animation: imglamCheckPop 0.45s ease-out;
}

.imglam-notification-title {
    margin: 0;
    color: #c2185b;
    font-family: "Brush Script MT", "Segoe Script", cursive;
    font-size: 43px;
    line-height: 1.05;
    font-weight: 700;
}

.imglam-notification-subtitle {
    margin: 9px 0 0;
    color: #111;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 4px;
}

.imglam-notification-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 18px auto;
    color: #d4145a;
}

.imglam-notification-divider::before,
.imglam-notification-divider::after {
    content: "";
    width: 70px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #e68aaa
    );
}

.imglam-notification-divider::after {
    background: linear-gradient(
        90deg,
        #e68aaa,
        transparent
    );
}

.imglam-notification-message {
    margin: 0 auto;
    max-width: 360px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.imglam-notification-button {
    width: min(300px, 100%);
    min-height: 54px;
    margin: 24px auto 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        #e91e63,
        #c2185b
    );
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow:
        0 12px 26px rgba(194, 24, 91, 0.28);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.imglam-notification-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 16px 32px rgba(194, 24, 91, 0.35);
}

.imglam-notification-footer {
    margin-top: 21px;
    color: #777;
    font-size: 10px;
    letter-spacing: 4px;
}

.imglam-notification-footer::after {
    content: " ♥";
    color: #d4145a;
    font-size: 14px;
}

@keyframes imglamNotificationIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes imglamCheckPop {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 520px) {
    #imglamNotificationOverlay {
        padding: 14px !important;
    }

    .imglam-notification-card {
        width: 100%;
        padding: 34px 21px 25px;
        border-radius: 22px;
    }

    .imglam-notification-logo strong {
        font-size: 25px;
        letter-spacing: 5px;
    }

    .imglam-notification-title {
        font-size: 36px;
    }

    .imglam-notification-subtitle {
        font-size: 13px;
        letter-spacing: 3px;
    }

    .imglam-notification-message {
        font-size: 15px;
    }
}


/* ===== IMGLAM COMPACT ADD TO CART POPUP ===== */

#imglamCartNotificationOverlay {
    position: fixed !important;
    inset: 0 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    background: rgba(0,0,0,.55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999998 !important;
}

#imglamCartNotificationOverlay.show {
    display: flex !important;
}

.imglam-cart-notification {
    position: relative;
    width: min(520px, 92vw);
    min-height: 130px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 22px 22px 24px;
    box-sizing: border-box;
    background: linear-gradient(135deg,#fff,#fff5f9);
    border: 1px solid rgba(212,20,90,.25);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.32);
    animation: imglamCartPopupIn .25s ease-out;
}

.imglam-cart-close {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #f9e5ed;
    color: #333;
    font-size: 19px;
    cursor: pointer;
}

.imglam-cart-icon {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg,#e91e63,#c2185b);
    color: #fff;
    font-size: 28px;
    box-shadow: 0 0 0 7px rgba(225,29,92,.08);
}

.imglam-cart-icon span {
    position: absolute;
    right: -3px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #c2185b;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 2px 7px rgba(0,0,0,.18);
}

.imglam-cart-content {
    flex: 1;
    min-width: 0;
}

.imglam-cart-title {
    color: #c2185b;
    font-family: "Brush Script MT","Segoe Script",cursive;
    font-size: 29px;
    font-weight: 700;
    line-height: 1;
}

.imglam-cart-product {
    margin-top: 6px;
    color: #111;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.imglam-cart-message {
    margin-top: 3px;
    color: #666;
    font-size: 12px;
}

.imglam-cart-ok {
    flex: 0 0 76px;
    min-height: 40px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg,#e91e63,#c2185b);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 7px 16px rgba(194,24,91,.22);
    transition: .2s ease;
}

.imglam-cart-ok:hover {
    transform: translateY(-1px);
}

@keyframes imglamCartPopupIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width:560px) {
    .imglam-cart-notification {
        width: 94vw;
        gap: 12px;
        padding: 20px 15px;
    }

    .imglam-cart-icon {
        flex: 0 0 52px;
        width: 52px;
        height: 52px;
        font-size: 23px;
    }

    .imglam-cart-icon span {
        width: 19px;
        height: 19px;
        font-size: 10px;
    }

    .imglam-cart-title {
        font-size: 24px;
    }

    .imglam-cart-product {
        font-size: 12px;
    }

    .imglam-cart-message {
        font-size: 10px;
    }

    .imglam-cart-ok {
        flex: 0 0 58px;
        min-height: 36px;
        font-size: 11px;
    }
}


/* ===== IMGLAM POPUP THEME OVERRIDE ===== */

#imglamNotificationOverlay .imglam-notification-card {
    background: linear-gradient(180deg,#fffdf9 0%,#ffffff 75%,#f7f1e7 100%) !important;
    border-color: #c5a15a !important;
}

#imglamNotificationOverlay .imglam-notification-close {
    background: #f3ede2 !important;
    color: #171717 !important;
}

#imglamNotificationOverlay .imglam-notification-close:hover {
    background: #e8dcc8 !important;
}

#imglamNotificationOverlay .imglam-notification-logo strong {
    color: #111111 !important;
}

#imglamNotificationOverlay .imglam-notification-logo span {
    color: #292929 !important;
}

#imglamNotificationOverlay .imglam-notification-logo::after {
    background: linear-gradient(90deg,transparent,#936d2b,transparent) !important;
}

#imglamNotificationOverlay .imglam-notification-icon {
    background: linear-gradient(135deg,#a17a32,#805c20) !important;
    box-shadow:
        0 0 0 11px rgba(147,109,43,.10),
        0 12px 30px rgba(96,69,23,.22) !important;
}

#imglamNotificationOverlay .imglam-notification-title {
    color: #936d2b !important;
}

#imglamNotificationOverlay .imglam-notification-subtitle {
    color: #171717 !important;
}

#imglamNotificationOverlay .imglam-notification-divider {
    color: #936d2b !important;
}

#imglamNotificationOverlay .imglam-notification-divider::before,
#imglamNotificationOverlay .imglam-notification-divider::after {
    background: linear-gradient(90deg,transparent,#c5a15a) !important;
}

#imglamNotificationOverlay .imglam-notification-divider::after {
    background: linear-gradient(90deg,#c5a15a,transparent) !important;
}

#imglamNotificationOverlay .imglam-notification-message {
    color: #444444 !important;
}

#imglamNotificationOverlay .imglam-notification-button {
    background: linear-gradient(135deg,#a17a32,#805c20) !important;
    box-shadow: 0 12px 26px rgba(96,69,23,.22) !important;
}

#imglamNotificationOverlay .imglam-notification-button:hover {
    box-shadow: 0 16px 32px rgba(96,69,23,.30) !important;
}

#imglamNotificationOverlay .imglam-notification-footer {
    color: #776d5d !important;
}

#imglamNotificationOverlay .imglam-notification-footer::after {
    color: #936d2b !important;
}

/* ===== IMGLAM CART POPUP GOLD THEME ===== */

#imglamCartNotificationOverlay {
    background: rgba(20,18,14,.58) !important;
}

#imglamCartNotificationOverlay .imglam-cart-notification {
    background: linear-gradient(135deg,#fffdf9,#f8f2e8) !important;
    border-color: #c5a15a !important;
    box-shadow: 0 20px 50px rgba(45,35,20,.30) !important;
}

#imglamCartNotificationOverlay .imglam-cart-close {
    background: #f0e8da !important;
    color: #171717 !important;
}

#imglamCartNotificationOverlay .imglam-cart-icon {
    background: linear-gradient(135deg,#a17a32,#805c20) !important;
    box-shadow: 0 0 0 7px rgba(147,109,43,.09) !important;
}

#imglamCartNotificationOverlay .imglam-cart-icon span {
    color: #805c20 !important;
}

#imglamCartNotificationOverlay .imglam-cart-title {
    color: #936d2b !important;
}

#imglamCartNotificationOverlay .imglam-cart-product {
    color: #171717 !important;
}

#imglamCartNotificationOverlay .imglam-cart-message {
    color: #756b5d !important;
}

#imglamCartNotificationOverlay .imglam-cart-ok {
    background: linear-gradient(135deg,#a17a32,#805c20) !important;
    box-shadow: 0 7px 16px rgba(96,69,23,.22) !important;
}

#imglamCartNotificationOverlay .imglam-cart-ok:hover {
    box-shadow: 0 9px 20px rgba(96,69,23,.30) !important;
}

/* VIEW ALL PRODUCT CARD NAME VISIBILITY */
.view-all-modal-products .product-card {
    height: auto !important;
    max-height: none !important;
}

.view-all-modal-products .product-info {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.view-all-modal-products .product-info h3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ===== IMGLAM PREMIUM NEW ARRIVALS ===== */

#new-arrivals{
    position:relative;
    padding-top:64px !important;
    padding-bottom:72px !important;
    background:
        linear-gradient(
            to bottom,
            #fbf9f5 0%,
            #f8f4ed 100%
        );
}

#new-arrivals .section-heading,
#new-arrivals .section-title{
    position:relative;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    margin-bottom:36px !important;
}

#new-arrivals .section-heading > div:first-child,
#new-arrivals .section-title > div:first-child{
    width:100%;
    text-align:center !important;
}

#new-arrivals .section-kicker{
    margin-bottom:8px;
    font-size:10px;
    font-weight:800;
    letter-spacing:2.8px;
    text-transform:uppercase;
    color:#9a7740;
}

#new-arrivals h2{
    margin:0 !important;
    font-family:Georgia,"Times New Roman",serif;
    font-size:38px !important;
    line-height:1.12;
    font-weight:700;
    letter-spacing:.2px;
    color:#2f261f;
}

#new-arrivals .section-heading h2::after,
#new-arrivals .section-title h2::after{
    content:"";
    display:block;
    width:46px;
    height:2px;
    margin:13px auto 0;
    background:#b38a4a;
    border-radius:999px;
}

#new-arrivals .section-heading p,
#new-arrivals .section-title p{
    margin:10px auto 0 !important;
    max-width:700px;
    color:#7b6d60;
    font-size:14px;
    line-height:1.7;
}

#new-arrivals .section-heading::after,
#new-arrivals .section-title::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-18px;
    width:min(180px,28vw);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(
        to right,
        transparent,
        #d8c8b1,
        transparent
    );
}

#new-arrivals #newArrivalsViewAll{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    color:#8a672f;
    font-size:12px;
    font-weight:700;
    letter-spacing:.35px;
    text-decoration:none;
    transition:
        color .2s ease,
        transform .2s ease;
}

#new-arrivals #newArrivalsViewAll:hover{
    color:#5f4522;
    transform:translateY(-50%) translateX(-2px);
}

#new-arrivals .products{
    margin-top:4px;
    gap:22px !important;
}

#new-arrivals .product-card{
    box-shadow:0 8px 24px rgba(55,42,28,.07);
    border-color:#e7dfd4;
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

#new-arrivals .product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(55,42,28,.12);
    border-color:#d4c0a1;
}

@media(max-width:700px){

    #new-arrivals{
        padding-top:48px !important;
        padding-bottom:56px !important;
    }

    #new-arrivals .section-heading,
    #new-arrivals .section-title{
        margin-bottom:28px !important;
    }

    #new-arrivals h2{
        font-size:28px !important;
    }

    #new-arrivals .section-heading p,
    #new-arrivals .section-title p{
        max-width:330px;
        font-size:12.5px;
        line-height:1.6;
    }

    #new-arrivals #newArrivalsViewAll{
        right:4px;
        top:auto;
        bottom:-8px;
        transform:none;
        font-size:10px;
    }

    #new-arrivals #newArrivalsViewAll:hover{
        transform:translateX(-2px);
    }

    #new-arrivals .products{
        gap:11px !important;
        margin-top:12px;
    }

}


/* ===== IMGLAM BRAND LOGO IMAGE ===== */

.logo-circle{
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    overflow:hidden;
    flex-shrink:0;
}

.logo-circle img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
}

@media (max-width:700px){

    .logo-circle{
        padding:0 !important;
        border:none !important;
        background:transparent !important;
    }

    .logo-circle img{
        width:100%;
        height:100%;
        object-fit:contain;
    }

}

/* =========================================
   CHAT WIDGET — FINAL OVERRIDES
   (wins over every legacy .chat-admin rule)
   ========================================= */

.chat-widget {
    position: fixed !important;
    right: 20px !important;
    bottom: 78px !important;
    z-index: 3000 !important;
}

.chat-admin {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    top: auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 62px !important;
    min-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;

    padding: 0 !important;
    gap: 0 !important;

    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: inherit !important;
    font-size: 0 !important;
    text-decoration: none !important;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .22),
        0 2px 6px rgba(0, 0, 0, .12) !important;

    transition: transform .2s ease, box-shadow .2s ease !important;
}

.chat-admin::after {
    content: none !important;
}

/* CRITICAL: never clip the Messenger bubble tail ("nguso") */
.messenger-floating-icon {
    border-radius: 0 !important;
    overflow: visible !important;
    clip-path: none !important;
}

.chat-admin:hover {
    right: auto !important;
    transform: translateY(-3px) scale(1.06) !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .28),
        0 3px 9px rgba(0, 0, 0, .15) !important;
}

@media (max-width: 700px) {

    /* Mobile: itago ang floating widget — ang bottom-nav Chat
       (may totoong Messenger icon) ang gamitin, para hindi malito
       ang customer sa dalawang magkapatong na Messenger button. */
    .chat-widget {
        display: none !important;
    }

    /* Wave bubble: itaas ng bottom nav (68px) — naka-anchored
       sa kanang bahagi kung saan naroon ang Chat item. */
    .chat-wave-bubble {
        right: 12px !important;
        bottom: 84px !important;
    }

    .chat-wave-bubble::after {
        bottom: -6px !important;
        right: 22px !important;
    }

    .chat-wave-text {
        font-size: 12px !important;
    }
}

/* =========================================
   MOBILE BOTTOM NAV — MESSENGER CHAT ITEM
   ========================================= */

.mobile-chat {
    text-decoration: none !important;
    color: #555 !important;
    transition: transform .15s ease !important;
}

.mobile-chat:active {
    transform: scale(.94) !important;
}

.mobile-chat .mobile-chat-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 30px !important;
    height: 30px !important;
    position: relative !important;
}

/* CRITICAL: never clip the Messenger bubble tail ("nguso") */
.mobile-chat .mobile-chat-icon {
    display: block !important;

    width: 27px !important;
    height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;

    object-fit: contain !important;

    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;

    filter: drop-shadow(0 2px 5px rgba(13, 111, 240, .38)) !important;
    transition: transform .15s ease !important;
}

.mobile-chat:hover .mobile-chat-icon,
.mobile-chat:active .mobile-chat-icon {
    transform: scale(1.1) !important;
}

/* ===== MOST VIEWED PRODUCTS ===== */

#mostViewedProducts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.most-viewed-item {
    position: relative;
    min-width: 0;
}

.most-viewed-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;
    padding: 6px 13px;

    margin-bottom: 8px;

    border-radius: 999px;

    background: #3b2a20;
    color: #fff;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;

    box-sizing: border-box;
}

.most-viewed-item .product-card {
    width: 100%;
}

@media (max-width: 700px) {

    #mostViewedProducts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .most-viewed-rank {
        min-height: 27px;
        padding: 5px 10px;
        margin-bottom: 6px;
        font-size: 10px;
    }

}


/* ============================================================
   WATCH & SHOP  (customer website)
   Connects to the Marketing Panel video_contents records.
   ============================================================ */

.ws-section {
    padding: 45px 4%;
    scroll-margin-top: 20px;
}

.ws-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;

    margin-bottom: 25px;
}

.ws-eyebrow {
    color: #8a672e;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ws-head h2 {
    font-family: Georgia, serif;
    font-size: 30px;
    color: #242424;
}

.ws-sub {
    color: #777;
    font-size: 14px;
    margin-top: 5px;
}

.ws-counter {
    flex-shrink: 0;

    background: #fdf8ef;
    border: 1px solid #d9c49a;
    color: #8a672e;

    border-radius: 999px;
    padding: 7px 16px;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.ws-layout {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 25px;
    align-items: stretch;
}

/* ---------- stage / player ---------- */

.ws-stage {
    position: relative;

    background: #141414;
    border-radius: 14px;
    overflow: hidden;

    height: clamp(320px, 44vw, 540px);

    box-shadow: 0 14px 34px rgba(36, 28, 12, .16);
}

.ws-video {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: contain;
    background: #141414;
}

.ws-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;

    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 16px;

    cursor: pointer;
    transition: .2s;
}

.ws-nav:hover {
    background: rgba(179, 138, 74, .92);
}

.ws-prev {
    left: 12px;
}

.ws-next {
    right: 12px;
}

.ws-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;

    width: 74px;
    height: 74px;
    border: 2px solid rgba(255, 255, 255, .75);
    border-radius: 50%;

    background: rgba(179, 138, 74, .92);
    color: #fff;
    font-size: 25px;
    line-height: 1;

    cursor: pointer;
    transition: .2s;
}

.ws-play:hover {
    background: #a37a3c;
    transform: translate(-50%, -50%) scale(1.05);
}

.ws-play.playing {
    opacity: 0;
    pointer-events: none;
}

.ws-stage:hover .ws-play.playing,
.ws-play.playing:focus-visible {
    opacity: .55;
    pointer-events: auto;
}

.ws-sound {
    position: absolute;
    right: 14px;
    bottom: 44px;
    z-index: 3;

    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 15px;

    cursor: pointer;
    transition: .2s;
}

.ws-sound:hover,
.ws-sound.active {
    background: rgba(179, 138, 74, .92);
}

.ws-fs {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 3;

    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;

    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 17px;

    cursor: pointer;
    transition: .2s;
}

.ws-fs:hover {
    background: rgba(179, 138, 74, .92);
}

.ws-seek {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 3;

    width: calc(100% - 90px);
    height: 5px;

    -webkit-appearance: none;
    appearance: none;

    background: rgba(255, 255, 255, .35);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}

.ws-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;

    width: 14px;
    height: 14px;
    border-radius: 50%;

    background: #e3c58d;
    border: 2px solid #b38a4a;
    cursor: pointer;
}

.ws-seek::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;

    background: #e3c58d;
    border: 2px solid #b38a4a;
    cursor: pointer;
}

.ws-fallback {
    position: absolute;
    inset: 0;
    z-index: 4;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    background: #1d1a16;
    color: #d8d2c8;

    text-align: center;
    padding: 20px;
}

.ws-fallback[hidden] {
    display: none;
}

.ws-fallback strong {
    color: #e3c58d;
    font-size: 17px;
    letter-spacing: 1px;
}

.ws-fallback span {
    font-size: 13px;
}

/* ---------- info panel ---------- */

.ws-info {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;

    padding: 26px;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ws-code {
    align-self: flex-start;

    background: #f7f1e8;
    border: 1px solid #e6d7bd;
    color: #8a672e;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;

    padding: 5px 11px;
    border-radius: 999px;
}

.ws-title {
    font-family: Georgia, serif;
    font-size: 25px;
    color: #242424;
    line-height: 1.25;
}

.ws-desc {
    color: #6f6f6f;
    font-size: 14px;
    line-height: 1.6;
}

.ws-product {
    border-top: 1px dashed #e2d9c8;
    padding-top: 14px;
    margin-top: 2px;
}

.ws-product-name {
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
}

.ws-price {
    font-family: Georgia, serif;
    font-size: 26px;
    color: #8a672e;
    font-weight: bold;
}

.ws-view {
    width: 100%;
    padding: 14px 20px;
    margin-top: auto;

    font-size: 14px;
    letter-spacing: 1.5px;
}

.ws-dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.ws-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;

    background: #dcd4c6;
    cursor: pointer;
    transition: .2s;
}

.ws-dot.active {
    background: #b38a4a;
    transform: scale(1.35);
}

/* ---------- thumbnails ---------- */

.ws-thumbs {
    display: flex;
    gap: 12px;

    margin-top: 22px;
    padding-bottom: 10px;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.ws-thumbs::-webkit-scrollbar {
    height: 6px;
}

.ws-thumbs::-webkit-scrollbar-track {
    background: #f1ece3;
    border-radius: 99px;
}

.ws-thumbs::-webkit-scrollbar-thumb {
    background: #d9cfc0;
    border-radius: 99px;
}

.ws-thumb {
    position: relative;
    flex: 0 0 132px;

    padding: 0;
    border: 2px solid transparent;
    border-radius: 12px;
    overflow: hidden;

    background: #efe9df;
    cursor: pointer;

    scroll-snap-align: start;
    transition: .2s;
}

.ws-thumb:hover {
    transform: translateY(-3px);
}

.ws-thumb.active {
    border-color: #b38a4a;
    box-shadow: 0 8px 18px rgba(140, 105, 50, .28);
}

.ws-thumb img,
.ws-thumb-fallback {
    display: block;
    width: 100%;
    height: 96px;

    object-fit: cover;
    background: #242424;
}

.ws-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #e3c58d;
    font-size: 24px;
}

.ws-thumb-cap {
    display: block;

    padding: 6px 7px;
    font-size: 10.5px;
    color: #555;
    line-height: 1.3;
    text-align: left;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-thumb.active .ws-thumb-cap {
    color: #8a672e;
    font-weight: bold;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {

    .ws-layout {
        grid-template-columns: 1fr;
    }

    .ws-stage {
        height: auto;
        aspect-ratio: 4 / 5;
        max-height: 78vh;
    }

    .ws-info {
        padding: 20px;
    }
}

@media (max-width: 700px) {

    .ws-section {
        padding: 35px 4%;
    }

    .ws-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ws-head h2 {
        font-size: 25px;
    }

    .ws-title {
        font-size: 21px;
    }

    .ws-price {
        font-size: 22px;
    }

    .ws-play {
        width: 62px;
        height: 62px;
        font-size: 21px;
    }

    .ws-thumb {
        flex-basis: 108px;
    }

    .ws-thumb img,
    .ws-thumb-fallback {
        height: 82px;
    }
}