/* ══════════════════════════════════════════════════════════════════════
   Card unification — Phase 1
   ──────────────────────────────────────────────────────────────────────
   Restyles the card markup of the other Tamland carousel plugins so they
   render identically to this plugin's .pcs-card, WITHOUT touching their
   PHP/JS.

   Covered:
     .product-card…              tamland-product-carousel + …_nitro1
     .tamland-course-carousel__… tamland-course-carousel

   Every declaration those plugins' own sheets also set is marked
   !important, because enqueue order across plugins is not guaranteed and
   several of their rules (aspect-ratio on the image, row-direction on the
   price, centred title) would otherwise win. Scoped strictly to the two
   card systems named above.

   Values mirror product-categories-slider.css — see the token block.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --pcsu-radius:      16px;
  --pcsu-border:      #ebebeb;
  --pcsu-shadow:      0 2px 10px rgba(0,0,0,0.05);
  --pcsu-shadow-hov:  0 6px 24px rgba(0,0,0,0.1);
  --pcsu-img-h:       240px;
  --pcsu-img-h-md:    200px;
  --pcsu-title:       #222;
  --pcsu-price:       #111;
  --pcsu-price-sale:  #C41717;
  --pcsu-old:         #bbb;
  --pcsu-badge:       #CC1111;
  --pcsu-font:        'YekanBakhFaNum', sans-serif;
}

/* ─── Link wrapper ───────────────────────────────────────────────────── */
/* Their sheet uses inline-flex + centring + gap; this plugin's card link
   is a plain full-size flex box. */
.product-card-link,
.tamland-course-carousel__card-link {
  text-decoration: none;
  color: inherit;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100%;
  height: 100%;
}
.product-card-link:hover,
.tamland-course-carousel__card-link:hover { text-decoration: none; }

/* ─── Card shell ─────────────────────────────────────────────────────── */
.product-card,
.tamland-course-carousel__card {
  position: relative;
  width: 100%;
  max-width: 380px;
  height: auto !important;
  background: #fff !important;
  border-radius: var(--pcsu-radius) !important;
  border: 1px solid var(--pcsu-border) !important;
  box-shadow: var(--pcsu-shadow) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
/* nitro1 declares ".product-card-link:hover .product-card" (0,2,0), which
   outranks a bare ".product-card:hover" — match that shape so the hover
   lift is this plugin's -2px, not theirs. */
.product-card:hover,
.product-card-link:hover .product-card,
.tamland-course-carousel__card:hover,
.tamland-course-carousel__card-link:hover .tamland-course-carousel__card {
  box-shadow: var(--pcsu-shadow-hov) !important;
  transform: translateY(-2px) !important;
}

/* The extra -inner wrapper (this plugin's card has no equivalent) becomes a
   transparent pass-through, so the flex column runs from card to footer in
   one chain and margin-top:auto on the price still works. */
.product-card-inner,
.tamland-course-carousel__card-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* ─── Image ──────────────────────────────────────────────────────────── */
/* Their sheet sets aspect-ratio:1/1, which overrides a plain height — it
   must be cleared explicitly for the fixed 240/200px crop to apply. */
.product-image-wrapper,
.tamland-course-carousel__image-wrapper {
  width: 100%;
  height: var(--pcsu-img-h) !important;
  aspect-ratio: auto !important;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: #fff;
}
.product-image-wrapper img,
.tamland-course-carousel__image-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  transition: transform 0.3s ease;
}
.product-card:hover .product-image-wrapper img,
.tamland-course-carousel__card:hover .tamland-course-carousel__image-wrapper img {
  transform: scale(1.04);
}

/* nitro1 gives the image wrapper and a direct-child <img> their own border,
   radius and shadow — the card already provides those, so clear them. */
.product-image-wrapper,
.product-card-inner > img {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ─── Title ──────────────────────────────────────────────────────────── */
/* Their wrapper centres and adds 14px top padding; this plugin puts the
   padding on the title itself and aligns right (RTL). */
.product-title-wrapper,
.tamland-course-carousel__title-wrapper {
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
  width: 100%;
  flex: 0 0 auto;
}

.product-title,
.tamland-course-carousel__title {
  margin: 0 !important;
  padding: 10px 12px 4px !important;
  font-family: var(--pcsu-font);
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  color: var(--pcsu-title) !important;
  direction: rtl;
  text-align: right !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 38px;
}

/* ─── Price footer ───────────────────────────────────────────────────── */
/* margin-top:auto pins this to the bottom, which is what lines prices up
   across cards with different title lengths. */
.product-price-wrapper,
.tamland-course-carousel__price-wrapper {
  display: block !important;
  padding: 8px 12px 12px !important;
  margin-top: auto;
  border-top: 1px solid var(--pcsu-border) !important;
  direction: rtl;
  width: 100%;
  gap: 0 !important;
}

.product-price-discount-container,
.tamland-course-carousel__price-discount-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  width: 100%;
}

.product-price-column,
.tamland-course-carousel__price-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end !important;
  gap: 0 !important;
  flex-grow: 1;
}

.current-price-row,
.tamland-course-carousel__current-price-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  width: auto !important;
  gap: 4px;
}

.current-price,
.tamland-course-carousel__current-price {
  font-family: var(--pcsu-font);
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--pcsu-price) !important;
  line-height: 1.3 !important;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

/* Sale price takes the red accent, matching .pcs-card--discounted. The
   markup has no "is discounted" class, so this keys off the discount badge
   being present in the same container. */
.product-price-discount-container:has(.discount-badge) .current-price,
.tamland-course-carousel__price-discount-container:has(.tamland-course-carousel__discount-badge) .tamland-course-carousel__current-price {
  color: var(--pcsu-price-sale) !important;
}

.free-price,
.tamland-course-carousel__current-price--free {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Old (struck-through) price */
.original-price,
.tamland-course-carousel__original-price {
  font-family: var(--pcsu-font);
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--pcsu-old) !important;
  text-decoration: line-through;
  direction: rtl;
  text-align: right !important;
  line-height: 1.3 !important;
}
.original-price-container,
.tamland-course-carousel__original-price-container {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

/* The toman icon stands in for this plugin's <em>تومان</em>. Their sheet
   sizes it 17x24px, far too large next to a 14px price. */
.toman-icon,
.tamland-course-carousel__toman-icon {
  width: auto !important;
  height: 11px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  margin: 0 !important;
  opacity: 0.75;
  flex-shrink: 0;
}

/* ─── Discount badge ─────────────────────────────────────────────────── */
/* Their 36x36 square is oversized beside a 14px price row. */
.discount-badge,
.tamland-course-carousel__discount-badge {
  background-color: var(--pcsu-badge) !important;
  color: #fff !important;
  font-family: var(--pcsu-font);
  font-size: 11px !important;
  font-weight: 800;
  width: auto !important;
  min-width: 34px;
  height: 26px !important;
  padding: 0 7px !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}
.discount-text,
.tamland-course-carousel__discount-text {
  font-size: 11px !important;
  font-weight: 800;
  line-height: 1;
  color: #fff !important;
}

/* ─── Status badge over the image ────────────────────────────────────── */
/* Position/colour come from their own sheet (it varies per badge type);
   only the typography is aligned with .pcs-badge here. */
.custom-course-badge {
  font-family: var(--pcsu-font);
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1.5;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 5;
}

/* ─── Responsive: match .pcs-card's 640px breakpoint ─────────────────── */
@media (min-width: 640px) {
  .product-card,
  .tamland-course-carousel__card { max-width: 245px; }

  .product-image-wrapper,
  .tamland-course-carousel__image-wrapper { height: var(--pcsu-img-h-md) !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Equal card heights outside .pcs-sliders
   ──────────────────────────────────────────────────────────────────────
   The main stylesheet scopes its height chain to ".pcs-sliders ...", but
   the sibling carousels render the shared .pcs-card inside their own
   ".tamland-swiper" (and course-carousel's own root). Those rules
   therefore never applied there, so each slide sized to its own content
   and cards in a row ended up different heights.

   Keying off the card's own classes instead of the container makes the
   chain work in ANY slider that renders a .pcs-card.

   The chain that equalises heights:
     slide     height:auto  -> lets flex "stretch" size it to the row
     link      height:100%  -> fills the stretched slide
     card      height:100%  -> fills the link
     body      flex:1       -> absorbs leftover space (already in main CSS)
     footer    margin-top:auto -> pins the price to the bottom
   ══════════════════════════════════════════════════════════════════════ */

/* :has() is unsupported on older Safari/Firefox. .tamland-swiper covers the
   sibling carousels explicitly so they work without it; the :has() rule then
   generalises to any other container. */
.tamland-swiper .swiper-slide,
.tamland-course-carousel .swiper-slide {
  height: auto !important;
  display: flex;
  align-items: stretch;
}
.swiper-slide:has(> .pcs-card-link) {
  height: auto !important;
  display: flex;
  align-items: stretch;
}
.swiper-slide > .pcs-card-link {
  height: 100% !important;
  width: 100%;
  display: flex;
}
.swiper-slide > .pcs-card-link > .pcs-card {
  height: 100% !important;
  width: 100%;
}

/* tamland-product-carousel centres its slide contents (justify-content:
   center) and nitro1 uses inline-flex + align-items:center on the link.
   Either would shrink-wrap the card vertically and defeat the stretch, so
   normalise both containers here. */
.tamland-swiper .swiper-slide,
.tamland-course-carousel .swiper-slide {
  justify-content: flex-start !important;
}
/* ══════════════════════════════════════════════════════════════════════
   Tabs, navigation buttons and "view all" — matched to this plugin
   ──────────────────────────────────────────────────────────────────────
   Mirrors .pcs-tab / .pcs-tab--active / .pcs-nav-btn / .pcs-see-all from
   product-categories-slider.css.

   nitro1 declares its nav buttons with !important (48px red circles), so
   these overrides carry it too. Everything here is scoped to the sibling
   plugins' own containers and never touches .pcs-* markup.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --pcsu-accent:      #C41717;
  --pcsu-tab-border:  #ebebeb;
  --pcsu-tab-text:    #444;
}

/* ─── Tab strip ──────────────────────────────────────────────────────── */
.product-tabs {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  overflow-y: visible;
  scrollbar-width: none;
  background: none !important;
  border-radius: 0 !important;
  padding: 2px !important;
  min-width: 0;
}
.product-tabs::-webkit-scrollbar { display: none; }

.product-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px !important;
  padding: 0 18px !important;
  background: #fff !important;
  border: 1.5px solid var(--pcsu-tab-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--pcsu-font);
  font-weight: 600 !important;
  font-size: 12.5px !important;
  color: var(--pcsu-tab-text) !important;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.15s ease;
}

.product-tab.active {
  background: var(--pcsu-accent) !important;
  border-color: var(--pcsu-accent) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(196,23,23,0.25) !important;
}

/* ─── Navigation arrows ──────────────────────────────────────────────── */
/* This plugin uses a 36px rounded square with a red glyph on white; the
   siblings ship 48px solid circles. Swiper draws its arrow through the
   ::after pseudo-element, so that is where the glyph size is set. */
.tamland-swiper .swiper-button-next,
.tamland-swiper .swiper-button-prev,
.tamland-course-carousel .swiper-button-next,
.tamland-course-carousel .swiper-button-prev,
.product-categories-slider-wrapper .swiper-button-next,
.product-categories-slider-wrapper .swiper-button-prev {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--pcsu-tab-border) !important;
  background: #fff !important;
  background-color: #fff !important;
  color: var(--pcsu-accent) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  margin-top: 0 !important;
}

.tamland-swiper .swiper-button-next::after,
.tamland-swiper .swiper-button-prev::after,
.tamland-course-carousel .swiper-button-next::after,
.tamland-course-carousel .swiper-button-prev::after,
.product-categories-slider-wrapper .swiper-button-next::after,
.product-categories-slider-wrapper .swiper-button-prev::after {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--pcsu-accent) !important;
}

.tamland-swiper .swiper-button-next:hover,
.tamland-swiper .swiper-button-prev:hover,
.tamland-course-carousel .swiper-button-next:hover,
.tamland-course-carousel .swiper-button-prev:hover {
  background: var(--pcsu-accent) !important;
  background-color: var(--pcsu-accent) !important;
  border-color: var(--pcsu-accent) !important;
}
.tamland-swiper .swiper-button-next:hover::after,
.tamland-swiper .swiper-button-prev:hover::after,
.tamland-course-carousel .swiper-button-next:hover::after,
.tamland-course-carousel .swiper-button-prev:hover::after {
  color: #fff !important;
}

/* Hidden on mobile, matching .pcs-nav-btn's own breakpoint. */
@media (max-width: 767px) {
  .tamland-swiper .swiper-button-next,
  .tamland-swiper .swiper-button-prev,
  .tamland-course-carousel .swiper-button-next,
  .tamland-course-carousel .swiper-button-prev { display: none !important; }
}

/* ─── "View all" button ──────────────────────────────────────────────── */
/* This plugin's .pcs-see-all is a solid red pill, not an outlined one. */
.view-all-btn button,
.view-all-btn a {
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  border: 1.5px solid transparent !important;
  background: var(--pcsu-accent) !important;
  background-color: var(--pcsu-accent) !important;
  color: #fff !important;
  font-family: var(--pcsu-font);
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.view-all-btn button:hover,
.view-all-btn a:hover {
  background: #a81212 !important;
  background-color: #a81212 !important;
  color: #fff !important;
}

@media (max-width: 767px) {
  .product-tab { height: 44px !important; padding: 0 18px !important; font-size: 13px !important; border-radius: 8px !important; }
  .view-all-btn button,
  .view-all-btn a { height: 28px !important; font-size: 11px !important; }
}

@media (max-width: 480px) {
  .product-tab { font-size: 12px !important; padding: 0 8px !important; height: 26px !important; }
}
/* ══════════════════════════════════════════════════════════════════════
   Code Snippets carousels — category filter buttons
   ──────────────────────────────────────────────────────────────────────
   The carousel Code Snippets (full_carousel_*) build their tabs as
   <button class="filter-button-nitro"> inside .tamland-category-filter-nitro.
   Those classes are NOT the .product-tab ones the plugins use and had no
   CSS anywhere, so the tabs rendered unstyled. Styled here to match
   .pcs-tab / .pcs-tab--active.
   ══════════════════════════════════════════════════════════════════════ */

/* Horizontally scrollable, never wrapping — same behaviour as .pcs-tabs. */
.tamland-category-filter-nitro,
.tamland-cat-set {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 2px;
  min-width: 0;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.tamland-category-filter-nitro::-webkit-scrollbar,
.tamland-cat-set::-webkit-scrollbar { display: none; }

/* The outer row holds the scrolling strip; min-width:0 is what actually
   allows a flex child to shrink below its content and scroll. */
/* Tab strip on the right (RTL start), nav arrows pushed to the far left.
   space-between separates them; the strip only grows as far as its own
   content so the arrows stay pinned to the opposite edge. */
.tamland-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  width: 100%;
}

.filter-button-nitro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  background: #fff;
  border: 1.5px solid var(--pcsu-tab-border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--pcsu-font);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--pcsu-tab-text);
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              box-shadow 0.2s ease, transform 0.15s ease;
}

.filter-button-nitro:hover {
  border-color: var(--pcsu-accent);
  color: var(--pcsu-accent);
}

.filter-button-nitro.active {
  background: var(--pcsu-accent);
  border-color: var(--pcsu-accent);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(196,23,23,0.25);
}

@media (max-width: 767px) {
  .filter-button-nitro { height: 44px; padding: 0 18px; font-size: 13px; border-radius: 8px; }
}
@media (max-width: 480px) {
  .filter-button-nitro { font-size: 12px; padding: 0 8px; height: 26px; }
}
/* ══════════════════════════════════════════════════════════════════════
   Snippet carousels — nav arrows on the tab row
   ──────────────────────────────────────────────────────────────────────
   The arrows now live INSIDE .tamland-filters (in .tamland-nav-inline),
   as siblings of the tab strip, so they lay out in normal flow instead of
   being absolutely positioned over the slides.

   Swiper still finds them: the snippets pass CSS selectors to the
   navigation option, which are resolved document-wide.
   ══════════════════════════════════════════════════════════════════════ */

/* Sized to sit exactly above the 0.2 "peeking" card.
   Swiper slide width = (100% - (spv-1)*gap) / spv, so the visible sliver is
   0.2 of that. --pcsu-spv/--pcsu-gap mirror the snippets' Swiper config
   (slidesPerView 1.2/2.2/3.2/4.2, spaceBetween 20). */
.tamland-nav-inline {
  --pcsu-spv: 1.2;
  --pcsu-gap: 20px;
  --pcsu-slide: calc((100% - (var(--pcsu-spv) - 1) * var(--pcsu-gap)) / var(--pcsu-spv));

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  /* The sliver plus the gap that follows it. */
  width: calc(0.2 * var(--pcsu-slide) + var(--pcsu-gap));
  min-width: 80px;
}
@media (min-width: 576px)  { .tamland-nav-inline { --pcsu-spv: 2.2; } }
@media (min-width: 768px)  { .tamland-nav-inline { --pcsu-spv: 3.2; } }
@media (min-width: 1024px) { .tamland-nav-inline { --pcsu-spv: 4.2; } }

/* Undo Swiper's absolute centring: these are ordinary flex children now. */
.tamland-nav-inline .swiper-button-next,
.tamland-nav-inline .swiper-button-prev {
  --swiper-navigation-top-offset: 0;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  margin-top: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1.5px solid var(--pcsu-tab-border) !important;
  background: #fff !important;
  background-color: #fff !important;
  color: var(--pcsu-accent) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  /* grid + place-items centres the icon exactly as .pcs-nav-btn does;
     Swiper's own centring leaves the glyph optically high. */
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Swiper draws its arrow as a font glyph in ::after. This plugin uses an
   18px SVG chevron instead (see includes/Templates/tabs.php), so the glyph
   is suppressed and the same chevron is painted as a mask — a mask inherits
   currentColor, so the icon flips to white on hover with the button. */
.tamland-nav-inline .swiper-button-next::after,
.tamland-nav-inline .swiper-button-prev::after {
  content: '' !important;
  width: 18px;
  height: 18px;
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 18px 18px;
          mask-size: 18px 18px;
}

/* prev = chevron pointing right (M9 6l6 6-6 6), next = left. Matches
   .pcs-btn-prev / .pcs-btn-next in this plugin's own RTL markup. */
.tamland-nav-inline .swiper-button-prev::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.tamland-nav-inline .swiper-button-next::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 6l-6 6 6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.tamland-nav-inline .swiper-button-next:hover,
.tamland-nav-inline .swiper-button-prev:hover {
  background: var(--pcsu-accent) !important;
  background-color: var(--pcsu-accent) !important;
  border-color: var(--pcsu-accent) !important;
  color: #fff !important;
}

/* Always active: Swiper adds .swiper-button-disabled (and aria-disabled)
   at the ends of the track, which greys the control out. These carousels
   should stay clickable throughout, so the disabled look is neutralised.
   Requires loop or rewind on the Swiper side to actually wrap — handled in
   the snippets' config. */
.tamland-nav-inline .swiper-button-disabled,
.tamland-nav-inline .swiper-button-next.swiper-button-disabled,
.tamland-nav-inline .swiper-button-prev.swiper-button-disabled {
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* The strip may shrink and scroll, but must not claim the whole row —
   otherwise it would push right up against the arrows. margin-inline-end
   auto is what actually drives the two groups apart in both directions. */
.tamland-filters > .tamland-category-filter-nitro {
  flex: 0 1 auto;
  min-width: 0;
  margin-inline-end: auto;
}

/* Arrows sit last in the DOM; in RTL that is the visual left edge. */
.tamland-filters > .tamland-nav-inline {
  flex: 0 0 auto;
  margin-inline-start: 0;
}

@media (max-width: 767px) {
  .tamland-nav-inline { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════
   No pagination dots
   ──────────────────────────────────────────────────────────────────────
   The markup and the Swiper `pagination` option were removed from these
   carousels, so nothing should render bullets. This is the safety net for
   any carousel still emitting the element (a cached page, or a variant not
   yet migrated) — scoped to the Tamland carousels so Elementor's own
   sliders keep their dots.
   ══════════════════════════════════════════════════════════════════════ */

.tamland-product-carousel-wrapper .swiper-pagination,
.tamland-swiper .swiper-pagination,
.instructor-carousel-wrapper .swiper-pagination,
.tamland-course-carousel .swiper-pagination {
  display: none !important;
}