/* ============================================================
   COMPUTRONIC UAE — custom daisyUI theme (data-theme="computronic")
   Brand tokens from brand_brief.json (single source of truth)
   primary #ff8406 | text/secondary #333e48 | bg #fff
   promo bar #000/#fff | buttons radius 25px, fill, UPPERCASE
   font: Open Sans
   ============================================================ */

/* ---- daisyUI v4 theme variables (oklch triplets) ---- */
[data-theme="computronic"] {
  color-scheme: light;

  --p: 74.5% 0.176 53;      /* primary  #ff8406 (orange)          */
  --pc: 33% 0.024 245;      /* primary-content  #333e48 (dark)    */
  --s: 33% 0.024 245;       /* secondary #333e48                  */
  --sc: 100% 0 0;           /* secondary-content white            */
  --a: 74.5% 0.176 53;      /* accent = orange                    */
  --ac: 33% 0.024 245;      /* accent-content dark                */
  --n: 33% 0.024 245;       /* neutral #333e48                    */
  --nc: 100% 0 0;           /* neutral-content white              */
  --b1: 100% 0 0;           /* base-100 white                     */
  --b2: 98% 0 0;            /* base-200                           */
  --b3: 95% 0 0;            /* base-300                           */
  --bc: 33% 0.024 245;      /* base-content text #333e48          */
  --in: 70% 0.12 230;       /* info                               */
  --inc: 100% 0 0;
  --su: 63% 0.17 148;       /* success #28a745                    */
  --suc: 100% 0 0;
  --wa: 80% 0.16 80;        /* warning                            */
  --wac: 33% 0.024 245;
  --er: 60% 0.22 27;        /* error                              */
  --erc: 100% 0 0;

  --rounded-box: 0.75rem;
  --rounded-btn: 25px;      /* button radius from brief           */
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.97;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ---- raw brand hex tokens (used by custom sections) ---- */
:root {
  --c-primary: #ff8406;
  --c-secondary: #333e48;
  --c-text: #333e48;
  --c-text-muted: #6c757d;
  --c-border: #dee2e6;
  --c-success: #28a745;
  --c-bg: #ffffff;
  --c-promo-bg: #000000;
  --c-promo-text: #ffffff;
  --c-footer-bg: #ff8406;
  --c-footer-text: #333e48;
  --c-btn-bg: #ff8406;
  --c-btn-text: #333e48;
}

/* ---- base ---- */
html { scroll-behavior: smooth; }
body {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", system-ui, sans-serif;
  font-weight: 700;
  color: var(--c-secondary);
}

/* ---- buttons: fill, orange, dark text, uppercase, pill ---- */
.btn { text-transform: uppercase; font-weight: 700; letter-spacing: .02em; }
.btn-primary {
  background-color: var(--c-btn-bg);
  border-color: var(--c-btn-bg);
  color: var(--c-btn-text);
}
.btn-primary:hover {
  background-color: #e6760a;
  border-color: #e6760a;
  color: var(--c-btn-text);
}
.btn-cta {
  background-color: var(--c-btn-bg);
  border-color: var(--c-btn-bg);
  color: var(--c-btn-text);
  border-radius: 25px;
  text-transform: uppercase;
  font-weight: 700;
}
.btn-cta:hover { background-color: #e6760a; border-color: #e6760a; }

/* ---- promo bar ---- */
.promo-bar {
  background: var(--c-promo-bg);
  color: var(--c-promo-text);
  font-size: .78rem;
  letter-spacing: .03em;
}

/* ---- header ---- */
.site-header { background: var(--c-secondary); }
.site-header a { color: #fff; }
.nav-link { text-transform: uppercase; font-weight: 600; font-size: .85rem; letter-spacing: .03em; }
.nav-link:hover { color: var(--c-primary); }
.topbar { background: #2a333c; color:#cfd6dd; font-size:.8rem; }
.topbar a { color:#cfd6dd; }
.topbar a:hover { color: var(--c-primary); }

/* ---- product page: quantity stepper + buy row ----
   The product template is shared with the other theme, which ships these
   classes; without them the stepper and the cart button render unstyled and
   read as loose text rather than one control group. */
.mm-pdp-buy {
  display: flex;
  gap: .75rem;
  align-items: stretch;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}
.mm-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-radius: 25px;
  overflow: hidden;
  background: #fff;
}
.mm-qty button {
  width: 44px;
  border: none;
  background: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--c-secondary);
  transition: background-color .15s;
}
.mm-qty button:hover { background: #f1f3f5; }
.mm-qty button:disabled { opacity: .35; cursor: not-allowed; }
.mm-qty input {
  width: 52px;
  height: 46px;
  border: none;
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-secondary);
  -moz-appearance: textfield;
}
.mm-qty input::-webkit-outer-spin-button,
.mm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mm-qty input:focus { outline: 2px solid var(--c-primary); outline-offset: -2px; }

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  padding: 0 1.5rem;
  border-radius: 25px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
}
.mm-btn-primary { background: var(--c-btn-bg); border-color: var(--c-btn-bg); color: var(--c-btn-text); }
.mm-btn-primary:hover { background: #e6760a; border-color: #e6760a; }
.mm-btn-outline { background: #fff; border-color: var(--c-border); color: var(--c-secondary); width: 48px; padding: 0; }
.mm-btn-outline:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ---- hero ---- */
/* The headline is baked into the artwork, so the slide must never crop it:
   `contain` keeps the whole image visible and the aspect-ratio matches the
   source files (1200x688), which leaves no letterboxing on either side. */
.hero-slide {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  /* Anchor to the top: the baked-in headline lives in the upper half, so any
     cropping must eat the bottom of the artwork, never the words. */
  background-position: center top;
  min-height: 480px;
}
.hero-cta { position: absolute; left: 2rem; bottom: 1.75rem; z-index: 1; }

/* Narrow screens cannot crop sideways without cutting the headline, so show
   the whole artwork and let the slide take its natural height. */
@media (max-width: 900px) {
  .hero-slide {
    background-size: contain;
    background-position: center;
    aspect-ratio: 1200 / 688;
    min-height: 0;
  }
  /* btn-lg is far too tall once the slide shrinks to the image height. */
  .hero-cta {
    left: 1rem;
    bottom: .6rem;
    height: auto;
    min-height: 0;
    padding: .4rem 1rem;
    font-size: .7rem;
  }
}

/* ---- section titles ---- */
.section-title { position: relative; display:inline-block; padding-bottom:.5rem; }
.section-title::after {
  content:""; position:absolute; left:0; bottom:0; width:56px; height:3px;
  background: var(--c-primary);
}

/* ---- cards ---- */
.product-card { border:1px solid var(--c-border); transition:.2s; background:#fff; }
.product-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.10); transform:translateY(-3px); }
.price { color: var(--c-primary); font-weight:800; white-space:nowrap; }
.price-new, .price-old, .price-tax { white-space:nowrap; }
.price-missing { color: var(--c-text-muted); font-weight:600; font-style:italic; }

.category-card { border:1px solid var(--c-border); transition:.2s; }
.category-card:hover { border-color: var(--c-primary); box-shadow:0 6px 18px rgba(0,0,0,.08); }

/* Category thumbnails come in whatever aspect ratio the supplier shipped
   (1:1, 4:3, 3:2). `contain` fits each one whole inside the same box, so a
   new category never needs its artwork re-cropped to match the others. */
.category-thumb {
  display: block;
  width: 100%;
  height: 9rem;
  object-fit: contain;
  padding: .75rem;
  background: #fff;
}

/* ---- usp / trust ---- */
.usp-item i { color: var(--c-primary); }

/* ---- footer ---- */
.site-footer { background: var(--c-footer-bg); color: var(--c-footer-text); border-top:3px solid var(--c-primary); }
.site-footer a { color: var(--c-footer-text); }
.site-footer a:hover { color: #fff; }
.footer-title { color: var(--c-secondary); text-transform:uppercase; font-size:.95rem; letter-spacing:.04em; font-weight:700; }
.footer-logo-box { background:#000; display:inline-block; padding:.5rem; border-radius:.5rem; }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; color:var(--c-secondary); font-size:1.1rem; }
.footer-social a:hover { color:#fff; }
.footer-copyright { background:var(--c-secondary); color:#fff; }
/* nav bar orange */
.site-nav-bar { background: var(--c-primary); }
.site-nav-bar .nav-link { color: var(--c-secondary); }
.site-nav-bar .nav-link:hover { color: #fff; }
.site-nav-bar .dropdown-content a { color: var(--c-secondary); }
.site-nav-bar .dropdown-content a:hover { color: var(--c-primary); }

/* ---- breadcrumbs ---- */
.crumbs a:hover { color: var(--c-primary); }

/* ---- misc ---- */
.link-orange { color: var(--c-primary); }
.badge-trn { background: var(--c-secondary); color:#fff; }
.divider-orange { height:3px; width:56px; background:var(--c-primary); border:0; }

/* spec table */
.spec-table th { background: var(--c-secondary); color:#fff; text-align:left; }
.spec-table td, .spec-table th { padding:.6rem .9rem; border:1px solid var(--c-border); }

/* cookie banner */
.cookie-banner { background: var(--c-secondary); color:#fff; }

/* ============================================================
   STANDARD CONTENT PAGES (account / forms / info / search / contact)
   Перенесённые на тему дефолтные шаблоны OpenCart используют эти классы.
   ============================================================ */
/* breadcrumbs */
.crumbs a { color: var(--c-text-muted); }
.crumbs a:hover { color: var(--c-primary); }
/* form validation */
.invalid-feedback { color:#dc3545; font-size:.8rem; display:block; margin-top:.25rem; }
.required > label:first-of-type:after { content:" *"; color:#dc3545; margin-left:.15rem; }
/* long-form content (info pages, sitemap, contact text) */
.content-prose h1 { font-size:1.6rem; font-weight:700; margin-bottom:1rem; }
.content-prose h2 { font-size:1.25rem; font-weight:700; margin:1.25rem 0 .5rem; }
.content-prose h3 { font-size:1.05rem; font-weight:700; margin:1rem 0 .4rem; }
.content-prose p { margin-bottom:.75rem; line-height:1.6; }
.content-prose ul { list-style:disc; padding-left:1.4rem; margin-bottom:.75rem; }
.content-prose ol { list-style:decimal; padding-left:1.4rem; margin-bottom:.75rem; }
.content-prose a { color: var(--c-primary); text-decoration:underline; }
.content-prose table { width:100%; border-collapse:collapse; margin-bottom:1rem; }
.content-prose th, .content-prose td { border:1px solid var(--c-border); padding:.5rem .75rem; }
/* sitemap columns */
.sitemap-tree ul { list-style:none; padding-left:1rem; }
.sitemap-tree > ul { padding-left:0; }
.sitemap-tree a { color: var(--c-text); }
.sitemap-tree a:hover { color: var(--c-primary); }

/* account / column-side menu module (default OpenCart .list-group — стилизуем через тему,
   сам модуль extension/opencart не трогаем) */
.list-group { display:flex; flex-direction:column; border:1px solid var(--c-border); border-radius:.6rem; overflow:hidden; background:#fff; }
.list-group-item { display:block; padding:.6rem .9rem; border-bottom:1px solid var(--c-border); color:var(--c-text); font-size:.9rem; text-decoration:none; }
.list-group-item:last-child { border-bottom:0; }
.list-group-item:hover { background:#fff7ef; color:var(--c-primary); }
.list-group-item.active { background:var(--c-primary); color:var(--c-btn-text); font-weight:700; }

/* ============================================================
   BOOTSTRAP-COMPAT — для стоковых корзины/чекаута (под-вьюхи register/shipping/payment/
   confirm/cart_list рендерятся в Bootstrap-классах, а Bootstrap не подключён). Тематические
   daisyUI-страницы используют другие классы (.card/.input/.btn), поэтому не затрагиваются.
   ============================================================ */
.row { display:flex; flex-wrap:wrap; margin-left:-.5rem; margin-right:-.5rem; }
.row > .col, .row > [class*="col-"] { padding-left:.5rem; padding-right:.5rem; flex:1 1 280px; min-width:0; }
.col-md-7 { flex:1 1 58%; } .col-md-5 { flex:1 1 38%; } .col-md-4 { flex:1 1 30%; }
.col-md-3 { flex:0 1 23%; } .col-sm-6 { flex:1 1 45%; } .col-sm-3 { flex:1 1 22%; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0 0 1.25rem; font-size:.85rem; }
.breadcrumb-item a { color:var(--c-text-muted); } .breadcrumb-item a:hover { color:var(--c-primary); }
.col-form-label, .control-label, label.col-form-label { display:block; font-weight:600; font-size:.85rem; margin-bottom:.25rem; }
.form-control, .form-select { width:100%; padding:.5rem .75rem; border:1px solid var(--c-border); border-radius:.5rem; background:#fff; color:var(--c-text); font-size:.95rem; }
.form-control:focus, .form-select:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 2px rgba(255,132,6,.2); }
.form-control.mb-1, .form-select.mb-1 { margin-bottom:.5rem; }
.input-group { display:flex; align-items:stretch; }
.input-group .input-group-text { display:flex; align-items:center; padding:.5rem .75rem; background:var(--c-secondary); color:#fff; border:1px solid var(--c-border); border-right:0; border-radius:.5rem 0 0 .5rem; font-size:.85rem; white-space:nowrap; }
.input-group .form-control, .input-group .form-select { border-radius:0 .5rem .5rem 0; }
.btn-light, .btn-secondary, .btn-outline-secondary { background:#fff; border:1px solid var(--c-border); color:var(--c-text); }
.btn-light:hover, .btn-secondary:hover { background:#f5f5f5; color:var(--c-primary); }
.btn-info { background:var(--c-secondary); border-color:var(--c-secondary); color:#fff; }
.btn-block, .d-grid > .btn { width:100%; }
.table { width:100%; border-collapse:collapse; margin-bottom:1rem; }
.table th, .table td { padding:.6rem .75rem; border-bottom:1px solid var(--c-border); vertical-align:middle; }
.table thead th, .table > :not(caption) > * > th { background:#f8f9fa; text-align:left; font-size:.85rem; }
.table-striped > tbody > tr:nth-child(odd) > td { background:#fcfcfc; }
.img-thumbnail { border:1px solid var(--c-border); border-radius:.4rem; padding:.2rem; max-width:100%; height:auto; }
.form-check { display:flex; align-items:center; gap:.5rem; margin:.35rem 0; }
.form-check .form-check-input { width:1rem; height:1rem; accent-color:var(--c-primary); margin:0; }
.form-check-label { font-size:.9rem; }
.alert { padding:.75rem 1rem; border-radius:.5rem; margin-bottom:1rem; border:1px solid transparent; }
.alert-success { background:#e7f6ec; color:#1e7e34; border-color:#bee5cd; }
.alert-danger { background:#fdecea; color:#b02a37; border-color:#f5c2c7; }
.alert-info { background:#e7f1ff; color:#0a58ca; border-color:#b6d4fe; }
#checkout-confirm .btn-primary, #button-confirm { width:100%; }

/* ============================================================
   D5 — CART & CHECKOUT THEME (fix13 coupon overlap / fix14 method
   selectability / fix15 2-col desktop · 1-col mobile)
   ============================================================ */
.checkout-title { font-size:1.6rem; font-weight:800; color:var(--c-secondary); margin:.25rem 0 1.25rem; }
.checkout-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--rounded-box); padding:1.25rem 1.25rem; margin-bottom:1.25rem; }
.checkout-card legend { font-size:1.05rem; font-weight:700; color:var(--c-secondary); border-bottom:1px solid var(--c-border); padding-bottom:.5rem; margin-bottom:1rem; width:100%; }

/* alerts as fixed toasts (top-right) so they never shift the grid */
.checkout-alert { position:fixed; top:1rem; right:1rem; z-index:1200; width:min(360px,90vw); display:flex; flex-direction:column; gap:.5rem; }
.checkout-alert .alert { margin:0; box-shadow:0 6px 20px rgba(0,0,0,.12); }

/* ---- fix15: 2-col grid (form left / order summary right, sticky) ---- */
.checkout-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:1024px){
  .checkout-grid { grid-template-columns: minmax(0,1fr) 23rem; align-items:start; }
  .checkout-aside { position:sticky; top:5.5rem; }
}
.checkout-main { min-width:0; }
.checkout-summary { padding-top:1rem; }
.checkout-summary .table { margin-bottom:.75rem; }

/* confirm / pay button: orange CTA, full width, always clickable on top */
#checkout-confirm .btn-primary,
#button-confirm { width:100%; background-color:var(--c-primary); border-color:var(--c-primary); color:var(--c-btn-text); font-weight:700; border-radius:var(--rounded-btn); padding:.65rem 1rem; position:relative; z-index:5; }
#checkout-confirm .btn-primary:hover,
#button-confirm:hover { background-color:#e6760a; border-color:#e6760a; }
#checkout-confirm .btn-primary:disabled,
#button-confirm:disabled { background:#e9ecef; border-color:#e9ecef; color:#9aa0a6; cursor:not-allowed; }
#checkout-payment { position:relative; z-index:5; }

/* shipping / payment method blocks */
#checkout-shipping-method fieldset,
#checkout-payment-method fieldset { margin:0; }
#checkout-shipping-method .input-group,
#checkout-payment-method .input-group { margin-bottom:.25rem; }
#checkout-shipping-method .btn-primary,
#checkout-payment-method .btn-primary { background-color:var(--c-primary); border-color:var(--c-primary); color:var(--c-btn-text); font-weight:700; white-space:nowrap; }
#input-comment { min-height:90px; }

/* ---- fix14: themed, reliable method picker (Bootstrap modal made a real
   fixed overlay so the Continue button is on top & clickable for guests) ---- */
.modal-backdrop { display:none !important; }
/* NOTE: daisyUI full.css also ships a `.modal` component (opacity:0;pointer-events:none)
   that hijacks the Bootstrap-markup modal used by OC4 method pickers. Bootstrap toggles
   `.show` + inline display, NOT daisyUI's `.modal-open`, so force visibility here. */
.modal { display:none; position:fixed; inset:0; z-index:1100; background:rgba(0,0,0,.55); overflow-y:auto; }
.modal.show {
  display:block !important; opacity:1 !important; visibility:visible !important;
  pointer-events:auto !important; background:rgba(0,0,0,.55) !important; z-index:1100 !important;
}
.modal-dialog { max-width:520px; width:calc(100% - 2rem); margin:6vh auto; position:relative; z-index:1; pointer-events:auto; }
.modal-dialog-centered { display:block; }
.modal-content { background:#fff; border-radius:var(--rounded-box); border:1px solid var(--c-border); box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; pointer-events:auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--c-border); background:#f8f9fa; }
.modal-title { font-size:1.1rem; font-weight:700; color:var(--c-secondary); margin:0; }
.modal-body { padding:1.25rem; }
.modal-body .form-check { padding:.5rem .25rem; border-bottom:1px dashed var(--c-border); }
.modal-body .form-check:last-of-type { border-bottom:0; }
.modal-body .btn-primary { background-color:var(--c-primary); border-color:var(--c-primary); color:var(--c-btn-text); font-weight:700; }
.btn-close { background:transparent; border:0; font-size:1.4rem; line-height:1; color:var(--c-text-muted); cursor:pointer; }
.btn-close::before { content:"\00d7"; }
.btn-close:hover { color:var(--c-primary); }

/* ---- fix13: cart accordion (coupon / shipping est. / gift cert.) collapses
   properly so the coupon block never overlaps the Checkout button ---- */
.accordion { padding:0; overflow:hidden; }
.accordion-item { border-bottom:1px solid var(--c-border); }
.accordion-item:last-child { border-bottom:0; }
.accordion-header { margin:0; }
.accordion-button { width:100%; text-align:left; background:#fff; border:0; padding:.9rem 1rem; font-weight:600; color:var(--c-secondary); cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.accordion-button::after { content:"\f078"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.7rem; color:var(--c-text-muted); transition:transform .2s; }
.accordion-button:not(.collapsed) { color:var(--c-primary); background:#fff7ef; }
.accordion-button:not(.collapsed)::after { transform:rotate(180deg); }
.accordion-collapse.collapse:not(.show) { display:none; }
.accordion-collapse.collapsing { display:block; }
.accordion-body { padding:1rem; background:#fcfcfc; }
.accordion-body .col-form-label { padding-top:.4rem; }

/* cart action row */
.cart-actions { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:center; margin-top:1.25rem; }
.cart-actions .btn { border-radius:var(--rounded-btn); padding:.6rem 1.4rem; font-weight:700; }
.cart-next-title { font-size:1.15rem; font-weight:700; color:var(--c-secondary); margin:1.5rem 0 .25rem; }
.cart-next-text { color:var(--c-text-muted); font-size:.9rem; margin-bottom:.75rem; }

/* keep PRICE cells on a single line (AED 8,550.00); allow product names to wrap so
   the narrow sticky summary card never overflows */
#checkout-confirm td.text-end, #checkout-confirm tfoot td,
#checkout-total td.text-end, #shopping-cart td.text-end { white-space:nowrap; }
#checkout-confirm td.text-start { white-space:normal; word-break:break-word; }
#checkout-confirm table { table-layout:fixed; width:100%; }
#checkout-confirm td.text-start { width:auto; }

/* Bootstrap display utilities the OC4 checkout JS relies on (theme ships no BS CSS).
   Without .d-none, guest-checkout JS can't hide the Password / register-agree /
   inactive custom-field / payment-address blocks. */
.d-none { display:none !important; }
.d-block { display:block !important; }
.d-flex { display:flex !important; }
.d-grid { display:grid !important; }
.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color:#dc3545 !important; }
.is-invalid:focus { box-shadow:0 0 0 2px rgba(220,53,69,.2) !important; }

/* fix #06: footer nav links — white text on orange for WCAG AA contrast */
.footer-links a { color: #ffffff !important; }
.footer-links a:hover { opacity: .8; }

/* fix #07: last odd category card must not stretch full-width on mobile */
@media (max-width: 767px) {
  .category-grid > a:last-child:nth-child(odd) { max-width: 50%; }
}

/* fix #48: страницы на стоковой обёртке `.container` (товар, корзина, аккаунт).
   Tailwind-овский `.container` задаёт только ширину — боковых отступов у него нет,
   поэтому отрицательные жёлобы `.row` (-.5rem) вылезали за края вьюпорта, а нижний
   блок (теги/характеристики) упирался в футер без единого пикселя зазора. */
.drawer-content > .container {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block: 1.5rem 3rem;
}
@media (max-width: 767px) {
  .drawer-content > .container { padding-block: 1rem 2.5rem; }
}

/* daisyUI объявляет `.tab-content { display:none }` для своего виджета вкладок.
   Стоковая карточка товара использует то же имя класса, из-за чего описание,
   характеристики и отзывы не отображались вовсе. */
.drawer-content .tab-content { display: block; margin-top: 0; }
.drawer-content .tab-content > .tab-pane { display: none; }
.drawer-content .tab-content > .tab-pane.active { display: block; }

.drawer-content .nav-tabs {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  list-style: none; padding: 0; margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--c-border);
}
.drawer-content .nav-tabs .nav-link {
  display: inline-block; padding: .65rem 0;
  color: var(--c-text); border-bottom: 2px solid transparent;
}
.drawer-content .nav-tabs .nav-link.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
/* Вкладки лежат внутри `.row` рядом с колонками галереи и покупки. В Bootstrap
   любой прямой потомок `.row` получает width:100%; здесь такого правила нет,
   поэтому вкладки вставали третьей колонкой и сжимали таблицу характеристик. */
.drawer-content .row > .nav-tabs,
.drawer-content .row > .tab-content { flex: 0 0 100%; max-width: 100%; }
/* fix #49: таблицы характеристик приезжают от парсера в разной разметке
   (SpecValueTable, agw-table, c-product-all-details-table, вовсе без класса).
   vertical-align у ячеек наследуется от <table> и равен middle, поэтому
   однострочная подпись слева вставала по центру многострочного значения
   справа — строки читались как съехавшие. */
.drawer-content .tab-content table { width: 100%; max-width: 100%; border-collapse: collapse; }
.drawer-content .tab-content th,
.drawer-content .tab-content td {
  vertical-align: top;
  border: 1px solid var(--c-border);
  padding: .6rem .75rem;
  text-align: left;
  font-size: .9rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.drawer-content .tab-content th { font-weight: 600; }
/* Колонка подписей иначе схлопывается до ширины самого длинного слова. */
.drawer-content .tab-content tr > td:first-child:not(:last-child),
.drawer-content .tab-content tr > th:first-child:not(:last-child) { width: 34%; }
/* Иконка-сноска рядом с названием параметра: блочный div уводил её на свою строку. */
.drawer-content .tab-content .icon_infoNote { display: inline-block; vertical-align: text-bottom; margin-left: .3rem; }
.drawer-content .tab-content .icon_infoNote svg { width: 1em; height: 1em; }
.drawer-content .table-responsive { overflow-x: auto; }

/* fix #50: лента миниатюр карточки товара.
   Раньше это был просто набор картинок, который либо уезжал в горизонтальный
   скролл, либо складывался в столбик. Теперь — лента со стрелками, которые
   листают само фото в основном окне, а не только прокручивают ленту. */
.pdp-thumbs-wrap { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; margin-top: .75rem; }

.pdp-thumbs {
  display: flex;
  gap: .5rem;
  /* Ширина по содержимому, но лента сжимается, когда миниатюры не влезают. */
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  /* Полосу прокрутки прячем, но сам скролл оставляем — это свайп на тач-экранах. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }

.pdp-thumb {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 4.5rem;
  padding: 2px;
  background: #fff;
  border: 2px solid var(--c-border);
  border-radius: .375rem;
  cursor: pointer;
  transition: border-color .15s;
}
.pdp-thumb:hover { border-color: var(--c-text-muted); }
.pdp-thumb.active { border-color: var(--c-primary); }
.pdp-thumb img { width: 100%; height: auto; display: block; }

.pdp-thumbs-arrow {
  flex: 0 0 auto;
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  color: var(--c-secondary);
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pdp-thumbs-arrow:hover { background: var(--c-primary); color: var(--c-btn-text); border-color: var(--c-primary); }
.pdp-thumbs-arrow[hidden] { display: none; }

#pdp-main-img { transition: opacity .2s ease; }
#pdp-main-img.is-loading { opacity: .35; }

/* fix #51: пагинация приходит в bootstrap-разметке (.pagination / .page-item /
   .page-link), а Bootstrap в теме не подключён — <li> оставались list-item,
   и номера страниц выстраивались столбиком без оформления. */
.pagination-nav { width: 100%; }
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination .page-item { display: inline-flex; }
.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .6rem;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 9999px;
  color: var(--c-secondary);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pagination a.page-link:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pagination .page-item.active .page-link {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: #fff;
  cursor: default;
}
.pagination .page-next { padding: 0 1rem; }

/* fix #52: FAQ на главной. daisyUI не разделяет заголовок и содержимое
   раскрытого пункта, поэтому ответ вставал впритык к вопросу — открытый блок
   выпадал из общего ритма, где пункты отбиты линиями друг от друга. */
.faq-accordion .collapse-title { padding: 1rem 3rem 1rem 1rem; }
.faq-accordion .collapse-content { padding: 0 1rem; }
/* Линия и верхний отступ только у раскрытого: у закрытого высота содержимого
   схлопнута в ноль, и граница проступила бы лишним пикселем под вопросом. */
.faq-accordion input:checked ~ .collapse-content {
  border-top: 1px solid var(--c-border);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.faq-accordion .collapse-content p { margin: 0; color: var(--c-text-muted); }

/* fix #54: стрелки героя. Одна общая пара поверх карусели вместо ссылок-якорей
   внутри каждого слайда. */
.hero-nav {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  right: 1.25rem;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;   /* клики проходят к слайду, ловят только кнопки */
  z-index: 2;
}
.hero-nav-btn {
  pointer-events: auto;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, .4);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s;
}
.hero-nav-btn:hover { background: rgba(0, 0, 0, .65); }

/* Полосу прокрутки карусели прячем, свайп на тач-экранах остаётся. */
#hero-carousel { scrollbar-width: none; -ms-overflow-style: none; }
#hero-carousel::-webkit-scrollbar { display: none; }