/* ####################################################
    :: Template Name: Essence - Fashion Ecommerce Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Description: Essence is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform.
    :: Version: 1.0.0
    :: Created: April 27, 2018
    :: Last Updated: May 2, 2018
    #################################################### */

    /* ---------------------------------------
    ##### - PLACE YOUR CUSTOM CSS HERE - #####
    --------------------------------------- */

/* =====================================================
   NUMB STUDIO THEME
   ===================================================== */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@800;900&display=swap");

:root {
    --numb-brown: #442D1D;          /* page brown from the mockup */
    --numb-brown-deep: #321402;
    --numb-lace: url("img/bg-img/lace-bg.jpg");
    --numb-ink: #111111;
    --numb-nav-text: #c9c1bf;       /* SHOP / CONTACT US */
    --numb-icon: #d4d0d0;           /* box / heart / bag */
    --numb-search: #c8bebc;         /* search pill */
    --numb-pill: #c4c0c0;           /* grey pill buttons */
    --numb-cream: #efe9e1;
    --numb-serif: "Times New Roman", Times, Georgia, serif;
    --numb-logo: "Nunito", "Poppins", sans-serif;
    --numb-header-h: 82px;
}

/* ---------- Page background (plain brown; lace is only on the nav) ---------- */
html { background-color: var(--numb-brown); }
body {
    background-color: var(--numb-brown);
    background-image: none;
    color: var(--numb-cream);
    margin-top: var(--numb-header-h);
}
@media only screen and (max-width: 767px) {
    body { margin-top: 112px; }
}

/* =====================================================
   HEADER / NAV BAR
   ===================================================== */
.header_area.numb-header,
.header_area.numb-header.sticky {
    background-color: var(--numb-brown-deep);
    background-image: var(--numb-lace);
    background-size: 480px auto;
    background-position: center;
    border-bottom: 2px solid var(--numb-ink);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}
.numb-header .classy-nav-container {
    background: transparent;
    padding: 0 22px;
    min-height: var(--numb-header-h);
}
.numb-header .classy-navbar,
.numb-header .header-meta {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    height: var(--numb-header-h);
    background: transparent;
}
.numb-header .classy-navbar { padding: 0; }

/* Logo */
.numb-header .nav-brand.numb-logo {
    font-family: var(--numb-logo);
    font-weight: 800;
    font-size: 33px;
    letter-spacing: .5px;
    color: #ffffff;
    line-height: 1;
    margin-right: 30px;
    white-space: nowrap;
}
.numb-header .nav-brand.numb-logo:hover { color: #ffffff; opacity: .9; }

/* Menu links */
.numb-header .classynav ul li a {
    font-family: var(--numb-serif);
    font-weight: 700;
    font-size: 33px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--numb-nav-text);
    padding: 0 12px;
    background: transparent;
}
.numb-header .classynav ul li a:hover,
.numb-header .classynav ul li a:focus { color: #ffffff; }

/* Search pill */
.numb-header .search-area { margin-right: 30px; }
.numb-header .search-area form.numb-search {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    width: 372px;
    border: 1px solid var(--numb-ink);
    border-left: 1px solid var(--numb-ink);
    border-radius: 8px;
    background-color: var(--numb-search);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
    transition: width 400ms ease;
}
.numb-header .search-area form.numb-search:focus-within { width: 420px; }
.numb-header .search-area form.numb-search input {
    flex: 1;
    width: auto;
    height: 100%;
    padding: 0 6px;
    border: none;
    background: transparent;
    font-family: var(--numb-serif);
    font-size: 17px;
    color: var(--numb-ink);
}
.numb-header .search-area form.numb-search input:focus { width: auto; outline: none !important; }
.numb-header .search-area form.numb-search button {
    position: static;
    transform: none;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--numb-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.numb-header .numb-search-go { width: 40px; padding: 0 0 0 10px; }
.numb-header .numb-search-go svg { width: 21px; height: 21px; }
.numb-header .numb-search-clear {
    width: 36px;
    font-size: 26px;
    line-height: 1;
    font-family: Arial, sans-serif;
    padding-bottom: 3px;
}

/* Icons: box / heart / bag */
.numb-header .numb-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    line-height: 1;
    border-left: none;
    padding: 0 12px;
    color: var(--numb-icon);
    transition: color 250ms, transform 250ms;
}
.numb-header .numb-icon a svg { width: 56px; height: 56px; display: block; }
.numb-header .numb-icon a:hover { color: #ffffff; transform: translateY(-2px); }
.numb-header .cart-area a { padding-right: 0; }

/* Mobile toggler + slide-out menu */
.numb-header .classy-navbar-toggler .navbarToggler span { background-color: var(--numb-icon); }
.numb-header .breakpoint-on .classy-navbar .classy-menu {
    background-color: var(--numb-brown-deep);
    background-image: var(--numb-lace);
    background-size: 480px auto;
}
.numb-header .breakpoint-on .classynav ul li a {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 24px;
    padding: 0 20px;
}
.numb-header .breakpoint-on .classycloseIcon .cross-wrap span { background: var(--numb-icon); }

@media only screen and (max-width: 1199px) {
    .numb-header .nav-brand.numb-logo,
    .numb-header .classynav ul li a { font-size: 26px; }
    .numb-header .search-area form.numb-search,
    .numb-header .search-area form.numb-search:focus-within { width: 240px; }
    .numb-header .numb-icon a svg { width: 44px; height: 44px; }
    .numb-header .search-area { margin-right: 14px; }
}
@media only screen and (max-width: 767px) {
    .numb-header .classy-nav-container { padding: 0 12px; }
    .numb-header .classy-navbar { height: 56px; border-bottom: none; }
    .numb-header .header-meta { height: 54px; width: 100%; justify-content: space-between !important; }
    .numb-header .nav-brand.numb-logo { font-size: 24px; }
    .numb-header .search-area { flex: 1; margin-right: 6px; }
    .numb-header .search-area form.numb-search,
    .numb-header .search-area form.numb-search:focus-within { width: 100%; height: 34px; }
    .numb-header .numb-icon a { padding: 0 6px; }
    .numb-header .numb-icon a svg { width: 32px; height: 32px; }
}

/* =====================================================
   SITE-WIDE THEME TWEAKS
   ===================================================== */

/* Grey pill buttons (VIEW COLLECTION style) */
.essence-btn,
.btn.essence-btn {
    background-color: var(--numb-pill);
    color: var(--numb-ink);
    border-radius: 999px;
    font-family: var(--numb-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    min-width: 0;
    height: 40px;
    line-height: 40px;
    padding: 0 26px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.essence-btn:hover, .essence-btn:focus,
.btn.essence-btn:hover, .btn.essence-btn:focus {
    background-color: #e6e1df;
    color: var(--numb-ink);
}

/* Headings in the serif display style */
h1, h2, h3, h4, h5 { font-family: var(--numb-serif); }

/* Content sections sit on the brown, with the lace showing around them */
.top_catagory_area,
.new_arrivals_area,
.shop_grid_area,
.blog-wrapper,
.single-blog-wrapper,
.contact-area,
.checkout_area,
.single_product_details_area,
.regular-page-area,
.brands-area {
    background-color: var(--numb-brown);
}
.section-heading h2,
.new_arrivals_area h2,
.shop_grid_area h2,
.shop_grid_area h6,
.contact-area h2,
.checkout_area h5,
.regular-page-area h2,
.single-blog-wrapper h2,
.blog-wrapper h2 { color: var(--numb-cream); }

.single-product-wrapper .product-description a h6,
.single-product-wrapper .product-description .product-price { color: var(--numb-cream); }
.single-product-wrapper .product-description span { color: #b9ada3; }
.single-product-wrapper .product-img { background-color: #ffffff; }

/* Footer stays dark */
.footer_area { background-color: #140b05; }

/* ---------- fixes ---------- */
.numb-header .classynav ul { display: flex; flex-wrap: nowrap; white-space: nowrap; }
.numb-header .breakpoint-on .classynav ul { display: block; }
.numb-header .search-area { min-width: 0; }
.numb-header .search-area form.numb-search input { min-width: 0; }
.single-product-wrapper,
.single-product-wrapper .product-description { background-color: transparent; }
.single-product-wrapper .product-description { padding-top: 12px; }
#scrollUp { background-color: var(--numb-pill); color: var(--numb-ink); border-radius: 50%; }
.numb-header .header-meta { margin-left: 24px; }
@media only screen and (min-width: 1200px) {
    .numb-header .search-area form.numb-search { width: clamp(260px, 27vw, 372px); }
    .numb-header .search-area form.numb-search:focus-within { width: clamp(280px, 30vw, 420px); }
}
@media only screen and (max-width: 767px) {
    .numb-header .header-meta { margin-left: 0; }
    .numb-header .classy-navbar { justify-content: space-between; }
}

/* =====================================================
   NAV: keep SHOP / CONTACT US right next to the search bar
   ===================================================== */
.numb-header .classy-nav-container { justify-content: flex-start !important; }
.numb-header .classy-navbar { flex: 1 1 auto; }
.numb-header .classy-navbar .classy-menu { margin-left: auto; }
.numb-header .header-meta { margin-left: 18px; }
@media only screen and (max-width: 767px) {
    .numb-header .header-meta { margin-left: 0; }
}

/* =====================================================
   PAPER BANNER  ("FROM WOMEN TO WOMEN")
   ===================================================== */
.numb-paper-banner {
    background-color: var(--numb-brown);
    padding: 18px 15px 10px;
}
.numb-paper {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
}
.numb-paper img {
    display: block;
    width: 100%;
    height: auto;
}
.numb-paper-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 58%;
    transform: translateY(-50%);
    margin: 0;
    text-align: center;
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(18px, 4.6vw, 44px);
    letter-spacing: 1px;
    line-height: 1;
    color: #0d0b2a;   /* dark navy ink */
}

/* =====================================================
   GOLD FRAME AROUND EVERY PRODUCT PHOTO
   The photo is clipped to an oval and sits inside the
   frame opening (img/core-img/gold-frame.png).
   ===================================================== */
.single-product-wrapper .product-img,
.numb-frame-box {
    position: relative;
    width: 100%;
    aspect-ratio: 564 / 805;
    overflow: visible;
    background: transparent;
}
.single-product-wrapper .product-img::after,
.numb-frame-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("img/core-img/gold-frame.png") center / 100% 100% no-repeat;
    z-index: 15;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.single-product-wrapper .product-img img,
.single-product-wrapper .product-img .hover-img,
.owl-carousel .owl-item .single-product-wrapper .product-img img,
.numb-frame-box img,
.owl-carousel .owl-item .numb-frame-box img {
    position: absolute;
    left: 19%;
    top: 20.8%;
    width: 62% !important;
    height: 61.4% !important;
    object-fit: cover;
    object-position: center top;
    clip-path: ellipse(50% 50% at 50% 50%);
    background-color: #f3efe9;
    transform: none;
}
.single-product-wrapper .product-img img { z-index: 5; }
.single-product-wrapper .product-img .hover-img { z-index: 10; }
.single-product-wrapper .product-img .product-badge,
.single-product-wrapper .product-img .product-favourite { z-index: 20; }
.single-product-wrapper .product-img .product-badge { top: 6%; left: 4%; }
.single-product-wrapper .product-img .product-favourite { top: 6%; right: 4%; }
.single-product-wrapper .product-img .product-favourite a { color: var(--numb-cream); }

/* Product detail page gallery */
.single_product_details_area .single_product_thumb { padding: 30px 15px; }
.numb-frame-box { max-width: 480px; margin: 0 auto; }

/* =====================================================
   SIDE CART (bag icon) — brown theme
   ===================================================== */
.right-side-cart-area {
    background-color: var(--numb-brown);
    box-shadow: -10px 0 30px rgba(0, 0, 0, .5);
}
.right-side-cart-area .cart-content { background-color: var(--numb-brown); }
.right-side-cart-area .cart-button a {
    background-color: var(--numb-brown-deep);
    background-image: var(--numb-lace);
    background-size: 480px auto;
    border-bottom: 2px solid var(--numb-ink);
}
.right-side-cart-area .cart-button a img { filter: invert(92%); }
.right-side-cart-area .cart-button a span { color: var(--numb-cream); }

.right-side-cart-area .cart-content .cart-list { background-color: var(--numb-brown-deep); }
.right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc {
    background-color: rgba(42, 23, 8, .62);
}
.right-side-cart-area .cart-content .cart-list .single-cart-item:hover .product-image .cart-item-desc {
    background-color: rgba(42, 23, 8, .85);
}

.right-side-cart-area .cart-content .cart-amount-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    color: var(--numb-cream);
}
.right-side-cart-area .cart-content .cart-amount-summary h2 {
    color: var(--numb-cream);
    text-align: center;
    margin-bottom: 50px;
}
.right-side-cart-area .cart-content .cart-amount-summary .summary-table li,
.right-side-cart-area .cart-content .cart-amount-summary .summary-table li span {
    color: var(--numb-cream);
}
.right-side-cart-area .cart-content .cart-amount-summary .summary-table li {
    border-bottom: 1px solid rgba(239, 233, 225, .15);
    padding-bottom: 12px;
}

/* Checkout button: centered and popping out */
.right-side-cart-area .cart-content .cart-amount-summary .checkout-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px !important;
}
.right-side-cart-area .cart-content .cart-amount-summary .essence-btn {
    display: inline-block;
    margin: 0 auto;
    height: 52px;
    line-height: 52px;
    padding: 0 46px;
    font-size: 18px;
    background-color: #e9e3df;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .55), 0 0 0 3px rgba(212, 175, 95, .55);
    transition: transform 250ms, box-shadow 250ms;
}
.right-side-cart-area .cart-content .cart-amount-summary .essence-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .6), 0 0 0 3px rgba(212, 175, 95, .9);
}
.right-side-cart-area.cart-on .cart-amount-summary .essence-btn {
    animation: numbPop 600ms 300ms both;
}
@keyframes numbPop {
    0%   { transform: scale(.6); opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* Cart on phones: nearly full width, bag tab stays visible to close it */
@media only screen and (max-width: 767px) {
    .right-side-cart-area { width: calc(100vw - 50px); right: -110vw; }
    .right-side-cart-area.cart-on { right: 0; }
    .right-side-cart-area .cart-content .cart-list { flex: 0 0 120px; width: 120px; }
    .right-side-cart-area .cart-content .cart-amount-summary {
        flex: 0 0 calc(100% - 120px);
        width: calc(100% - 120px);
        padding: 40px 16px;
    }
    .right-side-cart-area .cart-content .cart-amount-summary h2 { font-size: 26px; margin-bottom: 30px; }
    .right-side-cart-area .cart-content .cart-amount-summary .summary-table li { font-size: 12px; }
    .right-side-cart-area .cart-content .cart-amount-summary .essence-btn { padding: 0 28px; font-size: 16px; height: 46px; line-height: 46px; }
}

/* =====================================================
   GENERAL RESPONSIVE POLISH
   ===================================================== */
img { max-width: 100%; }
@media only screen and (max-width: 767px) {
    .numb-paper-banner { padding: 14px 10px 0; }
    .single-product-wrapper { margin-bottom: 30px; }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .numb-header .classy-nav-container { padding: 0 14px; }
}

/* =====================================================
   READABLE TEXT ON BROWN (all pages)
   ===================================================== */
h1, h2, h3, h4, h5, h6 { color: var(--numb-cream); }
p, label, .widget-title, .widget-title2, .catagory-menu a,
.shop_sidebar_area .widget .widget-title,
.shop_sidebar_area .widget .widget-title2,
.single_product_desc .product-desc,
.single_product_desc > span,
.single_product_desc p { color: #d8cdc1; }
.shop_sidebar_area .widget .widget-title,
.shop_sidebar_area .widget .widget-title2 { color: var(--numb-cream) !important; }
.shop_sidebar_area .widget a,
.shop_sidebar_area .widget li a { color: #cdbfb2; }
.shop_sidebar_area .widget a:hover { color: #ffffff; }
.single_product_desc h2 { color: var(--numb-cream); }
.single_product_desc .product-price { color: #e8c98a; }
.single_product_desc .product-price .old-price { color: #a99a8d; }
.product-topbar .total-products p,
.product-topbar .total-products p span { color: #d8cdc1; }

/* Keep form fields light so typed text stays readable */
input, textarea, select, .nice-select { color: #222; }

/* Smaller frames on phones so a card fits on screen */
@media only screen and (max-width: 575px) {
    .single-product-wrapper .product-img,
    .numb-frame-box { max-width: 300px; margin-left: auto; margin-right: auto; }
}

/* Form fields: light background so typed text is readable */
.checkout_details_area .form-control,
.contact-area .form-control,
.checkout_area input.form-control,
.checkout_area textarea { background-color: #f3efe9; color: #222; border-color: #c8bebc; }

/* Contact page details */
.contact-area .contact-information p,
.contact-area .contact-information p span,
.contact-area .contact-information a { color: #d8cdc1 !important; }
.contact-area .contact-information p span:first-child { color: var(--numb-cream) !important; }
.contact-address p, .contact-address p a { color: #d8cdc1 !important; }
.contact-address p span { color: var(--numb-cream) !important; }

/* =====================================================
   HEADER REFINEMENT (v2) — slimmer, balanced, one centre line
   Sizes to tweak: --nh-* variables below.
   ===================================================== */
:root {
    --numb-header-h: 72px;   /* bar height */
    --nh-link: 19px;         /* SHOP / CONTACT US text */
    --nh-icon: 30px;         /* box / heart / bag */
    --nh-search-h: 38px;     /* search bar height */
    --nh-gap: 22px;          /* space between the right-side icons */
}

/* Every section sits on the same centre line */
.numb-header .classy-nav-container,
.numb-header .classy-navbar,
.numb-header .classy-menu,
.numb-header .classynav,
.numb-header .classynav ul,
.numb-header .header-meta {
    display: flex;
    align-items: center;
}
.numb-header .classy-nav-container { padding: 0 32px; }
.numb-header .header-meta { gap: var(--nh-gap); }

/* Logo */
.numb-header .nav-brand.numb-logo { font-size: 26px; letter-spacing: 1px; margin-right: 34px; }

/* SHOP / CONTACT US — smaller, airy serif with a fine underline on hover */
.numb-header .classynav ul { gap: 6px; }
.numb-header .classynav ul li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: auto;
    line-height: 1;
    padding: 8px 14px;
    font-size: var(--nh-link);
    letter-spacing: 3px;
    transition: color 220ms ease;
}
.numb-header .classynav ul li a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 17px;           /* letter-spacing leaves room after the last letter */
    bottom: 1px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms ease;
}
.numb-header .classynav ul li a:hover::after,
.numb-header .classynav ul li a:focus-visible::after { transform: scaleX(1); }

/* Search bar */
.numb-header .search-area { margin-right: 6px; }
.numb-header .search-area form.numb-search {
    height: var(--nh-search-h);
    width: 340px;
    border: 1px solid rgba(17, 17, 17, .85);
    border-radius: 6px;
    transition: width 400ms ease, box-shadow 250ms ease;
}
.numb-header .search-area form.numb-search:focus-within {
    width: 390px;
    box-shadow: 0 0 0 3px rgba(239, 233, 225, .25);
}
.numb-header .search-area form.numb-search input { font-size: 16px; letter-spacing: .3px; }
.numb-header .numb-search-go svg { width: 18px; height: 18px; }
.numb-header .numb-search-clear { width: 34px; font-size: 22px; opacity: .7; }
.numb-header .numb-search-clear:hover { opacity: 1; }

/* Right-side icons — a thin rule separates them from the search */
.numb-header .orders-area {
    padding-left: var(--nh-gap);
    border-left: 1px solid rgba(239, 233, 225, .28);
    height: 30px;
    display: flex;
    align-items: center;
}
.numb-header .numb-icon a { padding: 0; }
.numb-header .numb-icon a svg { width: var(--nh-icon); height: var(--nh-icon); }
.numb-header .numb-icon a:hover,
.numb-header .numb-icon a:focus-visible { color: #ffffff; transform: translateY(-2px); }
.numb-header a:focus-visible { outline: 1px solid #efe9e1; outline-offset: 4px; }

/* Smaller count bubbles to match the smaller icons */
.numb-header .numb-bag-count,
.numb-header .numb-wish-count {
    top: -7px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 17px;
}

@media only screen and (max-width: 1199px) {
    :root { --nh-link: 16px; --nh-icon: 26px; --nh-gap: 16px; }
    .numb-header .nav-brand.numb-logo { font-size: 22px; margin-right: 18px; }
    .numb-header .classynav ul li a { letter-spacing: 2px; padding: 8px 10px; }
    .numb-header .search-area form.numb-search,
    .numb-header .search-area form.numb-search:focus-within { width: 230px; }
}
/* phone/tablet slide-out menu: links stack normally */
.numb-header .breakpoint-on .classy-menu,
.numb-header .breakpoint-on .classynav,
.numb-header .breakpoint-on .classynav ul { display: block; }
.numb-header .breakpoint-on .classynav ul li a { display: block; padding: 14px 20px; font-size: 18px; }
.numb-header .breakpoint-on .classynav ul li a::after { display: none; }
@media only screen and (max-width: 767px) {
    :root { --nh-icon: 24px; --nh-gap: 12px; --nh-search-h: 34px; }
    .numb-header .classy-nav-container { padding: 0 12px; }
    .numb-header .nav-brand.numb-logo { font-size: 21px; }
    .numb-header .header-meta { gap: var(--nh-gap); }
    .numb-header .search-area { margin-right: 0; }
    .numb-header .orders-area { padding-left: var(--nh-gap); }
}

/* =====================================================
   TWO VERTICAL PHOTOS (homepage, under the paper banner)
   Both photos are forced to the same 3:4 portrait size.
   ===================================================== */
.numb-duo {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 920px;          /* same width as the paper banner */
    margin: 40px auto 0;
    padding: 0 15px;
}
.numb-duo-item {
    margin: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid rgba(239, 233, 225, .35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
}
.numb-duo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 900ms ease;
}
.numb-duo-item:hover img { transform: scale(1.04); }
@media only screen and (max-width: 767px) {
    .numb-duo { gap: 12px; margin-top: 24px; }
}

/* Homepage photos: landscape instead of portrait */
.numb-duo-item { aspect-ratio: 4 / 3; }

/* Footer logo (cream version of the Numb Studio logo) */
.footer_area .footer-logo .numb-footer-logo { width: 120px; max-width: none; height: auto; display: block; }

/* Contact page map (no API key needed) */
.contact-area .google-map .numb-map { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; filter: sepia(.25) saturate(.85); }

/* Footer subscribe message */
.numb-sub-msg { margin: 12px 0 0; font-size: 14px; color: #efe9e1 !important; }

/* Threads / TikTok icons (drawn, same size as the other footer icons) */
.footer_social_area a svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }

/* =====================================================
   FULL-WIDTH PHOTO BANNERS (homepage, above & below the paper banner)
   Banner height: change the clamp() value in .numb-hero
   Photo focus: change object-position (e.g. "center 30%")
   ===================================================== */
.numb-duo { display: none; }   /* old two-photo row, no longer used */
.numb-hero {
    position: relative;
    height: clamp(420px, 78vh, 760px);
    overflow: hidden;
    background: #1a0f06;
}
.numb-hero + .numb-paper-banner { padding-top: 46px; }
.numb-paper-banner + .numb-hero { margin-top: 46px; }
.numb-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
}
.numb-hero::after {   /* soft shade so the white text stays readable */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 45%, transparent 70%);
}
.numb-hero-text {
    position: absolute;
    z-index: 1;
    left: clamp(18px, 4vw, 56px);
    bottom: clamp(26px, 6vh, 64px);
    color: #fff;
}
.numb-hero-eyebrow {
    margin: 0 0 12px;
    font: 500 13px "Poppins", sans-serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff !important;
}
.numb-hero-title {
    margin: 0 0 22px;
    font: 500 clamp(30px, 4vw, 46px)/1.05 "Poppins", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}
.numb-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 42px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(4px);
    color: #fff;
    font: 500 15px "Poppins", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background 250ms, color 250ms;
}
.numb-hero-btn:hover,
.numb-hero-btn:focus-visible { background: #fff; color: #2a1708; }
@media only screen and (max-width: 767px) {
    .numb-hero { height: 70vh; min-height: 380px; }
    .numb-hero-btn { height: 44px; padding: 0 30px; font-size: 13px; }
}

/* =====================================================
   PRODUCT CARDS — v12 polish (shop, homepage, wishlist)
   ===================================================== */

/* 1. Warm cream "canvas" inside the oval, and the photo zoomed ~15%.
      Zoom: change --zoom. Focus point: change --focus-y (lower % = more of the top/head). */
.single-product-wrapper .product-img,
.numb-frame-box {
    --zoom: 1.15;
    --focus-y: 22%;
    --oval-bg: #efe6da;
}
.single-product-wrapper .product-img::before,
.numb-frame-box::before {
    content: "";
    position: absolute;
    left: 19%;
    top: 20.8%;
    width: 62%;
    height: 61.4%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 35%, #f7f1e8 0%, var(--oval-bg) 70%, #e2d6c5 100%);
    z-index: 4;
}
.single-product-wrapper .product-img img,
.single-product-wrapper .product-img .hover-img,
.owl-carousel .owl-item .single-product-wrapper .product-img img,
.numb-frame-box img,
.owl-carousel .owl-item .numb-frame-box img {
    background-color: transparent;
    mix-blend-mode: multiply;          /* white photo backgrounds take on the cream tone */
    transform-origin: 50% var(--focus-y);
    transform: scale(var(--zoom));
    /* shrink the oval cut by the same amount so it still fits the frame opening */
    clip-path: ellipse(calc(50% / var(--zoom)) calc(50% / var(--zoom)) at 50% calc(var(--focus-y) + (50% - var(--focus-y)) / var(--zoom)));
}

/* 2. Badges: soft pills, muted colours, dark text */
.single-product-wrapper .product-img .product-badge {
    top: 6%;
    left: 5%;
    height: auto;
    padding: 0;
    background: none;
}
.single-product-wrapper .product-img .product-badge span {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    font: 700 11px/1.2 "Poppins", sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.single-product-wrapper .product-img .product-badge.new-badge,
.single-product-wrapper .product-img .product-badge.offer-badge { background: none; }
.single-product-wrapper .product-img .product-badge.new-badge span { background: #efe6da; color: #2a1708; }
.single-product-wrapper .product-img .product-badge.offer-badge span { background: #c9a96e; color: #24140a; }

/* 3. Wishlist heart: centred in a soft dark circle, top-right */
.single-product-wrapper .product-img .product-favourite {
    top: 5.5%;
    right: 5%;
    width: 42px;
    height: 42px;
}
.single-product-wrapper .product-img .product-favourite a.favme {
    position: static;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    background: rgba(26, 15, 6, .55);
    border: 1px solid rgba(239, 230, 218, .25);
    backdrop-filter: blur(3px);
    font-size: 18px;
    text-shadow: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.single-product-wrapper .product-img .product-favourite a.favme:hover { transform: none; background: rgba(26, 15, 6, .8); }

/* 4. Brand, name and price centred under the frame */
.single-product-wrapper .product-description { text-align: center; padding-top: 14px; }
.single-product-wrapper .product-description > span {
    display: block;
    font: 600 11px "Poppins", sans-serif;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #b9ada3;
}
.single-product-wrapper .product-description a h6 {
    margin: 6px 0 6px;
    font: 700 19px "Times New Roman", Times, serif;
    letter-spacing: .3px;
}
.single-product-wrapper .product-description .product-price { font: 600 15px "Poppins", sans-serif; }
.single-product-wrapper .product-description .product-price .old-price { margin-right: 6px; opacity: .55; }
.single-product-wrapper .product-description .hover-content { left: 0; right: 0; text-align: center; }
.single-product-wrapper .product-description .hover-content .add-to-cart-btn { margin: 0 auto; }
.single-product-wrapper .product-img .product-favourite { position: absolute; left: auto; bottom: auto; }

/* =====================================================
   RECTANGULAR GOLD FRAME (replaces the oval) — every page
   Frame image: img/core-img/gold-frame-rect.png (680 x 904)
   The photo fills the frame opening and tucks a little under the gold edge.
   ===================================================== */
.single-product-wrapper .product-img,
.numb-frame-box {
    aspect-ratio: 680 / 904;
    --open-l: 16.3%;
    --open-t: 12.6%;
    --open-w: 67.4%;
    --open-h: 74.8%;
}
.single-product-wrapper .product-img::after,
.numb-frame-box::after {
    background-image: url("img/core-img/gold-frame-rect.png");
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5));
}
.single-product-wrapper .product-img::before,
.numb-frame-box::before {
    left: var(--open-l);
    top: var(--open-t);
    width: var(--open-w);
    height: var(--open-h);
    border-radius: 0;
    background: radial-gradient(ellipse at 50% 30%, #f7f1e8 0%, var(--oval-bg) 65%, #e0d3c0 100%);
}
.single-product-wrapper .product-img img,
.single-product-wrapper .product-img .hover-img,
.owl-carousel .owl-item .single-product-wrapper .product-img img,
.numb-frame-box img,
.owl-carousel .owl-item .numb-frame-box img {
    left: var(--open-l);
    top: var(--open-t);
    width: var(--open-w) !important;
    height: var(--open-h) !important;
    /* rectangle cut that stays inside the opening while the photo is zoomed */
    clip-path: inset(
        calc(var(--focus-y) * (1 - 1 / var(--zoom)))
        calc(50% * (1 - 1 / var(--zoom)))
        calc((100% - var(--focus-y)) * (1 - 1 / var(--zoom)))
        calc(50% * (1 - 1 / var(--zoom)))
    );
}
/* badge and heart sit on the frame's top corners */
.single-product-wrapper .product-img .product-badge { top: 3%; left: 3%; }
.single-product-wrapper .product-img .product-favourite { top: 2%; right: 3%; }
.numb-frame-box img { z-index: 5; }
.numb-frame-box .hover-img { z-index: 6; }
.single-product-wrapper .product-img::after,
.numb-frame-box::after { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }