:root{
  --bg:#FCFAF7;
  --bg2:#F8F3EC;
  --bg3:#F2EBDD;

  --teal:#124D56;
  --deep:#0B3D45;
  --teal-soft:#1E626A;

  --gold1:#FFF8DF;
  --gold2:#F6E29F;
  --gold3:#E5C067;
  --gold4:#C89433;
  --gold5:#97661A;

  --text:#666;
  --text-dark:#2F3C3D;
  --muted:#8A8276;

  --white:#fff;
  --line:#E8DCCB;
  --line-soft:rgba(200,148,51,.14);

  --success:#21654E;
  --danger:#8B4139;
  --warning:#9A6A18;

  --shadow-sm:0 6px 20px rgba(34,44,45,.05);
  --shadow:0 16px 50px rgba(34,44,45,.08);
  --shadow-lg:0 28px 80px rgba(11,61,69,.12);

  --radius-sm:5px;
  --radius:10px;
  --radius-lg:16px;
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-width:320px;

  background:
    radial-gradient(
      circle at 15% 10%,
      rgba(246,226,159,.11),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      var(--bg),
      #fff
    );

  color:var(--text);

  font:
    400 15px/1.75
    Poppins,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{
  background:var(--gold3);
  color:var(--deep);
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

button:disabled{
  cursor:not-allowed;
}

img{
  max-width:100%;
  display:block;
}

input,
select,
textarea{
  border-radius:0;
}

.container{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.product-name,
.product-copy h1,
.order-head h1,
.auth-intro h1,
.auth-panel h2,
.admin-card h2,
.site-footer h3,
.stat strong{
  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  color:var(--teal);
  font-weight:500;
  letter-spacing:-.012em;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

.page-title,
h1{
  line-height:1.04;
}


/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:100;

  background:rgba(252,250,247,.94);

  border-bottom:
    1px solid
    rgba(200,148,51,.17);

  box-shadow:
    0 5px 24px rgba(11,61,69,.035);

  backdrop-filter:
    blur(18px)
    saturate(120%);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(120%);
}

.nav-wrap{
  min-height:94px;

  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:34px;
}


/* =========================================================
   BRAND
========================================================= */

.brand{
  display:flex;
  align-items:center;

  gap:14px;

  flex-shrink:0;

  color:var(--teal);

  font:
    600 38px/1
    "Cormorant Garamond",
    Georgia,
    serif;

  letter-spacing:.14em;
  white-space:nowrap;

  transition:
    color .2s ease;
}

.brand:hover{
  color:var(--teal);
}

.brand img{
  width:64px;
  height:64px;

  border-radius:50%;

  object-fit:cover;

  border:
    1px solid
    rgba(200,148,51,.62);

  background:var(--bg2);

  box-shadow:
    0 8px 24px rgba(151,102,26,.14),
    0 0 0 5px rgba(246,226,159,.14);

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

.brand:hover img{
  transform:scale(1.025);

  box-shadow:
    0 11px 29px rgba(151,102,26,.18),
    0 0 0 5px rgba(246,226,159,.19);
}

.brand small{
  position:relative;
  top:-1.1em;

  margin-left:2px;

  font:
    700 9px/1
    Poppins,
    sans-serif;

  letter-spacing:.12em;
}


/* =========================================================
   MAIN NAV
========================================================= */

.nav{
  display:flex;

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

  gap:36px;
}

.nav a{
  position:relative;

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

  height:42px;

  color:var(--deep);

  font:
    600 13px/1
    Poppins,
    sans-serif;

  letter-spacing:.065em;
  text-transform:uppercase;

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

.nav a::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:4px;

  width:0;
  height:1px;

  transform:translateX(-50%);

  background:
    linear-gradient(
      90deg,
      var(--gold5),
      var(--gold2),
      var(--gold5)
    );

  transition:
    width .25s ease;
}

.nav a:hover{
  color:var(--gold5);

  transform:translateY(-1px);
}

.nav a:hover::after{
  width:100%;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.nav-right{
  display:flex;

  align-items:center;

  gap:11px;

  flex-shrink:0;
}

.icon-link{
  position:relative;

  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  flex-shrink:0;

  color:var(--teal);

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

  border:
    1px solid
    rgba(200,148,51,.24);

  border-radius:50%;

  font-size:23px;
  font-weight:500;
  line-height:1;

  box-shadow:
    0 4px 14px rgba(11,61,69,.035);

  transition:
    color .22s ease,
    background .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.icon-link:hover{
  color:var(--gold5);

  background:#fff;

  border-color:
    rgba(200,148,51,.5);

  transform:translateY(-2px);

  box-shadow:
    0 9px 23px rgba(151,102,26,.1);
}

.menu{
  display:none;

  width:44px;
  height:44px;

  place-items:center;

  border:
    1px solid
    rgba(200,148,51,.24);

  border-radius:50%;

  background:#fff;

  color:var(--teal);

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


/* =========================================================
   CART COUNT
========================================================= */

.nav-right .icon-link{
  position:relative;
}

.cart-count-badge{
  position:absolute;

  top:-5px;
  right:-5px;

  min-width:20px;
  height:20px;

  padding:0 5px;

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

  border:
    2px solid
    var(--bg);

  border-radius:999px;

  background:var(--teal);

  color:#fff;

  font:
    700 10px/1
    Poppins,
    sans-serif;

  box-shadow:
    0 4px 12px rgba(11,61,69,.18);

  pointer-events:none;
}


/* =========================================================
   AUTH
========================================================= */

.auth-slot{
  display:flex;

  align-items:center;

  gap:10px;
}

.header-auth-link{
  color:var(--teal);

  font:
    600 13px/1
    Poppins,
    sans-serif;

  letter-spacing:.045em;

  transition:
    color .2s ease;
}

.header-auth-link:hover{
  color:var(--gold5);
}

.header-signup{
  min-height:44px;

  padding:10px 18px;

  border-radius:5px;

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

.header-admin-link{
  display:inline-flex;

  align-items:center;

  min-height:38px;

  padding:0 10px;

  color:var(--gold5);

  font:
    700 12px/1
    Poppins,
    sans-serif;

  letter-spacing:.05em;

  text-transform:uppercase;
}

.header-logout{
  border:0;

  background:transparent;

  color:var(--teal);

  font:
    600 12px/1
    Poppins,
    sans-serif;

  letter-spacing:.045em;

  padding:8px 4px;

  transition:
    color .2s ease;
}

.header-logout:hover{
  color:var(--gold5);
}


/* =========================================================
   HERO
========================================================= */

.hero{
  padding:84px 0 68px;
}

.hero-grid{
  display:grid;

  grid-template-columns:
    1fr
    .94fr;

  gap:66px;

  align-items:center;
}

.eyebrow{
  display:inline-flex;

  align-items:center;

  gap:10px;

  font:
    600 10px/1
    Poppins,
    sans-serif;

  letter-spacing:.24em;

  text-transform:uppercase;

  color:var(--gold5);
}

.eyebrow::before{
  content:"";

  width:26px;
  height:1px;

  background:
    linear-gradient(
      90deg,
      var(--gold4),
      var(--gold2)
    );
}

.hero h1{
  font-size:
    clamp(
      48px,
      6vw,
      76px
    );

  margin:
    14px 0 24px;

  max-width:700px;
}

.hero p{
  max-width:540px;

  color:#6D6B66;

  font-size:16px;

  line-height:1.85;
}

.hero-art{
  position:relative;

  min-height:540px;

  overflow:hidden;

  display:flex;

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

  border:
    1px solid
    rgba(200,148,51,.23);

  border-radius:8px;

  background:
    radial-gradient(
      circle at 30% 25%,
      #fff 0,
      #fbf4e8 35%,
      #efe4d4 100%
    );

  box-shadow:var(--shadow-lg);
}

.hero-art::before{
  content:"";

  position:absolute;
  inset:12px;

  border:
    1px solid
    rgba(200,148,51,.17);

  border-radius:4px;

  pointer-events:none;
}

.hero-art::after{
  content:"";

  position:absolute;
  inset:26px;

  border:
    1px solid
    rgba(200,148,51,.28);

  pointer-events:none;
}

.hero-logo{
  position:absolute;

  inset:0;

  display:grid;

  place-items:center;
}

.hero-logo img{
  width:290px;
  height:290px;

  border-radius:50%;

  object-fit:cover;

  box-shadow:
    0 22px 55px rgba(151,102,26,.16),
    0 0 0 9px rgba(255,255,255,.35);
}


/* =========================================================
   SECTIONS
========================================================= */

.section{
  padding:82px 0;
}

.section-head{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:24px;

  margin-bottom:32px;
}

.section h2{
  font-size:50px;

  margin:8px 0 0;

  letter-spacing:-.02em;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:24px;
}

.product-card{
  position:relative;

  overflow:hidden;

  min-width:0;

  background:#fff;

  border:
    1px solid
    rgba(200,148,51,.17);

  border-radius:8px;

  box-shadow:
    0 7px 25px rgba(35,51,53,.035);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

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

  border-color:
    rgba(200,148,51,.32);

  box-shadow:
    0 20px 50px rgba(35,51,53,.09),
    0 4px 16px rgba(151,102,26,.05);
}

.product-media{
  position:relative;

  aspect-ratio:3/4;

  overflow:hidden;

  background:var(--bg2);
}

.product-media::after{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.08),
      transparent 35%,
      rgba(11,61,69,.035)
    );
}

.product-media img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .75s cubic-bezier(.2,.7,.2,1),
    filter .4s ease;
}

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

.product-info{
  padding:18px 18px 20px;

  min-width:0;
}

.product-name{
  display:block;

  color:var(--teal);

  font-size:25px;

  line-height:1.12;

  margin:
    5px 0 10px;
}

.price-row{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  margin-bottom:10px;

  color:var(--gold5);

  font-size:14px;

  font-weight:700;
}

.price-row del{
  color:#aaa;

  font-weight:400;
}

.product-stock-hint{
  margin:
    -2px 0 13px;

  color:var(--muted);

  font:
    600 10px/1.4
    Poppins,
    sans-serif;

  letter-spacing:.05em;

  text-transform:uppercase;

  white-space:normal;
}

.product-info .btn{
  width:100%;
}


/* =========================================================
   PRODUCT STOCK LABEL
========================================================= */

.product-stock-label{
  position:absolute;

  left:13px;
  bottom:13px;

  z-index:4;

  padding:6px 10px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:3px;

  background:
    rgba(11,61,69,.92);

  color:#fff;

  font:
    600 9px/1
    Poppins,
    sans-serif;

  letter-spacing:.07em;

  text-transform:uppercase;
}


/* =========================================================
   PRODUCT ACTIONS
========================================================= */

.product-actions{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:9px;

  margin-top:4px;

  align-items:stretch;

  min-width:0;
}

.product-actions > *{
  min-width:0;
}

.product-actions .btn,
.product-actions .bag-quantity-control{
  width:100%;

  min-width:0;
}


/* =========================================================
   BAG QUANTITY CONTROL
========================================================= */

.bag-quantity-control{
  width:100%;

  min-width:0;
  min-height:46px;

  display:grid;

  /*
     Equal left/right columns are intentional.
     This keeps "In bag · 1" perfectly centered
     even when the + button disappears.
  */

  grid-template-columns:
    36px
    minmax(0,1fr)
    36px;

  align-items:stretch;

  overflow:hidden;

  border:
    1px solid
    var(--teal);

  border-radius:5px;

  background:#fff;

  color:var(--teal);
}

.bag-quantity-control.no-plus{
  grid-template-columns:
    36px
    minmax(0,1fr)
    36px;
}


/* =========================================================
   QUANTITY BUTTONS
========================================================= */

.bag-qty-btn{
  width:36px;
  min-width:36px;

  height:44px;
  min-height:44px;

  display:flex;

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

  padding:0;

  border:0;

  background:transparent;

  color:var(--teal);

  font:
    600 18px/1
    Poppins,
    sans-serif;

  flex-shrink:0;

  transition:
    color .2s ease,
    background .2s ease;
}

.bag-qty-btn:hover{
  background:
    rgba(248,243,236,.85);

  color:var(--gold5);
}

.bag-qty-btn:disabled{
  cursor:not-allowed;

  opacity:.42;

  color:var(--muted);

  background:transparent;
}

.bag-qty-btn:focus-visible{
  outline:
    2px solid
    var(--gold4);

  outline-offset:-2px;
}


/* =========================================================
   QUANTITY TEXT
========================================================= */

.bag-qty-value{
  min-width:0;
  width:100%;

  height:44px;
  min-height:44px;

  display:flex;

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

  padding:
    0 2px;

  overflow:visible;

  color:var(--teal);

  font:
    600 10.5px/1
    Poppins,
    sans-serif;

  letter-spacing:.01em;

  white-space:nowrap;

  text-align:center;

  flex:1 1 auto;
}


/* =========================================================
   TRASH ICON
========================================================= */

.bag-remove-icon{
  width:14px;
  height:14px;

  display:block;

  flex:0 0 auto;
}


/* =========================================================
   GO TO BAG
========================================================= */

.go-to-bag{
  width:100%;

  min-width:0;
  min-height:46px;

  display:flex;

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

  padding:
    12px 8px;

  white-space:nowrap;

  font:
    600 11px/1
    Poppins,
    sans-serif;

  letter-spacing:.02em;
}


/* =========================================================
   BUTTONS
========================================================= */

.btn{
  position:relative;

  isolation:isolate;

  min-height:46px;

  display:inline-flex;

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

  gap:8px;

  padding:12px 20px;

  overflow:hidden;

  border:
    1px solid
    var(--teal);

  border-radius:5px;

  background:transparent;

  color:var(--teal);

  font:
    600 12px/1
    Poppins,
    sans-serif;

  letter-spacing:.065em;

  text-transform:uppercase;

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

.btn::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:-1;

  background:var(--teal);

  transform:translateY(100%);

  transition:
    transform .25s ease;
}

.btn:hover{
  color:#fff;

  border-color:var(--teal);

  transform:translateY(-1px);

  box-shadow:
    0 10px 24px rgba(18,77,86,.14);
}

.btn:hover::before{
  transform:translateY(0);
}

.btn-gold{
  background:
    linear-gradient(
      135deg,
      var(--gold2),
      var(--gold4)
    );

  border-color:var(--gold4);

  color:#2B200C;

  box-shadow:
    0 9px 25px rgba(200,148,51,.18);
}

.btn-gold::before{
  background:
    linear-gradient(
      135deg,
      var(--gold3),
      var(--gold5)
    );
}

.btn-gold:hover{
  color:#fff;

  border-color:var(--gold5);

  box-shadow:
    0 12px 30px rgba(151,102,26,.2);
}

.btn-outline{
  background:#fff;
}

.btn[disabled]{
  opacity:.48;

  transform:none;

  box-shadow:none;
}

.btn[disabled]::before{
  display:none;
}


/* =========================================================
   FORMS / PANELS
========================================================= */

.form-card,
.panel{
  background:
    rgba(255,255,255,.93);

  border:
    1px solid
    rgba(200,148,51,.17);

  border-radius:10px;

  box-shadow:var(--shadow);

  padding:30px;
}

.form-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:18px;
}

.field{
  display:flex;

  flex-direction:column;

  gap:7px;
}

.field.full{
  grid-column:1/-1;
}

.field label{
  color:var(--teal);

  font-size:12px;

  font-weight:600;

  letter-spacing:.02em;
}

.field input,
.field select,
.field textarea{
  width:100%;

  min-height:48px;

  border:
    1px solid
    #E1D5C5;

  background:#fff;

  padding:12px 14px;

  outline:none;

  color:var(--text-dark);

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

.field textarea{
  min-height:130px;

  resize:vertical;
}

.field input::placeholder,
.field textarea::placeholder{
  color:#A9A198;
}

.field input:hover,
.field select:hover,
.field textarea:hover{
  border-color:#D5C5AE;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--gold4);

  background:#FFFEFC;

  box-shadow:
    0 0 0 3px rgba(200,148,51,.11),
    0 8px 20px rgba(200,148,51,.05);
}


/* =========================================================
   PAGE
========================================================= */

.page{
  padding:60px 0;
}

.page-title{
  font-size:
    clamp(
      46px,
      6vw,
      64px
    );

  margin:
    8px 0 38px;
}


/* =========================================================
   SHOP TOOLBAR
========================================================= */

.toolbar{
  display:flex;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

  margin-bottom:32px;

  min-width:0;
}

.toolbar input,
.toolbar select{
  min-height:46px;

  border:
    1px solid
    var(--line);

  border-radius:4px;

  padding:11px 14px;

  color:var(--text-dark);

  background:#fff;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.toolbar input{
  flex:
    1 1 300px;

  min-width:220px;
}

.toolbar select{
  flex:
    0 1 255px;

  min-width:180px;
}

.toolbar input:focus,
.toolbar select:focus{
  border-color:var(--gold4);

  box-shadow:
    0 0 0 3px
    rgba(200,148,51,.1);
}


/* =========================================================
   PRODUCT DETAIL
========================================================= */

.product-detail{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:60px;

  align-items:start;
}

.gallery-main{
  position:relative;

  aspect-ratio:3/4;

  overflow:hidden;

  background:var(--bg2);

  border:
    1px solid
    var(--line);

  box-shadow:var(--shadow);
}

.gallery-main img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.thumbs{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:13px;
}

.thumb{
  width:78px;
  height:96px;

  padding:0;

  overflow:hidden;

  border:
    1px solid
    var(--line);

  background:#fff;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.thumb:hover{
  border-color:var(--gold4);

  box-shadow:
    0 6px 16px
    rgba(151,102,26,.1);
}

.thumb img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.product-copy h1{
  font-size:
    clamp(
      48px,
      5vw,
      60px
    );

  margin:
    5px 0 13px;
}

.price-xl{
  color:var(--gold5);

  font-size:27px;

  font-weight:700;

  margin-bottom:20px;
}

.specs{
  display:grid;

  grid-template-columns:
    155px
    1fr;

  border-top:
    1px solid
    var(--line);

  margin:28px 0;
}

.specs > *{
  margin:0;

  padding:11px 0;

  border-bottom:
    1px solid
    var(--line);
}

.specs dt{
  color:var(--teal);

  font-weight:600;
}

.stock{
  color:var(--teal);

  font-weight:600;
}


/* =========================================================
   CART / CHECKOUT
========================================================= */

.cart-layout,
.checkout-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.5fr)
    minmax(300px,.8fr);

  gap:30px;

  align-items:start;
}

.cart-item{
  display:grid;

  grid-template-columns:
    100px
    minmax(0,1fr)
    auto;

  gap:19px;

  align-items:center;

  padding:18px 0;

  border-bottom:
    1px solid
    var(--line);
}

.cart-item img{
  width:100px;
  height:125px;

  object-fit:cover;

  background:var(--bg2);

  border:
    1px solid
    var(--line);
}

.qty{
  display:flex;

  align-items:center;

  gap:10px;
}

.qty button{
  width:35px;
  height:35px;

  display:grid;

  place-items:center;

  border:
    1px solid
    var(--line);

  background:#fff;

  color:var(--teal);

  transition:.2s;
}

.qty button:hover{
  border-color:var(--gold4);

  color:var(--gold5);
}

.text-btn{
  border:0;

  background:none;

  color:#A25746;

  padding:0;

  font-size:12px;
}

.summary{
  position:sticky;

  top:108px;
}

.totals{
  display:flex;

  justify-content:space-between;

  gap:20px;

  margin-top:22px;

  padding-top:20px;

  border-top:
    1px solid
    var(--line);

  color:var(--teal);

  font-weight:700;
}

.address-card{
  position:relative;

  display:flex;

  flex-direction:column;

  gap:3px;

  margin-bottom:10px;

  padding:17px;

  border:
    1px solid
    var(--line);

  background:#fff;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.address-card:hover{
  border-color:
    rgba(200,148,51,.35);

  box-shadow:var(--shadow-sm);
}

.address-card input{
  margin-right:8px;

  accent-color:var(--teal);
}


/* =========================================================
   TOAST / STATES
========================================================= */

.toast{
  position:fixed;

  right:22px;
  bottom:22px;

  z-index:500;

  max-width:
    min(
      420px,
      calc(100vw - 30px)
    );

  padding:14px 18px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:7px;

  background:var(--deep);

  color:#fff;

  box-shadow:
    0 16px 45px
    rgba(0,0,0,.2);
}

.toast-error{
  background:#7C302D;
}

.toast-success{
  background:#21654E;
}

.empty{
  padding:60px 24px;

  text-align:center;

  border:
    1px dashed
    #DCCEB9;

  background:
    rgba(255,255,255,.72);
}


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

.order-row{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    auto
    auto;

  gap:18px;

  align-items:center;

  padding:18px;

  margin-bottom:10px;

  border:
    1px solid
    var(--line);

  border-radius:7px;

  background:#fff;

  transition:.2s ease;
}

.order-row:hover{
  transform:translateY(-1px);

  border-color:
    rgba(200,148,51,.32);

  box-shadow:var(--shadow-sm);
}

.order-row div{
  display:flex;

  flex-direction:column;
}

.badge,
.status{
  display:inline-flex;

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

  min-height:27px;

  padding:4px 10px;

  border:
    1px solid
    rgba(200,148,51,.22);

  border-radius:99px;

  background:
    rgba(246,226,159,.12);

  color:var(--teal);

  font-size:10px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.08em;
}

.order-detail-card{
  background:#fff;

  border:
    1px solid
    var(--line);

  border-radius:10px;

  padding:30px;

  box-shadow:var(--shadow);
}

.order-head{
  display:flex;

  justify-content:space-between;

  gap:20px;

  align-items:flex-start;

  padding-bottom:20px;

  border-bottom:
    1px solid
    var(--line);
}

.order-head h1{
  font-size:
    clamp(
      42px,
      5vw,
      57px
    );

  margin:5px 0;
}

.order-item-line{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  padding:13px 0;

  border-bottom:
    1px solid
    var(--line);
}

.shipping-box{
  margin-top:20px;

  padding:19px;

  border:
    1px solid
    var(--line);

  background:var(--bg2);
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  margin-top:90px;

  padding:66px 0 32px;

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(200,148,51,.08),
      transparent 30%
    ),
    var(--deep);

  color:#DCE6E6;
}

.footer-grid{
  display:grid;

  grid-template-columns:
    1.35fr
    1fr
    1fr
    1fr;

  gap:38px;
}

.site-footer h3{
  color:#fff;

  font-size:32px;

  margin:0 0 11px;
}

.site-footer a{
  display:block;

  color:#CBD5D5;

  margin:8px 0;

  font-size:12px;

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

.site-footer a:hover{
  color:var(--gold2);

  transform:translateX(2px);
}

.site-footer .eyebrow{
  color:var(--gold3);
}

.footer-bottom{
  margin-top:44px;

  padding-top:20px;

  border-top:
    1px solid
    rgba(255,255,255,.1);

  color:#AEBDBD;

  font-size:11px;
}


/* =========================================================
   ADMIN LAYOUT
========================================================= */

.admin-shell{
  min-height:100vh;
  min-height:100dvh;

  display:grid;

  grid-template-columns:
    260px
    minmax(0,1fr);

  align-items:stretch;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(246,226,159,.09),
      transparent 25%
    ),
    #F6F1E9;
}

.admin-side{
  position:sticky;

  top:0;

  align-self:start;

  width:260px;

  height:100vh;
  height:100dvh;

  min-height:100vh;
  min-height:100dvh;

  overflow-y:auto;
  overflow-x:hidden;

  scrollbar-width:thin;

  background:
    linear-gradient(
      180deg,
      #0B3D45,
      #0A3640
    );

  color:#D9E4E3;

  padding:26px 18px;

  border-right:
    1px solid
    rgba(200,148,51,.12);
}

.admin-side::-webkit-scrollbar{
  width:5px;
}

.admin-side::-webkit-scrollbar-thumb{
  background:
    rgba(255,255,255,.16);

  border-radius:99px;
}

.admin-logo{
  display:flex;

  align-items:center;

  gap:12px;

  color:#fff;

  font:
    500 25px/1
    "Cormorant Garamond",
    Georgia,
    serif;

  margin-bottom:32px;
}

.admin-logo img{
  width:46px;
  height:46px;

  border-radius:50%;

  object-fit:cover;

  border:
    1px solid
    rgba(229,192,103,.7);

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

.admin-main{
  min-width:0;

  min-height:100vh;
  min-height:100dvh;

  padding:42px;
}


/* =========================================================
   ADMIN NAV
========================================================= */

.admin-nav a{
  position:relative;

  display:block;

  margin:3px 0;

  padding:
    12px 14px
    12px 17px;

  color:#C9D9D8;

  border-radius:6px;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.admin-nav a::before{
  content:"";

  position:absolute;

  left:0;
  top:50%;

  width:2px;
  height:0;

  transform:translateY(-50%);

  border-radius:2px;

  background:var(--gold3);

  transition:
    height .2s ease;
}

.admin-nav a:hover{
  color:#fff;

  background:
    rgba(229,192,103,.08);

  transform:translateX(1px);
}

.admin-nav a.active{
  color:#fff;

  background:
    rgba(229,192,103,.11);
}

.admin-nav a:hover::before,
.admin-nav a.active::before{
  height:18px;
}

.admin-nav a:last-child{
  color:#C58B7D;
}

.admin-nav a:last-child:hover{
  color:#E2AAA0;

  background:
    rgba(197,139,125,.07);
}


/* =========================================================
   ADMIN HEADER
========================================================= */

.admin-top{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  margin-bottom:28px;

  padding-bottom:18px;

  border-bottom:
    1px solid
    rgba(200,148,51,.12);
}

.admin-page-header{
  margin-bottom:28px;
}

.admin-page-header .eyebrow{
  margin-bottom:7px;
}

.admin-page-header .page-title{
  margin-bottom:10px;
}

.admin-main .page-title{
  margin-bottom:26px;
}


/* =========================================================
   ADMIN CARD
========================================================= */

.admin-card{
  position:relative;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.995),
      rgba(252,250,247,.98)
    );

  border:
    1px solid
    rgba(200,148,51,.16);

  border-radius:12px;

  padding:28px;

  box-shadow:
    0 14px 40px
      rgba(11,61,69,.055),
    0 2px 8px
      rgba(11,61,69,.025);

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.admin-card:hover{
  border-color:
    rgba(200,148,51,.24);

  box-shadow:
    0 18px 48px
      rgba(11,61,69,.07),
    0 3px 12px
      rgba(11,61,69,.025);

  transform:translateY(-1px);
}

.admin-card h2{
  margin:
    0 0 16px;

  color:var(--teal);

  font:
    500 36px/1.08
    "Cormorant Garamond",
    Georgia,
    serif;

  letter-spacing:-.01em;
}


/* =========================================================
   ADMIN FORM
========================================================= */

.admin-form{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:18px;
}

.admin-form .full{
  grid-column:1/-1;
}

.admin-form .btn{
  justify-self:start;

  min-height:46px;

  padding:0 22px;

  border-radius:5px;

  letter-spacing:.045em;

  box-shadow:
    0 7px 18px
    rgba(18,77,86,.10);
}


/* =========================================================
   ADMIN TABLES
========================================================= */

.admin-main .table-wrap{
  border-radius:10px;
}

.admin-main table th{
  letter-spacing:.075em;
}

.admin-main table td{
  color:#5F625F;
}

.admin-main table tr:hover td{
  background:
    rgba(246,226,159,.035);
}


/* =========================================================
   ADMIN STATS
========================================================= */

.stat-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:15px;
}

.stat{
  background:
    rgba(255,255,255,.9);

  border:
    1px solid
    rgba(200,148,51,.16);

  border-radius:8px;

  padding:19px;

  box-shadow:var(--shadow-sm);
}

.stat strong{
  display:block;

  color:var(--teal);

  font-size:40px;

  line-height:1;

  margin-top:7px;
}


/* =========================================================
   ADMIN FINANCE
========================================================= */

.finance-section{
  margin-top:18px;
}

.finance-grid{
  display:grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:12px;
}

.finance-grid > div{
  padding:15px;

  border:
    1px solid
    var(--line);

  border-radius:6px;

  background:var(--bg2);
}

.finance-grid span{
  display:block;

  color:#8B816F;

  font-size:10px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.07em;
}

.finance-grid strong{
  display:block;

  color:var(--teal);

  font-size:29px;

  line-height:1.05;

  margin-top:6px;
}

.finance-note{
  color:#888;

  font-size:12px;
}


/* =========================================================
   ADMIN DASHBOARD GRID
========================================================= */

.admin-grid-two{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(0,.65fr);

  gap:18px;
}

.order-timeline{
  display:grid;

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

  gap:10px;

  margin:25px 0;
}

.timeline-node{
  padding-top:9px;

  border-top:
    2px solid
    var(--line);

  color:#999;

  font-size:10px;
  font-weight:600;

  text-transform:uppercase;

  letter-spacing:.07em;
}

.timeline-node.done{
  border-color:var(--gold4);

  color:var(--teal);
}

.timeline-node span{
  display:inline-grid;

  place-items:center;

  width:22px;
  height:22px;

  margin-right:7px;

  border:
    1px solid
    currentColor;

  border-radius:50%;
}

.order-return-cta{
  margin-top:25px;

  padding:18px;

  border:
    1px solid
    var(--line);

  background:var(--bg2);
}


/* =========================================================
   AUTH
========================================================= */

.account-actions{
  display:flex;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:26px;
}

.auth-shell{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    460px;

  gap:70px;

  align-items:center;

  max-width:1100px;

  margin-inline:auto;
}

.auth-intro h1{
  font-size:
    clamp(
      54px,
      6vw,
      74px
    );

  margin:
    10px 0 20px;
}

.auth-intro p{
  max-width:520px;

  font-size:17px;
}

.auth-badges{
  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin-top:26px;
}

.auth-badges span{
  padding:8px 11px;

  border:
    1px solid
    var(--line);

  background:#fff;

  color:var(--teal);

  font-size:10px;
  font-weight:600;

  letter-spacing:.06em;

  text-transform:uppercase;
}

.auth-tabs{
  display:flex;

  margin:
    -30px
    -30px
    26px;

  border-bottom:
    1px solid
    var(--line);
}

.auth-tab{
  flex:1;

  border:0;

  background:transparent;

  padding:17px 12px;

  color:#777;

  font-weight:600;
}

.auth-tab.active{
  color:var(--teal);

  box-shadow:
    inset 0 -2px 0
    var(--gold4);
}

.auth-panel h2{
  font-size:42px;

  line-height:1.1;

  margin:
    8px 0 22px;
}

.auth-submit{
  width:100%;

  margin-top:8px;
}

.auth-helper{
  display:block;

  text-align:center;

  margin-top:15px;

  color:var(--teal);

  font-size:12px;
}

.auth-note{
  font-size:12px!important;

  color:#888;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible{
  outline:
    2px solid
    var(--gold4);

  outline-offset:3px;
}

.mobile-only{
  display:none;
}

.admin-mobile-toggle{
  display:none;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

  .nav{
    gap:22px;
  }

  .brand{
    font-size:34px;
  }

  .brand img{
    width:58px;
    height:58px;
  }

  .nav a{
    font-size:12px;
  }

  .hero-grid{
    gap:42px;
  }

  .grid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

  .finance-grid{
    grid-template-columns:
      repeat(
        3,
        minmax(0,1fr)
      );
  }

  .product-actions .bag-quantity-control{
    grid-template-columns:
      34px
      minmax(0,1fr)
      34px;
  }

  .product-actions .bag-quantity-control.no-plus{
    grid-template-columns:
      34px
      minmax(0,1fr)
      34px;
  }

  .product-actions .bag-qty-btn{
    width:34px;
    min-width:34px;

    font-size:17px;
  }

  .product-actions .bag-qty-value{
    font-size:10px;
  }

  .product-actions .go-to-bag{
    font-size:10px;
  }

  .product-actions .add{
    font-size:10px;
  }

}


/* =========================================================
   TABLET / MOBILE NAV
========================================================= */

@media(max-width:1000px){

  .nav{
    display:none;
  }

  .menu{
    display:grid;

    place-items:center;
  }

  .nav.open{
    position:absolute;

    left:0;
    right:0;

    top:94px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:0;

    padding:
      16px
      20px
      22px;

    border-bottom:
      1px solid
      var(--line);

    background:
      rgba(252,250,247,.98);

    box-shadow:
      0 18px 35px
      rgba(11,61,69,.08);
  }

  .nav.open a{
    width:100%;

    justify-content:flex-start;

    height:46px;

    padding:0;
  }

  .nav.open a::after{
    left:0;

    bottom:5px;

    transform:none;
  }

  .hero-grid,
  .product-detail,
  .cart-layout,
  .checkout-layout{
    grid-template-columns:1fr;
  }

  .hero-art{
    min-height:470px;
  }

  .summary{
    position:static;
  }

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

  .admin-shell{
    grid-template-columns:1fr;

    min-height:100vh;
    min-height:100dvh;
  }

  .admin-side{
    position:relative;

    top:auto;

    width:100%;

    height:auto;

    min-height:0;

    overflow:visible;

    border-right:0;
  }

  .admin-main{
    min-height:0;
  }

  .admin-grid-two{
    grid-template-columns:1fr;
  }

  .auth-shell{
    grid-template-columns:1fr;

    max-width:700px;
  }

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

  .finance-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .order-timeline{
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

}


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

@media(max-width:700px){

  .container{
    width:min(
      100% - 26px,
      1180px
    );
  }

  .nav-wrap{
    min-height:78px;

    gap:10px;
  }

  .brand{
    font-size:28px;

    letter-spacing:.10em;
  }

  .brand img{
    width:52px;
    height:52px;
  }

  .brand small{
    font-size:7px;
  }

  .nav-right{
    gap:6px;
  }

  .icon-link,
  .menu{
    width:44px;
    height:44px;

    font-size:20px;
  }

  .header-auth-link{
    display:none;
  }

  .header-signup{
    min-height:40px;

    padding:
      9px
      13px;

    font-size:11px;
  }

  .header-admin-link,
  .header-logout{
    display:none;
  }

  .nav.open{
    top:78px;
  }

  .hero{
    padding:
      42px 0
      38px;
  }

  .hero h1{
    font-size:46px;
  }

  .hero p{
    font-size:15px;
  }

  .hero-art{
    min-height:360px;
  }

  .hero-logo img{
    width:215px;
    height:215px;
  }

  .section{
    padding:62px 0;
  }

  .section-head{
    align-items:flex-start;

    flex-direction:column;
  }

  .section h2,
  .page-title{
    font-size:44px;
  }

  .grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:12px;
  }

  .product-name{
    font-size:21px;
  }

  .product-info{
    padding:14px;
  }


  /* =======================================================
     MOBILE PRODUCT ACTIONS
  ======================================================== */

  .product-actions{
    grid-template-columns:1fr;

    gap:7px;
  }

  .product-actions .btn{
    min-height:44px;
  }


  /* =======================================================
     MOBILE BAG QUANTITY
  ======================================================== */

  .product-actions .bag-quantity-control,
  .product-actions .bag-quantity-control.no-plus{
    grid-template-columns:
      42px
      minmax(0,1fr)
      42px;

    min-height:44px;
  }

  .product-actions .bag-qty-btn{
    width:42px;
    min-width:42px;

    height:42px;
    min-height:42px;

    font-size:18px;
  }

  .product-actions .bag-qty-value{
    width:100%;

    height:42px;
    min-height:42px;

    padding:
      0 3px;

    font-size:11px;

    letter-spacing:.02em;

    overflow:visible;

    white-space:nowrap;

    text-align:center;
  }

  .product-actions .go-to-bag,
  .product-actions .add{
    width:100%;

    min-height:44px;

    font-size:11px;

    letter-spacing:.02em;
  }

  .product-actions .bag-remove-icon{
    width:14px;
    height:14px;
  }


  /* =======================================================
     MOBILE SHOP TOOLBAR — FROZEN
  ======================================================== */

  .toolbar{
    position:fixed !important;

    top:78px;

    left:13px;
    right:13px;

    z-index:95;

    width:auto;

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    margin:0 !important;

    padding:
      9px 0
      11px;

    background:
      rgba(252,250,247,.98);

    border-bottom:
      1px solid
      rgba(200,148,51,.14);

    box-shadow:
      0 8px 24px
      rgba(11,61,69,.07);

    backdrop-filter:
      blur(18px)
      saturate(120%);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(120%);

    transform:translateZ(0);

    will-change:transform;
  }

  .toolbar input{
    width:100% !important;

    flex:
      1 1 100%;

    min-width:0;

    min-height:50px;

    padding:
      12px 16px;

    font-size:16px;
  }

  .toolbar select{
    flex:
      1 1 calc(50% - 5px);

    width:auto;

    min-width:0;

    min-height:50px;

    padding:
      12px 14px;

    font-size:16px;
  }

  /*
     The first product grid must be pushed below
     the frozen search/filter bar.
  */

  .toolbar + .grid{
    margin-top:120px;
  }


  /* =======================================================
     FORMS
  ======================================================== */

  .form-card,
  .panel{
    padding:21px;
  }

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

  .field.full{
    grid-column:auto;
  }

  .field input,
  .field select,
  .field textarea{
    font-size:16px;
  }


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

  .cart-item{
    grid-template-columns:
      72px
      minmax(0,1fr);

    gap:14px;

    align-items:start;
  }

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

    border-radius:5px;

    box-shadow:
      0 5px 16px
      rgba(11,61,69,.07);
  }

  .cart-item > .text-btn{
    grid-column:2;

    justify-self:start;

    margin-top:2px;
  }

  .cart-item > :last-child{
    grid-column:2;
  }


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

  .order-row{
    grid-template-columns:1fr;
  }

  .order-head{
    flex-direction:column;
  }

  .order-head h1{
    font-size:44px;
  }


  /* =======================================================
     FOOTER
  ======================================================== */

  .footer-grid{
    grid-template-columns:1fr;

    gap:28px;
  }

  .site-footer{
    margin-top:65px;

    padding-top:55px;
  }


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

  .admin-main{
    padding:
      20px
      14px
      30px;
  }

  .admin-card{
    padding:
      21px
      17px;

    border-radius:10px;
  }

  .admin-top{
    margin-bottom:16px;

    padding-bottom:15px;
  }

  .admin-card h2{
    font-size:32px;
  }

  .admin-form{
    grid-template-columns:1fr;

    gap:16px;
  }

  .admin-form .full{
    grid-column:auto;
  }

  .admin-form .btn{
    width:100%;

    justify-self:stretch;
  }

  .admin-page-header{
    margin-bottom:22px;
  }

  .admin-main .table-wrap{
    margin-inline:-3px;

    border-radius:6px;
  }

  .stat-grid{
    grid-template-columns:
      1fr
      1fr;

    gap:10px;
  }

  .stat{
    padding:15px;
  }

  .stat strong{
    font-size:31px;
  }

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

  .finance-grid strong{
    font-size:24px;
  }

  .auth-shell{
    gap:32px;
  }

  .auth-intro h1{
    font-size:47px;
  }

  .auth-intro p{
    font-size:15px;
  }

  .auth-tabs{
    margin:
      -21px
      -21px
      24px;
  }

  .auth-panel h2{
    font-size:37px;
  }

  .admin-mobile-toggle{
    display:block;

    padding:
      8px
      11px;

    border:
      1px solid
      rgba(255,255,255,.2);

    border-radius:5px;

    background:transparent;

    color:#fff;
  }

  .admin-nav{
    display:none;

    flex-direction:column;
  }

  .admin-nav.open{
    display:flex;
  }

  .mobile-only{
    display:block;
  }

  .cart-count-badge{
    top:-4px;
    right:-4px;

    min-width:18px;
    height:18px;

    font-size:9px;
  }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:430px){

  .container{
    width:
      calc(100% - 22px);
  }

  .brand{
    font-size:24px;

    letter-spacing:.08em;
  }

  .brand img{
    width:47px;
    height:47px;
  }

  .nav-right{
    gap:5px;
  }

  .icon-link,
  .menu{
    width:41px;
    height:41px;

    font-size:19px;
  }

  .header-signup{
    padding-inline:10px;
  }

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

  .hero-art{
    min-height:315px;
  }

  .hero-logo img{
    width:185px;
    height:185px;
  }

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

  .product-copy h1{
    font-size:42px;
  }

  .page-title{
    font-size:40px;
  }

  .stat-grid,
  .finance-grid{
    grid-template-columns:1fr;
  }

  .order-timeline{
    grid-template-columns:1fr;
  }

  .finance-grid strong{
    font-size:28px;
  }

  .toast{
    right:11px;
    bottom:11px;
  }


  /* =======================================================
     SMALL PHONE BAG CONTROL
  ======================================================== */

  .product-actions .bag-quantity-control,
  .product-actions .bag-quantity-control.no-plus{
    grid-template-columns:
      40px
      minmax(0,1fr)
      40px;
  }

  .product-actions .bag-qty-btn{
    width:40px;
    min-width:40px;

    font-size:17px;
  }

  .product-actions .bag-qty-value{
    font-size:10px;

    padding:
      0 2px;
  }


  /* =======================================================
     SMALL PHONE FROZEN TOOLBAR
  ======================================================== */

  .toolbar{
    top:78px;

    left:11px;
    right:11px;

    gap:8px;

    padding:
      8px 0
      10px;
  }

  .toolbar input,
  .toolbar select{
    min-height:48px;

    font-size:16px;
  }

  .toolbar select{
    padding:
      11px 12px;
  }

  .toolbar + .grid{
    margin-top:116px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    transition-duration:.01ms!important;

    animation-duration:.01ms!important;

    animation-iteration-count:1!important;
  }

}