/* ====== RESET / BASE ====== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#111;
  background:#fff;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ====== NAVBAR ====== */
.navbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(0,0,0,0.85);
  color: #fff;
  backdrop-filter: blur(8px);
}
.navWrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brand{
  font-weight: 900;
  letter-spacing: 0.4px;
}
.navLinks{
  display:flex;
  gap: 18px;
  opacity: 0.9;
}
.navLinks a:hover{ opacity: 1; text-decoration: underline; }

.cartBtn{
  border: 0;
  cursor: pointer;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 800;
  background:#fff;
  color:#111;
  display:flex;
  align-items:center;
  gap:8px;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    opacity .14s ease;
}

.cartBtn:hover{
  background:#f8fafc;
  box-shadow:0 8px 22px rgba(0,0,0,0.14);
}

.cartBtn:active{
  transform:scale(0.96);
}

.cartBtn:focus-visible{
  outline:3px solid rgba(99,102,241,0.35);
  outline-offset:3px;
}

.cartBtn:disabled,
.cartBtn[disabled]{
  cursor:not-allowed;
  opacity:.55;
  box-shadow:none;
}
.badge{
  display:inline-grid;
  place-items:center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background:#ff3b30;
  color:#fff;
  font-size: 12px;
  font-weight: 900;
}

/* ====== HERO ====== */
.hero{
  height: 260px;
  background: radial-gradient(ellipse at center, #444 0%, #111 55%, #000 100%);
  color:#fff;
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 20px;
}

/* Hero animated clickable background */
.heroBg{ position:absolute; inset:0; pointer-events:none; }
.heroBgItem{
  position:absolute;
  width: 120px;
  height: 120px;
  border-radius: 18px;
  overflow:hidden;
  opacity: .22;
  transform: translate3d(0,0,0);
  filter: saturate(1.05);
  pointer-events:auto;
  cursor:pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
}
.heroBgItem img, .heroBgItem video{
  width:100%; height:100%; object-fit: cover; display:block;
}
.heroBgItem:hover{ opacity: .32; }

@keyframes heroFloat {
  0% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-10px,0) scale(1.02); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
.hero h1{ margin:0; font-size: 44px; line-height: 1.05; }
.hero p{ margin:10px 0 18px; opacity: 0.9; }

.primaryBtn{
  border:0;
  cursor:pointer;
  background:#111;
  color:#fff;
  font-weight: 900;
  padding: 12px 16px;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .12s ease,
    box-shadow .14s ease,
    filter .14s ease,
    opacity .14s ease;
}

.primaryBtn:hover{
  filter:brightness(1.06);
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
}

.primaryBtn:active{
  transform:scale(0.96);
}

.primaryBtn:focus-visible{
  outline:3px solid rgba(17,17,17,0.16);
  outline-offset:3px;
}

.primaryBtn:disabled,
.primaryBtn[disabled]{
  cursor:not-allowed;
  opacity:.55;
  transform:none;
  box-shadow:none;
}

.primaryBtn.full{ width: 100%; }

.ghostBtn{
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .12s ease,
    box-shadow .14s ease,
    background .14s ease,
    border-color .14s ease,
    opacity .14s ease;
}

.ghostBtn:hover{
  background:#f8fafc;
  border-color:#d1d5db;
  box-shadow:0 6px 16px rgba(0,0,0,0.08);
}

.ghostBtn:active{
  transform:scale(0.94);
}

.ghostBtn:focus-visible{
  outline:3px solid rgba(17,17,17,0.12);
  outline-offset:2px;
}

.ghostBtn:disabled,
.ghostBtn[disabled]{
  cursor:not-allowed;
  opacity:.5;
  transform:none;
  box-shadow:none;
}

/* ====== SECTIONS ====== */
main{ max-width: 1100px; margin: 0 auto; padding: 18px 18px 60px; }
.section{ padding: 18px 0; }
.section h2{ margin:0 0 8px; font-size: 32px; }

/* Homepage shop sections stay visually close while remaining separate blocks */
#customMadeSection{
  padding-bottom: 10px;
}

#shop{
  padding-top: 10px;
}

#customMadeSection + #shop{
  margin-top: 0;
}

.muted{ color:#666; }
.tiny{ font-size: 12px; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.hintBox{
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid #eee;
  background:#f7f7f7;
  border-radius: 12px;
}

/* Shop search and filter stay on one row; extra filter types live inside the dropdown */
.shopTools{
  margin: 16px 0 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.shopSearchWrap{
  min-width: 0;
}

.shopSearchInput{
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 15px;
  outline: none;
}

.shopSearchInput:focus,
.shopFilterSelect:focus{
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
}

.shopFilterWrap{
  min-width: 0;
}

.shopFilterSelect{
  width: 158px;
  max-width: 42vw;
  height: 44px;
  padding: 0 36px 0 13px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 800;
  outline: none;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 420px){
  .shopTools{
    gap: 8px;
  }

  .shopFilterSelect{
    width: 136px;
    font-size: 13px;
    padding-left: 11px;
  }
}

/* ====== PRODUCT GRID ====== */
.productGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  align-items: start;
}

.shopEmptyState{
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #e5e7eb;
  border-radius: 16px;
  background: #fafafa;
  text-align: center;
}

/* Separate Custom Made home section is hidden when cards are merged into Shop */
.shopMergedHidden{
  display: none !important;
}

/* Card */
.card{
  height: 302px;
  border: 1px solid #eee;
  border-radius: 16px;
  overflow: hidden;
  background:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

.card.pulse{ animation: cardPulse 1.2s ease 1; }
@keyframes cardPulse{
  0%{ box-shadow: 0 10px 28px rgba(0,0,0,0.08); transform: translateY(0); }
  35%{ box-shadow: 0 18px 40px rgba(59,130,246,0.22); transform: translateY(-2px); }
  100%{ box-shadow: 0 10px 28px rgba(0,0,0,0.08); transform: translateY(0); }
}

/* Image area flexes so cards stay equal without leaving fake text gaps */
.cardImg{
  flex: 1 1 auto;
  min-height: 145px;
  background: #f3f4f6;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}

/* Small card type label for mixed storefront cards */
.cardTypeBadge{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(17,17,17,0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}
.cardImg img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* prevents zoom/crop weirdness */
}
.cardImg video.cardVid{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* Quick add icon (hover) */
.cardQuickAdd{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.92);
  display:grid;
  place-items:center;
  cursor:pointer;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition: opacity .18s ease, transform .18s ease;
}
.card:hover .cardQuickAdd{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cardQuickAdd:hover{ filter: brightness(1.03); }
.noImg{
  height: 100%;
  display:grid;
  place-items:center;
  color:#999;
  font-weight: 800;
}

/* Card body only uses the space its text needs; the image absorbs the difference */
.cardBody{
  flex: 0 0 auto;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Card names are limited to two lines; full details open from the item page/modal */
.cardName{
  font-weight: 900;
  margin: 2px 0 6px;
  cursor: pointer;
  line-height: 1.22;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Small card badges stay compact between name and price */
.cardBody .tiny,
.cardBody .shipBadge{
  font-size: 12px;
  line-height: 1.25;
  margin: 0 0 3px;
  overflow-wrap: anywhere;
}

.cardBody .shipBadge{
  color: #15803d;
  font-weight: 700;
}

/* Price stays visually anchored at the bottom of each card */
.cardPrice{
  margin-top: auto;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
}

/* Discount style */
.newPrice{ color:#16a34a; font-weight: 1000; }
.oldPrice{ color:#9ca3af; text-decoration: line-through; font-weight: 900; margin-left: 8px; }

/* ====== CART ====== */
.cartSection{ margin-top: 18px; }
.cartHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.cartBox{
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 14px;
  background:#fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.cartRow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cartRow > div:first-child{
  min-width: 0;
  flex: 1 1 auto;
}

.cartRow > div:last-child{
  flex: 0 0 auto;
}

.cartItemTitle{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  line-height: 1.22;
  text-align: left;
  cursor: pointer;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  transition: color .14s ease, opacity .14s ease;
}

.cartItemTitle:hover{
  color:#111;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cartItemTitle:active{
  opacity:.72;
}

.cartItemTitle:focus-visible{
  outline:3px solid rgba(17,17,17,0.12);
  outline-offset:3px;
  border-radius:8px;
}

.cartFileNames{
  margin-top: 2px;
  max-width: 100%;
}

.cartFileNameLine{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.cartRow:last-child{ border-bottom:0; }

@media (hover: hover){
  .cartRow{
    transition:background .14s ease;
  }

  .cartRow:hover{
    background:#fafafa;
  }
}

.cartTotals{ margin-top: 12px; }
.cartTotals .row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin: 6px 0;
}
.actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* ====== MODAL ====== */
body.noScroll{ overflow: hidden; }

.modalBackdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  padding: 18px;
}
.modalBackdrop.open{ display:flex; }

.modal{
  width: min(980px, 100%);
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,0.35);
  position: relative;
}

.modalClose{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border:0;
  border-radius: 999px;
  cursor:pointer;
  background: rgba(255,255,255,0.92);
  font-weight: 1000;
}

.modalMedia{
  position: relative;
  background:#f3f4f6;
  height: 380px;
  overflow:hidden;
}
.modalMedia img{
  width: 100%;
  height: 100%;
  object-fit: contain;  /* ✅ SHOW FULL IMAGE, NOT ZOOMED */
  background:#f3f4f6;
}

.imgArrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border:0;
  border-radius: 999px;
  cursor:pointer;
  background: rgba(0,0,0,0.55);
  color:#fff;
  font-size: 26px;
  display:grid;
  place-items:center;
}
.imgArrow.left{ left: 10px; }
.imgArrow.right{ right: 10px; }

.modalBody{
  padding: 14px 16px 18px;
}
.modalTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
}
.modalName{ font-size: 22px; font-weight: 1000; }
.modalPrice{ margin-top: 6px; font-size: 18px; font-weight: 1000; }

.qtyWrap{
  display:flex;
  align-items:center;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow:hidden;
}
.qtyWrap button{
  width: 40px;
  height: 38px;
  border:0;
  background:#f4f4f5;
  cursor:pointer;
  font-weight: 1000;
}
.qtyWrap input{
  width: 64px;
  height: 38px;
  border:0;
  text-align:center;
  outline:none;
  font-weight: 900;
}
.qtyWrap input::-webkit-outer-spin-button,
.qtyWrap input::-webkit-inner-spin-button{ -webkit-appearance: none; margin:0; }
.qtyWrap input{ appearance: textfield; }

@media (max-width: 720px){
  .hero h1{ font-size: 32px; }
  .navLinks{ display:none; }
  .modalMedia{ height: 280px; }
  .modalTop{ flex-direction: column; }
}

/* =========================
   Public Messaging Widget
========================= */
.msgFab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(18,22,34,.92);
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor:pointer;
}
.msgFab[hidden]{ display:none !important; }
.msgModalOverlay{
  position:fixed; inset:0; z-index:101;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(3px);
}
.msgModal{
  position:fixed;
  right:18px; bottom:78px;
  width:min(380px, 92vw);
  z-index:102;
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background: rgba(14,18,30,.98);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  overflow:hidden;
}
.msgModalHeader{ display:flex; justify-content:space-between; gap:10px; align-items:center; padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.msgStatusDot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px; }
.msgBody{ padding:12px; }
.msgBody input,.msgBody textarea{ width:100%; margin:8px 0; }
.msgRow{ display:flex; gap:10px; align-items:center; justify-content:space-between; }

/* =========================
   Customer Messaging Widget
   ========================= */
.msgFab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(25,35,55,0.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.msgStatusDot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #888;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
}
.msgBackdrop{
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0,0,0,0.45);
}
.msgPanel{
  position: fixed;
  right: 18px;
  bottom: 72px;
  width: min(360px, calc(100vw - 36px));
  z-index: 50;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(15,22,36,0.96);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.msgHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(14, 196, 228, 0.9);

}
.msgTitle{ font-weight: 700; }
.msgStatusText{ font-size: 12px; opacity: 0.85; }
.msgClose{
  border: none;
  background: rgba(193, 220, 224, 0.9);
  color:#000000;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
}
.msgBody{ padding: 12px 14px; display:flex; flex-direction: column; gap: 8px; }
.msgLabel{ font-size: 12px; opacity: 0.85; }
.msgInput, .msgTextarea{
  width: 100%;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color:#fff;
  outline: none;
}
.msgTextarea{ resize: vertical; }
.msgHint{ min-height: 16px; font-size: 12px; opacity: 0.85; }
.msgNote{ min-height: 16px; font-size: 12px; opacity: 0.85; }
.msgReply{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(228, 221, 227, 0.9);
  font-size: 13px;
  line-height: 1.35;
}
.msgReply .lbl{ opacity: 0.8; font-size: 12px; margin-bottom: 6px; }
.msgSend{
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(75,120,255,0.9);
  color:#fff;
  cursor:pointer;
}


/* ===== Message Widget Status ===== */

/* Public message widget: status line */
.msg-status.is-online { opacity: 0.95; }
.msg-status.is-offline { opacity: 0.95; }

/* Public message widget: note box */
.msg-note.hidden { display: none !important; }
.msg-note {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
}
.msg-note.success {
  color: #d1ffe9;
  background: rgba(0, 160, 120, 0.25);
  border: 1px solid rgba(0, 200, 150, 0.35);
}
.msg-note.error {
  color: #ffffff;
  background: rgba(185, 28, 28, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Reply / thread box */
.msg-thread {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.35;
  background: rgba(228, 221, 227, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.10);
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
}





/* --- Messaging modal (hardening) --- */
[hidden]{display:none !important;}
html.modalOpen, body.modalOpen{overflow:hidden;}
.msgFab{ z-index: 9999; pointer-events: auto; }
.msgModal{ z-index: 9998; }
.msgBackdrop{display:flex; align-items:flex-end; justify-content:flex-end; padding:18px; pointer-events:auto;}
.msgPanel{pointer-events:auto;}



/* Product modal: make long description scrollable */
#modalDesc{ max-height: 240px; overflow: auto; padding-right: 6px; }
#modalDesc{
  max-height:240px;
  overflow:auto;
  padding-right:6px;
}

/* ===== Inline Checkout (Stripe Payment Element) ===== */
.hidden{ display:none !important; }

.checkoutInline{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(0,0,0,0.20);
}

.checkoutGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 900px){
  .checkoutGrid{ grid-template-columns: 1.1fr 0.9fr; align-items:start; }
}

.formRow{ margin: 10px 0; }
.formRow label{ display:block; margin-bottom:6px; font-weight:600; }
.formRow input, .formRow select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: inherit;
}
.formRow.twoCol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.req{ color: #ff6b6b; }

.errorBox{
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255, 0, 0, 0.30);
  background: rgba(255,0,0,0.08);
}

.couponRow{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.couponRow .couponInput{ flex: 1; }

.totalsBox{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
}
.totLine{ display:flex; justify-content:space-between; padding: 6px 0; }
.totTotal{ font-size: 1.05em; font-weight: 800; border-top:1px solid rgba(255,255,255,0.10); margin-top:6px; padding-top:10px; }

.paymentElement{ margin: 6px 0 12px; }

.errorText{ color: rgba(255,120,120,1); }


.shipBadge{font-size:12px; margin-top:4px; color:#2e7d32; font-weight:600;}




/* ================= Full-page detail styles (merged from products.css) ================= */
/* products.css - full page shared layout (Products + Custom Sticker)
   Goals:
   - Desktop: gallery on left, details stuck to top on right
   - Thumbnails column never wider than gallery, never taller than stage
   - About this item under the gallery, spanning full width (clean, not "stretchy")
   - Mobile: thumbs hidden, arrows hidden, clean vertical stack
*/

.pp-main{ max-width: 1180px; margin: 0 auto; padding: 16px 18px 70px; }

.pp-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px;
  align-items:start;
}

/* Custom made full page: create a dedicated left slot (row 2, col 1) for Highlights.
   This prevents the "highlights above name" bug at medium widths and fills the empty space under gallery.
*/
#productPage.pp-custom .pp-gallery,
body.pp-custom-made #productPage .pp-gallery{
  grid-column: 1 / 2;
  grid-row: 1;
}

#productPage.pp-custom .pp-rightCol,
body.pp-custom-made #productPage .pp-rightCol{
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
}

#productPage.pp-custom .pp-highlightsSlot,
body.pp-custom-made #productPage .pp-highlightsSlot{
  grid-column: 1 / 2;
  grid-row: 2;
}

.pp-highlightsSlot{ display:none; }

#productPage.pp-custom .pp-highlightsSlot,
body.pp-custom-made #productPage .pp-highlightsSlot{
  display:block;
}

/* -------- Gallery area -------- */
.pp-gallery{
  display:grid;
  /* Thumbnails should be visible (not tiny) but still compact */
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items:start;
}

.pp-stage{
  position:relative;
  border: 1px solid #eee;
  border-radius: 16px;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  /* responsive height without getting crazy tall */
  aspect-ratio: 16 / 10;
  max-height: 60vh;
  min-height: 320px;
}
#ppImg{ width:100%; height:100%; object-fit: contain; }
#ppVid{ width:100%; height:100%; object-fit: contain; background:#000; }
.pp-stageHint{ color:#6b7280; font-weight: 800; }

.ppArrow{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.85);
  cursor:pointer;
}
.ppArrow.left{ left: 8px; }
.ppArrow.right{ right: 8px; }

.pp-thumbs{
  display:flex;
  flex-direction: column;
  gap: 10px;
  overflow:auto;
  padding-right: 0px;
  height: auto;
  max-height: var(--pp-stage-h, 420px);
  align-self: stretch;
}

/* Custom sticker: keep "About" under the gallery on tablets so there is no big empty space */
@media (min-width: 900px) and (max-width: 1199px){
  #productPage.pp-custom .pp-aboutSection{ grid-column: 1 / 2; margin-top: 12px; }
}
@media (min-width: 1200px){
  #productPage.pp-custom .pp-aboutSection{ grid-column: 1 / 2; }
}
@media (max-width: 899px){
  #productPage.pp-custom .pp-aboutSection{ grid-column: 1 / -1; }
}

.pp-thumbBtn{
  border: 0px solid #e5e7eb;
  border-radius: 8px;
  background:#fff;
  padding: 0px;
  cursor:pointer;
}
.pp-thumbBtn.active{ outline: 3px solid rgba(59,130,246,0.45); }
.pp-thumbBtn img,
.pp-thumbBtn video{
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  display:block;
}


/* -------- Right column cards -------- */
/* No sticky at all (requested). If we need a floating add button later, we do it separately. */
.pp-rightCol{ position: static; top:auto; align-self:start; }
.pp-card{
  border: 1px solid #eee;
  border-radius: 16px;
  background:#fff;
  padding: 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}
.pp-card + .pp-card{ margin-top: 12px; }

/* -------- Details (right) -------- */
.pp-side{ position: static; top:auto; padding:0; border:0; background:transparent; box-shadow:none; }
.pp-title{ margin:0 0 6px; font-size: 26px; line-height:1.1; }
#ppFreeShip{ margin-bottom: 10px; }
.pp-priceRow{ display:flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-price{ font-size: 22px; font-weight: 900; }

.pp-actions{ display:flex; gap: 10px; align-items: center; margin: 12px 0 12px; }
.pp-add{ height: 44px; }

/* Product page variant controls */
.pp-variantBlock{
  margin: 12px 0 10px;
}

.pp-variantRow{
  display:grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  gap:10px 12px;
  align-items:end;
}

.pp-variantField{
  min-width:0;
}

.pp-variantField .pp-label{
  display:block;
  margin:0 0 4px;
  font-size:14px;
  font-weight:600;
}

.pp-variantField .pp-select{
  width:100%;
  height:42px;
  padding:8px 10px;
  font-size:14px;
}

.pp-variantChosen{
  grid-column: 1 / -1;
  margin-top:2px;
}

#ppVariantChosenLine{
  font-size:14px;
  line-height:1.35;
  color:#6b7280;
  min-height:18px;
}

.pp-variantMsg{
  display:none;
  margin:6px 0 0;
  min-height:0;
  font-size:14px;
  line-height:1.35;
}

.pp-variantMsg:not(:empty){
  display:block;
}

.pp-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:10px;
}

.pp-qty{
  margin:0;
}

.pp-add{
  height:44px;
  white-space:nowrap;
}

@media (max-width: 900px){
  .pp-variantRow{
    grid-template-columns: 1fr;
  }

  .pp-variantChosen{
    grid-column:auto;
  }
}

.pp-section{ margin-top: 14px; }
.pp-hHead{ font-weight: 900; margin-bottom: 8px; }

/* Highlights: product + custom made detail + custom sticker home */
.pp-highlights,
#ppHighlights,
#csHighlights,
#csHomeHighlights{
  min-width:0;
}

/* Badge / pill container */
.pp-highlights-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* Badge default */
.pp-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  max-width:100%;
  padding:7px 11px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#f9fafb;
  color:#111827;
  font-size:12px;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}

/* Pills are softer and rounder */
.pp-badge-pill{
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}

/* Shape selector for badge/pill styles */
.pp-badge-shape-circle{
  width:72px;
  min-width:72px;
  height:72px;
  min-height:72px;
  padding:8px;
  border-radius:999px;
  text-align:center;
}

.pp-badge-shape-rect{
  border-radius:12px;
}

/* List styles */
.pp-highlights-list{
  margin:0;
  padding-left:20px;
}

.pp-highlights-list li{
  margin:7px 0;
  line-height:1.35;
  overflow-wrap:anywhere;
}

/* Normal bullets */
.pp-highlights-bullets,
.pp-highlights-style-bullets .pp-highlights-list{
  list-style:disc;
}

/* Check style */
.pp-highlights-checks{
  list-style:none;
  padding-left:0;
}

.pp-highlights-checks li{
  position:relative;
  padding-left:24px;
}

.pp-highlights-checks li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:#16a34a;
  font-weight:1000;
}

/* Plain / no dot: lets you use your own emoji or custom prefix */
.pp-highlights-plain{
  list-style:none;
  padding-left:0;
}

.pp-highlights-plain li{
  padding-left:0;
}

/* Numbered */
.pp-highlights-numbered{
  list-style:decimal;
  padding-left:22px;
}

/* Images inside highlight items */
.pp-highlights-list img,
.pp-badge img{
  display:inline-block;
  vertical-align:middle;
  max-width:140px;
  max-height:32px;
  width:auto;
  height:auto;
}

.pp-badge-shape-circle img{
  max-width:42px;
  max-height:32px;
}

/* Home custom sticker highlight caps still work with new renderer */
#csHighlights .pp-highlights-list li,
#csHighlights .pp-badge,
#csHomeHighlights .pp-highlights-list li,
#csHomeHighlights .pp-badge{
  display:list-item;
}

#csHighlights .pp-highlights-badges .pp-badge,
#csHomeHighlights .pp-highlights-badges .pp-badge{
  display:inline-flex;
}

@media (max-width:600px){
  .pp-badge{
    min-height:32px;
    padding:7px 10px;
    font-size:12px;
  }

  .pp-badge-shape-circle{
    width:64px;
    min-width:64px;
    height:64px;
    min-height:64px;
    font-size:11px;
  }

  .pp-highlights-list{
    padding-left:18px;
  }

  .pp-highlights-checks,
  .pp-highlights-plain{
    padding-left:0;
  }
}
/* -------- About (full width under gallery + details) -------- */
.pp-aboutSection{
  grid-column: 1 / -1;
  border: 1px solid #eee;
  border-radius: 16px;
  background:#fff;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.04);
}
.pp-about{ color:#374151; line-height:1.55; max-width: 980px; }

/* -------- Static blocks -------- */
#ppStaticWrap{
  grid-column: 1 / -1;
  border: 1px solid #eee;
  border-radius: 16px;
  background:#fff;
  padding: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.04);
}

.pp-block{ border-top: 1px solid #eee; padding-top: 12px; margin-top: 12px; }
.pp-block:first-child{ border-top: 0; padding-top: 0; }
.pp-blockTitle{ font-weight: 900; margin: 0 0 6px; }
.pp-blockNote{ color:#4b5563; font-size: 13px; margin-top: 8px; line-height: 1.45; }

.pp-blockMedia{ position:relative; border: 1px solid #eee; border-radius: 14px; overflow:hidden; background:#fff; height: 320px; display:flex; align-items:center; justify-content:center; }
.pp-blockMedia img,
.pp-blockMedia video{ width:100%; height:100%; object-fit: contain; }

.pp-blockNav{ position:absolute; inset: 0; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.pp-blockNav button{ pointer-events:auto; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.10); background: rgba(255,255,255,0.85); cursor:pointer; margin: 0 10px; }
.pp-dots{ display:flex; gap: 6px; justify-content:center; margin-top: 8px; }
.pp-dot{ width: 8px; height: 8px; border-radius: 999px; background: #d1d5db; cursor:pointer; }
.pp-dot.active{ background: #111827; }

.pp-error{ margin-top: 18px; padding: 14px; border-radius: 14px; border: 1px solid #fecaca; background:#fff1f2; color:#7f1d1d; }



.pp-video-play{
  position:absolute;
  inset:auto auto 18px 18px;
  z-index:5;
  display:grid;
  place-items:center;
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}

.pp-video-play:hover{
  transform:translateY(-1px);
}

/* Full-screen product/custom-made gallery */
html.ppLightboxOpen,
body.ppLightboxOpen{
  overflow: hidden;
}

.ppLightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.88);
  padding: 58px 92px;
}

.ppLightbox.open{
  display: flex;
}

.ppLightboxFrame{
  width: min(1100px, 100%);
  height: min(78vh, 780px);
  display: grid;
  place-items: center;
}

.ppLightboxMedia{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 20px 70px rgba(0,0,0,0.45);
}

.ppLightboxClose{
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.ppLightboxArrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ppLightboxPrev{ left: 24px; }
.ppLightboxNext{ right: 24px; }

@media (max-width: 640px){
  .ppLightbox{
    padding: 62px 14px 34px;
  }

  .ppLightboxFrame{
    height: 76vh;
  }

  /* Mobile uses swipe gestures, so full-screen arrows stay hidden */
  .ppLightboxArrow{
    display: none !important;
  }

  .ppLightboxClose{
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    font-size: 26px;
  }
}

/* -------- Responsive -------- */
/*
  Responsive:
  - <=980px (small tablets / responsive devtools widths): stack to avoid any overlap.
  - Phones: hide thumbs & arrows.
*/
@media (max-width: 980px){
  .pp-grid{ grid-template-columns: 1fr; }
  .pp-rightCol{ position: static; top:auto; }
  .pp-side{ position: static; top:auto; }
  .pp-aboutSection, #ppStaticWrap{ grid-column: 1 / -1; }

  /* On stacked layouts, disable the custom two-row grid behavior */
    #productPage.pp-custom .pp-rightCol,
  body.pp-custom-made #productPage .pp-rightCol{ grid-row: auto; grid-column: 1 / -1; }

  #productPage.pp-custom .pp-gallery,
  body.pp-custom-made #productPage .pp-gallery{ grid-row: auto; grid-column: 1 / -1; }

  #productPage.pp-custom .pp-highlightsSlot,
  body.pp-custom-made #productPage .pp-highlightsSlot{ grid-row: auto; grid-column: 1 / -1; display:none; }
}

@media (max-width: 560px){
  .pp-thumbs{ display:none; }
  .pp-gallery{ grid-template-columns: 1fr; }

  /* Mobile keeps gallery arrows visible because thumbnails are hidden */
  .ppArrow{
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.88);
    box-shadow: 0 8px 22px rgba(0,0,0,0.14);
  }

  .ppArrow.left{ left: 8px; }
  .ppArrow.right{ right: 8px; }

  .pp-stage{ min-height: 240px; aspect-ratio: 16 / 11; }
  .pp-blockMedia{ height: 240px; }
}


.pp-label{ display:block; font-size:13px; font-weight:600; margin: 10px 0 6px; color:#111; }
.pp-select,.pp-input,.pp-textarea{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  background:#fff;
}
.pp-textarea{ resize: vertical; }
.pp-help{ font-size:12px; color:#6b7280; margin-top:6px; }
.pp-row2{ display:flex; gap:14px; margin-top:10px; }
.pp-check{ display:flex; align-items:center; gap:8px; font-size:14px; }
.pp-optBtn{
  width:100%;
  margin-top:10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid #fde2e2;
  background:#fee2e2;
  color:#111;
  font-weight:600;
  cursor:pointer;
  text-align:left;
}
.pp-opt{ opacity:.6; font-weight:500; }
.pp-optWrap{ margin-top:10px; padding: 12px; border:1px dashed #e5e7eb; border-radius: 12px; background:#fafafa; }
.pp-note{ margin-top:10px; font-size:13px; color:#111; }
.pp-fileRow{ margin-top:8px; }
.pp-fileName{ font-size:13px; font-weight:600; }

.pp-priceSale{ font-size: 28px; font-weight: 800; color:#111; }
.pp-priceWas{ margin-left:8px; color:#9ca3af; text-decoration: line-through; font-weight:700; }

/* (Sticky intentionally disabled site-wide for now.) */


/* ---- In-page product/custom full view ---- */
.pp-page{ padding-top: 6px; }


/* ---- Home custom sticker below area ---- */
.cs-below{ display:grid; grid-template-columns: 1fr; gap:14px; margin-top:14px; }
.cs-belowCard{ border:1px solid #eee; border-radius:16px; background:#fff; padding:14px 16px; box-shadow:0 10px 28px rgba(0,0,0,.06); }
.cs-belowHead{ font-weight:800; margin-bottom:10px; }
.cs-belowHeadRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.cs-seeMore{ border:none; background:transparent; color:#111; font-weight:800; cursor:pointer; }
.cs-aboutPreview{ color:#374151; line-height:1.55; }


/* ===== NAV BRAND ACTIVE FIX ===== */
.nav-link{position:relative;text-decoration:none}
.nav-brand{font-weight:800;letter-spacing:.2px}
.nav-link.active::after,
.nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:3px;border-radius:999px;
  background:currentColor;
}


/* Coupon message styling (works with #co_coupon_msg) */
#co_coupon_msg.couponOk{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0, 180, 90, .10);
  color: rgba(0, 120, 55, 1);
}

#co_coupon_msg.couponWarn{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255, 170, 0, .15);
  color: rgba(150, 85, 0, 1);
}

#co_coupon_msg.couponErr{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255, 0, 0, .10);
  color: rgba(170, 0, 0, 1);
}




/* FOOTER */


.site-footer {
  background: #0f0f0f;
  color: #ccc;
  padding: 48px 20px 24px;
  font-size: 14px;
}

.site-footer a {
  color: #aaa;
  text-decoration: none;
  display: block;
  margin: 6px 0;
}

.site-footer a:hover {
  color: #fff;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
}

.footer-col h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 10px;
}

/* Footer accordion (mobile)
   We use <details>/<summary> for reliability across pages/browsers.
*/
.footer-acc {
  border: 0;
  padding: 0;
  margin: 0;
}

.footer-title {
  list-style: none; /* Firefox */
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.footer-title:focus { outline: none; }
.footer-title:focus-visible { outline: 2px solid #333; outline-offset: 4px; }

/* Hide the default marker */
.footer-title::-webkit-details-marker { display: none; }

/* Desktop: make it look like the old <h4> and keep links visible */
.footer-acc > .footer-title {
  color: #fff;
  font-size: 15px;
  margin-bottom: 10px;
  font-weight: 700;
}

.footer-links a { -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-acc {
    border-top: 1px solid #222;
    padding: 10px 0;
  }
  .footer-acc:first-child { border-top: 0; }

  .footer-acc > .footer-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0;
    padding: 10px 0;
    cursor: pointer;
  }

  .footer-acc > .footer-title::after {
    content: "▸";
    font-size: 14px;
    color: #aaa;
    transform: rotate(0deg);
    transition: transform .15s ease;
  }
  .footer-acc[open] > .footer-title::after {
    transform: rotate(90deg);
  }

  .footer-links {
    padding: 6px 0 8px;
  }
  .footer-links a {
    margin: 8px 0;
  }
}

.footer-bottom {
  border-top: 1px solid #222;
  margin-top: 32px;
  padding-top: 16px;
  text-align: center;
  font-size: 13px;
  color: #777;
}

/* privacy-policy */

.legal-page {
  max-width: 900px;
  margin: 60px auto;
  padding: 0 20px;
  line-height: 1.7;
  color: #222;
}

.legal-page h1 {
  margin-bottom: 20px;
}

.legal-page h2 {
  margin-top: 32px;
  margin-bottom: 10px;
}

.legal-page p,
.legal-page li {
  margin-bottom: 10px;
}

/*   contact page */

.contact-page .contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

.contact-page .contact-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 18px;
}

.contact-page .formRow {
  margin-bottom: 12px;
}

.contact-page input,
.contact-page select,
.contact-page textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  box-sizing: border-box;
}

.contact-page textarea { resize: vertical; }

.contact-page .req { color: #b00020; }

.contact-page .contact-links {
  padding-left: 18px;
}

.contact-page .contact-note {
  margin-top: 14px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #eee;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .contact-page .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* back to top*/
.footer-backtop {
  display: none;
  text-align: center;
  margin: 14px 0 8px;
}

.footer-backtop button {
  background: none;
  border: none;
  color: #bbb;
  font-size: 13px;
  cursor: pointer;
}

.footer-backtop button:active {
  opacity: 0.6;
}

@media (max-width: 900px) {
  .footer-backtop {
    display: block;
  }
}

/* Highlight image alignment + iPad/Safari repaint safety */
#csUnderHighlights img,
#csHighlights img,
#csHomeHighlights img,
#ppHighlights img,
.highlights img,
.cs-highlights img{
  display:inline-block;
  vertical-align:middle;
  width:auto;
  height:auto;
  max-width:140px;
  max-height:32px;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  backface-visibility:hidden;
}


/* Highlight list spacing: allow bullets/checks/plain/numbered to behave differently */
#csUnderHighlights ul,
#csHighlights ul,
#csHomeHighlights ul,
#ppHighlights ul,
.highlights ul,
.cs-highlights ul{
  margin:0.25rem 0 0;
}

#csUnderHighlights .pp-highlights-bullets,
#csHighlights .pp-highlights-bullets,
#csHomeHighlights .pp-highlights-bullets,
#ppHighlights .pp-highlights-bullets,
.highlights .pp-highlights-bullets,
.cs-highlights .pp-highlights-bullets{
  padding-left:1.25em;
  list-style:disc;
}

#csUnderHighlights .pp-highlights-plain,
#csHighlights .pp-highlights-plain,
#csHomeHighlights .pp-highlights-plain,
#ppHighlights .pp-highlights-plain,
.highlights .pp-highlights-plain,
.cs-highlights .pp-highlights-plain{
  padding-left:0;
  list-style:none;
}

/* iOS/iPad repaint safety for highlight rows */
@supports (-webkit-touch-callout: none) {
  .cs-highlights li,
  #csUnderHighlights li,
  #csHighlights li,
  #csHomeHighlights li,
  #ppHighlights li,
  .pp-badge{
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }

  .cs-highlights li img,
  #csUnderHighlights li img,
  #csHighlights li img,
  #csHomeHighlights li img,
  #ppHighlights li img,
  .pp-badge img{
    display:inline-block;
    vertical-align:middle;
  }
}


@supports (-webkit-touch-callout: none) {
  .cs-navbar,
  .cs-card,
  header,
  .navBar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Keep image highlights compact in all styles */
.pp-highlights-list li.hl-li-has-img img,
.pp-badge.hl-li-has-img img{
  vertical-align:middle;
  display:inline-block;
  max-width:140px;
  max-height:32px;
  width:auto;
  height:auto;
}
/* ====== OVERRIDES: homepage highlights cap + custom sticker full-page layout (2026-02-26) ====== */
/* These rules are intentionally VERY specific to avoid conflicts with older/duplicated CSS. */

/* --- Homepage: cap Custom Sticker highlights consistently (CSS-only) --- */
/* Mobile: show 3 bullets */
#csHighlights li{ display:list-item; }
@media (max-width: 600px){
  #csHighlights li:nth-child(n+4){ display:none; }
}
/* iPad/tablet: show 6 bullets */
@media (min-width: 601px) and (max-width: 1024px){
  #csHighlights li:nth-child(n+7){ display:none; }
}
/* Desktop: show 8 bullets */
@media (min-width: 1025px){
  #csHighlights li:nth-child(n+9){ display:none; }
}

/* --- Custom Sticker FULL PAGE: force 2-column layout on wide screens (gallery left, add-to-cart right) --- */
@media (min-width: 981px){
  body.pp-custom #productPage .pp-grid{
    display:grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr) !important;
    grid-template-areas:
      "left right"
      "highlights right"
      "about about"
      "more more" !important;
    column-gap:18px !important;
    row-gap:18px !important;
    align-items:start !important;
  }
  body.pp-custom #productPage .pp-leftCol{ grid-area:left !important; }
  body.pp-custom #productPage .pp-rightCol{ grid-area:right !important; align-self:start !important; position:sticky; top:88px; }
  body.pp-custom #productPage .pp-highlightsSlot{ grid-area:highlights !important; display:block !important; }
  body.pp-custom #productPage .pp-underGallery{ grid-area:about !important; }
  body.pp-custom #productPage .pp-more{ grid-area:more !important; }

  /* If any older CSS turned these into flex, force block/normal flow */
  body.pp-custom #productPage .pp-leftCol,
  body.pp-custom #productPage .pp-rightCol,
  body.pp-custom #productPage .pp-highlightsSlot,
  body.pp-custom #productPage .pp-underGallery,
  body.pp-custom #productPage .pp-more{
    min-width:0 !important;
  }
}
/* ============================================================
   CUSTOM STICKER FULL PAGE ONLY (body.pp-custom)
   - keep right column on iPad/desktop
   - DO NOT allow sticky/fixed card
   ============================================================ */

/* iPad+ / big screens: 2-column layout */
@media (min-width: 900px) {
  body.pp-custom #productPage .ppTop {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 20px;
    align-items: start;
  }

  body.pp-custom #productPage .pp-leftCol {
    min-width: 0;
  }

  /* RIGHT COLUMN: ensure it is NOT sticky/fixed */
  body.pp-custom #productPage .pp-rightCol,
  body.pp-custom #productPage .pp-side,
  body.pp-custom #productPage .ppCard,
  body.pp-custom #productPage .ppCardInner {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* make sure nothing tries to “stick” via transforms/contain */
  body.pp-custom #productPage .pp-rightCol {
    transform: none !important;
    contain: none !important;
    align-self: start;
  }
}

/* smaller screens: stack normally */
@media (max-width: 899px) {
  body.pp-custom #productPage .ppTop {
    display: block !important;
  }

  body.pp-custom #productPage .pp-rightCol,
  body.pp-custom #productPage .pp-side,
  body.pp-custom #productPage .ppCard,
  body.pp-custom #productPage .ppCardInner {
    position: static !important;
    top: auto !important;
  }
}
/* HOME: About this item -> clamp to 3 lines on mobile (keep See more visible) */

@media (max-width: 600px) {
  #csHomeAbout > span,
  #csAbout > span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}
/* FORCE block cursor when disabled */
button.primaryBtn.pp-add:disabled,
#ppadd:disabled {
  cursor: not-allowed !important;
  pointer-events: auto !important;   /* keep hover active */
  opacity: 0.5;
}

/* Only show pointer when enabled */
button.primaryBtn.pp-add:not(:disabled) {
  cursor: pointer !important;
}

#ppCsFileName { display: none !important; }
#csFileName { display: none !important; }


/* Full page upload: thumbnail + hint on same line */
#ppCsFileThumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}

#ppCsFileHint {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

/* Make sure thumb size matches the homepage */
#ppCsFileThumbs .cs-fileThumb {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
}



body.pp-hideChatWidget #publicMsgBtn { display: none !important; }
body.pp-hideChatWidget #publicMsgModal { display: none !important; }


.outOfStock{
  font-size: 0.82em !important;
  font-weight: 400 !important;
  opacity: 0.85 !important;
}


/* success page */
.shop {
  max-width: 720px;
  margin: 60px auto;
  padding: 0 16px;
}

.stripeBox{
background:#111;
color:#fff;
border-radius:10px;
padding:24px;
margin-top:20px;
max-width:520px;
}

.btnPrimary.full {
  display: block;
  text-align: center;
  margin-top: 16px;
}


/* success page only */
.successShell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #efefef;
}

.successPage{
  flex: 1 0 auto;
}

.successShell .site-footer{
  margin-top: auto;
}

/* Checkout actions: fully blocked when disabled or forced blocked */
#co_build_intent[disabled],
#co_pay_btn[disabled],
#co_apply_coupon[disabled],
#co_build_intent.isBlocked,
#co_pay_btn.isBlocked,
#co_apply_coupon.isBlocked,
#co_build_intent[disabled] *,
#co_pay_btn[disabled] *,
#co_apply_coupon[disabled] *,
#co_build_intent.isBlocked *,
#co_pay_btn.isBlocked *,
#co_apply_coupon.isBlocked *{
  pointer-events: none !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
  filter: none !important;
}
/* Checkout busy state: keep cursor consistent while processing */
.checkoutBusy,
.checkoutBusy *,
body.checkoutBusyCursor,
body.checkoutBusyCursor *{
  cursor: not-allowed !important;
}
/* ===== Custom Made detail builder =====
   Keeps dynamic admin attributes compact, readable, and consistent on product pages.
*/

body.pp-custom-made #productPage .pp-card{
  padding: 22px;
  border-radius: 18px;
}

body.pp-custom-made #productPage .pp-title{
  margin-bottom: 6px;
  font-size: 30px;
  line-height: 1.08;
}

body.pp-custom-made #productPage #ppFreeShip{
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #15803d;
}

body.pp-custom-made #productPage .pp-priceRow{
  margin: 4px 0 10px;
}

body.pp-custom-made #productPage .pp-price{
  font-size: 30px;
  line-height: 1.05;
}

.pp-custom-made-builder{
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 0;
}

.pp-custom-made-builder .cm-field{
  display: block;
  margin: 0;
}

.pp-custom-made-builder .cm-label{
  display: block;
  margin: 0 0 5px;
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.pp-custom-made-builder .cm-required{
  color: #ef4444;
  font-weight: 1000;
}

.pp-custom-made-builder .cm-help{
  margin: 0 0 8px;
  color: #4b5563;
  font-size: 13px;
  line-height: 1.35;
}

.pp-custom-made-builder .cm-input,
.pp-custom-made-builder select.cm-input,
.pp-custom-made-builder input.cm-input,
.pp-custom-made-builder textarea.cm-input,
.pp-custom-made-builder .cm-textarea{
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #111827;
  font-size: 15px;
  line-height: 1.35;
  outline: none;
}

.pp-custom-made-builder select.cm-input{
  cursor: pointer;
}

.pp-custom-made-builder .cm-input:focus,
.pp-custom-made-builder .cm-textarea:focus{
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
}

.pp-custom-made-builder textarea.cm-input,
.pp-custom-made-builder .cm-textarea{
  min-height: 88px;
  max-height: 150px;
  resize: vertical;
}

.pp-custom-made-builder input[type="file"].cm-input{
  min-height: auto;
  padding: 9px 10px;
  cursor: pointer;
}

.pp-custom-made-builder .cm-options{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.pp-custom-made-builder .cm-option{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #111827;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pp-custom-made-builder .cm-option input[type="radio"],
.pp-custom-made-builder .cm-option input[type="checkbox"]{
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: #111;
}

/* Styled option groups hide the native control but keep the label clickable. */
.pp-custom-made-builder .cm-options-buttons input,
.pp-custom-made-builder .cm-options-pills input,
.pp-custom-made-builder .cm-options-tiles input,
.pp-custom-made-builder .cm-options-card_grid input,
.pp-custom-made-builder .cm-options-color_swatch input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pp-custom-made-builder .cm-options-buttons .cm-option,
.pp-custom-made-builder .cm-options-pills .cm-option,
.pp-custom-made-builder .cm-options-tiles .cm-option,
.pp-custom-made-builder .cm-options-card_grid .cm-option{
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.pp-custom-made-builder .cm-options-pills .cm-option{
  border-radius: 999px;
}

.pp-custom-made-builder .cm-options-tiles .cm-option{
  min-width: 96px;
  justify-content: center;
}

.pp-custom-made-builder .cm-options-card_grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.pp-custom-made-builder .cm-options-card_grid .cm-option{
  min-height: 62px;
  justify-content: center;
  text-align: center;
}

.pp-custom-made-builder .cm-option.cm-selected{
  border-color: #111;
  background: #f8fafc;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
  font-weight: 900;
}

.pp-custom-made-builder .cm-swatch{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #b6beca;
  background: var(--cm-swatch, #ddd);
  display: inline-block;
  flex: 0 0 auto;
}

.pp-custom-made-builder .cm-options-color .cm-option,
.pp-custom-made-builder .cm-options-color_swatch .cm-option{
  padding: 6px 8px;
  border-radius: 999px;
}

.pp-custom-made-builder .cm-display-stacked .cm-options,
.pp-custom-made-builder .cm-options-stacked{
  display: grid;
  gap: 9px;
}

.pp-custom-made-builder .cm-display-inline .cm-options{
  display: inline-flex;
}

.pp-custom-made-builder .cm-actions{
  margin-top: 4px;
  display: flex;
  justify-content: flex-start;
}

.pp-custom-made-builder .cm-add-btn{
  min-width: 150px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

.pp-custom-made-builder .cm-add-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 640px){
  body.pp-custom-made #productPage .pp-card{
    padding: 18px;
  }

  body.pp-custom-made #productPage .pp-title{
    font-size: 28px;
  }

  .pp-custom-made-builder{
    gap: 15px;
  }

  .pp-custom-made-builder .cm-actions,
  .pp-custom-made-builder .cm-add-btn{
    width: 100%;
  }
}

/* ===== Custom Made detail polish =====
   Final pass for dynamic option controls after the main builder rules above.
   This block removes older duplicate styling and keeps all input types visually consistent.
*/

/* Give each dynamic field a quiet rhythm without large empty gaps. */
.pp-custom-made-builder .cm-field + .cm-field{
  margin-top: 2px;
}

.pp-custom-made-builder .cm-label{
  letter-spacing: -0.01em;
}

.pp-custom-made-builder .cm-help{
  max-width: 58ch;
}

/* Native dropdowns and number/text inputs should feel like one design system. */
.pp-custom-made-builder select.cm-input,
.pp-custom-made-builder input[type="number"].cm-input,
.pp-custom-made-builder input[type="text"].cm-input,
.pp-custom-made-builder input[type="email"].cm-input,
.pp-custom-made-builder input[type="tel"].cm-input,
.pp-custom-made-builder input[type="url"].cm-input,
.pp-custom-made-builder input[type="date"].cm-input{
  height: 44px;
}

.pp-custom-made-builder input[type="number"].cm-input{
  appearance: textfield;
}

.pp-custom-made-builder input[type="number"].cm-input::-webkit-outer-spin-button,
.pp-custom-made-builder input[type="number"].cm-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Styled choices: buttons, pills, tiles, and card grids. */
.pp-custom-made-builder .cm-options-buttons .cm-option,
.pp-custom-made-builder .cm-options-pills .cm-option,
.pp-custom-made-builder .cm-options-tiles .cm-option,
.pp-custom-made-builder .cm-options-card_grid .cm-option{
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.035);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.pp-custom-made-builder .cm-options-buttons .cm-option:hover,
.pp-custom-made-builder .cm-options-pills .cm-option:hover,
.pp-custom-made-builder .cm-options-tiles .cm-option:hover,
.pp-custom-made-builder .cm-options-card_grid .cm-option:hover{
  border-color: #cbd5e1;
  transform: translateY(-1px);
}

.pp-custom-made-builder .cm-options-pills .cm-option{
  border-radius: 999px;
}

.pp-custom-made-builder .cm-options-tiles .cm-option{
  min-width: 96px;
  justify-content: center;
}

.pp-custom-made-builder .cm-options-card_grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
}

.pp-custom-made-builder .cm-options-card_grid .cm-option{
  min-height: 62px;
  justify-content: center;
  text-align: center;
}

/* Selected choices should be obvious but not heavy. */
.pp-custom-made-builder .cm-option.cm-selected{
  border-color: #111;
  background: #f8fafc;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08);
  font-weight: 900;
}

/* Color and swatch controls. */
.pp-custom-made-builder .cm-swatch{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #b6beca;
  background: var(--cm-swatch, #ddd);
  display: inline-block;
  flex: 0 0 auto;
}

.pp-custom-made-builder .cm-options-color .cm-option,
.pp-custom-made-builder .cm-options-color_swatch .cm-option{
  padding: 6px 8px;
  border-radius: 999px;
}

/* Keep native radio/checkbox controls clean for standard display style. */
.pp-custom-made-builder .cm-option input[type="radio"],
.pp-custom-made-builder .cm-option input[type="checkbox"]{
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: #111;
}

/* Hide native controls only for styled display groups. */
.pp-custom-made-builder .cm-options-buttons input,
.pp-custom-made-builder .cm-options-pills input,
.pp-custom-made-builder .cm-options-tiles input,
.pp-custom-made-builder .cm-options-card_grid input,
.pp-custom-made-builder .cm-options-color_swatch input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* File upload and textarea polish. */
.pp-custom-made-builder input[type="file"].cm-input{
  border-style: dashed;
  background: #fcfcfc;
}

.pp-custom-made-builder textarea.cm-input,
.pp-custom-made-builder .cm-textarea{
  min-height: 92px;
}

/* Add-to-cart area should feel attached to the form, not floating far below it. */
.pp-custom-made-builder .cm-actions{
  margin-top: 2px;
  padding-top: 4px;
}

.pp-custom-made-builder .cm-add-btn:hover:not(:disabled){
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Stock/validation message inside the builder. */
.pp-custom-made-builder .cm-message,
.pp-custom-made-builder .cm-error,
.pp-custom-made-builder .cm-warning{
  margin-top: 4px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.35;
}

/* Mobile keeps controls large enough to tap without making the page feel loose. */
@media (max-width: 640px){
  .pp-custom-made-builder .cm-options{
    gap: 8px;
  }

  .pp-custom-made-builder .cm-options-buttons .cm-option,
  .pp-custom-made-builder .cm-options-pills .cm-option,
  .pp-custom-made-builder .cm-options-tiles .cm-option,
  .pp-custom-made-builder .cm-options-card_grid .cm-option{
    min-height: 44px;
  }

  .pp-custom-made-builder .cm-help{
    font-size: 12px;
  }
}


#ppFloatingAdd {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#ppFloatingAdd.showing {
  transform: translateY(0);
  opacity: 1;
}

#ppFloatingAdd.hiding {
  transform: translateY(12px);
  opacity: 0;
}

.cartNotePulse {
  animation: cartNotePulse 0.55s ease;
}

@keyframes cartNotePulse {
  0% {
    background: rgba(255, 217, 102, 0);
    transform: translateX(0);
  }
  25% {
    background: rgba(255, 217, 102, 0.35);
    transform: translateX(-3px);
  }
  50% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    background: rgba(255, 217, 102, 0);
    transform: translateX(0);
  }
}

/* Floating Add click feedback */
.float-add-btn.clicking {
  transform: scale(0.96);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.float-add-btn.glow {
  box-shadow: 0 0 0 0 rgba(0,0,0,0),
              0 0 12px rgba(0, 200, 120, 0.6),
              0 0 20px rgba(0, 200, 120, 0.4);
}