/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Midmed.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  /* MiDmed brand palette -- czerwien medyczna z tarczy logo + grafit + biel.
     Zrodlo: source_content/ (zrzut midmed.pl), zweryfikowane wzgledem logo. */
  --background: #ffffff;
  --foreground: #111827;
  --card: #ffffff;
  --card-foreground: #111827;
  --primary: #e52328;
  --primary-foreground: #ffffff;
  --secondary: #f9fafb;
  --secondary-foreground: #111827;
  --muted: #f9fafb;
  --muted-foreground: #6b7280;
  --accent: #fff5f5;
  --accent-foreground: #1f2937;
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: #e5e7eb;
  --input: #e5e7eb;
  /* Marka: czerwien medyczna primary, dark variant do hover (nie ma
     bezposredniego tokenu shadcn na hover -- Tailwind liczy to przez
     bg-primary/85 w komponentach, patrz components/button). */
  --color-success: #10b981;
  --color-disclaimer-bg: #2d3748;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-body: "Inter", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/* ==========================================================================
   Primary & Secondary Local Tasks Tabs (#block-midmed-local-tasks)
   ========================================================================== */

#block-midmed-local-tasks,
.block-local-tasks-block,
[id*="local-tasks"] {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.midmed-tabs-wrapper {
  display: flex;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.25rem;
  padding-bottom: 2px;
}

.midmed-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.375rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
}

.primary-tabs {
  border-bottom: 2px solid var(--border) !important;
}

.secondary-tabs {
  border-bottom: 1px solid var(--border) !important;
  margin-top: 0.5rem !important;
}

.midmed-tab-item {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Remove default bullet markers from any child elements */
.midmed-tab-item::before,
.midmed-tab-item::marker {
  content: "" !important;
  display: none !important;
}

/* Tab Links */
.midmed-tab-item a,
.midmed-tabs a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.625rem 1.25rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  background-color: var(--muted) !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  border: 1px solid var(--border) !important;
  border-bottom: 3px solid transparent !important;
  text-decoration: none !important;
  margin-bottom: -2px !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Hover state */
.midmed-tab-item a:hover,
.midmed-tabs a:hover {
  color: var(--foreground) !important;
  background-color: var(--accent) !important;
  border-color: var(--border) !important;
}

/* Active Tab state */
.midmed-tab-item.is-active a,
.midmed-tab-item a.is-active,
.midmed-tabs .is-active a,
.midmed-tabs a.is-active {
  color: var(--primary) !important;
  background-color: #ffffff !important;
  border-color: var(--border) !important;
  border-bottom-color: var(--primary) !important;
  border-bottom-width: 3px !important;
  font-weight: 700 !important;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Secondary Tab Links styling */
.secondary-tabs .midmed-tab-item a,
.secondary-tabs a {
  padding: 0.375rem 0.875rem !important;
  font-size: 0.8125rem !important;
  border-radius: 9999px !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 0 !important;
}

.secondary-tabs .midmed-tab-item.is-active a,
.secondary-tabs a.is-active {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
}

/* ==========================================================================
   Red Cart Button & Flyout Panel (Commerce Cart Flyout)
   ========================================================================== */

/* Cart Button in Header */
.cart--cart-block,
.midmed-cart-block {
  display: flex;
  align-items: center;
}

.cart-block--summary {
  display: flex;
  align-items: center;
}

.cart-block--link__expand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  box-shadow: 0 3px 10px rgba(229, 35, 40, 0.35) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.cart-block--link__expand:hover {
  background-color: #cc1b20 !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 5px 15px rgba(229, 35, 40, 0.45) !important;
}

.cart-block--summary__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  width: 22px !important;
  height: 22px !important;
}

.cart-block--summary__icon svg,
.cart-block--summary__icon img {
  width: auto !important;
  max-width: 22px !important;
  height: auto !important;
  max-height: 22px !important;
  object-fit: contain !important;
  stroke: #ffffff !important;
  filter: brightness(0) invert(1) !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Badge for Cart Item Count */
.cart-block--summary__count {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background-color: #111827 !important;
  color: #ffffff !important;
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  min-width: 22px !important;
  height: 22px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 5px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
  line-height: 1 !important;
}

/* ==========================================================================
   Flyout Offcanvas Sidebar Panel
   ========================================================================== */

.cart--cart-offcanvas {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 400px !important;
  max-width: 92vw !important;
  background-color: #ffffff !important;
  z-index: 10000 !important;
  box-shadow: -6px 0 30px rgba(0, 0, 0, 0.18) !important;
  padding: 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  font-family: var(--font-body) !important;
  border-left: 1px solid var(--border) !important;
  overflow-y: auto !important;
}

.cart--cart-offcanvas__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 2px solid var(--primary) !important;
  padding-bottom: 0.875rem !important;
  margin-bottom: 1.5rem !important;
}

.cart-offcanvas--title {
  font-family: var(--font-sans) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  margin: 0 !important;
}

.cart--cart-offcanvas__close button {
  background: var(--muted) !important;
  border: 1px solid var(--border) !important;
  color: var(--foreground) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 9999px !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  line-height: 1 !important;
}

.cart--cart-offcanvas__close button:hover {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: var(--primary) !important;
  transform: rotate(90deg);
}

.cart-block--offcanvas-cart-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-bottom: 1.5rem !important;
}

.cart-block--offcanvas-cart-table tr {
  border-bottom: 1px solid var(--border) !important;
}

.cart-block--offcanvas-cart-table td {
  padding: 0.875rem 0.375rem !important;
  vertical-align: middle !important;
}

.cart-block--offcanvas-cart-table__title {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: var(--foreground) !important;
}

.cart-block--offcanvas-cart-table__quantity input {
  width: 48px !important;
  padding: 0.375rem 0.25rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.375rem !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  background-color: var(--muted) !important;
}

.cart-block--offcanvas-cart-table__quantity input:focus {
  border-color: var(--primary) !important;
  background-color: #ffffff !important;
}

.cart-block--offcanvas-cart-table__price {
  font-weight: 700 !important;
  color: var(--primary) !important;
  font-size: 1rem !important;
  text-align: right !important;
  white-space: nowrap !important;
}

.cart-block--offcanvas-cart-table__remove button {
  background: transparent !important;
  border: none !important;
  color: var(--muted-foreground) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 0.25rem !important;
  transition: color 0.2s !important;
}

.cart-block--offcanvas-cart-table__remove button:hover {
  color: var(--primary) !important;
  background-color: var(--accent) !important;
}

.cart-block--offcanvas-contents__update {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  width: 100% !important;
  margin-top: 0.75rem !important;
  transition: all 0.2s !important;
}

.cart-block--offcanvas-contents__update:hover {
  background-color: var(--accent) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* Links & Checkout in Flyout */
.cart-block--offcanvas-contents__links {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  margin-top: 1.5rem !important;
  padding-top: 1rem !important;
  border-top: 2px solid var(--border) !important;
}

.cart-block--offcanvas-contents__links a,
.cart-block--offcanvas-contents__links .button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding: 0.875rem 1.25rem !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.cart-block--offcanvas-contents__links a:first-child,
.cart-block--offcanvas-contents__links a.checkout-button {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(229, 35, 40, 0.3) !important;
}

.cart-block--offcanvas-contents__links a:first-child:hover,
.cart-block--offcanvas-contents__links a.checkout-button:hover {
  background-color: #cc1b20 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(229, 35, 40, 0.4) !important;
}

.cart-block--offcanvas-contents__links a:nth-child(2) {
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
}

.cart-block--offcanvas-contents__links a:nth-child(2):hover {
  background-color: var(--accent) !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.cart-offcanvas--empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 3rem 1rem !important;
  text-align: center !important;
  color: var(--muted-foreground) !important;
}

.cart-offcanvas--empty svg {
  stroke: var(--muted-foreground) !important;
  margin-bottom: 1rem !important;
  opacity: 0.6 !important;
}

.cart-offcanvas--empty p {
  font-family: var(--font-sans) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.layout-region-checkout-secondary h3 {
  font-size: var(--text-2xl) ;
}
.layout-content {
  padding-top: 2rem;
}
/* ==========================================================================
   Form Inputs & Controls Styling
   ========================================================================== */

.form-item,
.webform-component,
.js-form-item {
  margin-bottom: 1.25rem !important;
}

label,
.form-item label,
.fieldset-legend {
  display: block !important;
  font-family: var(--font-sans) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  margin-bottom: 0.375rem !important;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select,
.form-text,
.form-email,
.form-tel,
.form-select,
.form-textarea {
  display: block !important;
  width: 100% !important;
  padding: 0.625rem 0.875rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  color: var(--foreground) !important;
  background-color: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
textarea:hover,
select:hover {
  border-color: #9ca3af !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.form-text:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(229, 35, 40, 0.15) !important;
  background-color: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

/* ==========================================================================
   Shopping Cart Page (/cart) Styling
   ========================================================================== */

.commerce-cart-form,
.views-form-commerce-cart-form-default,
form[id*="views-form-commerce-cart-form"] {
  width: 100% !important;
  margin-top: 1.5rem !important;
  margin-bottom: 3rem !important;
}

/* Cart Table Container & Structure */
/* Responsive scroll wrapper for cart table */
.commerce-cart-form .views-form,
.views-form-commerce-cart-form-default,
.view-commerce-cart-form {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.commerce-cart-form table,
.views-form-commerce-cart-form-default table,
table.views-table {
  width: 100% !important;
  min-width: 480px !important; /* prevents cramped layout on mobile — scroll wrapper handles overflow */
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  overflow: visible !important; /* changed from hidden so scroll wrapper works */
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  margin-bottom: 1.5rem !important;
  table-layout: auto !important;
}

/* Table Headers */
.commerce-cart-form thead th,
.views-form-commerce-cart-form-default thead th,
table.views-table thead th {
  background-color: var(--muted) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm) !important;
  line-height: var(--text-sm--line-height) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: #4b5563 !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 2px solid var(--border) !important;
  border-top: none !important;
}

/* Specific Column Alignments & Header Spacing */
.views-field-title,
.views-field-purchased-entity {
  text-align: left !important;
}

.views-field-unit-price {
  text-align: right !important;
  white-space: nowrap !important;
}

.views-field-quantity {
  text-align: center !important;
}

.views-field-remove-button {
  text-align: center !important;
}

.views-field-total-price {
  text-align: right !important;
  white-space: nowrap !important;
}

/* Table Body Rows & Cells */
.commerce-cart-form tbody tr,
.views-form-commerce-cart-form-default tbody tr {
  border-bottom: 1px solid var(--border) !important;
  transition: background-color 0.15s ease !important;
}

.commerce-cart-form tbody tr:hover,
.views-form-commerce-cart-form-default tbody tr:hover {
  background-color: #fefcfc !important;
}

.commerce-cart-form tbody td,
.views-form-commerce-cart-form-default tbody td,
table.views-table tbody td {
  padding: 1rem 1rem !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: none !important;
  vertical-align: middle !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
}

.commerce-cart-form tbody tr:last-child td,
.views-form-commerce-cart-form-default tbody tr:last-child td {
  border-bottom: none !important;
}

/* Title / Product Name */
td.views-field-title,
td.views-field-purchased-entity {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height) !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  padding-right: 1.5rem !important;
}

td.views-field-title a,
td.views-field-purchased-entity a {
  color: var(--foreground) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

td.views-field-title a:hover,
td.views-field-purchased-entity a:hover {
  color: var(--primary) !important;
}

/* Unit Price */
td.views-field-unit-price {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height) !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* Quantity Input Field */
td.views-field-quantity {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

td.views-field-quantity input,
.commerce-cart-form input[type="number"] {
  width: 56px !important;
  max-width: 56px !important;
  padding: 0.35rem 0.4rem !important;
  text-align: center !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: var(--text-sm) !important;
  color: var(--foreground) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 0.375rem !important;
  background-color: #ffffff !important;
  margin: 0 auto !important;
  display: block !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

td.views-field-quantity input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(229, 35, 40, 0.15) !important;
}

/* Remove Button ("Usuń") */
td.views-field-remove-button {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

td.views-field-remove-button input,
td.views-field-remove-button button,
input[id*="remove-button"],
button[id*="remove-button"] {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
  padding: 0.35rem 0.75rem !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(229, 35, 40, 0.2) !important;
  margin: 0 auto !important;
  display: inline-block !important;
}

td.views-field-remove-button input:hover,
td.views-field-remove-button button:hover,
input[id*="remove-button"]:hover,
button[id*="remove-button"]:hover {
  background-color: #cc1b20 !important;
  border-color: #cc1b20 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(229, 35, 40, 0.35) !important;
}

/* Total Row Price */
td.views-field-total-price {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: var(--text-base--line-height) !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  padding-left: 1rem !important;
}

@media (min-width: 96rem) {
  .commerce-cart-form table,
  .commerce-cart-form th,
  .commerce-cart-form td {
    font-size: var(--text-base) !important;
    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
  }
  .commerce-cart-form thead th {
    font-size: var(--text-sm) !important;
  }
}

/* Table Cells Vertical Centering & Column Spacing */
.commerce-cart-form tbody td,
.views-form-commerce-cart-form-default tbody td,
table.views-table tbody td,
.commerce-cart-form thead th,
.views-form-commerce-cart-form-default thead th,
table.views-table thead th {
  vertical-align: middle !important;
}

/* Price Column Spacing away from Quantity input */
th.views-field-unit-price,
td.views-field-unit-price,
th.views-field-unit-price__number,
td.views-field-unit-price__number,
.views-field-unit-price__number {
  text-align: right !important;
  white-space: nowrap !important;
  padding-left: 1.5rem !important;
  padding-right: 2.5rem !important;
}

/* Quantity Input Field Column Vertical Centering */
th.views-field-quantity,
td.views-field-quantity,
th.views-field-edit-quantity,
td.views-field-edit-quantity,
.views-field-edit-quantity {
  text-align: center !important;
  vertical-align: middle !important;
  align-content: center !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

td.views-field-quantity input,
td.views-field-edit-quantity input,
.views-field-edit-quantity input,
.views-field-edit-quantity .form-item,
.views-field-edit-quantity .form-element {
  margin: 0 auto !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Order Total Summary Box Aligned LEFT under Table ("Podsuma" & "Razem") */
.commerce-order-total-summary,
div[data-drupal-selector="order-total-summary"],
.views-form-commerce-cart-form-default div[data-drupal-selector="order-total-summary"] {
  width: 100% !important;
  max-width: 650px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  background-color: var(--muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.75rem !important;
  padding: 1.25rem 1.5rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.order-total-line {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0.5rem 0 !important;
}

.order-total-line-label,
.order-total-line__name,
.order-total-line .label {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--muted-foreground) !important;
  text-align: left !important;
}

.order-total-line-value,
.order-total-line__amount,
.order-total-line .value {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: 700 !important;
  color: var(--foreground) !important;
  text-align: right !important;
}

.order-total-line__total,
.order-total-line__formatted_total,
.order-total-line--total {
  border-top: 2px solid var(--border) !important;
  margin-top: 0.5rem !important;
  padding-top: 0.875rem !important;
}

.order-total-line__total .order-total-line-label,
.order-total-line__formatted_total .order-total-line__name,
.order-total-line--total .label {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: var(--foreground) !important;
}

.order-total-line__total .order-total-line-value,
.order-total-line__formatted_total .order-total-line__amount,
.order-total-line--total .value {
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
}

/* Action Buttons Container ("Aktualizuj koszyk" & "Realizacja zamówienia") */
.commerce-cart-form .form-actions,
.views-form-commerce-cart-form-default .form-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2.5rem !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.commerce-cart-form .form-actions input[type="submit"],
.commerce-cart-form .form-actions button,
.commerce-cart-form .form-actions a {
  margin: 0 !important;
}

/* Update Cart Button */
input#edit-submit,
input[value*="Aktualizuj"],
input[id*="edit-submit"] {
  background-color: #ffffff !important;
  color: var(--foreground) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 0.5rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

input#edit-submit:hover,
input[value*="Aktualizuj"]:hover {
  background-color: var(--muted) !important;
  border-color: #9ca3af !important;
  color: var(--foreground) !important;
}

/* Checkout Button ("Realizacja zamówienia") */
a.checkout-button,
input[value*="Realizacja"],
a[href*="checkout"] {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 0.75rem 1.75rem !important; /* increased for 44px min touch target */
  border-radius: 0.5rem !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  box-shadow: 0 4px 12px rgba(229, 35, 40, 0.3) !important;
  transition: all 0.2s ease !important;
}

a.checkout-button:hover,
input[value*="Realizacja"]:hover,
a[href*="checkout"]:hover {
  background-color: #cc1b20 !important;
  border-color: #cc1b20 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(229, 35, 40, 0.4) !important;
}


#accordion-title {
  background-color: #f9fafb !important;
}

/* ==========================================================================
   Typography Scale Overrides for Headings (H1 - H6) in Content (Excluding Hero)
   ========================================================================== */

h1:not(.hero-title):not(.canvas-hero *):not([class*="text-8xl"]):not([class*="text-7xl"]) {
  font-size: 2.25rem !important; /* 36px mobile */
  line-height: 1.2 !important;
  font-weight: 700 !important;
}
@media (min-width: 768px) {
  h1:not(.hero-title):not(.canvas-hero *):not([class*="text-8xl"]):not([class*="text-7xl"]) {
    font-size: 3rem !important; /* 48px tablet */
  }
}
@media (min-width: 1024px) {
  h1:not(.hero-title):not(.canvas-hero *):not([class*="text-8xl"]):not([class*="text-7xl"]) {
    font-size: 3.75rem !important; /* 60px desktop */
  }
}

h2:not(.hero-title):not(.canvas-hero *) {
  font-size: 1.5rem !important; /* 24px mobile */
  line-height: 1.25 !important;
  font-weight: 700 !important;
}
@media (min-width: 768px) {
  h2:not(.hero-title):not(.canvas-hero *) {
    font-size: 2rem !important; /* 32px desktop */
  }
}

h3:not(.hero-title):not(.canvas-hero *) {
  font-size: 1.25rem !important; /* 20px mobile */
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
@media (min-width: 768px) {
  h3:not(.hero-title):not(.canvas-hero *) {
    font-size: 1.5rem !important; /* 24px desktop */
  }
}

h4:not(.hero-title):not(.canvas-hero *) {
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.35 !important;
  font-weight: 700 !important;
}

h5:not(.hero-title):not(.canvas-hero *) {
  font-size: 1rem !important; /* 16px */
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

h6:not(.hero-title):not(.canvas-hero *) {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.4 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Ensure Menu SVG Icons always have explicit 24px x 24px dimensions */
.menu-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
}

.menu-icon img,
.menu-icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  object-fit: contain !important;
}

/* Ensure Dropdown Menu Chevron SVG always has strict 14px x 14px dimensions */
.menu-chevron,
nav svg.menu-chevron {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Ensure navbar containers do not clip dropdown menus on desktop */
@media (min-width: 768px) {
  .navbar--dropdown-menu-wrapper,
  .navbar--dropdown-menu,
  .navbar--menu,
  .navbar,
  header {
    overflow: visible !important;
  }
}

/* ==========================================================================
   Desktop Dropdown Sub-menu (Hover & Focus >= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  li.menu-has-dropdown {
    position: relative !important;
  }

  .menu-dropdown-container {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999 !important;
    min-width: 320px !important;
    width: max-content !important;
    max-width: 480px !important;
    padding-top: 0.5rem !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease !important;
    pointer-events: none !important;
  }

  .menu-dropdown-container .menu-dropdown-list,
  .menu-dropdown-container ul {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    padding: 0.375rem !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .menu-dropdown-container li {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
  }

  .menu-dropdown-container li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: #1e293b !important;
    border-radius: 0.5rem !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    width: 100% !important;
  }

  .menu-dropdown-container li a:hover {
    color: var(--primary, #e52328) !important;
    background-color: #f8fafc !important;
  }

  li.menu-has-dropdown:hover > .menu-dropdown-container,
  li.menu-has-dropdown:focus-within > .menu-dropdown-container,
  li.group:hover > .menu-dropdown-container,
  li:hover > .menu-dropdown-container {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  li.menu-has-dropdown:hover .menu-chevron,
  li.group:hover .menu-chevron {
    transform: rotate(180deg) !important;
  }
}

/* ==========================================================================
   Universal Bootstrap Grid & Alignment Compatibility for CKEditor 5 Content
   ========================================================================== */

.bs_grid,
.bs_grid * {
  box-sizing: border-box;
}

.container,
.container-fluid {
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.row > [class*="col"] {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* Full width on small screens (mobile) */
.col-12,
.col-sm-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Equal width columns & grid layout for medium screens (md: 768px+) */
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
    width: 100%;
  }
  .col-md-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Equal width columns & grid layout for large screens (lg: 992px+) */
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
    width: 100%;
  }
  .col-lg-1  { flex: 0 0 8.333333%;  max-width: 8.333333%; }
  .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3  { flex: 0 0 25%;        max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6  { flex: 0 0 50%;        max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9  { flex: 0 0 75%;        max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%;       max-width: 100%; }
}

/* Equal width columns for xl & xxl breakpoints */
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
    width: 100%;
  }
}

@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
    width: 100%;
  }
}

/* Alignment utilities for CKEditor content */
.align-center,
.text-align-center {
  text-align: center !important;
}

.align-center img,
.text-align-center img {
  display: block;
  margin-left: auto !important;
  margin-right: auto !important;
}

.align-left,
.text-align-left {
  text-align: left !important;
}

.align-right,
.text-align-right {
  text-align: right !important;
}

/* ==========================================================================
   Red accent bottom underline (120px width, 1px height) for H1, H2, H3
   ========================================================================== */

h1:not(.sr-only):not(.accordion *):not(.navbar *)::after,
h2:not(.sr-only):not(.accordion *):not(.navbar *)::after,
h3:not(.sr-only):not(.accordion *):not(.navbar *)::after {
  content: "";
  display: block;
  width: 120px;
  height: 1px;
  background-color: var(--primary, #e52328);
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Center the red underline if heading or parent is centered */
h1.text-center::after,
h2.text-center::after,
h3.text-center::after,
h1.text-align-center::after,
h2.text-align-center::after,
h3.text-align-center::after,
.text-center > h1::after,
.text-center > h2::after,
.text-center > h3::after,
.text-align-center > h1::after,
.text-align-center > h2::after,
.text-align-center > h3::after,
.align-center > h1::after,
.align-center > h2::after,
.align-center > h3::after {
  margin-left: auto;
  margin-right: auto;
}

/* Right-align the red underline if heading or parent is right-aligned */
h1.text-right::after,
h2.text-right::after,
h3.text-right::after,
h1.text-align-right::after,
h2.text-align-right::after,
h3.text-align-right::after,
.text-right > h1::after,
.text-right > h2::after,
.text-right > h3::after,
.text-align-right > h1::after,
.text-align-right > h2::after,
.text-align-right > h3::after,
.align-right > h1::after,
.align-right > h2::after,
.align-right > h3::after {
  margin-left: auto;
  margin-right: 0;
}

/* ==========================================================================
   Font Awesome & CKEditor Icons Default Styling (Primary Red + 10px spacing)
   ========================================================================== */

i[class*="fa-"],
i.fa,
i.fa-solid,
i.fa-regular,
i.fa-brands,
i.fa-light,
i.fa-thin,
i.fa-duotone,
svg.svg-inline--fa,
.svg-inline--fa {
  color: var(--primary, #e52328) !important;
  fill: var(--primary, #e52328) !important;
  padding-right: 10px !important;
  box-sizing: content-box !important;
  display: inline-block;
  vertical-align: -0.125em;
}

/* ==========================================================================
   Scroll to Top / Bottom Floating Navigation Buttons
   ========================================================================== */

#scroll-navigation {
  position: fixed !important;
  right: 1.25rem !important;
  bottom: 3.5rem !important;
  z-index: 490 !important;
}

.scroll-nav-btn {
  background-color: #334155 !important; /* ciemny szary / slate-700 */
  color: #ffffff !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.scroll-nav-btn svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  transition: transform 0.2s ease !important;
}

/* Hover: czerwony */
.scroll-nav-btn:hover {
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(229, 35, 40, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* Kliknięcie / przytrzymanie (active / is-active): intensywny czerwony + lekki wciśnięcie */
.scroll-nav-btn:active,
.scroll-nav-btn.is-active {
  background-color: #c81e23 !important; /* głębsza czerwień przy trzymaniu */
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(229, 35, 40, 0.4) !important;
  transform: scale(0.92) !important;
}

/* ==========================================================================
   Header Top Bar & Actions Row Styling
   ========================================================================== */

/* Default (Mobile & Tablet < 1024px): Hide desktop top actions, show mobile bar */
.header-logo-img {
  height: 52px !important;
  max-height: 58px !important;
  min-height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

.header--top-bar {
  background-color: #ffffff !important;
}

.header--top-actions {
  display: none !important;
}

.header--mobile-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

/* Desktop (>= 1024px): Show top actions, hide mobile actions, enlarge logo */
@media (min-width: 1024px) {
  .header-logo-img {
    height: 80px !important;
    max-height: 90px !important;
    min-height: 65px !important;
  }

  .header--top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 1.75rem !important;
    justify-content: flex-end !important;
  }

  .header--mobile-actions {
    display: none !important;
  }

  .header--top-bar .region-header,
  .header--top-bar .region-header > div,
  .header-top-info {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
    flex-wrap: wrap !important;
  }
}

.header-info-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease;
}

.header-info-item:hover {
  transform: translateY(-1px);
}

.header-info-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  background-color: #fff1f2 !important; /* soft red-50 */
  color: var(--primary, #e52328) !important;
}

.header-info-icon svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--primary, #e52328) !important;
  fill: currentColor !important;
}

.header-info-texts {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  line-height: 1.25 !important;
}

.header-info-label {
  font-size: 0.8125rem !important;
  color: #475569 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.header-info-value {
  font-size: 1.0625rem !important;
  color: var(--primary, #e52328) !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.header-eu-flag-img {
  height: 42px !important;
  width: auto !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: block !important;
}

.header-info-eu a:hover .header-eu-flag-img {
  transform: scale(1.05) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
}

.header-action-item {
  display: flex !important;
  align-items: center !important;
}

.header-action-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: #334155 !important;
  text-decoration: none !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  padding: 4px 6px !important;
}

.header-action-link:hover {
  color: var(--primary, #e52328) !important;
}

.header-action-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.header-action-icon svg {
  color: inherit !important;
  transition: color 0.2s ease !important;
}

.header-badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

header[role="banner"] {
  border-bottom: 1px solid #f1f5f9 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.header--top-bar {
  border-bottom: 1px solid #f1f5f9 !important;
  background-color: #ffffff !important;
}

.header--nav-bar {
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background-color: #ffffff !important;
  width: 100% !important;
}

/* ==========================================================================
   Desktop Navigation Bar (>= 1024px)
   ========================================================================== */
@media (min-width: 1024px) {
  .header--nav-bar {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0.25rem 0 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  .header--nav-bar .navbar {
    display: flex !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .navbar--menu {
    display: flex !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    background-color: transparent !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    z-index: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: none !important;
  }

  .navbar--modal-top,
  .navbar--modal-logo,
  .navbar--hide-menu,
  .navbar--links,
  .navbar--logo,
  .navbar--hamburger-container {
    display: none !important;
  }

  .navbar--dropdown-menu-wrapper {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  .navbar--dropdown-menu-wrapper::after,
  .navbar--dropdown-menu-wrapper::before,
  .navbar::after,
  .navbar::before {
    display: none !important;
    content: none !important;
  }

  .navbar--dropdown-menu {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .header--nav-bar nav.menu--main {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .header--nav-bar nav.menu--main > ul,
  .header--nav-bar nav > ul,
  .header--nav-bar ul.menu,
  .header--nav-bar ul.menu-level-1,
  .header--nav-bar ul[data-level="1"] {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important; /* 12px gap for 1024px-1279px */
    flex-wrap: nowrap !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .header--nav-bar ul.menu > li,
  .header--nav-bar ul.menu-level-1 > li,
  .header--nav-bar ul[data-level="1"] > li {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .header--nav-bar ul.menu > li > a,
  .header--nav-bar ul.menu-level-1 > li > a,
  .header--nav-bar ul[data-level="1"] > li > a,
  .header--nav-bar nav a[data-level="1"] {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    padding: 0.65rem 0.45rem !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    border-radius: 0.5rem !important;
    width: auto !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
  }

  .header--nav-bar ul.menu > li > a:hover,
  .header--nav-bar ul.menu-level-1 > li > a:hover,
  .header--nav-bar ul[data-level="1"] > li > a:hover,
  .header--nav-bar nav a[data-level="1"]:hover {
    color: var(--primary, #e52328) !important;
    background-color: #f8fafc !important;
  }

  .header--nav-bar ul.menu > li > a .menu-icon,
  .header--nav-bar ul.menu-level-1 > li > a .menu-icon,
  .header--nav-bar ul[data-level="1"] > li > a .menu-icon,
  .header--nav-bar nav a[data-level="1"] .menu-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Standard Desktops (1280px - 1499px) */
@media (min-width: 1280px) {
  .header--nav-bar nav.menu--main > ul,
  .header--nav-bar nav > ul,
  .header--nav-bar ul.menu,
  .header--nav-bar ul.menu-level-1,
  .header--nav-bar ul[data-level="1"] {
    gap: 1.25rem !important;
  }

  .header--nav-bar ul.menu > li > a,
  .header--nav-bar ul.menu-level-1 > li > a,
  .header--nav-bar ul[data-level="1"] > li > a {
    gap: 0.55rem !important;
    padding: 0.75rem 0.65rem !important;
    font-size: 15px !important;
  }

  .header--nav-bar ul.menu > li > a .menu-icon,
  .header--nav-bar ul.menu-level-1 > li > a .menu-icon,
  .header--nav-bar ul[data-level="1"] > li > a .menu-icon {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
  }
}

/* Wide Desktops (>= 1500px) */
@media (min-width: 1500px) {
  .header--nav-bar nav.menu--main > ul,
  .header--nav-bar nav > ul,
  .header--nav-bar ul.menu,
  .header--nav-bar ul.menu-level-1,
  .header--nav-bar ul[data-level="1"] {
    gap: 2rem !important;
  }

  .header--nav-bar ul.menu > li > a,
  .header--nav-bar ul.menu-level-1 > li > a,
  .header--nav-bar ul[data-level="1"] > li > a {
    padding: 0.85rem 0.85rem !important;
    font-size: 16px !important;
  }

  .header--nav-bar ul.menu > li > a .menu-icon,
  .header--nav-bar ul.menu-level-1 > li > a .menu-icon,
  .header--nav-bar ul[data-level="1"] > li > a .menu-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }
}

/* ==========================================================================
   Mobile & Tablet Navigation Drawer (< 1024px)
   ========================================================================== */
@media (max-width: 1023.98px) {
  .header--nav-bar {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .header--nav-bar .container {
    padding: 0 !important;
  }

  .header--nav-bar .navbar {
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    overflow: visible !important;
  }

  .navbar--menu {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background-color: #ffffff !important;
    overflow-y: auto !important;
    padding: 1.5rem 1.25rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .navbar--menu.navbar--menu--open {
    display: flex !important;
  }

  .navbar--modal-top {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 1rem !important;
  }

  .navbar--dropdown-menu-wrapper,
  .navbar--dropdown-menu,
  nav.menu--main,
  nav.menu--main > ul.menu,
  ul[data-level="1"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  ul[data-level="1"] > li {
    width: 100% !important;
    text-align: left !important;
    display: block !important;
    margin: 0 !important;
  }

  ul[data-level="1"] > li > a {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0.85rem 0.25rem !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    gap: 0.75rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }

  ul[data-level="1"] > li > a .menu-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  ul[data-level="1"] > li > a:hover {
    color: var(--primary, #e52328) !important;
  }

  /* Submenu on mobile (Downward accordion expand beneath PRODUKTY) */
  .menu-dropdown-container {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0.35rem 0 0.65rem 2.25rem !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    display: none !important; /* hidden until expanded */
  }

  /* When expanded */
  li.menu-has-dropdown.is-expanded > .menu-dropdown-container {
    display: block !important;
  }

  li.menu-has-dropdown.is-expanded .menu-chevron {
    transform: rotate(180deg) !important;
  }

  .menu-dropdown-container .menu-dropdown-list,
  .menu-dropdown-container ul {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
  }

  .menu-dropdown-container li {
    width: 100% !important;
    text-align: left !important;
    display: block !important;
  }

  .menu-dropdown-container li a {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 0.5rem 0.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    border: none !important;
    border-radius: 0.375rem !important;
  }

  .menu-dropdown-container li a:hover {
    color: var(--primary, #e52328) !important;
    background-color: #fff1f2 !important;
  }
}



/* ==========================================================================
   Medical Disclaimer Sticky Bar (Dismissible with 12h Cookie)
   ========================================================================== */

#medical-comp-info-bar,
.medical-disclaimer-bar {
  background-color: #e52328 !important; /* MiDmed brand medical red */
  color: #ffffff !important;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#medical-comp-info-bar.is-visible,
.medical-disclaimer-bar.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

#medical-comp-info-bar.is-closing,
.medical-disclaimer-bar.is-closing {
  opacity: 0 !important;
  transform: translateY(100%) !important;
}

.medical-disclaimer-content {
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
}

.medical-disclaimer-content p {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.02em !important;
}

/* Crisp high-contrast close button */
.medical-disclaimer-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background-color: #ffffff !important;
  color: #e52328 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, background-color 0.2s ease !important;
  flex-shrink: 0 !important;
}

.medical-disclaimer-close:hover {
  background-color: #f8fafc !important;
  transform: scale(1.1) !important;
}

.medical-disclaimer-x {
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #e52328 !important;
  margin-top: -2px !important;
  display: block !important;
}

/* Adjust scroll navigation position when disclaimer is dismissed */
#scroll-navigation.disclaimer-dismissed {
  bottom: 1.5rem !important; /* bottom-6 */
}

/* ==========================================================================
   Static Breadcrumb Bar (Product Pages Only)
   ========================================================================== */
.midmed-breadcrumb-bar {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 0.65rem 0 !important;
  position: static !important;
  width: 100% !important;
  z-index: 10 !important;
}

.midmed-breadcrumb-bar nav[aria-label="breadcrumb"] {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.midmed-breadcrumb-bar ol {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.midmed-breadcrumb-bar li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

.midmed-breadcrumb-bar li a {
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}

.midmed-breadcrumb-bar li a:hover {
  color: var(--primary, #e52328) !important;
}

.midmed-breadcrumb-bar li[aria-current="page"],
.midmed-breadcrumb-bar li.active {
  color: #1e293b !important;
  font-weight: 600 !important;
}

.midmed-breadcrumb-bar li[aria-hidden="true"] {
  color: #94a3b8 !important;
}

/* ==========================================================================
   User Auth & Registration Forms (/user/login, /user/register)
   ========================================================================== */
.midmed-auth-form {
  max-width: 520px !important;
  margin: 2rem auto !important;
  padding: 2.25rem 2rem !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.02) !important;
}

.midmed-auth-form .form-item {
  margin-bottom: 1.25rem !important;
}

.midmed-auth-form .form-item label {
  display: block !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 0.35rem !important;
  font-size: 0.925rem !important;
}

.midmed-auth-form .form-text,
.midmed-auth-form .form-email,
.midmed-auth-form .form-password {
  width: 100% !important;
  height: 46px !important;
  padding: 0.5rem 0.85rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  background-color: #ffffff !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.midmed-auth-form .form-text:focus,
.midmed-auth-form .form-email:focus,
.midmed-auth-form .form-password:focus {
  outline: none !important;
  border-color: var(--primary, #e52328) !important;
  box-shadow: 0 0 0 3px rgba(229, 35, 40, 0.12) !important;
}

.midmed-auth-form .form-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  border-radius: 0.5rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, transform 0.15s ease !important;
  margin-top: 0.5rem !important;
}

.midmed-auth-form .form-submit:hover {
  background-color: #c81e23 !important;
  transform: translateY(-1px) !important;
}

/* VAT Invoice Checkbox Styling in Checkout & Profile */
.field--name-field-invoice-request {
  padding: 0.75rem 1rem !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  margin: 1rem 0 !important;
}

.field--name-field-invoice-request label {
  font-weight: 700 !important;
  color: #0f172a !important;
  cursor: pointer !important;
}

.field--name-tax-number {
  margin-top: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  background-color: #ffffff !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 0.5rem !important;
}

/* ==========================================================================
   Customer Portal / User Account Styling (/user/*)
   ========================================================================== */

/* 1. Account Navigation Tabs (Widok, Zamówienia, Książka adresowa, etc.) */
.tabs-wrapper,
nav.tabs,
.region-content > nav.tabs {
  margin: 1.5rem 0 2rem 0 !important;
  border-bottom: 2px solid #e2e8f0 !important;
  padding-bottom: 0 !important;
}

ul.tabs.primary,
ul.tabs--primary,
.tabs ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: none !important;
}

ul.tabs.primary li,
ul.tabs--primary li,
.tabs__tab {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
}

ul.tabs.primary li a,
ul.tabs--primary li a,
.tabs__tab a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.65rem 1.25rem !important;
  font-size: 0.925rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-decoration: none !important;
  border-radius: 0.625rem 0.625rem 0 0 !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
  margin-bottom: -2px !important;
}

ul.tabs.primary li a:hover,
ul.tabs--primary li a:hover,
.tabs__tab a:hover {
  color: var(--primary, #e52328) !important;
  background-color: #f8fafc !important;
}

ul.tabs.primary li.is-active a,
ul.tabs.primary li a.is-active,
ul.tabs--primary li.is-active a,
ul.tabs--primary li a.is-active,
.tabs__tab.is-active a,
.tabs__tab a.is-active {
  color: var(--primary, #e52328) !important;
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  border-bottom: 3px solid var(--primary, #e52328) !important;
  font-weight: 700 !important;
}

/* Secondary Tabs */
ul.tabs.secondary {
  display: flex !important;
  gap: 0.35rem !important;
  margin: 1rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

ul.tabs.secondary li a {
  padding: 0.4rem 0.85rem !important;
  font-size: 0.85rem !important;
  border-radius: 2rem !important;
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

ul.tabs.secondary li.is-active a,
ul.tabs.secondary li a.is-active {
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
}

/* 2. Commerce & General Tables (/user/*/orders, views-table, etc.) */
.view-commerce-user-orders table,
.view-commerce-cart-form table,
.view-content table,
.region-content table,
.views-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.875rem !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03) !important;
  margin: 1.5rem 0 !important;
}

/* Table Wrapper for mobile responsiveness */
.view-content:has(table),
.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 0.875rem !important;
  margin-bottom: 1.5rem !important;
}

/* Table Header (thead) */
.view-content table thead,
.region-content table thead,
.views-table thead {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.view-content table thead th,
.region-content table thead th,
.views-table thead th {
  padding: 0.875rem 1.25rem !important;
  font-size: 0.775rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  text-align: left !important;
  border: none !important;
  white-space: nowrap !important;
}

.view-content table thead th a,
.region-content table thead th a,
.views-table thead th a {
  color: #475569 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  transition: color 0.15s ease !important;
}

.view-content table thead th a:hover,
.region-content table thead th a:hover,
.views-table thead th a:hover {
  color: var(--primary, #e52328) !important;
}

.view-content table thead th.is-active,
.views-table thead th.is-active {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Table Rows (tbody) */
.view-content table tbody tr,
.region-content table tbody tr,
.views-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.15s ease !important;
}

.view-content table tbody tr:last-child,
.region-content table tbody tr:last-child,
.views-table tbody tr:last-child {
  border-bottom: none !important;
}

.view-content table tbody tr:hover,
.region-content table tbody tr:hover,
.views-table tbody tr:hover {
  background-color: #f8fafc !important;
}

.view-content table tbody td,
.region-content table tbody td,
.views-table tbody td {
  padding: 1rem 1.25rem !important;
  font-size: 0.9375rem !important;
  color: #334155 !important;
  vertical-align: middle !important;
  border: none !important;
}

/* 3. Specific Columns in Orders Table */
/* Order Number */
.views-field-order-number a {
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 700 !important;
  color: var(--primary, #e52328) !important;
  text-decoration: none !important;
  padding: 0.25rem 0.65rem !important;
  background-color: #fff1f2 !important;
  border-radius: 0.375rem !important;
  transition: all 0.15s ease !important;
}

.views-field-order-number a:hover {
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
}

/* Date */
.views-field-placed time {
  color: #64748b !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

/* Total Price */
.views-field-total-price__number,
.views-field-total-price {
  font-weight: 800 !important;
  color: #0f172a !important;
  font-size: 1.05rem !important;
  white-space: nowrap !important;
}

/* Status / State Badge */
.views-field-state {
  white-space: nowrap !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.025em !important;
  color: #047857 !important;
}

/* 4. Action buttons in tables and user pages */
.view-content .views-field-operations a,
.action-links a,
.button--action,
.commerce-order-item-table .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.45rem 0.85rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border-radius: 0.375rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.action-links {
  display: flex !important;
  gap: 0.75rem !important;
  margin: 1.25rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.action-links a,
ul.action-links li a {
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
  padding: 0.65rem 1.25rem !important;
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(229, 35, 40, 0.25) !important;
}

.action-links a:hover,
ul.action-links li a:hover {
  background-color: #c81e23 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(229, 35, 40, 0.35) !important;
}

/* 5. Address book cards (/user/*/address-book) */
.profile-overview,
.address-book {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 1.5rem !important;
  margin: 1.5rem 0 !important;
}

.profile-overview .profile,
.address-book .profile,
.profile--customer {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.875rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.profile--customer .field--name-address {
  line-height: 1.6 !important;
  color: #334155 !important;
  font-size: 0.95rem !important;
}

/* Empty view message */
.view-empty {
  padding: 2.5rem 1.5rem !important;
  background-color: #f8fafc !important;
  border: 1px dashed #cbd5e1 !important;
  border-radius: 0.875rem !important;
  text-align: center !important;
  color: #64748b !important;
  font-weight: 500 !important;
  font-size: 1rem !important;
  margin: 1.5rem 0 !important;
}

/* ==========================================================================
   Page Titles (H1) in Customer Portal & Commerce
   ========================================================================== */
.path-user h1.page-title,
.path-user .page-title,
.path-cart h1.page-title,
.path-checkout h1.page-title {
  font-size: 1.75rem !important;
  line-height: 2.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
  margin: 1.25rem 0 1.5rem 0 !important;
}

@media (min-width: 768px) {
  .path-user h1.page-title,
  .path-user .page-title,
  .path-cart h1.page-title,
  .path-checkout h1.page-title {
    font-size: 2.125rem !important;
    line-height: 2.5rem !important;
    margin: 1.75rem 0 2rem 0 !important;
  }
}

/* ==========================================================================
   Single Order View Page (/user/*/orders/*)
   ========================================================================== */
.midmed-order-page {
  max-width: 1200px !important;
  margin: 1.5rem auto 3rem auto !important;
  padding: 0 1rem !important;
}

/* 1. Order Header Card */
.midmed-order-header-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02) !important;
}

.midmed-order-header-top {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  padding-bottom: 1.25rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

@media (min-width: 640px) {
  .midmed-order-header-top {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

.midmed-order-id-group {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.75rem !important;
}

.midmed-order-label {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important;
}

.midmed-order-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.65rem !important;
  background-color: #fff1f2 !important;
  color: var(--primary, #e52328) !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  border-radius: 0.5rem !important;
}

.midmed-order-date {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin-left: 0.25rem !important;
}

.midmed-order-actions-group {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.midmed-order-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 2rem !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  background-color: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}

.midmed-order-back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  text-decoration: none !important;
  padding: 0.45rem 0.9rem !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  transition: all 0.15s ease !important;
}

.midmed-order-back-btn:hover {
  color: var(--primary, #e52328) !important;
  border-color: #cbd5e1 !important;
  background-color: #ffffff !important;
}

.midmed-order-back-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Order Header Stats */
.midmed-order-header-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 1.5rem !important;
  padding-top: 1.25rem !important;
}

.midmed-order-stat {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
}

.midmed-stat-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

.midmed-stat-val {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
}

.midmed-stat-price {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--primary, #e52328) !important;
}

/* 2. Main Layout Grid */
.midmed-order-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  align-items: start !important;
}

@media (min-width: 1024px) {
  .midmed-order-grid {
    grid-template-columns: 1fr 360px !important;
  }
}

.midmed-order-main,
.midmed-order-sidebar {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.75rem !important;
}

/* 3. Reusable Cards */
.midmed-order-card {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02) !important;
}

.midmed-order-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 1.25rem !important;
}

.midmed-card-icon {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  color: var(--primary, #e52328) !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.midmed-card-title {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

/* 4. Products Table */
.midmed-order-table-box table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.midmed-order-table-box thead {
  background-color: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.midmed-order-table-box th {
  padding: 0.75rem 1rem !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
  text-align: left !important;
  border: none !important;
}

.midmed-order-table-box tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
}

.midmed-order-table-box tbody tr:last-child {
  border-bottom: none !important;
}

.midmed-order-table-box td {
  padding: 1rem !important;
  font-size: 0.95rem !important;
  color: #334155 !important;
  vertical-align: middle !important;
  border: none !important;
}

.midmed-order-table-box .field--name-title,
.midmed-order-table-box .order-item-title,
.midmed-order-table-box .views-field-title {
  font-weight: 600 !important;
  color: #0f172a !important;
}

.midmed-order-table-box .field--name-unit-price,
.midmed-order-table-box .field--name-total-price,
.midmed-order-table-box .views-field-total-price__number {
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
}

/* Order Total Box inside Products Card */
.midmed-order-total-box {
  margin-top: 1.5rem !important;
  padding-top: 1.25rem !important;
  border-top: 2px solid #f1f5f9 !important;
}

.midmed-order-total-box table {
  width: 100% !important;
  max-width: 380px !important;
  margin-left: auto !important;
  border-collapse: collapse !important;
  box-shadow: none !important;
  border: none !important;
}

.midmed-order-total-box td {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.95rem !important;
  border: none !important;
}

.midmed-order-total-box .order-total-line__total,
.midmed-order-total-box tr:last-child {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--primary, #e52328) !important;
  border-top: 2px solid #e2e8f0 !important;
  padding-top: 0.75rem !important;
}

/* 5. Address Bodies */
.midmed-order-address-body {
  font-size: 0.925rem !important;
  line-height: 1.65 !important;
  color: #334155 !important;
}

.midmed-order-address-body .field__label {
  display: none !important;
}

.midmed-order-address-body .address {
  font-style: normal !important;
}

/* ==========================================================================
   Downloads Section in Product Accordion (.field--name-field-pliki)
   ========================================================================== */
.field--name-field-pliki .field__label {
  display: none !important;
}

.field--name-field-pliki img,
.midmed-media-document img,
.field--name-field-pliki .file__icon {
  display: none !important;
}

.field--name-field-pliki .field__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  margin: 0.5rem 0 0 0 !important;
}

.field--name-field-pliki .field__item,
.field--name-field-pliki .media--type-document,
.field--name-field-pliki .field--name-field-media-document,
.midmed-media-document {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.midmed-file-download-item,
.field--name-field-pliki .file {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 0.85rem 1.25rem !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  max-width: 600px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.03) !important;
  cursor: pointer !important;
}

.midmed-file-download-item:hover,
.field--name-field-pliki .file:hover {
  background-color: #ffffff !important;
  border-color: var(--primary, #e52328) !important;
  box-shadow: 0 4px 14px rgba(229, 35, 40, 0.12) !important;
  transform: translateX(4px) !important;
}

.midmed-file-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.midmed-file-icon svg {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  display: block !important;
}

.midmed-file-link-wrap {
  display: inline-flex !important;
  align-items: center !important;
}

.midmed-file-link-wrap a,
.field--name-field-pliki a {
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  color: #0f172a !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.midmed-file-download-item:hover .midmed-file-link-wrap a,
.field--name-field-pliki a:hover {
  color: var(--primary, #e52328) !important;
}

.midmed-file-size {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #64748b !important;
  background-color: #f1f5f9 !important;
  padding: 0.2rem 0.5rem !important;
  border-radius: 0.375rem !important;
  margin-left: 0.25rem !important;
  white-space: nowrap !important;
}

.midmed-file-download-icon {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.midmed-file-download-item:hover .midmed-file-download-icon {
  color: var(--primary, #e52328) !important;
  transform: translateY(2px) !important;
}

/* ==========================================================================
   Ask about Product Button (.midmed-btn-ask-product)
   ========================================================================== */
.midmed-btn-ask-product {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.85rem !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 0.85rem 1.35rem !important;
  background-color: #f1f5f9 !important;
  border: 1.5px solid #cbd5e1 !important;
  border-left: 4px solid var(--primary, #e52328) !important;
  border-radius: 0.75rem !important;
  color: #1e293b !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.midmed-btn-ask-product .midmed-btn-ask-product-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary, #e52328) !important;
  background-color: #ffffff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 9999px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.midmed-btn-ask-product .midmed-btn-ask-product-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--primary, #e52328) !important;
  display: block !important;
}

.midmed-btn-ask-product .midmed-btn-ask-product-label {
  font-weight: 700 !important;
  font-size: 0.975rem !important;
  color: #1e293b !important;
  transition: color 0.2s ease !important;
}

.midmed-btn-ask-product .midmed-btn-ask-product-arrow {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primary, #e52328) !important;
  opacity: 0.85 !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.midmed-btn-ask-product:hover {
  background-color: #ffffff !important;
  border-color: var(--primary, #e52328) !important;
  border-left-color: var(--primary, #e52328) !important;
  box-shadow: 0 4px 16px rgba(229, 35, 40, 0.16) !important;
  transform: translateY(-2px) !important;
}

.midmed-btn-ask-product:hover .midmed-btn-ask-product-icon {
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
}

.midmed-btn-ask-product:hover .midmed-btn-ask-product-icon svg {
  stroke: #ffffff !important;
}

.midmed-btn-ask-product:hover .midmed-btn-ask-product-label {
  color: var(--primary, #e52328) !important;
}

.midmed-btn-ask-product:hover .midmed-btn-ask-product-arrow {
  opacity: 1 !important;
  transform: translateX(4px) !important;
}

/* ==========================================================================
   Product Quantity Input - Remove Double Borders & Refine Controls
   ========================================================================== */
.field--name-variations input[type="number"],
.commerce-order-item-add-to-cart-form input[type="number"],
.commerce-cart-flyout-add-to-cart input[type="number"],
[data-product] input[type="number"],
.form-item-quantity input,
.form-type-number input,
.quantity input,
.form-element--type-number {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  border-radius: 0 !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: #0f172a !important;
  padding: 0.45rem 0.25rem !important;
  margin: 0 !important;
  min-height: auto !important;
  height: auto !important;
}

.field--name-variations input[type="number"]:focus,
.commerce-order-item-add-to-cart-form input[type="number"]:focus,
.commerce-cart-flyout-add-to-cart input[type="number"]:focus,
[data-product] input[type="number"]:focus,
.form-item-quantity input:focus,
.form-type-number input:focus,
.form-element--type-number:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Outer wrapper clean border */
.field--name-variations div:has(> input[type="number"]),
.commerce-order-item-add-to-cart-form div:has(> input[type="number"]),
.commerce-cart-flyout-add-to-cart div:has(> input[type="number"]),
[data-product] div:has(> input[type="number"]) {
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 0.625rem !important;
  background-color: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* ==========================================================================
   Checkout Login Pane & Multi-Column Cards (.checkout-pane-login)
   ========================================================================== */
.checkout-pane-login {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 2rem !important;
  margin: 1.5rem 0 2.5rem 0 !important;
}

.checkout-pane-login > div,
.checkout-pane-login .pane-login,
.checkout-pane-login .pane-guest {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  padding: 2rem !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.checkout-pane-login h3,
.checkout-pane-login legend {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 1.25rem !important;
}

.checkout-pane-login .form-submit {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 0.625rem !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

/* ==========================================================================
   Checkbox and Radio Layout - Checkbox on Left, Label immediately on Right
   ========================================================================== */
.form-type-checkbox,
.form-type--checkbox,
.form-boolean--type-checkbox,
.form-item-field-invoice-request-value,
.form-item-field-invoice-same-address-value,
.field--name-field-invoice-request .form-item,
.field--name-field-invoice-same-address .form-item,
.checkout-pane .form-type-checkbox,
.midmed-order-page .form-type-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.75rem !important;
  margin: 0.85rem 0 !important;
  cursor: pointer !important;
}

.form-type-checkbox input[type="checkbox"],
.form-type--checkbox input[type="checkbox"],
.form-boolean--type-checkbox input[type="checkbox"],
.form-item-field-invoice-request-value input[type="checkbox"],
.form-item-field-invoice-same-address-value input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  accent-color: var(--primary, #e52328) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

.form-type-checkbox label,
.form-type--checkbox label,
.form-boolean--type-checkbox label,
.form-type-checkbox .option,
.form-type--checkbox .option,
.form-item-field-invoice-request-value label,
.form-item-field-invoice-same-address-value label {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  order: 2 !important;
}

/* ==========================================================================
   Tpay & Payment Gateways Card Styling
   ========================================================================== */
.payment-information,
.checkout-pane-payment-information,
.checkout-pane-shipping-information {
  margin: 1.5rem 0 !important;
}

.payment-information fieldset,
.checkout-pane-payment-information fieldset,
.checkout-pane-shipping-information fieldset {
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  padding: 1.75rem !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.payment-information legend,
.checkout-pane-payment-information legend,
.checkout-pane-shipping-information legend {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding: 0 0.5rem !important;
}

/* Payment Radio Options */
.payment-information .form-type-radio,
.checkout-pane-shipping-information .form-type-radio {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  padding: 1rem 1.25rem !important;
  margin: 0.65rem 0 !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  background-color: #f8fafc !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.payment-information .form-type-radio:hover,
.checkout-pane-shipping-information .form-type-radio:hover {
  background-color: #ffffff !important;
  border-color: var(--primary, #e52328) !important;
  box-shadow: 0 4px 12px rgba(229, 35, 40, 0.08) !important;
}

.payment-information .form-type-radio input[type="radio"]:checked + label,
.checkout-pane-shipping-information .form-type-radio input[type="radio"]:checked + label {
  color: var(--primary, #e52328) !important;
  font-weight: 700 !important;
}

.payment-information .form-type-radio input[type="radio"],
.checkout-pane-shipping-information .form-type-radio input[type="radio"] {
  width: 20px !important;
  height: 20px !important;
  accent-color: var(--primary, #e52328) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* ==========================================================================
   Comprehensive Checkout Flow & Order Information Styling
   Scoped strictly to main content (does NOT touch site-header or footer)
   ========================================================================== */
.path-checkout main {
  background-color: #f8fafc !important;
  padding: 2.5rem 0 4rem 0 !important;
}

.path-checkout main .layout-content,
.path-checkout main .commerce-checkout-flow,
.midmed-checkout-flow {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
}

/* 1. Checkout Panes as Clean, White Unified Cards */
.checkout-pane {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  padding: 2rem !important;
  margin-bottom: 1.75rem !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
}

.checkout-pane fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.checkout-pane > legend,
.checkout-pane fieldset > legend,
.checkout-pane > h3,
.checkout-pane > h2 {
  float: none !important;
  position: static !important;
  display: block !important;
  width: 100% !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 1.5rem 0 !important;
  padding: 0 0 0.85rem 0 !important;
  border-bottom: 2px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2. Text Input Styling in Checkout */
.checkout-pane input.form-text,
.checkout-pane input.form-email,
.checkout-pane input.form-tel,
.checkout-pane select.form-select {
  width: 100% !important;
  min-height: 46px !important;
  padding: 0.65rem 1rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 0.625rem !important;
  background-color: #ffffff !important;
  font-size: 0.975rem !important;
  color: #0f172a !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
}

.checkout-pane input.form-text:focus,
.checkout-pane input.form-email:focus,
.checkout-pane input.form-tel:focus,
.checkout-pane select.form-select:focus {
  border-color: var(--primary, #e52328) !important;
  box-shadow: 0 0 0 3px rgba(229, 35, 40, 0.12) !important;
  outline: none !important;
}

.checkout-pane .form-item label {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
}

.checkout-pane .form-item .description {
  font-size: 0.825rem !important;
  color: #64748b !important;
  margin-top: 0.35rem !important;
}

/* 3. Address Grid — mobile single column, desktop 2 columns */
.checkout-pane .address-container-inline {
  display: grid !important;
  grid-template-columns: 1fr !important; /* single column on mobile */
  gap: 1rem !important;
}

@media (min-width: 600px) {
  .checkout-pane .address-container-inline {
    grid-template-columns: 1fr 1fr !important;
  }
}

.checkout-pane .form-item-billing-information-profile-address-0-address-given-name,
.checkout-pane .form-item-shipping-information-shipping-profile-address-0-address-given-name {
  grid-column: span 1 !important;
}

/* 4. Dedicated Invoice Section Styling */
.field--name-field-invoice-request {
  margin: 1.75rem 0 1rem 0 !important;
  padding: 1.15rem 1.35rem !important;
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  display: block !important;
}

.field--name-field-invoice-request .form-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin: 0 !important;
}

.field--name-field-invoice-company,
.field--name-tax-number,
.field--name-field-invoice-same-address,
.field--name-field-invoice-street,
.field--name-field-invoice-postal-code,
.field--name-field-invoice-city,
.field--name-field-invoice-country {
  margin-top: 1rem !important;
}

.field--name-field-invoice-street,
.field--name-field-invoice-postal-code,
.field--name-field-invoice-city,
.field--name-field-invoice-country {
  background-color: #f8fafc !important;
  border-left: 3px solid var(--primary, #e52328) !important;
  padding: 0.75rem 1rem !important;
  border-radius: 0.5rem !important;
}


/* 5. Order Summary Sidebar Box (Clean Single-Card, No Nested Boxes or Scrollbars) */
.layout-region-checkout-secondary,
.commerce-checkout-order-summary {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1.25rem !important;
  padding: 2rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
}

.commerce-checkout-order-summary .view,
.commerce-checkout-order-summary .view-content,
.layout-region-checkout-secondary .view {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

.commerce-checkout-order-summary h3,
.layout-region-checkout-secondary h2 {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 1.25rem 0 !important;
  padding: 0 0 0.5rem 0 !important;
  border-bottom: 2px solid var(--primary, #e52328) !important;
  display: inline-block !important;
  width: auto !important;
}

/* Products Table in Summary */
.commerce-checkout-order-summary table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
  overflow: visible !important;
  box-shadow: none !important;
  margin: 0 0 1rem 0 !important;
  border: none !important;
  background: transparent !important;
}

.commerce-checkout-order-summary thead {
  display: none !important;
}

.commerce-checkout-order-summary tr {
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: transparent !important;
}

.commerce-checkout-order-summary td {
  padding: 0.85rem 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle !important;
}

.commerce-checkout-order-summary td.views-field-quantity {
  width: 32px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  font-size: 0.875rem !important;
  white-space: nowrap !important;
  padding-right: 0.5rem !important;
}

.commerce-checkout-order-summary td.views-field-purchased-entity,
.commerce-checkout-order-summary td.views-field-title {
  font-weight: 600 !important;
  color: #1e293b !important;
  font-size: 0.925rem !important;
  line-height: 1.4 !important;
  padding-right: 0.75rem !important;
}

.commerce-checkout-order-summary td.views-field-total-price__number,
.commerce-checkout-order-summary td.views-field-total-price {
  text-align: right !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 0.975rem !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* Order Totals Clean Layout (No Inner Box) */
.commerce-checkout-order-summary .commerce-order-total-summary,
.commerce-checkout-order-summary .order-total-line-summary {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 0 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.commerce-checkout-order-summary .order-total-line {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0.45rem 0 !important;
  font-size: 0.925rem !important;
  color: #475569 !important;
}

.commerce-checkout-order-summary .order-total-line-label {
  font-weight: 500 !important;
  color: #475569 !important;
}

.commerce-checkout-order-summary .order-total-line-value {
  font-weight: 700 !important;
  color: #0f172a !important;
}

.commerce-checkout-order-summary .order-total-line__subtotal {
  border-bottom: 1px dashed #e2e8f0 !important;
  padding-bottom: 0.65rem !important;
}

.commerce-checkout-order-summary .order-total-line__total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  border-top: 2px solid #f1f5f9 !important;
  margin-top: 0.75rem !important;
  padding-top: 0.85rem !important;
}

.commerce-checkout-order-summary .order-total-line__total .order-total-line-label {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}

.commerce-checkout-order-summary .order-total-line__total .order-total-line-value {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: var(--primary, #e52328) !important;
  letter-spacing: -0.02em !important;
}


/* 6. Checkout Actions (Przejdź dalej / Wróć) */
.checkout-pane .form-actions,
.midmed-checkout-flow .form-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid #e2e8f0 !important;
}

@media (max-width: 480px) {
  .checkout-pane .form-actions,
  .midmed-checkout-flow .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .midmed-checkout-flow .form-actions .button--primary,
  .midmed-checkout-flow .form-actions input[type="submit"].button--primary,
  .midmed-checkout-flow .form-actions .link--previous,
  .midmed-checkout-flow .form-actions a.button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

.midmed-checkout-flow .form-actions .button--primary,
.midmed-checkout-flow .form-actions input[type="submit"].button--primary {
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  padding: 0.85rem 2.25rem !important;
  border-radius: 0.75rem !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(229, 35, 40, 0.3) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.midmed-checkout-flow .form-actions .button--primary:hover {
  background-color: #cc1b20 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(229, 35, 40, 0.4) !important;
}

.midmed-checkout-flow .form-actions .link--previous,
.midmed-checkout-flow .form-actions a.button {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.975rem !important;
  padding: 0.85rem 1.75rem !important;
  border-radius: 0.75rem !important;
  border: 1px solid #cbd5e1 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.midmed-checkout-flow .form-actions .link--previous:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Radio buttons for Shipping & Payment in single horizontal line with label */
.checkout-pane .form-type--radio,
.checkout-pane .form-item--radio,
.checkout-pane .form-type-radio,
.checkout-pane .form-radios .form-item,
.payment-method--new,
.payment-method--stored {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.85rem !important;
  margin-bottom: 0.85rem !important;
  cursor: pointer !important;
  padding: 0.85rem 1.15rem !important;
  background-color: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 0.75rem !important;
  transition: all 0.2s ease !important;
}

.checkout-pane .form-type--radio:hover,
.checkout-pane .form-item--radio:hover,
.checkout-pane .form-type-radio:hover,
.payment-method--new:hover {
  background-color: #ffffff !important;
  border-color: var(--primary, #e52328) !important;
}

.checkout-pane input[type="radio"] {
  margin: 0 !important;
  accent-color: var(--primary, #e52328) !important;
  cursor: pointer !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  flex-shrink: 0 !important;
}

.checkout-pane .form-type-radio label,
.checkout-pane .form-type--radio label,
.checkout-pane .form-item--radio label,
.checkout-pane .form-radios label {
  margin: 0 !important;
  cursor: pointer !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  display: inline-block !important;
  width: auto !important;
}

/* Recalculate Shipping button - Small & subtle */
.checkout-pane input[name*="recalculate_shipping"],
.commerce-shipping-recalculate,
.field--name-shipping-information input.button,
.checkout-pane input[value*="Przelicz"],
.checkout-pane input[value*="Recalculate"] {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  padding: 0.4rem 0.95rem !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  width: auto !important;
  min-height: auto !important;
  display: inline-block !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.checkout-pane input[name*="recalculate_shipping"]:hover,
.commerce-shipping-recalculate:hover,
.checkout-pane input[value*="Przelicz"]:hover,
.checkout-pane input[value*="Recalculate"]:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
  transform: none !important;
}


/* ==========================================================================
   7. Checkout Complete Step & Registration Separation
   ========================================================================== */
.checkout-pane-completion-message {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1.25rem !important;
  padding: 2.5rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  text-align: center !important;
  margin-bottom: 2rem !important;
}

.checkout-pane-completion-message h2,
.checkout-pane-completion-message h3 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border: none !important;
  margin-bottom: 1rem !important;
  padding: 0 !important;
}

.checkout-pane-completion-message p {
  font-size: 1.05rem !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* Separate & Highlight "Utwórz swoje konto użytkownika" */
.checkout-pane-completion-register,
.field--name-field-completion-register {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-left: 5px solid var(--primary, #e52328) !important;
  border-radius: 1.25rem !important;
  padding: 2rem 2.5rem !important;
  margin: 2.5rem 0 !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04) !important;
}

.checkout-pane-completion-register legend,
.checkout-pane-completion-register h3,
.checkout-pane-completion-register h2 {
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  border-bottom: 2px solid #f1f5f9 !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.25rem !important;
}

.checkout-pane-completion-register .form-submit {
  margin-top: 1.25rem !important;
  background-color: var(--primary, #e52328) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  padding: 0.85rem 2rem !important;
  border-radius: 0.75rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.checkout-pane-completion-register .form-submit:hover {
  background-color: #cc1b20 !important;
  box-shadow: 0 4px 14px rgba(229, 35, 40, 0.35) !important;
}



/* ==========================================================================
   RESPONSIVE FIXES — Global
   ========================================================================== */

/* Cart form actions — stack vertically on mobile */
@media (max-width: 600px) {
  .commerce-cart-form .form-actions,
  .views-form-commerce-cart-form-default .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .commerce-cart-form .form-actions input[type="submit"],
  .commerce-cart-form .form-actions a,
  .commerce-cart-form .form-actions button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}

/* Offcanvas cart close button — increase touch target */
.cart--cart-offcanvas__close button {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}

/* Order history table — horizontal scroll on mobile */
.midmed-order-page,
.view-commerce-user-orders {
  overflow-x: visible !important;
}

.midmed-order-table-box,
.view-commerce-user-orders .view-content {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.midmed-order-table-box table,
.view-commerce-user-orders table {
  min-width: 480px !important;
}

/* Checkout pane — full width on mobile */
@media (max-width: 767px) {
  .checkout-pane {
    padding: 1.25rem !important;
  }

  .midmed-checkout-flow {
    padding: 0 0.75rem !important;
  }

  /* Payment/shipping radio options — allow text to wrap on narrow screens */
  .checkout-pane .form-type--radio,
  .checkout-pane .form-item--radio,
  .checkout-pane .form-type-radio,
  .checkout-pane .form-radios .form-item {
    flex-wrap: wrap !important;
  }
}

/* Summary sidebar — full width on mobile, side panel on desktop */
@media (max-width: 1023px) {
  .path-checkout .layout-region--secondary {
    width: 100% !important;
    max-width: 100% !important;
  }
}