/* ==========================================================================
   Quốc Đạt Computer — main stylesheet
   Replaces the source site's bootstrap.css + library.css + pc_style.css +
   mobile_style.css (~320 KB, desktop/mobile served separately by UA sniffing)
   with one responsive sheet. Visual design is a faithful clone; the mechanism
   underneath is grid/flex with fluid breakpoints, so there is exactly one
   layout to reason about.
   ========================================================================== */

:root {
  /* brand — sampled from the source stylesheet */
  --orange:        #ff9219;
  --orange-dark:   #ff6607;
  --orange-alt:    #f37021;
  --red:           #dd1616;
  --red-bright:    #ff3c00;
  --navy:          #0a0026;
  --blue:          #194ae8;
  --green:         #2e9e2e;

  --ink:           #222;
  --body:          #333;
  --muted:         #888;
  --faint:         #999;

  --page:          #edeef2;
  --card:          #fff;
  --line:          #e1e1e1;
  --line-soft:     #ebebeb;
  --wash:          #f5f5f5;

  --wrap:          1320px;
  --radius:        5px;
  --shadow:        0 0 3px 1px #e9e9e9;
  --shadow-hover:  0 2px 12px rgba(0,0,0,.13);
}

/* ------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
  background: var(--page);
  word-break: break-word;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; border: 0; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--orange-dark); }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; line-height: 1.25; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 10px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* small helpers the cloned markup relies on */
.orange { color: var(--orange-dark); }
.green  { color: var(--green); }
.red    { color: var(--red); }
.blue   { color: var(--blue); }
.text-center { text-align: center; }
.font-300 { font-weight: 300; }
.font-700 { font-weight: 700; }
.font-900 { font-weight: 900; }

/* =========================================================== header */

.global-banner-header { position: relative; text-align: center; background: var(--navy); }
/* Edge to edge, as on the source site — the asset is a 1308px strip that was
   letterboxing on any wider viewport, leaving the navy backing showing as two
   grey margins. */
.global-banner-header img { display: block; width: 100%; height: auto; }
.global-banner-header .close {
  position: absolute; top: 0; right: 10px; color: #fff;
  font-size: 16px; padding: 4px 8px; line-height: 1;
}

.global-header { background: #fff; }

/* utility bar */
.header-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 13px; font-weight: 300; position: relative;
  padding: 6px 0; flex-wrap: wrap;
}
.header-top a { color: var(--body); }
.header-top-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.header-top-right { display: flex; gap: 8px; font-size: 14px; }
.header-top-right a {
  width: 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 50%; background: var(--wash); color: var(--body);
}
.header-top-right a:hover { background: var(--orange); color: #fff; }

/* hover panel of sales contacts */
.support-menu { position: relative; }
.support-menu > .box-title {
  cursor: pointer; font-weight: 700;
  background: repeating-linear-gradient(to right, #000 0, #fabb2b 50%, #000 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 4s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) {
  .support-menu > .box-title { animation: none; }
}
.support-menu .item-hover {
  display: none; position: absolute; top: 100%; left: 0; z-index: 60;
  width: 300px; padding: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-hover);
}
.support-menu:hover .item-hover, .support-menu:focus-within .item-hover { display: block; }
.support-menu .item + .item { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.support-menu .item-title { margin: 0 0 4px; font-weight: 700; color: var(--ink); }
.support-menu .item a { display: block; padding: 2px 0; }

/* logo / search / hotline row */
.header-middle { padding: 10px 0; }
.header-middle .container {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.header-logo { width: 200px; flex: 0 0 auto; }
.header-logo img { display: block; width: 100%; height: auto; }

.header-search-group { flex: 1 1 380px; position: relative; min-width: 0; }
.header-search-group form {
  display: flex; background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line-soft);
}
.header-search-group input {
  flex: 1; min-width: 0; border: 0; padding: 11px 14px; font-size: 14px; background: transparent;
}
.header-search-group input:focus { outline: none; }
.header-search-group .btn-search {
  border: 0; cursor: pointer; width: 52px;
  background: var(--orange); color: #fff; font-size: 16px;
}
.header-search-group .btn-search:hover { background: var(--orange-dark); }

.header-right-group { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.header-right-group .item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.header-right-group .item i { font-size: 26px; color: var(--orange); }
.header-right-group b { font-size: 15px; color: var(--orange-dark); display: block; }

.header-cart { position: relative; display: flex; align-items: center; }
.header-cart .cart-count {
  position: absolute; top: -6px; left: 18px; min-width: 18px; height: 18px;
  padding: 0 4px; border-radius: 9px; background: var(--navy); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ------------------------------------------------------------ primary nav

   One orange band: the dark category box on the left, utility links filling
   the rest. There is no horizontal link bar — the category tree IS the
   navigation, as on the source site.

   --cat-w is the single definition of the category column's width. The panel,
   the flyout offset and the homepage's banner inset all derive from it, so the
   three cannot drift out of alignment.                                       */

:root { --cat-w: 256px; --nav-h: 52px; }

.global-nav { background: var(--orange); }
.global-nav .container { display: flex; align-items: stretch; position: relative; }

.nav-cat { position: static; flex: 0 0 var(--cat-w); }
.nav-cat > .box-title {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin: 0; padding: 0 18px; border: 0; text-align: left;
  height: var(--nav-h); color: #fff; background: var(--navy);
  font-weight: 700; font-size: 16px; cursor: pointer; white-space: nowrap;
}

/* The panel hangs off .global-nav .container, NOT off .nav-cat, so the flyout
   can span the container's full remaining width without nesting inside a
   256px box. Hence position:static above and the shared positioning context. */
.nav-cat .cat-panel {
  display: none; position: absolute; top: 100%; left: 0; z-index: 70;
  width: var(--cat-w); background: #fff; border: 1px solid var(--line);
  border-top: 0; box-shadow: var(--shadow-hover); padding: 4px 0;
}
.nav-cat:hover .cat-panel,
.nav-cat:focus-within .cat-panel,
.nav-cat.open .cat-panel { display: block; }

.cat-item { position: static; }
.cat-item > .cat-1 {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  font-size: 14px; color: var(--ink);
}
.cat-item > .cat-1 .cat-name { flex: 1 1 auto; }
.cat-item > .cat-1 .caret { color: var(--faint); font-size: 15px; }
.cat-item:hover > .cat-1 { background: var(--orange); color: #fff; }
.cat-item:hover > .cat-1 .caret { color: #fff; }
.nav-cat .cat-thumb { width: 24px; height: 24px; object-fit: contain; flex: 0 0 24px; }

/* Second + third level, opening to the right of the panel.

   An absolutely-positioned .cat-panel is itself the containing block for
   anything absolute inside it, so `top:100%` here would mean "below the
   panel", not "below the nav band", and `100% - --cat-w` would compute to
   zero width. Hence the offsets are taken from the PANEL (top:0, left:100%)
   and the width is derived from the container's own geometry: the wrapper
   capped by the viewport, less both gutters, less the category column. */
.cat-item > .sub-menu {
  display: none; position: absolute; top: 0; left: 100%; z-index: 71;
  width: calc(min(100vw, var(--wrap)) - 20px - var(--cat-w)); min-height: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 24px; padding: 20px 26px;
  background: #fff; border: 1px solid var(--line); border-top: 0; border-left: 0;
  box-shadow: var(--shadow-hover);
}
.cat-item:hover > .sub-menu { display: grid; }
.sub-item > .cat-2 {
  display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700;
  color: var(--orange-dark); text-transform: uppercase;
}
.sub-item > .cat-3 { display: block; padding: 3px 0; font-size: 13px; color: var(--body); }
.sub-item > .cat-3:hover, .sub-item > .cat-2:hover { color: var(--orange); }

/* utility links — the source site's "Sản phẩm bạn đã xem / Giao hàng ..." row */
.nav-utils {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 26px; padding: 0 22px; min-width: 0;
}
.nav-utils a { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 15px; }
.nav-utils a:hover { color: var(--navy); }
.nav-utils i { font-size: 17px; }

/* ========================================================= breadcrumb */

.global-breadcrumb { padding: 10px 0; font-size: 13px; }
.global-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.global-breadcrumb li + li::before { content: '/'; margin: 0 6px; color: var(--faint); }
.global-breadcrumb li { display: flex; align-items: center; color: var(--muted); }
.global-breadcrumb a { color: var(--muted); }
.global-breadcrumb a:hover { color: var(--orange-dark); }

/* ======================================================= product card */

.p-container {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--card);
}
.p-container.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.p-item {
  padding: 12px; background: var(--card); position: relative;
  border-right: 1px solid var(--page); border-bottom: 1px solid var(--page);
  transition: box-shadow .18s ease;
  min-width: 0;
}
.p-item:hover { box-shadow: var(--shadow-hover); z-index: 2; }
.p-item a { display: block; color: var(--ink); }
.p-item a:hover { color: var(--orange-dark); }

/* The source site's branded frame — navy corner with the QĐC mark, orange
   swoosh opposite. Both PNGs carry a tRNS chunk, so the middle is transparent
   and the frame can sit ON TOP of the photo; the photo is capped at 90% so
   nothing important lands under a corner. pointer-events:none keeps the whole
   tile clickable through it. */
.p-item .p-img {
  position: relative; padding-bottom: 100%; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
}
.p-item .p-img::after,
.product-info-group .big-img-box::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; background-size: 100% 100%; background-repeat: no-repeat;
}
.p-item .p-img::after { background-image: url('/static/images/bg-p-img.png'); }
.product-info-group .big-img-box::after { background-image: url('/static/images/bg-img-2.png'); }
.p-item .p-img img {
  position: absolute; inset: 0; margin: auto;
  max-width: 90%; max-height: 90%; width: auto; height: auto;
  object-fit: contain; transition: transform .2s ease;
}
.p-item:hover .p-img img { transform: translateY(-4px); }

.p-item .p-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; height: 42px; margin-bottom: 5px;
  font-size: 14px; line-height: 21px;
}
.p-price-group {
  display: flex; align-items: flex-end; flex-wrap: wrap;
  gap: 0 6px; line-height: 20px; min-height: 44px;
}
.p-price { font-size: 18px; font-weight: 900; color: var(--red); width: 100%; }
.p-old-price { font-size: 13px; color: var(--faint); text-decoration: line-through; }
.p-discount {
  color: #fff; font-weight: 700; font-size: 12px; text-align: center;
  background: url('/static/images/bg-discount.png') no-repeat;
  background-size: 100% 100%; padding: 2px 7px; min-width: 45px;
}
.p-quantity { font-size: 12px; margin-top: 2px; }

/* hover detail card — desktop affordance only */
.p-tooltip {
  display: none; position: absolute; top: 0; left: 100%; z-index: 30;
  width: 280px; padding: 12px; background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-hover);
}
.p-item:hover .p-tooltip { display: block; }
.p-container .p-item:nth-child(5n) .p-tooltip,
.p-container.cols-4 .p-item:nth-child(4n) .p-tooltip { left: auto; right: 100%; }
.p-tooltip .tooltip-title { margin: 0 0 8px; font-weight: 700; font-size: 13px; }
.p-tooltip .tooltip-summary { font-size: 12px; color: var(--muted); }
.p-tooltip .tooltip-summary .item { display: block; margin-bottom: 3px; }
.p-tooltip .fa-check-circle { color: var(--orange); margin-right: 5px; }
@media (hover: none) { .p-tooltip { display: none !important; } }

/* ========================================================== homepage */

/* On the homepage the category panel stands open beside the hero rather than
   hanging over it, so the banner row is inset by exactly the panel's width.
   Both come from --cat-w; nothing here repeats the number. */
body.is-home .nav-cat .cat-panel { display: block; }
body.is-home .home-banner-group { margin-left: calc(var(--cat-w) + 10px); }

.home-banner-group {
  display: grid; grid-template-columns: minmax(0,1fr) 340px;
  gap: 10px; margin: 12px 0;
}
.home-banner-slider { position: relative; overflow: hidden; border-radius: var(--radius); }
.home-banner-slider .slides { display: flex; transition: transform .4s ease; }
.home-banner-slider .slide { flex: 0 0 100%; }
.home-banner-slider img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.home-banner-slider .dots {
  position: absolute; bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.home-banner-slider .dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.6); cursor: pointer;
}
.home-banner-slider .dots button[aria-current="true"] { background: var(--orange); }
.home-banner-slider .arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #fff; cursor: pointer; font-size: 16px;
}
.home-banner-slider .arrow.prev { left: 8px; }
.home-banner-slider .arrow.next { right: 8px; }

.home-banner-right { display: grid; gap: 10px; align-content: start; }
.home-banner-right img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

.home-banner-row { display: grid; gap: 10px; margin: 12px 0; }
.home-banner-row.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.home-banner-row.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.home-banner-row img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.hover-img a { display: block; overflow: hidden; border-radius: var(--radius); }
.hover-img img { transition: transform .3s ease; }
.hover-img a:hover img { transform: scale(1.03); }

/* flash-deal rail */
.home-deal-group { background: #fff; margin: 12px 0; }
.home-deal-group .box-title {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 12px 8px 24px;
  background: linear-gradient(45deg, var(--red), var(--red-bright));
  color: #fff;
}
.home-deal-group .box-title h2 {
  margin: 0; font-size: 22px; font-weight: 900; color: #fff;
  display: flex; align-items: center; gap: 8px;
}
.home-deal-group .box-title .fa-fire { color: #ffd400; }
.home-deal-group .view-all a { color: #fff; font-weight: 700; font-size: 13px; }

/* category rails */
.home-box-group { background: #fff; margin: 12px 0; }
.home-box-group .box-title {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--page);
}
.home-box-group .cat-title {
  margin: 0; font-weight: 900; font-size: 22px; color: #fff;
  background: url('/static/images/home-bg-title.png') no-repeat;
  background-size: 100% 100%; padding: 10px 52px 10px 16px; white-space: nowrap;
}
.home-box-group .cat-list { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0; }
.home-box-group .cat-list a {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: 20px;
  font-size: 13px; color: var(--body); background: #fff;
}
.home-box-group .cat-list a:hover { border-color: var(--orange); color: var(--orange-dark); }
.home-box-group .cat-list h3 { margin: 0; font-size: 13px; font-weight: 400; }
.home-box-group .view-all { padding: 12px; text-align: center; border-top: 1px solid var(--page); }
.home-box-group .view-all a { font-weight: 700; color: var(--orange-dark); }

/* ============================================== category / list page */

.product-col-group { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 12px; }
.product-col-group .col-left { min-width: 0; }
.product-col-group .col-right { min-width: 0; background: #fff; }

.cat-list-group {
  display: flex; flex-wrap: wrap; gap: 8px;
  background: #fff; padding: 12px; margin-bottom: 12px;
}
.cat-list-group a {
  padding: 6px 14px; background: var(--wash); border-radius: 20px; font-size: 13px;
}
.cat-list-group a:hover, .cat-list-group a.current { background: var(--orange); color: #fff; }

.filter-group { background: #fff; padding: 12px; }
.filter-item + .filter-item { margin-top: 16px; }
.filter-item .title {
  margin: 0 0 8px; font-weight: 900; font-size: 14px; text-transform: uppercase;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.filter-list a { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: 13px; }
.filter-list a:hover { color: var(--orange-dark); }
.filter-list .fa { color: var(--faint); }

.sort-by-group {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px; border-bottom: 1px solid var(--page);
}
.sort-by-group a {
  padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px;
}
.sort-by-group a:hover, .sort-by-group a.current {
  border-color: var(--orange); color: var(--orange-dark);
}

.page-heading { background: #fff; padding: 14px; margin-bottom: 12px; }
.page-heading h1 { margin: 0; font-size: 22px; font-weight: 900; }

.pagination { display: flex; justify-content: center; gap: 6px; padding: 18px 12px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 34px; height: 34px; line-height: 32px; padding: 0 10px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 13px;
}
.pagination a:hover { border-color: var(--orange); color: var(--orange-dark); }
.pagination .current { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }

.empty-state { padding: 60px 20px; text-align: center; color: var(--muted); }

/* ================================================== forms (checkout) */
.qd-form { padding: 4px 2px 2px; }
.qd-form-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.qd-form-row label { flex: 0 0 160px; padding-top: 9px; font-size: 14px; font-weight: 600; }
.qd-form-row input, .qd-form-row textarea {
  flex: 1 1 auto; min-width: 0; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; font-size: 14px;
}
.qd-form-row input:focus, .qd-form-row textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(243, 146, 0, .15);
}
/* Errors are announced, so they need to be visible without hunting: a
   checkout that silently refuses is a checkout that gets abandoned. */
.qd-form-error {
  margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius);
  background: #fdecea; border: 1px solid #f5c2bd; color: #a3261a; font-size: 14px;
}
.qd-form button[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 640px) {
  .qd-form-row { display: block; }
  .qd-form-row label { display: block; padding: 0 0 5px; }
  .qd-form-row input, .qd-form-row textarea { width: 100%; }
}

/* ===================================================== product detail */

.product-info-group {
  display: grid; grid-template-columns: 400px minmax(0,1fr) 260px;
  gap: 20px; background: #fff; padding: 16px; margin-bottom: 12px;
}
.product-info-group .big-img-box {
  position: relative; padding-bottom: 100%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.product-info-group .big-img-box img {
  position: absolute; inset: 0; margin: auto;
  max-width: 92%; max-height: 92%; width: auto; height: auto; object-fit: contain;
}
.img-gallery-box { display: flex; gap: 8px; flex-wrap: wrap; }
.img-gallery-box a {
  width: 66px; height: 66px; border: 1px solid var(--line); border-radius: 4px;
  padding: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.img-gallery-box a.current, .img-gallery-box a:hover { border-color: var(--orange); }
.img-gallery-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pro-name { margin: 0 0 10px; font-size: 22px; font-weight: 900; line-height: 1.3; color: var(--ink); }
.pro-meta-row {
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 12px;
  font-size: 13px; display: flex; flex-wrap: wrap; gap: 18px;
}
.pro-summary-group { margin-bottom: 14px; }
.summary-holder span { display: block; font-size: 13px; margin-bottom: 4px; font-weight: 300; }
.summary-holder .fa-check-circle { color: var(--orange); margin-right: 6px; }
.summary-holder.clamped { max-height: 148px; overflow: hidden; }
.btn-summary a { font-size: 13px; color: var(--blue); cursor: pointer; }

.pro-info-price-group { background: var(--wash); padding: 12px; margin-bottom: 14px; }
.pro-info-price-group table td { padding: 3px 0; font-size: 14px; }
.pro-info-price-group td:first-child { width: 120px; color: var(--muted); }
.pro-info-price-group .price { font-size: 28px; font-weight: 900; color: var(--red); }
.pro-info-price-group del { color: var(--faint); }

.pro-btn-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-btn-item {
  flex: 1 1 180px; text-align: center; padding: 9px 14px; border-radius: var(--radius);
  color: #fff; line-height: 1.25;
}
.pd-btn-item b { display: block; font-size: 15px; font-weight: 900; }
.pd-btn-item span { font-size: 11px; opacity: .9; }
.pd-btn-item:hover { color: #fff; filter: brightness(1.07); }
.btn-buy-now   { background: var(--red); }
.btn-add-cart  { background: var(--orange); }
.btn-payinstall{ background: var(--navy); flex-basis: 100%; }

.pro-static-text { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.pro-static-text .title { margin: 0 0 10px; font-size: 15px; font-weight: 900; text-align: center; }
.pro-static-text .text a { display: block; padding: 5px 0; font-size: 13px; font-weight: 300; }
.pro-static-text .text a::before { content: '\f058'; font-family: FontAwesome; color: var(--orange); margin-right: 7px; }

.pro-detail-group { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; }
.box-item { background: #fff; padding: 16px; margin-bottom: 12px; }
.box-item .box-title {
  margin: 0 0 12px; font-size: 16px; font-weight: 900; text-transform: uppercase;
  border-bottom: 2px solid var(--orange); padding-bottom: 8px;
}

/* WYSIWYG bodies — product descriptions, articles, policy pages */
.static-content { font-size: 14px; line-height: 1.7; }
.static-content img { max-width: 100%; height: auto; }
.static-content p { margin: 0 0 1em; }
.static-content h2, .static-content h3 { font-weight: 900; margin: 1.2em 0 .5em; }
.static-content ul, .static-content ol { margin: 0 0 1em 1.4em; }
.static-content ul li { list-style: disc; }
.static-content ol li { list-style: decimal; }
.static-content a { color: var(--blue); }
.static-content table { width: 100%; margin-bottom: 1em; }
.static-content td, .static-content th { border: 1px solid var(--line); padding: 7px 9px; }
.static-content iframe { max-width: 100%; }
/* long bodies collapse until asked for */
.static-content.clamped { max-height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
          mask-image: linear-gradient(#000 78%, transparent); }
.content-button { text-align: center; padding-top: 10px; }
.content-button a { color: var(--blue); font-weight: 700; cursor: pointer; }

/* ============================================================ article */

.art-col-left { min-width: 0; background: #fff; padding: 16px; }
.article-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; }
.art-title { font-size: 24px; font-weight: 900; margin: 0 0 10px; }
.art-meta { font-size: 13px; color: var(--muted); margin-bottom: 14px; }

.article-list { display: grid; gap: 12px; }
.article-card {
  display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 14px;
  background: #fff; padding: 12px;
}
.article-card .img img { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; }
.article-card .title { font-size: 16px; font-weight: 700; display: block; margin-bottom: 6px; }
.article-card .summary { font-size: 13px; color: var(--muted); }

/* sidebar widgets */
.sidebar-box { background: #fff; padding: 14px; margin-bottom: 12px; }
.sidebar-box .box-title {
  margin: 0 0 10px; font-size: 15px; font-weight: 900; text-transform: uppercase;
  border-bottom: 2px solid var(--orange); padding-bottom: 7px;
}
.sidebar-list li a { display: flex; gap: 9px; padding: 7px 0; font-size: 13px; align-items: center; }
.sidebar-list img { width: 54px; height: 54px; object-fit: contain; flex: 0 0 54px; }

/* ============================================================= footer */

.global-footer { background: #fff; margin-top: 12px; border-top: 3px solid var(--orange); }
.footer-info-group {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 24px; padding: 28px 0;
}
.footer-info-group .box-title {
  font-size: 15px; font-weight: 900; text-transform: uppercase; margin-bottom: 12px;
}
.footer-info-group a, .footer-info-group p { display: block; font-size: 13px; padding: 3px 0; margin: 0; font-weight: 300; }
.footer-info-group a:hover { color: var(--orange-dark); }
.footer-bottom {
  border-top: 1px solid var(--line); padding: 14px 0; font-size: 12px;
  color: var(--muted); text-align: center;
}

/* back-to-top */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--orange); color: #fff; font-size: 18px; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  box-shadow: var(--shadow-hover);
}
.to-top.show { opacity: 1; pointer-events: auto; }

/* ======================================================== breakpoints
   The source site shipped a separate mobile stylesheet chosen by UA
   sniffing. One fluid sheet replaces both.
   ==================================================================== */

@media (max-width: 1200px) {
  .p-container { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .product-info-group { grid-template-columns: 340px minmax(0,1fr); }
  .product-info-group .col-right { grid-column: 1 / -1; }
  .home-banner-group { grid-template-columns: minmax(0,1fr) 280px; }
}

@media (max-width: 992px) {
  .p-container, .p-container.cols-4 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .product-col-group { grid-template-columns: 1fr; }
  .product-col-group .col-left { order: 2; }
  .pro-detail-group, .article-layout { grid-template-columns: 1fr; }
  .home-banner-group { grid-template-columns: 1fr; }
  .home-banner-right { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer-info-group { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .header-right-group { display: none; }
  .article-card { grid-template-columns: 160px minmax(0,1fr); }
  /* Below this width the flyout has nowhere to open into, so the panel is a
     plain list of the 9 top-level categories and the hero is no longer inset.
     The deeper levels stay reachable from each category page's own facets. */
  .cat-item > .sub-menu { display: none !important; }
  /* and no chevron promising a flyout that cannot open at this width */
  .cat-item > .cat-1 .caret { display: none; }
  body.is-home .home-banner-group { margin-left: 0; }
  body.is-home .nav-cat .cat-panel { display: none; }
  body.is-home .nav-cat.open .cat-panel { display: block; }
}

@media (max-width: 768px) {
  .header-top { display: none; }
  .header-middle .container { flex-wrap: nowrap; gap: 8px; }
  .header-logo { width: 128px; }
  .global-nav .container { flex-wrap: wrap; }
  .nav-cat { flex: 1 1 100%; }
  .nav-cat .cat-panel { width: 100%; }
  .nav-utils { flex: 1 1 100%; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; }
  .nav-utils a { font-size: 13px; }
  .product-info-group { grid-template-columns: 1fr; padding: 12px; }
  .pro-name { font-size: 18px; }
  .pro-info-price-group .price { font-size: 24px; }
  .home-banner-row.cols-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .home-box-group .cat-title { font-size: 17px; padding: 8px 40px 8px 12px; }
  .article-card { grid-template-columns: 1fr; }
  .article-card .img img { height: 180px; }
}

@media (max-width: 560px) {
  .p-container, .p-container.cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .p-item { padding: 9px; }
  .p-item .p-name { font-size: 13px; height: 40px; line-height: 20px; }
  .p-price { font-size: 16px; }
  .footer-info-group { grid-template-columns: 1fr; gap: 18px; }
  .home-banner-right, .home-banner-row.cols-3, .home-banner-row.cols-2 { grid-template-columns: 1fr; }
  .pd-btn-item { flex-basis: 100%; }
  .page-heading h1 { font-size: 18px; }
}

@media print {
  .global-nav, .header-top, .to-top, .pro-btn-group, .global-footer { display: none; }
  body { background: #fff; }
}


/* ============================================ /pc-landing (rebuilt page)
   Replaces a pasted-in document that pulled Tailwind, Google Fonts and
   FontAwesome from three CDNs and hotlinked its hero photo from Unsplash.
   Everything below uses the variables the rest of the site already defines,
   so the page inherits the theme instead of carrying its own. */
.pcl-hero {
  /* A gradient, not a stock photo from someone else's server. It also means
     the hero costs 0 bytes and cannot break when that URL changes. */
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 45%, var(--orange-dark, #c76e00) 140%);
  color: #fff; border-radius: var(--radius); margin: 12px 0 18px;
  padding: 40px 24px;
}
.pcl-hero-inner { max-width: 760px; }
.pcl-hero h1 { margin: 0 0 10px; font-size: 30px; font-weight: 900; line-height: 1.2; }
.pcl-hero p { margin: 0 0 8px; color: #dbe3ec; font-size: 15px; }
.pcl-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: 18px; }
.pcl-hero-cta .pd-btn-item { max-width: 260px; }
.pcl-phone {
  color: #fff; text-decoration: none; font-weight: 700; font-size: 17px;
  padding: 8px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
}
.pcl-phone:hover { border-color: #fff; }
.pcl-phone small { display: block; font-weight: 400; font-size: 11px; color: #c7d2de; }

.pcl-section { margin-bottom: 22px; scroll-margin-top: 80px; }
.pcl-section .page-heading { margin-bottom: 12px; }
.pcl-section .page-heading h2 { margin: 0; font-size: 20px; font-weight: 900; }
.pcl-section .page-heading .muted { margin: 4px 0 0; font-size: 13px; }

.pcl-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.pcl-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
}
.pcl-card:hover { border-color: var(--orange); }
.pcl-card-img { background: #f7f8fa; padding: 12px; text-align: center; }
.pcl-card-img img { max-width: 100%; height: 170px; object-fit: contain; }
.pcl-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.pcl-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.pcl-summary { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
/* The spec list was inside a JS modal on the old page — invisible to search
   engines and to anyone with JS off. It is plain markup now. */
.pcl-specs { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.pcl-specs li { padding: 2px 0; display: flex; gap: 7px; align-items: flex-start; }
.pcl-specs .fa { color: var(--green, #2f8a4c); margin-top: 3px; font-size: 12px; }
.pcl-price {
  margin: auto 0 10px; font-size: 22px; font-weight: 900; color: var(--red, #d0021b);
}
.pcl-actions { margin: 0; }
.pcl-actions .pd-btn-item { max-width: none; }
.pcl-note { margin-bottom: 18px; }
.pcl-note p { margin: 0 0 6px; }

@media (max-width: 640px) {
  .pcl-hero { padding: 26px 16px; }
  .pcl-hero h1 { font-size: 23px; }
  .pcl-grid { grid-template-columns: 1fr; }
}