/* =============================================================
   modern.css v2 — 2026 visual refresh for strikeball.lt
   Loads AFTER stylesheet.css. Override-only.
   ----------------------------------------------------------------
   v2 changes (2026-06-13):
   - FIX: cart popup was hiding behind slideshow/menu on desktop
     after v1 (caused by v1's header vignette stacking context).
     Removed the vignette; added header z-index instead.
   - NEW: Left-sidebar (Column Left) styling for category list,
     to match modern "sidebar-with-content" storefront pattern.
     Enable via Admin → Design → Layouts → Home → add the
     "Category" module to Column Left position. The slideshow
     auto-shrinks to col-sm-9 because home.twig already handles
     that conditional class switch.
   - Slideshow gets rounded corners + soft shadow.
   ============================================================= */

/* --- Design tokens --------------------------------------------- */
:root {
  --sb-bg:           #f3f2ec;
  --sb-surface:      #ffffff;
  --sb-surface-2:    #faf9f5;
  --sb-border:       #e6e3d8;
  --sb-border-soft:  #efedde;
  --sb-text:         #1a1a1a;
  --sb-text-2:       #5a5a55;
  --sb-text-3:       #8a8a82;
  --sb-olive:        #74825c;
  --sb-olive-hover:  #5e6a4a;
  --sb-olive-soft:   #e7ebde;
  --sb-dark:         #1f1f1f;
  --sb-red:          #d62b3f;
  --sb-green:        #4f7a45;
  --sb-amber:        #c4842c;
  --sb-gold:         #e4a200;

  --sb-radius-sm:    8px;
  --sb-radius-md:    12px;
  --sb-radius-lg:    18px;
  --sb-radius-pill:  9999px;

  --sb-shadow-sm:    0 1px 2px rgba(20,20,20,0.04), 0 1px 1px rgba(20,20,20,0.03);
  --sb-shadow-md:    0 2px 4px rgba(20,20,20,0.04), 0 6px 16px rgba(20,20,20,0.06);
  --sb-shadow-lg:    0 4px 8px rgba(20,20,20,0.05), 0 16px 32px rgba(20,20,20,0.10);

  --sb-ease:         cubic-bezier(.2,.7,.2,1);
}

/* --- Page background ------------------------------------------- */
body {
  background: var(--sb-bg);
  color: var(--sb-text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sb-text); transition: color .15s var(--sb-ease); }
a:hover, a:focus { color: var(--sb-olive-hover); }

hr { border-color: var(--sb-border) !important; }
.swiper-viewport { background: var(--sb-bg); }

/* --- Typography polish ----------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--sb-text); }
h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 24px; line-height: 1.25; }
h3 { font-size: 19px; line-height: 1.3; }

/* Section title "linetitle" */
.linetitle {
  text-align: center;
  margin: 28px 0 24px;
  position: relative;
  border-bottom: none !important;
}
.linetitle span {
  background: transparent !important;
  padding: 0 !important;
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-size: 22px;
  color: var(--sb-text);
  position: relative;
  padding-bottom: 10px !important;
}
.linetitle span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--sb-olive);
  border-radius: 2px;
}

/* --- Rounded everything ---------------------------------------- */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
.input-group .form-control:first-child,
.input-group .form-control:last-child,
.input-group-addon:first-child,
.input-group-addon:last-child,
.input-group-btn:first-child > .btn,
.input-group-btn:last-child > .btn,
.thumbnail,
.img-thumbnail,
.panel,
.well,
.dropdown-menu,
.list-group-item:first-child,
.list-group-item:last-child,
.nav-tabs > li > a,
.navbar,
.btn-link {
  border-radius: var(--sb-radius-sm) !important;
}

.form-control {
  border: 1px solid var(--sb-border);
  background: var(--sb-surface);
  padding: 10px 14px;
  height: auto;
  min-height: 40px;
  box-shadow: none;
  transition: border-color .15s var(--sb-ease), box-shadow .15s var(--sb-ease);
}
.form-control:focus {
  border-color: var(--sb-olive);
  box-shadow: 0 0 0 3px rgba(116, 130, 92, 0.18) !important;
  outline: none;
}

/* --- Buttons --------------------------------------------------- */
.btn {
  border-radius: var(--sb-radius-sm);
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 9px 18px;
  transition: background-color .15s var(--sb-ease),
              border-color   .15s var(--sb-ease),
              color          .15s var(--sb-ease),
              transform      .15s var(--sb-ease),
              box-shadow     .15s var(--sb-ease);
  box-shadow: var(--sb-shadow-sm);
}
.btn:focus,
.btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(116, 130, 92, 0.30) !important;
}

.btn-primary,
.btn-default {
  background-color: var(--sb-olive) !important;
  border-color: var(--sb-olive) !important;
  color: #fff !important;
  text-transform: uppercase;
}
.btn-primary:hover,
.btn-default:hover {
  background-color: var(--sb-olive-hover) !important;
  border-color: var(--sb-olive-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--sb-shadow-md);
}
.btn-primary:active,
.btn-default:active {
  transform: translateY(0);
  box-shadow: var(--sb-shadow-sm);
}

.btn-lg {
  padding: 14px 26px;
  font-size: 15px;
  border-radius: var(--sb-radius-md);
}

.cart-flat-btn {
  background: var(--sb-olive) !important;
  border: none !important;
  color: #fff !important;
  border-radius: var(--sb-radius-md) !important;
  padding: 11px 22px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: var(--sb-shadow-sm) !important;
  transition: all .2s var(--sb-ease) !important;
}
.cart-flat-btn:hover {
  background: var(--sb-olive-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md) !important;
}
.cart-flat-btn:active { transform: translateY(0); }
.cart-flat-btn .fa { font-size: 16px; }

.cart-flat-btn[disabled],
.cart-flat-btn.disabled,
button.cart-flat-btn:disabled {
  background: #b8b8b3 !important;
  color: #fff !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none !important;
}

/* --- Header: simple z-index, no vignette (FIX for cart popup) --- */
header {
  position: relative;
  z-index: 50;
  box-shadow: var(--sb-shadow-sm);
}
#cart .dropdown-menu { z-index: 1100 !important; }

/* Search bar — in OC3, #search IS the .input-group. Apply the pill
   styling directly to #search. Inner input + button are flat,
   clipped by overflow:hidden into the pill shape. */
#search {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  border-radius: var(--sb-radius-pill) !important;
  overflow: hidden !important;
  background-color: rgba(0,0,0,0.55) !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35),
              0 6px 18px rgba(0,0,0,0.35) !important;
  display: flex !important;
  align-items: stretch !important;
}
/* Defensive: if a theme variant wraps an inner .input-group, neutralize
   any borders/radii on it so it doesn't draw a second outline */
#search .input-group {
  border-radius: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: flex !important;
  flex: 1 1 auto;
  width: 100%;
}
#search .form-control,
#search .input-lg {
  background-color: transparent !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 44px !important;
  min-height: 0 !important;
  padding: 0 20px !important;
  font-size: 14px !important;
  flex: 1 1 auto;
}
#search .form-control::placeholder { color: rgba(255,255,255,0.85) !important; }
#search .form-control::-webkit-input-placeholder { color: rgba(255,255,255,0.85) !important; }
#search .form-control:-ms-input-placeholder { color: rgba(255,255,255,0.85) !important; }
#search .form-control:focus {
  background-color: rgba(0,0,0,0.35) !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
#search .input-group-btn {
  display: flex !important;
  width: auto !important;
  vertical-align: middle;
}
#search .btn-default,
#search .btn-lg,
#search .input-group-btn .btn,
#search button.btn {
  background: var(--sb-olive) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 0 !important;
  height: 44px !important;
  padding: 0 24px !important;
  box-shadow: none !important;
  margin: 0 !important;
  transform: none !important;
}
#search .btn-default:hover,
#search .btn-lg:hover,
#search .input-group-btn .btn:hover,
#search button.btn:hover {
  background: var(--sb-olive-hover) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Account button only — scoped to DIRECT children of .btn-group so cart
   popup descendants don't inherit this translucent style. */
#l-nav > .btn-group > .btn,
#l-nav > .btn-group > button.btn {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--sb-radius-pill) !important;
  padding: 8px 14px !important;
  transition: background-color .15s var(--sb-ease), border-color .15s var(--sb-ease);
}
#l-nav > .btn-group > .btn:hover,
#l-nav > .btn-group > button.btn:hover {
  background: rgba(0,0,0,0.45) !important;
  border-color: rgba(255,255,255,0.30) !important;
}

/* --- Cart toggle bubble: solid olive, same family as search btn + 
   add-to-cart. Slightly muted (88% alpha) but proper size. */
#cart > .btn,
#cart > .btn-group > .btn,
#cart > button.btn,
#cart > .btn-group > button.btn,
#cart .dropdown-toggle:not(.cart-close-btn):not(.list-group-item) {
  background: rgba(116, 130, 92, 0.88) !important;
  background-color: rgba(116, 130, 92, 0.88) !important;
  color: #fff !important;
  border: 1px solid rgba(116, 130, 92, 0.88) !important;
  border-radius: var(--sb-radius-pill) !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
  transition: background-color .15s var(--sb-ease),
              box-shadow .15s var(--sb-ease),
              transform .15s var(--sb-ease) !important;
  text-shadow: none !important;
  line-height: 1.3 !important;
}
#cart > .btn:hover,
#cart > .btn-group > .btn:hover,
#cart > button.btn:hover,
#cart .dropdown-toggle:not(.cart-close-btn):not(.list-group-item):hover {
  background: var(--sb-olive-hover) !important;
  background-color: var(--sb-olive-hover) !important;
  border-color: var(--sb-olive-hover) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.20) !important;
  transform: translateY(-1px);
}
#cart > .btn i,
#cart > .btn-group > .btn i,
#cart .dropdown-toggle i,
#cart > .btn span,
#cart > .btn-group > .btn span,
#cart .dropdown-toggle span { color: #fff !important; }
#cart > .btn i,
#cart > .btn-group > .btn i,
#cart .dropdown-toggle i { font-size: 15px !important; margin-right: 6px; }

/* --- Top-right "Log in / Prisijungti" pill (replaced fa-user icon) --- */
#top-links .top-account > .dropdown-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 6px 16px !important;
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  border-radius: var(--sb-radius-pill) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  transition: background-color .15s var(--sb-ease), border-color .15s var(--sb-ease) !important;
  line-height: 1.3;
  white-space: nowrap;
}
#top-links .top-account > .dropdown-toggle:hover,
#top-links .top-account.open > .dropdown-toggle {
  background: rgba(0,0,0,0.45) !important;
  border-color: rgba(255,255,255,0.50) !important;
  color: #fff !important;
}
#top-links .top-account .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  margin-top: 6px;
  min-width: 180px;
  background: #fff !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: var(--sb-radius-md) !important;
  box-shadow: var(--sb-shadow-md) !important;
  padding: 6px !important;
}
/* Force explicit readable styling on the dropdown items — overrides
   the inherited white-text from #top-links and any text-shadow the
   theme's original CSS adds. */
#top-links .top-account .dropdown-menu > li > a,
#top-links .top-account .dropdown-menu a {
  display: block;
  color: var(--sb-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  text-shadow: none !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 9px 14px !important;
  border-radius: var(--sb-radius-sm) !important;
  line-height: 1.4 !important;
  transition: background-color .12s var(--sb-ease), color .12s var(--sb-ease) !important;
}
#top-links .top-account .dropdown-menu > li > a:hover,
#top-links .top-account .dropdown-menu > li > a:focus,
#top-links .top-account .dropdown-menu a:hover,
#top-links .top-account .dropdown-menu a:focus {
  background: var(--sb-olive-soft) !important;
  background-color: var(--sb-olive-soft) !important;
  color: var(--sb-text) !important;
  text-shadow: none !important;
  text-decoration: none !important;
}

/* --- Align logo + search + cart on one horizontal centerline (lg+) --- */
@media (min-width: 992px) {
  header .container > .row.mt-4 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
  }
  #l-nav {
    text-align: right;
  }
  #l-nav #cart,
  #l-nav > #cart {
    display: inline-block !important;
    float: none !important;
  }
}
.c-fa-h { font-size: 20px !important; }

#top { padding: 6px 0; }
#top-links a:hover { background-color: transparent !important; }

/* --- Desktop nav menu (#menu) ---------------------------------- */
@media (min-width: 768px) {
  #menu {
    box-shadow: var(--sb-shadow-sm);
  }
  #menu .nav > li > a {
    padding: 14px 18px !important;
    transition: background-color .15s var(--sb-ease), color .15s var(--sb-ease);
    position: relative;
  }
  #menu .nav > li > a::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: 6px;
    height: 2px;
    background: var(--sb-olive);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s var(--sb-ease);
  }
  #menu .nav > li > a:hover,
  #menu .nav > li.open > a {
    background-color: rgba(255,255,255,0.05) !important;
  }
  #menu .nav > li > a:hover::after,
  #menu .nav > li.open > a::after {
    transform: scaleX(1);
  }
}
#menu .dropdown-menu {
  border-radius: var(--sb-radius-md) !important;
  box-shadow: var(--sb-shadow-lg) !important;
  border: 1px solid var(--sb-border) !important;
  padding: 8px !important;
  margin-top: 0 !important;
}
/* Invisible hover-bridge above the dropdown so the menu stays open
   when the cursor moves from the parent menu item into the dropdown.
   The 4px we used to have as margin-top was a "dead zone" — cursor
   crossing it lost hover on both elements and closed the dropdown. */
@media (min-width: 992px) {
  #menu .dropdown > .dropdown-menu {
    position: absolute;
  }
  #menu .dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
  }
}
#menu .dropdown-inner a {
  border-radius: var(--sb-radius-sm);
  transition: background-color .12s var(--sb-ease);
}
#menu .dropdown-inner a:hover {
  background-color: var(--sb-olive-soft) !important;
  color: var(--sb-text) !important;
}
#menu .see-all {
  border-radius: var(--sb-radius-sm) !important;
  background: var(--sb-olive-soft) !important;
  margin-top: 6px;
}
#menu .see-all:hover {
  background: var(--sb-olive) !important;
  color: #fff !important;
}

/* ============================================================
   MOBILE menu dropdown (the dark full-width category list)
   - Fix the bright "Rodyti viską" / "Show all" button so it
     blends with the dark dropdown background
   - Add subtle separator lines between subcategory items
   ============================================================ */
@media (max-width: 991px) {
  #menu .see-all,
  #menu a.see-all {
    background: rgba(116, 130, 92, 0.18) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 0 !important;
    margin: 8px 0 !important;
    padding: 13px 16px !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    display: block;
  }
  #menu .see-all:hover,
  #menu .see-all:focus,
  #menu .see-all:active,
  #menu a.see-all:hover {
    background: var(--sb-olive) !important;
    color: #fff !important;
  }

  /* Subtle dividers between subcategory items */
  #menu .dropdown-inner ul li,
  #menu .dropdown-inner > ul > li,
  #menu .dropdown-menu li:not(.dropdown-header):not(.divider) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  #menu .dropdown-inner ul li:last-child,
  #menu .dropdown-inner > ul > li:last-child {
    border-bottom: none;
  }

  /* Tap / press-and-hold color on subcategory links — was using
     --sb-olive-soft (bright cream) from the desktop hover rule, which
     looked jarring against the dark mobile dropdown. Switch to a
     translucent olive that matches the theme. */
  #menu .dropdown-inner a:hover,
  #menu .dropdown-inner a:focus,
  #menu .dropdown-inner a:active,
  #menu .dropdown-menu li > a:hover,
  #menu .dropdown-menu li > a:focus,
  #menu .dropdown-menu li > a:active {
    background-color: rgba(116, 130, 92, 0.22) !important;
    color: #fff !important;
  }
  /* Also tame the system tap-highlight that flashes briefly on touch */
  #menu a,
  #menu .dropdown-menu a {
    -webkit-tap-highlight-color: rgba(116, 130, 92, 0.30);
  }
}

/* ============================================================
   DESKTOP dropdown — subcategories flow into columns of 3 items.
   Item 1-3 stack vertically in column 1, items 4-6 start column 2,
   etc. The dropdown menu auto-widens to fit all columns; the
   "See all" link stays a full-width row underneath.
   ============================================================ */
@media (min-width: 992px) {
  /* Force the dropdown to size to its content. Some inherited rule
     (probably a Bootstrap or theme default we can't see directly) was
     keeping it narrower than the grid needs, causing the 4th column to
     render outside the visible dropdown background. width: max-content
     tells the browser explicitly: be as wide as the grid demands. */
  #menu .dropdown-menu {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 92vw !important;
    padding: 10px !important;
  }
  /* Grid each subcategory <ul> into 3-row columns flowing horizontally.
     max-content lets each column grow to fit its longest item. */
  #menu .dropdown-inner > ul,
  #menu .dropdown-inner ul.list-unstyled {
    display: grid !important;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, max-content);
    column-gap: 28px;
    row-gap: 2px;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* If there are multiple <ul> (OC batch mode), let them sit side by side */
  #menu .dropdown-inner {
    display: flex !important;
    gap: 24px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
  }
  #menu .dropdown-inner > ul {
    flex: 0 0 auto;
  }
  /* Critical fix for hover-bg overshoot on rightmost column: clip each
     <li> cell with the same rounded radius as the hover pill. The theme's
     <a> element extends slightly past its parent <li> (probably via
     padding wider than the cell would naturally allow). Without this,
     that overshoot leaks out the right side of the dropdown. With it,
     the hover pill is cleanly trimmed at the cell's edge — and since the
     <li> has matching border-radius, visually it looks identical to a
     standalone rounded pill. The dropdown's overall layout is untouched. */
  #menu .dropdown-inner > ul > li,
  #menu .dropdown-inner ul li {
    overflow: hidden;
    border-radius: var(--sb-radius-sm);
    min-width: 0;
  }
  /* Bump subcategory text slightly larger on desktop (mobile keeps its
     existing size — that block lives in the max-width: 991px rules). */
  #menu .dropdown-inner > ul > li > a,
  #menu .dropdown-inner ul.list-unstyled li a {
    font-size: 14px !important;
  }
}

/* =============================================================
   LEFT SIDEBAR (Column Left) — AirsoftPro-style category list
   To activate: Admin → Design → Layouts → "Home" → add the
   "Category" module at position "Column Left". The slideshow
   auto-shrinks to col-sm-9 (home.twig already handles this).
   Same setup works on category/product/search/special pages —
   just add the module to their layouts too.
   ============================================================= */
#column-left {
  margin-top: 6px;
  margin-bottom: 28px;
}
#column-left .list-group,
#column-left .panel,
#column-left > .box,
#column-left > div {
  border-radius: var(--sb-radius-md) !important;
  box-shadow: var(--sb-shadow-md);
  overflow: hidden;
  border: 1px solid var(--sb-border) !important;
  background: var(--sb-surface);
  margin-bottom: 22px;
}
/* The heading bar above the category list */
#column-left .panel-heading,
#column-left h4.panel-title,
#column-left > h3,
#column-left > div > h3:first-child {
  background: var(--sb-olive) !important;
  color: #fff !important;
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 1.4px !important;
  font-size: 15px !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  border: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
/* Each category row */
#column-left .list-group a,
#column-left .list-group-item {
  display: block;
  border: none !important;
  border-bottom: 1px solid var(--sb-border-soft) !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  padding: 13px 18px !important;
  color: var(--sb-text) !important;
  background: var(--sb-surface) !important;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background-color .15s var(--sb-ease),
              padding-left   .15s var(--sb-ease),
              border-left-color .15s var(--sb-ease),
              color .15s var(--sb-ease);
}
#column-left .list-group a:last-child,
#column-left .list-group-item:last-child {
  border-bottom: none !important;
}
#column-left .list-group a:hover,
#column-left .list-group-item:hover {
  background: var(--sb-olive-soft) !important;
  color: var(--sb-text) !important;
  padding-left: 22px !important;
  border-left-color: var(--sb-olive) !important;
  text-decoration: none;
}
#column-left .list-group a.active,
#column-left .list-group-item.active {
  background: var(--sb-olive-soft) !important;
  color: var(--sb-text) !important;
  font-weight: 600;
  border-left-color: var(--sb-olive) !important;
  padding-left: 15px !important;
}
/* Subcategories indent */
#column-left .list-group .list-group-item .list-group-item,
#column-left .list-group a + .list-group {
  padding-left: 28px !important;
  font-size: 13px;
  background: var(--sb-surface-2) !important;
  font-weight: 400;
}

/* Same treatment if column_right is ever used */
#column-right { margin-top: 6px; }
#column-right .list-group,
#column-right .panel {
  border-radius: var(--sb-radius-md) !important;
  box-shadow: var(--sb-shadow-md);
  overflow: hidden;
  border: 1px solid var(--sb-border) !important;
  background: var(--sb-surface);
  margin-bottom: 22px;
}

/* --- Slideshow / Carousel polish ------------------------------- */
.swiper-viewport,
#slideshow0,
[id^="slideshow"] {
  border-radius: var(--sb-radius-md) !important;
  overflow: hidden;
  box-shadow: var(--sb-shadow-md);
  margin-bottom: 30px !important;
}
.swiper-pagination-bullet {
  background: #fff !important;
  opacity: 0.5 !important;
  width: 10px !important;
  height: 10px !important;
}
.swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: var(--sb-olive) !important;
  width: 28px !important;
  border-radius: 5px !important;
  transition: width .2s var(--sb-ease);
}

/* --- Product cards --------------------------------------------- */
.product-thumb {
  background-color: var(--sb-surface) !important;
  border: 1px solid var(--sb-border-soft) !important;
  border-radius: var(--sb-radius-md) !important;
  overflow: hidden;
  padding-bottom: 16px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--sb-shadow-sm);
  transition: transform .25s var(--sb-ease),
              box-shadow .25s var(--sb-ease),
              border-color .25s var(--sb-ease) !important;
}
.product-thumb:hover {
  transform: translateY(-4px);
  box-shadow: var(--sb-shadow-lg);
  border-color: var(--sb-border) !important;
}
.product-thumb .image {
  overflow: hidden;
  margin: 0 !important;
  background: var(--sb-surface-2);
}
.product-thumb .image img {
  transition: transform .4s var(--sb-ease);
}
.product-thumb:hover .image img {
  transform: scale(1.04);
}
.product-thumb .image a:hover {
  opacity: 1 !important;
}
.product-thumb .caption {
  padding: 16px 16px 0 !important;
}
.product-thumb .caption h4,
.product-thumb .caption h4 a {
  font-size: 15px !important;
  line-height: 1.35 !important;
  color: var(--sb-text) !important;
}
.product-thumb .caption h4 a:hover { color: var(--sb-olive-hover) !important; }

.product-thumb .button-group {
  background: transparent !important;
  border-top: none !important;
}

/* --- Prices ---------------------------------------------------- */
.product-thumb .price {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--sb-text) !important;
  margin: 6px 0;
}
.product-thumb .price-new {
  background: transparent !important;
  color: var(--sb-red) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  padding: 0 !important;
  margin-right: 8px;
}
.product-thumb .price-old {
  color: var(--sb-text-3) !important;
  font-weight: 500 !important;
  font-size: 14px;
  margin-left: 0 !important;
}
.product-thumb .price-tax {
  color: var(--sb-text-3) !important;
  font-size: 11px;
  letter-spacing: 0.2px;
  margin-top: 4px;
}

#product-product .price,
#product-product h2.price {
  font-size: 28px;
  font-weight: 700;
  color: var(--sb-text);
}
#product-product .price-new {
  color: var(--sb-red);
  background: transparent !important;
  padding: 0 !important;
  font-weight: 700;
}
#product-product .price-old {
  color: var(--sb-text-3);
  font-weight: 500;
}

/* --- Stock status badges --------------------------------------- */
.product-thumb .stock-badge,
.product-thumb [class*="badge-stock"],
.product-thumb .badge-instock,
.product-thumb .badge-soldout,
.product-thumb .badge-preorder {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--sb-radius-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.product-thumb .badge-instock { background: var(--sb-green); color: #fff; }
.product-thumb .badge-soldout { background: #6c6c66; color: #fff; }
.product-thumb .badge-preorder { background: var(--sb-amber); color: #fff; }

/* --- Star ratings ---------------------------------------------- */
.rating .fa-stack { font-size: 10px; margin-right: 1px; }
.rating .fa-star-o { color: #d4d2c4; font-size: 18px; }
.rating .fa-star { color: var(--sb-gold); font-size: 18px; }
.rating .fa-star + .fa-star-o { color: #d4d2c4; }
.product-thumb .rating { padding-bottom: 4px; }

/* --- Tabs ------------------------------------------------------ */
.nav-tabs {
  border-bottom: 1px solid var(--sb-border);
}
.nav-tabs > li > a {
  border-radius: var(--sb-radius-sm) var(--sb-radius-sm) 0 0 !important;
  border: 1px solid transparent !important;
  color: var(--sb-text-2) !important;
  padding: 10px 18px !important;
  margin-right: 2px;
  background: transparent;
  transition: background-color .15s var(--sb-ease), color .15s var(--sb-ease);
}
.nav-tabs > li > a:hover {
  background: var(--sb-olive-soft) !important;
  color: var(--sb-text) !important;
  border-color: transparent !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: var(--sb-text) !important;
  background: var(--sb-surface) !important;
  border-color: var(--sb-border) var(--sb-border) var(--sb-surface) !important;
}

/* --- Cart popup ------------------------------------------------ */
/* DESKTOP layout: force the two action links onto one no-wrap flex row.
   First link (View Cart) = ghost/outline secondary action.
   Second link (Checkout) = solid olive primary action.
   Differentiating them visually so they stop "fighting" each other. */
@media (min-width: 768px) {
  #cart .dropdown-menu p.text-right,
  #cart .dropdown-menu .text-right,
  #cart-content p.text-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    margin: 12px 0 4px !important;
  }
}

/* Base style applied to BOTH action links (overridden per-position below) */
#cart .dropdown-menu p.text-right > a,
#cart-content p.text-right > a,
#cart .dropdown-menu .text-right > a:not(.btn-danger):not([class*="btn-xs"]) {
  border-radius: var(--sb-radius-sm) !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-decoration: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  margin: 0 !important;
  transition: background-color .15s var(--sb-ease),
              color .15s var(--sb-ease),
              border-color .15s var(--sb-ease) !important;
  flex: 0 0 auto;
}

/* FIRST link = View Cart = amber solid (theme-matching tactical tone,
   distinct from olive Checkout, both fully visible) */
#cart .dropdown-menu p.text-right > a:first-child,
#cart-content p.text-right > a:first-child,
#cart .dropdown-menu .text-right > a:not(.btn-danger):first-of-type {
  background: var(--sb-amber) !important;
  background-color: var(--sb-amber) !important;
  color: #fff !important;
  border: 1px solid var(--sb-amber) !important;
}
#cart .dropdown-menu p.text-right > a:first-child:hover,
#cart-content p.text-right > a:first-child:hover,
#cart .dropdown-menu .text-right > a:not(.btn-danger):first-of-type:hover {
  background: #a86f1f !important;
  background-color: #a86f1f !important;
  color: #fff !important;
  border-color: #a86f1f !important;
}
#cart .dropdown-menu p.text-right > a:first-child strong,
#cart .dropdown-menu p.text-right > a:first-child i,
#cart-content p.text-right > a:first-child strong,
#cart-content p.text-right > a:first-child i { color: #fff !important; }

/* LAST link = Checkout = primary (solid olive) */
#cart .dropdown-menu p.text-right > a:last-child,
#cart-content p.text-right > a:last-child,
#cart .dropdown-menu .text-right > a:not(.btn-danger):last-of-type {
  background: var(--sb-olive) !important;
  background-color: var(--sb-olive) !important;
  color: #fff !important;
  border: 1px solid var(--sb-olive) !important;
}
#cart .dropdown-menu p.text-right > a:last-child:hover,
#cart-content p.text-right > a:last-child:hover,
#cart .dropdown-menu .text-right > a:not(.btn-danger):last-of-type:hover {
  background: var(--sb-olive-hover) !important;
  background-color: var(--sb-olive-hover) !important;
  border-color: var(--sb-olive-hover) !important;
  color: #fff !important;
}
#cart .dropdown-menu p.text-right > a:last-child strong,
#cart .dropdown-menu p.text-right > a:last-child i,
#cart-content p.text-right > a:last-child strong,
#cart-content p.text-right > a:last-child i { color: #fff !important; }

/* Safety: if there's only ONE action link, default it to primary olive */
#cart .dropdown-menu p.text-right > a:only-child {
  background: var(--sb-olive) !important;
  color: #fff !important;
  border: 1px solid var(--sb-olive) !important;
}

/* Remove-from-cart X button (red, small) — explicit so other rules
   don't accidentally inflate it. */
#cart .dropdown-menu .btn-danger,
#cart .dropdown-menu .btn-xs.btn-danger,
#cart-content .btn-danger {
  background: #d62b3f !important;
  background-color: #d62b3f !important;
  border: 1px solid #d62b3f !important;
  color: #fff !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1 !important;
}
#cart .dropdown-menu .btn-danger:hover,
#cart-content .btn-danger:hover {
  background: #b8202f !important;
  background-color: #b8202f !important;
  border-color: #b8202f !important;
  transform: none !important;
}

@media (min-width: 768px) {
  #cart .dropdown-menu {
    border-radius: var(--sb-radius-md) !important;
    box-shadow: var(--sb-shadow-lg) !important;
    border: 1px solid var(--sb-border) !important;
    padding: 12px !important;
    margin-top: 6px;
  }

  /* Cart totals table — force two-column layout on desktop.
     Something (likely a mobile rule in header.twig setting td to
     display: block) was bleeding through and causing 4-row stacking
     instead of 2 rows of 2 cells. Explicit table-cell display fixes it. */
  #cart .dropdown-menu .table.table-bordered,
  #cart-content .table.table-bordered,
  #cart .dropdown-menu table.table,
  #cart-content table.table {
    border: 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    display: table !important;
  }
  #cart .dropdown-menu .table tbody,
  #cart-content .table tbody {
    display: table-row-group !important;
  }
  #cart .dropdown-menu .table tr,
  #cart-content .table tr {
    display: table-row !important;
  }
  #cart .dropdown-menu .table td,
  #cart .dropdown-menu .table th,
  #cart-content .table td,
  #cart-content .table th {
    display: table-cell !important;
    width: auto !important;
    text-align: right !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--sb-border-soft) !important;
    background: transparent !important;
    vertical-align: middle !important;
    font-size: 13px;
    color: var(--sb-text-2);
  }
  /* Label cell (left col) — left-aligned */
  #cart .dropdown-menu .table td:first-child,
  #cart-content .table td:first-child {
    text-align: left !important;
    color: var(--sb-text-2);
  }
  /* Last row (Iš viso / Total) — bold + larger + no bottom border */
  #cart .dropdown-menu .table tr:last-child td,
  #cart-content .table tr:last-child td {
    border-bottom: 0 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--sb-text) !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Product list rows — pin EVERY text element to an explicit 700 weight
     so the most-recently-added item (which OC wraps in <strong> tags,
     causing nested boldening that renders heavier than flat 700) looks
     identical to the others. Targeted by :has(img) to scope to product
     rows only (totals table cells have no thumbnails). body prefix
     bumps specificity above anything OC's JS or theme might inject. */
  body #cart .dropdown-menu .table tr:has(img),
  body #cart .dropdown-menu .table tr:has(img) td,
  body #cart .dropdown-menu .table tr:has(img) td a,
  body #cart .dropdown-menu .table tr:has(img) td span,
  body #cart .dropdown-menu .table tr:has(img) td small,
  body #cart .dropdown-menu .table tr:has(img) td strong,
  body #cart .dropdown-menu .table tr:has(img) td b,
  body #cart .dropdown-menu .table tr:has(img) td em,
  body #cart .dropdown-menu .table tr:has(img) td i:not(.fa) {
    font-weight: 700 !important;
    font-family: inherit !important;
    font-style: normal !important;
  }
}

/* --- Shipping info block (injected by header.twig JS) --- */
.cart-shipping-info {
  margin: 10px 4px 6px;
  padding: 10px 14px;
  background: var(--sb-olive-soft);
  border: 1px solid rgba(116, 130, 92, 0.25);
  border-radius: var(--sb-radius-sm);
  font-size: 13px;
  color: var(--sb-text);
  font-family: 'Poppins', sans-serif;
}
/* Slightly larger spacing on the full cart page (more room available there) */
#checkout-cart .cart-shipping-info {
  margin: 0 0 16px;
  padding: 12px 16px;
}

/* CSS safety-net: hide the Estimate Shipping & Taxes and Gift Voucher
   collapse panels on the cart page. Primary removal is via JS; this
   catches the brief flash before JS runs, plus serves as fallback if
   JS fails. The h2 heading + intro paragraph above the accordion are
   removed by JS only (CSS can't reliably target them by position alone). */
#checkout-cart #collapse-shipping,
#checkout-cart [href="#collapse-shipping"],
#checkout-cart [data-target="#collapse-shipping"],
#checkout-cart #collapse-voucher,
#checkout-cart [href="#collapse-voucher"],
#checkout-cart [data-target="#collapse-voucher"] {
  display: none !important;
}
.cart-shipping-info .csi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 500;
}
.cart-shipping-info .csi-row i {
  color: var(--sb-olive);
  margin-right: 6px;
}
.cart-shipping-info .csi-row strong {
  font-weight: 700;
  color: var(--sb-text);
}
.cart-shipping-info .csi-progress {
  height: 6px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.cart-shipping-info .csi-bar {
  height: 100%;
  background: var(--sb-olive);
  border-radius: 3px;
  transition: width .4s var(--sb-ease);
}
.cart-shipping-info .csi-hint {
  font-size: 11px;
  color: var(--sb-text-2);
  text-align: center;
  letter-spacing: 0.1px;
}
.cart-shipping-info .csi-hint strong {
  color: var(--sb-olive-hover);
  font-weight: 700;
}

/* Free-shipping state — green success block */
.cart-shipping-info.free {
  background: #e3f0dc;
  border-color: #b9d4a6;
  color: #2f5026;
  text-align: center;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cart-shipping-info.free i {
  color: #4f7a45;
  font-size: 16px;
}

/* Foreign / international shipping notice */
.cart-shipping-info.foreign {
  background: #e3edf6;
  border-color: #c3d5e8;
  color: #1f4a73;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
}
.cart-shipping-info.foreign i {
  color: #1f4a73;
  font-size: 15px;
  margin-top: 1px;
  flex-shrink: 0;
}

/* --- Panels / wells -------------------------------------------- */
.panel {
  border: 1px solid var(--sb-border) !important;
  border-radius: var(--sb-radius-md) !important;
  box-shadow: var(--sb-shadow-sm) !important;
  background: var(--sb-surface);
}
.panel-heading {
  background: var(--sb-surface-2) !important;
  border-bottom: 1px solid var(--sb-border-soft) !important;
  border-radius: var(--sb-radius-md) var(--sb-radius-md) 0 0 !important;
  font-weight: 600;
}
.well {
  background-color: var(--sb-surface) !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: var(--sb-radius-md) !important;
  box-shadow: var(--sb-shadow-sm) !important;
}

/* --- Pagination ------------------------------------------------ */
.pagination > li > a,
.pagination > li > span {
  border-radius: var(--sb-radius-sm) !important;
  margin: 0 3px;
  color: var(--sb-text-2);
  border-color: var(--sb-border);
  transition: background-color .12s var(--sb-ease), color .12s var(--sb-ease);
}
.pagination > li > a:hover {
  background: var(--sb-olive-soft);
  color: var(--sb-text);
  border-color: var(--sb-border);
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--sb-olive) !important;
  border-color: var(--sb-olive) !important;
  color: #fff !important;
}

/* --- Footer ---------------------------------------------------- */
footer {
  background: var(--sb-dark);
  color: #c8c8c0;
  padding: 56px 0 24px;
  margin-top: 60px;
}
footer h5 {
  color: #fff !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  margin-bottom: 18px;
}
footer ul.list-unstyled li { margin-bottom: 8px; }
footer ul.list-unstyled a {
  color: #b9b9b1;
  font-size: 14px;
  transition: color .15s var(--sb-ease);
}
footer ul.list-unstyled a:hover {
  color: #fff;
}
footer hr {
  border-color: rgba(255,255,255,0.08) !important;
  margin: 32px 0 16px;
}
footer p {
  color: #8a8a82;
  font-size: 12px;
  text-align: center;
}
footer p a { color: #b9b9b1; }
footer p a:hover { color: #fff; }

/* --- Translation-in-progress banner ---------------------------- */
.translation-wip-banner {
  background: linear-gradient(180deg, #fff5d4 0%, #ffeeb3 100%) !important;
  color: #6a4f00 !important;
  border-bottom: 1px solid #f0d97a !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  font-weight: 500;
}

/* --- Breadcrumb ------------------------------------------------ */
.breadcrumb,
ul.breadcrumb {
  background: transparent !important;
  padding: 14px 0 !important;
  margin-bottom: 16px !important;
  font-size: 13px;
}
ul.breadcrumb > li a { color: var(--sb-text-2); }
ul.breadcrumb > li:last-child { color: var(--sb-text); font-weight: 500; }

/* --- Modals / alerts ------------------------------------------- */
.modal-content {
  border-radius: var(--sb-radius-md);
  border: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow-lg);
}
.alert {
  border-radius: var(--sb-radius-sm);
  border: none;
  padding: 12px 16px;
}
.alert-success { background: #e3f0dc; color: #2f5026; }
.alert-warning { background: #fff5d4; color: #6a4f00; }
.alert-danger  { background: #fbe1e4; color: #76202b; }
.alert-info    { background: #e3edf6; color: #1f4a73; }

/* --- Misc ------------------------------------------------------ */
html { scroll-behavior: smooth; }
::selection { background: rgba(116, 130, 92, 0.30); color: var(--sb-text); }

.thumbnail, .img-thumbnail {
  border: 1px solid var(--sb-border) !important;
  background: var(--sb-surface);
}
.dropdown-menu {
  border: 1px solid var(--sb-border) !important;
  box-shadow: var(--sb-shadow-md) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  border-radius: var(--sb-radius-sm);
  padding: 8px 12px !important;
  color: var(--sb-text) !important;
}
.dropdown-menu > li > a:hover {
  background-color: var(--sb-olive-soft) !important;
  color: var(--sb-text) !important;
}

@media print {
  .product-thumb, .panel, .well, .btn { box-shadow: none !important; }
}

/* ==========================================================================
   CHECKOUT — combined Address + Shipping step
   The address summary block and inline shipping methods that appear inside
   #collapse-payment-address after the customer clicks Continue.
   ========================================================================== */

/* The address summary box that replaces the form after save.
   !important on bg/border because we have to overcome existing panel-body rules. */
#collapse-payment-address .address-saved-summary {
  background: var(--sb-olive-soft) !important;
  border: 1px solid rgba(116, 130, 92, 0.32) !important;
  border-radius: var(--sb-radius-md);
  padding: 14px 18px;
  margin-bottom: 22px;
}

/* Header row: label on left, change button on right */
#collapse-payment-address .address-saved-summary .ass-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* The "Siuntimo adresas" label — plain text, no box */
#collapse-payment-address .address-saved-summary .ass-label {
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--sb-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block;
  line-height: 1.4;
}

/* The actual address — bold and readable */
#collapse-payment-address .address-saved-summary .ass-content {
  font-size: 14px !important;
  color: var(--sb-text) !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
}

/* Change button — clearly visible, outlined olive style.
   Override any inherited .btn/.btn-link/.btn-sm rules. */
#collapse-payment-address #button-change-address,
button#button-change-address {
  color: var(--sb-olive) !important;
  background: #ffffff !important;
  border: 1px solid rgba(116, 130, 92, 0.55) !important;
  padding: 5px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--sb-radius-sm) !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: all .15s var(--sb-ease) !important;
  cursor: pointer;
}
#collapse-payment-address #button-change-address:hover,
#collapse-payment-address #button-change-address:focus,
button#button-change-address:hover,
button#button-change-address:focus {
  background: var(--sb-olive) !important;
  color: #ffffff !important;
  border-color: var(--sb-olive) !important;
  text-decoration: none !important;
  outline: 0 !important;
}
#collapse-payment-address #button-change-address .fa {
  font-size: 12px !important;
  color: inherit !important;
}

/* ---------- Inline shipping method block ---------- */

#collapse-payment-address .inline-shipping-method {
  margin-top: 4px;
}

/* "Pasirinkite siuntimo būdą." intro */
#collapse-payment-address .inline-shipping-method > p:first-child {
  font-size: 12px;
  color: var(--sb-text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin: 6px 0 14px;
}

/* Group titles (e.g. "Nemokamas siuntimas nuo 199 eur.") */
#collapse-payment-address .inline-shipping-method > p strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--sb-text-2);
  display: block;
  margin: 18px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Card-style radio options — completely overrides Bootstrap's .radio layout
   so the input doesn't sit on top of the first letters of the label. */
#collapse-payment-address .inline-shipping-method .radio {
  margin: 0 0 8px 0;
  padding: 0 !important;
}

#collapse-payment-address .inline-shipping-method .radio label {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 14px 18px !important;
  border: 1.5px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--sb-text);
  transition: border-color .15s var(--sb-ease), background-color .15s var(--sb-ease), box-shadow .15s var(--sb-ease);
  margin: 0 !important;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.4;
  padding-left: 18px !important;  /* defeat Bootstrap's padding-left: 20px on .radio label */
}

#collapse-payment-address .inline-shipping-method .radio label:hover {
  border-color: rgba(116, 130, 92, 0.6);
  background: rgba(116, 130, 92, 0.04);
}

/* CRITICAL: kill Bootstrap's absolute positioning of the radio input.
   That's what was causing the input to overlap the first letters. */
#collapse-payment-address .inline-shipping-method .radio label input[type="radio"] {
  position: static !important;
  margin: 0 !important;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  accent-color: var(--sb-olive);
  cursor: pointer;
}

/* Selected card — olive border, soft olive bg, subtle outer ring */
#collapse-payment-address .inline-shipping-method .radio label:has(input[type="radio"]:checked) {
  border-color: var(--sb-olive);
  background: var(--sb-olive-soft);
  box-shadow: 0 0 0 1px var(--sb-olive), 0 2px 8px rgba(116, 130, 92, 0.12);
}

/* Comment textarea — order notes */
#collapse-payment-address .inline-shipping-method > p:has(textarea) {
  margin-top: 20px;
}
#collapse-payment-address .inline-shipping-method textarea[name="comment"] {
  width: 100%;
  min-height: 100px;
  margin-top: 6px;
  border: 1.5px solid var(--sb-border);
  border-radius: var(--sb-radius-md);
  padding: 12px 14px;
  font-size: 14px;
  resize: vertical;
  transition: border-color .15s var(--sb-ease);
}
#collapse-payment-address .inline-shipping-method textarea[name="comment"]:focus {
  border-color: var(--sb-olive);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(116, 130, 92, 0.15);
}

/* The "Jeigu reikalinga..." comment label */
#collapse-payment-address .inline-shipping-method > p:nth-last-child(2) strong {
  margin-top: 22px;
}

/* Continue button row at bottom */
#collapse-payment-address .inline-shipping-method .buttons {
  margin-top: 18px;
  border-top: 1px solid var(--sb-border);
  padding-top: 18px;
}

/* Mobile tightening */
@media (max-width: 480px) {
  #collapse-payment-address .address-saved-summary {
    padding: 12px 14px;
  }
  #collapse-payment-address .address-saved-summary .ass-header {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #collapse-payment-address .inline-shipping-method .radio label {
    padding: 12px 14px !important;
    padding-left: 14px !important;
    min-height: 52px;
    font-size: 13px;
    gap: 12px;
  }
}