/* ==================================================================
   Single Product -- "Special" layout
   Loaded only when Customizer > Storefront Home > Single Product Page is
   set to Special (see inc/single-product-layout.php). Everything is
   scoped under body.pdp-special, so the Default layout is untouched.

   Same markup as Default -- WooCommerce + B2B hooks -- restyled:
   gallery | sticky summary card on desktop; images-first stack with a
   clamped title and a bottom quote bar on mobile.
   Breakpoints match the rest of the theme: 991px stack, 768px mobile.
   ================================================================== */

body.pdp-enh {
  --pdp-primary: var(--primary, #0F766E);
  --pdp-ink: #1b2735;
  --pdp-muted: #5b6777;
  --pdp-line: #e3ebf4;
  --pdp-soft: #f6f9fd;
  --pdp-radius: 16px;
  --pdp-shadow: 0 10px 30px rgba(15, 32, 58, 0.08);
  /* B2B flow colours come from Pahla B2B Dashboard > Style Settings
     (printed on :root by pahla_b2b_inject_dynamic_styles). */
  --pdp-rfq: var(--pahla-rfq-color, #222222);
  --pdp-sample: var(--pahla-sample-color, #d35400);
  --pdp-icon: var(--pahla-b2b-icon-color, #e74c3c);
}

/* ---------- Page frame ---------- */

body.pdp-special .woocommerce-breadcrumb {
  font-size: 12px;
  letter-spacing: .3px;
  color: var(--pdp-muted);
  margin: 6px 0 22px;
}

body.pdp-special .woocommerce-breadcrumb a {
  color: var(--pdp-muted);
  text-decoration: none;
}

body.pdp-special .woocommerce-breadcrumb a:hover {
  color: var(--pdp-primary);
}

/* Gallery | summary grid. Every other child of div.product (tabs,
   upsells, related) spans the full width below. */
body.pdp-special div.product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

body.pdp-special div.product::before,
body.pdp-special div.product::after {
  display: none;
}

body.pdp-special div.product > * {
  grid-column: 1 / -1;
  min-width: 0;
}

body.pdp-special div.product > .woocommerce-product-gallery {
  grid-column: 1;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

body.pdp-special div.product > .summary {
  grid-column: 2;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* The sale flash is a direct child of div.product; pin it over the
   gallery instead of letting it take a grid cell. */
body.pdp-special div.product > .onsale {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 5;
  grid-column: auto;
  margin: 0;
}

/* ---------- Gallery ---------- */

body.pdp-special .woocommerce-product-gallery {
  border-radius: var(--pdp-radius);
}

body.pdp-special .woocommerce-product-gallery .flex-viewport,
body.pdp-special .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
  border-radius: var(--pdp-radius);
  overflow: hidden;
  background: radial-gradient(circle at 20% 20%, #ffffff 0%, #eff4fb 100%);
  border: 1px solid var(--pdp-line);
}

body.pdp-special .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

body.pdp-special .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 10px;
  margin: 12px 0 0 !important;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

body.pdp-special .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
  display: none;
}

body.pdp-special .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 76px;
  width: 76px !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

body.pdp-special .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid transparent;
  opacity: .6;
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease;
}

body.pdp-special .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
body.pdp-special .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
  border-color: var(--pdp-primary);
}

body.pdp-special .woocommerce-product-gallery__trigger {
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(15, 32, 58, .14);
}

/* ---------- Summary card ---------- */

body.pdp-special div.product > .summary {
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  box-shadow: var(--pdp-shadow);
  padding: clamp(18px, 2.4vw, 30px);
}

body.pdp-special.pdp-sticky-summary div.product > .summary {
  position: sticky;
  top: 100px;
}

body.pdp-special .pdp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pdp-primary) 9%, #fff 91%);
  color: var(--pdp-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none;
}

body.pdp-special .pdp-eyebrow:hover {
  background: color-mix(in srgb, var(--pdp-primary) 15%, #fff 85%);
}

body.pdp-special .summary .product_title {
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--pdp-ink);
  margin: 0 0 10px;
}

body.pdp-special .summary .woocommerce-product-rating {
  margin: 0 0 12px;
  font-size: 13px;
}

body.pdp-special .summary > .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 14px 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--pdp-soft);
  border: 1px solid var(--pdp-line);
  color: var(--pdp-ink) !important;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.2;
}

body.pdp-special .summary > .price del {
  font-size: .6em;
  font-weight: 500;
  opacity: .6;
}

body.pdp-special .summary > .price ins {
  text-decoration: none;
  background: none;
}

body.pdp-special .woocommerce-product-details__short-description {
  color: var(--pdp-muted);
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: 18px;
}

/* ---------- Variant table ---------- */

body.pdp-special .pahla-variant-table-wrapper {
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-radius: 14px;
  padding: 16px;
}

body.pdp-special .pahla-variant-table-wrapper h5 {
  font-size: 12px;
  letter-spacing: .6px;
  color: var(--pdp-ink);
}

body.pdp-special .pahla-variant-table {
  margin-bottom: 0;
  border-radius: 10px;
  overflow: hidden;
}

body.pdp-special .pahla-variant-table th {
  font-size: 11px;
  color: var(--pdp-muted);
}

/* ---------- Add to cart ---------- */

body.pdp-special .summary form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

body.pdp-special .summary form.cart.variations_form {
  display: block;
}

body.pdp-special .summary form.cart .quantity .qty {
  height: 48px;
  width: 84px;
  border-radius: 999px;
  border: 1px solid var(--pdp-line);
  text-align: center;
  font-weight: 700;
}

body.pdp-special .summary .single_add_to_cart_button {
  flex: 1 1 180px;
  height: 48px;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(95deg, var(--pdp-primary), color-mix(in srgb, var(--pdp-primary) 78%, #000 22%)) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ---------- B2B quick info ---------- */

body.pdp-special .pahla-b2b-quick-info-grid {
  gap: 10px;
  margin-bottom: 18px !important;
}

body.pdp-special .pahla-b2b-link {
  padding: 11px 12px;
  border-radius: 12px;
  border-color: var(--pdp-line);
  background: #fff;
  font-size: 12.5px;
}

body.pdp-special .pahla-b2b-link i {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--pdp-icon) !important;
  background: color-mix(in srgb, var(--pdp-icon) 10%, #fff 90%);
}

body.pdp-special .pahla-b2b-link:hover {
  border-color: var(--pdp-icon);
  color: var(--pdp-ink) !important;
}

/* ---------- Quote & sample buttons ---------- */

/* Filled with the RFQ accent. !important because the dashboard's dynamic
   styles force the outline button's text/border to that same colour. */
body.pdp-special .pahla-rfq-button-wrapper .rfq-button {
  min-height: 52px;
  border-radius: 999px;
  border: 0 !important;
  background: linear-gradient(95deg, var(--pdp-rfq), color-mix(in srgb, var(--pdp-rfq) 80%, #000 20%)) !important;
  color: #fff !important;
  font-size: 13px;
  letter-spacing: .6px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pdp-rfq) 28%, transparent);
}

body.pdp-special .pahla-rfq-button-wrapper .rfq-button:hover,
body.pdp-special .pahla-rfq-button-wrapper .rfq-button:focus {
  background: linear-gradient(95deg, var(--pdp-rfq), color-mix(in srgb, var(--pdp-rfq) 68%, #000 32%)) !important;
  color: #fff !important;
}

body.pdp-special .pahla-sample-button-wrapper .sample-button {
  min-height: 52px;
  border-radius: 999px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--pdp-sample) 26%, transparent);
}

/* ---------- Share row (moved below the buttons) ---------- */

body.pdp-special .summary .pahla-share-actions {
  margin: 18px 0 0 !important;
  padding-top: 16px;
  border-top: 1px dashed var(--pdp-line);
}

body.pdp-special .summary .pahla-share-actions .btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 16px;
}

/* ---------- Meta (SKU, categories, tags) ---------- */

body.pdp-special .summary .product_meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pdp-line);
  font-size: 12.5px;
  color: var(--pdp-muted);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.pdp-special .summary .product_meta a {
  color: var(--pdp-ink);
  text-decoration: none;
}

body.pdp-special .summary .product_meta a:hover {
  color: var(--pdp-primary);
}

/* ---------- Tabs ---------- */

body.pdp-special.woocommerce div.product .woocommerce-tabs {
  margin-top: clamp(36px, 5vw, 60px);
  padding-top: 0;
  border-top: 0;
}

body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 5px;
  border-radius: 999px;
  background: var(--pdp-soft);
  border: 1px solid var(--pdp-line);
  overflow-x: auto;
  scrollbar-width: none;
}

body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
  display: none;
}

body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent;
}

body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 9px 18px;
  border-radius: 999px;
  color: var(--pdp-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: #fff;
  box-shadow: 0 3px 10px rgba(15, 32, 58, .1);
}

body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--pdp-icon);
}

body.pdp-special.woocommerce div.product .woocommerce-tabs .panel {
  background: #fff;
  border: 1px solid var(--pdp-line);
  border-radius: var(--pdp-radius);
  padding: clamp(18px, 2.6vw, 32px);
  color: var(--pdp-muted);
  line-height: 1.75;
}

body.pdp-special.woocommerce div.product .woocommerce-tabs .panel h2:first-of-type {
  font-size: 1.15rem;
  color: var(--pdp-ink);
  margin-bottom: 14px;
}

/* ---------- Mobile quote bar (hidden on desktop) ---------- */

.pdp-quote-bar {
  display: none;
}

/* ---------- Stacked (tablet and below) ---------- */

@media (max-width: 991px) {
  body.pdp-special div.product {
    grid-template-columns: minmax(0, 1fr);
  }

  body.pdp-special div.product > .woocommerce-product-gallery,
  body.pdp-special div.product > .summary {
    grid-column: 1;
  }

  body.pdp-special div.product > .summary {
    margin-top: 20px !important;
  }

  body.pdp-special.pdp-sticky-summary div.product > .summary {
    position: static;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
  body.pdp-special.pdp-m-hide-crumb .woocommerce-breadcrumb {
    display: none;
  }

  /* Images first, edge to edge: cancel the column + container gutter. */
  body.pdp-special div.product > .woocommerce-product-gallery {
    margin-left: calc(var(--pahla-m-gutter, 12px) * -1) !important;
    margin-right: calc(var(--pahla-m-gutter, 12px) * -1) !important;
    border-radius: 0;
  }

  body.pdp-special .woocommerce-product-gallery .flex-viewport,
  body.pdp-special .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  body.pdp-special .woocommerce-product-gallery .flex-control-thumbs {
    padding: 0 12px;
  }

  body.pdp-special .woocommerce-product-gallery .flex-control-thumbs li {
    flex-basis: 60px;
    width: 60px !important;
  }

  body.pdp-special .woocommerce-product-gallery .flex-control-thumbs li img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
  }

  body.pdp-special div.product > .onsale {
    top: 12px;
    left: 0;
  }

  /* On a phone the summary is the page itself, not a floating card. */
  body.pdp-special div.product > .summary {
    margin-top: 14px !important;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  /* Clamp the title to the chosen line count; tapping expands it (JS).
     --pdp-title-lines: 0 is not a valid clamp, so it falls back to none. */
  body.pdp-special .summary .product_title {
    font-size: 1.35rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--pdp-title-lines, 2);
    overflow: hidden;
    cursor: pointer;
  }

  body.pdp-special .summary .product_title.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  body.pdp-special .summary > .price {
    font-size: 1.3rem;
    padding: 12px 14px;
  }

  body.pdp-special.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    border-radius: 14px;
  }

  body.pdp-special.woocommerce div.product .woocommerce-tabs .panel {
    border-radius: 14px;
  }

  /* Inquiry bar: always pinned to the bottom on mobile.
     [share] [whatsapp] [ SEND INQUIRY ------ ] */
  body.pdp-enh.pdp-has-bar {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  body.pdp-enh .pdp-quote-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-top: 1px solid var(--pdp-line);
    box-shadow: 0 -6px 20px rgba(15, 32, 58, .08);
  }

  body.pdp-enh .pdp-quote-bar__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--pdp-line);
    background: #fff;
    color: var(--pdp-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    padding: 0;
    text-decoration: none;
    text-transform: none;
    transition: border-color .2s ease, color .2s ease;
  }

  /* Sample: the dashboard's Sample Button Colour. */
  body.pdp-enh .pdp-quote-bar__icon--sample {
    color: var(--pdp-sample);
    border-color: color-mix(in srgb, var(--pdp-sample) 40%, var(--pdp-line) 60%);
    background: color-mix(in srgb, var(--pdp-sample) 7%, #fff 93%);
  }

  body.pdp-enh .pdp-quote-bar__icon:active,
  body.pdp-enh .pdp-quote-bar__icon.is-copied {
    border-color: var(--pdp-primary);
    color: var(--pdp-primary);
  }

  body.pdp-enh .pdp-quote-bar__icon--wa {
    color: #1faa59;
    border-color: color-mix(in srgb, #25d366 35%, var(--pdp-line) 65%);
    font-size: 20px;
  }

  body.pdp-enh .pdp-quote-bar__btn {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(95deg, var(--pdp-rfq), color-mix(in srgb, var(--pdp-rfq) 80%, #000 20%));
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pdp-rfq) 30%, transparent);
  }

  body.pdp-enh .pdp-quote-bar__btn:active {
    transform: scale(.98);
  }

  /* The bar already has WhatsApp: drop the floating one and lift the
     scroll-up button clear of the bar. */
  body.pdp-enh.pdp-has-bar .pahla-floating-tools .whatsapp-btn {
    display: none;
  }

  body.pdp-enh.pdp-has-bar .pahla-floating-tools {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* Very narrow phones: four items in the bar, so the button drops its icon. */
@media (max-width: 380px) {
  body.pdp-enh .pdp-quote-bar {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }

  body.pdp-enh .pdp-quote-bar__icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  body.pdp-enh .pdp-quote-bar__btn {
    font-size: 12.5px;
    padding: 0 10px;
  }

  body.pdp-enh .pdp-quote-bar__btn i {
    display: none;
  }
}


/* ==================================================================
   Back + breadcrumb bar (Special and Marketplace) --
   pahla_store_pdp_crumbbar() in inc/single-product-layout.php
   [ < BACK ]                     HOME / CATEGORY / PRODUCT NAME…
   ------------------------------------------------------------------
   ================================================================== */

body.pdp-enh .pdp-crumbbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--pdp-line);
}

body.pdp-enh .pdp-crumbbar__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--pdp-ink) 25%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--pdp-ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

body.pdp-enh .pdp-crumbbar__back i {
  font-size: 10px;
}

body.pdp-enh .pdp-crumbbar__back:hover {
  border-color: var(--pdp-ink);
  color: var(--pdp-ink);
}

body.pdp-enh .pdp-crumbbar .pdp-crumbs {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #555;
  white-space: nowrap;
}

body.pdp-enh .pdp-crumbbar .pdp-crumbs__item {
  flex: 0 0 auto;
}

body.pdp-enh .pdp-crumbbar .pdp-crumbs a {
  color: #555;
  text-decoration: none;
  transition: color .2s ease;
}

body.pdp-enh .pdp-crumbbar .pdp-crumbs a:hover {
  color: var(--pdp-primary);
}

body.pdp-enh .pdp-crumbbar .pdp-crumbs__sep {
  color: #888;
}

/* The current page: accent colour, cut with an ellipsis. */
body.pdp-enh .pdp-crumbbar .pdp-crumbs__item:last-child {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--pdp-primary);
}

@media (max-width: 767.98px) {
  body.pdp-enh.pdp-m-hide-crumb .pdp-crumbbar {
    display: none;
  }

  body.pdp-enh .pdp-crumbbar {
    margin: 4px 0 16px;
    padding-bottom: 14px;
  }

  body.pdp-enh .pdp-crumbbar .pdp-crumbs {
    font-size: 11px;
    letter-spacing: .6px;
  }

  body.pdp-enh .pdp-crumbbar .pdp-crumbs__item:last-child {
    max-width: 140px;
  }
}

/* ------------------------------------------------------------------
   Mobile: product starts right under the header.
   .content-area carries 3rem of top padding on every page; on a phone
   with the breadcrumb hidden that is just an empty band above the image.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  body.pdp-enh .content-area {
    padding-top: 12px;
  }

  body.pdp-enh.pdp-m-hide-crumb .content-area {
    padding-top: 0;
  }

  /* Flush with the header: no hairline along the image's top edge. */
  body.pdp-enh.pdp-m-hide-crumb .woocommerce-product-gallery .flex-viewport,
  body.pdp-enh.pdp-m-hide-crumb .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper {
    border-top: 0;
  }
}


/* ==================================================================
   Sticky title bar (.pahla-titlebar) -- shared by the Special category page
   and the Special / Marketplace product page.
   Slides down from behind the site header (which sits above it) once the
   page title (the bar's data-trigger) has scrolled away. --titlebar-top is the header's
   bottom edge, measured by single-product-special.js. */

.pahla-titlebar {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--titlebar-top, 0px);
  z-index: 990;
  background: var(--primary, #0F766E);
  color: #fff;
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition: transform .38s cubic-bezier(.2, .9, .3, 1), opacity .25s ease, visibility 0s linear .38s;
}

.pahla-titlebar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.pahla-titlebar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 16px;
}

.pahla-titlebar__avatar {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.pahla-titlebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pahla-titlebar__text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.pahla-titlebar__title {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pahla-titlebar__sub {
  font-size: 12px;
  font-weight: 600;
  opacity: .85;
  white-space: nowrap;
}

.pahla-titlebar__top {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s ease;
}

.pahla-titlebar__top:hover {
  background: rgba(255, 255, 255, .3);
}

@media (max-width: 767.98px) {
  .pahla-titlebar__inner {
    gap: 10px;
    padding: 7px 12px;
  }

  .pahla-titlebar__avatar {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 15px;
  }

  .pahla-titlebar__text {
    flex-direction: column;
    gap: 0;
  }

  .pahla-titlebar__title {
    font-size: 14.5px;
  }

  .pahla-titlebar__sub {
    font-size: 11px;
  }

  .pahla-titlebar__top {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pahla-titlebar,
  .pahla-titlebar.is-visible {
    transition: none;
  }
}

/* Out of the way while a quote / quick view popup is open. */
body:has(.pahla-modal[style*="display: flex"]) .pahla-titlebar {
  display: none !important;
}

/* Product page extras: long titles cut with "…", a price line, and a
   compact Request a Quote button (desktop -- phones have the bottom bar). */
.pahla-titlebar__text {
  flex: 1 1 auto;
}

.pahla-titlebar__title {
  min-width: 0;
}

.pahla-titlebar__sub {
  overflow: hidden;
  text-overflow: ellipsis;
}

.pahla-titlebar__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-left: auto;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--primary, #0F766E);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s ease;
}

.pahla-titlebar__cta:hover {
  filter: brightness(.95);
}

.pahla-titlebar__cta + .pahla-titlebar__top {
  margin-left: 0;
}

/* Per-device switches for the product page title bar. */
@media (min-width: 768px) {
  body.pdp-d-no-titlebar .pahla-titlebar {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  body.pdp-m-no-titlebar .pahla-titlebar {
    display: none !important;
  }

  .pahla-titlebar__cta {
    display: none;
  }
}

/* ------------------------------------------------------------------
   Title bar on desktop / tablet (768px and up): a floating pill at the
   bottom of the screen -- light, blurred glass, rounded ends -- that
   rises into view. Phones keep the full-width bar under the header.
   Same content either way; only the frame changes.
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .pahla-titlebar {
    top: auto;
    bottom: 22px;
    left: 50%;
    right: auto;
    /* Lines up with the page content when Site Width is boxed (--pill-w,
       from pahla_store_site_width_css()); ~80% of the window on full width.
       Never wider than leaves room for the floating WhatsApp button. */
    width: min(var(--pill-w, 80vw), calc(100vw - 180px));
    border: 1px solid rgba(27, 39, 53, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    color: #1b2735;
    box-shadow: 0 14px 40px rgba(15, 32, 58, .16);
    transform: translate(-50%, calc(100% + 40px));
  }

  .pahla-titlebar.is-visible {
    transform: translate(-50%, 0);
  }

  .pahla-titlebar__inner {
    max-width: none;
    gap: 14px;
    padding: 8px 10px 8px 12px;
  }

  .pahla-titlebar__avatar {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(27, 39, 53, .12);
    background: #f4f6f9;
    color: var(--primary, #0F766E);
  }

  /* Title over the price / count, like the reference. */
  .pahla-titlebar__text {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .pahla-titlebar__title {
    max-width: 100%;
    font-size: 15px;
  }

  .pahla-titlebar__sub {
    font-size: 13px;
    font-weight: 700;
    opacity: 1;
    color: #1b2735;
  }

  .pahla-titlebar__cta {
    height: 46px;
    padding: 0 26px;
    background: var(--pahla-rfq-color, #222222);
    color: #fff;
    font-size: 12.5px;
    letter-spacing: 1px;
  }

  .pahla-titlebar__cta:hover {
    filter: brightness(1.12);
  }

  .pahla-titlebar__top {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    background: #f1f3f6;
    color: #1b2735;
  }

  .pahla-titlebar__top:hover {
    background: #e5e9ef;
  }
}

/* Product pill actions: share / WhatsApp / sample icons, stepper + Add to
   Cart (retail price on), Send Inquiry. Desktop / tablet only. */
.pahla-titlebar__actions,
.pahla-titlebar__cart,
.pahla-titlebar__choose {
  display: none;
}

@media (min-width: 768px) {
  .pahla-titlebar__actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .pahla-titlebar__icon {
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(27, 39, 53, .12);
    border-radius: 50%;
    background: #fff;
    color: #1b2735;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease;
  }

  .pahla-titlebar__icon i {
    display: block;
    line-height: 1;
  }

  .pahla-titlebar__icon:hover {
    border-color: #1b2735;
    color: #1b2735;
  }

  .pahla-titlebar__icon--wa {
    color: #1faa59;
    border-color: color-mix(in srgb, #25d366 35%, #ffffff 65%);
    font-size: 19px;
  }

  .pahla-titlebar__icon--wa:hover {
    color: #1faa59;
  }

  .pahla-titlebar__icon--sample {
    color: var(--pahla-sample-color, #d35400);
    border-color: color-mix(in srgb, var(--pahla-sample-color, #d35400) 35%, #ffffff 65%);
    background: color-mix(in srgb, var(--pahla-sample-color, #d35400) 7%, #ffffff 93%);
  }

  .pahla-titlebar__icon--sample:hover {
    color: var(--pahla-sample-color, #d35400);
  }

  /* Stepper + Add to Cart: the buy box's own styles (.pdp-kit), fitted to
     the pill's 46px row. */
  .pahla-titlebar__cart {
    flex: 0 0 auto;
    display: inline-flex;
  }

  .pahla-titlebar__cart .pdp-mk__cart {
    margin: 0;
  }

  .pahla-titlebar__cart .quantity.has-stepper {
    height: 46px;
  }

  .pahla-titlebar__cart .quantity.has-stepper .qty,
  .pahla-titlebar__cart .pdp-qty-btn {
    height: 44px;
  }

  .pahla-titlebar__cart .single_add_to_cart_button {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 22px !important;
    font-size: 12.5px;
    white-space: nowrap;
  }

  .pahla-titlebar__choose {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 20px;
    border: 1.5px solid var(--primary, #0F766E);
    border-radius: 999px;
    background: transparent;
    color: var(--primary, #0F766E);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* With more on the right, the title gives way first. */
  .pahla-titlebar--product .pahla-titlebar__text {
    min-width: 120px;
  }

  .pahla-titlebar--product .pahla-titlebar__cta {
    margin-left: 0;
  }
}

/* Narrower tablets: keep the actions, drop the words on Send Inquiry. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pahla-titlebar--product .pahla-titlebar__cta span {
    display: none;
  }

  .pahla-titlebar--product .pahla-titlebar__cta {
    padding: 0 18px;
  }
}

/* Desktop / tablet: product page content starts close under the header
   (the theme's .content-area has 3rem of top padding on every page).
   Phones already have their own, tighter rules above. */
@media (min-width: 768px) {
  body.pdp-enh.single-product .content-area {
    padding-top: 16px;
  }
}

/* ------------------------------------------------------------------
   Title bar avatar stack (Shop / category): overlapping round category
   images with white rings, then "+N". Phones (top bar on the theme
   colour): 28px, up to 3. Desktop / tablet pill: 40px, up to 6.
   ------------------------------------------------------------------ */
.pahla-titlebar__stack {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding-left: 8px; /* room for the first ring */
}

.pahla-titlebar__stack + .pahla-titlebar__top {
  margin-left: 10px;
}

.pahla-titlebar__stack-item,
.pahla-titlebar__stack-more {
  position: relative;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border: 2px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .2s ease;
}

.pahla-titlebar__stack > :first-child {
  margin-left: 0;
}

.pahla-titlebar__stack-item {
  background: #fff;
  color: var(--primary, #0F766E);
}

.pahla-titlebar__stack-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pahla-titlebar__stack-item:hover,
.pahla-titlebar__stack-item:focus-visible {
  z-index: 2;
  transform: translateY(-3px);
}

.pahla-titlebar__stack-more {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* Phones: up to 3 images and the phone's own "+N". */
.pahla-titlebar__stack-item.is-extra,
.pahla-titlebar__stack-more--d {
  display: none;
}

@media (min-width: 768px) {
  .pahla-titlebar__stack {
    padding-left: 12px;
  }

  .pahla-titlebar__stack-item,
  .pahla-titlebar__stack-more {
    width: 40px;
    height: 40px;
    margin-left: -12px;
    border-width: 3px;
    font-size: 13px;
    box-shadow: 0 2px 6px rgba(15, 32, 58, .12);
  }

  .pahla-titlebar__stack-item.is-extra {
    display: inline-flex;
  }

  .pahla-titlebar__stack-more--m {
    display: none;
  }

  .pahla-titlebar__stack-more--d {
    display: inline-flex;
    background: #f1f3f6;
    color: #1b2735;
  }

  .pahla-titlebar__stack + .pahla-titlebar__top {
    margin-left: 14px;
  }
}

/* Stack items: image wrapper + name. Phones: round avatar only (the name
   is hidden). Desktop / tablet: a chip with image and name -- there is room
   for it -- scrolling sideways if the categories outgrow the pill. */
.pahla-titlebar__stack-img {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
}

.pahla-titlebar__stack-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pahla-titlebar__stack-name {
  display: none;
}

@media (min-width: 768px) {
  .pahla-titlebar__stack {
    flex: 0 1 auto;
    min-width: 0;
    gap: 8px;
    padding: 2px 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pahla-titlebar__stack::-webkit-scrollbar {
    display: none;
  }

  .pahla-titlebar__stack-item,
  .pahla-titlebar__stack-more,
  .pahla-titlebar__stack-more--d {
    width: auto;
    height: 40px;
    margin-left: 0;
    padding: 0 14px 0 4px;
    gap: 8px;
    border: 1px solid rgba(27, 39, 53, .12);
    border-radius: 999px;
    background: #fff;
    color: #1b2735;
    box-shadow: none;
    overflow: visible;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
  }

  .pahla-titlebar__stack-more--d {
    padding: 0 14px;
    background: #f1f3f6;
    font-weight: 700;
  }

  .pahla-titlebar__stack-item:hover,
  .pahla-titlebar__stack-item:focus-visible {
    border-color: #1b2735;
    color: #1b2735;
    transform: none;
  }

  .pahla-titlebar__stack-img {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background: #f1f3f6;
    color: var(--primary, #0F766E);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .pahla-titlebar__stack-name {
    display: inline;
  }
}

/* ==================================================================
   Homepage (inc/home-floating.php)
   Desktop / tablet: the floating pill (.pahla-titlebar--home).
   Phones: the app-style bottom dock + the categories bottom sheet.
   ================================================================== */

@media (max-width: 767.98px) {
  .pahla-titlebar--home {
    display: none !important;
  }
}

/* ---------- Bottom dock (phones) ---------- */

.home-dock {
  display: none;
}

@media (max-width: 767.98px) {
  .home-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    border-top: 1px solid #e3ebf4;
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.2, .9, .3, 1);
  }

  .home-dock.is-visible {
    transform: translateY(0);
  }

  .home-dock__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #5b6777;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
  }

  .home-dock__item i {
    font-size: 18px;
    line-height: 1;
  }

  .home-dock__item:hover,
  .home-dock__item:focus-visible {
    color: #1b2735;
  }

  .home-dock__item.is-active {
    color: var(--primary, #0F766E);
  }

  .home-dock__item--wa i {
    color: #1faa59;
  }

  /* Quote: the one filled action, in the RFQ colour. */
  .home-dock__item--quote i {
    width: 34px;
    height: 34px;
    margin-top: -4px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pahla-rfq-color, #222222);
    color: #fff;
    font-size: 14px;
  }

  .home-dock__item--quote {
    color: #1b2735;
  }

  /* The dock has WhatsApp: drop the floating one and lift scroll-to-top. */
  body.has-home-dock .pahla-floating-tools .whatsapp-btn {
    display: none;
  }

  body.has-home-dock.home-dock-on .pahla-floating-tools {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  body.has-home-dock {
    padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px));
  }
}

body:has(.pahla-modal[style*="display: flex"]) .home-dock {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .home-dock {
    transition: none;
  }
}

/* ---------- Categories bottom sheet ---------- */

#home-cat-sheet {
  padding: 24px 16px;
}

#home-cat-sheet .home-cat-sheet__panel {
  width: 100% !important;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  margin: auto !important;
  display: flex;
  flex-direction: column;
  border-radius: 24px !important;
  --accent-top: var(--primary, #0F766E);
}

#home-cat-sheet .home-cat-sheet__grabber {
  display: none;
}

#home-cat-sheet .home-cat-sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f1f3f5;
  color: #1b1b1b;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#home-cat-sheet .home-cat-sheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 20px 22px;
}

#home-cat-sheet .home-cat-sheet__title {
  margin: 4px 50px 18px 0;
  font-family: var(--oswald, "Oswald", sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #1b2735;
}

#home-cat-sheet .home-cat-sheet__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#home-cat-sheet .home-cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border: 1px solid #e3ebf4;
  border-radius: 16px;
  background: #fff;
  color: #1b2735;
  text-align: center;
  text-decoration: none;
}

#home-cat-sheet .home-cat-tile:hover {
  border-color: var(--primary, #0F766E);
}

#home-cat-sheet .home-cat-tile__img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f3f6;
  color: var(--primary, #0F766E);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}

#home-cat-sheet .home-cat-tile__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home-cat-sheet .home-cat-tile__name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
}

#home-cat-sheet .home-cat-tile small {
  font-size: 11px;
  color: #5b6777;
}

#home-cat-sheet .home-cat-sheet__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  margin-top: 16px;
  border: 1.5px solid var(--primary, #0F766E);
  border-radius: 999px;
  color: var(--primary, #0F766E);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  #home-cat-sheet.pahla-modal {
    align-items: flex-end;
    padding: 0;
    overflow: hidden;
  }

  #home-cat-sheet .home-cat-sheet__panel {
    max-width: none;
    max-height: 82vh;
    max-height: 82dvh;
    margin: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    animation: rfqSheetUp .32s cubic-bezier(.2, .9, .3, 1);
  }

  #home-cat-sheet .home-cat-sheet__grabber {
    display: block;
    flex: 0 0 auto;
    width: 40px;
    height: 5px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: #d5dade;
  }

  #home-cat-sheet .home-cat-sheet__body {
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------------------
   Bottom dock, app-style (phones): a bar in the theme colour with
   rounded top corners, white icons + labels, a dot under the active
   tab, and a raised white round Search button in the centre.
   Overrides the first dock styles above.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .home-dock {
    overflow: visible;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 22px 22px 0 0;
    background: var(--primary, #0F766E);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -6px 22px rgba(15, 32, 58, .16);
  }

  .home-dock__item {
    position: relative;
    min-height: 50px;
    color: rgba(255, 255, 255, .72);
    font-size: 11px;
  }

  .home-dock__item i {
    font-size: 19px;
  }

  .home-dock__item:hover,
  .home-dock__item:focus-visible,
  .home-dock__item.is-active {
    color: #fff;
  }

  .home-dock__item.is-active {
    font-weight: 700;
  }

  .home-dock__item.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #fff;
  }

  .home-dock__item--wa i,
  .home-dock__item--quote {
    color: inherit;
  }

  /* Quote: a plain tab in the bar (Search is the raised one now). */
  .home-dock__item--quote i {
    width: auto;
    height: auto;
    margin-top: 0;
    background: none;
    color: inherit;
    font-size: 19px;
  }

  /* Centre: raised white round Search button. */
  .home-dock__fab {
    padding: 0;
  }

  .home-dock__fab-circle {
    width: 60px;
    height: 60px;
    margin-top: -34px;
    border: 4px solid var(--primary, #0F766E);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--primary, #0F766E);
    box-shadow: 0 8px 18px rgba(15, 32, 58, .22);
    transition: transform .2s ease;
  }

  .home-dock__fab-circle i {
    font-size: 22px;
  }

  .home-dock__fab:active .home-dock__fab-circle {
    transform: scale(.95);
  }
}

/* Hidden state clears the raised Search circle too (it sits 34px above). */
@media (max-width: 767.98px) {
  .home-dock {
    transform: translateY(calc(100% + 44px));
  }

  .home-dock.is-visible {
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------
   Minimise (desktop / tablet): a chevron at the end of the pill tucks it
   away into a tab docked to the right edge -- the pill's round image and
   a small up-chevron -- which brings it back. Built by initTitlebar().
   Phones never minimise.
   ------------------------------------------------------------------ */
.pahla-titlebar__min,
.pahla-titlebar-tab {
  display: none;
}

@media (min-width: 768px) {
  .pahla-titlebar__min {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-left: -4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #5b6777;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }

  .pahla-titlebar__min:hover,
  .pahla-titlebar__min:focus-visible {
    background: #f1f3f6;
    color: #1b2735;
  }

  .pahla-titlebar.is-min,
  .pahla-titlebar.is-min.is-visible {
    transform: translate(-50%, calc(100% + 40px)) !important;
    opacity: 0;
    visibility: hidden;
  }

  .pahla-titlebar-tab {
    position: fixed;
    right: 0;
    bottom: 178px; /* clear of the stacked floating WhatsApp + scroll-up buttons */
    z-index: 990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid rgba(27, 39, 53, .12);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 10px 28px rgba(15, 32, 58, .16);
    cursor: pointer;
    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.2, .9, .3, 1);
  }

  .pahla-titlebar-tab.is-visible {
    transform: translateX(0);
  }

  .pahla-titlebar-tab:hover {
    padding-right: 16px;
  }

  .pahla-titlebar-tab .pahla-titlebar__avatar {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(27, 39, 53, .12);
    background: #f4f6f9;
    color: var(--primary, #0F766E);
  }

  .pahla-titlebar-tab__up {
    font-size: 12px;
    color: #1b2735;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pahla-titlebar-tab {
    transition: none;
  }
}

body:has(.pahla-modal[style*="display: flex"]) .pahla-titlebar-tab {
  display: none !important;
}

/* Homepage pill: name + tagline are one tidy block that never runs into the
   category chips -- capped, each line cut with "…" (full text on hover). */
@media (min-width: 768px) {
  .pahla-titlebar--home .pahla-titlebar__text {
    flex: 0 1 240px;
    min-width: 0;
    max-width: 240px;
  }

  .pahla-titlebar--home .pahla-titlebar__title,
  .pahla-titlebar--home .pahla-titlebar__sub {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The chips take the room that is left, scrolling if they need more. */
  .pahla-titlebar--home .pahla-titlebar__stack {
    flex: 1 1 auto;
    margin-left: 0;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .pahla-titlebar--home .pahla-titlebar__text {
    flex-basis: 170px;
    max-width: 170px;
  }
}

/* ------------------------------------------------------------------
   Phones: the title bar is a floating strip at the bottom of the screen
   (the top bar was cut off as the phone's browser bars grew and shrank).
   Same content, same minimise as the desktop pill: › tucks it into the
   right-edge tab, ‹ brings it back. On a product page it sits just above
   the inquiry bar. Desktop / tablet rules above are unchanged.
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .pahla-titlebar {
    --m-strip-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    top: auto;
    bottom: var(--m-strip-bottom);
    left: 10px;
    right: 10px;
    border: 1px solid rgba(27, 39, 53, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    color: #1b2735;
    box-shadow: 0 10px 30px rgba(15, 32, 58, .18);
    transform: translateY(calc(100% + 30px));
  }

  body.pdp-enh.pdp-has-bar .pahla-titlebar {
    --m-strip-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  .pahla-titlebar.is-visible {
    transform: translateY(0);
  }

  .pahla-titlebar.is-min,
  .pahla-titlebar.is-min.is-visible {
    transform: translateY(calc(100% + 30px)) !important;
    opacity: 0;
    visibility: hidden;
  }

  .pahla-titlebar__inner {
    gap: 10px;
    padding: 6px 6px 6px 7px;
  }

  .pahla-titlebar__avatar {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(27, 39, 53, .12);
    background: #f4f6f9;
    color: var(--primary, #0F766E);
  }

  .pahla-titlebar__sub {
    opacity: 1;
    color: #5b6777;
  }

  .pahla-titlebar__top {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    background: var(--primary, #0F766E);
    color: #fff;
  }

  /* Category avatar stack on the light strip. */
  .pahla-titlebar__stack-item {
    border-color: #fff;
    background: #f4f6f9;
    box-shadow: 0 0 0 1px rgba(27, 39, 53, .12);
  }

  .pahla-titlebar__stack-more {
    border-color: #fff;
    background: color-mix(in srgb, var(--primary, #0F766E) 12%, #fff 88%);
    color: var(--primary, #0F766E);
  }

  .pahla-titlebar__min {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    margin-left: -6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #5b6777;
    font-size: 13px;
    cursor: pointer;
  }

  .pahla-titlebar__min:active {
    background: #f1f3f6;
    color: #1b2735;
  }

  .pahla-titlebar-tab {
    position: fixed;
    right: 0;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px)); /* above the floating WhatsApp + scroll-up */
    z-index: 990;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 5px;
    border: 1px solid rgba(27, 39, 53, .12);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    backdrop-filter: saturate(160%) blur(12px);
    box-shadow: 0 8px 24px rgba(15, 32, 58, .18);
    cursor: pointer;
    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.2, .9, .3, 1);
  }

  .pahla-titlebar-tab.is-visible {
    transform: translateX(0);
  }

  .pahla-titlebar-tab .pahla-titlebar__avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

  .pahla-titlebar-tab__up {
    font-size: 12px;
    color: #1b2735;
  }

  /* While the strip is up, the floating WhatsApp / scroll-up buttons
     step above it instead of covering its end. */
  body.titlebar-on .pahla-floating-tools {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.pdp-enh.pdp-has-bar.titlebar-on .pahla-floating-tools {
    bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.pdp-enh.pdp-has-bar .pahla-titlebar-tab {
    bottom: calc(190px + env(safe-area-inset-bottom, 0px));
  }
}

/* Phones: long titles cut with "…" inside the strip (the column layout
   otherwise sizes the title to its full text). */
@media (max-width: 767.98px) {
  .pahla-titlebar__text {
    flex: 1 1 0;
    align-items: stretch;
    min-width: 0;
    overflow: hidden;
  }

  .pahla-titlebar__title,
  .pahla-titlebar__sub {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

/* Dock Quote tab: it carries .rfq-button (to open the quote form), so the
   site-wide Request-a-Quote button styles (uppercase, padding, dark colour,
   hover lift) are cancelled here -- it looks like the other tabs. */
@media (max-width: 767.98px) {
  html body .home-dock .home-dock__item--quote.rfq-button {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, .72) !important;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    transform: none !important;
  }

  html body .home-dock .home-dock__item--quote.rfq-button:hover,
  html body .home-dock .home-dock__item--quote.rfq-button:focus-visible {
    color: #fff !important;
  }

  html body .home-dock .home-dock__item--quote.rfq-button i {
    color: inherit !important;
  }
}

/* Title bar price line (product): [$39 struck] $35  · [Bulk from $30/pc]
   on one tidy row, on the pill and the phone strip alike. */
.pahla-titlebar__sub--price {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.pahla-titlebar__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
}

.pahla-titlebar__price del {
  order: 0;
  font-size: .85em;
  font-weight: 500;
  opacity: .6;
}

.pahla-titlebar__price ins {
  order: 1;
  text-decoration: none;
  font-weight: 800;
}

.pahla-titlebar__price .amount {
  color: inherit;
}

.pahla-titlebar__bulk {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary, #0F766E) 10%, #fff 90%);
  color: var(--primary, #0F766E);
  font-size: 11.5px;
  font-weight: 700;
}

/* "+N" more-categories chip is a link now. */
.pahla-titlebar__stack-more {
  cursor: pointer;
  text-decoration: none;
}

@media (min-width: 768px) {
  .pahla-titlebar__stack-more--d:hover,
  .pahla-titlebar__stack-more--d:focus-visible {
    background: var(--primary, #0F766E);
    color: #fff;
  }
}

/* The page's chip row flashes when "+N" brings you to it. */
.cat-chips.is-flash {
  animation: pahla-chips-flash 1.2s ease;
  border-radius: 14px;
}

@keyframes pahla-chips-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary, #0F766E) 25%, transparent); }
}