:root {
   --ink: #171514;
   --muted: #77706a;
   --line: #e7e0d9;
   --cream: #f5f0ea;
   --cream2: #fbf9f6;
   --gold: #b88a44;
   --gold2: #d8b777;
   --white: #fff;
   --shadow: 0 24px 70px rgba(23, 21, 20, .10)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   font-family: 'DM Sans', sans-serif;
   color: var(--ink);
   background: #fff;
   overflow-x: hidden
}

body:has(.admin-body) {}

h1,
h2,
h3,
h4,
.brand,
.serif {
   font-family: 'Playfair Display', serif
}

.brand {
   display: inline-block;
   color: var(--ink);
   text-decoration: none;
   letter-spacing: .16em;
   font-size: 1.15rem;
   line-height: .85
}

.brand span {
   font-family: 'DM Sans', sans-serif;
   font-size: .55em;
   display: block;
   letter-spacing: .38em;
   margin-top: 6px;
   text-align: center
}

.announcement {
   background: #171514;
   color: #fff;
   font-size: .67rem;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 8px 0
}

.announcement .container {
   display: flex;
   justify-content: center;
   gap: 13px;
   align-items: center
}

.announcement-dot {
   color: var(--gold2)
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 20;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(231, 224, 217, .8)
}

.navbar a {
   color: var(--ink);
   text-decoration: none
}

.nav-link {
   text-transform: uppercase;
   letter-spacing: .15em;
   font-size: .68rem;
   padding: .7rem .6rem !important;
   position: relative
}

.nav-link:after {
   content: '';
   position: absolute;
   left: .6rem;
   right: .6rem;
   bottom: .2rem;
   height: 1px;
   background: var(--ink);
   transform: scaleX(0);
   transform-origin: center;
   transition: .3s
}

.nav-link:hover:after {
   transform: scaleX(1)
}

.nav-icons a {
   font-size: 1.1rem;
   position: relative;
   color: var(--ink);
   display: flex;
   align-items: center
}

.cart-badge {
   position: absolute;
   top: -8px;
   right: -9px;
   background: #171514;
   color: #fff;
   border-radius: 50%;
   font-size: .55rem;
   padding: 2px 5px;
   min-width: 16px;
   text-align: center
}

.hero {
   height: calc(100svh - 88px);
   min-height: 600px;
   position: relative;
   overflow: hidden;
   background: #eee
}

.hero-slide {
   height: 100%;
   background-size: cover;
   background-position: center;
   transform: scale(1.01);
   transition: transform 8s ease
}

.carousel-item.active .hero-slide {
   transform: scale(1.06)
}

.hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(0, 0, 0, .48), rgba(0, 0, 0, .06) 68%, rgba(0, 0, 0, .08));
   display: flex;
   align-items: center
}

.hero-copy {
   color: #fff;
   max-width: 680px
}

.hero-copy h1 {
   font-size: clamp(3.4rem, 7vw, 7.5rem);
   line-height: .9;
   letter-spacing: -.035em;
   margin: 0
}

.hero-copy .eyebrow {
   color: #fff
}

.hero-controls {
   position: absolute;
   bottom: 32px;
   right: 5%;
   display: flex;
   gap: 8px;
   z-index: 5
}

.hero-controls button {
   position: static;
   width: 48px;
   height: 48px;
   border: 1px solid rgba(255, 255, 255, .6);
   border-radius: 50%;
   background: rgba(0, 0, 0, .14);
   color: #fff;
   opacity: 1
}

.hero-controls i {
   font-size: 1rem
}

.section-pad {
   padding: 100px 0
}

.section-title {
   margin-bottom: 48px
}

.section-title h2 {
   font-size: clamp(2.2rem, 4vw, 3.4rem);
   margin-top: 8px
}

.split-title {
   display: flex;
   align-items: end;
   justify-content: space-between
}

.eyebrow {
   text-transform: uppercase;
   letter-spacing: .25em;
   font-size: .66rem;
   color: #8a8179;
   font-weight: 600
}

.text-link {
   color: var(--ink);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .68rem;
   font-weight: 600
}

.text-link i {
   margin-left: 6px
}

.product-card a {
   text-decoration: none;
   color: inherit
}

.product-image-wrap {
   position: relative;
   overflow: hidden;
   background: #f4f1ed
}

.product-img {
   aspect-ratio: 1/1.15;
   object-fit: cover;
   width: 100%;
   display: block;
   transition: transform .65s cubic-bezier(.2, .65, .25, 1)
}

.product-card:hover .product-img {
   transform: scale(1.045)
}

.product-hover {
   position: absolute;
   left: 14px;
   bottom: 14px;
   background: #fff;
   padding: 9px 12px;
   font-size: .63rem;
   text-transform: uppercase;
   letter-spacing: .12em;
   opacity: 0;
   transform: translateY(8px);
   transition: .3s;
   box-shadow: 0 8px 20px rgba(0, 0, 0, .1)
}

.product-card:hover .product-hover {
   opacity: 1;
   transform: none
}

.product-badge {
   position: absolute;
   top: 13px;
   left: 13px;
   background: #171514;
   color: #fff;
   padding: 7px 9px;
   font-size: .58rem;
   text-transform: uppercase;
   letter-spacing: .1em
}

.product-name {
   font-family: 'Playfair Display', serif;
   font-size: 1.08rem
}

.price {
   font-weight: 600;
   font-size: .92rem
}

.compare {
   text-decoration: line-through;
   color: #999;
   margin-left: 6px;
   font-weight: 400
}

.discount-pill {
   font-family: 'DM Sans';
   font-size: .65rem;
   color: #8a5a22;
   background: #f4eadb;
   border-radius: 999px;
   padding: 5px 8px;
   margin-left: 6px
}

.brand-story {
   background: var(--cream)
}

.story-lead {
   font-family: 'Playfair Display';
   font-size: 1.7rem;
   line-height: 1.35
}

.reviews-section {
   background: #fcfbf9
}

.review-card {
   background: #fff;
   border: 1px solid var(--line);
   padding: 30px;
   height: 100%;
   box-shadow: 0 12px 35px rgba(23, 21, 20, .04)
}

.stars {
   letter-spacing: .16em;
   font-size: .75rem
}

.review-quote {
   font-family: 'Playfair Display';
   font-size: 1.35rem;
   line-height: 1.45
}

.review-name {
   font-weight: 600;
   margin-top: 25px
}

.review-card small {
   color: #938b83
}

.cta-whatsapp {
   background: #171514;
   color: #fff;
   padding: 60px 55px;
   position: relative;
   overflow: hidden
}

.cta-whatsapp h2 {
   font-size: clamp(2.3rem, 4vw, 4rem)
}

.cta-orb {
   position: absolute;
   width: 420px;
   height: 420px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(216, 183, 119, .25), transparent 68%);
   right: -80px;
   top: -170px
}

.btn-lux,
.btn-gold {
   border-radius: 0;
   padding: 14px 22px;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .67rem;
   font-weight: 600
}

.btn-gold {
   background: linear-gradient(135deg, var(--gold2), var(--gold));
   color: #171514;
   border: 0
}

.btn-gold:hover {
   background: linear-gradient(135deg, var(--gold), var(--gold2));
   color: #171514
}

.footer {
   background: #eee8e1
}

.footer h6 {
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .15em
}

.footer a {
   display: block;
   color: #4c4844;
   text-decoration: none;
   margin: 9px 0;
   font-size: .88rem
}

.footer-copy {
   max-width: 450px;
   color: #625b54;
   line-height: 1.7
}

.footer-wa {
   font-size: .7rem !important;
   text-transform: uppercase;
   letter-spacing: .12em
}

.footer-bottom {
   font-size: .72rem;
   color: #77706a
}

.shop-hero {
   background: linear-gradient(110deg, #f4efe8, #fbf9f6);
   padding: 100px 0 85px;
   border-bottom: 1px solid var(--line)
}

.shop-hero h1 {
   font-size: clamp(3.3rem, 7vw, 6.5rem);
   line-height: .9;
   letter-spacing: -.03em;
   margin: 18px 0
}

.shop-hero h1 em {
   color: #9b7950;
   font-weight: 400
}

.shop-hero p {
   max-width: 560px;
   color: #716a63
}

.shop-layout {
   display: grid;
   grid-template-columns: 220px 1fr;
   gap: 55px
}

.category-sidebar {
   position: sticky;
   top: 105px;
   align-self: start
}

.category-link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 0;
   color: #68615b;
   text-decoration: none;
   border-bottom: 1px solid var(--line);
   font-size: .83rem;
   transition: .25s
}

.category-link span {
   opacity: 0;
   transition: .25s
}

.category-link:hover,
.category-link.active {
   color: var(--ink);
   padding-left: 7px
}

.category-link:hover span,
.category-link.active span {
   opacity: 1
}

.shop-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 24px;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--line)
}

.shop-result-count,
.shop-sort {
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: #81786f
}

.mobile-filter-btn {
   display: none;
   background: #fff;
   border: 1px solid var(--line);
   padding: 10px 13px;
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .1em
}

.empty-state {
   text-align: center;
   padding: 70px 20px;
   border: 1px dashed var(--line)
}

.empty-state i {
   font-size: 2.5rem;
   color: var(--gold)
}

.product-detail .product-title {
   font-size: clamp(2.5rem, 5vw, 4.4rem);
   line-height: .98
}

.gallery-main-wrap {
   background: #f4f1ed;
   overflow: hidden
}

.gallery-main {
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: cover;
   display: block
}

.gallery-thumbs {
   display: flex;
   gap: 10px;
   overflow: auto;
   margin-top: 12px
}

.gallery-thumb {
   border: 1px solid var(--line);
   background: #fff;
   padding: 0;
   min-width: 74px
}

.gallery-thumb.active {
   border: 1px solid var(--ink)
}

.gallery-thumb img {
   width: 74px;
   height: 74px;
   object-fit: cover
}

.product-summary {
   position: sticky;
   top: 110px
}

.rating-line {
   display: flex;
   gap: 10px;
   align-items: center;
   color: #80776f;
   font-size: .73rem;
   margin-top: 15px
}

.rating-line span:first-child {
   color: #a77d43;
   letter-spacing: .1em
}

.product-price {
   font-size: 1.4rem;
   font-weight: 600
}

.product-short {
   color: #6d665f;
   font-size: 1rem
}

.luxury-note {
   background: #f7f2ea;
   padding: 13px 15px;
   font-size: .72rem;
   color: #675d53
}

.luxury-note span {
   color: var(--gold);
   margin-right: 7px
}

.option-label {
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-weight: 600
}

.size-options {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 10px
}

.size-option {
   min-width: 44px;
   border: 1px solid var(--line);
   background: #fff;
   padding: 10px 13px;
   font-size: .78rem
}

.size-option.active,
.size-option:hover {
   background: #171514;
   color: #fff;
   border-color: #171514
}

.purchase-row {
   display: flex;
   gap: 10px
}

.qty {
   display: flex;
   align-items: center;
   border: 1px solid var(--line);
   width: max-content
}

.qty button {
   border: 0;
   background: #fff;
   width: 40px;
   height: 46px
}

.qty input {
   width: 44px;
   border: 0;
   text-align: center;
   height: 46px
}

.luxury-accordion .accordion-item {
   border: 0;
   border-top: 1px solid var(--line);
   border-radius: 0 !important
}

.luxury-accordion .accordion-button {
   padding: 20px 0;
   background: #fff;
   box-shadow: none;
   font-family: 'Playfair Display';
   font-size: 1.1rem
}

.luxury-accordion .accordion-body {
   padding: 0 0 20px
}

.product-description {
   color: #6d665f;
   line-height: 1.8
}

.review-row {
   border-bottom: 1px solid var(--line);
   padding: 0 0 18px;
   margin-bottom: 18px
}

.cart-item {
   display: flex;
   gap: 18px;
   align-items: center;
   border-bottom: 1px solid var(--line);
   padding: 20px 0
}

.cart-item>img {
   width: 110px;
   height: 125px;
   object-fit: cover;
   background: #f4f1ed
}

.cart-item-actions {
   display: flex;
   align-items: center;
   gap: 16px
}

.cart-item-actions input {
   width: 70px
}

.remove-link {
   font-size: .68rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: #9b5e5e;
   text-decoration: none
}

.summary-card {
   background: #f6f1ea;
   padding: 28px;
   position: sticky;
   top: 110px
}

.input-icon-wrap {
   position: relative
}

.input-icon-wrap>i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 2;
   color: #8b837b
}

.input-icon-wrap .form-control {
   padding-left: 42px
}

.password-wrap {
   position: relative
}

.password-wrap .form-control {
   padding-right: 48px
}

.password-toggle {
   position: absolute;
   right: 8px;
   top: 50%;
   transform: translateY(-50%);
   border: 0;
   background: transparent;
   color: #817970;
   z-index: 3
}

.reveal {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .7s ease, transform .7s ease
}

.reveal.is-visible {
   opacity: 1;
   transform: none
}

/* Admin */
.admin-body {
   background: #f4f5f6
}

.admin-shell {
   display: flex;
   min-height: 100vh
}

.admin-sidebar {
   width: 260px;
   flex: 0 0 260px;
   background: #151413;
   color: #fff;
   display: flex;
   flex-direction: column;
   padding: 25px 18px;
   position: fixed;
   inset: 0 auto 0 0;
   z-index: 100
}

.admin-sidebar .brand {
   color: #fff
}

.admin-brand {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 8px 24px
}

.admin-user {
   display: flex;
   gap: 12px;
   align-items: center;
   background: rgba(255, 255, 255, .05);
   padding: 13px;
   border: 1px solid rgba(255, 255, 255, .07);
   margin-bottom: 18px
}

.admin-avatar {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #2a2826
}

.admin-user strong,
.admin-user small {
   display: block
}

.admin-user strong {
   font-size: .8rem
}

.admin-user small {
   color: #96908b;
   font-size: .65rem;
   margin-top: 3px
}

.admin-nav {
   display: grid;
   gap: 4px
}

.admin-nav a,
.admin-sidebar-bottom a {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #bcb7b1;
   text-decoration: none;
   padding: 11px 12px;
   font-size: .78rem;
   border-radius: 8px
}

.admin-nav a i,
.admin-sidebar-bottom a i {
   font-size: 1rem
}

.admin-nav a:hover,
.admin-nav a.active {
   background: #fff;
   color: #171514
}

.admin-sidebar-bottom {
   margin-top: auto;
   border-top: 1px solid rgba(255, 255, 255, .1);
   padding-top: 15px
}

.admin-main {
   margin-left: 260px;
   flex: 1;
   min-width: 0
}

.admin-topbar {
   height: 100px;
   background: #fff;
   border-bottom: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 38px;
   position: sticky;
   top: 0;
   z-index: 50
}

.admin-page-title {
   font-size: 1.7rem;
   margin: 4px 0 0
}

.store-preview {
   color: #171514;
   text-decoration: none;
   border: 1px solid var(--line);
   padding: 9px 12px;
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .08em
}

.admin-content {
   padding: 34px 38px
}

.admin-stat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
}

.admin-stat-card,
.admin-card {
   background: #fff;
   border: 1px solid #e8e9ea;
   border-radius: 14px;
   box-shadow: 0 12px 35px rgba(0, 0, 0, .04)
}

.admin-stat-card {
   padding: 22px
}

.admin-stat-icon {
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   background: #f5f0e8;
   color: #9b7440;
   margin-bottom: 17px
}

.admin-stat-number {
   font-family: 'Playfair Display';
   font-size: 1.9rem;
   margin-top: 5px
}

.admin-card {
   padding: 22px
}

.admin-card-head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   margin-bottom: 18px
}

.admin-card-head h2 {
   font-size: 1.5rem;
   margin: 5px 0
}

.admin-table {
   width: 100%;
   border-collapse: collapse;
   font-size: .78rem
}

.admin-table th {
   font-size: .62rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   color: #827b74;
   font-weight: 600
}

.admin-table th,
.admin-table td {
   padding: 13px 10px;
   border-bottom: 1px solid #eee
}

.admin-table a {
   color: #171514;
   text-decoration: none
}

.status-pill {
   display: inline-block;
   padding: 5px 8px;
   border-radius: 99px;
   font-size: .62rem;
   text-transform: capitalize;
   background: #eee;
   color: #555
}

.status-confirmed,
.status-processing {
   background: #eaf4ed;
   color: #39764d
}

.status-shipped {
   background: #edf2fa;
   color: #496b9c
}

.status-delivered {
   background: #e5f4eb;
   color: #2f7a4c
}

.status-cancelled,
.status-returned {
   background: #f9e9e9;
   color: #9a4c4c
}

.empty-table {
   text-align: center;
   padding: 35px !important;
   color: #888
}

.admin-overlay {
   display: none
}

.admin-menu-btn,
.sidebar-close {
   border: 0;
   background: transparent
}

.admin-login {
   min-height: 100vh;
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   background: #151413
}

.login-art {
   background: linear-gradient(120deg, rgba(17, 16, 15, .8), rgba(17, 16, 15, .25)), url('https://images.unsplash.com/photo-1617038220319-276d3cfab638?auto=format&fit=crop&w=1800&q=85') center/cover;
   display: flex;
   align-items: flex-end;
   padding: 8vw;
   color: #fff
}

.login-art .brand {
   color: #fff
}

.login-art-inner {
   max-width: 500px
}

.login-quote {
   font-family: 'Playfair Display';
   font-size: clamp(2.2rem, 4vw, 4.4rem);
   line-height: 1.05;
   margin: 45px 0 18px
}

.login-art small {
   color: #d5cec7
}

.login-panel {
   display: grid;
   place-items: center;
   background: #fbfaf8;
   padding: 40px
}

.login-box {
   width: min(430px, 100%)
}

.login-mobile-brand {
   display: none
}

.login-subtitle {
   color: #77706a;
   line-height: 1.6
}

.login-error {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   background: #fff0f0;
   border: 1px solid #f0cccc;
   color: #954a4a;
   padding: 12px 14px;
   font-size: .78rem
}

.login-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px
}

.login-footer {
   border-top: 1px solid var(--line);
   margin-top: 35px;
   padding-top: 20px
}

.login-footer a {
   color: #5f5852;
   text-decoration: none;
   font-size: .75rem
}

@media(max-width:991px) {
   .hero {
      height: calc(100svh - 96px);
      min-height: 540px
   }

   .shop-layout {
      grid-template-columns: 1fr
   }

   .desktop-categories {
      display: none
   }

   .mobile-filter-btn {
      display: inline-block
   }

   .admin-sidebar {
      transform: translateX(-100%);
      transition: .3s;
      box-shadow: 20px 0 60px rgba(0, 0, 0, .25)
   }

   .admin-nav-open .admin-sidebar {
      transform: none
   }

   .admin-nav-open .admin-overlay {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      z-index: 90
   }

   .admin-main {
      margin-left: 0
   }

   .admin-topbar {
      padding: 0 22px
   }

   .admin-content {
      padding: 25px 22px
   }

   .admin-stat-grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media(max-width:767px) {
   .announcement {
      font-size: .57rem
   }

   .announcement .container {
      gap: 7px;
      white-space: nowrap;
      overflow: hidden
   }

   .announcement .announcement-dot {
      display: none
   }

   .hero {
      height: 72svh;
      min-height: 500px
   }

   .hero-slide {
      background-position: 50% 50% !important
   }

   .hero-overlay {
      background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .48))
   }

   .hero-copy {
      align-self: flex-end;
      padding-bottom: 80px
   }

   .hero-copy h1 {
      font-size: clamp(3rem, 16vw, 4.8rem)
   }

   .hero-controls {
      bottom: 20px;
      right: 20px
   }

   .hero-controls button {
      width: 42px;
      height: 42px
   }

   .section-pad {
      padding: 65px 0
   }

   .split-title {
      align-items: start;
      gap: 15px
   }

   .section-title {
      margin-bottom: 30px
   }

   .section-title h2 {
      font-size: 2.3rem
   }

   .product-hover {
      display: none
   }

   .brand-story .story-lead {
      font-size: 1.45rem
   }

   .cta-whatsapp {
      padding: 42px 25px
   }

   .shop-hero {
      padding: 70px 0 55px
   }

   .shop-hero h1 {
      font-size: 3.5rem
   }

   .shop-toolbar {
      gap: 10px
   }

   .shop-sort {
      display: none
   }

   .shop-result-count {
      margin-left: auto
   }

   .product-detail .product-title {
      font-size: 2.9rem
   }

   .product-summary {
      position: static
   }

   .purchase-row {
      flex-direction: column
   }

   .qty {
      width: 100%;
      justify-content: center
   }

   .qty input {
      flex: 1
   }

   .cart-item {
      align-items: flex-start;
      flex-wrap: wrap
   }

   .cart-item>img {
      width: 88px;
      height: 100px
   }

   .cart-item-actions {
      width: 100%;
      justify-content: flex-end
   }

   .summary-card {
      position: static
   }

   .admin-stat-grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px
   }

   .admin-stat-card {
      padding: 16px
   }

   .admin-stat-number {
      font-size: 1.5rem
   }

   .admin-card {
      padding: 14px
   }

   .admin-topbar {
      height: 84px
   }

   .admin-page-title {
      font-size: 1.35rem
   }

   .store-preview {
      display: none
   }

   .login-art {
      display: none
   }

   .admin-login {
      display: block;
      background: #fbfaf8
   }

   .login-panel {
      min-height: 100vh;
      padding: 28px 22px
   }

   .login-mobile-brand {
      display: inline-block;
      margin-bottom: 55px
   }

   .login-quote {
      font-size: 2rem
   }
}

/* =========================================================
   INDIVAAJEWELS · ADMIN CATALOG / CUSTOMER SYSTEM
========================================================= */
.admin-products-head {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 30px;
   margin-bottom: 26px
}

.admin-section-title {
   font-family: 'Playfair Display', serif;
   font-size: clamp(2rem, 4vw, 3.2rem);
   margin: 8px 0 5px
}

.admin-muted {
   color: #7d756e;
   max-width: 720px;
   margin: 0;
   line-height: 1.65;
   font-size: .85rem
}

.admin-primary-btn,
.admin-danger-btn,
.admin-ghost-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   border: 0;
   text-decoration: none;
   min-height: 44px;
   padding: 0 17px;
   border-radius: 8px;
   font-size: .7rem;
   letter-spacing: .08em;
   text-transform: uppercase;
   font-weight: 700;
   cursor: pointer
}

.admin-primary-btn {
   background: #171514;
   color: #fff
}

.admin-primary-btn:hover {
   background: #2c2926;
   color: #fff
}

.admin-primary-btn.small {
   min-height: 38px;
   padding: 0 13px
}

.admin-primary-btn.wide {
   width: 100%;
   min-height: 50px
}

.admin-danger-btn {
   background: #fff0f0;
   color: #9a4949;
   border: 1px solid #f0d0d0;
   width: 100%;
   margin-top: 10px
}

.admin-ghost-btn {
   border: 1px solid var(--line);
   background: #fff;
   color: #403a35
}

.admin-alert {
   display: flex;
   gap: 10px;
   align-items: center;
   padding: 13px 15px;
   border-radius: 10px;
   margin-bottom: 20px;
   font-size: .8rem
}

.admin-alert.success {
   background: #edf7f0;
   border: 1px solid #cfe7d6;
   color: #39724c
}

.admin-alert.error {
   background: #fff0f0;
   border: 1px solid #f0cccc;
   color: #9a4949
}

.admin-product-editor {
   background: #f7f5f2;
   border: 1px solid #e8e2dc;
   border-radius: 18px;
   padding: 24px;
   margin-bottom: 24px
}

.editor-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
   margin-bottom: 24px
}

.editor-kicker {
   font-size: .58rem;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: #9a8c7d;
   font-weight: 700
}

.editor-head h2,
.catalog-head h2 {
   font-family: 'Playfair Display', serif;
   font-size: 1.65rem;
   margin: 7px 0 3px
}

.editor-head p {
   margin: 0;
   color: #7c746d;
   font-size: .78rem
}

.editor-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(340px, .85fr);
   gap: 18px
}

.editor-main,
.editor-side {
   display: grid;
   gap: 18px;
   align-content: start
}

.field-card {
   background: #fff;
   border: 1px solid #e5dfd8;
   border-radius: 14px;
   padding: 20px
}

.field-card-title {
   font-family: 'Playfair Display', serif;
   font-size: 1.05rem;
   margin-bottom: 18px;
   padding-bottom: 12px;
   border-bottom: 1px solid #eee9e4
}

.form-grid {
   display: grid;
   gap: 14px
}

.form-grid.two {
   grid-template-columns: 1fr 1fr
}

.form-grid.four {
   grid-template-columns: repeat(4, 1fr)
}

.form-grid .span-2 {
   grid-column: span 2
}

.field-card label {
   display: block;
   font-size: .65rem;
   text-transform: uppercase;
   letter-spacing: .11em;
   color: #706861;
   font-weight: 700;
   margin-bottom: 7px
}

.admin-input,
.field-card .form-control {
   width: 100%;
   border: 1px solid #ddd7d0;
   background: #fff;
   border-radius: 8px;
   min-height: 44px;
   padding: 10px 12px;
   color: #292522;
   font: inherit;
   font-size: .83rem;
   outline: none;
   transition: border-color .2s, box-shadow .2s
}

.admin-input:focus,
.field-card .form-control:focus {
   border-color: #b88a44;
   box-shadow: 0 0 0 3px rgba(184, 138, 68, .10)
}

textarea.admin-input {
   min-height: 130px;
   resize: vertical
}

.prefix-input {
   position: relative
}

.prefix-input>span {
   position: absolute;
   left: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: #9a8c7d
}

.prefix-input .admin-input {
   padding-left: 27px
}

.upload-zone {
   border: 1.5px dashed #cfc4b8;
   background: #fbf9f6;
   border-radius: 12px;
   padding: 28px 16px;
   text-align: center;
   display: grid;
   place-items: center;
   gap: 7px
}

.upload-zone>i {
   font-size: 2rem;
   color: #b88a44
}

.upload-zone strong {
   font-size: .86rem
}

.upload-zone>span {
   font-size: .66rem;
   color: #8a8179;
   margin-bottom: 8px
}

.media-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   margin-top: 12px
}

.media-tile {
   position: relative;
   border: 1px solid #e5dfd8;
   border-radius: 10px;
   background: #fff;
   overflow: hidden;
   padding-bottom: 10px
}

.media-tile img {
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: cover;
   display: block
}

.media-tile>span {
   display: block;
   padding: 7px 9px;
   font-size: .61rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #756c64
}

.cover-radio,
.remove-check {
   display: inline-flex !important;
   align-items: center;
   gap: 5px !important;
   text-transform: none !important;
   letter-spacing: 0 !important;
   font-size: .61rem !important;
   margin: 7px 7px 0 !important;
   color: #5f5750 !important
}

.cover-radio input {
   accent-color: #171514
}

.remove-check {
   color: #a05151 !important
}

.media-label {
   font-size: .62rem;
   text-transform: uppercase;
   letter-spacing: .13em;
   color: #8b8178;
   font-weight: 700;
   margin-top: 20px
}

.media-empty {
   border: 1px dashed #ddd4cb;
   padding: 18px;
   text-align: center;
   color: #948a81;
   font-size: .72rem;
   margin-top: 12px
}

.media-help {
   font-size: .68rem;
   color: #817970;
   line-height: 1.6;
   margin: 14px 0 0
}

.switch-row {
   display: flex !important;
   align-items: center;
   gap: 12px;
   margin: 13px 0 !important;
   text-transform: none !important;
   letter-spacing: 0 !important;
   color: #292522 !important
}

.switch-row input {
   appearance: none;
   width: 38px;
   height: 22px;
   border-radius: 99px;
   background: #d9d4cf;
   position: relative;
   flex: 0 0 auto
}

.switch-row input:after {
   content: '';
   position: absolute;
   width: 16px;
   height: 16px;
   background: #fff;
   border-radius: 50%;
   left: 3px;
   top: 3px;
   transition: .2s;
   box-shadow: 0 1px 4px #0002
}

.switch-row input:checked {
   background: #171514
}

.switch-row input:checked:after {
   left: 19px
}

.switch-row span {
   display: grid;
   gap: 3px
}

.switch-row strong {
   font-size: .78rem
}

.switch-row small {
   font-size: .66rem;
   color: #8b837b;
   font-weight: 400
}

.switch-row.big {
   padding: 13px;
   background: #fbf9f6;
   border: 1px solid #ebe4dc;
   border-radius: 10px
}

.editor-actions {
   display: grid
}

.catalog-card {
   padding: 0 !important;
   overflow: hidden
}

.catalog-head {
   padding: 21px 22px;
   border-bottom: 1px solid #eee9e4;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 20px
}

.catalog-head h2 span {
   font-family: 'DM Sans', sans-serif;
   font-size: .65rem;
   vertical-align: middle;
   background: #f0ece7;
   padding: 5px 8px;
   border-radius: 99px;
   color: #7b7168
}

.catalog-search {
   width: min(330px, 100%);
   height: 40px;
   border: 1px solid #ddd7d0;
   background: #fff;
   border-radius: 8px;
   display: flex;
   align-items: center;
   padding: 0 11px;
   gap: 8px
}

.catalog-search i {
   color: #9b9188
}

.catalog-search input {
   border: 0;
   outline: 0;
   width: 100%;
   font: inherit;
   font-size: .75rem;
   background: transparent
}

.admin-product-table {
   width: 100%;
   border-collapse: collapse;
   font-size: .75rem
}

.admin-product-table th {
   padding: 13px 18px;
   background: #fbfaf8;
   color: #8b8279;
   text-transform: uppercase;
   letter-spacing: .11em;
   font-size: .58rem;
   text-align: left
}

.admin-product-table td {
   padding: 14px 18px;
   border-top: 1px solid #eee9e4;
   vertical-align: middle
}

.catalog-product {
   display: flex;
   align-items: center;
   gap: 11px;
   min-width: 210px
}

.catalog-product img {
   width: 48px;
   height: 58px;
   border-radius: 7px;
   object-fit: cover;
   background: #f2eee9
}

.catalog-product strong {
   display: block;
   font-size: .78rem
}

.catalog-product small {
   display: block;
   color: #90877f;
   font-size: .62rem;
   margin-top: 3px
}

.compare-price {
   display: block;
   color: #aaa;
   text-decoration: line-through;
   font-size: .62rem
}

.stock-good {
   color: #4c7d59
}

.stock-low {
   color: #a24c4c
}

.status-pill {
   margin-right: 5px
}

.status-live {
   background: #e9f5ed;
   color: #39724b
}

.status-draft {
   background: #f1efed;
   color: #756d66
}

.status-featured {
   background: #f6ecd9;
   color: #8a612d
}

.table-action {
   display: inline-grid;
   place-items: center;
   width: 32px;
   height: 32px;
   border: 1px solid #e4ded8;
   background: #fff;
   color: #4d4640;
   border-radius: 7px;
   text-decoration: none;
   margin-left: 5px;
   cursor: pointer
}

.table-action:hover {
   background: #171514;
   color: #fff
}

.table-action.danger {
   color: #a24c4c
}

.empty-table {
   text-align: center;
   padding: 40px !important;
   color: #928981
}

.admin-stat-mini {
   display: grid;
   grid-template-columns: auto auto;
   column-gap: 9px;
   align-items: center;
   background: #fff;
   border: 1px solid #e6e0d9;
   border-radius: 12px;
   padding: 12px 16px
}

.admin-stat-mini i {
   grid-row: span 2;
   color: #b88a44;
   font-size: 1.2rem
}

.admin-stat-mini strong {
   font-family: 'Playfair Display';
   font-size: 1.3rem
}

.admin-stat-mini span {
   font-size: .58rem;
   color: #8b827a;
   text-transform: uppercase;
   letter-spacing: .1em
}

.customer-avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #f2ece4;
   color: #9a713c;
   font-family: 'Playfair Display';
   font-size: 1rem
}

.verified-dot {
   color: #4b8c60;
   margin-left: 4px
}

.settings-grid {
   display: grid;
   gap: 18px;
   max-width: 1100px
}

.settings-callout {
   display: flex;
   gap: 12px;
   padding: 15px;
   background: #fbf8f3;
   border: 1px solid #eee4d7;
   border-radius: 10px;
   margin-bottom: 16px
}

.settings-callout>i {
   color: #b88a44;
   font-size: 1.2rem
}

.settings-callout strong {
   font-size: .75rem
}

.settings-callout p {
   margin: 5px 0 0;
   font-size: .68rem;
   line-height: 1.6;
   color: #81786f
}

.settings-save {
   max-width: 1100px;
   display: flex;
   justify-content: flex-end;
   padding: 18px 0
}

.account-page {
   background: #f8f5f1;
   min-height: calc(100vh - 120px)
}

.account-auth-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   max-width: 1100px;
   margin: auto;
   background: #fff;
   box-shadow: 0 25px 80px rgba(28, 24, 20, .08)
}

.account-auth-art {
   padding: 70px;
   background: linear-gradient(130deg, rgba(18, 16, 14, .78), rgba(18, 16, 14, .3)), url('https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?auto=format&fit=crop&w=1500&q=85') center/cover;
   color: #fff;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   min-height: 760px
}

.account-auth-art h1 {
   font-size: clamp(3rem, 5vw, 5.4rem);
   line-height: .92;
   margin: 22px 0
}

.account-auth-art h1 em {
   color: #d8b777;
   font-weight: 400
}

.account-auth-art p {
   max-width: 430px;
   color: #e1d9d0;
   line-height: 1.7;
   font-size: .85rem
}

.eyebrow.light {
   color: #d7c8b6
}

.account-auth-panel {
   padding: 55px 50px;
   max-height: 760px;
   overflow: auto
}

.account-auth-panel h2,
.account-verify h1,
.account-header h1 {
   font-family: 'Playfair Display';
   font-size: 2.2rem;
   margin: 7px 0 22px
}

.account-form {
   display: grid;
   gap: 13px
}

.account-form label {
   font-size: .65rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-weight: 700;
   color: #6f665e
}

.account-form .form-control {
   margin-top: 7px;
   min-height: 46px;
   border-radius: 7px;
   border: 1px solid #ddd6cf
}

.account-submit {
   border: 0;
   background: #171514;
   color: #fff;
   min-height: 48px;
   padding: 0 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .68rem;
   font-weight: 700;
   margin-top: 5px
}

.account-divider {
   border-top: 1px solid var(--line);
   margin: 42px 0 30px;
   padding-top: 25px;
   color: #8a8179;
   font-size: .65rem;
   text-transform: uppercase;
   letter-spacing: .1em
}

.account-note {
   display: block;
   margin-top: 14px;
   color: #8b827a;
   line-height: 1.6
}

.account-alert {
   max-width: 1100px;
   margin: 0 auto 18px;
   padding: 13px 15px;
   border-radius: 9px;
   display: flex;
   gap: 9px;
   font-size: .78rem
}

.account-alert.success {
   background: #edf7f0;
   border: 1px solid #cfe7d6;
   color: #39724c
}

.account-alert.error {
   background: #fff0f0;
   border: 1px solid #f0cccc;
   color: #954a4a
}

.account-verify {
   max-width: 620px;
   margin: 50px auto;
   background: #fff;
   padding: 60px;
   text-align: center;
   box-shadow: 0 20px 70px #0000000d
}

.account-verify p {
   color: #77706a;
   line-height: 1.7
}

.account-form.narrow {
   max-width: 360px;
   margin: 25px auto 0
}

.otp-input {
   text-align: center !important;
   font-size: 1.5rem !important;
   letter-spacing: .3em
}

.account-link-btn {
   border: 0;
   background: transparent;
   color: #675e56;
   text-decoration: underline;
   text-underline-offset: 4px;
   font-size: .72rem
}

.account-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 20px;
   max-width: 1100px;
   margin: 0 auto 35px
}

.account-header p {
   color: #77706a;
   margin: 0
}

.account-grid {
   display: grid;
   grid-template-columns: 1.55fr .7fr;
   gap: 20px;
   max-width: 1100px;
   margin: auto
}

.account-card {
   background: #fff;
   border: 1px solid #e7e0d9;
   border-radius: 13px;
   padding: 24px
}

.account-card-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 15px;
   margin-bottom: 20px
}

.account-card h2 {
   font-family: 'Playfair Display';
   font-size: 1.5rem;
   margin: 5px 0 0
}

.address-list {
   display: grid;
   gap: 11px
}

.address-card {
   border: 1px solid #e3ddd6;
   border-radius: 10px;
   padding: 17px
}

.address-card.default {
   border-color: #b88a44;
   box-shadow: 0 0 0 1px #b88a44 inset
}

.address-top {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 12px
}

.address-label {
   font-size: .63rem;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-weight: 700
}

.default-badge {
   font-size: .57rem;
   background: #f5ead9;
   color: #8a612d;
   border-radius: 99px;
   padding: 4px 7px;
   margin-left: 6px
}

.address-actions {
   display: flex;
   gap: 5px
}

.address-actions button {
   border: 0;
   background: transparent;
   color: #81776f
}

.address-card strong {
   font-size: .78rem
}

.address-card p {
   font-size: .74rem;
   line-height: 1.7;
   color: #746b63;
   margin: 5px 0 0
}

.address-form {
   background: #fbf9f6;
   border: 1px solid #ece5de;
   border-radius: 10px;
   padding: 18px
}

.check-line {
   display: flex !important;
   gap: 8px;
   align-items: center;
   margin-top: 14px !important;
   text-transform: none !important;
   letter-spacing: 0 !important
}

.check-line input {
   accent-color: #171514
}

.account-submit.compact {
   width: max-content;
   padding: 0 22px;
   margin-top: 14px
}

.empty-account {
   padding: 30px;
   text-align: center;
   border: 1px dashed #ded6ce;
   color: #91877f;
   font-size: .75rem
}

.profile-card {
   text-align: center
}

.profile-avatar {
   width: 74px;
   height: 74px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: #f2ebe2;
   color: #9b723d;
   font-family: 'Playfair Display';
   font-size: 1.8rem;
   margin: 20px auto 12px
}

.profile-card h2 {
   font-size: 1.5rem
}

.profile-card p {
   color: #7d746c;
   font-size: .74rem;
   margin: 4px
}

.profile-status {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: #4d805b;
   background: #edf6ef;
   padding: 7px 10px;
   border-radius: 99px;
   font-size: .62rem;
   margin-top: 12px
}

.account-benefits {
   margin-top: 18px
}

.account-benefits h3 {
   font-family: 'Playfair Display';
   font-size: 1.3rem;
   margin: 12px 0
}

.account-benefits p {
   font-size: .74rem;
   color: #77706a;
   line-height: 1.7
}

.account-text-link {
   color: #171514;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .63rem;
   font-weight: 700
}

.checkout-page .section-title>p {
   color: #77706a;
   font-size: .8rem
}

.checkout-block {
   background: #fff;
   border: 1px solid var(--line);
   padding: 24px;
   margin-bottom: 16px
}

.checkout-block-head {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 15px;
   margin-bottom: 20px
}

.checkout-block-head h2 {
   font-family: 'Playfair Display';
   font-size: 1.5rem;
   margin: 6px 0 0
}

.checkout-addresses {
   display: grid;
   gap: 10px
}

.checkout-address {
   position: relative;
   display: grid;
   grid-template-columns: 20px 1fr 22px;
   gap: 10px;
   border: 1px solid #e3ddd6;
   padding: 15px;
   border-radius: 9px;
   cursor: pointer
}

.checkout-address:has(input:checked) {
   border-color: #b88a44;
   box-shadow: 0 0 0 1px #b88a44 inset;
   background: #fffcf7
}

.checkout-address input {
   margin-top: 4px;
   accent-color: #171514
}

.checkout-address strong,
.checkout-address b {
   display: block;
   font-size: .75rem
}

.checkout-address strong {
   font-size: .65rem;
   text-transform: uppercase;
   letter-spacing: .1em;
   margin-bottom: 7px
}

.checkout-address strong small {
   background: #f5ead9;
   color: #8a612d;
   border-radius: 99px;
   padding: 3px 6px;
   margin-left: 6px
}

.checkout-address span {
   font-size: .72rem;
   line-height: 1.7;
   color: #706860
}

.checkout-address>i {
   color: #b88a44;
   opacity: 0
}

.checkout-address:has(input:checked)>i {
   opacity: 1
}

.checkout-note {
   display: flex;
   gap: 8px;
   color: #81776f;
   font-size: .68rem;
   margin: 10px 2px 18px
}

.checkout-note i {
   color: #b88a44
}

.payment-choice {
   display: flex;
   align-items: center;
   gap: 12px;
   border: 1px solid #b88a44;
   background: #fffcf7;
   padding: 15px;
   border-radius: 9px
}

.payment-choice>i:first-child {
   font-size: 1.25rem;
   color: #9b723d
}

.payment-choice div {
   flex: 1
}

.payment-choice strong,
.payment-choice span {
   display: block
}

.payment-choice strong {
   font-size: .76rem
}

.payment-choice span {
   font-size: .66rem;
   color: #837a72;
   margin-top: 3px
}

.payment-choice>i:last-child {
   color: #b88a44
}

.payment-lock {
   font-size: .62rem;
   color: #4c7958
}

.checkout-save-address {
   display: inline-flex;
   gap: 7px;
   margin-top: 13px;
   color: #675e56;
   font-size: .68rem
}

.checkout-submit {
   width: 100%;
   margin-top: 16px
}

.checkout-summary h3 {
   font-family: 'Playfair Display';
   font-size: 1.7rem;
   margin: 8px 0 20px
}

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

.checkout-item strong,
.checkout-item span {
   font-size: .72rem
}

.checkout-item small {
   display: block;
   color: #8b8178;
   font-size: .62rem;
   margin-top: 3px
}

@media(max-width:991px) {

   .editor-grid,
   .account-auth-grid,
   .account-grid {
      grid-template-columns: 1fr
   }

   .account-auth-art {
      min-height: 420px
   }

   .account-auth-panel {
      max-height: none
   }

   .form-grid.four {
      grid-template-columns: 1fr 1fr
   }

   .admin-products-head {
      align-items: flex-start
   }

   .checkout-summary {
      position: static
   }
}

@media(max-width:767px) {

   .admin-products-head,
   .editor-head,
   .catalog-head,
   .account-header,
   .checkout-block-head {
      display: block
   }

   .admin-products-head .admin-primary-btn,
   .editor-head .admin-ghost-btn {
      margin-top: 15px
   }

   .editor-grid {
      grid-template-columns: 1fr
   }

   .form-grid.two,
   .form-grid.four {
      grid-template-columns: 1fr
   }

   .form-grid .span-2 {
      grid-column: auto
   }

   .media-grid {
      grid-template-columns: 1fr 1fr
   }

   .catalog-head {
      padding: 17px
   }

   .catalog-search {
      margin-top: 13px;
      width: 100%
   }

   .admin-product-table {
      min-width: 780px
   }

   .admin-content {
      padding: 20px 14px
   }

   .admin-product-editor {
      padding: 14px
   }

   .field-card {
      padding: 16px
   }

   .account-auth-art {
      padding: 40px 25px;
      min-height: 340px
   }

   .account-auth-panel {
      padding: 35px 22px
   }

   .account-verify {
      padding: 40px 22px
   }

   .account-grid {
      gap: 14px
   }

   .account-card {
      padding: 18px
   }

   .account-header .admin-ghost-btn {
      margin-top: 15px
   }

   .account-header {
      margin-bottom: 20px
   }

   .checkout-block {
      padding: 18px
   }

   .checkout-address {
      grid-template-columns: 18px 1fr 18px
   }

   .checkout-page .section-title h1 {
      font-size: 2.6rem
   }
}

/* Inline storefront search */
.header-search-trigger {
   border: 0;
   background: none;
   color: var(--ink);
   font-size: 1.1rem;
   padding: 0;
   display: flex;
   align-items: center;
   cursor: pointer
}

.quick-search {
   position: absolute;
   left: 0;
   right: 0;
   top: 100%;
   z-index: 30;
   background: rgba(255, 255, 255, .98);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   box-shadow: 0 18px 35px rgba(23, 21, 20, .12);
   animation: search-drop .2s ease-out
}

.quick-search[hidden] {
   display: none
}

.quick-search .container {
   padding-top: 24px;
   padding-bottom: 27px
}

.quick-search-form {
   display: flex;
   align-items: center;
   gap: 14px;
   border-bottom: 1px solid var(--ink);
   padding: 6px 0 13px
}

.quick-search-form>i {
   font-size: 1.1rem
}

.quick-search-form input {
   border: 0;
   outline: 0;
   flex: 1;
   font-size: 1.05rem;
   background: transparent;
   color: var(--ink)
}

.quick-search-form input::placeholder {
   color: #aaa19a
}

.quick-search-form button {
   border: 0;
   background: none;
   color: var(--muted);
   padding: 4px;
   cursor: pointer
}

.quick-search-form button[hidden] {
   display: none
}

.quick-search-results {
   max-width: 760px
}

.quick-search-heading,
.quick-search-hint,
.quick-search-loading {
   color: var(--muted);
   font-size: .72rem;
   letter-spacing: .09em;
   text-transform: uppercase;
   padding: 18px 0 12px
}

.quick-search-heading strong {
   color: var(--ink)
}

.quick-search-list {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px 28px
}

.quick-search-product {
   display: flex;
   align-items: center;
   gap: 12px;
   color: var(--ink);
   text-decoration: none;
   padding: 8px 0;
   border-bottom: 1px solid var(--line)
}

.quick-search-product img {
   width: 54px;
   height: 62px;
   object-fit: cover;
   background: var(--cream)
}

.quick-search-product span {
   display: grid;
   gap: 5px;
   min-width: 0
}

.quick-search-product strong {
   font-size: .78rem;
   font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.quick-search-product small {
   font-size: .75rem;
   color: var(--muted)
}

.quick-search-product>i {
   margin-left: auto;
   font-size: .8rem;
   color: var(--gold);
   opacity: 0;
   transition: opacity .2s
}

.quick-search-product:hover>i {
   opacity: 1
}

.quick-search-all {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: var(--ink);
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: .1em;
   font-size: .65rem;
   font-weight: 700;
   margin-top: 18px
}

.quick-search-empty {
   padding: 22px 0;
   color: var(--muted);
   font-size: .85rem
}

.quick-search-empty>i {
   font-size: 1.4rem;
   color: var(--gold)
}

.quick-search-empty p {
   margin: 8px 0 12px
}

.quick-search-empty a {
   color: var(--ink);
   font-size: .7rem;
   text-transform: uppercase;
   letter-spacing: .1em
}

.quick-search-loading {
   animation: search-pulse 1s infinite
}

.quick-search-hint {
   padding-bottom: 0
}

@keyframes search-drop {
   from {
      opacity: 0;
      transform: translateY(-8px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

@keyframes search-pulse {
   50% {
      opacity: .45
   }
}

@media(max-width:767px) {
   .quick-search .container {
      padding-top: 16px;
      padding-bottom: 20px
   }

   .quick-search-form {
      padding-bottom: 11px
   }

   .quick-search-form input {
      font-size: 1rem
   }

   .quick-search-list {
      grid-template-columns: 1fr;
      gap: 0
   }

   .quick-search-product img {
      width: 48px;
      height: 56px
   }

   .quick-search-results {
      max-height: calc(100svh - 180px);
      overflow: auto
   }

   .quick-search-product>i {
      opacity: 1
   }
}

.hero {
   height: clamp(420px, calc(100svh - 280px), 650px);
   min-height: 420px
}

.category-showcase {
   padding: 58px 0 20px;
   background: var(--white)
}

.category-showcase-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
}

.category-showcase-card {
   position: relative;
   display: block;
   aspect-ratio: 1/1.08;
   overflow: hidden;
   color: #fff;
   text-decoration: none;
   background: var(--cream)
}

.category-showcase-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .7s ease
}

.category-showcase-card:after {
   content: '';
   position: absolute;
   inset: 45% 0 0;
   background: linear-gradient(transparent, rgba(23, 21, 20, .65))
}

.category-showcase-card span {
   position: absolute;
   z-index: 1;
   left: 18px;
   bottom: 17px;
   text-transform: uppercase;
   letter-spacing: .13em;
   font-size: .72rem
}

.category-showcase-card i {
   position: absolute;
   z-index: 1;
   right: 18px;
   bottom: 16px;
   font-size: .9rem
}

.category-showcase-card:hover img {
   transform: scale(1.06)
}

@media(max-width:991px) {
   .hero {
      height: clamp(360px, 56svh, 520px);
      min-height: 360px
   }

   .category-showcase {
      padding: 45px 0 12px
   }

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

@media(max-width:767px) {
   .hero {
      height: clamp(280px, 42svh, 360px);
      min-height: 280px
   }

   .category-showcase {
      padding: 42px 0 5px
   }

   .category-showcase .section-title h2 {
      font-size: 2.1rem
   }

   .category-showcase-grid {
      gap: 10px
   }

   .category-showcase-card {
      aspect-ratio: 1/1.12
   }

   .category-showcase-card span {
      left: 12px;
      bottom: 12px;
      font-size: .62rem
   }

   .category-showcase-card i {
      right: 12px;
      bottom: 11px
   }
}

.category-banner {
   min-height: 310px;
   background: linear-gradient(90deg, rgba(23, 21, 20, .72), rgba(23, 21, 20, .12)), var(--category-banner) center/cover;
   display: flex;
   align-items: center;
   color: #fff
}

.category-banner-copy {
   max-width: 560px;
   padding: 55px 0
}

.category-banner .eyebrow {
   color: #fff
}

.category-banner h1 {
   font-size: clamp(3rem, 6vw, 5.5rem);
   margin: 12px 0
}

.category-banner p {
   max-width: 470px;
   color: rgba(255, 255, 255, .82);
   margin: 0;
   line-height: 1.7
}

.category-banner+.section-pad {
   padding-top: 32px
}

@media(max-width:767px) {
   .category-banner {
      min-height: 220px
   }

   .category-banner-copy {
      padding: 34px 0
   }

   .category-banner h1 {
      font-size: 3rem;
      margin: 8px 0
   }

   .category-banner p {
      font-size: .8rem;
      line-height: 1.5
   }
}

.site-header .navbar>.container {
   position: relative
}

.site-header .navbar-brand img {
   display: block;
   width: 165px;
   max-width: 100%;
   height: auto
}

.site-header .nav-icons {
   flex-shrink: 0
}

.site-header .nav-icons a,
.site-header .nav-icons button {
   width: 22px;
   height: 28px;
   justify-content: center
}

@media(min-width:992px) {
   .site-header .navbar>.container {
      padding-top: 8px !important;
      padding-bottom: 8px !important
   }
}

.footer .brand,
.admin-brand .brand,
.login-art .brand,
.login-mobile-brand {
   display: block;
   width: 150px;
   height: 42px;
   background: url('../images/indivajewels.webp') center/contain no-repeat;
   font-size: 0
}

.footer .brand span,
.admin-brand .brand span,
.login-art .brand span,
.login-mobile-brand span {
   display: none
}

.legal-copy {
   max-width: 780px
}

.legal-copy h2 {
   font-family: 'Playfair Display', serif;
   font-size: 1.65rem;
   margin: 2.2rem 0 .65rem
}

.legal-copy p {
   color: var(--muted);
   line-height: 1.85
}

@media(max-width:991px) {
   .site-header .navbar {
      padding: 0
   }

   .site-header .navbar>.container {
      min-height: 64px;
      padding: 7px 15px !important;
      align-items: center;
      flex-wrap: wrap
   }

   .site-header .navbar-brand {
      order: 0;
      display: flex;
      align-items: center;
      min-width: 0;
      margin-right: auto;
      line-height: 1
   }

   .site-header .navbar-toggler {
      order: 2;
      margin-left: 12px;
      padding: 0;
      height: 36px;
      display: flex;
      align-items: center
   }

   .site-header .nav-icons {
      order: 1;
      padding: 0;
      gap: 10px !important;
      height: 36px;
      align-items: center
   }

   .site-header .nav-icons a,
   .site-header .nav-icons button {
      font-size: 1rem
   }

   .site-header .navbar-collapse {
      order: 3;
      display: none;
      flex: 0 0 100%;
      width: 100%;
      min-width: 0;
      padding: 18px 0 22px
   }

   .site-header .navbar-collapse.show {
      display: block
   }

   .site-header .navbar-collapse .navbar-nav {
      display: block;
      width: 100%
   }

   .site-header .navbar-collapse .nav-link {
      font-size: .95rem;
      letter-spacing: .18em;
      padding: 16px 0 !important;
      border-bottom: 1px solid var(--line)
   }

   .site-header .navbar-collapse .nav-link:after {
      display: none
   }

   .site-header .navbar-collapse li:last-child .nav-link {
      border-bottom: 0
   }

   .site-header .navbar-brand img {
      display: block;
      width: 145px;
      height: auto;
      max-width: 100%
   }
}

@media(max-width:575px) {
   .site-header .navbar>.container {
      min-height: 58px;
      padding: 5px 12px !important
   }

   .site-header .navbar-brand img {
      width: 135px
   }

   .site-header .nav-icons {
      gap: 7px !important
   }

   .site-header .nav-icons a,
   .site-header .nav-icons button {
      width: 20px
   }

   .site-header .navbar-toggler {
      margin-left: 7px
   }
}

.product-image-wrap .product-hover {
   left: auto;
   right: 12px;
   bottom: auto;
   top: 12px;
   width: 32px;
   height: 32px;
   padding: 0;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font-size: 0;
   line-height: 1;
   z-index: 3
}

.product-image-wrap .product-hover i {
   margin: 0;
   font-size: .9rem
}

.product-rating {
   font-size: .75rem;
   color: #6f665f;
   margin-top: 8px
}

.product-rating span {
   color: #f0a51a
}

.product-rating small {
   color: #9a9189
}

.quick-add {
   width: 100%;
   border: 0;
   background: #b88a44;
   color: #fff;
   padding: 10px 12px;
   margin-top: 12px;
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: .03em
}

.quick-add:hover {
   background: #a47738
}

.quick-add:disabled {
   opacity: .65
}

.product-image-wrap {
   position: relative
}

.product-image-wrap .product-img-secondary {
   position: absolute;
   inset: 0;
   transform: translateX(100%);
   transition: transform .45s ease
}

.product-card:hover .product-img-secondary {
   transform: translateX(0)
}

.review-photo {
   display: block;
   width: 100%;
   max-height: 220px;
   object-fit: cover;
   margin: 12px 0;
   border-radius: 2px
}

.review-card-photo {
   width: 100%;
   height: 180px;
   object-fit: cover;
   margin-bottom: 18px
}

.cart-qty {
   width: 132px
}

.cart-qty button {
   width: 34px;
   height: 34px
}

.cart-qty input {
   text-align: center;
   padding-left: 4px;
   padding-right: 4px
}

.size-picker-modal {
   border: 0;
   border-radius: 4px;
   box-shadow: 0 24px 70px rgba(23, 21, 20, .2)
}

.size-picker-modal .modal-header {
   border-bottom: 1px solid var(--line);
   padding: 24px
}

.size-picker-modal .modal-body {
   padding: 24px
}

.size-picker-options {
   display: flex;
   flex-wrap: wrap;
   gap: 10px
}

.size-picker-options .size-option {
   min-width: 64px
}

.editorial img,
.macro img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: cover
}

.editorial img {
   aspect-ratio: 1.15/1
}

.macro img {
   aspect-ratio: 1/1.08
}

.about-band {
   background: var(--cream)
}

@media(max-width:767px) {
   .editorial {
      gap: 1.5rem !important
   }

   .editorial .col-lg-7,
   .editorial .col-lg-5 {
      width: 100%
   }

   .editorial img {
      aspect-ratio: 1/1.05
   }

   .editorial h1 {
      font-size: 2.65rem
   }

   .editorial .lead {
      font-size: 1rem;
      line-height: 1.75
   }

   .macro {
      gap: 10px
   }

   .macro img {
      aspect-ratio: 1/1.05
   }

   .about-band .section-title h2 {
      font-size: 2.25rem
   }

   .about-band .section-title p {
      font-size: .95rem;
      line-height: 1.7
   }

   .about-band+.section-pad img {
      height: auto !important;
      min-height: 0 !important;
      aspect-ratio: 1/1;
      object-fit: cover
   }
}


/* =========================================================
   INDIVAA JEWELS — MOBILE STICKY HEADER
   ========================================================= */

@media (max-width: 767px) {

    html {
        overflow-x: clip !important;
    }

    body {
        overflow-x: clip !important;
        padding-top: 0 !important;
    }

    /* WHITE NAVIGATION HEADER */
    .site-header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;

        width: 100% !important;
        height: auto !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 99999 !important;

        background: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;
        -webkit-transform: none !important;

        overflow: visible !important;
    }

    /* NAVIGATION ROW */
    .site-header .navbar {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    .site-header .navbar > .container {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;

        margin: 0 !important;
        padding: 7px 12px !important;

        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;

        overflow: visible !important;
    }

    /* LOGO */
    .site-header .navbar-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;

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

        margin: 0 auto 0 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    .site-header .navbar-brand img {
        display: block !important;

        width: 145px !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }

    /* RIGHT-SIDE ICONS */
    .site-header .nav-icons {
        flex: 0 0 auto !important;

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

        gap: 8px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header .nav-icons a,
    .site-header .nav-icons button {
        width: 24px !important;
        height: 32px !important;

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

        margin: 0 !important;
        padding: 0 !important;
    }

    /* HAMBURGER */
    .site-header .navbar-toggler {
        flex: 0 0 auto !important;

        width: 30px !important;
        height: 32px !important;

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

        margin: 0 0 0 7px !important;
        padding: 0 !important;

        transform: none !important;
    }

    /* MOBILE MENU */
    .site-header .navbar-collapse {
        position: absolute !important;

        top: 64px !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;

        background: #fff !important;

        z-index: 99998 !important;

        transform: none !important;
    }
}