/* Taka Ramka boutique storefront 1.3.3 */
:root {
  --tr-bg: #fffaf8;
  --tr-paper: #ffffff;
  --tr-paper-soft: #fdf7f4;
  --tr-blush: #f4dfdc;
  --tr-rose: #c27d78;
  --tr-rose-dark: #9f615d;
  --tr-sage: #95aa9d;
  --tr-sage-light: #edf3ef;
  --tr-ink: #3f3937;
  --tr-muted: #7b706d;
  --tr-line: rgba(76, 59, 54, .12);
  --tr-shadow: 0 18px 48px rgba(85, 63, 58, .10);
  --tr-radius: 24px;
  --tr-header-h: 76px;
}

html { scroll-behavior: smooth; }
body {
  background: var(--tr-bg);
  color: var(--tr-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
body.tr-menu-open,
body.tr-cart-open { overflow: hidden; }

a { color: var(--tr-rose-dark); }
a:hover { color: #824d4a; }
h1, h2, h3, h4 { color: var(--tr-ink); }
h1, h2, .tr-serif { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.025em; }

#top { display: none !important; }
#container > main { min-height: 55vh; }

/* ===== Compact boutique header ===== */
.tr-site-header {
  position: sticky;
  top: 0;
  z-index: 1600;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--tr-line);
}
.tr-header-row {
  min-height: var(--tr-header-h);
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(260px, 1fr) auto;
  gap: 22px;
  align-items: center;
}
.tr-logo { min-width: 0; }
.tr-logo a { display: inline-flex; align-items: center; text-decoration: none; }
.tr-logo img { max-height: 62px; max-width: 210px; width: auto; object-fit: contain; }
.tr-logo h1 { margin: 0; font-size: 1.55rem; }
.tr-logo h1 a { color: var(--tr-ink); }

.tr-icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tr-ink);
  display: inline-grid;
  place-items: center;
  font-size: 1.18rem;
  transition: background .18s ease, color .18s ease;
}
.tr-icon-button:hover { background: var(--tr-paper-soft); color: var(--tr-rose-dark); }
.tr-menu-open-button,
.tr-search-button { display: none; }

#tr-search-wrap { min-width: 0; }
#search { margin: 0 !important; }
#search .input-group { width: 100%; }
#search .form-control {
  min-height: 46px;
  border: 1px solid var(--tr-line);
  border-right: 0;
  border-radius: 999px 0 0 999px !important;
  background: #fff;
  padding-left: 20px;
  color: var(--tr-ink);
  box-shadow: none;
}
#search .btn,
#search button {
  min-width: 54px;
  min-height: 46px;
  border: 1px solid var(--tr-line) !important;
  border-left: 0 !important;
  border-radius: 0 999px 999px 0 !important;
  background: #fff !important;
  color: var(--tr-ink) !important;
}
#search .form-control:focus {
  border-color: rgba(194,125,120,.45);
  box-shadow: none;
}
#search .form-control:focus + .btn { border-color: rgba(194,125,120,.45) !important; }

.tr-header-cart { width: auto !important; margin: 0 !important; padding: 0 !important; position: relative; z-index: 1800; }
#cart .dropdown { display: block !important; }
#cart .btn,
#cart > .btn,
.tr-header-cart #cart .btn {
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid var(--tr-line) !important;
  background: var(--tr-paper-soft) !important;
  color: var(--tr-ink) !important;
  box-shadow: none !important;
  padding: 10px 16px !important;
  font-weight: 700;
  white-space: nowrap;
}
#cart .btn:hover { background: var(--tr-blush) !important; color: var(--tr-rose-dark) !important; }
#cart .btn i { color: var(--tr-rose-dark) !important; }
#cart .dropdown-menu {
  width: 410px;
  max-width: calc(100vw - 24px);
  border: 1px solid var(--tr-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--tr-shadow) !important;
  background: #fff !important;
  padding: 14px !important;
  z-index: 1900 !important;
}
.tr-cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 12px;
  border-bottom: 1px solid var(--tr-line);
  margin-bottom: 8px;
}
.tr-cart-drawer-head strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; }
.tr-cart-close {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--tr-paper-soft);
  color: var(--tr-ink);
}
#cart .table { color: var(--tr-ink); }
#cart .table > :not(caption) > * > * { border-color: var(--tr-line); }
#cart .img-thumbnail { border-radius: 12px; border-color: var(--tr-line); }
#cart .btn-danger { min-height: 34px !important; width: 34px; padding: 5px !important; border-radius: 50% !important; background: #f3e2df !important; color: var(--tr-rose-dark) !important; border: 0 !important; }
.tr-cart-actions { display: grid; gap: 8px; margin-top: 12px; }
.tr-cart-view,
.tr-cart-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}
.tr-cart-view { border: 1px solid var(--tr-line); color: var(--tr-ink); background: #fff; }
.tr-cart-checkout { background: var(--tr-rose); color: #fff !important; }
.tr-cart-checkout:hover { background: var(--tr-rose-dark); }

/* ===== Desktop category navigation ===== */
#menu,
#menu.navbar {
  margin: 0 auto 18px;
  padding: 0 !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tr-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 800;
}
@media (min-width: 992px) {
  #menu .navbar-toggler,
  #menu #category { display: none !important; }
}
#menu #navbar-menu { justify-content: center; }
#menu .navbar-nav { gap: 3px; align-items: center; }
#menu .navbar-nav > .nav-item > a,
#menu .navbar-nav > .nav-item > .nav-link,
#menu .navbar-nav > .nav-item > .dropdown-item {
  color: var(--tr-ink) !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 13px 15px !important;
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
}
#menu .navbar-nav > .nav-item > a:hover { color: var(--tr-rose-dark) !important; background: var(--tr-paper-soft) !important; }
#menu .dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--tr-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--tr-shadow) !important;
  padding: 10px !important;
}
#menu .dropdown-item { color: var(--tr-ink) !important; border-radius: 10px; padding: 9px 12px; }
#menu .dropdown-item:hover { color: var(--tr-rose-dark) !important; background: var(--tr-paper-soft) !important; }
.tr-menu-panel-head { display: none; }
.tr-menu-backdrop,
.tr-cart-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(35, 27, 25, .38);
}
.tr-menu-backdrop { z-index: 2250; }
.tr-cart-backdrop { z-index: 2450; }

/* ===== General controls ===== */
.btn-primary {
  --bs-btn-bg: var(--tr-rose);
  --bs-btn-border-color: var(--tr-rose);
  --bs-btn-hover-bg: var(--tr-rose-dark);
  --bs-btn-hover-border-color: var(--tr-rose-dark);
  --bs-btn-active-bg: var(--tr-rose-dark);
  --bs-btn-active-border-color: var(--tr-rose-dark);
}
.form-control:focus, .form-select:focus { border-color: var(--tr-rose); box-shadow: 0 0 0 .18rem rgba(194,125,120,.15); }
.breadcrumb { background: transparent; padding-left: 0; font-size: .9rem; }

/* ===== Home ===== */
.tr-home { padding: 4px 0 48px; }
.tr-hero {
  position: relative;
  min-height: 470px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(135deg, #f5e5e1, #eef3ef);
  border: 1px solid var(--tr-line);
  box-shadow: 0 8px 30px rgba(85,63,58,.05);
}
.tr-hero-media { position: absolute; inset: 0; }
.tr-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,250,248,.96) 0%, rgba(255,250,248,.84) 35%, rgba(255,250,248,.10) 68%, rgba(255,250,248,.03) 100%);
}
.tr-hero-media img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: clamp(520px, 58%, 760px); height: auto; max-width: none; display: block; }
.tr-hero-logo-mode .tr-hero-media { display: grid; place-items: center; padding-left: 48%; background: radial-gradient(circle at 76% 45%, #fff 0, #f7e8e5 40%, #edf3ef 100%); }
.tr-hero-logo-mode .tr-hero-media img { width: min(38%, 360px); height: auto; object-fit: contain; }
.tr-hero-logo-mode .tr-hero-media::after { background: linear-gradient(90deg, rgba(255,250,248,1) 0%, rgba(255,250,248,.95) 45%, rgba(255,250,248,.12) 72%); }
.tr-hero-card {
  position: relative;
  z-index: 2;
  width: min(560px, 58%);
  padding: clamp(42px, 6vw, 78px);
  padding-right: 10px;
}
.tr-eyebrow {
  display: inline-flex;
  margin-bottom: 10px;
  color: var(--tr-rose-dark);
  font-size: .73rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .17em;
}
.tr-hero h1 { margin: 0 0 18px; font-size: clamp(2.3rem, 4.8vw, 4.6rem); line-height: 1.02; }
.tr-hero p { max-width: 500px; margin: 0 0 28px; color: var(--tr-muted); font-size: clamp(1rem, 1.5vw, 1.16rem); line-height: 1.7; }
.tr-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 21px;
  border-radius: 999px;
  background: var(--tr-rose);
  color: #fff !important;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 26px rgba(159,97,93,.18);
  transition: transform .18s ease, background .18s ease;
}
.tr-button:hover { background: var(--tr-rose-dark); transform: translateY(-2px); }

.tr-benefit-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid var(--tr-line);
  border-radius: 22px;
  background: #fff;
  overflow: hidden;
}
.tr-benefit { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; min-height: 94px; padding: 18px 20px; border-right: 1px solid var(--tr-line); }
.tr-benefit:last-child { border-right: 0; }
.tr-benefit > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--tr-paper-soft); color: var(--tr-rose-dark); font-size: 1.05rem; }
.tr-benefit span { min-width: 0; }
.tr-benefit strong, .tr-benefit small { display: block; }
.tr-benefit strong { font-size: .93rem; margin-bottom: 3px; }
.tr-benefit small { color: var(--tr-muted); line-height: 1.35; }

.tr-section { margin-top: clamp(44px, 6vw, 74px); }
.tr-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 22px; }
.tr-section-heading h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); margin: 0; }
.tr-section-heading > p { max-width: 420px; color: var(--tr-muted); margin: 0; line-height: 1.55; }

.tr-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tr-category-tile {
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--tr-line);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(85,63,58,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tr-category-tile:hover { transform: translateY(-3px); box-shadow: var(--tr-shadow); }
.tr-category-photo { overflow: hidden; background: var(--tr-paper-soft); aspect-ratio: 1.42 / 1; }
.tr-category-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; transition: transform .35s ease; }
.tr-category-tile:hover img { transform: scale(1.035); }
.tr-category-label { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 17px; color: var(--tr-ink); }
.tr-category-label span { font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; }
.tr-category-label i { color: var(--tr-rose-dark); font-size: .85rem; }

.tr-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tr-product-cell { min-width: 0; }
.product-thumb {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--tr-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 5px 20px rgba(85,63,58,.045);
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-thumb:hover { transform: translateY(-3px); box-shadow: var(--tr-shadow); }
.product-thumb .image { overflow: hidden; background: #faf8f7; }
.product-thumb .image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .35s ease; }
.product-thumb:hover .image img { transform: scale(1.025); }
.product-thumb .content { padding: 13px 14px 15px !important; }
.product-thumb h4 { min-height: 2.45em; margin-bottom: 8px; font-size: 1rem; line-height: 1.25; font-weight: 700; }
.product-thumb h4 a { color: var(--tr-ink); text-decoration: none; }
.product-thumb .description {
  display: block !important;
  min-width: 0;
}
.product-thumb .description > p {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;
  margin: 0 0 10px !important;
  color: var(--tr-muted);
  font-size: .88rem;
  line-height: 1.4;
}
.product-thumb .content {
  display: flex !important;
  flex-direction: column;
}
.product-thumb .content > form { margin-top: auto; }
.product-thumb .rating { display: none !important; }
.product-thumb .price { margin-bottom: 11px; color: var(--tr-rose-dark); font-size: 1.07rem; font-weight: 850; }
.product-thumb .price-old { color: var(--tr-muted); font-weight: 500; }
.product-thumb .button { display: grid !important; grid-template-columns: 1fr !important; gap: 6px; }
.product-thumb .button button {
  min-height: 43px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--tr-rose) !important;
  color: #fff !important;
  font-weight: 750;
}
.product-thumb .button button:hover { background: var(--tr-rose-dark) !important; }
.product-thumb .button button:nth-child(2),
.product-thumb .button button:nth-child(3) { display: none !important; }

.tr-mosaic { display: grid; grid-template-columns: 1.15fr .85fr 1fr; grid-template-rows: 230px 230px; grid-auto-rows: 230px; gap: 12px; }
.tr-mosaic-item { overflow: hidden; border-radius: 22px; background: var(--tr-paper-soft); }
.tr-mosaic-item img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; transition: transform .35s ease; }
.tr-mosaic-item:hover img { transform: scale(1.025); }
.tr-mosaic-item-1 { grid-row: 1 / 3; }
.tr-mosaic-item-4 { grid-column: 3; grid-row: 1 / 3; }
.tr-mosaic-count-1 { grid-template-columns: 1fr; grid-template-rows: 440px; }
.tr-mosaic-count-1 .tr-mosaic-item-1 { grid-column: 1; grid-row: 1; }
.tr-mosaic-count-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 400px; }
.tr-mosaic-count-2 .tr-mosaic-item-1,
.tr-mosaic-count-2 .tr-mosaic-item-2 { grid-row: 1; }
.tr-mosaic-count-3 { grid-template-columns: 1.2fr .8fr; grid-template-rows: 215px 215px; }
.tr-mosaic-count-3 .tr-mosaic-item-1 { grid-row: 1 / 3; }
.tr-mosaic-count-3 .tr-mosaic-item-2,
.tr-mosaic-count-3 .tr-mosaic-item-3 { grid-column: 2; }

.tr-story-strip {
  margin-top: clamp(46px, 7vw, 82px);
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  align-items: center;
  padding: 28px 36px;
  border: 1px solid var(--tr-line);
  border-radius: 26px;
  background: linear-gradient(120deg, var(--tr-sage-light), #fff4f1);
}
.tr-story-logo img { width: 100%; max-height: 130px; object-fit: contain; }
.tr-story-strip h2 { margin-bottom: 8px; font-size: clamp(1.55rem, 2.8vw, 2.25rem); }
.tr-story-strip p { margin: 0; color: var(--tr-muted); }

/* ===== Category / search pages ===== */
#product-category h1,
#product-search h1,
#product-special h1,
#product-manufacturer-info h1 { font-family: Georgia, "Times New Roman", serif; margin: 18px 0 24px; }
#product-category > .row #content > h3 + .row a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--tr-paper-soft);
  border: 1px solid var(--tr-line);
  color: var(--tr-ink);
  text-decoration: none;
  font-weight: 650;
}
#product-category > .row #content > h3 + .row a:hover { background: var(--tr-blush); color: var(--tr-rose-dark); }
#product-list { --bs-gutter-x: 1rem; }
#product-list > .col { margin-bottom: 16px !important; }

/* ===== Product ===== */
#product-info h1, #product-product h1 { font-family: Georgia, "Times New Roman", serif; }
#product-product .img-thumbnail,
#product-info .img-thumbnail { border-radius: 20px; border-color: var(--tr-line); }
#button-cart { min-height: 52px; border-radius: 999px; font-weight: 800; }

/* ===== Checkout ===== */
#checkout-checkout .card,
#checkout-cart .card,
#account-login .card {
  border: 1px solid var(--tr-line);
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(85,63,58,.04);
}
#checkout-checkout .btn,
#checkout-cart .btn { min-height: 46px; border-radius: 12px; }
#checkout-checkout #form-register > fieldset:first-of-type > legend { font-family: Georgia, "Times New Roman", serif; }
#checkout-checkout #form-register .form-control,
#checkout-checkout #form-register .form-select { min-height: 46px; border-radius: 12px; }
#checkout-checkout #button-register { min-height: 50px; border-radius: 999px; padding-left: 24px; padding-right: 24px; font-weight: 800; }

/* ===== Footer ===== */
footer {
  margin-top: 48px;
  padding-top: 38px;
  background: #f7ece8 !important;
  border-top: 1px solid var(--tr-line);
  color: var(--tr-ink) !important;
}
footer a { color: var(--tr-ink) !important; }
footer a:hover { color: var(--tr-rose-dark) !important; }


/* ===== 1.1.4: mobile menu/cart robustness ===== */
/* If OpenCart falls back to its native mobile label/toggler, keep both readable. */
#category {
  color: var(--tr-ink) !important;
  text-shadow: none !important;
}
#menu > .navbar-toggler,
#menu > .navbar-toggler i {
  color: var(--tr-ink) !important;
  border-color: var(--tr-line) !important;
}

/* The menu title belongs inside #navbar-menu. Hide any stale title left next to the drawer. */
#menu .tr-menu-panel-head:not(#navbar-menu > .tr-menu-panel-head) {
  display: none !important;
}
#navbar-menu > .tr-menu-panel-head strong {
  color: var(--tr-ink) !important;
}

/* Cart must always win the stacking order if both Bootstrap components are active. */
body.tr-cart-open #cart .dropdown-menu {
  z-index: 2500 !important;
}
body.tr-cart-open .tr-cart-backdrop {
  z-index: 2450 !important;
}

/* JS fallback adds this class when the original OpenCart header had to be upgraded in-place. */
body.tr-enhanced-header .tr-site-header {
  position: sticky;
  top: 0;
  z-index: 2100;
}

/* ===== Tablet ===== */
@media (max-width: 991.98px) {
  :root { --tr-header-h: 70px; }
  .tr-site-header { z-index: 2100; }
  .tr-header-row { grid-template-columns: 46px minmax(0,1fr) 46px 46px; gap: 4px; min-height: var(--tr-header-h); }
  .tr-menu-open-button,
  .tr-search-button { display: inline-grid; }
  .tr-logo { display: flex; justify-content: center; }
  .tr-logo img { max-height: 54px; max-width: min(180px, 50vw); }

  #tr-search-wrap {
    display: none;
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    padding: 9px;
    border: 1px solid var(--tr-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--tr-shadow);
  }
  #tr-search-wrap.is-open { display: block; }

  .tr-header-cart { width: 46px !important; }
  #cart .btn,
  #cart > .btn,
  .tr-header-cart #cart .btn {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 0 !important;
    display: grid !important;
    place-items: center;
  }
  #cart .btn::after { display: none !important; }
  #cart .btn i { font-size: 1.2rem !important; color: var(--tr-ink) !important; }

  /* Kategorie są off-canvas. Pasek bazowy ukrywamy TYLKO wtedy, gdy
     faktycznie udało się zbudować kompaktowy nagłówek z własnym hamburgerem.
     Gdy modyfikacja nagłówka nie zadziała, zostaje natywny pasek OpenCart
     "Kategorie" + hamburger, więc menu nigdy nie znika. */
  #menu,
  #menu.navbar {
    position: relative;
    z-index: 2200 !important;
  }
  #menu > .container {
    max-width: none;
  }
  body.tr-enhanced-header #menu,
  body.tr-enhanced-header #menu.navbar {
    height: 0;
    min-height: 0;
    margin: 0 !important;
    border: 0 !important;
    overflow: visible !important;
  }
  body.tr-enhanced-header #menu > .container {
    height: 0;
    min-height: 0;
    padding: 0 !important;
    overflow: visible !important;
  }
  body.tr-enhanced-header #menu #category,
  body.tr-enhanced-header #menu .navbar-toggler {
    display: none !important;
  }
  body:not(.tr-enhanced-header) #menu {
    display: block !important;
    min-height: 0;
    margin: 8px 0 14px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  body:not(.tr-enhanced-header) #menu > .container {
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 16px;
    padding-right: 16px;
  }
  body:not(.tr-enhanced-header) #menu #category {
    display: none !important;
  }
  body:not(.tr-enhanced-header) #menu .navbar-toggler {
    display: inline-grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0 !important;
    border: 1px solid var(--tr-line) !important;
    border-radius: 50%;
    background: #fff !important;
    color: var(--tr-ink) !important;
    box-shadow: 0 6px 18px rgba(85,63,58,.08);
  }
  body:not(.tr-enhanced-header) #menu .navbar-toggler:focus,
  body:not(.tr-enhanced-header) #menu .navbar-toggler:hover {
    background: var(--tr-paper-soft) !important;
    color: var(--tr-rose-dark) !important;
    box-shadow: 0 8px 22px rgba(85,63,58,.12);
  }
  body:not(.tr-enhanced-header) #menu .navbar-toggler-icon,
  body:not(.tr-enhanced-header) #menu .navbar-toggler i,
  body:not(.tr-enhanced-header) #menu .navbar-toggler .fa-bars {
    color: var(--tr-ink) !important;
  }
  #menu #navbar-menu {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: min(88vw, 360px);
    height: 100dvh;
    padding: 0 16px 28px;
    overflow-y: auto;
    background: #fff !important;
    border-right: 1px solid var(--tr-line);
    box-shadow: 18px 0 55px rgba(35,27,25,.17);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
    z-index: 2300;
  }
  #menu #navbar-menu.show { transform: translateX(0); visibility: visible; }
  .tr-menu-panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    margin: 0 -4px 10px;
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--tr-line);
  }
  .tr-menu-panel-head strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; }
  .tr-menu-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--tr-paper-soft); color: var(--tr-ink); }
  #menu .navbar-nav { display: block; width: 100%; }
  #menu .navbar-nav > .nav-item { width: 100%; border-bottom: 1px solid var(--tr-line); }
  #menu .navbar-nav > .nav-item > a,
  #menu .navbar-nav > .nav-item > .nav-link,
  #menu .navbar-nav > .nav-item > .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 6px !important;
    border-radius: 0 !important;
    font-size: 1rem;
  }
  #menu .dropdown-menu {
    position: static !important;
    width: 100%;
    margin: 0 0 8px !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--tr-paper-soft) !important;
  }
  #menu .dropdown-inner { display: block !important; }
  #menu .dropdown-inner > ul { width: 100% !important; }
  #menu .dropdown-item { padding: 10px 12px !important; }
  body.tr-menu-open .tr-menu-backdrop { display: block; }

  /* cart becomes a true drawer, always above the page/menu */
  #cart .dropdown-menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(94vw, 410px) !important;
    max-width: none !important;
    height: 100dvh;
    margin: 0 !important;
    padding: 16px !important;
    overflow-y: auto;
    border: 0 !important;
    border-left: 1px solid var(--tr-line) !important;
    border-radius: 24px 0 0 24px !important;
    transform: translateX(105%) !important;
    visibility: hidden;
    opacity: 1 !important;
    transition: transform .24s ease, visibility .24s ease;
    z-index: 2500 !important;
  }
  #cart .dropdown-menu.show { transform: translateX(0) !important; visibility: visible; }
  body.tr-cart-open .tr-cart-backdrop { display: block; }

  .tr-hero { min-height: 410px; }
  .tr-hero-card { width: 66%; padding: 48px 36px; }
  .tr-benefit-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-benefit:nth-child(2) { border-right: 0; }
  .tr-benefit:nth-child(-n+2) { border-bottom: 1px solid var(--tr-line); }
  .tr-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Phone ===== */
@media (max-width: 767.98px) {
  .container { padding-left: 12px; padding-right: 12px; }
  .tr-home { padding-top: 0; }
  .tr-hero {
    display: grid;
    min-height: 0;
    border-radius: 22px;
    background: #fff;
  }
  .tr-hero-media {
    position: relative;
    height: 270px;
    order: 1;
  }
  .tr-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; transform: translateY(-46px); }
  .tr-hero-media::after { background: linear-gradient(0deg, rgba(255,255,255,.85) 0, transparent 35%); }
  .tr-hero-logo-mode .tr-hero-media { padding: 28px; background: linear-gradient(135deg, #f6e7e4, #edf3ef); }
  .tr-hero-logo-mode .tr-hero-media img { width: min(62%, 250px); max-height: 210px; }
  .tr-hero-logo-mode .tr-hero-media::after { display: none; }
  .tr-hero-card {
    order: 2;
    width: auto;
    margin: -36px 12px 12px;
    padding: 24px 20px 22px;
    border: 1px solid var(--tr-line);
    border-radius: 20px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 12px 32px rgba(85,63,58,.08);
  }
  .tr-hero h1 { font-size: 2.15rem; }
  .tr-hero p { font-size: .98rem; margin-bottom: 20px; }
  .tr-button { min-height: 46px; width: 100%; justify-content: center; }

  .tr-benefit-strip { margin-top: 12px; border-radius: 18px; }
  .tr-benefit { min-height: 84px; padding: 13px 12px; grid-template-columns: 34px 1fr; gap: 8px; }
  .tr-benefit > i { width: 32px; height: 32px; font-size: .9rem; }
  .tr-benefit strong { font-size: .82rem; }
  .tr-benefit small { font-size: .72rem; }

  .tr-section { margin-top: 42px; }
  .tr-section-heading { display: block; margin-bottom: 16px; }
  .tr-section-heading > p { margin-top: 7px; font-size: .9rem; }
  .tr-section-heading h2 { font-size: 1.85rem; }

  .tr-category-grid { gap: 10px; }
  .tr-category-tile { border-radius: 16px; }
  .tr-category-photo { aspect-ratio: 1.1 / 1; }
  .tr-category-label { min-height: 50px; padding: 10px 11px; }
  .tr-category-label span { font-size: .96rem; }

  .tr-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #product-list.row > .col { width: 50% !important; flex: 0 0 auto !important; padding-left: 5px; padding-right: 5px; }
  .product-thumb { border-radius: 16px !important; }
  .product-thumb .content { padding: 10px !important; }
  .product-thumb h4 { min-height: 2.55em; font-size: .9rem; margin-bottom: 5px; }
  .product-thumb .description > p { min-height: 2.55em; margin-bottom: 7px !important; font-size: .79rem; line-height: 1.3; }
  .product-thumb .price { font-size: .95rem; }
  .product-thumb .button button { min-height: 39px; font-size: .86rem; }

  .tr-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 170px); grid-auto-rows: 170px; gap: 8px; }
  .tr-mosaic-item,
  .tr-mosaic-item-1,
  .tr-mosaic-item-4 { grid-column: auto; grid-row: auto; border-radius: 16px; }

  .tr-story-strip { grid-template-columns: 90px 1fr; padding: 20px; gap: 15px; border-radius: 20px; }
  .tr-story-strip h2 { font-size: 1.42rem; }
  .tr-story-strip p { font-size: .88rem; }
}

@media (max-width: 430px) {
  .tr-header-row { grid-template-columns: 42px minmax(0,1fr) 42px 42px; }
  .tr-icon-button { width: 42px; height: 42px; }
  .tr-logo img { max-width: 46vw; max-height: 50px; }
  .tr-benefit-strip { grid-template-columns: 1fr 1fr; }
  .tr-benefit { min-height: 78px; }
  .tr-mosaic { grid-template-rows: repeat(3, 145px); grid-auto-rows: 145px; }
  .tr-story-strip { grid-template-columns: 1fr; text-align: center; }
  .tr-story-logo img { max-height: 100px; }
}


/* ===== 1.1.3: desktop cart layout ===== */
@media (min-width: 992px) {
  /* A desktop cart is a compact popover, not a mobile drawer. */
  #cart .dropdown-menu {
    width: 520px !important;
    max-width: min(520px, calc(100vw - 32px)) !important;
    padding: 16px !important;
    overflow: hidden !important;
  }

  /* Prevent the OpenCart product table from forcing the dropdown wider. */
  #cart .dropdown-menu > li > .table,
  #cart .dropdown-menu > li > .table-responsive > .table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    margin-bottom: 12px !important;
  }

  #cart .dropdown-menu > li > .table td,
  #cart .dropdown-menu > li > .table-responsive > .table td {
    padding: 9px 7px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  #cart .dropdown-menu > li > .table td:first-child,
  #cart .dropdown-menu > li > .table-responsive > .table td:first-child {
    width: 82px !important;
    text-align: center !important;
  }

  #cart .dropdown-menu > li > .table td:nth-child(2),
  #cart .dropdown-menu > li > .table-responsive > .table td:nth-child(2) {
    width: auto !important;
    min-width: 0 !important;
  }

  #cart .dropdown-menu > li > .table td:nth-child(3),
  #cart .dropdown-menu > li > .table-responsive > .table td:nth-child(3) {
    width: 48px !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  #cart .dropdown-menu > li > .table td:nth-child(4),
  #cart .dropdown-menu > li > .table-responsive > .table td:nth-child(4) {
    width: 82px !important;
    white-space: nowrap !important;
    text-align: right !important;
  }

  #cart .dropdown-menu > li > .table td:last-child,
  #cart .dropdown-menu > li > .table-responsive > .table td:last-child {
    width: 44px !important;
    text-align: center !important;
  }

  #cart .dropdown-menu .img-thumbnail {
    width: 64px !important;
    height: 64px !important;
    object-fit: cover;
    padding: 3px !important;
  }

  #cart .dropdown-menu td:nth-child(2) > a {
    display: inline-block;
    color: var(--tr-ink) !important;
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
  }

  #cart .dropdown-menu td:nth-child(2) .list-unstyled,
  #cart .dropdown-menu td:nth-child(2) small {
    margin: 3px 0 0 !important;
    color: var(--tr-muted) !important;
    font-size: .78rem !important;
    line-height: 1.25;
  }

  /* Totals are kept separate and aligned to the right. */
  #cart .dropdown-menu > li > div > .table {
    width: 100% !important;
    margin: 6px 0 0 auto !important;
    table-layout: auto !important;
  }
  #cart .dropdown-menu > li > div > .table td {
    padding: 7px 9px !important;
    white-space: nowrap !important;
  }

  #cart .tr-cart-actions {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  #cart .tr-cart-view,
  #cart .tr-cart-checkout {
    min-height: 44px;
    padding: 9px 13px;
    font-size: .9rem;
  }
}


/* ========================================================================
   TAKA RAMKA 1.2.0 — desktop polish: header, cart and footer
   ======================================================================== */

/* Więcej oddechu u góry. Logo zostaje wyżej, a wyszukiwarka i koszyk
   schodzą niżej — bezpośrednio nad paskiem kategorii. */
@media (min-width: 992px) {
  .tr-site-header,
  body.tr-enhanced-header .tr-site-header {
    position: relative;
    top: auto;
    padding-top: 16px;
    background: #fff;
    border-bottom: 0;
  }

  .tr-site-header > .container,
  body.tr-enhanced-header .tr-site-header > .container {
    padding-top: 0;
    padding-bottom: 0;
  }

  .tr-header-row {
    min-height: 122px;
    grid-template-columns: minmax(170px, 240px) minmax(340px, 1fr) minmax(270px, 315px);
    column-gap: 28px;
    align-items: end;
    padding-bottom: 14px;
  }

  .tr-logo {
    align-self: start;
    padding-top: 0;
  }

  .tr-logo img {
    max-height: 76px;
    max-width: 220px;
  }

  #tr-search-wrap,
  .tr-header-cart {
    align-self: end;
  }

  #search .form-control,
  #search .btn,
  #search button,
  #cart .btn,
  #cart > .btn,
  .tr-header-cart #cart .btn {
    min-height: 50px !important;
  }

  #search .form-control {
    padding-left: 18px;
    border-radius: 12px 0 0 12px !important;
  }

  #search .btn,
  #search button {
    border-radius: 0 12px 12px 0 !important;
  }

  .tr-header-cart {
    min-width: 270px;
  }

  #cart .btn,
  #cart > .btn,
  .tr-header-cart #cart .btn {
    width: 100%;
    justify-content: center;
    border-radius: 12px !important;
    background: #4a413e !important;
    border-color: #4a413e !important;
    color: #fff !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  #cart .btn:hover,
  #cart > .btn:hover,
  .tr-header-cart #cart .btn:hover {
    background: #342d2b !important;
    border-color: #342d2b !important;
    color: #fff !important;
  }

  #cart .btn i,
  #cart > .btn i,
  .tr-header-cart #cart .btn i {
    color: #fff !important;
  }

  #menu,
  #menu.navbar {
    margin-top: 0;
    margin-bottom: 24px;
  }

  /* Stabilny, czytelny mini-koszyk. */
  #cart .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    width: 560px !important;
    max-width: min(560px, calc(100vw - 36px)) !important;
    max-height: min(72vh, 720px);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    margin-top: 12px !important;
    padding: 18px !important;
    border-radius: 18px !important;
  }

  #cart .dropdown-menu > li > .table,
  #cart .dropdown-menu > li > .table-responsive > .table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    margin: 0 0 14px !important;
  }

  #cart .dropdown-menu > li > .table > tbody > tr,
  #cart .dropdown-menu > li > .table-responsive > .table > tbody > tr {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 46px 88px 38px;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--tr-line);
  }

  #cart .dropdown-menu > li > .table > tbody > tr:last-child,
  #cart .dropdown-menu > li > .table-responsive > .table > tbody > tr:last-child {
    border-bottom: 0;
  }

  #cart .dropdown-menu > li > .table > tbody > tr > td,
  #cart .dropdown-menu > li > .table-responsive > .table > tbody > tr > td {
    display: block;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    vertical-align: middle !important;
  }

  #cart .dropdown-menu > li > .table > tbody > tr > td:first-child,
  #cart .dropdown-menu > li > .table-responsive > .table > tbody > tr > td:first-child {
    text-align: center !important;
  }

  #cart .dropdown-menu > li > .table > tbody > tr > td:nth-child(3),
  #cart .dropdown-menu > li > .table-responsive > .table > tbody > tr > td:nth-child(3) {
    text-align: center !important;
    white-space: nowrap !important;
    color: var(--tr-muted);
  }

  #cart .dropdown-menu > li > .table > tbody > tr > td:nth-child(4),
  #cart .dropdown-menu > li > .table-responsive > .table > tbody > tr > td:nth-child(4) {
    text-align: right !important;
    white-space: nowrap !important;
    font-weight: 800;
  }

  #cart .dropdown-menu > li > .table > tbody > tr > td:last-child,
  #cart .dropdown-menu > li > .table-responsive > .table > tbody > tr > td:last-child {
    text-align: center !important;
  }

  #cart .dropdown-menu .img-thumbnail {
    display: block;
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto;
    object-fit: cover;
    border-radius: 12px !important;
  }

  #cart .dropdown-menu td:nth-child(2) > a {
    display: block;
    margin-bottom: 4px;
    color: var(--tr-ink) !important;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
  }

  #cart .dropdown-menu td:nth-child(2) .list-unstyled,
  #cart .dropdown-menu td:nth-child(2) small {
    margin: 3px 0 0 !important;
    color: var(--tr-muted) !important;
    font-size: .78rem !important;
    line-height: 1.3;
  }

  #cart .dropdown-menu > li > div > .table {
    width: min(310px, 100%) !important;
    margin: 6px 0 4px auto !important;
    table-layout: auto !important;
  }

  #cart .dropdown-menu > li > div > .table td {
    padding: 6px 0 6px 16px !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  #cart .dropdown-menu > li > div > .table td:last-child {
    text-align: right !important;
    font-weight: 800;
  }

  #cart .tr-cart-actions {
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--tr-line);
  }
}

/* Stopka ma w sklepie guest-only tylko dwie użyteczne kolumny.
   CSS działa również wtedy, gdy starsza modyfikacja OCMOD stopki nie
   dopasuje się do konkretnej wersji pliku footer.twig. */
footer > .container > .row > .col-sm-3:nth-child(3),
footer > .container > .row > .col-sm-3:nth-child(4),
footer > .container > .row > [class*="col-"]:nth-child(3),
footer > .container > .row > [class*="col-"]:nth-child(4) {
  display: none !important;
}

footer > .container > .row > .col-sm-3:nth-child(1),
footer > .container > .row > .col-sm-3:nth-child(2),
footer > .container > .row > [class*="col-"]:nth-child(1),
footer > .container > .row > [class*="col-"]:nth-child(2) {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
}

footer {
  padding-top: 34px;
}

footer h5 {
  margin-bottom: 14px;
}

footer .list-unstyled li {
  margin-bottom: 7px;
}

@media (max-width: 767.98px) {
  footer > .container > .row > .col-sm-3:nth-child(1),
  footer > .container > .row > .col-sm-3:nth-child(2),
  footer > .container > .row > [class*="col-"]:nth-child(1),
  footer > .container > .row > [class*="col-"]:nth-child(2) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 18px;
  }
}

/* ========================================================================
   TAKA RAMKA 1.3.0 — HARD LAYOUT PATCH
   Działa również na standardowym DOM OpenCart, gdy podmiana header.twig
   przez OCMOD nie została zastosowana.
   ======================================================================== */
@media (min-width: 992px) {
  #container > header,
  .tr-site-header,
  body.tr-enhanced-header .tr-site-header {
    position: relative !important;
    top: auto !important;
    padding: 26px 0 12px !important;
    background: #fffaf8 !important;
    border: 0 !important;
  }

  /* Stock OpenCart header fallback */
  #container > header > .container > .row {
    display: grid !important;
    grid-template-columns: 170px minmax(360px, 1fr) 300px !important;
    gap: 24px !important;
    align-items: end !important;
    min-height: 164px !important;
    margin: 0 !important;
  }
  #container > header > .container > .row > .col-md-3,
  #container > header > .container > .row > .col-lg-4 {
    grid-column: 1 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    align-self: start !important;
  }
  #container > header > .container > .row > .col-md-5 {
    grid-column: 2 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    align-self: end !important;
  }
  #container > header > .container > .row > #cart {
    grid-column: 3 !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: end !important;
  }

  /* Custom Taka Ramka header */
  .tr-header-row {
    min-height: 164px !important;
    grid-template-columns: 170px minmax(360px, 1fr) 300px !important;
    gap: 24px !important;
    align-items: end !important;
    padding: 0 !important;
  }
  .tr-logo { align-self: start !important; }
  #logo,
  .tr-logo {
    margin: 0 !important;
    padding: 0 !important;
  }
  #logo a,
  .tr-logo a {
    display: inline-flex !important;
    align-items: flex-start !important;
  }
  #logo img,
  .tr-logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 145px !important;
    max-height: 145px !important;
    object-fit: contain !important;
  }

  #tr-search-wrap,
  .tr-header-cart {
    align-self: end !important;
  }
  #search,
  #cart { margin-bottom: 0 !important; }
  #search .form-control,
  #search .btn,
  #search button,
  #cart .btn,
  #cart > .btn,
  .tr-header-cart #cart .btn {
    min-height: 50px !important;
  }
  #search .form-control {
    border-radius: 12px 0 0 12px !important;
    padding-left: 18px !important;
  }
  #search .btn,
  #search button {
    border-radius: 0 12px 12px 0 !important;
    min-width: 58px !important;
  }
  #cart .btn,
  #cart > .btn,
  .tr-header-cart #cart .btn {
    width: 100% !important;
    border-radius: 12px !important;
    justify-content: center !important;
    padding: 10px 18px !important;
  }

  /* Pasek kategorii tuż pod narzędziami nagłówka */
  #menu,
  #menu.navbar {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
  }

  /* Mini-koszyk: precyzyjny układ oparty o stockowe klasy OpenCart. */
  #cart .dropdown-menu {
    right: 0 !important;
    left: auto !important;
    width: 500px !important;
    max-width: calc(100vw - 32px) !important;
    padding: 16px !important;
    border-radius: 18px !important;
    overflow-x: hidden !important;
  }
  #cart .dropdown-menu .table-striped {
    width: 100% !important;
    margin: 0 0 14px !important;
    table-layout: auto !important;
  }
  #cart .dropdown-menu .table-striped > tbody > tr {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) 42px 78px 36px !important;
    gap: 9px !important;
    align-items: center !important;
    padding: 11px 0 !important;
    border-bottom: 1px solid rgba(76,59,54,.12) !important;
  }
  #cart .dropdown-menu .table-striped > tbody > tr > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  #cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(3),
  #cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(4),
  #cart .dropdown-menu .table-striped > tbody > tr > td:nth-child(5) {
    white-space: nowrap !important;
    text-align: right !important;
  }
  #cart .dropdown-menu .table-striped .img-thumbnail {
    display: block !important;
    width: 58px !important;
    height: 58px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
  }
  #cart .dropdown-menu .table-striped td:nth-child(2) > a {
    display: block !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }
  #cart .dropdown-menu .table-striped td:nth-child(2) .list-unstyled,
  #cart .dropdown-menu .table-striped td:nth-child(2) small {
    font-size: .78rem !important;
    line-height: 1.25 !important;
    color: #7b706d !important;
  }
  #cart .dropdown-menu .table-bordered {
    width: min(300px, 100%) !important;
    margin: 4px 0 10px auto !important;
  }
  #cart .dropdown-menu .table-bordered td {
    padding: 5px 8px !important;
    white-space: nowrap !important;
  }
  #cart .dropdown-menu p.text-end {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    margin: 12px 0 0 !important;
  }
  #cart .dropdown-menu p.text-end > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 9px 14px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    border: 1px solid rgba(76,59,54,.12) !important;
  }
}

/* Stopka: Taka Ramka nie używa sekcji „Dodatki” i „Moje konto”. */
footer > .container > .row > .col-sm-3:nth-child(3),
footer > .container > .row > .col-sm-3:nth-child(4) {
  display: none !important;
}
footer > .container > .row > .col-sm-3:nth-child(1),
footer > .container > .row > .col-sm-3:nth-child(2) {
  flex: 0 0 50% !important;
  width: 50% !important;
  max-width: 50% !important;
}

@media (max-width: 991.98px) {
  #logo img,
  .tr-logo img {
    max-width: 64px !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
  }
}

@media (max-width: 767.98px) {
  footer > .container > .row > .col-sm-3:nth-child(1),
  footer > .container > .row > .col-sm-3:nth-child(2) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}



/* ===== 1.4.3: homepage hero/header adjustments ===== */
@media (min-width: 992px) {
  body.tr-homepage-no-header-logo #logo,
  body.tr-homepage-no-header-logo .tr-logo {
    display: none !important;
  }

  body.tr-homepage-no-header-logo .tr-header-row {
    grid-template-columns: minmax(420px, 1fr) 300px !important;
  }
}


/* ===== 1.4.5: product cards, personalization ribbon and dynamic gallery ===== */
.product-thumb .image {
  position: relative !important;
  overflow: hidden !important;
}
#product-list .product-thumb .image {
  margin: 8px 8px 0 !important;
  border-radius: 16px !important;
}
#product-list .product-thumb .image img {
  border-radius: 12px;
}
.product-thumb .tr-personalization-ribbon {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 30px !important;
  right: -50px !important;
  width: 190px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: rotate(45deg) !important;
  transform-origin: center center !important;
  background: #b96f6b !important;
  color: #fff !important;
  font-size: .64rem !important;
  font-weight: 800 !important;
  line-height: 30px !important;
  letter-spacing: .012em !important;
  text-align: center !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
}

@media (max-width: 575.98px) {
  #product-list .product-thumb .image {
    margin: 5px 5px 0 !important;
    border-radius: 13px !important;
  }
  #product-list .product-thumb .image img {
    border-radius: 10px;
  }
  .product-thumb .tr-personalization-ribbon {
    top: 21px !important;
    right: -44px !important;
    width: 154px !important;
    height: 24px !important;
    padding: 0 !important;
    font-size: .53rem !important;
    line-height: 24px !important;
    letter-spacing: .01em !important;
    transform: rotate(45deg) !important;
  }
}


/* ===== 1.4.6: fine-tuning for categories, gallery and mobile hero ===== */
.tr-mosaic-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tr-mosaic-item img {
  background: #fff;
}


/* ===== 1.5.0: geometrically centered personalization ribbons ===== */
#product-info .image.magnific-popup,
#product-product .image.magnific-popup {
  position: relative !important;
  overflow: hidden !important;
}

#product-info .tr-personalization-ribbon,
#product-product .tr-personalization-ribbon {
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  position: absolute !important;
  top: 32px !important;
  right: -60px !important;
  width: 220px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: rotate(45deg) !important;
  transform-origin: center center !important;
  background: #b96f6b !important;
  color: #fff !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 36px !important;
  letter-spacing: .015em !important;
  text-align: center !important;
  white-space: nowrap !important;
  z-index: 12 !important;
  pointer-events: none !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.14) !important;
}

@media (max-width: 575.98px) {
  #product-info .tr-personalization-ribbon,
  #product-product .tr-personalization-ribbon {
    top: 20px !important;
    right: -49px !important;
    width: 164px !important;
    height: 27px !important;
    padding: 0 !important;
    font-size: .60rem !important;
    line-height: 27px !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.5.1 — nowy nagłówek mobilny
   Logo u góry + jeden rząd ikon: koszyk / menu / wyszukiwanie.
   Desktop pozostaje bez zmian.
   ======================================================================== */
.tr-mobile-brand { display: none; }

@media (max-width: 767.98px) {
  #container > header,
  .tr-site-header,
  body.tr-enhanced-header .tr-site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 2100 !important;
    padding: 8px 0 10px !important;
    background: rgba(255,250,248,.98) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(76,59,54,.08) !important;
    box-shadow: 0 4px 18px rgba(85,63,58,.04) !important;
  }

  .tr-site-header > .container,
  body.tr-enhanced-header .tr-site-header > .container,
  #container > header > .container {
    position: relative !important;
    padding: 0 14px !important;
  }

  .tr-mobile-brand {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 2px 0 4px;
  }

  .tr-mobile-brand a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .tr-mobile-brand img {
    display: block;
    width: min(48vw, 174px);
    height: auto;
    max-height: 94px;
    object-fit: contain;
  }

  /* Stare logo w stockowym nagłówku znika tylko na telefonie. */
  #logo,
  .tr-logo {
    display: none !important;
  }

  .tr-header-row {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    min-height: 58px !important;
    padding: 2px 0 6px !important;
    margin: 0 !important;
  }

  .tr-header-cart { order: 1 !important; }
  .tr-menu-open-button { order: 2 !important; }
  .tr-search-button { order: 3 !important; }
  #tr-search-wrap { order: 4 !important; }

  .tr-menu-open-button,
  .tr-search-button,
  .tr-header-cart #cart .btn,
  #cart > .btn,
  #cart .btn[data-bs-toggle="dropdown"] {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(76,59,54,.12) !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: var(--tr-ink) !important;
    box-shadow: 0 7px 20px rgba(85,63,58,.08) !important;
    font-size: 0 !important;
  }

  .tr-menu-open-button i,
  .tr-search-button i,
  .tr-header-cart #cart .btn i,
  #cart > .btn i,
  #cart .btn[data-bs-toggle="dropdown"] i {
    color: var(--tr-ink) !important;
    font-size: 1.18rem !important;
    line-height: 1 !important;
  }

  .tr-menu-open-button:active,
  .tr-search-button:active,
  .tr-header-cart #cart .btn:active {
    transform: translateY(1px);
    background: var(--tr-paper-soft) !important;
  }

  /* Wyszukiwarka rozwija się pod całym rzędem ikon. */
  #tr-search-wrap {
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(100% + 6px) !important;
    padding: 10px !important;
    border: 1px solid var(--tr-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(85,63,58,.14) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-8px) scale(.985) !important;
    transform-origin: top center;
    pointer-events: none !important;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
    z-index: 2600 !important;
  }

  #tr-search-wrap.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  #tr-search-wrap #search .form-control {
    min-height: 50px !important;
    border-radius: 14px 0 0 14px !important;
    font-size: 1rem !important;
  }

  #tr-search-wrap #search .btn,
  #tr-search-wrap #search button {
    min-width: 54px !important;
    min-height: 50px !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: none !important;
  }

  /* Nie pokazuj awaryjnego stockowego przycisku hamburgera, gdy nowy nagłówek działa. */
  body.tr-enhanced-header #menu #category,
  body.tr-enhanced-header #menu .navbar-toggler {
    display: none !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.5.2 — finalny układ nagłówka mobilnego
   Logo u góry; pod nim jeden rząd: koszyk / menu / lupa.
   Wyszukiwarka jest całkowicie ukryta do kliknięcia lupki.
   W hero na telefonie nie pokazujemy żadnej grafiki/logo.
   ======================================================================== */
@media (max-width: 767.98px) {
  #container > header,
  .tr-site-header,
  body.tr-enhanced-header .tr-site-header {
    position: relative !important;
    top: auto !important;
    padding: 8px 0 12px !important;
    background: var(--tr-bg) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .tr-site-header > .container,
  body.tr-enhanced-header .tr-site-header > .container,
  #container > header > .container {
    padding: 0 16px !important;
  }

  .tr-mobile-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 116px !important;
    padding: 4px 0 8px !important;
  }
  .tr-mobile-brand a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .tr-mobile-brand img {
    display: block !important;
    width: min(58vw, 210px) !important;
    height: auto !important;
    max-height: 112px !important;
    object-fit: contain !important;
  }

  /* stare logo OpenCart znika na telefonie */
  #logo,
  .tr-logo { display: none !important; }

  /* dokładnie jeden rząd narzędzi */
  .tr-header-row,
  .tr-header-row.tr-mobile-toolbar {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 2px 0 4px !important;
  }

  .tr-header-cart { order: 1 !important; flex: 0 0 52px !important; width: 52px !important; }
  .tr-menu-open-button { order: 2 !important; flex: 0 0 52px !important; }
  .tr-search-button { order: 3 !important; flex: 0 0 52px !important; }

  .tr-menu-open-button,
  .tr-search-button,
  .tr-header-cart #cart .btn,
  #cart > .btn,
  #cart .btn[data-bs-toggle="dropdown"] {
    display: inline-grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(76,59,54,.12) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--tr-ink) !important;
    box-shadow: 0 7px 20px rgba(85,63,58,.08) !important;
    font-size: 0 !important;
  }
  .tr-menu-open-button i,
  .tr-search-button i,
  .tr-header-cart #cart .btn i,
  #cart > .btn i,
  #cart .btn[data-bs-toggle="dropdown"] i {
    display: block !important;
    color: var(--tr-ink) !important;
    font-size: 1.22rem !important;
    line-height: 1 !important;
  }
  #cart .btn::after { display: none !important; }

  /* bez paska wyszukiwania dopóki nie klikniesz lupki */
  #tr-search-wrap {
    order: 4 !important;
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--tr-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(85,63,58,.16) !important;
    z-index: 2700 !important;
  }
  #tr-search-wrap.is-open {
    display: block !important;
  }
  #tr-search-wrap #search {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  #tr-search-wrap #search .input-group { width: 100% !important; }
  #tr-search-wrap #search .form-control {
    min-height: 48px !important;
    border-radius: 13px 0 0 13px !important;
    font-size: 1rem !important;
  }
  #tr-search-wrap #search .btn,
  #tr-search-wrap #search button {
    min-width: 54px !important;
    min-height: 48px !important;
    border-radius: 0 13px 13px 0 !important;
    box-shadow: none !important;
  }

  /* natywny pasek Kategorie/hamburger nigdy nie może pojawiać się pod toolbar-em */
  #menu,
  #menu.navbar,
  body.tr-enhanced-header #menu,
  body.tr-enhanced-header #menu.navbar {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  #menu > .container,
  body.tr-enhanced-header #menu > .container {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  #menu #category,
  #menu .navbar-toggler,
  body.tr-enhanced-header #menu #category,
  body.tr-enhanced-header #menu .navbar-toggler {
    display: none !important;
  }

  /* Hero: na telefonie sama karta tekstowa, bez logo/grafiki. */
  .tr-hero,
  .tr-hero.tr-hero-logo-mode {
    display: block !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    padding: 0 !important;
    border: 1px solid var(--tr-line) !important;
    border-radius: 22px !important;
    background: #fff !important;
    overflow: hidden !important;
  }
  .tr-hero .tr-hero-media,
  .tr-hero-logo-mode .tr-hero-media {
    display: none !important;
  }
  .tr-hero .tr-hero-card,
  .tr-hero-logo-mode .tr-hero-card {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 30px 24px 28px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.5.3 — twardy układ nagłówka mobilnego
   Dokładne logo użytkownika + jeden rząd ikon: koszyk | menu | lupa.
   Pasek wyszukiwania pojawia się dopiero po kliknięciu lupki.
   ======================================================================== */
@media (max-width: 767.98px) {
  header .tr-header-row,
  header .tr-header-row.tr-mobile-toolbar {
    display: none !important;
  }

  .tr-mobile-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 112px !important;
    padding: 6px 0 10px !important;
  }
  .tr-mobile-brand a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }
  .tr-mobile-brand img {
    display: block !important;
    width: min(64vw, 240px) !important;
    max-width: 240px !important;
    height: auto !important;
    max-height: 120px !important;
    object-fit: contain !important;
  }

  .tr-mobile-tools {
    display: grid !important;
    grid-template-columns: repeat(3, 52px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 4px 0 6px !important;
  }
  .tr-mobile-tool-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
  }

  .tr-mobile-tool-slot .tr-menu-open-button,
  .tr-mobile-tool-slot .tr-search-button,
  .tr-mobile-tool-slot #cart > .btn,
  .tr-mobile-tool-slot #cart .btn[data-bs-toggle="dropdown"] {
    display: inline-grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(76,59,54,.12) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--tr-ink) !important;
    box-shadow: 0 7px 20px rgba(85,63,58,.08) !important;
    font-size: 0 !important;
  }
  .tr-mobile-tool-slot .tr-menu-open-button i,
  .tr-mobile-tool-slot .tr-search-button i,
  .tr-mobile-tool-slot #cart > .btn i,
  .tr-mobile-tool-slot #cart .btn[data-bs-toggle="dropdown"] i {
    display: block !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    color: var(--tr-ink) !important;
  }
  .tr-mobile-tool-slot #cart .btn::after,
  .tr-mobile-tool-slot #cart > .btn::after {
    display: none !important;
  }

  .tr-mobile-search-panel,
  #tr-search-wrap.tr-mobile-search-panel {
    display: none !important;
    width: 100% !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
  }
  .tr-mobile-search-panel.is-open,
  #tr-search-wrap.tr-mobile-search-panel.is-open {
    display: block !important;
  }
  .tr-mobile-search-panel #search,
  #tr-search-wrap.tr-mobile-search-panel #search {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .tr-mobile-search-panel #search .input-group,
  #tr-search-wrap.tr-mobile-search-panel #search .input-group {
    width: 100% !important;
  }
  .tr-mobile-search-panel #search .form-control,
  #tr-search-wrap.tr-mobile-search-panel #search .form-control {
    min-height: 48px !important;
    border-radius: 13px 0 0 13px !important;
    font-size: 1rem !important;
  }
  .tr-mobile-search-panel #search .btn,
  .tr-mobile-search-panel #search button,
  #tr-search-wrap.tr-mobile-search-panel #search .btn,
  #tr-search-wrap.tr-mobile-search-panel #search button {
    min-width: 54px !important;
    min-height: 48px !important;
    border-radius: 0 13px 13px 0 !important;
    box-shadow: none !important;
  }

  .tr-hero .tr-hero-media,
  .tr-hero-logo-mode .tr-hero-media {
    display: none !important;
  }
  .tr-hero,
  .tr-hero-logo-mode {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .tr-hero-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.5.4 — mocne poprawki mobile header
   - tylko jedno logo u góry,
   - tylko jeden rząd ikon: koszyk | menu | lupa,
   - brak widocznego paska wyszukiwania do chwili kliknięcia lupki,
   - usunięcie zduplikowanego przycisku menu.
   ======================================================================== */
@media (max-width: 767.98px) {
  /* Jedyny widoczny blok logo */
  header .tr-mobile-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 112px !important;
    padding: 6px 0 10px !important;
  }
  header .tr-mobile-brand img {
    display: block !important;
    width: min(64vw, 240px) !important;
    max-width: 240px !important;
    max-height: 120px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Ukryj wszystkie stare/duplikowane kontrolki, pokaż tylko te w nowym toolbarze */
  body .tr-menu-open-button,
  body header #cart,
  body header #search,
  body header #tr-search-wrap,
  body header .tr-mobile-search-panel,
  body header .tr-header-row,
  body header .tr-header-row.tr-mobile-toolbar {
    display: none !important;
  }
  body header .tr-mobile-tools {
    display: grid !important;
    grid-template-columns: repeat(3, 52px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 4px 0 8px !important;
  }
  body header .tr-mobile-tool-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 52px !important;
  }

  body header .tr-mobile-tools .tr-menu-open-button,
  body header .tr-mobile-tools .tr-search-button,
  body header .tr-mobile-tools #cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body header .tr-mobile-tools #cart { width: 52px !important; }

  body header .tr-mobile-tools .tr-menu-open-button,
  body header .tr-mobile-tools .tr-search-button,
  body header .tr-mobile-tools #cart > .btn,
  body header .tr-mobile-tools #cart .btn[data-bs-toggle="dropdown"] {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(76,59,54,.12) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: var(--tr-ink) !important;
    box-shadow: 0 7px 20px rgba(85,63,58,.08) !important;
    font-size: 0 !important;
  }
  body header .tr-mobile-tools .tr-menu-open-button i,
  body header .tr-mobile-tools .tr-search-button i,
  body header .tr-mobile-tools #cart > .btn i,
  body header .tr-mobile-tools #cart .btn[data-bs-toggle="dropdown"] i {
    display: block !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    color: var(--tr-ink) !important;
  }
  body header .tr-mobile-tools #cart > .btn::after,
  body header .tr-mobile-tools #cart .btn[data-bs-toggle="dropdown"]::after {
    display: none !important;
  }

  /* Pasek wyszukiwania ma być niewidoczny do kliknięcia lupki */
  body header #tr-search-wrap.is-open,
  body header .tr-mobile-search-panel.is-open {
    display: block !important;
    width: 100% !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
  }
  body header #tr-search-wrap.is-open #search,
  body header .tr-mobile-search-panel.is-open #search {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body header #tr-search-wrap.is-open #search .input-group,
  body header .tr-mobile-search-panel.is-open #search .input-group {
    width: 100% !important;
  }
  body header #tr-search-wrap.is-open #search .form-control,
  body header .tr-mobile-search-panel.is-open #search .form-control {
    min-height: 48px !important;
    border-radius: 13px 0 0 13px !important;
    font-size: 1rem !important;
  }
  body header #tr-search-wrap.is-open #search .btn,
  body header #tr-search-wrap.is-open #search button,
  body header .tr-mobile-search-panel.is-open #search .btn,
  body header .tr-mobile-search-panel.is-open #search button {
    min-width: 54px !important;
    min-height: 48px !important;
    border-radius: 0 13px 13px 0 !important;
    box-shadow: none !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.5.5 — pełna przebudowa mobile header
   Logo + ikony w jednej linii, bez widocznego paska wyszukiwania i bez
   zduplikowanego przycisku menu.
   ======================================================================== */
@media (max-width: 767.98px) {
  body header .tr-mobile-header-v2 {
    display: block !important;
    width: 100% !important;
    margin: 0 auto 6px !important;
  }

  body header .tr-mobile-brand-v2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 0 10px !important;
  }
  body header .tr-mobile-brand-v2 a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
  }
  body header .tr-mobile-brand-v2 img {
    display: block !important;
    width: min(58vw, 220px) !important;
    max-width: 220px !important;
    max-height: 108px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  body header .tr-mobile-toolbar-v2 {
    display: grid !important;
    grid-template-columns: repeat(3, 56px) !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 8px !important;
  }
  body header .tr-mobile-toolbar-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
  }

  body header .tr-mobile-toolbar-v2 #cart,
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle,
  body header .tr-mobile-toolbar-v2 .tr-mobile-search-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  body header .tr-mobile-toolbar-v2 #cart {
    width: 56px !important;
    min-width: 56px !important;
    margin: 0 !important;
  }
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle,
  body header .tr-mobile-toolbar-v2 .tr-mobile-search-toggle,
  body header .tr-mobile-toolbar-v2 #cart > .btn,
  body header .tr-mobile-toolbar-v2 #cart .btn[data-bs-toggle="dropdown"] {
    display: inline-grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(76,59,54,.12) !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 7px 20px rgba(85,63,58,.08) !important;
    color: var(--tr-ink) !important;
    font-size: 0 !important;
  }
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle i,
  body header .tr-mobile-toolbar-v2 .tr-mobile-search-toggle i,
  body header .tr-mobile-toolbar-v2 #cart > .btn i,
  body header .tr-mobile-toolbar-v2 #cart .btn[data-bs-toggle="dropdown"] i {
    display: block !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: var(--tr-ink) !important;
  }
  body header .tr-mobile-toolbar-v2 #cart > .btn::after,
  body header .tr-mobile-toolbar-v2 #cart .btn[data-bs-toggle="dropdown"]::after,
  body header .tr-mobile-toolbar-v2 #cart .btn .d-none,
  body header .tr-mobile-toolbar-v2 #cart .btn span:not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
    display: none !important;
  }

  /* Ukryj stare kontrolki i stare wyszukiwanie */
  body header .tr-header-row,
  body header .tr-mobile-brand,
  body header .tr-mobile-tools,
  body header .tr-mobile-search-panel,
  body header #tr-search-wrap,
  body .tr-menu-open-button,
  body header .tr-search-button {
    display: none !important;
  }
  body header .tr-mobile-header-v2 .tr-mobile-menu-toggle,
  body header .tr-mobile-header-v2 .tr-mobile-search-toggle {
    display: inline-grid !important;
  }

  body header .tr-mobile-search-panel-v2 {
    display: none !important;
    width: 100% !important;
    margin: 8px auto 0 !important;
    padding: 0 !important;
  }
  body header .tr-mobile-search-panel-v2.is-open {
    display: block !important;
  }
  body header .tr-mobile-search-panel-v2 #search {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body header .tr-mobile-search-panel-v2 #search .input-group {
    width: 100% !important;
  }
  body header .tr-mobile-search-panel-v2 #search .form-control {
    min-height: 48px !important;
    border-radius: 13px 0 0 13px !important;
    font-size: 1rem !important;
  }
  body header .tr-mobile-search-panel-v2 #search .btn,
  body header .tr-mobile-search-panel-v2 #search button {
    min-width: 54px !important;
    min-height: 48px !important;
    border-radius: 0 13px 13px 0 !important;
    box-shadow: none !important;
  }

  /* W hero ma zostać sama karta z tekstem */
  .tr-hero .tr-hero-media,
  .tr-hero-logo-mode .tr-hero-media {
    display: none !important;
  }
  .tr-hero,
  .tr-hero-logo-mode {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .tr-hero-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.5.7 — finalne wymuszenie mobile header
   ======================================================================== */
@media (max-width: 767.98px) {
  /* Wyszukiwanie: nigdy widoczne bez kliknięcia lupki. */
  body:not(.tr-search-open) header #search,
  body:not(.tr-search-open) header #tr-search-wrap,
  body:not(.tr-search-open) header .tr-mobile-search-panel,
  body:not(.tr-search-open) header .tr-mobile-search-panel-v2 {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.tr-search-open header .tr-mobile-search-panel-v2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  body.tr-search-open header .tr-mobile-search-panel-v2 #search {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Nie może istnieć wizualnie żaden drugi hamburger. */
  body #menu .navbar-toggler,
  body .tr-menu-open-button {
    display: none !important;
  }
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle {
    display: inline-grid !important;
  }

  /* Trzy ikony mają identyczną geometrię. */
  body header .tr-mobile-toolbar-v2 {
    grid-template-columns: repeat(3, 56px) !important;
    gap: 16px !important;
  }
  body header .tr-mobile-toolbar-v2 .tr-mobile-toolbar-slot,
  body header .tr-mobile-toolbar-v2 #cart,
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle,
  body header .tr-mobile-toolbar-v2 .tr-mobile-search-toggle,
  body header .tr-mobile-toolbar-v2 #cart > .btn,
  body header .tr-mobile-toolbar-v2 #cart .btn[data-bs-toggle="dropdown"] {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body header .tr-mobile-toolbar-v2 #cart > .btn,
  body header .tr-mobile-toolbar-v2 #cart .btn[data-bs-toggle="dropdown"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  body header .tr-mobile-toolbar-v2 #cart i,
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle i,
  body header .tr-mobile-toolbar-v2 .tr-mobile-search-toggle i {
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    line-height: 1 !important;
  }

  /* Stare mobilne konstrukcje całkiem znikają. */
  body header .tr-header-row,
  body header .tr-mobile-brand,
  body header .tr-mobile-tools,
  body header .tr-mobile-search-panel {
    display: none !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.5.7 — absolutne wymuszenie: brak paska wyszukiwania przed kliknięciem
   ======================================================================== */
@media (max-width: 767.98px) {
  body:not(.tr-search-open) #search,
  body:not(.tr-search-open) .tr-mobile-search-panel-v2,
  body:not(.tr-search-open) #tr-search-wrap,
  body:not(.tr-search-open) .tr-mobile-search-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body.tr-search-open .tr-mobile-search-panel-v2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.tr-search-open .tr-mobile-search-panel-v2 #search {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body header .tr-mobile-brand-v2 img {
    width: auto !important;
    max-width: min(220px, 72vw) !important;
    max-height: 120px !important;
    object-fit: contain !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.6.2 — search jest fizycznie odpinany od DOM na mobile
   ======================================================================== */
@media (max-width: 767.98px) {
  body:not(.tr-search-open) #search,
  body:not(.tr-search-open) [id="search"],
  body:not(.tr-search-open) .tr-mobile-search-panel-v2,
  body:not(.tr-search-open) #tr-search-wrap {
    display: none !important;
  }
  body.tr-search-open .tr-mobile-search-panel-v2 {
    display: block !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.6.2 — mobile search + hierarchiczne menu kategorii
   ======================================================================== */
@media (max-width: 767.98px) {
  /* Natywna wyszukiwarka OpenCart nie ma prawa być widoczna poza panelem po kliknięciu lupki. */
  body:not(.tr-search-open) header #search,
  body:not(.tr-search-open) header .input-group:has(input[name="search"]),
  body:not(.tr-search-open) header form:has(input[name="search"]),
  body:not(.tr-search-open) header input[name="search"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  body.tr-search-open .tr-mobile-search-panel-v2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 10px !important;
    border: 1px solid var(--tr-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(85,63,58,.14) !important;
  }
  body.tr-search-open .tr-mobile-search-panel-v2 #search,
  body.tr-search-open .tr-mobile-search-panel-v2 .input-group:has(input[name="search"]) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }

  /* Natywny drawer Bootstrap zostaje tylko źródłem danych. */
  #menu #navbar-menu,
  #navbar-menu.show {
    transform: translateX(-105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .tr-mobile-category-drawer-v3 {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 390px);
    height: 100dvh;
    padding: 0 16px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fffaf8;
    border-right: 1px solid rgba(76,59,54,.08);
    border-radius: 0 24px 24px 0;
    box-shadow: 24px 0 70px rgba(35,27,25,.20);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .24s ease, visibility .24s ease;
    z-index: 3100;
  }
  .tr-mobile-category-drawer-v3.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .tr-mobile-category-backdrop-v3 {
    display: block;
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(44,34,31,.30);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 3090;
  }
  .tr-mobile-category-backdrop-v3.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.tr-mobile-category-open-v3 { overflow: hidden; }

  .tr-mobile-category-head-v3 {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 88px;
    margin: 0 -16px 12px;
    padding: 14px 18px 12px 22px;
    background: rgba(255,250,248,.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(76,59,54,.08);
  }
  .tr-mobile-category-head-v3 > div { display: grid; gap: 2px; }
  .tr-mobile-category-head-v3 span {
    color: var(--tr-rose-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .tr-mobile-category-head-v3 strong {
    color: var(--tr-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: 500;
  }
  .tr-mobile-category-close-v3 {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f6e8e4;
    color: var(--tr-ink);
    font-size: 1.1rem;
  }

  .tr-mobile-category-list-v3 { display: grid; gap: 9px; }
  .tr-mobile-category-item-v3 {
    overflow: hidden;
    border: 1px solid rgba(76,59,54,.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(85,63,58,.035);
  }
  .tr-mobile-category-link-v3,
  .tr-mobile-category-toggle-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    background: #fff;
    color: var(--tr-ink);
    text-decoration: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 750;
  }
  .tr-mobile-category-link-v3 i,
  .tr-mobile-category-toggle-v3 i {
    color: var(--tr-rose-dark);
    font-size: .85rem;
    transition: transform .2s ease;
  }
  .tr-mobile-category-toggle-v3.is-open {
    background: #fff8f5;
    color: var(--tr-rose-dark);
  }
  .tr-mobile-category-toggle-v3.is-open > i { transform: rotate(180deg); }

  .tr-mobile-submenu-v3 {
    display: none;
    padding: 6px 10px 11px;
    background: #fff8f5;
    border-top: 1px solid rgba(76,59,54,.07);
  }
  .tr-mobile-submenu-v3.is-open { display: grid; gap: 3px; }
  .tr-mobile-category-all-v3,
  .tr-mobile-subcategory-link-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 11px;
    border-radius: 11px;
    color: var(--tr-ink);
    text-decoration: none;
    font-size: .93rem;
  }
  .tr-mobile-category-all-v3 {
    margin-bottom: 3px;
    background: #f4e1dc;
    color: var(--tr-rose-dark);
    font-weight: 750;
  }
  .tr-mobile-subcategory-link-v3:hover,
  .tr-mobile-subcategory-link-v3:active { background: #fff; }
  .tr-mobile-subcategory-link-v3 i,
  .tr-mobile-category-all-v3 i {
    color: var(--tr-rose-dark);
    font-size: .75rem;
  }
}


/* ========================================================================
   TAKA RAMKA 1.6.2 — finał: wyszukiwanie z lupki + klikalny koszyk mobile
   ======================================================================== */
@media (max-width: 767.98px) {
  /* Drawer koszyka musi być nad przyciemnieniem. Header tworzy własny stacking context,
     dlatego podczas otwartego koszyka podnosimy cały header. */
  body.tr-cart-open header,
  body.tr-cart-open .tr-site-header,
  body.tr-cart-open header.tr-site-header {
    z-index: 3300 !important;
  }
  body.tr-cart-open #cart .dropdown-menu {
    z-index: 3350 !important;
    pointer-events: auto !important;
  }
  body.tr-cart-open .tr-cart-backdrop {
    z-index: 3200 !important;
  }

  /* Własne pole wyszukiwania. Natywny komponent OpenCart pozostaje schowany. */
  .tr-mobile-search-panel-v2 .tr-mobile-standalone-search-v4 {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .tr-mobile-search-group-v4 {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 56px !important;
    width: 100% !important;
    overflow: hidden !important;
    border: 1px solid var(--tr-line) !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 12px 34px rgba(85,63,58,.11) !important;
  }
  .tr-mobile-search-group-v4 .form-control {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 1rem !important;
  }
  .tr-mobile-search-submit-v4 {
    display: grid !important;
    place-items: center !important;
    width: 56px !important;
    min-width: 56px !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--tr-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--tr-ink) !important;
    box-shadow: none !important;
    font-size: 1.15rem !important;
  }

  body.tr-search-open .tr-mobile-search-panel-v2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.6.2 — trwałe search + niezależny drawer koszyka mobile
   ======================================================================== */
@media (max-width: 767.98px) {
  /* Search: po otwarciu nie może go zgasić żaden starszy selektor. */
  body.tr-search-open .tr-mobile-search-panel-v2,
  body.tr-search-open .tr-mobile-search-panel-v2[hidden] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  body.tr-search-open .tr-mobile-standalone-search-v4,
  body.tr-search-open .tr-mobile-search-group-v4 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    pointer-events: auto !important;
  }
  body.tr-search-open .tr-mobile-search-group-v4 {
    display: grid !important;
  }

  /* Koszyk jest portalem w BODY, więc nie dziedziczy stacking context nagłówka. */
  .tr-mobile-cart-drawer-v5 {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: min(92vw, 410px) !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 16px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 0 !important;
    border-left: 1px solid var(--tr-line) !important;
    border-radius: 24px 0 0 24px !important;
    background: #fff !important;
    box-shadow: -18px 0 50px rgba(35,27,25,.18) !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    opacity: 1 !important;
    pointer-events: none !important;
    transition: transform .24s ease, visibility .24s ease !important;
    z-index: 5001 !important;
  }
  .tr-mobile-cart-drawer-v5.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .tr-mobile-cart-drawer-v5[hidden] {
    display: block !important;
  }
  body.tr-cart-open .tr-cart-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 5000 !important;
    background: rgba(35,27,25,.38) !important;
    pointer-events: auto !important;
  }
  .tr-mobile-cart-drawer-v5 a,
  .tr-mobile-cart-drawer-v5 button,
  .tr-mobile-cart-drawer-v5 input {
    position: relative !important;
    z-index: 1 !important;
    pointer-events: auto !important;
  }
  body.tr-cart-open {
    overflow: hidden !important;
  }
}


/* ========================================================================
   TAKA RAMKA 1.6.2 — trwała wyszukiwarka + identyczny przycisk koszyka
   ======================================================================== */
@media (max-width: 767.98px) {
  /* Natywny #cart jest tylko technicznym źródłem danych. Widoczny jest własny przycisk. */
  body header .tr-mobile-toolbar-v2 .tr-mobile-cart-source-v6 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%) !important;
  }

  body header .tr-mobile-toolbar-v2 .tr-mobile-cart-toggle-v6,
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle,
  body header .tr-mobile-toolbar-v2 .tr-mobile-search-toggle {
    display: inline-grid !important;
    place-items: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(76,59,54,.12) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.98) !important;
    color: var(--tr-ink) !important;
    box-shadow: 0 7px 20px rgba(85,63,58,.08) !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  body header .tr-mobile-toolbar-v2 .tr-mobile-cart-toggle-v6 i,
  body header .tr-mobile-toolbar-v2 .tr-mobile-menu-toggle i,
  body header .tr-mobile-toolbar-v2 .tr-mobile-search-toggle i {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: var(--tr-ink) !important;
  }

  /* Resize viewportu po otwarciu klawiatury nie może schować otwartego formularza. */
  body.tr-search-open .tr-mobile-search-panel-v2,
  body.tr-search-open .tr-mobile-search-panel-v2[hidden] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 52px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
  body.tr-search-open .tr-mobile-search-panel-v2 .tr-mobile-standalone-search-v4,
  body.tr-search-open .tr-mobile-search-panel-v2 .tr-mobile-search-group-v4 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    pointer-events: auto !important;
  }
  body.tr-search-open .tr-mobile-search-panel-v2 .tr-mobile-search-group-v4 {
    display: grid !important;
  }
}