/*
 * Dosra Store - Home V2 Product Widgets (Tabbed) Slick UI
 * Scoped to `.product-widgets-section-v2.pw-v2-slick`
 */

.product-widgets-section-v2.pw-v2-slick {
  --pw-primary: var(--primary, #0F766E);
  position: relative;
  padding: clamp(18px, 2vw, 28px) 0;
}

.product-widgets-section-v2.pw-v2-slick .section-header {
  margin-bottom: 18px !important;
}

.product-widgets-section-v2.pw-v2-slick .pw-title-v2 {
  font-family: var(--oswald, "Oswald", sans-serif);
  font-size: clamp(2rem, 2.8vw, 2.75rem);
  letter-spacing: 0.4px;
  line-height: 1.05;
  color: #1b2735;
  margin: 0 0 8px;
  text-transform: none;
}

.product-widgets-section-v2.pw-v2-slick .pw-subtitle-v2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: 15px;
}

.product-widgets-section-v2.pw-v2-slick .pw-v2-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* No wrapping: "View All" stays pinned to the right edge beside the tabs at
     every width, and the tab strip takes whatever room is left. */
  flex-wrap: nowrap;
}

/* The chrome lives on the scroll container, not on the <ul> inside it.
   With the border on the list itself, the list *was* the thing scrolling, so
   its right-hand border and rounded corner slid out of view on a phone and the
   strip looked cut off. flex: 0 1 auto keeps it hugging its content on desktop
   while letting it shrink and scroll on narrow screens. */
.product-widgets-section-v2.pw-v2-slick .product-tabs-wrapper {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  border: 1px solid #dbe4ef;
  border-radius: calc(var(--pw-radius, 14px) + 6px);
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
}

/* Quiet by default so it does not compete with the active tab; it is a
   secondary action sitting at the end of a primary control. */
.product-widgets-section-v2.pw-v2-slick .pw-v2-viewall {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #dbe4ef;
  border-radius: var(--pw-radius, 14px);
  background: #fff;
  color: var(--pw-primary);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.product-widgets-section-v2.pw-v2-slick .pw-v2-viewall i {
  font-size: 11px;
  transition: transform .2s ease;
}

.product-widgets-section-v2.pw-v2-slick .pw-v2-viewall:hover {
  background: var(--pw-primary);
  border-color: var(--pw-primary);
  color: #fff;
}

.product-widgets-section-v2.pw-v2-slick .pw-v2-viewall:hover i {
  transform: translateX(3px);
}

.product-widgets-section-v2.pw-v2-slick .pw-v2-viewall:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
}

@media (max-width: 575px) {
  /* Compact, still on the edge -- a full-width block pushed the products down
     and read as a primary action, which it is not. */
  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall {
    padding: 8px 10px;
    font-size: 10px;
    gap: 5px;
  }

  .product-widgets-section-v2.pw-v2-slick .pw-v2-tabbar {
    gap: 8px;
  }

  .product-widgets-section-v2.pw-v2-slick .product-tabs-wrapper {
    padding: 5px;
  }
}

/* Below this the label costs more room than it earns; the arrow alone is
   still a recognisable "go to the listing" affordance. */
@media (max-width: 400px) {
  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall {
    padding: 9px 11px;
  }

  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall i {
    font-size: 13px;
  }
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-item {
  margin: 0;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #5a6b80;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  padding: 9px 16px !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  border-radius: var(--pw-radius, 14px);
}

/* The icon carries the accent on rest, which is what ties the strip to the
   cards without shouting; it inverts to plain white once the tab is active. */
.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link i {
  font-size: 12px;
  line-height: 1;
  color: var(--pw-primary);
  transition: color .2s ease, transform .2s ease;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link:hover {
  background: #fff;
  border-color: #dbe4ef;
  color: #1d2b3a;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link:hover i {
  transform: translateY(-1px);
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link.active {
  background: linear-gradient(105deg, var(--pw-primary), color-mix(in srgb, var(--pw-primary) 82%, #000000 18%));
  border-color: transparent;
  color: #fff;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link.active i {
  color: #fff;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link:focus-visible {
  outline: 2px solid var(--pw-primary);
  outline-offset: 2px;
}

/* Labels alone are enough on a phone; the icons keep the strip scannable. */
@media (max-width: 575px) {
  .product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link {
    padding: 8px 12px !important;
    font-size: 11px;
    gap: 6px;
  }
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-wrapper::-webkit-scrollbar {
  display: none;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* The card is an <article>, and style.css gives `.blog article, .archive
   article` a 3rem bottom margin -- so on shop / category pages every card
   carried it. In a grid that margin was counted into the row height and the
   card then stretched to fill it: an empty band above the buttons, and extra
   space between rows. body + article.class outranks that rule. */
body article.pw-v2-card {
  margin: 0;
}

.pw-v2-card {
  /* Self-contained: the card is used in the tabbed section, the category
     layout and elsewhere, but --pw-primary used to be declared only on
     .product-widgets-section-v2.pw-v2-slick. Outside that scope every
     var(--pw-primary) in the card resolved to nothing, which made the
     "Start Inquiry" gradient invalid and left the button blank. */
  --pw-primary: var(--primary, #0F766E);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid #dbe4ef;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow: 0 8px 22px rgba(15, 32, 58, 0.08);
  overflow: hidden;
  height: 100%;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.pw-v2-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pw-primary) 35%, #dbe4ef 65%);
  box-shadow: 0 12px 28px rgba(15, 32, 58, 0.14);
}

.pw-v2-card__media {
  position: relative;
  background: radial-gradient(circle at 20% 20%, #ffffff 0%, #eff4fb 100%);
  aspect-ratio: 1 / 1;
  border-bottom: 1px solid #e3ebf4;
}

.pw-v2-card__thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px;
}

.pw-v2-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
  transition: transform .3s ease;
}

.pw-v2-card:hover .pw-v2-card__thumb {
  transform: scale(1.04);
}

.pw-v2-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 12px;
  flex: 1;
}

.pw-v2-card__title {
  margin: 0;
  font-family: var(--oswald, "Oswald", sans-serif);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: calc(1.2em * 2);
}

.pw-v2-card__title a {
  color: #1b2735;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-v2-card__price {
  font-weight: 700;
  font-size: 1rem;
  color: #1f2f43;
  min-height: 28px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pw-v2-card__price .pahla-dual-pricing {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  width: 100%;
}

.pw-v2-card__price .pahla-dual-pricing > .price {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  width: 100%;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}

.pw-v2-card__price .pahla-dual-pricing > .pahla-bulk-range-loop {
  display: block;
  width: 100%;
  margin-top: 4px !important;
}

.pw-v2-card__price ins {
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  background: transparent !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

.pw-v2-card__price .amount {
  color: #1f2f43;
  line-height: 1;
  white-space: nowrap !important;
}

.pw-v2-card__price del {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  opacity: .85;
  white-space: nowrap !important;
}

.pw-v2-card__price del .amount {
  font-size: 0.92em;
}

.pw-v2-card__price .bulk-price-range-label,
.pw-v2-card__price .bulk-price-range-value {
  font-size: 0.85rem !important;
  line-height: 1.2;
}

.pw-v2-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 28px;
}

.pw-v2-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  border: 1px solid #d0dbe8;
  background: #fff;
  color: #34485f;
  font-size: 10px;
  line-height: 1;
  padding: 5px 8px;
  font-weight: 700;
}

.pw-v2-chip--moq {
  border-color: color-mix(in srgb, var(--pw-primary) 45%, #d0dbe8 55%);
}

.pw-v2-chip--sample {
  border-color: color-mix(in srgb, var(--pw-primary) 50%, #d0dbe8 50%);
  color: #2f445d;
}

.pw-v2-card__actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Icons keep their size; the CTA takes the rest and drops to its own line
   when there is not enough room. Previously this was a grid whose last track
   was `1fr` -- min-width:auto meant the CTA could not shrink and its label
   overlapped the icons on narrow cards. */
.pw-v2-card__actions .pw-v2-icon-btn {
  flex: 0 0 34px;
}

.pw-v2-card__actions .pw-v2-cta {
  flex: 1 1 130px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 12px;
}

/* Same round icon button as the product page / quick view share row. The
   reset matters: a <button> keeps the browser's own padding and the icon its
   line-height, which nudged each glyph off the circle's centre. */
.pw-v2-icon-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid #dde4ee;
  background: #fff;
  color: #1b2735;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.pw-v2-icon-btn i {
  display: block;
  margin: 0;
  line-height: 1;
}

/* WhatsApp in its own green, as in the product page share row. */
.pw-v2-icon-btn .fa-whatsapp {
  color: #1faa59;
  font-size: 16px;
}

.pw-v2-icon-btn:hover {
  border-color: var(--pw-primary);
  color: var(--pw-primary);
}

.pw-v2-icon-btn:hover .fa-whatsapp {
  color: #1faa59;
}

.pw-v2-cta {
  height: 34px;
  border-radius: 999px;
  border: 0;
  color: #fff;
  background: linear-gradient(95deg, var(--pw-primary), color-mix(in srgb, var(--pw-primary) 78%, #000000 22%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  padding: 0 10px;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pw-v2-cta,
.pw-v2-cta:visited,
.pw-v2-cta:hover,
.pw-v2-cta:focus,
.pw-v2-cta:active {
  color: #fff !important;
  text-decoration: none;
}

.pw-v2-cta:hover,
.pw-v2-cta:focus {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 32, 58, 0.26);
}

@media (max-width: 991.98px) {
  .product-widgets-section-v2.pw-v2-slick .pw-title-v2 {
    font-size: clamp(1.75rem, 4.5vw, 2.2rem);
  }

  .pw-v2-card__title {
    font-size: 1.16rem;
  }
}

@media (max-width: 767.98px) {
  .product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link {
    font-size: 10px;
    padding: 7px 11px !important;
  }

  .pw-v2-card {
    border-radius: 12px;
  }

  .pw-v2-card__body {
    padding: 9px;
    gap: 8px;
  }

  .pw-v2-card__actions {
    gap: 6px;
  }

  .pw-v2-card__actions .pw-v2-icon-btn {
    flex: 0 0 32px;
  }

  .pw-v2-icon-btn,
  .pw-v2-cta {
    height: 32px;
  }
}

/* ------------------------------------------------------------------
   Product Widgets layout (Customizer-driven)

   Both views share one markup path; the difference is purely CSS.
   Grid  : image on top, details below, actions at the bottom.
   List  : image left, details right, actions spanning the full width below.
   ------------------------------------------------------------------ */
.pw-v2-layout {
  display: grid;
  gap: var(--pw-gap, 24px);
  grid-template-columns: repeat(var(--pw-cols, 4), minmax(0, 1fr));
}

.pw-v2-layout > .pw-v2-card {
  min-width: 0;
  border-radius: var(--pw-radius, 14px);
}

.pw-v2-layout .pw-v2-card__media,
.pw-v2-layout .pw-v2-card__thumb-link {
  border-radius: var(--pw-radius, 14px);
}

/* The base card sets aspect-ratio: 1/1 on the media; an explicit height has to
   clear it or the two fight over the box. */
.pw-v2-layout .pw-v2-card__media {
  aspect-ratio: auto;
  height: var(--pw-img-h, 240px);
}

/* "Fit card": square box that grows with the card width, so a square
   product photo fills it instead of sitting in side gaps -- same as the
   Product Categories Layout cards. Placed before the list rules so list
   view (which sizes the image by its row) still wins. */
.pw-img-fit .pw-v2-layout .pw-v2-card__media {
  aspect-ratio: 1 / 1;
  height: auto;
}

.pw-v2-layout .pw-v2-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- List view -----------------------------------------------------
   The card is a 2x2 grid. __body becomes display:contents so its two
   children (__content and __actions) become grid items of the card
   itself -- that is what lets the actions span under the image.
   NOTE: the base .pw-v2-card is flex-direction:column, so switching to
   grid here (not just display:flex) is what actually changes the axis. */
/* Written once per breakpoint: a class cannot be aliased in CSS, and 768px is
   the line the slider, the drawer and the other sections all switch on. */
@media (min-width: 768px) {
  .pw-v2-layout.pwl-d-list > .pw-v2-card {
    display: grid;
    grid-template-columns: var(--pw-list-media, 34%) minmax(0, 1fr);
    grid-template-areas:
      "media content"
      "actions actions";
    align-items: stretch;
  }

  .pw-v2-layout.pwl-d-list .pw-v2-card__media {
    grid-area: media;
    height: 100%;
    min-height: var(--pw-img-h, 240px);
    border-bottom: 0;
    border-right: 1px solid #e3ebf4;
  }

  .pw-v2-layout.pwl-d-list .pw-v2-card__body {
    display: contents;
  }

  .pw-v2-layout.pwl-d-list .pw-v2-card__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    min-width: 0;
  }

  .pw-v2-layout.pwl-d-list .pw-v2-card__actions {
    grid-area: actions;
    padding: 0 16px 14px;
    border-top: 1px solid #eef2f7;
    padding-top: 12px;
  }
}

@media (max-width: 767.98px) {
  .pw-v2-layout.pwl-m-list > .pw-v2-card {
    display: grid;
    grid-template-columns: var(--pw-list-media, 34%) minmax(0, 1fr);
    grid-template-areas:
      "media content"
      "actions actions";
    align-items: stretch;
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__media {
    grid-area: media;
    height: 100%;
    min-height: var(--pw-img-h, 240px);
    border-bottom: 0;
    border-right: 1px solid #e3ebf4;
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__body {
    display: contents;
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    min-width: 0;
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__actions {
    grid-area: actions;
    padding: 0 16px 14px;
    border-top: 1px solid #eef2f7;
    padding-top: 12px;
  }
}

/* 5 and 6 across only really work on a wide desktop. */
@media (max-width: 1399px) {
  .pw-v2-layout {
    grid-template-columns: repeat(min(var(--pw-cols, 4), 4), minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .pw-v2-layout {
    grid-template-columns: repeat(min(var(--pw-cols, 4), 2), minmax(0, 1fr));
  }
}

/* Below the phone breakpoint the Mobile tab owns the count outright -- no
   min() against the desktop value, or asking for 2 on a phone while desktop
   sat at 1 would silently give you 1. */
@media (max-width: 767.98px) {
  .pw-v2-layout {
    grid-template-columns: repeat(var(--pw-cols-m, 1), minmax(0, 1fr));
  }
}

@media (max-width: 575px) {

  /* List stays a list on phones -- one card per row, image still beside the
     details. Tuned to hold together down to a 350px viewport: the media column
     is a percentage with a pixel floor so the text side never collapses. */
  .pw-v2-layout.pwl-m-list > .pw-v2-card {
    grid-template-columns: minmax(96px, 34%) minmax(0, 1fr);
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__media {
    min-height: min(var(--pw-img-h, 240px), 150px);
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__content {
    padding: 12px;
    gap: 6px;
  }

  /* The desktop title reserves two lines; at this width that is dead space. */
  .pw-v2-layout.pwl-m-list .pw-v2-card__title {
    font-size: 0.95rem;
    min-height: 0;
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__meta {
    min-height: 0;
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__actions {
    padding: 10px 12px 12px;
  }
}

/* Very narrow phones: shrink the icon buttons so the inquiry button keeps its
   own line rather than being squeezed into an unreadable sliver. */
@media (max-width: 380px) {
  .pw-v2-layout.pwl-m-list .pw-v2-card__actions .pw-v2-icon-btn {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  .pw-v2-layout.pwl-m-list .pw-v2-card__actions .pw-v2-cta {
    flex: 1 1 100%;
  }
}

/* Phones: storefront sections sit ~10px apart (the .section-gap margin),
   so the tabbed section adds no padding of its own. */
@media (max-width: 767.98px) {
  .product-widgets-section-v2.pw-v2-slick {
    padding: 0;
  }
}

/* ==================================================================
   Tab bar, refreshed -- same language as the Shop / category chips.
   Tabs are separate rounded chips with a tinted round icon, normal
   case; the active one is filled with the theme colour. No box around
   the strip. View All is an outline pill (a round arrow on phones).
   Later in the file and !important where the rules above used it, so
   these win over the original tab styles.
   ================================================================== */

.product-widgets-section-v2.pw-v2-slick .pw-v2-tabbar {
  gap: 16px;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-wrapper {
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: none;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 {
  gap: 8px;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link {
  height: 44px;
  gap: 9px;
  padding: 0 18px 0 6px !important;
  border: 1px solid #e3ebf4;
  border-radius: 999px;
  background: #fff;
  color: #1b2735;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link i {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pw-primary) 10%, #fff 90%);
  color: var(--pw-primary);
  font-size: 13px;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link:hover {
  border-color: #1b2735;
  background: #fff;
  color: #1b2735;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link:hover i {
  transform: none;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link.active {
  border-color: var(--pw-primary);
  background: var(--pw-primary);
  color: #fff;
}

.product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link.active i {
  background: rgba(255, 255, 255, .2);
  color: #fff;
}

.product-widgets-section-v2.pw-v2-slick .pw-v2-viewall {
  height: 44px;
  gap: 9px;
  padding: 0 20px;
  border: 1.5px solid var(--pw-primary);
  border-radius: 999px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .6px;
}

@media (max-width: 767.98px) {
  .product-widgets-section-v2.pw-v2-slick .pw-v2-tabbar {
    gap: 8px;
    margin-bottom: 14px !important;
  }

  /* Edge to edge on the left, with a soft fade on the right that says
     "there is more -- swipe". The end padding lets the last tab scroll
     fully clear of the fade. */
  .product-widgets-section-v2.pw-v2-slick .product-tabs-wrapper {
    margin-left: calc(var(--pahla-m-gutter, 12px) * -1);
    padding: 2px 0 2px var(--pahla-m-gutter, 12px);
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
    mask-image: linear-gradient(to right, #000 82%, transparent);
  }

  .product-widgets-section-v2.pw-v2-slick .product-tabs-v2 {
    padding-right: 28px;
  }

  .product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link {
    height: 40px;
    gap: 7px;
    padding: 0 14px 0 5px !important;
    font-size: 12.5px;
  }

  .product-widgets-section-v2.pw-v2-slick .product-tabs-v2 .nav-link i {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  /* View All: a round arrow, centred; the label stays for screen readers. */
  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall i {
    display: block;
    line-height: 1;
  }

  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .product-widgets-section-v2.pw-v2-slick .pw-v2-viewall i {
    font-size: 14px;
  }
}