/* =========================================================
   bydenio-style.css — natsoe.com typography & colors matched to bydenio.com
   Library: tammia_theme/bydenio-style (loaded last, weight 200)
   Backup theme: ~/backup_tammia_theme_20261006_2250.tar.gz
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --dn-font: 'Poppins', sans-serif;
  --dn-text: #3c3c3c;
  --dn-heading: #111111;
  --dn-menu: #4d5959;
  --dn-card-title: #333333;
  --dn-card-price: #808080;
  --dn-pdp-price: #3d3d3d;
  --dn-btn: #222222;
  --dn-bg: #f5f6f8;
}

/* ---------- 1. GLOBAL ---------- */
body {
  font-family: var(--dn-font) !important;
  font-size: 12px;
  font-weight: 300;
  line-height: 18px;
  letter-spacing: .3px;
  color: var(--dn-text);
  background-color: var(--dn-bg);
}
.dialog-off-canvas-main-canvas,
.dialog-off-canvas-main-canvas h1, .dialog-off-canvas-main-canvas h2,
.dialog-off-canvas-main-canvas h3, .dialog-off-canvas-main-canvas h4,
.dialog-off-canvas-main-canvas h5, .dialog-off-canvas-main-canvas h6,
.dialog-off-canvas-main-canvas p, .dialog-off-canvas-main-canvas a,
.dialog-off-canvas-main-canvas span:not([class*="bi-"]),
.dialog-off-canvas-main-canvas div, .dialog-off-canvas-main-canvas li,
.dialog-off-canvas-main-canvas button, .dialog-off-canvas-main-canvas input,
.dialog-off-canvas-main-canvas select, .dialog-off-canvas-main-canvas label {
  font-family: var(--dn-font) !important;
}

/* ---------- 2. HEADER — solid white, 70px ---------- */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light {
  background-color: #fff !important;
  min-height: 70px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .site-logo img {
  height: 59px !important;
  width: auto !important;
  max-height: 59px;
  padding: 5px 0;
}
body:not(.toolbar-fixed) { padding-top: 70px !important; }

/* menu — small, uppercase */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .advanced-mega-menu-item-inner > a,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .navbar-nav .nav-link {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 13px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  color: var(--dn-menu) !important;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .advanced-mega-menu-item-inner > a:hover,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .advanced-mega-menu-item-inner > a.is-active { color: #111 !important; }

/* icons / buttons inside white header */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light button,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .bi,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light [class*="icon"] { color: var(--dn-menu) !important; }
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light button:not(.form-submit) { background-color: transparent !important; }
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light img[src*="/icons/ffffff/"] { filter: invert(1) brightness(.35); }
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .navbar-toggler { border-color: rgba(0,0,0,.15) !important; }
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light .navbar-toggler-icon { filter: invert(1); }
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light input.form-text {
  font-size: 12px; font-weight: 300; color: var(--dn-text) !important;
  background: #fff !important; border: 1px solid #e5e5e5 !important;
}

/* ---------- 3. HOMEPAGE SECTION TITLES / TABS ---------- */
html body.path-frontpage h2:not(.visually-hidden) {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  letter-spacing: 2px !important;
  color: var(--dn-menu) !important;
}
html body.path-frontpage .nav-tabs .nav-link,
html body.path-frontpage button.nav-link {
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: .3px !important;
  color: var(--dn-menu) !important;
}
html body.path-frontpage button.nav-link.active { color: #111 !important; }

/* ---------- 4. PRODUCT GRID CARD ---------- */
html body .product-item-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 5px;
}
html body .product-item-wrapper .product-image-container,
html body .product-item-wrapper .product-image-container img {
  border-radius: 0 !important;
}
html body .product-item-wrapper .product-image-container img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
html body .product-item-wrapper .product-info {
  padding: 15px 0 0 !important;
  background: transparent !important;
}
html body .product-item-wrapper .product-title,
html body .product-item-wrapper .product-title a {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 15px !important;
  letter-spacing: 1.5px !important;
  text-transform: capitalize;
  color: var(--dn-card-title) !important;
}
html body .product-item-wrapper .product-price .price-amount {
  font-size: 10px !important;
  font-weight: 300 !important;
  line-height: 15px !important;
  letter-spacing: .3px;
  color: var(--dn-card-price) !important;
}
html body .product-item-wrapper .product-price .price-original {
  font-size: 10px !important;
  font-weight: 300 !important;
  line-height: 15px !important;
  color: #a5a5a5 !important;
}

/* ---------- 5. PRODUCT DETAIL PAGE ---------- */
html body .product-layout .gallery-main-img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
html body .product-layout .tm-product-brand {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
  color: var(--dn-text) !important;
}
html body .product-layout .field--name-title {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  letter-spacing: 1px !important;
  color: var(--dn-heading) !important;
  margin-bottom: 20px;
}
html body .product-layout .product-price-display {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: .3px;
  color: var(--dn-pdp-price) !important;
  margin-bottom: 10px;
}
html body .product-layout .harga-normal-coret {
  font-size: 14px !important; font-weight: 300 !important; color: #808080 !important;
}
html body .product-layout .diskon-badge {
  font-size: 11px !important; font-weight: 500 !important; border-radius: 0 !important;
}

/* description */
html body .product-layout .product-short-description {
  border-left: 0 !important;
  padding-left: 0 !important;
}
html body .product-layout .product-short-description,
html body .product-layout .product-short-description *,
html body .product-layout .text-formatted p,
html body .product-layout .text-formatted li {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 18px !important;
  letter-spacing: .3px;
  color: var(--dn-text) !important;
}
html body .product-layout .text-formatted strong,
html body .product-layout .text-formatted b { font-weight: 600 !important; }

/* variant label + chips */
html body .product-layout .variation-chips-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 21px;
  text-transform: uppercase;
  color: var(--dn-heading) !important;
  margin-bottom: 7px;
}
html body .product-layout .var-chip {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--dn-text) !important;
  border-radius: 30px !important;
}

/* add to cart / notify */
html body .product-layout .btn-primary,
html body .product-layout .button--primary {
  background: var(--dn-btn) !important;
  border-color: var(--dn-btn) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  text-transform: uppercase;
  border-radius: 0 !important;
}

/* breadcrumb */
.breadcrumb, .breadcrumb a, .breadcrumb li {
  font-size: 13px !important; font-weight: 300 !important; color: #222 !important;
}

/* ---------- 6. FOOTER ---------- */
footer h2, footer h3, footer .block-title {
  font-size: 16px !important; font-weight: 500 !important; letter-spacing: 2px !important;
}
footer p, footer a, footer li { font-size: 12px; font-weight: 300; }

/* PDP button strong */
html body .product-layout .button.button--primary.btn.btn-primary,
html body .product-layout input.button--primary.btn,
html body .product-layout button.button--primary.btn {
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 0 !important;
  background: #222 !important;
  border-color: #222 !important;
  min-height: 40px;
}

/* =========================================================
   7. FOOTER — bydenio style (white, black text, #222 copyright bar)
   ========================================================= */
html body footer.mt-auto,
html body footer.mt-auto > .container,
html body footer.mt-auto .region-footer,
html body footer.mt-auto .natsoe-footer-wrap {
  background: #fff !important;
  color: #000 !important;
}
html body footer.mt-auto { border-top: 1px solid #ececec; }
html body footer.mt-auto .natsoe-footer-wrap {
  padding-top: 50px !important;
  padding-bottom: 0 !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
}
html body footer.mt-auto .natsoe-footer-wrap h4 {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #000 !important;
  margin-bottom: 30px !important;
}
html body footer.mt-auto .natsoe-footer-wrap .brand-tagline,
html body footer.mt-auto .natsoe-footer-wrap p,
html body footer.mt-auto .natsoe-footer-wrap li,
html body footer.mt-auto .natsoe-footer-wrap li a,
html body footer.mt-auto .natsoe-footer-wrap a.cs-email,
html body footer.mt-auto .natsoe-footer-wrap a.cs-wa {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
  color: #000 !important;
}
html body footer.mt-auto .natsoe-footer-wrap ul { padding-left: 0 !important; list-style: none !important; }
html body footer.mt-auto .natsoe-footer-wrap li { margin-bottom: 12px !important; }
html body footer.mt-auto .natsoe-footer-wrap p { margin-bottom: 15px !important; color: #111 !important; }
html body footer.mt-auto .natsoe-footer-wrap a:hover { color: #4d5959 !important; text-decoration: none; }

/* payment & shipping badges — monochrome outline */
html body footer.mt-auto .natsoe-payment-logo,
html body footer.mt-auto .natsoe-shipping-logo {
  background: #fff !important;
  color: #3c3c3c !important;
  border: 1px solid #ddd !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
}

/* social icons — plain black, 18px */
html body footer.mt-auto .natsoe-social-icon {
  background: transparent !important;
  color: #000 !important;
  width: 24px !important;
  height: 24px !important;
  box-shadow: none !important;
}
html body footer.mt-auto .natsoe-social-icon svg { width: 18px !important; height: 18px !important; fill: #000 !important; color: #000 !important; }
html body footer.mt-auto .natsoe-social-icon svg path { fill: #000 !important; }

/* newsletter — pill input + black pill button */
html body footer.mt-auto .natsoe-newsletter-form {
  display: flex !important;
  align-items: center;
  border: 1px solid #000;
  border-radius: 46px;
  padding: 2px;
  max-width: 320px;
  gap: 0 !important;
}
html body footer.mt-auto .natsoe-newsletter-input {
  flex: 1;
  background: transparent !important;
  border: 0 !important;
  border-radius: 46px !important;
  color: #3c3c3c !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  padding: 8px 10px !important;
  height: 40px;
  box-shadow: none !important;
}
html body footer.mt-auto .natsoe-newsletter-input::placeholder { color: #878787; }
html body footer.mt-auto .natsoe-newsletter-btn {
  background: #000 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 40px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  height: 38px;
}

/* copyright bar — full width #222 */
html body footer.mt-auto .natsoe-footer-bottom {
  background: #222 !important;
  border-top: 0 !important;
  margin: 40px calc(50% - 50vw) 0 !important;
  padding: 12px calc(50vw - 50%) 10px !important;
}
html body footer.mt-auto .natsoe-footer-bottom,
html body footer.mt-auto .natsoe-footer-bottom * {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
  color: #fff !important;
}
html { overflow-x: hidden; }

/* footer: override custom.css color variables + spacing */
html body footer.mt-auto,
html body footer.mt-auto .natsoe-footer-wrap {
  --tm-footer-text: #000 !important;
  --tm-footer-text-muted: #111 !important;
  --tm-footer-bg: #fff !important;
}
html body footer.mt-auto { padding-top: 0 !important; padding-bottom: 0 !important; }
html body footer.mt-auto .natsoe-footer-bottom { margin-bottom: 0 !important; }

/* footer: copyright bar text white + footer logo proportion */
html body footer.mt-auto .natsoe-footer-wrap .natsoe-footer-bottom {
  --tm-footer-text: #fff !important;
  --tm-footer-text-muted: #fff !important;
}
html body footer.mt-auto .natsoe-footer-bottom span,
html body footer.mt-auto .natsoe-footer-bottom a,
html body footer.mt-auto .natsoe-footer-bottom div,
html body footer.mt-auto .natsoe-footer-bottom p { color: #fff !important; }
html body footer.mt-auto .natsoe-footer-brand img {
  width: auto !important;
  height: 59px !important;
  max-width: none !important;
  object-fit: contain;
  margin-bottom: 10px;
}

/* =========================================================
   8. TESTIMONIAL — bydenio (Loox) style: Poppins, black text, no italic
   ========================================================= */
html body .view-testimonial-carousel .testi-card {
  background: #fff !important;
  border: 0 !important;
  border-top: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12) !important;
  padding: 20px 18px 16px !important;
}
html body .view-testimonial-carousel .testi-card,
html body .view-testimonial-carousel .testi-card * {
  font-family: 'Poppins', sans-serif !important;
}
html body .view-testimonial-carousel .testi-stars { text-align: center !important; margin-bottom: 10px !important; }
html body .view-testimonial-carousel .testi-stars .star {
  font-size: 12px !important;
  color: #000 !important;
  letter-spacing: 1px;
}
html body .view-testimonial-carousel .testi-body,
html body .view-testimonial-carousel .testi-body p,
html body .view-testimonial-carousel .testi-body em,
html body .view-testimonial-carousel .testi-body i {
  font-size: 12px !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
  color: #000 !important;
  text-align: center !important;
}
html body .view-testimonial-carousel .testi-body::before,
html body .view-testimonial-carousel .testi-body::after { display: none !important; }
html body .view-testimonial-carousel .testi-footer {
  border-top: 1px solid #eee !important;
  padding-top: 12px !important;
}
html body .view-testimonial-carousel .testi-avatar {
  background: #000 !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}
html body .view-testimonial-carousel .testi-avatar-initials { font-size: 13px !important; font-weight: 500 !important; }
html body .view-testimonial-carousel .testi-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  color: #000 !important;
}
html body .view-testimonial-carousel .testi-location {
  font-size: 11px !important;
  font-weight: 300 !important;
  color: #808080 !important;
}
html body .view-testimonial-carousel .testi-verified {
  font-size: 10px !important;
  font-weight: 400 !important;
  color: #3c3c3c !important;
  background: #f5f6f8 !important;
}

/* testi-stars center fix */
html body .view-testimonial-carousel .testi-stars { display: flex !important; justify-content: center !important; gap: 2px; }

/* =========================================================
   9. PDP INFORMATION BODY — headings as bold paragraph (bydenio "THE DETAILS")
   ========================================================= */
html body .product-information-body h1,
html body .product-information-body h2,
html body .product-information-body h3,
html body .product-information-body h4,
html body .product-information-body h5,
html body .product-information-body h6 {
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  color: #3c3c3c !important;
  margin: 20px 0 4px !important;
}
html body .product-information-body p,
html body .product-information-body li,
html body .product-information-body td {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
  color: #3c3c3c !important;
}
html body .product-information-body strong,
html body .product-information-body b,
html body .product-information-body th {
  font-weight: 600 !important;
  color: #3c3c3c !important;
}
html body .product-information-body ul { margin-bottom: 10px !important; }
html body .product-information-body table {
  font-size: 12px !important;
  color: #3c3c3c !important;
  margin-bottom: 10px !important;
}
html body .product-information-body table th,
html body .product-information-body table td {
  font-size: 12px !important;
  line-height: 18px !important;
  padding: 7px 10px !important;
}
html body .product-information-body hr { margin: 18px 0 !important; opacity: .15; }

/* =========================================================
   10. RELATED PRODUCTS TITLE — "More like this" style
   ========================================================= */
html body .block-views-blockproduct-by-category-block-1 > h2 {
  text-transform: none !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  letter-spacing: 2px !important;
  color: #4d5959 !important;
  text-align: center !important;
  margin: 10px 0 25px !important;
}

/* =========================================================
   11. "DESKRIPSI PRODUK" title — same as related products title
   ========================================================= */
html body .product-information-inner .product-information-header {
  justify-content: center !important;
  text-align: center !important;
}
html body .product-information-inner .product-information-icon { display: none !important; }
html body .product-information-inner .product-information-header h2.product-information-title {
  text-transform: none !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 28px !important;
  letter-spacing: 2px !important;
  color: #4d5959 !important;
  text-align: center !important;
  margin: 0 !important;
}

/* =========================================================
   12. DISCOUNT BADGE on product cards — smaller & slimmer
   ========================================================= */
html body .product-image-container .discount-badge {
  height: auto !important;
  min-height: 0 !important;
  padding: 3px 7px !important;
  border-radius: 0 !important;
  background: #222 !important;
  gap: 3px !important;
  top: 10px !important;
  right: 10px !important;
  line-height: 1 !important;
}
html body .product-image-container .discount-badge .discount-percent,
html body .product-image-container .discount-badge .discount-text {
  font-family: 'Poppins', sans-serif !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  letter-spacing: .8px !important;
  line-height: 11px !important;
  color: #fff !important;
  background: transparent !important;
}

/* badge width auto */
html body .product-image-container .discount-badge { width: auto !important; min-width: 0 !important; }

/* =========================================================
   13. PDP button (Add to cart / Out of stock - notify me) — smaller font
   ========================================================= */
html body .product-layout .button.button--primary.btn.btn-primary,
html body .product-layout input.button--primary.btn,
html body .product-layout button.button--primary.btn {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  line-height: 18px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 10px 25px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   14. QUICK VIEW POPUP — same typography/colors as PDP
   ========================================================= */
html body .ui-dialog.quickview-modal-custom,
html body .ui-dialog.quickview-modal-custom * {
  font-family: 'Poppins', sans-serif !important;
}
html body .ui-dialog.quickview-modal-custom {
  color: #3c3c3c !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: .3px !important;
}
html body .ui-dialog.quickview-modal-custom .tm-product-brand {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #3c3c3c !important;
}
html body .ui-dialog.quickview-modal-custom .field--name-title {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  color: #111 !important;
  margin-bottom: 15px !important;
}
html body .ui-dialog.quickview-modal-custom .product-price-display {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
  letter-spacing: .3px !important;
  color: #3d3d3d !important;
}
html body .ui-dialog.quickview-modal-custom .harga-normal-coret {
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #808080 !important;
}
html body .ui-dialog.quickview-modal-custom .diskon-badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  background: #222 !important;
  color: #fff !important;
}
html body .ui-dialog.quickview-modal-custom .variation-chips-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 21px !important;
  text-transform: uppercase !important;
  color: #111 !important;
  margin-bottom: 7px !important;
}
html body .ui-dialog.quickview-modal-custom .var-chip {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #3c3c3c !important;
  border-radius: 30px !important;
}
html body .ui-dialog.quickview-modal-custom .tm-qty-btn { color: #3c3c3c !important; font-weight: 400 !important; font-size: 16px !important; }
html body .ui-dialog.quickview-modal-custom input.form-number { font-size: 12px !important; font-weight: 300 !important; color: #3c3c3c !important; }
html body .ui-dialog.quickview-modal-custom .button.button--primary,
html body .ui-dialog.quickview-modal-custom .btn-primary {
  background: #222 !important;
  border-color: #222 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 10px 25px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
html body .ui-dialog.quickview-modal-custom .field__item,
html body .ui-dialog.quickview-modal-custom .field__item p {
  font-size: 12px !important;
  font-weight: 300 !important;
  line-height: 18px !important;
  letter-spacing: .3px !important;
  color: #3c3c3c !important;
}
html body .ui-dialog.quickview-modal-custom .qv-close-modal { color: #111 !important; font-weight: 300 !important; }

/* quickview title fix */
html body .ui-dialog.quickview-modal-custom .field--name-title,
html body .ui-dialog.quickview-modal-custom .field--name-title .field__item,
html body .ui-dialog.quickview-modal-custom .field--name-title * {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 30px !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  color: #111 !important;
}

/* =========================================================
   15. QUICK VIEW — quantity box border + button beside quantity
   ========================================================= */
html body .ui-dialog.quickview-modal-custom form[class*="add-to-cart-form"] {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
}
html body .ui-dialog.quickview-modal-custom form[class*="add-to-cart-form"] > .field--name-purchased-entity {
  flex: 0 0 100% !important;
}
html body .ui-dialog.quickview-modal-custom form[class*="add-to-cart-form"] > .field--name-quantity,
html body .ui-dialog.quickview-modal-custom form[class*="add-to-cart-form"] > .form-actions {
  margin: 0 !important;
  flex: 0 0 auto !important;
}
html body .ui-dialog.quickview-modal-custom .field--name-quantity .form-item { margin: 0 !important; }
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap {
  display: inline-flex !important;
  align-items: stretch !important;
  width: 120px !important;
  height: 40px !important;
  border: 1px solid #4d5959 !important;
  border-radius: 0 !important;
  overflow: hidden;
  box-sizing: border-box !important;
  background: #fff !important;
}
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap .tm-qty-btn {
  width: 36px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  padding: 0 !important;
}
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap input.form-number {
  flex: 1 1 auto !important;
  width: 46px !important;
  height: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-align: center !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body .ui-dialog.quickview-modal-custom form[class*="add-to-cart-form"] > .form-actions .button--primary {
  width: auto !important;
  padding: 10px 20px !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

/* =========================================================
   16. QTY BOX border fix (quick view + PDP) — children never cover the border
   ========================================================= */
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap,
html body .product-layout .tm-qty-wrap {
  position: relative !important;
  border: 1px solid #4d5959 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: #fff !important;
}
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap > *,
html body .product-layout .tm-qty-wrap > * {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: 100% !important;
}
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap input.form-number,
html body .product-layout .tm-qty-wrap input.form-number,
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap input.form-number:focus,
html body .product-layout .tm-qty-wrap input.form-number:focus {
  color: #3c3c3c !important;
  -moz-appearance: textfield;
}
html body .tm-qty-wrap input.form-number::-webkit-outer-spin-button,
html body .tm-qty-wrap input.form-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html body .ui-dialog.quickview-modal-custom .tm-qty-wrap .tm-qty-btn,
html body .product-layout .tm-qty-wrap .tm-qty-btn { color: #3c3c3c !important; }

/* =========================================================
   17. NOTIFY ME (back in stock) popup — visible close (X) + bydenio typography
   ========================================================= */
/* when the notify form loads inside the quick view dialog, show its titlebar + X */
html body .ui-dialog.quickview-modal-custom:has(.commerce-back-in-stock-form) .ui-dialog-titlebar {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
}
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-titlebar {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #eee !important;
  padding: 16px 50px 14px 20px !important;
  position: relative;
}
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: .5px !important;
  color: #111 !important;
  white-space: normal !important;
  width: auto !important;
}
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-titlebar-close {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  z-index: 5;
}
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-titlebar-close::before {
  content: "\00d7";
  display: block;
  font-family: Arial, sans-serif !important;
  font-size: 26px;
  line-height: 26px;
  color: #111;
  text-align: center;
}
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-titlebar-close .ui-icon,
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-titlebar-close .ui-button-icon { display: none !important; }
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-titlebar-close .ui-button-text,
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-titlebar-close .visually-hidden { font-size: 0 !important; }

/* form typography */
html body .ui-dialog .commerce-back-in-stock-form,
html body .ui-dialog .commerce-back-in-stock-form * { font-family: 'Poppins', sans-serif !important; }
html body .ui-dialog .commerce-back-in-stock-form label {
  font-size: 12px !important; font-weight: 500 !important; color: #3c3c3c !important;
}
html body .ui-dialog .commerce-back-in-stock-form input.form-text,
html body .ui-dialog .commerce-back-in-stock-form input.form-email,
html body .ui-dialog .commerce-back-in-stock-form input.form-tel,
html body .ui-dialog .commerce-back-in-stock-form textarea {
  font-size: 12px !important; font-weight: 300 !important; color: #3c3c3c !important;
  border: 1px solid #ddd !important; border-radius: 0 !important;
}
html body .ui-dialog:has(.commerce-back-in-stock-form) .button--primary,
html body .ui-dialog .commerce-back-in-stock-form .button--primary {
  background: #222 !important; border-color: #222 !important; color: #fff !important;
  font-size: 11px !important; font-weight: 600 !important; letter-spacing: 2px !important;
  text-transform: uppercase !important; border-radius: 0 !important;
  height: 40px !important; padding: 10px 25px !important;
}
html body .ui-dialog:has(.commerce-back-in-stock-form) .ui-dialog-buttonpane { background: #fff !important; border-top: 1px solid #eee !important; }

/* =========================================================
   18. PDP quantity — match quick view (number 12px/300 #3c3c3c, no inner lines)
   ========================================================= */
html body .product-layout form .field--name-quantity .tm-qty-wrap {
  width: 120px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  align-items: stretch !important;
}
html body .product-layout form .field--name-quantity .tm-qty-wrap input.form-number.form-control,
html body .product-layout form .field--name-quantity .tm-qty-wrap input.form-number.form-control:focus {
  font-family: 'Poppins', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #3c3c3c !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
  width: 46px !important;
  height: 38px !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
}
html body .product-layout form .field--name-quantity .tm-qty-wrap .tm-qty-btn {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #3c3c3c !important;
  width: 36px !important;
  height: 38px !important;
  padding: 0 !important;
}

/* =========================================================
   19. HEADER SEARCH — soft grey field + outline, white button with black icon
   ========================================================= */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #views-exposed-form-product-search-page-1 .form--inline {
  background: #f3f3f3 !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  align-items: center;
  transition: border-color .2s ease, background-color .2s ease;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #views-exposed-form-product-search-page-1 .form--inline:focus-within {
  background: #fff !important;
  border-color: #4d5959 !important;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #views-exposed-form-product-search-page-1 input.form-text {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #3c3c3c !important;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #views-exposed-form-product-search-page-1 input.form-text::placeholder { color: #8a8a8a !important; }
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1 input#edit-submit-product-search.form-submit {
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23111111' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  color: transparent !important;
  width: 34px !important;
  height: 34px !important;
  margin-right: 3px !important;
}
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1 input#edit-submit-product-search.form-submit:hover {
  background-color: #f3f3f3 !important;
  border-color: #4d5959 !important;
}

/* 20. search button — transparent, no border */
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1 input#edit-submit-product-search.form-submit,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1 input#edit-submit-product-search.form-submit:hover,
html body nav.navbar.navbar-expand-lg.navbar-dark.text-light #block-tammia-theme-exposedformproduct-searchpage-1 #views-exposed-form-product-search-page-1 input#edit-submit-product-search.form-submit:focus {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}