@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap");
@media (max-width: 768px) {
  .banner .swiper-button-prev {
    display: none;
  }

  .banner .swiper-button-next {
    display: none;
  }
}
.banner .swiper-button-prev {
  display: none;
}
.app-bar .toobar-gutters {
  padding: 26px !important;
}
.banner .swiper-button-next {
  display: none;
}
.sh-header-main {
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3) !important;
}
.sh-categories-container > div > h2 {
  display: none !important;
}
.sh-categories-container > div > hr {
  display: none !important;
}
.sh-banner-collection-card > a > div > div > p {
  display: none;
}
.sh-banner-collection-card > a > div > div > p > svg {
  display: none;
}
.sh-product-card:hover {
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}
.sh-product-card-discount-tag {
  display: none;
}
.sh-product-discount-tag {
  display: none;
}

@media (max-width: 768px) {
  .banner .swiper-button-prev {
    display: none;
  }

  .banner .swiper-button-next {
    display: none;
  }
}
/* Checkout / cart-review header logo → keep it centred.
   The theme centres this container with left:50% + transform:translate(-50%),
   but a script overrides it with an inline `left:0; transform:none`, so the
   toolbar's flex-1 left cluster shoves the logo to the right. We re-center it by
   absolutely positioning it in the (position:relative) toolbar and overriding
   the inline style with !important. On mobile this container is empty/hidden
   (the mobile header uses a separate .logo-ctn), so this only affects desktop. */
.app-bar-center-logo-ctn {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
.about-description h1,
.about-description h2,
.about-description h3,
.about-description h4,
.about-description h5,
.about-description h6,
.about-description p,
.about-description ul,
.about-description ol,
.about-description li,
.about-description pre,
.about-description figure,
.about-description dl,
.about-description dd {
  font-size: revert;
  font-weight: revert;
  margin: revert;
}
@media (max-width: 768px) {
  .app-bar-main {
    position: relative;
  }
  .logo-ctn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
#sh-footer-copyright .three-col-footer__rights {
  font-size: 0 !important; /* Hide original text */
}

#sh-footer-copyright .three-col-footer__rights::after {
  content: "Copyright © 2026 Dabeez, a brand by Epic Brand, All rights reserved.";
  font-size: 14px;
  line-height: 1.5;
  display: block;
  text-align: center;
}
.cart-summary-compact-pay-button {
  font-size: 0 !important;
}

.cart-summary-compact-pay-button::after {
  content: "Checkout Now";
  font-size: 14px; /* adjust as needed */
}
.flex-ctn-align-center {
  display: flex;
  align-items: center;
  flex: inherit !important;
}
/* Pin the mobile product-page back arrow to the far left (logo stays centered) */
@media (max-width: 768px) {
  .app-bar-main .MuiToolbar-root {
    position: relative;
  }
  .app-bar-main .MuiIconButton-edgeStart {
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 2;
  }
}
/* ===== Dabeez refine (store 216064, theme aerion) — source of truth for our CSS =====
   Built: custom-combined.css = live_backup/aziri-live.css + this file.
   Values from theme-preview2/preview/dabeez (index.html / theme.css). */

/* 1. Notice bar — mock .notice: uppercase, .66rem, .14em tracking (aerion renders 13px sentence case) */
.notice .notice-message {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* 2. Card discount tag — mock .pcard__badge: deal #C8491A, white, 10px inset, .6rem 600 tracked
   (aerion paints p.product-card-discount in --secondary-main #444444 flush to the corner) */
p.product-card-discount {
  background: #C8491A;
  color: #FFFFFF;
  top: 10px;
  left: 10px;
  right: auto;   /* with the wishlist off aerion switches the tag to right-0; left + right stretched it across the card */
  padding: 4px 8px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.4;
}

/* 3. Category tiles — mock "Find your pair" (.sec-head + .cats/.cat): eyebrow, left-aligned head,
   square tiles on surface #F5F2EF with a #E6E1DC hairline, tracked uppercase label + muted sub-line.
   Settings did the rest: category_settings cols 3/3, shape SQUARE, label categories_heading. */
.LargeCategoriesCardV1-component .cat-section { justify-content: flex-start; }
.LargeCategoriesCardV1-component h2.category-header {
  width: 100%;
  text-align: left;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #1A1A1A;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.LargeCategoriesCardV1-component h2.category-header::before {
  content: "Shop by category";
  display: block;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #6E1E24;
  margin-bottom: 8px;
}
.LargeCategoriesCardV1-component .cat-card-img-container {
  aspect-ratio: 1;
  overflow: hidden;
  background: #F5F2EF;
  border: 1px solid #E6E1DC;
}
.LargeCategoriesCardV1-component .cat-card-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.LargeCategoriesCardV1-component .cat-card a:hover .cat-card-img-container img { transform: scale(1.05); }
.LargeCategoriesCardV1-component .cat-card-title {
  flex-direction: column;   /* theme renders it display:flex (row) — stack the sub-line under the name */
  align-items: center;
  margin-top: 12px;
  margin-bottom: 0;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #1A1A1A;
}
.LargeCategoriesCardV1-component .cat-card-title::after {
  display: block;
  margin-top: 2px;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #6B6764;
}
.LargeCategoriesCardV1-component a[href$="/categories/chelsea"] .cat-card-title::after { content: "Classic, croco & embossed"; }
.LargeCategoriesCardV1-component a[href$="/categories/boots"] .cat-card-title::after { content: "Suede, nubuck & grain"; }
.LargeCategoriesCardV1-component a[href$="/categories/formals"] .cat-card-title::after { content: "Loafers for the office"; }
/* 3 tiles across a phone are ~100px wide: the sub-line wrapped to 3 lines, so phones show the name only */
@media (max-width: 599px) {
  .LargeCategoriesCardV1-component .cat-card-title::after { display: none; }
  .LargeCategoriesCardV1-component .cat-card-title { font-size: .68rem; letter-spacing: .12em; }
}

/* 4. Fonts + section heads — mock: Playfair Display (display) / Jost (body), via settings + @import.
   store_setting.font_family = "Jost" drives --typography-font-family (body, MUI); the theme loads no
   web font itself (Noto Sans was never downloaded), hence the @import at the top. */
:root { --dbz-display: "Playfair Display", Georgia, serif; }
/* Playfair defaults to old-style figures: "(CEC01)" read as "(CECo1)" — use lining figures wherever it is used */
.LargeCategoriesCardV1-component h2.category-header, .ProductGridCollection-component h2.heading-title,
main .HtmlRenderer-component h2,
.product-card .product-card-name { font-variant-numeric: lining-nums; }

/* 4a. One content column: the category row was capped at 1280px (.cat-section) while product rows
   use the 1440px .page-container (63–1423px at 1486). */
.LargeCategoriesCardV1-component .cat-section { max-width: none; }

/* 4b. Section heads: display face 400, clamp(1.6–2.3rem), ink, sentence case (mock .sec-head h2) */
.LargeCategoriesCardV1-component h2.category-header,
.ProductGridCollection-component .collection-header h2.heading-title {
  font-family: var(--dbz-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: none;
  color: #1A1A1A;
}
.LargeCategoriesCardV1-component h2.category-header::before,
.ProductGridCollection-component .collection-header h2.heading-title::before {
  display: block;
  font-family: "Jost", system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #6E1E24;
  margin-bottom: 8px;
}
.ProductGridCollection-component:has(a.shop-all-link[href="/collections/most-loved"]) h2.heading-title::before { content: "Top rated"; }
.ProductGridCollection-component:has(a.shop-all-link[href="/collections/all-products"]) h2.heading-title::before { content: "The collection"; }

/* head row: title left, "View all" link right on the baseline (mock .sec-head + .link-u) */
.ProductGridCollection-component .collection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.ProductGridCollection-component .collection-header a.shop-all-link {
  flex: none;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #1A1A1A;
  border-bottom: 1px solid #1A1A1A;
  padding-bottom: 3px;
  margin: 0;
}

/* 4c. Merchant HTML sections (Read This First, FAQ) used Georgia for their h2 */
main .HtmlRenderer-component h2 { font-family: var(--dbz-display) !important; font-weight: 400 !important; }

/* 4d. Card names in the display face (mock .pcard__title), names stay as entered */
.product-card .product-card-name {
  font-family: var(--dbz-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
}

/* 4e. Product page — mock .buy h1 / .buy__price / section heads (aerion: h1 Jost 16px 700, price 14px) */
h1.product-title {
  font-family: var(--dbz-display);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums;
  color: #1A1A1A;
}
.product-price > span:first-child { font-family: var(--dbz-display); font-size: 1.6rem; font-weight: 500; color: #1A1A1A; font-variant-numeric: lining-nums; }
.product-mrp-price > span { font-size: .9rem; color: #6B6764; }
.product-discount > span { font-size: .8rem; font-weight: 600; color: #C8491A; }
.page-container-s h2.heading-title,
.page-container-s h2.text-2xl.font-bold {
  font-family: var(--dbz-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #1A1A1A;
}
/* breadcrumb fell back to Arial; trusted-badges plugin hardcodes 'Noto Sans' (never loaded) */
nav.breadcrumb, nav.breadcrumb * { font-family: var(--typography-font-family); }
.shoopy-trusted-badges-wrapper, .shoopy-trusted-badges-wrapper * { font-family: var(--typography-font-family) !important; }

/* 4f. Listing / category / collection page title (h1.text-2xl.font-bold: Jost 24px 700) → section-head face */
main h1.text-2xl.font-bold {
  font-family: var(--dbz-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  font-variant-numeric: lining-nums;
  color: #1A1A1A;
}

/* 5. Section rhythm — mock .section { padding-block: clamp(44px, 6vw, 88px) } on every home section,
   so two neighbours sit 2× apart (176px at 1486, 88px on phones). Measured gaps before: 28–56px with
   theme margins (cat-section 16+24/24, page-container my-6 24/24, infinite scroll mb 28) and the
   merchant HTML sections' own 48px. */
:root { --dbz-sec: clamp(44px, 6vw, 88px); }
/* 5a. zero the theme's own vertical spacing inside each section */
.LargeCategoriesCardV1-component .cat-section { margin-top: 0; padding-top: 0; padding-bottom: 0; }
.ProductGridCollection-component > .page-container { margin-top: 0; margin-bottom: 0; }
/* merchant sections set their own 48px padding in their embedded <style> (beat a plain rule) */
main .HtmlRenderer-component > div > section:not(.sx) { padding-top: 0 !important; padding-bottom: 0 !important; }
/* 5b. one padding per section; the SERVICE marquee (shadow DOM, no light-DOM <section>) stays a flush band */
main .section-item.LargeCategoriesCardV1-component,
main .section-item.ProductGridCollection-component,
main .section-item.BannerCollection-component,
main .section-item.HtmlRenderer-component:has(> div > section),
main > section.section:has(.genric-coll-swiper) {
  padding-top: var(--dbz-sec);
  padding-bottom: var(--dbz-sec);
}
/* our full-bleed .sx bands (why-leather dark, story surface) carry their own padding (mock clamp(48px, 7vw, 96px)) — no white frame */
main .section-item.HtmlRenderer-component:has(> div > section.sx) { padding-top: 0; padding-bottom: 0; }

/* 6. Shop the look — merchant GenericCollectionV2 6a0d3de7… ("Worn well", 3 internal banners) styled as the
   mock's LargeCollectionCard tiles (.looks / .mini-banner-collection). With a heading the row renders as
   main > section.section (5b updated: the old div selector no longer matched). */
main > section.section:has(.genric-coll-swiper) > .col-span-12.mb-4 { margin-bottom: clamp(20px, 3vw, 34px); }
main > section.section:has(.genric-coll-swiper) h2.heading-title {
  font-family: var(--dbz-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: none;
  color: #1A1A1A;
}
main > section.section:has(.genric-coll-swiper) h2.heading-title::before {
  content: "Shop the look";
  display: block;
  font-family: "Jost", system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #6E1E24;
  margin-bottom: 8px;
}
/* theme bug: .banner-content-inner starts at opacity:0 and is only revealed inside .hero-banner-swiper's
   active slide, so tile titles in this section never appeared */
.genric-coll-swiper .banner-content-inner {
  opacity: 1;
  transform: none;
  max-width: none;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.genric-coll-swiper .banner-collection { position: relative; overflow: hidden; }
.genric-coll-swiper .banner-collection::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .6) 100%);
  pointer-events: none;
}
.genric-coll-swiper .banner-collection img { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.genric-coll-swiper .swiper-slide:hover .banner-collection img { transform: scale(1.04); }
/* content box: full-width strip at the bottom (theme positions it from inline --*-desktop/mobile vars) */
.genric-coll-swiper .banner-content {
  top: auto !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  transform: none !important;
  max-width: none !important;
  padding: 22px 20px;
  color: #FFFFFF;
}
.genric-coll-swiper .banner-title {
  font-family: var(--dbz-display);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
  text-shadow: none;
}
/* button: inline style paints it a black box; mock = tracked underlined text link */
.genric-coll-swiper a.banner-button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #FFFFFF !important;
  color: #FFFFFF !important;
  padding: 0 0 3px;
  border-radius: 0;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 7. Buttons — mock CTA = solid ink #1A1A1A (Buy Now) / ink outline (+ Add); brand #444444 stays for the
   notice bar and header badge. aerion derives these three vars from theme_color, so override only them. */
html:root {
  --button-main: #1A1A1A;
  --button-borderColor: #1A1A1A;
  --button-contrast-text: #FFFFFF;
}

/* 8. Instagram — merchant BannerCollection 6a0e9c33… under our .sx-ighead head (mock instagram-1): collage boxed in the
   site column (was full-bleed 1480×740), top padding comes from the head, caption line under the image.
   Phones: crop anchored on the photo side of the collage. */
main .section-item.BannerCollection-component:has(a[href*="instagram.com/thedabeez"]) {
  max-width: 1440px;
  margin-inline: auto;
  padding-top: 0;
  padding-inline: 16px;
}
main .section-item.BannerCollection-component:has(a[href*="instagram.com/thedabeez"]) img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 100% 50%;
}
main .section-item.BannerCollection-component:has(a[href*="instagram.com/thedabeez"])::after {
  content: "Styling, drops & behind the scenes";
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6B6764;
}
@media (min-width: 768px) {
  main .section-item.BannerCollection-component:has(a[href*="instagram.com/thedabeez"]) { padding-inline: 40px; }
  main .section-item.BannerCollection-component:has(a[href*="instagram.com/thedabeez"]) img { aspect-ratio: 3 / 1; object-position: 50% 45%; }
}

/* 9. Product page — closer to mock pdp.html (.opt__label, .sizes, .pin, .spec, section eyebrows).
   Merchant description/material content untouched; only typography and colour. */
/* option labels ("Size: UK 6", "Quantity", "Delivery Options") in tracked caps */
.product-info .variant-field-label, .product-info .quantity-label, .delivery-estimate-root .delivery-estimate-heading {
  font-size: .7rem !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #1A1A1A !important;
}
/* size chips: hairline boxes; selected = ink fill (mock .sizes input:checked+label) */
button.variant-chip { border-color: #E6E1DC !important; border-radius: 0; }
button.variant-chip:hover { border-color: #1A1A1A !important; }
button.variant-chip.selected { background: #1A1A1A !important; border-color: #1A1A1A !important; }
button.variant-chip.selected .variant-label-text { color: #FFFFFF !important; }
/* pincode check (mock .pin): one hairline box, full-height ink CHECK joined to the right edge
   (first pass left a small 66×23 tag floating inside the field — user, 30 Oct) */
.delivery-estimate-root .MuiInputBase-root { border: 1px solid #E6E1DC !important; border-radius: 0 !important; padding-right: 0 !important; align-items: stretch !important; overflow: hidden; }
.delivery-estimate-root .MuiInputBase-root fieldset { border: 0 !important; }
.delivery-estimate-root .MuiInputBase-root input { padding: 12px 14px !important; font-size: .85rem; }
.delivery-estimate-root .MuiInputBase-root button {
  align-self: stretch !important; height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 22px !important; border-radius: 0 !important; background: #1A1A1A !important; color: #FFFFFF !important;
  font-family: var(--typography-font-family); font-size: .68rem !important; font-weight: 500 !important; letter-spacing: .18em !important; text-transform: uppercase;
}
.delivery-estimate-root .MuiInputBase-root button:hover { background: #000000 !important; }
/* details accordion: tracked caps toggle with oxblood icon; merchant's h3 subheads in the display face */
.details-accordion .details-toggle { font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #1A1A1A; }
.details-accordion .details-toggle svg { color: #6E1E24; stroke: #6E1E24; }
.details-accordion h3 { font-family: var(--dbz-display); font-size: 1.1rem !important; font-weight: 500 !important; color: #1A1A1A; }
.details-accordion p, .details-accordion li { font-size: .9rem; line-height: 1.65; color: #6B6764; }
.details-accordion b, .details-accordion strong { color: #1A1A1A; font-weight: 500; }
/* section heads: eyebrows like the home page (mock "Ratings" / "Complete the look") */
.page-container-s h2.text-2xl.font-bold::before,
.related-products h2.heading-title::before {
  display: block;
  font-family: "Jost", system-ui, sans-serif;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.5;
  text-transform: uppercase;
  color: #6E1E24;
  margin-bottom: 8px;
}
.page-container-s h2.text-2xl.font-bold::before { content: "Ratings"; }
.related-products h2.heading-title::before { content: "Complete the look"; }
/* 9b. "Ask on WhatsApp" (product_page_settings.show_whatsapp_cta, label product_page_enquire_cta) — mock .btn--wa:
   last in the stack, full width, WhatsApp green, centred label like the other CTAs. Kept out of the phone's fixed buy
   bar (it squeezed beside Add to cart and grew the bar 71 → 127px); phones keep the floating WhatsApp bubble. */
.action-buttons a.pr-card-action-enquiry {
  order: 3;
  min-height: 48px;   /* same height as Add to cart / Buy now */
  justify-content: center;
  gap: 8px;
  background: #1F8F4E;
  border-color: #1F8F4E !important;
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.action-buttons a.pr-card-action-enquiry svg { margin: 0 !important; color: #FFFFFF; fill: currentColor; }
.action-buttons a.pr-card-action-enquiry:hover { background: #18773F; }
.mobile-bottom-bar a.pr-card-action-enquiry { display: none !important; }
/* with the enquiry link present the theme spans Buy now across the bar (grid-column 1 / -1); restore Add | Buy side by side */
.mobile-bottom-bar .action-buttons > button { grid-column: auto !important; }

/* 10. Notice bar on phones — the full line ("Free all-India delivery · Cash on delivery · 3-day exchange & replacement")
   wraps to 2 lines under ~600px; show a shorter line with the same three claims (desktop keeps the setting's text). */
@media (max-width: 599px) {
  .notice .notice-message { font-size: 0 !important; letter-spacing: 0 !important; }
  .notice .notice-message::after {
    content: "10% off 1st order \00B7  Free delivery \00B7  COD";   /* 3 Nov: advertise the live welcome offer (WELDABEEZ auto-applies) */
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* 11. PDP multi-section accordions (3 Nov 2026). The merchant description now carries a .dbz-pdp-acc block
   with three native <details> sections: MATERIAL & CONSTRUCTION (open), CARE (closed), DELIVERY & REPLACEMENT
   (closed) — matching the user's mock. aerion's single native "Details" toggle is open by default, so on a
   PDP that carries .dbz-pdp-acc we hide that toggle (the content stays open) and the three <details> read as
   the top-level sections. Scoped with :has(.dbz-pdp-acc) so PDPs without the block are untouched. */
.details-accordion:has(.dbz-pdp-acc) > .details-toggle { display: none; }
.details-accordion:has(.dbz-pdp-acc) { border-top: 0; }
.dbz-pdp-acc { margin-top: 4px; }
.dbz-pdp-acc details { border-top: 1px solid #E6E1DC; }
.dbz-pdp-acc details:last-of-type { border-bottom: 1px solid #E6E1DC; }
.dbz-pdp-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 2px;
  font-family: "Jost", system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1A1A1A;
}
.dbz-pdp-acc summary::-webkit-details-marker { display: none; }
.dbz-pdp-acc summary::after {
  content: "+";
  font-family: "Jost", system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
  color: #6E1E24;
  transition: transform .2s ease;
}
.dbz-pdp-acc details[open] > summary::after { content: "\2212"; }  /* minus */
.dbz-pdp-acc .acc-body { padding: 0 2px 20px; }
.dbz-pdp-acc .acc-body > :first-child { margin-top: 0; }
.dbz-pdp-acc .acc-body hr { display: none; }   /* merchant's divider rules sit between Material/Description; redundant inside one section */
.dbz-pdp-acc .acc-body h3 { font-family: var(--dbz-display); font-size: 1rem !important; font-weight: 500 !important; color: #1A1A1A; margin: 14px 0 6px; }
.dbz-pdp-acc .acc-body p, .dbz-pdp-acc .acc-body li { font-size: .9rem; line-height: 1.65; color: #6B6764; margin: 0 0 8px; }
.dbz-pdp-acc .acc-body b, .dbz-pdp-acc .acc-body strong { color: #1A1A1A; font-weight: 500; }
/* spec table (MATERIAL & CONSTRUCTION, croco chelsea): label | value rows with hairlines */
.dbz-pdp-acc table.dbz-spec { width: 100%; border-collapse: collapse; margin: 2px 0 10px; }
.dbz-pdp-acc table.dbz-spec td { padding: 9px 0; border-bottom: 1px solid #F0ECE8; vertical-align: top; font-size: .9rem; line-height: 1.5; }
.dbz-pdp-acc table.dbz-spec tr:last-child td { border-bottom: 0; }
.dbz-pdp-acc table.dbz-spec td:first-child { width: 34%; padding-right: 16px; color: #6B6764; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; font-weight: 500; white-space: nowrap; }
.dbz-pdp-acc table.dbz-spec td:last-child { color: #1A1A1A; }


.product-card-variant-chip {
    display: none !important;
}

.product-card-variant-info {
  text-transform: uppercase !important;
}