body {
  width: 100%;
  height: 100%;
}
h1, h2, h3, h4, h5, h6 {
  color: #444;
}
legend {
  padding: 7px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
label {
  font-size: 12px;
  font-weight: normal;
}
/* Chrome border line */
button:focus {
  outline: none !important;
}
/* container */
#container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  margin-bottom: 300px;
}
/* content — legacy default-theme padding-bottom (730 / 400 px) was used to
   prop up a sticky footer on short pages; pandactions doesn't pin the footer
   so that huge gap is just dead space. */
#content, #column-left, #column-right {
  padding-bottom: 30px;
}
#alert {
  z-index: 9999;
  position: fixed;
  top: 30%;
  left: 50%;
  width: 400px;
  margin-left: -200px;
}
@media (min-width: 992px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1140px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
@media (min-width: 1320px) {
  #alert {
    width: 600px;
    margin-left: -300px;
  }
}
#alert .alert {
  margin-bottom: 15px;
}
#alert .alert-primary {
  box-shadow: 0 0 0 5px rgb(var(--bs-primary-rgb), 0.1);
}
#alert .alert-secondary {
  box-shadow: 0 0 0 5px rgb(var(--bs-secondary-rgb), 0.1);
}
#alert .alert-success {
  box-shadow: 0 0 0 5px rgb(var(--bs-success-rgb), 0.1);
}
#alert .alert-warning {
  box-shadow: 0 0 0 5px rgb(var(--bs-warning-rgb), 0.1);
}
#alert .alert-danger {
  box-shadow: 0 0 0 5px rgb(var(--bs-danger-rgb), 0.1);
}
#alert .alert-info {
  box-shadow: 0 0 0 5px rgb(var(--bs-info-rgb), 0.1);
}
#alert .alert-light {
  box-shadow: 0 0 0 5px rgb(var(--bs-light-rgb), 0.1);
}
#alert .alert-dark {
  box-shadow: 0 0 0 5px rgb(var(--bs-dark-rgb), 0.1);
}
/* top */
#top {
  background-color: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 5px;
}
#top ul.list-inline {
  margin-bottom: 0;
}
#top .list-inline-item > a, #top .list-inline-item .dropdown > a {
  font-size: 1.1em;
  color: var(--bs-gray-600);
  line-height: 40px;
  vertical-align: middle;
  padding: 10px 0px 5px 0px;
}
/* logo */
#logo {
  text-align: center;
  margin: 7px 0 7px 0;
}
#logo img {
  max-width: 200px;
}
@media (min-width: 768px) {
  #logo {
    text-align: left;
  }
}
/* search */
#search {
  margin-bottom: 10px;
}
#search .form-control-lg {
  height: 40px;
  font-size: 12px;
  line-height: 20px;
  padding: 0 10px;
}
#search .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 0.57rem 35px;
  text-shadow: 0 1px 0 #FFF;
}
/* cart */
#cart {
  margin-bottom: 10px;
}
#cart .img-thumbnail {
  min-width: 100px;
}
#cart .btn-lg {
  font-size: 15px;
  line-height: 18px;
  padding: 14px 35px;
}
#cart .dropdown-menu {
  background: #eee;
}
#cart .dropdown-menu li {
  min-width: 300px;
}
@media (max-width: 768px) {
  #cart .dropdown-menu li {
    min-width: 100%;
  }
}
/* menu */
#menu {
  background-color: #000;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
  border: 1px solid #1f90bb;
  border-color: #1f90bb #1f90bb #145e7a;
  min-height: 40px;
  border-radius: 4px;
  padding: 0 1rem;
  margin-bottom: 20px;
}
#menu .navbar-nav > li > a {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  padding: 10px 15px 10px 15px;
  background-color: transparent;
}
#menu .navbar-nav > li > a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
#menu .dropdown-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
#menu .dropdown-inner {
  display: flex;
  flex-direction: column;
}
#menu .dropdown-inner ul {
  width: 100%;
  min-width: 200px;
}
@media (min-width: 960px) {
  #menu .dropdown:hover .dropdown-menu {
    display: block;
  }
  #menu .dropdown-inner {
    flex-direction: row;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-2 {
    left: -200px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-3 {
    left: -400px;
  }
  #menu .nav-item + .nav-item + .nav-item + .nav-item .dropdown-column-4 {
    left: -600px;
  }
}
#category {
  float: left;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#menu .navbar-toggler i {
  color: #fff;
  border-color: #fff;
  font-size: 0.9em;
}
/* default boostrap changes */
div.required .col-form-label:before, div.required .form-label:before {
  content: "* ";
  color: #F00;
  font-weight: bold;
}
.form-switch-lg {
  font-size: 20px;
  min-height: 30px;
  line-height: 30px;
}
.nav-tabs {
  margin-bottom: 15px;
}
.form-check .form-check-input {
  margin-top: 0.25rem;
}
@media (min-width: 768px) {
  .col-form-label {
    text-align: right;
  }
}
/* header — pandactions integrated nav (sticky) */
.pandactions-header {
  background: #ffffff;
  border-bottom: 1px solid #ececec;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.pandactions-header-logo { display: inline-block; line-height: 0; flex-shrink: 0; }
.pandactions-header-logo img { max-height: 48px; width: auto; display: block; }
.pandactions-header-logo span { font-family: "Open Sans", sans-serif; font-size: 24px; font-weight: 700; color: #1a1a1a; text-decoration: none; }

.pandactions-header-nav .pandactions-nav-link {
  color: #1a1a1a;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.pandactions-header-nav .pandactions-nav-link:hover { color: #555; }
.pandactions-header-nav .dropdown-menu { margin-top: 0; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

/* Header dropdown items — hover/focus show an underline instead of a background
   fill, and click/active state does NOT paint the item black. Scoped under
   `.pandactions-header` so the same rules cover the main nav dropdowns and the
   locale/currency dropdowns; the mobile-topbar dropdown gets the same look via
   the same selector since it sits inside `.pandactions-header` too. Bootstrap
   5's `.dropdown-item` rule has specificity (0,1,0) so this beats it. */
.pandactions-header .dropdown-item,
.pandactions-header .dropdown-item:hover,
.pandactions-header .dropdown-item:focus,
.pandactions-header .dropdown-item:active,
.pandactions-header .dropdown-item.active {
  background-color: transparent;
  color: #1a1a1a;
}
.pandactions-header .dropdown-item:hover,
.pandactions-header .dropdown-item:focus {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pandactions-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  font-size: 17px;
  line-height: 1;
  border-radius: 4px;
  text-decoration: none;
}
.pandactions-icon-btn:hover { background: rgba(0,0,0,0.05); color: #000; }

/* fly-to-cart animation (used by product page after add-to-cart) */
.pandactions-fly-to-cart {
  position: fixed;
  z-index: 9999;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95), opacity 0.7s ease;
  will-change: transform, opacity;
}
@keyframes pandactionsCartBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.pandactions-cart-bounce { animation: pandactionsCartBounce 0.5s ease; }

/* cart icon badge (red pill with count) */
.pandactions-cart-btn { position: relative; }
.pandactions-cart-badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #d94545;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  padding: 0 5px;
  text-align: center;
  pointer-events: none;
}

/* search bar revealed by toggling the search icon — translucent backdrop (10% black) over the page beneath it */
.pandactions-header-searchbar {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
}
.pandactions-search-form {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 999px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.pandactions-search-input {
  flex: 1;
  border: 0;
  outline: 0;
  padding: 0.85rem 1.5rem;
  font-size: 1rem;
  background: transparent;
  color: #1a1a1a;
}
.pandactions-search-input::placeholder { color: #999; }
.pandactions-search-submit {
  border: 0;
  background: transparent;
  padding: 0 1.5rem;
  font-size: 18px;
  color: #1a1a1a;
}
.pandactions-search-submit:hover { color: #000; }

/* locale (language + currency) — keeps consistent look with the rest of the toolbar */
.pandactions-locale { display: inline-block; margin: 0; }
.pandactions-locale .pandactions-locale-toggle {
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 0.4rem 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pandactions-locale .pandactions-locale-toggle:hover { color: #000; }
.pandactions-locale-flag { width: 20px; height: auto; display: inline-block; }
.pandactions-locale-caret { font-size: 12px; opacity: 0.7; margin-inline-start: 2px; }
.pandactions-locale .dropdown-menu { font-size: 14px; }
.pandactions-locale .dropdown-item img { width: 18px; height: auto; margin-inline-end: 6px; vertical-align: middle; }

/* search bar revealed by toggling the search icon */
.pandactions-header-searchbar form { margin: 0; }

/* mobile two-row header */
.pandactions-mobile-topbar { background: #000; color: #ffffff; font-size: 14px; }
/* Only the toggle text in the dark topbar should be white — the dropdown-menu that pops out
   has a white background, its items must keep their default dark color. */
.pandactions-mobile-topbar .pandactions-mobile-account,
.pandactions-mobile-topbar .pandactions-locale-toggle { color: #ffffff !important; }
.pandactions-mobile-topbar .dropdown-menu { color: #1a1a1a; }
.pandactions-mobile-topbar .dropdown-menu .dropdown-item { color: #1a1a1a; }
.pandactions-mobile-topbar .dropdown-menu .dropdown-item:hover,
.pandactions-mobile-topbar .dropdown-menu .dropdown-item:focus { color: #000000; background-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.pandactions-mobile-topbar .pandactions-mobile-account { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pandactions-mobile-topbar .pandactions-locale-toggle { font-weight: 700; padding: 0.25rem 0.25rem; }
.pandactions-mobile-mainbar { background: #ffffff; border-bottom: 1px solid #ececec; }
.pandactions-mobile-logo { display: inline-block; line-height: 0; }
.pandactions-mobile-logo img { max-height: 40px; width: auto; }
.pandactions-mobile-logo span { font-family: "Open Sans", sans-serif; font-size: 22px; font-weight: 700; color: #1a1a1a; }

.pandactions-mobile-offcanvas .offcanvas-body { padding-top: 0.5rem; }
.pandactions-mobile-menu-list > li { border-bottom: 1px solid #ececec; }
.pandactions-mobile-menu-link {
  display: block;
  padding: 0.85rem 0;
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: none;
}
.pandactions-mobile-menu-link:hover { color: #555; }
.pandactions-mobile-menu-sublist { padding-bottom: 0.5rem; padding-inline-start: 0.75rem; }
.pandactions-mobile-menu-sublink {
  display: block;
  padding: 0.4rem 0;
  color: #555;
  text-decoration: none;
  font-size: 14px;
}
.pandactions-mobile-menu-sublink:hover { color: #000; }

/* cart slide-out panel (offcanvas) */
.pandactions-cart-offcanvas { width: 380px; max-width: 90vw; }
.pandactions-cart-offcanvas .pandactions-cart-header {
  border-bottom: 1px solid #ececec;
  padding: 1rem 1.25rem;
}
.pandactions-cart-offcanvas .offcanvas-title { font-size: 18px; font-weight: 700; color: #1a1a1a; }

.pandactions-cart-list { background: #fff; }
.pandactions-cart-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: #f5f5f5;
}
.pandactions-cart-name {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #1a1a1a;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 0.25rem;
}
.pandactions-cart-name:hover { color: #000; }
.pandactions-cart-option { font-size: 12px; color: #888; }
.pandactions-cart-meta { font-size: 13px; margin-top: 0.25rem; }
.pandactions-cart-remove-form { margin: 0; }
.pandactions-cart-remove-btn {
  border: 0;
  background: transparent;
  color: #888;
  font-size: 18px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.pandactions-cart-remove-btn:hover { color: #d94545; }

.pandactions-cart-summary {
  padding: 1rem 1.25rem;
  background: #f5f6f8;
}
.pandactions-cart-total-row {
  font-size: 14px;
  margin-bottom: 0.4rem;
}
.pandactions-cart-total-row:last-child { font-weight: 700; color: #1a1a1a; }
.pandactions-cart-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}
.pandactions-cart-btn-view, .pandactions-cart-btn-checkout {
  display: block;
  text-align: center;
  width: 100%;
  border-radius: 999px;
  padding: 0.75rem 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #1a1a1a;
}
.pandactions-cart-btn-view {
  background: #ffffff;
  color: #1a1a1a;
}
.pandactions-cart-btn-view:hover { background: #f1f1f1; color: #000; }
.pandactions-cart-btn-checkout {
  background: #1a1a1a;
  color: #ffffff;
}
.pandactions-cart-btn-checkout:hover { background: #000; color: #fff; }

/* checkout — round all form-control / form-select corners to 0.6rem.
   Scoped to `#checkout-checkout` so other pages' inputs keep Bootstrap's
   default `--bs-border-radius` (0.375rem). */
#checkout-checkout .form-control,
#checkout-checkout .form-select {
  border-radius: 0.6rem;
}

/* checkout — Shipping/Payment Method card pair on the right column.
   White card with rounded corners, padded inside; the legend gets a short
   red accent line under it (replaces the global legend border-bottom which
   we explicitly disable for these). Radios switch to red so the selected
   option pops on the white background. */
.pandactions-method-card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 22px 26px;
  height: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.pandactions-method-card fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.pandactions-method-card legend {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  width: auto;
  float: none;
}
.pandactions-method-card .form-check {
  margin-bottom: 8px;
}
.pandactions-method-card .form-check-input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.18rem;
  border: 1.5px solid #000000;
}
.pandactions-method-card .form-check-input:checked {
  background-color: #000000;
  border-color: #000000;
}
.pandactions-method-card .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.12);
  border-color: #000000;
}
.pandactions-method-card .form-check-label {
  margin-inline-start: 6px;
  color: #1a1a1a;
}

/* Pending state — applied by JS when the method list has no radios yet
   (user hasn't completed the prerequisite step: shipping needs a filled
   address; payment needs a chosen shipping method). The card dims so it
   reads as "waiting" rather than "empty / broken"; copy in the placeholder
   tells the user what to do next. Class auto-toggles on ajaxSuccess and
   on list mutation (see inline script in checkout.twig). */
.pandactions-method-card.is-pending {
  background: #fafafa;
  opacity: 0.65;
}
.pandactions-method-card.is-pending legend {
  color: #5a6470;
}
.pandactions-method-card.is-pending .text-muted {
  color: #5a6470 !important;
  font-size: 14px;
}

/* checkout — section title above the tab pair (e.g. "Delivery"). Plain h2
   with no border-bottom so we don't repeat the line that the form's <legend>
   inside #checkout-register would otherwise draw. */
.pandactions-checkout-section-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 14px;
  border: 0;
  padding: 0;
}

/* checkout — header tab pair ("Ship" active + "Login" link) replacing
   the default H1. Sits in a single rounded gray container; the active tab
   is a white card lifting above the rail, the inactive one is flat. */
.pandactions-checkout-tabs {
  display: flex;
  background: #f5f5f5;
  border-radius: 14px;
  padding: 8px;
  gap: 8px;
}
.pandactions-checkout-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  text-decoration: none;
  border-radius: 10px;
  transition: background-color 0.15s, box-shadow 0.15s;
  text-align: center;
}
.pandactions-checkout-tab i {
  font-size: 20px;
  color: #1a1a1a;
}
.pandactions-checkout-tab.is-active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: default;
}
.pandactions-checkout-tab:not(.is-active):hover {
  background: #ececec;
  color: #1a1a1a;
}

/* checkout — pandactions coupon card (inline, no accordion).
   Used by extension/pandactions/.../extension/opencart/checkout/coupon.twig
   which replaces the OC default coupon view via the theme's view-rewrite event.
   The form itself acts as the input "shell": single rounded outline, height 52px,
   the Apply button is inset on the right with its own smaller rounded corners. */
.pandactions-coupon-card {
  background: transparent;
}
.pandactions-coupon-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}
.pandactions-coupon-form {
  display: flex;
  align-items: stretch;
  height: 52px;
  border: 1px solid #e5e5e5;
  border-radius: 0.6rem;
  background: #ffffff;
  overflow: hidden;
}
.pandactions-coupon-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0 !important;
  outline: 0;
  background: transparent;
  padding: 0 18px;
  font-size: 15px;
  border-radius: 0;
  box-shadow: none !important;
}
.pandactions-coupon-input:focus {
  border: 0 !important;
  outline: 0;
  box-shadow: none !important;
}
.pandactions-coupon-apply {
  flex: 0 0 auto;
  margin: 5px;
  padding: 0 26px;
  background: #000000;
  color: #ffffff;
  border: 0;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.pandactions-coupon-apply:hover,
.pandactions-coupon-apply:focus {
  background: #1a1a1a;
  color: #ffffff;
}
.pandactions-coupon-remove {
  flex: 0 0 auto;
  margin: 5px 5px 5px 0;
  padding: 0 22px;
  background: #ffffff;
  color: #c0392b;
  border: 1px solid #c0392b;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}
.pandactions-coupon-remove:hover {
  background: #c0392b;
  color: #ffffff;
}

.pandactions-cart-empty { padding: 3rem 1rem; }

/* product / category / search pages — gap below the sticky header */
#product-info,
#product-category,
#product-search { padding-top: 35px; }

/* search page — heading + criteria card + Search button */
.pandactions-search-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1rem;
}
.pandactions-search-criteria { margin-bottom: 1.5rem; }
/* The pandactions-search-input class is reused on both the product search page
   and the header common/search box. Scope the bordered look to #product-search
   so the header instance — which is rendered inside `.pandactions-search-form`
   that already provides the outer pill shape — stays borderless. */
#product-search .pandactions-search-input {
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
  font-size: 14px;
}
#product-search .pandactions-search-input:focus {
  border-color: #1a1a1a;
  box-shadow: none;
  outline: none;
}
.pandactions-search-check { margin-bottom: 0.4rem; }
.pandactions-search-btn {
  display: inline-block;
  background: #1a1a1a;
  color: #ffffff;
  border: 0;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-top: 0.75rem;
}
.pandactions-search-btn:hover { background: #000000; color: #ffffff; }
.pandactions-search-results-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 1.5rem 0 1rem;
}

/* category filter sidebar — Filter heading + Reset, collapsible sections via <details> */
.pandactions-filter-aside { padding: 0 12px; }
.pandactions-filter {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.pandactions-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.pandactions-filter-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.pandactions-filter-reset {
  background: #1a1a1a;
  color: #ffffff;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pandactions-filter-reset:hover { background: #000000; color: #fff; }

.pandactions-filter-section {
  border-top: 1px solid #ececec;
  padding: 16px 0;
}
.pandactions-filter-section:first-of-type { border-top: 0; padding-top: 8px; }
.pandactions-filter-section[open] .pandactions-filter-summary { color: #000; }
.pandactions-filter-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
}
.pandactions-filter-summary::-webkit-details-marker { display: none; }
.pandactions-filter-summary::after {
  content: "\f078"; /* fa-chevron-down */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12px;
  color: #1a1a1a;
  transition: transform 0.2s;
}
.pandactions-filter-section[open] .pandactions-filter-summary::after {
  content: "\f077"; /* fa-chevron-up */
  color: #000;
}

.pandactions-filter-body {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pandactions-filter-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  margin: 0;
}
.pandactions-filter-link {
  display: block;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  padding: 4px 0;
}
.pandactions-filter-link:hover { color: #000; }

/* Categories tile — circular thumb + name + count pill (two-level flat list) */
.pandactions-filter-cats { gap: 10px; }
.pandactions-filter-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #1a1a1a;
  padding: 4px 0;
}
.pandactions-filter-cat:hover { color: #000; }
.pandactions-filter-cat-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #f5f5f5;
  flex-shrink: 0;
}
.pandactions-filter-cat-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}
.pandactions-filter-cat-count {
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  color: #666;
  background: #ffffff;
}
/* level-2 children: smaller thumb + indent */
.pandactions-filter-cat-l2 {
  padding-inline-start: 16px;
}
.pandactions-filter-cat-l2 .pandactions-filter-cat-thumb {
  width: 32px;
  height: 32px;
}
.pandactions-filter-cat-l2 .pandactions-filter-cat-name {
  font-size: 13px;
  color: #555;
}

/* dual-handle range slider — stacks two native ranges on top of each other */
.pandactions-filter-price-range {
  width: 100%;
  margin: 0;
}
.pandactions-filter-price-inputs {
  display: flex;
  gap: 16px;
  margin-top: 6px;
}
.pandactions-filter-price-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.pandactions-filter-price-prefix {
  color: #888;
  font-size: 18px;
  font-weight: 500;
}
.pandactions-filter-price-input {
  text-align: center;
  font-size: 16px;
}

/* category list toolbar — minimal flat icons + plain dropdowns */
.pandactions-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.pandactions-toolbar-left,
.pandactions-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.pandactions-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: #1a1a1a;
  padding: 6px 4px;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
.pandactions-toolbar-btn:hover { color: #000; }
.pandactions-toolbar-compare { font-size: 14px; }
.pandactions-toolbar-compare i { font-size: 14px; }
.pandactions-toolbar-select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #555;
}
.pandactions-toolbar-select label { margin: 0; font-weight: 400; }
.pandactions-toolbar-select select {
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  padding: 6px 28px 6px 12px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2'><path d='M3 6l5 5 5-5'/></svg>") no-repeat right 8px center / 14px;
  font-size: 14px;
  color: #1a1a1a;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  min-width: 120px;
}
.pandactions-toolbar-select select:focus { outline: 2px solid #000; outline-offset: 1px; }

/* product card (catalog grid) — image + heart corner + name/price/rating + qty/cart + footer links */
.pandactions-card {
  display: flex;
  flex-direction: column;
  height: 100%;            /* fill the .col so cards in a row stay aligned */
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ececec;
  transition: box-shadow 0.15s, transform 0.15s;
}
.pandactions-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
/* let card body grow so the footer (Buy Now / Compare) sticks to the bottom */
.pandactions-card-body { flex: 1 1 auto; }
.pandactions-card-footer { margin-top: auto; }

.pandactions-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f7f7f7;
  overflow: hidden;
}
.pandactions-card-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.pandactions-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the tile so thumbnails feel substantial */
  display: block;
}
.pandactions-card-wishlist {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #d8d8d8;
  background: #ffffff;
  color: #1a1a1a;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pandactions-card-wishlist:hover { color: #d94545; border-color: #d94545; }

.pandactions-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pandactions-card-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.pandactions-card-name a {
  color: #1a1a1a;
  text-decoration: none;
}
.pandactions-card-name a:hover { color: #000; }

/* price + rating each get their own line so cards line up regardless of
   special price / star fitment in the available card width */
.pandactions-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 26px;        /* reserve space so cards w/ + w/o price stay aligned */
}
.pandactions-card-price-new {
  color: #1a1a1a;
  font-weight: 700;
  font-size: 18px;
}
.pandactions-card-price-old {
  text-decoration: line-through;
  color: #999;
  font-size: 14px;
}
.pandactions-card-rating {
  font-size: 14px;
  color: #d8d8d8;
  letter-spacing: 1px;
  min-height: 18px;        /* reserve a row even if no rating yet */
  white-space: nowrap;
}
.pandactions-card-rating .fa-solid { color: #f0a500; }

.pandactions-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pandactions-card-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  padding: 0 4px;
  height: 42px;
  flex-shrink: 0;
}
.pandactions-card-qty-btn {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #1a1a1a;
  border-radius: 50%;
  cursor: pointer;
}
.pandactions-card-qty-btn:hover { background: #f1f1f1; }
.pandactions-card-qty-input {
  width: 32px;
  height: 28px;
  border: 0;
  text-align: center;
  background: transparent;
  outline: 0;
  font-size: 14px;
  font-weight: 600;
  -moz-appearance: textfield;
}
.pandactions-card-qty-input::-webkit-outer-spin-button,
.pandactions-card-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pandactions-card-btn-cart {
  flex: 1;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.pandactions-card-btn-cart:hover { background: #000000; }

.pandactions-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ececec;
  padding-top: 12px;
  font-size: 13px;
}
.pandactions-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
}
.pandactions-card-link-buy { color: #555; }
.pandactions-card-link-buy:hover { color: #1a1a1a; }
.pandactions-card-link-compare { color: #555; }
.pandactions-card-link-compare:hover { color: #1a1a1a; }

/* product page same-category related grid */
.pandactions-related-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 1.25rem;
}
.pandactions-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.pandactions-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid #ececec;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
  transition: box-shadow 0.15s, transform 0.15s;
}
.pandactions-related-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  color: inherit;
}
.pandactions-related-thumb {
  aspect-ratio: 1 / 1;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pandactions-related-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.pandactions-related-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #1a1a1a;
  padding: 12px 12px 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.pandactions-related-price {
  padding: 0 12px 12px;
  font-size: 15px;
}
.pandactions-related-old {
  text-decoration: line-through;
  color: #999;
  font-size: 13px;
  margin-inline-end: 6px;
}
.pandactions-related-new {
  color: #1a1a1a;
  font-weight: 700;
}

/* product review stats — big avg score, star row, distribution bars */
.pandactions-review-stats {
  max-width: 600px;
}
.pandactions-review-stats-summary {
  margin-bottom: 1rem;
}
.pandactions-review-avg {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: #1a1a1a;
  margin-bottom: 0.4rem;
}
.pandactions-review-stars {
  font-size: 24px;
  color: #4caf50;
  letter-spacing: 2px;
  margin-bottom: 0.4rem;
}
.pandactions-review-stars .fa-regular {
  color: #d8d8d8;
}
.pandactions-review-count {
  color: #555;
  font-size: 14px;
}
.pandactions-review-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pandactions-review-bar {
  display: grid;
  grid-template-columns: 38px 1fr 44px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.pandactions-review-bar-label {
  font-weight: 600;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pandactions-review-bar-label i { font-size: 13px; }
.pandactions-review-bar-track {
  background: #f0f0f0;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
.pandactions-review-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}
.pandactions-review-bar-pct {
  text-align: end;
  color: #555;
}
/* per-rating colors (star icon + bar fill) */
.pandactions-review-bar-5 .pandactions-review-bar-label i,
.pandactions-review-bar-5 .pandactions-review-bar-fill { color: #4caf50; background: #4caf50; }
.pandactions-review-bar-4 .pandactions-review-bar-label i,
.pandactions-review-bar-4 .pandactions-review-bar-fill { color: #8bc34a; background: #8bc34a; }
.pandactions-review-bar-3 .pandactions-review-bar-label i,
.pandactions-review-bar-3 .pandactions-review-bar-fill { color: #ffc107; background: #ffc107; }
.pandactions-review-bar-2 .pandactions-review-bar-label i,
.pandactions-review-bar-2 .pandactions-review-bar-fill { color: #ff9800; background: #ff9800; }
.pandactions-review-bar-1 .pandactions-review-bar-label i,
.pandactions-review-bar-1 .pandactions-review-bar-fill { color: #f44336; background: #f44336; }

/* product page review list — Amazon-style cards */
.pandactions-reviews {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 1.5rem;
}
.pandactions-review-item {
  border-bottom: 1px solid #ececec;
  padding-bottom: 18px;
}
/* row 1: avatar + author */
.pandactions-review-item-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pandactions-review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #d8d8d8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
  flex-shrink: 0;
}
.pandactions-review-item-author {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
}
/* row 2: stars + bold title */
.pandactions-review-item-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pandactions-review-item-stars {
  color: #f08804;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-flex;
  gap: 1px;
}
.pandactions-review-item-stars .fa-regular { color: #d8d8d8; }
.pandactions-review-item-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}
/* row 3: date */
.pandactions-review-item-date {
  font-size: 13px;
  color: #888;
  margin-bottom: 10px;
}
/* row 4: review body */
.pandactions-review-item-text {
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0;
  white-space: pre-line;
}

/* product page tabs — Description / Reviews labels */
#product-info .nav-tabs .nav-link {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

/* product page layout — 60/40 split between image gallery and info on desktop, stacked on mobile */
@media (min-width: 768px) {
  .pandactions-product-row > .pandactions-product-image {
    flex: 0 0 60%;
    max-width: 60%;
  }
  .pandactions-product-row > .pandactions-product-info {
    flex: 0 0 40%;
    max-width: 40%;
  }
}
/* Bootstrap 5 LTR-only CSS keeps .dropdown-menu anchored to the trigger's left
   edge via Popper. We disable Popper (data-bs-display="static" is added in JS)
   and anchor with logical CSS — inset-inline-start: 0 means LTR=left, RTL=right. */
.dropdown-menu {
  inset-inline-start: 0;
  inset-inline-end: auto;
}
.dropdown-menu-end {
  inset-inline-start: auto;
  inset-inline-end: 0;
}
[dir="rtl"] .dropdown-menu { text-align: right; }
[dir="rtl"] .dropdown-item { text-align: right; }

/* RTL: Bootstrap 5 LTR-only CSS doesn't mirror .btn-group corner radii or the
   negative margin that overlaps button borders. Fix both here. */
[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
  /* first button (visually on the right in RTL): round the right side */
  border-top-right-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
[dir="rtl"] .btn-group > .btn:not(:first-child) {
  /* last button (visually on the left in RTL): round the left side, overlap borders */
  border-top-left-radius: 0.375rem !important;
  border-bottom-left-radius: 0.375rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-left: 0 !important;
  margin-right: -1px !important;
}

/* product gallery — desktop: thumbs column on the left, main image on the right;
   mobile: main image on top, thumbs row below. Overflow is clipped so the list
   doesn't wrap onto multiple rows/columns; extra thumbnails are simply hidden. */
.pandactions-product-gallery {
  display: flex;
  gap: 12px;
  align-items: center; /* desktop: thumbs column centered vertically against the main image; mobile flex-direction is column-reverse so this also horizontally centers the thumbs row */
}
.pandactions-gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}
.pandactions-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a1a;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background-color 0.15s;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pandactions-gallery-main:hover .pandactions-gallery-nav,
.pandactions-gallery-nav:focus { opacity: 1; }
.pandactions-gallery-nav:hover { background: #ffffff; }
.pandactions-gallery-prev { inset-inline-start: 12px; }
.pandactions-gallery-next { inset-inline-end: 12px; }
/* RTL: keep "previous" pointing toward the start of reading order (right side in RTL)
   and "next" pointing the other way — flip the chevron glyphs horizontally. */
[dir="rtl"] .pandactions-gallery-nav i { transform: scaleX(-1); }
/* Touch devices: hover doesn't fire — show arrows persistently but dimmer */
@media (hover: none) {
  .pandactions-gallery-nav { opacity: 0.65; }
}
.pandactions-gallery-main img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  background: #fff;
}
@media (min-width: 768px) {
  .pandactions-gallery-main img {
    max-height: 600px;       /* clamp tall portraits on desktop, browser scales width to keep aspect ratio */
    width: auto;
  }
}
.pandactions-gallery-thumbs {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.pandactions-gallery-thumb {
  border: 1px solid #ececec;
  background: #fff;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pandactions-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pandactions-gallery-thumb:hover { border-color: #999; }
.pandactions-gallery-thumb.active {
  border-color: #cccccc;
  box-shadow: 0 0 0 1px #cccccc;
}

@media (min-width: 768px) {
  /* Desktop: thumbs are a single column to the left, main fills the rest */
  .pandactions-gallery-thumbs {
    flex-direction: column;
    width: 72px;
    max-height: 600px;       /* clips overflow vertically */
  }
}
@media (max-width: 767.98px) {
  /* Mobile: stack — main image on top, thumbs are a single horizontal row below */
  .pandactions-product-gallery {
    flex-direction: column-reverse;
  }
  .pandactions-gallery-thumbs {
    flex-direction: row;
    max-width: 100%;          /* clips overflow horizontally */
    justify-content: center;  /* center the thumbs row within its width */
  }
  .pandactions-product-image {
    margin-bottom: 20px;      /* gap between gallery and the info block below */
  }
}

/* product options — circular thumbnail tiles for radio options, ringed when selected */
.pandactions-options { margin-bottom: 1rem; }
.pandactions-option { margin-bottom: 1rem; }
.pandactions-option-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.6rem;
}
.pandactions-option-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.pandactions-option-tile-input {
  /* visually hidden but still accessible to keyboard / screen reader */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pandactions-option-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
  margin: 0;
  user-select: none;
}
.pandactions-option-tile-image {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.pandactions-option-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pandactions-option-tile-name {
  font-size: 14px;
  color: #1a1a1a;
  transition: font-weight 0.15s;
}
.pandactions-option-tile-price {
  font-size: 12px;
  color: #888;
}
.pandactions-option-tile:hover .pandactions-option-tile-image {
  border-color: #cccccc;
}
.pandactions-option-tile-input:checked + .pandactions-option-tile .pandactions-option-tile-image {
  border-color: #333333;
}
.pandactions-option-tile-input:checked + .pandactions-option-tile .pandactions-option-tile-name {
  font-weight: 700;
}
.pandactions-option-tile-input:focus-visible + .pandactions-option-tile .pandactions-option-tile-image {
  outline: 2px solid #4d90fe;
  outline-offset: 2px;
}

/* product cart actions — pill stepper + outline Add to Cart + filled Buy Now */
.pandactions-cart-actions .pandactions-cart-row {
  display: flex;
  gap: 10px;
}
.pandactions-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  height: 50px;
  padding: 0 4px;
  flex-shrink: 0;
}
.pandactions-qty-btn {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  font-size: 18px;
  color: #1a1a1a;
  border-radius: 50%;
  cursor: pointer;
}
.pandactions-qty-btn:hover { background: #f1f1f1; }
.pandactions-qty-input {
  width: 40px;
  height: 36px;
  border: 0;
  text-align: center;
  background: transparent;
  outline: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  -moz-appearance: textfield;
}
.pandactions-qty-input::-webkit-outer-spin-button,
.pandactions-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pandactions-btn {
  height: 50px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.pandactions-btn-outline {
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid #d0d0d0;
  flex-grow: 1;
}
.pandactions-btn-outline:hover { background: #f5f5f5; }
.pandactions-btn-primary {
  background: #0d1730;
  color: #ffffff;
  border: 1px solid #0d1730;
}
.pandactions-btn-primary:hover { background: #000000; color: #ffffff; }
.pandactions-btn-prime {
  background: #ff9900;
  color: #111111;
  border: 1px solid #ff9900;
}
.pandactions-btn-prime:hover { background: #f08804; border-color: #f08804; color: #111111; }
.pandactions-btn-noon {
  background: #feee00;
  color: #111111;
  border: 1px solid #feee00;
}
.pandactions-btn-noon:hover { background: #f0db00; border-color: #f0db00; color: #111111; }
.pandactions-btn[disabled], .pandactions-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* mobile: pin the entire cart-actions block to the bottom of the viewport */
@media (max-width: 767.98px) {
  .pandactions-cart-actions {
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: #ffffff;
    padding: 12px;
    border-top: 1px solid #ececec;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    z-index: 1020;
    margin-bottom: 0 !important;
  }
  /* Reserve space at the very bottom of the page so the fixed bar never covers
     real content (incl. footer). The class is added by a one-line script in
     product.twig — only the product page gets the extra padding. Sized to fit
     the worst case: stock-form (Add to Cart row + Buy Now) + Buy Prime + Buy on noon. */
  body.pandactions-has-fixed-cart {
    padding-bottom: 280px;
  }
}

/* contact us page — full-width map header + info column + form column */
.pandactions-contact-map {
  width: 100%;
  line-height: 0;
}
.pandactions-contact-map iframe {
  width: 100%;
  display: block;
}
.pandactions-contact-wrap {
  position: relative;
  z-index: 2;
  margin-top: -80px;
  margin-bottom: 60px;
}
.pandactions-contact-card {
  background: #f5f6f8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
.pandactions-contact-info {
  background: #f5f6f8;
  padding: 32px 28px;
}
.pandactions-contact-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.pandactions-contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d8d8d8;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 16px;
  flex-shrink: 0;
}
.pandactions-contact-icon-whatsapp {
  background: #25d366;
  border-color: #25d366;
  color: #ffffff;
}
.pandactions-contact-block-body { font-size: 14px; color: #333; }
.pandactions-contact-block-body h4 {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.pandactions-contact-divider {
  border-top: 1px solid #e0e0e0;
  margin: 20px 0;
}

.pandactions-contact-form-col {
  background: #ffffff;
  padding: 32px 32px;
}
.pandactions-contact-form-title {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 1.25rem;
}
.pandactions-contact-form { display: flex; flex-direction: column; gap: 1rem; }
.pandactions-contact-field { display: flex; flex-direction: column; gap: 6px; }
.pandactions-contact-field label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.pandactions-contact-required { color: #d94545; }
.pandactions-contact-field input,
.pandactions-contact-field select,
.pandactions-contact-field textarea {
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  background: #ffffff;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.pandactions-contact-field input:focus,
.pandactions-contact-field select:focus,
.pandactions-contact-field textarea:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(37, 82, 214, 0.12);
}
.pandactions-contact-field textarea { resize: vertical; min-height: 110px; }
.pandactions-contact-agree {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
}
.pandactions-contact-agree label { display: inline-flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.pandactions-contact-agree input[type="checkbox"] { margin-top: 3px; }
.pandactions-contact-submit {
  margin-top: 8px;
  height: 50px;
  border-radius: 999px;
  border: 0;
  background: #1a1a1a;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.pandactions-contact-submit:hover { background: #000000; }

@media (max-width: 991.98px) {
  .pandactions-contact-wrap { margin-top: -40px; }
  .pandactions-contact-info { padding: 24px 20px; }
  .pandactions-contact-form-col { padding: 24px 20px; }
}

/* home page hero — full-width auto-rotating banner */
.pandactions-hero {
  position: relative;
  width: 100%;
  height: 728px;
  overflow: hidden;
  background: #0d1730;
}
.pandactions-hero-track {
  position: absolute;
  inset: 0;
}
.pandactions-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pandactions-hero-slide.active { opacity: 1; pointer-events: auto; }
.pandactions-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.25));
}
.pandactions-hero-content {
  position: relative;
  text-align: center;
  color: #ffffff;
  padding: 0 1rem;
  z-index: 2;
  max-width: 900px;
}
.pandactions-hero-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.85);
  color: #1a1a1a;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 1rem;
}
.pandactions-hero-title {
  color: #ffffff;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 2rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.pandactions-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.pandactions-hero-btn {
  display: inline-block;
  background: #ffffff;
  color: #1a1a1a;
  padding: 14px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.pandactions-hero-btn:hover { background: #f1f1f1; color: #000; transform: translateY(-1px); }
.pandactions-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  text-decoration: underline;
  font-size: 15px;
  font-weight: 500;
}
.pandactions-hero-link:hover { color: #ffffff; opacity: 0.85; }
.pandactions-hero-link i { font-size: 18px; opacity: 0.95; }

/* dots — vertical, left side */
.pandactions-hero-dots {
  position: absolute;
  inset-inline-start: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
}
.pandactions-hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pandactions-hero-dot.active {
  background: #ffffff;
  border-color: #ffffff;
}

/* arrows — vertical, right side */
.pandactions-hero-arrows {
  position: absolute;
  inset-inline-end: 32px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
}
.pandactions-hero-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.85);
  color: #1a1a1a;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.pandactions-hero-arrow:hover { background: #ffffff; }

@media (max-width: 767.98px) {
  .pandactions-hero { height: 500px; }
  .pandactions-hero-dots { inset-inline-start: 16px; }
  .pandactions-hero-arrows { display: none; } /* arrows are unnecessary on mobile — dots + swipe-friendly auto-rotate */
}

/* home — New Arrivals split block (left CTA card, right product grid) */
.pandactions-newarrivals { width: 100%; margin-top: 40px; }
.pandactions-newarrivals-row { margin: 0; }
.pandactions-newarrivals-left,
.pandactions-newarrivals-right { padding: 0; }

.pandactions-newarrivals-left {
  position: relative;
  min-height: 380px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pandactions-newarrivals-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 1.5rem;
}
.pandactions-newarrivals-title {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.pandactions-newarrivals-btn {
  display: inline-block;
  background: #ffffff;
  color: #1a1a1a;
  padding: 12px 36px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.15s;
}
.pandactions-newarrivals-btn:hover { background: #f1f1f1; color: #000; }

.pandactions-newarrivals-right {
  background: #f7f7f7;
  padding: 32px 24px;
}

@media (min-width: 768px) {
  .pandactions-newarrivals-left {
    flex: 0 0 30%;
    max-width: 30%;
    min-height: 540px;
  }
  .pandactions-newarrivals-right {
    flex: 0 0 70%;
    max-width: 70%;
  }
}

/* home — Deals of the Week split block (left promo card + countdown, right 3 specials) */
.pandactions-deals { width: 100%; margin-top: 40px; }
.pandactions-deals-row { margin: 0; }
.pandactions-deals-left,
.pandactions-deals-right { padding: 0; }

.pandactions-deals-left {
  background: #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  min-height: 380px;
}
.pandactions-deals-card { text-align: center; max-width: 360px; width: 100%; }
.pandactions-deals-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f5f5f5;
  color: #1a1a1a;
  font-size: 22px;
  margin-bottom: 24px;
}
.pandactions-deals-title {
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  color: #1a1a1a;
  margin: 0 0 0.5rem;
}
.pandactions-deals-subtitle { color: #777; font-size: 14px; margin: 0 0 1.5rem; }
.pandactions-deals-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 320px;
  margin: 0 auto;
}
.pandactions-deals-cd-box {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 8px;
  padding: 10px 4px;
  text-align: center;
  min-width: 0;
}
.pandactions-deals-cd-box strong {
  display: block;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.1;
}
.pandactions-deals-cd-box span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.pandactions-deals-right { background: #f7f7f7; padding: 32px 24px; }

@media (min-width: 768px) {
  .pandactions-deals-left {
    flex: 0 0 30%;
    max-width: 30%;
    min-height: 540px;
  }
  .pandactions-deals-right {
    flex: 0 0 70%;
    max-width: 70%;
  }
}

/* home — Latest News (blog) section: container-width grid of article cards */
.pandactions-latest-news { padding: 60px 0; }
.pandactions-latest-news-heading { text-align: center; margin-bottom: 2rem; }
.pandactions-latest-news-eyebrow {
  display: block;
  font-family: serif;
  font-style: italic;
  color: #b9b9b9;
  font-size: 38px;
  line-height: 1;
  margin-bottom: -0.4em;
}
.pandactions-latest-news-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.pandactions-news-card { display: flex; flex-direction: column; height: 100%; }
.pandactions-news-thumb {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.pandactions-news-date {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  background: #f5e9d8;
  color: #1a1a1a;
  border-radius: 6px;
  padding: 4px 8px;
  text-align: center;
  line-height: 1.1;
  min-width: 42px;
}
.pandactions-news-date strong { display: block; font-size: 18px; font-weight: 700; }
.pandactions-news-date span { display: block; font-size: 11px; text-transform: uppercase; }
.pandactions-news-meta {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.pandactions-news-meta i { margin-inline-end: 4px; opacity: 0.85; }
.pandactions-news-card-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; line-height: 1.35; }
.pandactions-news-card-title a { color: #1a1a1a; text-decoration: none; }
.pandactions-news-card-title a:hover { color: #000; }
.pandactions-news-card-summary { color: #666; font-size: 14px; line-height: 1.55; margin: 0 0 12px; flex: 1 1 auto; }
.pandactions-news-card-link {
  color: #000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pandactions-news-card-link:hover { color: #1a1a1a; }
/* In RTL the chevron should point in the reading direction (← left). The
   template uses a fixed `fa-chevron-right` icon, so flip it horizontally
   instead of conditionally swapping the icon class. */
[dir="rtl"] .pandactions-news-card-link i { transform: scaleX(-1); }

/* blog article page — borderless 100% hero image (100% of the col-md-9 content
   column), right aside (3 tag-matched products), related-articles grid styled
   like the home Latest News block. The hero rule is scoped under `#content` to
   outrank the global `#content img { max-width:100%; height:auto }` rule
   (specificity 1,0,1) — we need an explicit `width:100%` because the article
   image is server-resized to a fixed pixel size that's often narrower than
   col-md-9 on wide desktops. */
#content img.pandactions-blog-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.pandactions-blog-aside {
  margin-bottom: 1.5rem;
}
.pandactions-blog-aside-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #1a1a1a;
}
.pandactions-blog-related-products {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pandactions-blog-related-articles-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #1a1a1a;
}

/* blog — Refine/Sort toolbar: search input + topic + Search button + sort,
   all on one line. Search button is black to match the storefront's primary
   action style on the blog page. */
.pandactions-btn-search {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
  color: #ffffff;
}
.pandactions-btn-search:hover,
.pandactions-btn-search:focus,
.pandactions-btn-search:active {
  background-color: #000000;
  border-color: #000000;
  color: #ffffff;
}

/* Desktop only: visually split the Sort By group from the Search group with
   ~100px gap. Bootstrap's `.input-group > :not(:first-child)…` rule sets
   `margin-left: -1px` and zeroes the left border-radius at specificity (0,7,0),
   so we use !important to override and add logical padding for RTL parity. */
@media (min-width: 992px) {
  .pandactions-blog-toolbar > label[for="input-sort"] {
    margin-left: 0 !important;
    margin-inline-start: 100px !important;
    border-start-start-radius: var(--bs-border-radius) !important;
    border-end-start-radius: var(--bs-border-radius) !important;
  }
  .pandactions-blog-toolbar > .pandactions-btn-search {
    border-start-end-radius: var(--bs-border-radius) !important;
    border-end-end-radius: var(--bs-border-radius) !important;
  }
}

/* footer — pandactions 5-col desktop / accordion mobile */
.pandactions-footer {
  background-color: #000;
  color: #c9cfdc;
  margin-top: 60px;
}
.pandactions-footer a {
  color: #c9cfdc;
  text-decoration: none;
  transition: color 0.15s ease;
}
.pandactions-footer a:hover {
  color: #ffffff;
}
.pandactions-footer-heading {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 1.25rem;
  text-align: start; /* LTR=left, RTL=right — keep heading aligned with the column items */
}
.pandactions-footer-list {
  padding-inline: 0; /* list-unstyled only clears padding-left; in RTL the inline-start padding is on the right and pushes items off the heading edge */
  margin-bottom: 0;
}
.pandactions-footer-list,
.pandactions-footer-list li,
.pandactions-footer-list a {
  text-align: start; /* force English items in an Arabic page to align right with their column */
}
/* explicit RTL fallback: ensures English entries in an Arabic-language page hug the right edge */
[dir="rtl"] .pandactions-footer-heading,
[dir="rtl"] .pandactions-footer-list,
[dir="rtl"] .pandactions-footer-list li,
[dir="rtl"] .pandactions-footer-list a,
[dir="rtl"] .pandactions-footer-tagline {
  text-align: right;
}
[dir="rtl"] .pandactions-footer-social {
  /* flex main axis flips in RTL row: flex-start = visual right. flex-end would push icons LEFT. */
  justify-content: flex-start;
}
[dir="rtl"] .pandactions-footer-accordion .accordion-button {
  text-align: right;
}
.pandactions-footer-list li {
  margin-bottom: 0.6rem;
  font-size: 14px;
}
.pandactions-footer-tagline {
  color: #8c93a3;
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}
.pandactions-footer-name {
  color: #ffffff !important;
  font-family: "Open Sans", sans-serif;
}
.pandactions-footer-logo {
  display: block;
  max-height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
.pandactions-footer-social {
  display: flex;
  gap: 10px;
}
.pandactions-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.06);
  color: #c9cfdc;
  font-size: 14px;
}
.pandactions-footer-social a:hover {
  background-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}
/* mobile accordion */
.pandactions-footer-accordion .accordion-item {
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pandactions-footer-accordion .accordion-button {
  background-color: transparent;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  padding: 1rem 0;
  box-shadow: none;
}
.pandactions-footer-accordion .accordion-button:focus {
  box-shadow: none;
}
.pandactions-footer-accordion .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #ffffff;
}
.pandactions-footer-accordion .accordion-button::after {
  /* swap chevron for plus / minus indicator */
  content: "+";
  background-image: none;
  width: auto;
  height: auto;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  transform: none;
  transition: transform 0.2s ease;
}
.pandactions-footer-accordion .accordion-button:not(.collapsed)::after {
  content: "\2212"; /* unicode minus */
  transform: none;
}
.pandactions-footer-accordion .accordion-body {
  padding: 0 0 1rem 0;
}
/* bottom strip with copyright + cards */
.pandactions-footer-bottom {
  background-color: #101010;
  color: #c9cfdc;
  font-size: 13px;
}
.pandactions-footer-copyright {
  font-size: 13px;
}
.pandactions-footer-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 30px;
  line-height: 1;
}
.pandactions-footer-cards i {
  display: inline-block;
  width: auto;                  /* natural per-icon width (cc-amex narrower than cc-mastercard etc.) */
  padding-inline-start: 0.1em;  /* small left buffer prevents amex's left edge from clipping out of its inline box */
  color: #ffffff;
}
@media (max-width: 575.98px) {
  .pandactions-footer-cards {
    font-size: 26px;
  }
}
/* breadcrumb — full-bleed gray bar, container-width content, black text, "/" divider.
   The first item is the home icon (`text_home` = `<i class="fas fa-home">`), and a
   "/" right after a bare icon reads oddly — we want "🏠 Category / Sub / Page", not
   "🏠 / Category / Sub / Page". So the divider rule targets only items that are
   neither the first nor the last; the home icon gets a plain margin instead.
   Mobile uses the exact same layout, just with `nowrap` + `overflow: hidden` so
   long paths don't push to a second line. */
.breadcrumb {
  margin: 0 0 40px 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background-color: var(--bs-tertiary-bg);
  box-shadow: 0 0 0 100vmax var(--bs-tertiary-bg);
  clip-path: inset(0 -100vmax);
  color: #000;
  align-items: center;
}
.breadcrumb i {
  font-size: 15px;
  color: #000;
  vertical-align: middle;
}
.breadcrumb > li.breadcrumb-item + li.breadcrumb-item {
  padding-left: 0;
}
.breadcrumb > li.breadcrumb-item + li::before {
  content: none;
}
.breadcrumb > li.breadcrumb-item {
  white-space: nowrap;
}
.breadcrumb > li.breadcrumb-item,
.breadcrumb > li.breadcrumb-item > a {
  color: #000;
  text-decoration: none;
}
.breadcrumb > li.breadcrumb-item > a:hover {
  color: #555;
}
/* Spacing after the home icon when followed by other items. */
.breadcrumb > li.breadcrumb-item:first-child:not(:last-child) {
  margin-inline-end: 10px;
}
/* "/" only between text items — never after the home icon, never trailing. */
.breadcrumb > li.breadcrumb-item:not(:first-child):not(:last-child)::after {
  content: "/";
  display: inline-block;
  margin: 0 10px;
  color: #000;
}

@media (max-width: 767.98px) {
  .breadcrumb {
    flex-wrap: nowrap;
    overflow: hidden;
  }
}
.product-thumb {
  border: 1px solid #ddd;
  position: relative;
  height: 100%;
}
.product-thumb .image {
  text-align: center;
}
.product-thumb .image a:hover {
  opacity: 0.8;
}
.product-thumb .description {
  padding: 15px;
  margin-bottom: 45px;
}
.product-thumb .description h4 {
  font-weight: bold;
}
.product-thumb .button {
  display: flex;
  position: absolute;
  width: 100%;
  bottom: 0;
}
.product-thumb .button button {
  width: 33.33%;
  border: none;
  border-top: 1px solid var(--bs-border-color);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-gray-600);
  line-height: 38px;
  text-align: center;
}
.product-thumb .button button:hover {
  color: var(--bs-gray-600);
  background-color: #ddd;
  text-decoration: none;
  cursor: pointer;
}
.product-thumb .button button + button {
  border-left: 1px solid var(--bs-border-color);
}
@media (min-width: 960px) {
  .product-list .product-thumb {
    display: flex;
  }
  .product-list .product-thumb .image {
    flex-direction: column;
    margin-bottom: 0px;
  }
  .product-list .product-thumb .content {
    flex-direction: column;
    flex: 75%;
    position: relative;
  }
  .product-list .product-thumb .button {
    border-left: 1px solid #ddd;
    width: calc(100% -  15px);
    margin-left: 15px;
  }
}
.rating .fa-stack {
  width: 20px;
}
.rating .fa-star {
  color: #999;
  font-size: 15px;
}
.rating .fa-star {
  color: #FC0;
  font-size: 15px;
}
.rating .fa-star + .fa-star {
  color: #E69500;
}
/* product list */
.price {
  color: #444;
}
.price-new {
  font-weight: 600;
}
.price-old {
  color: #dc512c;
  text-decoration: line-through;
}
.price-tax {
  color: #999;
  font-size: 12px;
  display: block;
}
/* blog */
.blog-thumb {
  border: 1px solid #ddd;
  margin-bottom: 15px;
}
.blog-thumb h4 {
  font-weight: bold;
}
.blog-thumb .image {
  text-align: center;
  margin-bottom: 15px;
}
.blog-thumb .image a:hover {
  opacity: 0.8;
}
.blog-thumb .description {
  padding: 15px;
}
/* Theme Custom CSS */
#cookie {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  z-index: 9999;
  opacity: 0.95;
  color: #ecf0f1;
  background: #343a40;
}
#cookie div {
  font-size: 16px;
  color: #FFFFFF;
}
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: min(1800px, calc(100% - 3rem));
  }
}

#content img {
  max-width: 100%;
  height: auto;
}
.section {
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #eaeaea;
}
.section_image {
	flex: 1;
	max-width: 50%;
  overflow: hidden;
}
.section_image img{
  width: 100%;
  height: auto;
}
.section_text {
	flex: 1;
	max-width: 50%;
	padding: 0 15px;
	line-height: 1.8;
}
.section-reverse {
	flex-direction: row-reverse;
	background-color: #ffffff;
}
@media screen and (max-width:767px) {
	.section {
		flex-direction: column;
		margin-bottom: 20px
	}
	.section_image,.section_text {
		max-width: 100%;
	}
	.section_image {
		margin-bottom: 16px
	}
}
.bosidin-container {
	flex-direction: column;
	gap: 20px;
}

.bosidin-container h3 {
	width: 100%;
	padding: 15px 0 0 0;
}

.bosidin-container p {
	width: 100%;
}

.bosidin-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.bosidin-row:nth-child(odd) .bosidin-text {
	order: 1;
}

.bosidin-row:nth-child(odd) .bosidin-image {
	order: 2;
}

.bosidin-row:nth-child(even) .bosidin-text {
	order: 2;
}

.bosidin-row:nth-child(even) .bosidin-image {
	order: 1;
}

.bosidin-text {
	flex: 1;
	padding: 10px;
}

.bosidin-image {
	flex: 1;
	max-width: 50%;
}

.bosidin-image img {
	width: 100%;
	height: auto;
}

.bosidin-half {
	width: 50%;
	padding: 20px 0;
	float: left;
}

.bosidin-fouty {
	width: 41.6666666667%;
	padding: 0  10px;
	float: left;
}

.bosidin-step {
	justify-content: center;
	align-items: center;
	width: 16.6666666667%;
	text-align: center;
	height: auto;
}

.bosidin-suit {
	justify-content: center;
	align-items: center;
	width: 16.6666666667%;
	text-align: center;
	height: auto;
	float: left;
}

.bosidin-suit h2 {
	margin-bottom: 0px;
}

.bosidin-hair {
	justify-content: center;
	align-items: center;
	width: 14.2857%;
	;
    text-align: center;
	height: auto;
	float: left;
}

.bosidin-hair h2 {
	margin-bottom: 0px;
}

@media (max-width: 768px) {
	.bosidin-row {
		flex-direction: column;
	}

	.bosidin-image {
		order: 1 !important;
		max-width: 100%;
	}

	.bosidin-row:nth-child(even) .bosidin-image {
		order: 1 !important;
	}

	.bosidin-text {
		order: 2 !important;
	}

	.bosidin-half {
		width: 100%;
		padding: 10px 0;
	}

	.bosidin-step {
		width: 100%;
	}

	.bosidin-fouty {
		width: 100%;
	}
}

.tab-content img {
	width: 100%;
	height: auto;
}

/* ---------- Local fonts: Noto Sans + Noto Sans Arabic (WOFF2, OFL) ---------- */
/* Browser picks per-glyph via unicode-range, so Arabic file only downloads on Arabic content */

@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/noto/noto-sans-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/noto/noto-sans-latin-700.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/noto/noto-sans-latin-ext-400.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/noto/noto-sans-latin-ext-700.woff2') format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Noto Sans Arabic';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/noto/noto-sans-arabic-400.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
	font-family: 'Noto Sans Arabic';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/noto/noto-sans-arabic-700.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* Base font stack — Noto Sans for Latin, Noto Sans Arabic for Arabic, system fallback otherwise */
body {
	font-family: 'Noto Sans', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* RTL pages — promote Arabic to first choice so Arabic UI gets proper hinting */
html[dir="rtl"] body,
[dir="rtl"] {
	font-family: 'Noto Sans Arabic', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* One-step checkout register form: hide field labels (placeholders carry the label).
   Uses sr-only/visually-hidden technique so screen readers still announce the field name. */
#form-register .form-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Taller input boxes for the checkout register form */
#form-register .form-control,
#form-register .form-select {
	height: 52px;
}

/* Checkout — "Pay Now" submit button. Replaces the active payment
   extension's default "Confirm Order" button. Full width, centered text,
   dark navy background per the brand spec. The wrapper resets text-align
   so any text-end alignment from the extension's own template doesn't
   shrink the button to its content width. */
.pandactions-pay-now-wrap {
	text-align: center;
	margin-top: 16px;
}
.pandactions-pay-now-btn,
.pandactions-pay-now-wrap .btn-primary {
	display: block;
	width: 100%;
	background: #232a2f;
	border: 1px solid #1c2330;
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
	padding: 14px 22px;
	border-radius: 10px;
	transition: background-color 0.15s, border-color 0.15s;
}
.pandactions-pay-now-btn:hover,
.pandactions-pay-now-btn:focus,
.pandactions-pay-now-wrap .btn-primary:hover,
.pandactions-pay-now-wrap .btn-primary:focus {
	background: #0f1623;
	border-color: #0f1623;
	color: #ffffff;
}
.pandactions-pay-now-btn:disabled,
.pandactions-pay-now-wrap .btn-primary:disabled {
	background: #1c2330;
	border-color: #1c2330;
	color: #ffffff;
	opacity: 0.55;
}

/* Stripe Payment Element wrapper card — matches the Shipping/Payment Method
   card visual style (white, rounded, soft shadow) so the checkout has a
   consistent rhythm. The Pay Now button lives outside this card (full-width
   dark-navy below), so internal padding-bottom can stay tight.

   Title intentionally has NO red underline — the user asked for a plain
   bold heading, not the Bootstrap-fieldset legend underline that the
   .pandactions-method-card cards inherit. We don't extend
   .pandactions-method-card here precisely so the legend underline rules
   from that block don't bleed through. */
.pandactions-payment-details-card {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 22px 26px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	/* Override the inherited text-align: center from the outer
	   `.pandactions-pay-now-wrap` so card content stays left-aligned
	   (and right-aligned in RTL). */
	text-align: start;
}
.pandactions-payment-details-title {
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	text-align: start;
	/* No bottom underline / accent line — keep the heading clean. */
}

/* Stripe.js renders its Payment Element inside an iframe. We don't need
   bottom margin on the wrapper any more (the card padding handles spacing),
   so override the previous mb-3 utility. */
#stripepanda-element {
	min-height: 40px;
}

/* Checkout confirm — Shopping Cart + Coupon + Totals merged into one card.
   Outer wrapper: white card with rounded corners + light shadow.
   Sections (cart table, coupon row, totals) are visually divided by thin
   horizontal lines so the merged content reads as a single ordered group. */
.pandactions-cart-card {
	background: #ffffff;
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 22px 26px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	margin-bottom: 20px;
}
.pandactions-cart-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 16px;
	border: 0;
	padding: 0;
}
.pandactions-cart-coupon {
	margin-top: 12px;
}
/* Coupon inside the cart card — strip the standalone card chrome (border,
   bg, padding, heading) so it sits flat as a single input + button row. */
.pandactions-cart-coupon .pandactions-coupon-card {
	border: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	margin: 0;
}
.pandactions-cart-coupon .pandactions-coupon-heading {
	display: none;
}
.pandactions-cart-totals {
	border-top: 1px solid #f0f0f0;
	padding-top: 12px;
	margin-top: 16px;
}
.pandactions-cart-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	color: #555;
	font-size: 15px;
}
.pandactions-cart-total-row.pandactions-cart-total-final {
	border-top: 1px solid #f0f0f0;
	margin-top: 6px;
	padding-top: 14px;
	color: #1a1a1a;
	font-size: 18px;
}
.pandactions-cart-total-row.pandactions-cart-total-final .pandactions-cart-total-label,
.pandactions-cart-total-row.pandactions-cart-total-final .pandactions-cart-total-value {
	font-weight: 700;
}
.pandactions-cart-total-value {
	font-weight: 600;
	color: #1a1a1a;
}
.pandactions-cart-table {
	border-collapse: separate;
	border-spacing: 0;
}
.pandactions-cart-table thead th {
	letter-spacing: 0.04em;
	font-weight: 700;
	padding: 14px 12px;
	border-bottom: 1px solid #eee;
}
.pandactions-cart-table tbody td {
	border-bottom: 1px solid #f0f0f0;
	padding: 16px 12px;
	vertical-align: middle;
}
/* Product name — clamp to 3 lines so a long title doesn't dominate the row;
   normal weight per design (the table header is the only bold thing now). */
.pandactions-cart-product-name {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: 400;
	line-height: 1.4;
	color: #1a1a1a;
}
.pandactions-cart-table tfoot td {
	padding: 10px 12px;
}
.pandactions-cart-image-cell {
	width: 76px;
	min-width: 76px;
}
/* #content prefix raises specificity above the global `#content img { max-width: 100%; height: auto }` rule.
   `max-width: none` is critical — without it, parent <a>/<td> in table auto-layout can shrink the image. */
#content img.pandactions-cart-thumb {
	width: 60px;
	height: 60px;
	max-width: none;
	object-fit: cover;
	border-radius: 4px;
	background: #f7f7f7;
}
.pandactions-cart-name-cell {
	width: auto;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.pandactions-cart-qty-cell {
	white-space: nowrap;
	width: 1%;
}
/* Checkout-page stepper: this markup uses Bootstrap `.input-group` so the
   inner `.btn-outline-secondary` buttons + `.form-control` input already
   draw the visible borders. The product-detail rule above (line ~1422) adds
   an outer pill-shaped border that becomes a redundant second outline here,
   so we strip it when both classes are present. */
.input-group.pandactions-qty-stepper {
	border: 0;
	border-radius: 0;
	padding: 0;
	height: auto;
	width: 130px;
}

/* RTL fix: Bootstrap's `.input-group` corner-collapse rules use physical
   properties (border-top-right-radius / border-top-left-radius) and don't
   auto-flip in RTL. Result: in Arabic the qty stepper's first child (visually
   on the right because flexbox reverses) keeps its left rounded corners but
   has its right corners collapsed — looks like the rounded side faces the
   inner gap instead of the outer edge. Re-flip the radii so the OUTER edge
   stays rounded in both directions. */
[dir="rtl"] .pandactions-qty-stepper:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
	border-top-right-radius: var(--bs-border-radius);
	border-bottom-right-radius: var(--bs-border-radius);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
[dir="rtl"] .pandactions-qty-stepper > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
	margin-left: 0;
	margin-right: calc(var(--bs-border-width) * -1);
	border-top-left-radius: var(--bs-border-radius);
	border-bottom-left-radius: var(--bs-border-radius);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* RTL fix: Bootstrap 5.3 form-check / form-switch use physical CSS
   (`padding-left`, `float: left`, `margin-left`), so under `[dir="rtl"]`
   the input stays on the LEFT and the label fills the RIGHT — opposite
   of the natural Arabic reading flow. Mirror them so the radio / switch
   sits at the start (= right) and the label at the end (= left). */
[dir="rtl"] .form-check {
	padding-left: 0;
	padding-right: 1.5em;
}
[dir="rtl"] .form-check .form-check-input {
	float: right;
	margin-left: 0;
	margin-right: -1.5em;
}
[dir="rtl"] .form-switch {
	padding-left: 0;
	padding-right: 2.5em;
}
[dir="rtl"] .form-switch .form-check-input {
	margin-left: 0;
	margin-right: -2.5em;
}
/* Switch knob position — Bootstrap puts the off-state dot at left and
   the on-state dot at right (background-position). In RTL we want the
   mirror so "off" is at start (right) and "on" travels to end (left). */
[dir="rtl"] .form-switch .form-check-input {
	background-position: right center;
}
[dir="rtl"] .form-switch .form-check-input:checked {
	background-position: left center;
}
/* form-check-reverse explicitly says "put input on the OPPOSITE side of
   the default". In RTL the default (form-check) is right, so reverse
   means left. We don't currently use form-check-reverse on the checkout
   page (the billing-match / newsletter switches are plain form-check),
   but flip it for completeness so future RTL forms behave correctly. */
[dir="rtl"] .form-check-reverse {
	padding-right: 0;
	padding-left: 1.5em;
	text-align: left;
}
[dir="rtl"] .form-check-reverse .form-check-input {
	float: left;
	margin-right: 0;
	margin-left: -1.5em;
}
[dir="rtl"] .form-switch.form-check-reverse {
	padding-left: 2.5em;
	padding-right: 0;
}
[dir="rtl"] .form-switch.form-check-reverse .form-check-input {
	margin-right: 0;
	margin-left: -2.5em;
}
.pandactions-qty-stepper .pandactions-qty-input {
	-moz-appearance: textfield;
	min-width: 48px;
	flex: 1 1 auto;
	padding-left: 4px;
	padding-right: 4px;
}
.pandactions-qty-stepper .pandactions-qty-input::-webkit-outer-spin-button,
.pandactions-qty-stepper .pandactions-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.pandactions-cart-price-cell,
.pandactions-cart-total-cell {
	white-space: nowrap;
	font-weight: 400;
}
/* Qty stepper input — only top + bottom border so it visually bridges the
   `-` and `+` buttons (designs don't want a 4-sided box around the number). */
.pandactions-cart-qty-cell .pandactions-qty-input {
	border-top: 1px solid #d0d0d0 !important;
	border-bottom: 1px solid #d0d0d0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-radius: 0 !important;
	background: #ffffff;
}
.pandactions-cart-qty-cell .pandactions-qty-input:focus {
	box-shadow: none !important;
	border-top-color: #1a1a1a !important;
	border-bottom-color: #1a1a1a !important;
}
.pandactions-qty-remove {
	font-size: 18px;
	line-height: 1;
}
#checkout-checkout{
  max-width: 1280px;
  padding-top: 40px;
}