/* ==========================================================================
   PLUSH JEWELS — Design System v2 (full redesign)
   New shell components use .pj-* classes; the second half restyles legacy
   inner pages (shop, product, cart, checkout, auth) that keep old markup.
   Fonts: Cormorant Garamond (display) + Jost (UI/body).
   ========================================================================== */

:root {
    --pj-ink: #211d18;
    --pj-ink-soft: #37322b;
    --pj-body: #5c564e;
    --pj-muted: #98917f;
    --pj-paper: #ffffff;
    --pj-cream: #f7f4ee;
    --pj-cream-2: #efe9df;
    --pj-gold: #a4835c;
    --pj-gold-deep: #866343;
    --pj-gold-pale: #e8dfd0;
    --pj-line: #e6e0d5;
    --pj-danger: #a04040;
    --pj-serif: 'Playfair Display', Georgia, serif;
    --pj-sans: 'Inter', 'Poppins', -apple-system, sans-serif;
    --pj-shadow-soft: 0 10px 30px rgba(33, 29, 24, .08);
    --pj-shadow-lift: 0 18px 44px rgba(33, 29, 24, .14);
    --pj-radius: 2px;
    --pj-ease: cubic-bezier(.25, .46, .45, .94);
}

/* ---------- Base -------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--pj-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: var(--pj-body);
    background: var(--pj-paper);
}
h1, h2, h3 { font-family: var(--pj-serif); color: var(--pj-ink); font-weight: 600; }
h4, h5, h6 { font-family: var(--pj-sans); color: var(--pj-ink); }
a { color: var(--pj-ink); transition: color .25s var(--pj-ease); text-decoration: none; }
a:hover { color: var(--pj-gold-deep); }
img { max-width: 100%; }
::selection { background: var(--pj-gold-pale); color: var(--pj-ink); }

.pj-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--pj-gold-deep);
    margin-bottom: 10px;
}

/* ---------- Buttons ------------------------------------------------------ */
.pj-btn {
    display: inline-block;
    font-family: var(--pj-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: var(--pj-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .3s var(--pj-ease);
    line-height: 1.4;
}
.pj-btn-dark { background: var(--pj-ink); border-color: var(--pj-ink); color: #fff; }
.pj-btn-dark:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }
.pj-btn-light { background: #fff; border-color: #fff; color: var(--pj-ink); }
.pj-btn-light:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }
.pj-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.pj-btn-ghost:hover { background: #fff; border-color: #fff; color: var(--pj-ink); }

.pj-link-arrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pj-gold-deep);
    border-bottom: 1px solid var(--pj-gold);
    padding-bottom: 4px;
    white-space: nowrap;
}
.pj-link-arrow span { display: inline-block; margin-left: 6px; transition: transform .3s var(--pj-ease); }
.pj-link-arrow:hover { color: var(--pj-ink); border-bottom-color: var(--pj-ink); }
.pj-link-arrow:hover span { transform: translateX(4px); }

/* ---------- Brand -------------------------------------------------------- */
.pj-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.pj-brand-mark { width: 30px; height: 30px; flex: none; color: var(--pj-gold); }
.pj-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.pj-brand-name {
    font-family: var(--pj-serif);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--pj-ink);
    white-space: nowrap;
}
.pj-brand-tag {
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--pj-gold-deep);
    margin-top: 3px;
}
.pj-brand:hover .pj-brand-name { color: var(--pj-gold-deep); }

/* ---------- Topbar -------------------------------------------------------- */
.pj-topbar {
    background: var(--pj-ink);
    padding: 8px 0;
    font-size: 11.5px;
    letter-spacing: .06em;
}
.pj-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pj-topbar a { color: #b9b0a1; margin-right: 18px; }
.pj-topbar a:hover { color: #fff; }
.pj-topbar a i { margin-right: 5px; vertical-align: middle; font-size: 13px; }
.pj-topbar-note {
    color: var(--pj-gold-pale);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 10px;
}
.pj-topbar-links a { margin: 0 0 0 18px; text-transform: uppercase; font-size: 10.5px; letter-spacing: .14em; }

/* ---------- Desktop header ------------------------------------------------ */
.pj-header {
    background: var(--pj-paper);
    border-bottom: 1px solid var(--pj-line);
    position: relative;
    z-index: 999;
}
.pj-header.is-sticky {
    position: fixed;
    top: 0; left: 0; right: 0;
    box-shadow: var(--pj-shadow-soft);
    animation: pjSlideDown .35s var(--pj-ease);
}
@keyframes pjSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.pj-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 74px;
}
.pj-header-brand { flex: none; }

.pj-nav { flex: 1; }
.pj-nav > ul { display: flex; justify-content: center; align-items: center; margin: 0; padding: 0; list-style: none; }
.pj-nav > ul > li { position: relative; }
.pj-nav > ul > li > a {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pj-ink);
    padding: 27px 13px;
    line-height: 1;
}
.pj-nav > ul > li > a:hover { color: var(--pj-gold-deep); }
.pj-nav > ul > li > a i { font-size: 11px; margin-left: 4px; }

/* Mega dropdown */
.pj-has-mega { position: static; }
.pj-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: min(720px, 92vw);
    background: var(--pj-paper);
    border: 1px solid var(--pj-line);
    border-top: 2px solid var(--pj-gold);
    border-radius: 0 0 var(--pj-radius) var(--pj-radius);
    box-shadow: var(--pj-shadow-lift);
    padding: 28px 30px 20px;
    opacity: 0;
    visibility: hidden;
    transition: all .25s var(--pj-ease);
    z-index: 1000;
}
.pj-has-mega:hover .pj-mega, .pj-has-mega:focus-within .pj-mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.pj-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pj-mega-card { display: block; text-align: center; }
.pj-mega-thumb {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pj-cream);
    border: 1px solid var(--pj-line);
    width: 110px;
    margin: 0 auto 12px;
    transition: border-color .3s var(--pj-ease);
}
.pj-mega-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pj-ease); }
.pj-mega-card:hover .pj-mega-thumb { border-color: var(--pj-gold); }
.pj-mega-card:hover .pj-mega-thumb img { transform: scale(1.06); }
.pj-mega-name {
    display: block;
    font-family: var(--pj-serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--pj-ink);
}
.pj-mega-card:hover .pj-mega-name { color: var(--pj-gold-deep); }
.pj-mega-cta {
    display: block;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--pj-muted);
    margin-top: 2px;
}
.pj-mega-all {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--pj-line);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pj-gold-deep);
}
.pj-mega-all:hover { color: var(--pj-ink); }

/* Header actions */
.pj-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.pj-actions > a, .pj-account > a {
    display: inline-block;
    color: var(--pj-ink);
    font-size: 23px;
    padding: 6px 8px;
    line-height: 1;
    position: relative;
}
.pj-actions > a:hover, .pj-account > a:hover { color: var(--pj-gold-deep); }
.pj-action-badge { position: relative; }
.pj-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    background: var(--pj-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    text-align: center;
    padding: 0 4px;
}
.pj-account { position: relative; }
.pj-account-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    box-shadow: var(--pj-shadow-lift);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .25s var(--pj-ease);
    z-index: 1000;
}
.pj-account:hover .pj-account-menu, .pj-account:focus-within .pj-account-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.pj-account-menu a {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 10px 20px;
    color: var(--pj-ink);
}
.pj-account-menu a:hover { background: var(--pj-cream); color: var(--pj-gold-deep); }

/* ---------- Mobile header -------------------------------------------------- */
.pj-header-m {
    background: #fff;
    border-bottom: 1px solid var(--pj-line);
    padding: 12px 0;
    position: relative;
    z-index: 999;
}
.pj-header-m.is-sticky { position: fixed; top: 0; left: 0; right: 0; box-shadow: var(--pj-shadow-soft); }
.pj-header-m-row { display: flex; align-items: center; justify-content: space-between; }
.pj-header-m .pj-brand-name { font-size: 19px; }
.pj-header-m .pj-brand-mark { width: 24px; height: 24px; }
.pj-header-m .pj-brand-tag { display: none; }
.pj-header-m-actions { display: flex; align-items: center; gap: 4px; }
.pj-header-m-actions > a { color: var(--pj-ink); font-size: 22px; padding: 5px 7px; position: relative; }
.pj-header-m-actions .pj-badge { top: -3px; right: -1px; min-width: 15px; height: 15px; line-height: 15px; font-size: 9px; }
.pj-burger {
    background: transparent;
    border: none;
    padding: 6px;
    margin-left: 4px;
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.pj-burger span { display: block; width: 22px; height: 1.5px; background: var(--pj-ink); transition: all .3s; }

/* ---------- Off-canvas ------------------------------------------------------ */
.off-canvas-inner-content { background: #fff; }
.btn-close-off-canvas { background: var(--pj-ink); color: #fff; }
.btn-close-off-canvas:hover { background: var(--pj-gold); }
.pj-offcanvas-brand { padding: 4px 0 16px; border-bottom: 1px solid var(--pj-line); margin-bottom: 12px; }
.mobile-menu li { position: relative; }
.mobile-menu li a {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pj-ink);
}
.mobile-menu li a:hover { color: var(--pj-gold-deep); }
.mobile-menu .toggle-submenu {
    position: absolute; right: 0; top: 6px;
    width: 30px; height: 30px; line-height: 28px;
    text-align: center;
    background: var(--pj-cream);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    color: var(--pj-ink);
    font-size: 16px;
    cursor: pointer;
    user-select: none;
}
.mobile-menu .dropdown-menu {
    display: none;
    position: relative;
    background: var(--pj-cream);
    border: none;
    border-left: 2px solid var(--pj-gold);
    border-radius: 0;
    padding: 8px 0 8px 16px;
    min-width: 100%;
    box-shadow: none;
    float: none;
}
.mobile-menu .dropdown-subitem {
    display: block;
    padding: 8px 0;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--pj-body);
}
.mobile-menu .dropdown-subitem:hover { color: var(--pj-gold-deep); padding-left: 3px; }
.mobile-navigation { overflow-y: auto; max-height: none; }
.auth-buttons { display: flex; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none; }
.btn-auth {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 120px; height: 42px; padding: 0 18px;
    font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
    border-radius: var(--pj-radius);
    transition: all .25s var(--pj-ease);
}
.btn-auth.btn-login { background: transparent; border: 1px solid var(--pj-ink); color: var(--pj-ink); }
.btn-auth.btn-login:hover { background: var(--pj-ink); color: #fff; }
.btn-auth.btn-signup, .btn-auth.btn-account { background: var(--pj-ink); border: 1px solid var(--pj-ink); color: #fff; }
.btn-auth.btn-signup:hover, .btn-auth.btn-account:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }
.pj-offcanvas-contact { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--pj-line); }
.pj-offcanvas-contact a { display: block; font-size: 13px; color: var(--pj-body); padding: 4px 0; }
.pj-offcanvas-contact a i { margin-right: 8px; color: var(--pj-gold-deep); }

/* ---------- Hero ------------------------------------------------------------ */
.pj-hero { position: relative; background: var(--pj-ink); }
.pj-hero-slide {
    min-height: min(78vh, 680px);
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: relative;
}
.pj-hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(24, 20, 15, .66) 0%, rgba(24, 20, 15, .32) 46%, rgba(24, 20, 15, .02) 75%);
}
.pj-hero-content { position: relative; z-index: 2; max-width: 620px; padding: 70px 0; }
.pj-hero-content .pj-eyebrow { color: var(--pj-gold-pale); }
.pj-hero-title {
    font-family: var(--pj-serif);
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 600;
    line-height: 1.06;
    color: #fff;
    margin: 0 0 18px;
}
.pj-hero-desc {
    font-size: 15.5px;
    font-weight: 300;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .88);
    max-width: 500px;
    margin-bottom: 32px;
}
.pj-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* slick controls (hero + carousels) */
.slick-dot-style .slick-dots { bottom: 26px; }
.slick-dot-style .slick-dots li button { background: rgba(255, 255, 255, .45); width: 24px; height: 2px; border-radius: 0; padding: 0; }
.slick-dot-style .slick-dots li.slick-active button { background: var(--pj-gold); width: 36px; }
.slick-arrow-style button.slick-arrow {
    background: rgba(255, 255, 255, .95);
    color: var(--pj-ink);
    border-radius: 50%;
    box-shadow: var(--pj-shadow-soft);
    z-index: 5;
}
.slick-arrow-style button.slick-arrow:hover { background: var(--pj-gold); color: #fff; }

/* ---------- USP strip -------------------------------------------------------- */
.pj-usp { border-bottom: 1px solid var(--pj-line); background: #fff; }
.pj-usp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 26px 0;
}
.pj-usp-item { display: flex; align-items: center; gap: 14px; justify-content: center; }
.pj-usp-item i { font-size: 32px; color: var(--pj-gold-deep); flex: none; }
.pj-usp-item h3 {
    font-family: var(--pj-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 1px;
    color: var(--pj-ink);
}
.pj-usp-item p { font-size: 12.5px; color: var(--pj-muted); margin: 0; }

/* ---------- Sections ---------------------------------------------------------- */
.pj-section { padding: 64px 0; }
.pj-section-cream { background: var(--pj-cream); }
.pj-section-head { text-align: center; margin-bottom: 38px; }
.pj-section-head .pj-title {
    font-size: clamp(26px, 3.2vw, 38px);
    margin: 0;
    position: relative;
}
.pj-section-head:not(.pj-section-head-split) .pj-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    background: var(--pj-gold);
    margin: 16px auto 0;
}
.pj-section-head-split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
    border-bottom: 1px solid var(--pj-line);
    padding-bottom: 16px;
}
.pj-section-head-split .pj-title { font-size: clamp(22px, 2.6vw, 30px); }

/* ---------- Image tiles (categories & collections) ----------------------------- */
.pj-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--pj-radius);
    aspect-ratio: 4 / 5;
    background: var(--pj-cream-2);
}
.pj-tile-tall { aspect-ratio: 3 / 4; }
.pj-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--pj-ease);
}
.pj-tile:hover img { transform: scale(1.05); }
.pj-tile-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(24, 20, 15, 0) 42%, rgba(24, 20, 15, .62) 100%);
    pointer-events: none;
}
.pj-tile-label {
    position: absolute;
    left: 0; right: 0; bottom: 22px;
    text-align: center;
    z-index: 2;
}
.pj-tile-name {
    display: block;
    font-family: var(--pj-serif);
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 600;
    color: #fff;
    letter-spacing: .03em;
    line-height: 1.15;
    padding: 0 10px;
}
@media (max-width: 767px) {
    .pj-tile-name { font-size: 15px; }
    .pj-tile-cta { font-size: 8.5px; letter-spacing: .2em; }
}
.pj-tile-cta {
    display: inline-block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--pj-gold-pale);
    border-bottom: 1px solid var(--pj-gold);
    padding-bottom: 3px;
    opacity: 0;
    transform: translateY(6px);
    transition: all .35s var(--pj-ease);
}
.pj-tile:hover .pj-tile-cta { opacity: 1; transform: translateY(0); }

/* ---------- Product card -------------------------------------------------------- */
.pj-card { margin-bottom: 10px; }
.pj-card-media {
    position: relative;
    overflow: hidden;
    border-radius: var(--pj-radius);
    border: 1px solid var(--pj-line);
    background: var(--pj-cream);
    aspect-ratio: 1 / 1;
}
.pj-card-media > a { display: block; width: 100%; height: 100%; }
.pj-card-img, .pj-card-img-alt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .5s var(--pj-ease), transform .9s var(--pj-ease);
}
.pj-card-img-alt { opacity: 0; }
.pj-card:hover .pj-card-img { transform: scale(1.05); }
.pj-card:hover .pj-card-img-alt { opacity: 1; transform: scale(1.05); }

.pj-flag {
    position: absolute;
    top: 12px; left: 12px;
    z-index: 3;
    background: var(--pj-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--pj-radius);
}

.pj-card-wish {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    width: 36px; height: 36px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: var(--pj-shadow-soft);
    color: var(--pj-ink);
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-6px);
    transition: all .35s var(--pj-ease);
}
.pj-card:hover .pj-card-wish { opacity: 1; transform: translateY(0); }
.pj-card-wish:hover { background: var(--pj-gold); color: #fff; }

.pj-card-add {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    transform: translateY(101%);
    transition: transform .35s var(--pj-ease);
}
.pj-card:hover .pj-card-add { transform: translateY(0); }
.pj-card-add-btn {
    display: block;
    width: 100%;
    background: rgba(33, 29, 24, .96);
    border: none;
    color: #fff;
    padding: 13px 10px;
    font-family: var(--pj-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s var(--pj-ease);
}
.pj-card-add-btn:hover { background: var(--pj-gold); }

.pj-card-info { padding-top: 14px; text-align: center; }
.pj-card-name { margin: 0; }
.pj-card-name a {
    font-family: var(--pj-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--pj-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
}
.pj-card-name a:hover { color: var(--pj-gold-deep); }
.pj-card-price { margin-top: 6px; }
.pj-price { font-size: 15px; font-weight: 600; color: var(--pj-ink); letter-spacing: .02em; }
.pj-price-old { font-size: 13px; color: var(--pj-muted); margin-left: 7px; }

/* carousel cells */
.pj-carousel .pj-carousel-cell { padding: 0 10px; }
.pj-carousel .slick-list { margin: 0 -10px; }

/* ---------- Editorial split ------------------------------------------------------- */
.pj-split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(24px, 5vw, 70px);
    align-items: center;
}
.pj-split-reverse { direction: rtl; }
.pj-split-reverse > * { direction: ltr; }
.pj-split-media { border-radius: var(--pj-radius); overflow: hidden; }
.pj-split-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.pj-split-body .pj-title { font-size: clamp(24px, 3vw, 36px); margin-bottom: 16px; }
.pj-split-body p { margin-bottom: 26px; max-width: 480px; }

/* ---------- Full-bleed banner ------------------------------------------------------ */
.pj-banner {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: clamp(80px, 12vw, 140px) 0;
}
.pj-banner::before { content: ""; position: absolute; inset: 0; background: rgba(24, 20, 15, .52); }
.pj-banner-inner { position: relative; z-index: 2; text-align: center; max-width: 640px; margin: 0 auto; }
.pj-banner-title {
    font-size: clamp(28px, 4vw, 46px);
    color: #fff;
    margin-bottom: 14px;
}
.pj-banner-inner p { color: rgba(255, 255, 255, .88); margin-bottom: 28px; }

/* ---------- Footer ------------------------------------------------------------------ */
.pj-footer { background: #1c1813; margin-top: 0; }
.pj-footer-main { padding: 62px 0 40px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pj-footer-col { margin-bottom: 26px; }
.pj-footer .pj-brand-name { color: #fff; }
.pj-footer .pj-brand:hover .pj-brand-name { color: var(--pj-gold-pale); }
.pj-footer-blurb { color: #a89f90; font-size: 13.5px; margin: 16px 0 20px; max-width: 320px; }
.pj-footer-title {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}
.pj-footer-links { list-style: none; margin: 0; padding: 0; }
.pj-footer-links li { margin-bottom: 9px; }
.pj-footer-links li a { color: #a89f90; font-size: 13.5px; letter-spacing: .03em; }
.pj-footer-links li a:hover { color: var(--pj-gold-pale); padding-left: 4px; }
.pj-footer-contact { list-style: none; margin: 0; padding: 0; }
.pj-footer-contact li { display: flex; gap: 10px; color: #a89f90; font-size: 13.5px; margin-bottom: 12px; }
.pj-footer-contact li i { color: var(--pj-gold); font-size: 17px; margin-top: 2px; }
.pj-footer-contact li a { color: #a89f90; }
.pj-footer-contact li a:hover { color: var(--pj-gold-pale); }
.pj-social a {
    width: 38px; height: 38px; line-height: 36px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #cfc6b8;
    text-align: center;
    display: inline-block;
    margin-right: 8px;
    font-size: 14px;
    transition: all .3s var(--pj-ease);
}
.pj-social a:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }
.pj-footer-bottom { padding: 18px 0; }
.pj-footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pj-footer-bottom p { color: #857c6d; font-size: 12.5px; letter-spacing: .04em; margin: 0; }
.pj-footer-bottom b { color: var(--pj-gold-pale); font-weight: 500; }
.pj-footer-secure i { margin-right: 6px; color: var(--pj-gold); }

/* ==========================================================================
   LEGACY PAGE RESTYLES (shop, product, cart, checkout, auth, user account)
   ========================================================================== */

/* breadcrumbs */
.breadcrumb-area {
    background: var(--pj-cream);
    border-bottom: 1px solid var(--pj-line);
    padding: 22px 0;
}
.breadcrumb-wrap .breadcrumb { margin: 0; background: transparent; }
.breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pj-muted);
}
.breadcrumb .breadcrumb-item a:hover { color: var(--pj-gold-deep); }
.breadcrumb .breadcrumb-item.active { color: var(--pj-ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--pj-gold); content: "·"; }

/* generic legacy buttons */
.btn-sqr, .btn-cart2, .btn-cart {
    background: var(--pj-ink);
    border: 1px solid var(--pj-ink);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: var(--pj-radius);
    padding: 13px 30px;
    transition: all .3s var(--pj-ease);
}
.btn-sqr:hover, .btn-cart2:hover, .btn-cart:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }
.btn-gold, .btn-products {
    background: transparent !important;
    border: none;
    color: var(--pj-gold-deep) !important;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--pj-gold);
    border-radius: 0;
    padding: 6px 0;
}
.btn-gold:hover, .btn-products:hover { color: var(--pj-ink) !important; border-bottom-color: var(--pj-ink); }

/* legacy product-item cards (products/category/brand/collection/wishlist grids) */
.product-item { background: transparent; height: auto !important; margin-bottom: 8px; }
.product-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--pj-cream);
    border-radius: var(--pj-radius);
    border: 1px solid var(--pj-line);
}
.product-thumb a { display: block; width: 100%; height: 100%; }
.product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: opacity .45s var(--pj-ease), transform .9s var(--pj-ease);
}
.product-item:hover .product-thumb img { transform: scale(1.05); }
.product-badge { position: absolute; top: 12px; left: 12px; z-index: 3; }
.product-label.new span, .product-label.discount span {
    display: inline-block;
    background: var(--pj-gold);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--pj-radius);
}
.product-item .button-group { position: absolute; top: 12px; right: 12px; z-index: 3; }
.product-item .button-group a {
    width: 36px; height: 36px; line-height: 36px;
    background: #fff;
    color: var(--pj-ink);
    border-radius: 50%;
    box-shadow: var(--pj-shadow-soft);
    display: block; text-align: center; font-size: 16px;
    opacity: 0; transform: translateY(-6px);
    transition: all .35s var(--pj-ease);
}
.product-item:hover .button-group a { opacity: 1; transform: translateY(0); }
.product-item .button-group a:hover { background: var(--pj-gold); color: #fff; }
.cart-hover {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    transform: translateY(101%);
    transition: transform .35s var(--pj-ease);
}
.product-item:hover .cart-hover { transform: translateY(0); }
.cart-hover .btn-cart { display: block; width: 100%; padding: 13px 10px; font-size: 11px; letter-spacing: .2em; border: none; background: rgba(33,29,24,.96); }
.cart-hover .btn-cart:hover { background: var(--pj-gold); }
.product-caption { padding-top: 14px; text-align: center; }
.product-caption .product-name a {
    font-family: var(--pj-sans);
    font-size: 14px !important;
    font-weight: 500;
    color: var(--pj-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-caption .product-name a:hover { color: var(--pj-gold-deep); }
.price-box { margin-top: 6px; }
.price-box .price-regular { font-size: 15px; font-weight: 600; color: var(--pj-ink); }
.price-box del, .price-box .price-old { font-size: 13px; font-weight: 400; color: var(--pj-muted); margin-left: 6px; }

/* shop sidebar */
.sidebar-single { border: 1px solid var(--pj-line); border-radius: var(--pj-radius); padding: 20px; background: #fff; }
.sidebar-title {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pj-ink);
    border-bottom: 1px solid var(--pj-line);
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.sidebar-body label, .custom-control-label { font-size: 13.5px; color: var(--pj-body); cursor: pointer; }
.custom-control-input:checked ~ .custom-control-label { color: var(--pj-ink); font-weight: 500; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--pj-gold); }

/* forms */
.form-control, .single-input-item input, .single-input-item textarea, .single-input-item select,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select {
    font-family: var(--pj-sans);
    font-size: 14px;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    background: #fff;
    color: var(--pj-ink);
    padding: 11px 14px;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--pj-gold);
    box-shadow: 0 0 0 3px rgba(164, 131, 92, .12);
    outline: none;
}
label { font-size: 13px; font-weight: 500; color: var(--pj-ink); letter-spacing: .04em; }
.required { color: var(--pj-danger); }
.nice-select { border: 1px solid var(--pj-line); border-radius: var(--pj-radius); font-size: 13.5px; }
.nice-select:active, .nice-select.open, .nice-select:focus { border-color: var(--pj-gold); }
.nice-select .list { border-radius: var(--pj-radius); box-shadow: var(--pj-shadow-lift); border: 1px solid var(--pj-line); }
.nice-select .option.selected { color: var(--pj-gold-deep); font-weight: 500; }

/* tables */
table thead th {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pj-ink);
    border-bottom: 1px solid var(--pj-line) !important;
    background: var(--pj-cream);
}
table td { vertical-align: middle; border-color: var(--pj-line) !important; font-size: 14px; }

/* tabs */
.nav-tabs { border-bottom: 1px solid var(--pj-line); }
.nav-tabs .nav-link {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pj-muted);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 12px 18px;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
    color: var(--pj-ink);
    border-bottom-color: var(--pj-gold);
    background: transparent;
}

/* pagination */
.pagination .page-link, .pagination li a, .pagination li span {
    border: 1px solid var(--pj-line);
    color: var(--pj-ink);
    border-radius: var(--pj-radius) !important;
    margin: 0 3px;
    font-size: 13px;
    min-width: 38px;
    text-align: center;
}
.pagination .page-item.active .page-link { background: var(--pj-ink); border-color: var(--pj-ink); color: #fff; }
.pagination .page-link:hover { background: var(--pj-cream); color: var(--pj-gold-deep); }

/* cards / panels */
.card { border: 1px solid var(--pj-line); border-radius: var(--pj-radius); box-shadow: none; }
.card-header { background: var(--pj-cream); border-bottom: 1px solid var(--pj-line); }
.checkout-title { font-family: var(--pj-serif); font-size: 24px; }

/* product details */
.product-details-des .product-name { font-family: var(--pj-serif); font-size: 30px; color: var(--pj-ink); }
.product-details-des .price-box .price-regular { font-size: 22px; }
.thumb-image img { border: 1px solid var(--pj-line); border-radius: var(--pj-radius); }

/* misc */
.scroll-top { background: var(--pj-ink); color: #fff; border-radius: 50%; box-shadow: var(--pj-shadow-soft); }
.scroll-top:hover { background: var(--pj-gold); }
.swal-button, .swal-button--confirm { background-color: var(--pj-ink) !important; border-radius: var(--pj-radius) !important; }
.swal-button:hover, .swal-button--confirm:hover { background-color: var(--pj-gold) !important; }
.swal-button--cancel { background: #fff !important; border: 1px solid var(--pj-line) !important; color: var(--pj-ink) !important; }
.swal-icon--success__ring { border-color: var(--pj-gold) !important; }
.swal-title { font-family: var(--pj-serif); color: var(--pj-ink); }
#loader { border-top-color: var(--pj-gold) !important; }
.section-padding { padding-top: 64px; padding-bottom: 64px; }

/* ---------- Responsive -------------------------------------------------------- */
@media (max-width: 1399px) {
    .pj-nav > ul > li > a { padding: 27px 9px; font-size: 11px; letter-spacing: .1em; }
    .pj-brand-name { font-size: 20px; }
}

@media (max-width: 991px) {
    .pj-hero-slide { min-height: 480px; }
    .pj-usp-row { grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 20px 0; }
    .pj-usp-item { justify-content: flex-start; }
    .pj-split { grid-template-columns: 1fr; }
    .pj-split-media { order: -1; }
    .pj-banner { background-attachment: scroll; }
    body.offcanvas-open, body { }
}

@media (max-width: 575px) {
    body { font-size: 14px; }
    .pj-hero-slide { min-height: 420px; }
    .pj-hero-content { padding: 50px 0; }
    .pj-hero-desc { font-size: 13.5px; }
    .pj-btn { padding: 12px 22px; font-size: 11px; }
    .pj-section { padding: 42px 0; }
    .pj-section-head { margin-bottom: 26px; }
    .pj-usp-item i { font-size: 26px; }
    .pj-usp-item h3 { font-size: 11px; }
    .pj-usp-item p { font-size: 11px; }
    .pj-tile-label { bottom: 14px; }
    .pj-card-add { transform: translateY(0); }          /* touch devices: keep visible */
    .pj-card-add-btn { padding: 10px 8px; font-size: 10px; }
    .pj-card-wish { opacity: 1; transform: none; width: 32px; height: 32px; }
    .pj-card-name a { font-size: 12.5px; }
    .pj-price { font-size: 13.5px; }
    .cart-hover { transform: translateY(0); }
    .product-item .button-group a { opacity: 1; transform: none; width: 32px; height: 32px; line-height: 32px; }
    .pj-footer-main { padding: 42px 0 20px; }
    .pj-footer-bottom-row { justify-content: center; text-align: center; }
    .section-padding { padding-top: 40px; padding-bottom: 40px; }
}

/* ==========================================================================
   CONSISTENCY PASS — page headers, auth, account, popups, shutter, misc pages
   ========================================================================== */

/* ---------- Page header band ---------- */
.pj-page-head {
    background: var(--pj-cream);
    border-bottom: 1px solid var(--pj-line);
    padding: 44px 0 38px;
    text-align: center;
}
.pj-page-head .pj-eyebrow { margin-bottom: 8px; }
.pj-page-title {
    font-family: var(--pj-serif);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 600;
    color: var(--pj-ink);
    margin: 0;
}
.pj-crumbs { margin-top: 12px; }
.pj-crumbs ol { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pj-crumbs li { display: flex; align-items: center; gap: 6px; }
.pj-crumbs li + li::before { content: "·"; color: var(--pj-gold); }
.pj-crumbs a, .pj-crumbs span {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--pj-muted);
}
.pj-crumbs a:hover { color: var(--pj-gold-deep); }
.pj-crumbs span[aria-current] { color: var(--pj-ink); }

/* ---------- Auth cards ---------- */
.pj-auth {
    max-width: 460px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--pj-line);
    border-top: 2px solid var(--pj-gold);
    border-radius: var(--pj-radius);
    padding: 38px 36px 30px;
}
.pj-auth-wide { max-width: 560px; }
.pj-auth-note { font-size: 14px; color: var(--pj-body); margin-bottom: 20px; text-align: center; }
.pj-field { margin-bottom: 18px; }
.pj-field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--pj-ink); }
.pj-field .form-control { width: 100%; height: 46px; }
.pj-field-password { position: relative; }
.pj-field-password .form-control { padding-right: 44px; }
.pj-eye {
    position: absolute;
    top: 50%; right: 6px;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    background: transparent;
    border: none;
    color: var(--pj-muted);
    cursor: pointer;
    font-size: 14px;
}
.pj-eye:hover { color: var(--pj-gold-deep); }
.pj-auth-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pj-auth-meta .custom-control-label { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--pj-body); font-weight: 400; }
.pj-auth-link { font-size: 12.5px; color: var(--pj-gold-deep); }
.pj-auth-link:hover { color: var(--pj-ink); }
.pj-btn-block { display: block; width: 100%; text-align: center; }
.pj-auth-switch { text-align: center; font-size: 13.5px; color: var(--pj-body); margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--pj-line); }
.pj-auth-switch a { color: var(--pj-gold-deep); font-weight: 500; }
.pj-auth-switch a:hover { color: var(--pj-ink); }
.pj-terms .custom-control-label { font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--pj-body); }
.pj-terms a { color: var(--pj-gold-deep); font-weight: 500; }

/* parsley validation */
.parsley-errors-list { list-style: none; margin: 6px 0 0; padding: 0; }
.parsley-errors-list li { font-size: 12px; color: var(--pj-danger); letter-spacing: .02em; }
input.parsley-error, textarea.parsley-error { border-color: var(--pj-danger) !important; }

/* alerts */
.alert {
    border-radius: var(--pj-radius);
    border: 1px solid var(--pj-line);
    font-size: 13.5px;
    padding: 12px 16px;
}
.alert-danger { background: #faf1f1; border-color: #e6cccc; color: #8c3b3b; }
.alert-success { background: #f2f6ef; border-color: #d3e0ca; color: #4a6b3a; }

/* ---------- My Account ---------- */
.myaccount-tab-menu {
    background: #fff;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    overflow: hidden;
    flex-direction: column;
}
.myaccount-tab-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pj-body);
    border: none;
    border-bottom: 1px solid var(--pj-line);
    padding: 15px 20px;
    background: transparent;
}
.myaccount-tab-menu a:last-child { border-bottom: none; }
.myaccount-tab-menu a i { color: var(--pj-muted); font-size: 14px; width: 16px; }
.myaccount-tab-menu a:hover { background: var(--pj-cream); color: var(--pj-ink); }
.myaccount-tab-menu a.active {
    background: var(--pj-ink);
    color: #fff;
    border-color: var(--pj-ink);
}
.myaccount-tab-menu a.active i { color: var(--pj-gold-pale); }
.myaccount-content {
    background: #fff;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    padding: 28px;
}
.myaccount-content h3, .myaccount-content h4, .myaccount-content h5 {
    font-family: var(--pj-serif) !important;
    font-size: 22px;
    font-weight: 600;
    color: var(--pj-ink);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pj-line);
    margin-bottom: 18px;
}
.myaccount-table { font-size: 13.5px; }

/* ---------- Popups (SweetAlert) ---------- */
.swal-modal {
    border-radius: var(--pj-radius);
    border-top: 2px solid var(--pj-gold);
    font-family: var(--pj-sans);
    box-shadow: var(--pj-shadow-lift);
}
.swal-title {
    font-family: var(--pj-serif) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--pj-ink) !important;
}
.swal-text { font-size: 14px; color: var(--pj-body); text-align: center; }
.swal-footer { text-align: center !important; }
.swal-button {
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
}
.swal-icon--success__line { background-color: var(--pj-gold) !important; }
.swal-icon--success__hide-corners { background-color: transparent !important; }

/* ---------- Shutter loader (restyled + cheap) ---------- */
#loader-wrapper .loader-section { background: #1c1813; }
#loader {
    border: 2px solid transparent !important;
    border-top-color: var(--pj-gold) !important;
    border-bottom-color: var(--pj-gold) !important;
}
#loader:before { border: 2px solid transparent !important; border-top-color: var(--pj-gold-pale) !important; }
#loader:after { border: 2px solid transparent !important; border-top-color: var(--pj-gold-deep) !important; }
@media (prefers-reduced-motion: reduce) {
    #loader-wrapper { display: none !important; }
}

/* ---------- Legacy page bands (contact, about, faq, blog…) ---------- */
.contact-us, .h2-contact {
    background: var(--pj-cream);
}
.contact-us h2, .h2-contact h2, .contact-area h2 {
    font-family: var(--pj-serif);
    color: var(--pj-ink);
    font-weight: 600;
}
.contact-us p { color: var(--pj-body); }
.contact-area .single-input-item { margin-bottom: 16px; }
.contact-info-wrap, .contact-form-wrap {
    background: #fff;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    padding: 26px;
}

/* FAQ accordions (bootstrap) */
.accordion-item { border: 1px solid var(--pj-line); border-radius: var(--pj-radius) !important; margin-bottom: 10px; overflow: hidden; }
.accordion-button {
    font-family: var(--pj-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--pj-ink);
    background: #fff;
    box-shadow: none !important;
    padding: 16px 20px;
}
.accordion-button:not(.collapsed) { background: var(--pj-cream); color: var(--pj-ink); }
.accordion-button:focus { border-color: var(--pj-gold); }
.accordion-body { font-size: 14px; color: var(--pj-body); }

/* blog cards */
.blog-post-item, .blog-item {
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    overflow: hidden;
    background: #fff;
}
.blog-post-item img, .blog-item img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.blog-post-item h3 a, .blog-post-item h4 a, .blog-item h4 a { font-family: var(--pj-serif); color: var(--pj-ink); font-size: 20px; }
.blog-post-item h3 a:hover, .blog-item h4 a:hover { color: var(--pj-gold-deep); }

/* checkout accordion / payment methods */
.checkout-page-wrapper h3, .checkout-page-wrapper h5 { font-family: var(--pj-serif); color: var(--pj-ink); }
.payment-method-name { font-weight: 500; color: var(--pj-ink); letter-spacing: .04em; }

/* offcanvas (bootstrap) — mobile filters */
.offcanvas { border-radius: 0; }
.offcanvas-header { border-bottom: 1px solid var(--pj-line); }
.offcanvas-title { font-family: var(--pj-serif); font-size: 20px; color: var(--pj-ink); }

/* generic empty states */
.notfound img { max-width: 220px; opacity: .85; }
.notfound h3, .notfound h4 { font-family: var(--pj-serif); color: var(--pj-ink); }

/* legacy fw-bold headings on white sections */
.header-section h2, h2.fw-bold { font-family: var(--pj-serif); color: var(--pj-ink); }

/* tighten container rhythm on legacy pages */
.section-padding { padding-top: 56px; padding-bottom: 56px; }

@media (max-width: 575px) {
    .pj-page-head { padding: 30px 0 26px; }
    .pj-auth { padding: 26px 20px 22px; }
    .myaccount-content { padding: 18px; }
}

/* ---------- Panels + contact page ---------- */
.pj-panel {
    background: #fff;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    padding: 30px;
    height: 100%;
}
.pj-panel-cream { background: var(--pj-cream); }
.pj-panel-title {
    font-family: var(--pj-serif);
    font-size: 24px;
    color: var(--pj-ink);
    margin-bottom: 8px;
}
.pj-panel-note { font-size: 13.5px; color: var(--pj-muted); margin-bottom: 22px; }
.pj-optional { font-size: 11px; color: var(--pj-muted); text-transform: none; letter-spacing: 0; }
.pj-contact-list { list-style: none; margin: 18px 0 22px; padding: 0; }
.pj-contact-list li { display: flex; gap: 14px; margin-bottom: 18px; }
.pj-contact-list li i { font-size: 24px; color: var(--pj-gold-deep); margin-top: 2px; }
.pj-contact-list li strong { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--pj-ink); margin-bottom: 2px; }
.pj-contact-list li span, .pj-contact-list li a { font-size: 14px; color: var(--pj-body); }
.pj-contact-list li a:hover { color: var(--pj-gold-deep); }
.pj-contact-social a { border-color: var(--pj-line); color: var(--pj-ink); }

/* ---------- Typography enforcement (beats legacy page CSS) ---------- */
main h1, main h2, main h3,
.contact-message h4, .contact-info h4, .about-content h4 {
    font-family: var(--pj-serif) !important;
    font-weight: 600 !important;
    color: var(--pj-ink);
}
.contact-us.bg-light, .bg-light.contact-us { background-color: var(--pj-cream) !important; }
main .btn-full {
    background: var(--pj-ink); color: #fff; border: 1px solid var(--pj-ink);
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    border-radius: var(--pj-radius); padding: 13px 30px;
}
main .btn-full:hover { background: var(--pj-gold); border-color: var(--pj-gold); }

/* destructive actions: quiet outline, not gold */
main .btn-danger, main .btn.remove, main a.remove {
    background: #fff !important;
    border: 1px solid var(--pj-line) !important;
    color: var(--pj-danger) !important;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: var(--pj-radius);
}
main .btn-danger:hover, main .btn.remove:hover, main a.remove:hover {
    background: var(--pj-danger) !important;
    border-color: var(--pj-danger) !important;
    color: #fff !important;
}

/* ---------- Product detail gallery + price badges ---------- */
.product-image-slider-col.light-grey-bg, .light-grey-bg { background: var(--pj-cream) !important; }
.product-image-slider .slide img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: auto;
}
.product-slider-thumb .thumb-image img { border: 1px solid var(--pj-line); border-radius: var(--pj-radius); cursor: pointer; }
.product-slider-thumb .slick-current .thumb-image img { border-color: var(--pj-gold); }
.price-badge { margin: 8px 0; }
.price-label.new span, .price-label.discount span, .price-label.new, .price-label.discount {
    display: inline-block;
    background: var(--pj-gold) !important;
    color: #fff !important;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--pj-radius);
}
@media (max-width: 767px) {
    .product-image-slider, .product-image-slider-col, .detail-box-inner, .product-detail-left {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    .product-detail-mb-btm { margin-bottom: 8px !important; padding-bottom: 0 !important; }
}

/* ==========================================================================
   V3 — TYPOGRAPHY SCALE + BUTTON NORMALIZATION (Playfair Display + Inter)
   ========================================================================== */

/* ---------- Type scale ---------- */
body { font-size: 14.5px; line-height: 1.65; letter-spacing: 0; }

h1, h2, h3, .pj-title, .pj-page-title, .pj-hero-title, .pj-banner-title { font-family: var(--pj-serif); }

.pj-hero-title { font-size: clamp(36px, 4.6vw, 62px); line-height: 1.12; font-weight: 600; letter-spacing: 0; }
.pj-page-title { font-size: clamp(28px, 3.4vw, 40px); }
.pj-section-head .pj-title { font-size: clamp(24px, 2.6vw, 32px); }
.pj-section-head-split .pj-title { font-size: clamp(20px, 2.2vw, 27px); }
.pj-banner-title { font-size: clamp(26px, 3.4vw, 40px); }
.pj-split-body .pj-title { font-size: clamp(22px, 2.6vw, 32px); }
.pj-panel-title { font-size: 22px; }
.pj-mega-name { font-size: 16px; }
.pj-tile-name { font-size: clamp(17px, 1.7vw, 23px); }

.pj-eyebrow { font-size: 10.5px; letter-spacing: .3em; font-weight: 600; }

/* brand: Playfair is wider than Cormorant — compact it */
.pj-brand-name { font-size: 20px; letter-spacing: .02em; }
.pj-brand-tag { font-size: 7.5px; letter-spacing: .34em; }
.pj-header-m .pj-brand-name { font-size: 17px; }

/* nav: Inter runs wider — keep one line */
.pj-nav > ul > li > a { font-size: 11.5px; letter-spacing: .1em; padding: 27px 11px; }
@media (max-width: 1399px) {
    .pj-nav > ul > li > a { font-size: 10.5px; letter-spacing: .08em; padding: 27px 8px; }
    .pj-brand-name { font-size: 18px; }
}

/* ---------- Card typography: editorial left alignment ---------- */
.pj-card-info, .product-caption { text-align: left; padding-top: 12px; }
.pj-card-name a, .product-caption .product-name a {
    font-family: var(--pj-sans);
    font-size: 13.5px !important;
    font-weight: 400;
    line-height: 1.5;
    color: var(--pj-body);
    letter-spacing: .01em;
}
.pj-card-name a:hover, .product-caption .product-name a:hover { color: var(--pj-ink); }
.pj-card-price, .price-box { margin-top: 5px; }
.pj-price, .price-box .price-regular { font-size: 14.5px; font-weight: 600; letter-spacing: .01em; color: var(--pj-ink); }
.pj-price-old, .price-box del, .price-box .price-old { font-size: 12.5px; }
.pj-flag { font-size: 9.5px; font-weight: 600; }

/* ---------- Buttons: ONE voice, ONE shape ---------- */
button, .btn, [type="submit"], [type="button"], .nice-select,
.btn-sqr, .btn-cart, .btn-cart2, .submit-button, .btn-full, .btn-auth,
.btn-secondary, .btn-outline-primary, .btn-outline-secondary,
.btn-warning, .btn-success, .btn-info, .btn-primary, .btn-dark, .btn-light {
    border-radius: var(--pj-radius) !important;
    font-family: var(--pj-sans) !important;
}
main .btn, main [type="submit"], .btn-sqr, .btn-cart, .btn-full, .submit-button,
main .btn-warning, main .btn-success, main .btn-primary, main .btn-dark {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    line-height: 1.4;
}
/* bootstrap contextual buttons inherit the ink/gold system */
main .btn-warning, main .btn-success, main .btn-primary, main .btn-dark, main .btn-info {
    background: var(--pj-ink) !important;
    border: 1px solid var(--pj-ink) !important;
    color: #fff !important;
}
main .btn-warning:hover, main .btn-success:hover, main .btn-primary:hover, main .btn-dark:hover, main .btn-info:hover {
    background: var(--pj-gold) !important;
    border-color: var(--pj-gold) !important;
    color: #fff !important;
}
main .btn-secondary:not(.white-btn), main .btn-outline-primary, main .btn-outline-secondary {
    background: transparent !important;
    border: 1px solid var(--pj-ink) !important;
    color: var(--pj-ink) !important;
}
main .btn-secondary:not(.white-btn):hover, main .btn-outline-primary:hover, main .btn-outline-secondary:hover {
    background: var(--pj-ink) !important;
    color: #fff !important;
}
.pj-btn { font-weight: 600; font-size: 11.5px; letter-spacing: .16em; }

/* deliberately circular elements stay circular */
.pj-card-wish, .product-item .button-group a,
.social-link a, .pj-social a, .scroll-top,
button.slick-arrow, .slick-arrow-style button.slick-arrow,
.pj-badge, .notification, .mobile-header .notification {
    border-radius: 50% !important;
}
.pj-eye { border-radius: 50% !important; }

/* qty steppers: neutral, not shouting */
.quantity button, .quantity .inc, .quantity .dec, .pro-qty .inc, .pro-qty .dec {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

/* inputs share the shape */
.form-control, input, textarea, select { border-radius: var(--pj-radius) !important; }
input[type="checkbox"], input[type="radio"] { border-radius: 0 !important; }

/* labels & small caps rhythm */
label, .sidebar-title, .pj-field label { font-family: var(--pj-sans); }
.sidebar-title { font-size: 11.5px; letter-spacing: .16em; font-weight: 600; }
.custom-control-label, .sidebar-body label { font-size: 13px; font-weight: 400; }

/* tables */
table thead th { font-size: 11px; font-weight: 600; letter-spacing: .12em; }
table td { font-size: 13.5px; }

/* footer type */
.pj-footer-title { font-size: 11px; letter-spacing: .2em; }
.pj-footer-links li a, .pj-footer-contact li, .pj-footer-contact li a { font-size: 13px; }
.pj-footer-blurb { font-size: 13px; }
.pj-footer .pj-brand-name { font-size: 19px; }

/* breadcrumbs */
.pj-crumbs a, .pj-crumbs span, .breadcrumb .breadcrumb-item, .breadcrumb .breadcrumb-item a {
    font-size: 10.5px; letter-spacing: .14em; font-weight: 500;
}

/* ==========================================================================
   V4 — ALIGNMENT & CONSISTENCY FIXES (hero, footer, dropdown, cart)
   ========================================================================== */

/* hero: everything left-aligned as one block */
.pj-hero-content, .pj-hero-content .pj-hero-title, .pj-hero-content .pj-hero-desc { text-align: left !important; }
.pj-hero-content .pj-eyebrow { text-align: left; }

/* brand wordmark: never italic (legacy CSS forced Playfair italic = script look) */
.pj-brand-name, .pj-brand-tag { font-style: normal !important; }
.pj-footer .pj-brand-name { font-style: normal !important; }

/* one section-title size everywhere */
.pj-section-head .pj-title, .pj-section-head-split .pj-title { font-size: clamp(23px, 2.4vw, 30px); }

/* footer: single-column link lists, transparent circle icons, tighter rhythm */
.pj-footer-links { display: block !important; columns: 1 !important; margin: 0; padding: 0; }
.pj-footer-links li { display: block !important; float: none !important; width: 100% !important; margin: 0 0 9px !important; }
.pj-footer-links li a { display: inline-block; }
.pj-footer .pj-social a {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #cfc6b8 !important;
    width: 36px; height: 36px; line-height: 34px;
}
.pj-footer .pj-social a:hover { background: var(--pj-gold) !important; border-color: var(--pj-gold) !important; color: #fff !important; }
.pj-footer-main { padding: 56px 0 30px; }
.pj-footer-col { margin-bottom: 18px; }
.pj-footer-blurb { margin: 14px 0 18px; }

/* categories dropdown: clean text menu */
.pj-has-drop { position: relative; }
.pj-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--pj-line);
    border-top: 2px solid var(--pj-gold);
    border-radius: 0 0 var(--pj-radius) var(--pj-radius);
    box-shadow: var(--pj-shadow-lift);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all .22s var(--pj-ease);
    z-index: 1000;
}
.pj-has-drop:hover .pj-dropdown, .pj-has-drop:focus-within .pj-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.pj-dropdown-link {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--pj-ink);
    padding: 10px 20px;
    white-space: nowrap;
}
.pj-dropdown-link:hover { background: var(--pj-cream); color: var(--pj-gold-deep); padding-left: 24px; }
.pj-dropdown-all {
    margin-top: 6px;
    border-top: 1px solid var(--pj-line);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pj-gold-deep);
}

/* cart: quantity stepper + inline busy state */
.main_quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    overflow: hidden;
    background: #fff;
}
.main_quantity .button {
    width: 34px; height: 38px;
    background: #fff;
    border: none;
    color: var(--pj-ink);
    font-size: 11px;
    cursor: pointer;
    transition: background .2s var(--pj-ease);
}
.main_quantity .button:hover { background: var(--pj-cream); color: var(--pj-gold-deep); }
.main_quantity input {
    width: 42px; height: 38px;
    border: none !important;
    border-left: 1px solid var(--pj-line) !important;
    border-right: 1px solid var(--pj-line) !important;
    border-radius: 0 !important;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pj-ink);
    background: #fff;
}
.pj-row-busy { opacity: .45; pointer-events: none; transition: opacity .2s; }

/* toasts (buttonless swal) */
.swal-modal:has(.swal-footer:empty) { padding-bottom: 10px; }

/* ==========================================================================
   V5 — TEXT TONE / SHADE / WEIGHT NORMALIZATION (no italics, one gray scale)
   ========================================================================== */

/* nothing leans unless we say so */
main em, main address, address, main i:not([class]),
.pj-price, .pj-price-old, .price-box, .price-box span, .price-box del,
.pj-eyebrow, .pj-flag, .pj-badge, .pj-tile-name, .pj-tile-cta,
.qtybtn, .nice-select .current, .total-reviews p, .total-reviews .post-author p,
.mobile-side-checkout em, .pj-footer-contact li span {
    font-style: normal !important;
}

/* emphasis is weight, not slant */
b, strong { font-weight: 600; color: var(--pj-ink); }
.fw-bold, .fw-bolder { font-weight: 600 !important; }
.fw-semibold { font-weight: 500 !important; }

/* one gray scale: ink for headings/emphasis, body for copy, muted for metadata */
main p, main li, main td, main dd { color: var(--pj-body); }
main h1, main h2, main h3 { color: var(--pj-ink); }
.text-dark { color: var(--pj-ink) !important; }
.text-muted, .fw-semibold.text-muted { color: var(--pj-muted) !important; }
.text-black { color: var(--pj-ink) !important; }

/* prices: always upright, semibold, ink */
.pj-price, .price-box .price-regular, .product-details-des .price-regular {
    font-weight: 600 !important;
    color: var(--pj-ink) !important;
}
.pj-price-old, .price-box del, .price-box .price-old {
    font-weight: 400 !important;
    color: var(--pj-muted) !important;
    text-decoration: line-through;
}

/* mobile floating checkout chip: label styling instead of italics */
.mobile-side-checkout span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.mobile-side-checkout strong { font-weight: 600; }
.mobile-side-checkout em { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }

/* quantity inputs: kill native spinners everywhere, keep value legible */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.main_quantity input, .pro-qty input, .quantity input {
    width: 44px !important;
    height: 38px;
    text-align: center !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--pj-ink) !important;
    background: #fff !important;
    opacity: 1 !important;
}
.main_quantity input[readonly] { cursor: default; }

/* ==========================================================================
   V6 — SVG ICONS, ABOUT PAGE, CONTACT DARK PANEL
   ========================================================================== */

/* icon primitives */
.pj-ic { display: inline-block; vertical-align: -0.18em; flex: none; }
.pj-actions .pj-ic, .pj-header-m-actions .pj-ic { vertical-align: middle; }
.pj-topbar .pj-ic { vertical-align: -0.22em; margin-right: 4px; }
.pj-usp-item .pj-ic { color: var(--pj-gold-deep); }
.pj-card-wish .pj-ic { vertical-align: middle; }
.btn-close-off-canvas .pj-ic { vertical-align: middle; }
.pj-footer-contact .pj-ic { color: var(--pj-gold); margin-top: 3px; }
.pj-footer-secure .pj-ic { color: var(--pj-gold); margin-right: 6px; vertical-align: -0.2em; }
.pj-social .pj-ic { vertical-align: middle; }
.scroll-top .pj-ic { vertical-align: middle; }
.main_quantity .button .pj-ic { vertical-align: middle; }
main .btn.remove .pj-ic, main a.remove .pj-ic { vertical-align: -0.15em; margin-right: 4px; }
.pj-nav .pj-ic { vertical-align: -0.12em; margin-left: 2px; }
.pj-contact-list .pj-ic { color: var(--pj-gold-deep); margin-top: 2px; }
.pj-offcanvas-contact .pj-ic { color: var(--pj-gold-deep); margin-right: 8px; vertical-align: -0.2em; }

/* about page: values */
.pj-value {
    background: #fff;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    padding: 28px 24px;
    height: 100%;
    text-align: center;
    transition: transform .3s var(--pj-ease), box-shadow .3s var(--pj-ease);
}
.pj-value:hover { transform: translateY(-4px); box-shadow: var(--pj-shadow-soft); }
.pj-value .pj-ic { color: var(--pj-gold-deep); margin-bottom: 14px; }
.pj-value h3 {
    font-family: var(--pj-sans) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pj-value p { font-size: 13.5px; color: var(--pj-body); margin: 0; }

/* CTA band */
.pj-cta-band {
    background: var(--pj-ink);
    padding: 72px 0;
    text-align: center;
}
.pj-cta-inner h2 {
    font-family: var(--pj-serif) !important;
    font-size: clamp(26px, 3.4vw, 40px);
    color: #fff !important;
    margin-bottom: 10px;
}
.pj-cta-inner p { color: #b9b0a1; margin-bottom: 26px; }

/* contact: dark info panel */
.pj-panel-ink { background: var(--pj-ink); border-color: var(--pj-ink); }
.pj-panel-ink .pj-panel-title { color: #fff !important; }
.pj-panel-sub { font-size: 13px; color: #b9b0a1; margin-bottom: 20px; }
.pj-panel-ink .pj-contact-list li strong { color: var(--pj-gold-pale); }
.pj-panel-ink .pj-contact-list li span, .pj-panel-ink .pj-contact-list li a { color: #cfc6b8; }
.pj-panel-ink .pj-contact-list li a:hover { color: #fff; }
.pj-panel-ink .pj-contact-list .pj-ic { color: var(--pj-gold); }
.pj-panel-ink .pj-contact-social a { border-color: rgba(255,255,255,.2); color: #cfc6b8; }
.pj-panel-ink .pj-contact-social a:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }

/* footer contact rows align with svg */
.pj-footer-contact li { align-items: flex-start; }

@media (max-width: 575px) {
    .pj-panel-title { font-size: 19px; }
    .pj-panel { padding: 22px 18px; }
    .pj-value { padding: 22px 16px; }
    .pj-cta-band { padding: 48px 0; }
}

/* v-bump */

/* ==========================================================================
   V7 — ICON REFINEMENT PASS (arrows, steppers, wishlist chips, contact chips)
   ========================================================================== */

/* --- slick arrows: one design everywhere (hero + carousels) --- */
.slick-arrow-style button.slick-arrow,
.slick-arrow-style_hero button.slick-arrow {
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--pj-line) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    line-height: 0 !important;
    color: var(--pj-ink) !important;
    left: 14px;
    z-index: 6;
    box-shadow: var(--pj-shadow-soft);
    opacity: 1;
    visibility: visible;
}
.slick-arrow-style button.slick-arrow.slick-next,
.slick-arrow-style_hero button.slick-arrow.slick-next { left: auto !important; right: 14px; }
.slick-arrow-style button.slick-arrow:hover,
.slick-arrow-style_hero button.slick-arrow:hover {
    background: var(--pj-gold) !important;
    border-color: var(--pj-gold) !important;
    color: #fff !important;
}
.slick-arrow-style button.slick-arrow svg { display: block; width: 18px; height: 18px; }

/* --- product-detail quantity stepper: rebuilt as system stepper --- */
.product-details-des .quantity .pro-qty {
    display: inline-flex !important;
    align-items: stretch;
    width: auto !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--pj-line) !important;
    border-radius: var(--pj-radius) !important;
    float: none !important;
    overflow: hidden;
    background: #fff;
}
.product-details-des .quantity .pro-qty .qtybtn {
    width: 36px !important;
    float: none !important;
    line-height: 38px !important;
    height: 38px;
    font-size: 16px !important;
    color: var(--pj-ink) !important;
    transition: background .2s var(--pj-ease);
}
.product-details-des .quantity .pro-qty .qtybtn:hover { background: var(--pj-cream); color: var(--pj-gold-deep) !important; }
.product-details-des .quantity .pro-qty input {
    width: 44px !important;
    height: 38px !important;
    float: none !important;
    border: none !important;
    border-left: 1px solid var(--pj-line) !important;
    border-right: 1px solid var(--pj-line) !important;
    border-radius: 0 !important;
}
.quantity-cart-box { gap: 14px; }
.quantity-cart-box .option-title { margin: 0; }

/* --- wishlist: square system chip, not a floating circle --- */
.pj-card-wish, .product-item .button-group a {
    border-radius: var(--pj-radius) !important;
    width: 32px;
    height: 32px;
    line-height: 30px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--pj-line);
    box-shadow: none;
    color: var(--pj-ink);
}
.pj-card-wish:hover, .product-item .button-group a:hover {
    background: var(--pj-ink) !important;
    border-color: var(--pj-ink);
    color: #fff;
}
.pj-card-wish .pj-ic { width: 15px; height: 15px; }

/* product-detail wishlist link */
.useful-links { margin-top: 16px; }
.useful-links a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pj-body);
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    padding: 9px 16px;
    transition: all .25s var(--pj-ease);
}
.useful-links a:hover { border-color: var(--pj-ink); background: var(--pj-ink); color: #fff; }
.useful-links a .pj-ic { color: var(--pj-gold-deep); }
.useful-links a:hover .pj-ic { color: #fff; }

/* --- contact page: icons in bordered chips --- */
.pj-contact-list li { align-items: center; gap: 14px; }
.pj-contact-list .pj-ic {
    width: 42px;
    height: 42px;
    padding: 10px;
    border: 1px solid var(--pj-line);
    border-radius: var(--pj-radius);
    background: var(--pj-cream);
    color: var(--pj-gold-deep);
    margin-top: 0;
}
.pj-panel-ink .pj-contact-list .pj-ic {
    border-color: rgba(232, 223, 208, .22);
    background: rgba(255, 255, 255, .05);
    color: var(--pj-gold);
}

/* --- footer contact icons: subtle chips --- */
.pj-footer-contact li { align-items: center; }
.pj-footer-contact .pj-ic {
    width: 34px;
    height: 34px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--pj-radius);
    background: rgba(255, 255, 255, .03);
    margin-top: 0;
}

/* offcanvas + topbar icon baseline harmony */
.pj-topbar .pj-ic, .pj-offcanvas-contact .pj-ic { vertical-align: -0.2em; }

/* product gallery arrows: system chips */
.product-image-slider .slide-arrow {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--pj-line) !important;
    border-radius: 50% !important;
    box-shadow: var(--pj-shadow-soft) !important;
    color: var(--pj-ink) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
}
.product-image-slider .slide-arrow:hover {
    background: var(--pj-gold) !important;
    border-color: var(--pj-gold) !important;
    color: #fff !important;
}
.product-image-slider .slide-arrow svg { display: block; }
.product-image-slider .prev-arrow { left: 10px !important; }
.product-image-slider .next-arrow { right: 10px !important; }

/* contact social row: labeled, aligned circle chips */
.pj-contact-follow { margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(232, 223, 208, .18); }
.pj-panel:not(.pj-panel-ink) .pj-contact-follow { border-top-color: var(--pj-line); }
.pj-contact-follow-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--pj-gold);
    margin-bottom: 12px;
}
.pj-contact-social { display: flex; gap: 10px; }
.pj-contact-social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pj-line);
    border-radius: 50%;
    color: var(--pj-ink);
    margin: 0;
    line-height: 1;
    transition: all .25s var(--pj-ease);
}
.pj-contact-social a:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }
.pj-contact-social a .pj-ic { display: block; }
.pj-panel-ink .pj-contact-social a { border-color: rgba(255, 255, 255, .18); color: #cfc6b8; }
.pj-panel-ink .pj-contact-social a:hover { background: var(--pj-gold); border-color: var(--pj-gold); color: #fff; }

/* ---------- Track Order results ---------- */
.pj-track-summary { list-style: none; margin: 0 0 22px; padding: 0; }
.pj-track-summary li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--pj-line);
}
.pj-track-summary li:last-child { border-bottom: none; }
.pj-track-summary li span {
    font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pj-muted);
}
.pj-track-summary li strong { font-size: 14px; color: var(--pj-ink); text-align: right; word-break: break-all; }
.pj-track-live { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--pj-line); }
.pj-track-current { display: flex; flex-direction: column; margin-bottom: 16px; }
.pj-track-current span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pj-muted); }
.pj-track-current strong { font-family: var(--pj-serif); font-size: 22px; color: var(--pj-gold-deep); }
.pj-track-timeline { list-style: none; margin: 0; padding: 0; }
.pj-track-timeline li {
    position: relative; padding: 0 0 18px 22px; border-left: 1px solid var(--pj-line); margin-left: 5px;
}
.pj-track-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.pj-track-timeline li::before {
    content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px;
    background: var(--pj-gold); border-radius: 50%;
}
.pj-track-timeline li strong { display: block; font-family: var(--pj-sans); font-size: 13.5px; color: var(--pj-ink); }
.pj-track-timeline li small { color: var(--pj-muted); font-size: 12px; }

/* ---------- Affiliate dashboard ---------- */
.pj-aff-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.pj-aff-stats .pj-panel { text-align: center; padding: 20px 12px; }
@media (max-width: 991px) { .pj-aff-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { .pj-aff-stats { grid-template-columns: repeat(2, 1fr); } }
.pj-aff-stat-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pj-muted); margin-bottom: 6px; }
.pj-aff-stat { display: block; font-family: var(--pj-serif); font-size: 26px; font-weight: 600; color: var(--pj-ink); }
.pj-copy-row { display: flex; gap: 8px; align-items: stretch; }
.pj-copy-row .form-control { flex: 1; min-width: 0; }
.pj-copy-row .pj-btn { white-space: nowrap; padding: 10px 18px; }

/* affiliate link in top bar */
.pj-topbar-affiliate { color: var(--pj-gold-pale) !important; font-weight: 600 !important; }
.pj-topbar-affiliate:hover { color: #fff !important; }

/* ============================================================
   CHECKOUT — order summary rows with thumbnails + payment box
   ============================================================ */
.order-summary-details { background: #fff; border: 1px solid var(--pj-line); border-radius: var(--pj-radius); padding: 26px 24px; }
.order-summary-table table { margin-bottom: 0; }
.order-summary-table td, .order-summary-table th { vertical-align: middle; border-color: var(--pj-line); }
.order-summary-table thead th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--pj-muted); font-weight: 600; }

/* product line item */
.pj-co-item { display: flex; align-items: center; gap: 14px; }
.pj-co-thumb {
    width: 58px; height: 58px; flex: none;
    object-fit: cover; border-radius: var(--pj-radius);
    border: 1px solid var(--pj-line); background: var(--pj-cream);
}
.pj-co-info { display: flex; flex-direction: column; min-width: 0; }
.pj-co-name {
    font-family: var(--pj-sans); font-weight: 600; font-size: 14px;
    color: var(--pj-ink); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pj-co-meta { font-size: 12.5px; color: var(--pj-muted); margin-top: 3px; }
.pj-co-total { text-align: right; white-space: nowrap; }
.order-summary-table tfoot td { font-size: 14px; }
.order-summary-table tfoot tr:last-child td { font-size: 15px; color: var(--pj-ink); border-top: 2px solid var(--pj-line); }

/* payment area */
.order-payment-method { margin-top: 22px; }
.payment-card-label { font-weight: 600; font-size: 14px; color: var(--pj-ink); }
.single-payment-method { padding: 12px 0; border-bottom: 1px solid var(--pj-line); margin-bottom: 18px; }

.pj-pay-box { border: 1px solid var(--pj-line); border-radius: var(--pj-radius); padding: 16px; background: var(--pj-cream); margin-bottom: 16px; }
.pj-pay-box-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pj-muted); font-weight: 600; margin-bottom: 10px; }
.pj-pay-box #card-container { min-height: 44px; }
/* Square iframe sits on white for legibility */
.pj-pay-box .sq-card-wrapper, .pj-pay-box iframe { background: #fff; border-radius: var(--pj-radius); }

.pj-place-order {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px 24px; margin: 0;
    cursor: pointer;
}
.pj-place-order .pj-place-order-lock { flex: none; opacity: .9; }
.pj-place-order[disabled] { opacity: .55; cursor: not-allowed; }
.pj-pay-note { margin: 12px 0 0; font-size: 12px; color: var(--pj-muted); text-align: center; }

@media (max-width: 991px) {
    .order-summary-details { margin-top: 26px; }
}
@media (max-width: 575px) {
    .order-summary-details { padding: 20px 16px; }
    .pj-co-item { gap: 11px; }
    .pj-co-thumb { width: 50px; height: 50px; }
    .pj-co-name { font-size: 13.5px; }
    .order-summary-table td, .order-summary-table th { padding: 10px 8px; }
    .pj-place-order { padding: 15px 18px; }
}

/* ============================================================
   CHECKOUT — phone field (+1), inline validation, shipping hint
   ============================================================ */
/* Phone with fixed +1 country code */
.pj-phone-field {
    display: flex; align-items: stretch;
    border: 1px solid var(--pj-line, #e6e0d5);
    border-radius: var(--pj-radius, 4px);
    background: #fff; overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
}
.pj-phone-field:focus-within { border-color: var(--pj-gold, #a4835c); box-shadow: 0 0 0 3px rgba(164,131,92,.12); }
.pj-phone-cc {
    display: flex; align-items: center; gap: 2px;
    padding: 0 12px; flex: none;
    background: var(--pj-cream, #f7f4ee);
    border-right: 1px solid var(--pj-line, #e6e0d5);
    color: var(--pj-ink-soft, #37322b); font-weight: 600; font-size: 14px;
}
.pj-phone-field input {
    flex: 1 1 auto; border: none !important; box-shadow: none !important;
    margin: 0 !important; background: transparent; min-width: 0;
}

/* Inline field errors — replace modal popups */
.pj-field-error { display: block; margin-top: 6px; color: #b4462f; font-size: 12.5px; line-height: 1.4; }
.pj-field-error:empty { display: none; }
.single-input-item.has-error input,
.single-input-item.has-error select,
.single-input-item.has-error .pj-phone-field {
    border-color: #d98a76 !important;
}
.single-input-item.has-error .pj-phone-field { box-shadow: none; }

/* Shipping row inline hint (quiet, never a popup) — full-width notice */
.pj-ship-hint {
    font-size: 12.5px; color: var(--pj-ink-soft, #37322b); line-height: 1.45;
    background: var(--pj-cream, #f7f4ee); border: 1px solid var(--pj-line, #e6e0d5);
    border-radius: var(--pj-radius, 4px); padding: 9px 12px;
}
.pj-ship-hint:empty { display: none; }

/* ============================================================
   STICKY HEADER — keep the logo + nav pinned to the top
   ============================================================ */
.pj-header-wrap {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--pj-paper, #fff);
}
/* The old scroll-past-300px "fixed" behaviour is replaced by the sticky wrap
   above — neutralise it so the two never fight (no duplicated/overlapping header). */
.pj-header.is-sticky,
.pj-header-m.is-sticky {
    position: static;
    box-shadow: none;
    animation: none;
}
/* Subtle shadow once the page is scrolled (the .is-sticky hook still toggles on scroll) */
.pj-header-wrap:has(.is-sticky) { box-shadow: var(--pj-shadow-soft); }

/* ============================================================
   AUTH FORMS — inline validation (sign-up / login), no reload
   ============================================================ */
.pj-field.has-error .form-control,
.pj-field.has-error .pj-field-password .form-control { border-color: #d98a76 !important; }
.pj-field .pj-field-error { display: block; margin-top: 6px; color: #b4462f; font-size: 12.5px; line-height: 1.4; }
.pj-field .pj-field-error:empty { display: none; }

.pj-auth-alert { padding: 11px 15px; border-radius: var(--pj-radius, 4px); font-size: 13.5px; line-height: 1.45; margin-bottom: 18px; }
.pj-auth-alert.is-error   { background: #fbeeea; border: 1px solid #e6c3b8; color: #a2432c; }
.pj-auth-alert.is-success { background: #eef5ec; border: 1px solid #c3ddc0; color: #3a6b34; }

/* ============================================================
   MOBILE — 16px inputs so iOS Safari doesn't auto-zoom on focus
   (font-size < 16px triggers Safari's focus zoom; 16px prevents it
    without disabling pinch-zoom, which would hurt accessibility)
   ============================================================ */
@media (max-width: 991px) {
    .form-control,
    .single-input-item input, .single-input-item textarea, .single-input-item select,
    input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
    input[type="number"], input[type="search"], input[type="date"], textarea, select,
    .nice-select, .pj-phone-field input, .pj-field .form-control {
        font-size: 16px !important;
    }
}

/* ============================================================
   CHECKOUT ORDER SUMMARY — never scroll horizontally.
   Fixed table layout so the product name WRAPS and the price
   column (Sub Total / Shipping / Tax / Total) is always visible.
   ============================================================ */
.order-summary-table { overflow-x: visible; max-width: 100%; }
.order-summary-table table { table-layout: fixed; width: 100%; max-width: 100%; }
.order-summary-table th:first-child,
.order-summary-table td:first-child { width: 64%; }
.order-summary-table th:last-child,
.order-summary-table td:last-child { width: 36%; text-align: right; }
.pj-co-name { overflow-wrap: anywhere; word-break: break-word; }
/* keep money values on one line, right-aligned */
.order-summary-table tfoot td:last-child,
.pj-co-total { white-space: nowrap; }

/* The table theme sets white-space:nowrap on cells, which clipped the product
   name to one line and forced the original horizontal scroll. Let summary cells
   wrap; keep only the money values on a single line. */
.order-summary-table th,
.order-summary-table td { white-space: normal !important; }
.order-summary-table tfoot td:last-child,
.order-summary-table td.pj-co-total { white-space: nowrap !important; }
.order-summary-table .pj-co-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ============================================================
   BRAND LOGO IMAGE (header) — wordmark variant stays for the dark footer
   ============================================================ */
.pj-brand--image, .pj-brand--icon, .pj-brand--light { gap: 0; }
/* Footer: light logo (white text + gold) on the dark footer */
.pj-brand-img.pj-brand-img--light { height: 52px; width: auto; max-width: 250px; display: block; }
/* Desktop header: full logo at ~75% of the header height (nav sets the ~79px
   header height, so the logo can fill up to that without enlarging the header) */
.pj-brand-img { height: 59px; width: auto; max-width: 360px; display: block; }
/* Lady icon (mobile header + off-canvas menu) */
.pj-brand-img--icon { height: 42px; width: auto; max-width: none; }
.pj-header-m .pj-brand-img--icon { height: 42px; }
@media (max-width: 575px) { .pj-brand-img--icon { height: 40px; } }