/* ============================================================
   ChaOTTic Creations — Main Stylesheet
   Brand: Burnt Orange #E05A1B · Jet Black #1A1A1A · Off-White #FAF7F2
   Fonts: Bebas Neue · Caveat · Lato
   ============================================================ */
:root {
  --orange:    #E05A1B;
  --orange-dk: #B84714;
  --orange-lt: #F4864A;
  --black:     #1A1A1A;
  --gray-dk:   #333333;
  --gray-md:   #6B6B6B;
  --gray-lt:   #CCCCCC;
  --white:     #FAF7F2;
  --white-pure:#FFFFFF;
  --font-display:'Bebas Neue',Impact,sans-serif;
  --font-accent:'Caveat',cursive;
  --font-body:'Lato',Arial,sans-serif;
  --radius:6px; --radius-lg:12px;
  --shadow:0 2px 12px rgba(0,0,0,.10);
  --shadow-lg:0 6px 28px rgba(0,0,0,.16);
  --transition:0.22s ease;
  --max-width:1200px;
  --header-h:68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--white);color:var(--black);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--orange);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--orange-dk)}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit}
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.25rem}

/* Announce Bar */
.announce-bar{background:var(--black);color:var(--white);text-align:center;font-size:.82rem;padding:.45rem 1rem;letter-spacing:.03em}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:3px solid var(--orange);box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;gap:1.5rem;height:var(--header-h)}

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  color: var(--black);
  flex-shrink: 0;
  line-height: 1;
  text-decoration: none;
}

.logo-link:hover {
  color: var(--black);
}

.header-logo-image {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain;
}

.logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1;
}

.logo-link .logo-main {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: .04em;
  color: var(--orange);
}

.logo-link .logo-sub {
  display: block;
  margin-top: -4px;
  font-family: var(--font-accent);
  font-size: 1rem;
  color: var(--gray-dk);
}

.header-logo-image,
.footer-logo-image {
  display: block;
  background: transparent !important;
  mix-blend-mode: normal;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

.main-nav{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.main-nav>a,.nav-drop-trigger{font-family:var(--font-body);font-weight:700;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;color:var(--black);padding:.45rem .75rem;border-radius:var(--radius);transition:background var(--transition),color var(--transition);cursor:pointer;background:none;border:none}
.main-nav>a:hover,.nav-drop-trigger:hover{background:var(--orange);color:#fff}
.nav-dropdown{position:relative}
.nav-drop-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--white-pure);border:2px solid var(--orange);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:210px;z-index:200;overflow:hidden}
.nav-dropdown:hover .nav-drop-menu{display:block}
.nav-drop-menu a{display:block;padding:.6rem 1rem;font-size:.88rem;color:var(--black);font-weight:400;border-bottom:1px solid #f0ece6}
.nav-drop-menu a:last-child{border-bottom:none}
.nav-drop-menu a:hover{background:var(--orange);color:#fff}
.header-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--black);transition:background var(--transition);font-size:1.1rem}
.icon-btn:hover{background:rgba(224,90,27,.12);color:var(--orange)}
.cart-badge{position:absolute;top:2px;right:2px;background:var(--orange);color:#fff;font-size:.65rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem}
.hamburger span{display:block;width:24px;height:2px;background:var(--black);border-radius:2px;transition:transform var(--transition),opacity var(--transition)}

@media (max-width: 600px) {
  .header-inner {
    gap: .5rem;
  }

  .logo-link {
    gap: .45rem;
  }

  .header-logo-image {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .logo-link .logo-main {
    font-size: 1.6rem;
  }

  .logo-link .logo-sub {
    font-size: .9rem;
  }
}

/* Flash */
.flash{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.5rem;font-size:.9rem;font-weight:600}
.flash-success{background:#d4edda;color:#155724;border-bottom:2px solid #c3e6cb}
.flash-error{background:#f8d7da;color:#721c24;border-bottom:2px solid #f5c6cb}
.flash-info{background:#d1ecf1;color:#0c5460;border-bottom:2px solid #bee5eb}
.flash-close{background:none;border:none;font-size:1.2rem;cursor:pointer;margin-left:1rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1.5rem;border-radius:var(--radius);font-family:var(--font-body);font-weight:700;font-size:.92rem;letter-spacing:.04em;cursor:pointer;border:2px solid transparent;transition:all var(--transition);text-transform:uppercase}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-dk);border-color:var(--orange-dk);color:#fff}
.btn-outline{background:transparent;color:var(--orange);border-color:var(--orange)}
.btn-outline:hover{background:var(--orange);color:#fff}
.btn-black{background:var(--black);color:#fff;border-color:var(--black)}
.btn-black:hover{background:var(--gray-dk);color:#fff}
.btn-sm{padding:.45rem 1rem;font-size:.82rem}
.btn-lg{padding:.9rem 2rem;font-size:1rem}
.btn-full{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* Forms */
.form-group{margin-bottom:1.2rem}
.form-group label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.35rem;color:var(--gray-dk);text-transform:uppercase;letter-spacing:.04em}
.form-control{width:100%;padding:.65rem .85rem;border:2px solid var(--gray-lt);border-radius:var(--radius);background:#fff;font-size:.95rem;color:var(--black);transition:border-color var(--transition),box-shadow var(--transition)}
.form-control:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(224,90,27,.15)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-error{color:#dc3545;font-size:.82rem;margin-top:.25rem}

/* Section Titles */
.section-title{font-family:var(--font-display);font-size:2.2rem;letter-spacing:.06em;color:var(--black);position:relative;display:inline-block;margin-bottom:1.5rem}
.section-title::after{content:'';display:block;height:4px;background:var(--orange);border-radius:2px;margin-top:.3rem;width:60%}
.section-sub{font-family:var(--font-accent);font-size:1.1rem;color:var(--gray-md);margin-top:-.8rem;margin-bottom:1.5rem}

/* Hero */
.hero{background:linear-gradient(135deg,var(--black) 55%,var(--orange) 100%);padding:5rem 0 4rem;text-align:center;color:var(--white);position:relative;overflow:hidden}
.hero::before{content:'CHAOTTIC';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:16vw;opacity:.04;white-space:nowrap;pointer-events:none;letter-spacing:.1em}
.hero-eyebrow{font-family:var(--font-accent);font-size:1.3rem;color:var(--orange-lt);margin-bottom:.5rem}
.hero h1{font-family:var(--font-display);font-size:clamp(3rem,7vw,5.5rem);letter-spacing:.08em;line-height:1.05;margin-bottom:1rem}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 2rem}
.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero-logo {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

@media (max-width: 640px) {
  .hero-logo {
    width: min(100%, 340px);
    margin-bottom: 1rem;
  }
}

/* Category Cards */
.categories-section{padding:4rem 0}
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem}
.cat-card{border-radius:var(--radius-lg);overflow:hidden;border:2px solid transparent;box-shadow:var(--shadow);transition:all var(--transition);background:#fff;color:var(--black)}
.cat-card:hover{border-color:var(--orange);box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.cat-card-img{
  aspect-ratio:1 / 1;
  background:linear-gradient(135deg,var(--black) 0%,var(--gray-dk) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden
}
.cat-card-img img{width:100%;height:100%;object-fit:cover}
.cat-card-body{padding:1rem 1.1rem 1.3rem}
.cat-card-body h3{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.06em;color:var(--black)}

/* Product Cards */
.products-section{padding:3rem 0 5rem}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.5rem}
.product-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all var(--transition);display:flex;flex-direction:column;color:var(--black)}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.product-card-img{position:relative;height: auto !important;background:#f5f0ea;overflow:hidden;display:flex;align-items:center;justify-content:center}
.product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.product-card:hover .product-card-img img{transform:scale(1.06)}
.product-card-badges {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  pointer-events: none;
}

.product-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: .28rem .65rem;
  border-radius: 999px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
}

.product-badge-sale {
  background: #c92a2a;
}

.product-badge-made-to-order {
  background: var(--orange);
}

.product-card-body{padding:1rem 1.1rem 1.3rem;display:flex;flex-direction:column;flex:1}
.product-card-body h3{font-size:.95rem;font-weight:700;line-height:1.35;margin-bottom:.5rem;color:var(--black)}
.product-price{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.04em;color:var(--orange);margin-top:auto;margin-bottom:.75rem}

.product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .22rem;
}

.product-price-current {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: .04em;
  color: var(--orange);
}

.product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .22rem;
}

.product-price-current {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: .04em;
}

.product-price-label {
  color: var(--gray-md);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: 0;
}

.product-card-image-link {
  display: block;
  color: inherit;
  line-height: 0;
}

.product-card-image-link:hover {
  color: inherit;
}

.product-card-body h3 a {
  color: var(--black);
  text-decoration: none;
}

.product-card-body h3 a:hover {
  color: var(--orange);
}

.product-card-category {
  margin: -.15rem 0 .5rem;
  color: var(--gray-md);
  font-size: .78rem;
  line-height: 1.35;
}

.quick-add-form {
  margin: 0;
}

.quick-add-btn {
  width: 100%;
}

/* Product Detail */
.product-detail{padding:3rem 0 5rem}
.product-detail-inner{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.product-gallery{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.product-gallery-main{border-radius:var(--radius-lg);overflow:hidden;background:#f5f0ea;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.product-gallery-main img{width:100%;height:100%;object-fit:cover}
.product-title{font-family:var(--font-display);font-size:2.2rem;letter-spacing:.05em;line-height:1.1;margin-bottom:.75rem}
.product-detail-price{font-family:var(--font-display);font-size:2rem;color:var(--orange);margin-bottom:1.25rem}
.product-desc{color:var(--gray-dk);line-height:1.7;margin-bottom:1.5rem}
.variant-group{margin-bottom:1.25rem}
.variant-group label{display:block;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.variant-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.variant-btn{padding:.4rem .85rem;border:2px solid var(--gray-lt);border-radius:var(--radius);background:#fff;cursor:pointer;font-size:.88rem;font-weight:600;transition:all var(--transition)}
.variant-btn:hover,.variant-btn.selected{border-color:var(--orange);background:var(--orange);color:#fff}
.atc-row{display:flex;gap:.75rem;align-items:center;margin-top:1.5rem}
.qty-input{width:70px;padding:.65rem;text-align:center;border:2px solid var(--gray-lt);border-radius:var(--radius);font-size:1rem}
.made-to-order-note{background:#fff8f4;border-left:3px solid var(--orange);padding:.75rem 1rem;border-radius:0 var(--radius) var(--radius) 0;font-size:.88rem;margin-bottom:1.25rem;color:var(--gray-dk)}

/* Cart */
.cart-page{padding:3rem 0 5rem}
.cart-layout{display:grid;grid-template-columns:1fr 340px;gap:2rem;align-items:start}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{text-align:left;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;padding:.5rem .75rem;border-bottom:2px solid var(--black)}
.cart-table td{padding:.9rem .75rem;border-bottom:1px solid #ede8e1;vertical-align:middle}

.cart-product-details {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (max-width: 700px) {
  .cart-item-variant[style*="font-size:.75rem"] {
    display: none;
  }
}

@media (max-width: 700px) {
  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td {
    display: block;
    width: 100%;
  }

  .cart-table thead {
    display: none;
  }

  .cart-table {
    border: 0;
  }

  .cart-table tr {
    position: relative;
    padding: 1.25rem 0 1rem;
    border-bottom: 1px solid var(--gray-lt);
  }

  .cart-table td {
    border: 0;
    padding: 0;
  }

  /*
   * Product details: image on the left, title/details get the remaining width.
   */
  .cart-table td:first-child {
    padding-right: 2.25rem;
  }

.cart-product-details {
    align-items: flex-start !important;
    gap: .85rem !important;
  }

  .cart-item-name {
    display: block !important;
    font-size: 1.05rem;
    line-height: 1.25;
    margin-bottom: .35rem;
    overflow-wrap: anywhere;
  }

  .cart-item-variant {
    font-size: .88rem;
    line-height: 1.45;
    margin-top: .2rem;
    overflow-wrap: anywhere;
  }

  /*
   * Image remains compact so it does not reduce the product description
   * to a very narrow text column.
   */
  .cart-table td:first-child a[aria-label],
  .cart-table td:first-child > div > div:first-child {
    width: 76px !important;
    height: 76px !important;
    flex: 0 0 76px !important;
  }

  /*
   * Qty, price, and total become a clean inline details row.
   */
  .cart-table td:nth-child(2),
  .cart-table td:nth-child(3),
  .cart-table td:nth-child(4) {
    display: inline-flex;
    flex-direction: column;
    gap: .25rem;
    margin-top: 1rem;
    vertical-align: top;
  }

  .cart-table td:nth-child(2) {
    width: 34%;
  }

  .cart-table td:nth-child(3) {
    width: 31%;
  }

  .cart-table td:nth-child(4) {
    width: 31%;
  }

  .cart-table td:nth-child(2)::before,
  .cart-table td:nth-child(3)::before,
  .cart-table td:nth-child(4)::before {
    color: var(--gray-md);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .cart-table td:nth-child(2)::before {
    content: "Qty";
  }

  .cart-table td:nth-child(3)::before {
    content: "Price";
  }

  .cart-table td:nth-child(4)::before {
    content: "Total";
  }

  .cart-qty-input {
    width: 70px;
    max-width: 100%;
  }

  /*
   * Keep remove control in the top-right, away from the item information.
   */
  .cart-table td:last-child {
    position: absolute;
    top: 1.15rem;
    right: 0;
    width: auto;
  }

  .cart-remove {
    min-width: 34px;
    min-height: 34px;
    font-size: 1.6rem;
    line-height: 1;
  }
}


.cart-item-name{font-weight:700;font-size:.95rem}
.cart-item-variant{font-size:.82rem;color:var(--gray-md);margin-top:.15rem}
.cart-qty-input{width:60px;padding:.35rem;text-align:center;border:2px solid var(--gray-lt);border-radius:var(--radius)}
.cart-remove{background:none;border:none;color:var(--gray-md);cursor:pointer;font-size:1.2rem;line-height:1}
.cart-remove:hover{color:#dc3545}
.cart-summary{background:#fff;border:2px solid var(--gray-lt);border-radius:var(--radius-lg);padding:1.5rem}
.cart-summary h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:1.2rem}
.summary-row{display:flex;justify-content:space-between;margin-bottom:.6rem;font-size:.95rem}
.summary-row.total{font-weight:700;font-size:1.1rem;border-top:2px solid var(--black);padding-top:.75rem;margin-top:.75rem}
.coupon-row{display:flex;gap:.5rem;margin:1rem 0}
.coupon-row input{flex:1}

/* Checkout */
.checkout-page{padding:3rem 0 5rem}
.checkout-layout{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start}
.checkout-section{background:#fff;border:2px solid var(--gray-lt);border-radius:var(--radius-lg);padding:1.75rem;margin-bottom:1.5rem}
.checkout-section h3{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.05em;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0}
.shipping-rate-option{display:flex;align-items:center;gap:.75rem;padding:.75rem;border:2px solid var(--gray-lt);border-radius:var(--radius);margin-bottom:.5rem;cursor:pointer;transition:border-color var(--transition)}
.shipping-rate-option:has(input:checked){border-color:var(--orange);background:#fff8f4}
.stripe-element-wrap{padding:.7rem .85rem;border:2px solid var(--gray-lt);border-radius:var(--radius);background:#fff;min-height:50px}
#payment-message{color:#dc3545;font-size:.88rem;margin-top:.5rem;min-height:1.2em}
.order-mini-item{display:flex;justify-content:space-between;padding:.5rem 0;font-size:.9rem;border-bottom:1px solid #ede8e1}
.order-mini-item:last-child{border-bottom:none}

/* Breadcrumb */
.breadcrumb{padding:1rem 0 .5rem;font-size:.85rem;color:var(--gray-md)}
.breadcrumb a{color:var(--gray-md)}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span{margin:0 .4rem}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:2.5rem}
.page-btn{padding:.4rem .85rem;border:2px solid var(--gray-lt);border-radius:var(--radius);font-weight:600;color:var(--black);transition:all var(--transition)}
.page-btn:hover,.page-btn.active{border-color:var(--orange);background:var(--orange);color:#fff}

/* Footer */
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--white);
  line-height: 1;
  text-decoration: none;
}

.footer-logo-link:hover {
  color: var(--white);
}

.footer-logo-image {
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  object-fit: contain;
}

.footer-logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
}

.footer-logo-main {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: .04em;
  color: var(--orange);
}

.footer-logo-sub {
  display: block;
  margin-top: -4px;
  font-family: var(--font-accent);
  font-size: 1rem;
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 600px) {
  .footer-logo-image {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .footer-logo-main {
    font-size: 1.75rem;
  }

  .footer-logo-sub {
    font-size: .95rem;
  }
}

.site-footer{background:var(--black);color:var(--white);margin-top:auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:2.5rem;padding:3.5rem 0 2.5rem}
.footer-brand p{font-size:.88rem;color:rgba(255,255,255,.65);margin-top:.75rem;max-width:240px;line-height:1.6}
.social-links{display:flex;gap:.75rem;margin-top:1rem}
.social-links a{color:rgba(255,255,255,.6);font-size:.85rem;font-weight:700;padding:.3rem .6rem;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);transition:all var(--transition)}
.social-links a:hover{color:#fff;border-color:var(--orange);background:var(--orange)}
.footer-col h4{font-family:var(--font-display);font-size:1rem;letter-spacing:.1em;color:var(--orange);margin-bottom:.85rem;text-transform:uppercase}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:.45rem}
.footer-col ul a{color:rgba(255,255,255,.7);font-size:.88rem;transition:color var(--transition)}
.footer-col ul a:hover{color:var(--orange)}
.footer-subscribe{display:flex;gap:.5rem;margin-top:.5rem}
.footer-subscribe input{flex:1;padding:.55rem .75rem;border:none;border-radius:var(--radius);font-size:.88rem;background:rgba(255,255,255,.1);color:#fff}
.footer-subscribe input::placeholder{color:rgba(255,255,255,.4)}
.footer-subscribe button{padding:.55rem .9rem;background:var(--orange);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;font-weight:700;font-size:.82rem}
.footer-subscribe button:hover{background:var(--orange-dk)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;font-size:.82rem;color:rgba(255,255,255,.5);flex-wrap:wrap;gap:.5rem}
.payment-icons{display:flex;gap:.5rem}
.payment-icons span{background:rgba(255,255,255);border-radius:4px;padding:.1rem .5rem;font-size:1.5rem;color:var(--orange)}

/* Auth Pages */
.auth-page{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:3rem 1rem}
.auth-card{background:#fff;border:2px solid var(--gray-lt);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:440px;box-shadow:var(--shadow-lg)}
.auth-card h1{font-family:var(--font-display);font-size:2rem;letter-spacing:.06em;margin-bottom:.5rem;text-align:center}
.auth-card p.sub{text-align:center;color:var(--gray-md);font-size:.9rem;margin-bottom:1.75rem}
.auth-divider{text-align:center;color:var(--gray-md);font-size:.85rem;margin:1rem 0;position:relative}
.auth-divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--gray-lt)}
.auth-divider span{background:#fff;padding:0 .75rem;position:relative}

/* Admin */
.admin-bar{background:var(--orange);color:#fff;text-align:center;padding:.4rem 1rem;font-size:.82rem;font-weight:700}
.admin-bar a{color:#fff;text-decoration:underline}
.admin-sidebar{width:220px;background:var(--black);min-height:100vh;position:fixed;top:0;left:0;padding-top:1rem;z-index:50}
.admin-sidebar .logo{padding:1rem 1.25rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
.admin-sidebar .logo span{font-family:var(--font-display);font-size:1.3rem;color:var(--orange);letter-spacing:.06em}
.admin-nav a{display:block;padding:.65rem 1.25rem;color:rgba(255,255,255,.75);font-size:.88rem;font-weight:600;transition:all var(--transition);border-left:3px solid transparent}
.admin-nav a:hover,.admin-nav a.active{color:#fff;background:rgba(255,255,255,.07);border-left-color:var(--orange)}
.admin-main{margin-left:220px;padding:2rem;min-height:100vh;background:#f5f5f5}
.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.admin-header h1{font-family:var(--font-display);font-size:1.8rem;letter-spacing:.05em}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.25rem;margin-bottom:2rem}
.stat-card{background:#fff;border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow)}
.stat-card .label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gray-md);margin-bottom:.5rem}
.stat-card .value{font-family:var(--font-display);font-size:2rem;color:var(--orange);letter-spacing:.04em}
.stat-card .sub{font-size:.8rem;color:var(--gray-md);margin-top:.25rem}
.admin-table-wrap{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{background:var(--black);color:#fff;text-align:left;padding:.75rem 1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.admin-table td{padding:.8rem 1rem;border-bottom:1px solid #f0f0f0;font-size:.9rem;vertical-align:middle}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:#fafafa}
.badge{display:inline-block;padding:.2rem .6rem;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.badge-pending{background:#fff3cd;color:#856404}
.badge-processing{background:#cce5ff;color:#004085}
.badge-shipped{background:#d4edda;color:#155724}
.badge-delivered{background:#d4edda;color:#155724}
.badge-cancelled{background:#f8d7da;color:#721c24}
.badge-refunded{background:#e2e3e5;color:#383d41}
.badge-paid{background:#d4edda;color:#155724}
.badge-unpaid{background:#f8d7da;color:#721c24}

/* Utility */
.text-center{text-align:center}
.text-orange{color:var(--orange)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
.hidden{display:none!important}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* Responsive */
@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .product-detail-inner{grid-template-columns:1fr}
  .product-gallery{position:static}
  .checkout-layout{grid-template-columns:1fr}
  .cart-layout{grid-template-columns:1fr}
  .admin-sidebar{width:60px}
  .admin-sidebar .logo span,.admin-nav a span{display:none}
  .admin-main{margin-left:60px}
}
@media(max-width:768px){
  .hamburger{display:flex}
  .main-nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:var(--white);flex-direction:column;padding:1rem;border-bottom:3px solid var(--orange);box-shadow:var(--shadow-lg);gap:.25rem}
  .main-nav.open{display:flex}
  .main-nav>a,.nav-drop-trigger{padding:.65rem .85rem;width:100%;text-align:left}
  .nav-drop-menu{position:static;border:none;box-shadow:none;background:rgba(0,0,0,.03);display:none}
  .nav-dropdown.open .nav-drop-menu{display:block}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .hero{padding:3rem 0 2.5rem}
}
@media(max-width:480px){
  .categories-grid{grid-template-columns:1fr 1fr}
  .products-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:2.5rem}
}
/* Admin tables: allow all columns to remain accessible on mobile */
.admin-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.admin-table-wrap .admin-table {
  width: 100%;
  min-width: 900px;
}

@media (max-width: 767.98px) {
  .admin-table-wrap {
    border-radius: var(--radius);
    box-shadow: inset -14px 0 12px -14px rgba(0, 0, 0, 0.55);
  }

  .admin-table-wrap .admin-table {
    min-width: 860px;
  }

  .admin-table th,
  .admin-table td {
    white-space: nowrap;
  }

  .admin-table th:first-child,
  .admin-table td:first-child {
    min-width: 210px;
    white-space: normal;
  }

  .admin-table th:nth-child(2),
  .admin-table td:nth-child(2) {
    min-width: 135px;
    white-space: normal;
  }

  .admin-table th:last-child,
  .admin-table td:last-child {
    min-width: 135px;
  }
}

/* Show a mobile-only scrolling instruction */
.admin-table-scroll-note {
  display: none;
}

@media (max-width: 767.98px) {
  .admin-table-scroll-note {
    display: block;
    margin: 0 0 .6rem;
    color: var(--gray-md);
    font-size: .82rem;
  }
}
.product-card-img {
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;
}

.product-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Mobile category dropdown */
@media (max-width: 768px) {
  .main-nav {
    width: 100%;
    align-items: stretch;
    gap: 0;
    padding: .75rem 0;
  }

  /*
   * Apply exactly the same row sizing and horizontal alignment
   * to direct links and the Categories dropdown trigger.
   */
  .main-nav > a,
  .main-nav > .nav-dropdown > .nav-drop-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: .75rem 1.5rem;
    text-align: left;
  }

  .main-nav > .nav-dropdown {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .main-nav > .nav-dropdown > .nav-drop-trigger span {
    margin-left: .15rem;
  }

  /*
   * Categories only appear after the customer taps Categories.
   * They are positioned in the normal mobile-menu flow.
   */
  .main-nav > .nav-dropdown > .nav-drop-menu {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 0 .5rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, .035);
  }

  .main-nav > .nav-dropdown.open > .nav-drop-menu {
    display: block;
  }

  .main-nav > .nav-dropdown > .nav-drop-menu a {
    display: block;
    padding: .7rem 1.5rem .7rem 2.5rem;
    text-align: left;
    font-size: .9rem;
    border: 0;
  }
}
/* Keep account, cart, and menu controls right aligned on mobile */
@media (max-width: 768px) {
  .header-inner {
    gap: .5rem;
  }

  .header-actions {
    margin-left: auto;
    gap: .25rem;
  }
}

/* Admin dashboard statistic cards: mobile layout */
@media (max-width: 767.98px) {
  .admin-main {
    margin-left: 0;
    padding: 1rem;
  }

  .admin-header {
    align-items: flex-start;
    gap: .5rem;
  }

  .admin-header h1 {
    font-size: 1.7rem;
  }

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

  .stat-card {
    min-width: 0;
    padding: 1rem .85rem;
  }

  .stat-card .label {
    font-size: .72rem;
    line-height: 1.35;
    letter-spacing: .06em;
  }

  .stat-card .value {
    font-size: 1.65rem;
    line-height: 1.1;
    margin-top: .7rem;
  }

  .stat-card .sub {
    font-size: .75rem;
    margin-top: .4rem;
  }
}

@media (max-width: 360px) {
  .stat-cards {
    grid-template-columns: 1fr;
  }
}
/* Consistent mobile page gutters */
@media (max-width: 767.98px) {
  :root {
    --mobile-gutter: 1.25rem;
  }

  .container {
    width: 100%;
    max-width: none;
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  /*
   * Keep page content from touching the viewport edges,
   * even when a page-level layout uses full width.
   */
  .product-detail,
  .products-section,
  .cart-page,
  .checkout-page,
  .auth-page {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }

  /*
   * product.php already has a .container inside .product-detail.
   * Remove the nested horizontal padding so the result remains
   * one clean 20px gutter rather than 40px.
   */
  .product-detail > .container,
  .products-section > .container,
  .cart-page > .container,
  .checkout-page > .container {
    padding-left: 0;
    padding-right: 0;
  }

  .product-detail-inner,
  .product-info,
  .product-desc,
  .made-to-order-note {
    min-width: 0;
    max-width: 100%;
  }

  .product-title {
    overflow-wrap: anywhere;
  }

  /*
   * Footer content should retain the same left/right gutter.
   * Do not apply this to the mobile navigation, which is intended
   * to span the full screen.
   */
  .site-footer .container {
    padding-left: var(--mobile-gutter);
    padding-right: var(--mobile-gutter);
  }
}
/* Homepage featured products: retain mobile page gutters */
@media (max-width: 767.98px) {
  .products-section .container {
    width: 100%;
    max-width: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

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

  .products-section .product-card-img {
    min-width: 0;
  }

  .products-section .product-card-body {
    min-width: 0;
    padding: .85rem;
  }

  .products-section .product-card-body h3 {
    overflow-wrap: anywhere;
  }
}

.production-note {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 1.25rem 0;
  padding: .9rem 1rem;
  border: 1px solid rgba(224, 90, 27, .35);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  background: #fff8f4;
  color: var(--gray-dk);
}

.production-note-icon {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1.35;
}

.production-note strong {
  display: block;
  margin-bottom: .15rem;
  color: var(--black);
  font-size: .9rem;
}

.production-note p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.5;
}

.production-note-alert {
  border-left-color: #b42318;
  border-color: rgba(180, 35, 24, 0.28);
  background: #fff8f7;
}

.production-note-alert-icon {
  color: #b42318;
}

.size-guide {
  margin-top: -.45rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--gray-lt);
  border-radius: var(--radius);
  background: #fff;
}

.size-guide summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem .9rem;
  color: var(--black);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 700;
  list-style: none;
}

.size-guide summary::-webkit-details-marker {
  display: none;
}

.size-guide summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--orange);
  font-size: 1.2rem;
  line-height: 1;
}

.size-guide[open] summary {
  border-bottom: 1px solid var(--gray-lt);
}

.size-guide[open] summary::after {
  content: '−';
}

.size-guide-style {
  color: var(--gray-md);
  font-size: .75rem;
  font-weight: 400;
  text-align: right;
}

.size-guide-content {
  padding: 1rem;
}

.size-guide-note {
  margin: 0 0 .85rem;
  color: var(--gray-dk);
  font-size: .86rem;
  line-height: 1.5;
}

.size-guide-table-wrap {
  overflow-x: auto;
}

.size-guide-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  font-size: .84rem;
}

.size-guide-table th,
.size-guide-table td {
  padding: .5rem .65rem;
  border-bottom: 1px solid #ece7e0;
  text-align: left;
}

.size-guide-table th {
  background: #f5f0ea;
  color: var(--gray-dk);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.size-guide-table tbody tr:last-child td {
  border-bottom: 0;
}

.size-guide-measurement {
  margin: .85rem 0 0;
  color: var(--gray-md);
  font-size: .75rem;
  line-height: 1.5;
}

.free-shipping-progress {
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(224, 90, 27, .25);
  border-radius: var(--radius);
  background: #fff8f4;
}

.free-shipping-progress.is-qualified {
  border-color: rgba(33, 130, 76, .28);
  background: #effaf3;
}

.free-shipping-progress-message {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  color: var(--gray-dk);
  font-size: .86rem;
  line-height: 1.45;
}

.free-shipping-progress-message > span:first-child {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1.3;
}

.free-shipping-progress-message strong {
  color: var(--black);
}

.free-shipping-progress-track {
  width: 100%;
  height: 8px;
  margin-top: .75rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(224, 90, 27, .16);
}

.free-shipping-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--orange);
  transition: width .25s ease;
}

.free-shipping-progress.is-qualified .free-shipping-progress-track {
  background: rgba(33, 130, 76, .16);
}

.free-shipping-progress.is-qualified .free-shipping-progress-fill {
  background: #21824c;
}

.free-shipping-progress-note {
  margin: .6rem 0 0;
  color: var(--gray-md);
  font-size: .75rem;
  line-height: 1.45;
}

.catalog-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 1rem;
  padding: 1.25rem;
  border: 1px solid var(--gray-lt);
  border-radius: var(--radius-lg);
  background: #fff;
}

.catalog-filter-search {
  grid-column: span 2;
}

.catalog-filter-field,
.catalog-filter-search {
  min-width: 0;
}

.catalog-filter-field label,
.catalog-filter-search label {
  display: block;
  margin-bottom: .35rem;
  color: var(--gray-dk);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.catalog-filter-checks {
  grid-column: span 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .88rem;
}

.catalog-filter-checks label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.catalog-filter-actions {
  grid-column: span 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
}

.catalog-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  color: var(--gray-md);
  font-size: .82rem;
}

.catalog-filter-chip {
  padding: .25rem .6rem;
  border: 1px solid rgba(224, 90, 27, .25);
  border-radius: 999px;
  background: #fff8f4;
  color: var(--gray-dk);
  font-weight: 700;
}

.catalog-result-count {
  margin: 0 0 1.25rem;
  color: var(--gray-md);
  font-size: .88rem;
}

@media (max-width: 960px) {
  .catalog-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-filter-search,
  .catalog-filter-checks,
  .catalog-filter-actions {
    grid-column: span 2;
  }

  .catalog-filter-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .catalog-filters {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .catalog-filter-search,
  .catalog-filter-checks,
  .catalog-filter-actions {
    grid-column: auto;
  }

  .catalog-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .catalog-filter-actions .btn {
    width: 100%;
  }
}

.related-products-section {
  margin-top: 4rem;
  padding: 3.5rem 0 5rem;
  border-top: 1px solid #ece7e0;
  background: #fff;
}

.related-products-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.related-products-heading .section-title {
  margin-bottom: 1.15rem;
}

.related-products-heading .section-sub {
  margin-bottom: 0;
}

.related-products-view-all {
  flex: 0 0 auto;
  margin-top: .25rem;
}

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

@media (max-width: 960px) {
  .related-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .related-products-section {
    margin-top: 2.5rem;
    padding: 2.5rem 0 3.5rem;
  }

  .related-products-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .related-products-view-all {
    margin-top: 0;
  }

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

#product-share {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 0.65rem !important;
  margin-top: 1rem;
}

#product-share > span:first-child {
  grid-column: 1 / -1;
  margin: 0 0 0.1rem !important;
}

#product-share .btn,
#product-share a.btn,
#product-share button.btn {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 0.5rem !important;
  line-height: 1 !important;
  white-space: nowrap;
  vertical-align: middle !important;
}


#share-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
}

@media (max-width: 700px) {
  #product-share {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}