/* ==========================================================================
   hitec mobiles — design tokens, fonts & keyframes
   Loaded on every page via Magento_Theme/layout/default_head_blocks.xml.
   This file guarantees the exact look from the design package independent of
   the Tailwind build, so the storefront renders pixel-accurate immediately.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Brand / CTA */
  --hm-primary: #1A6CF5;
  --hm-primary-hover: #1559D6;
  /* Text / dark */
  --hm-navy: #0E1A33;
  --hm-ink: #16294F;
  --hm-muted: #5A6781;
  --hm-muted-2: #8A95AC;
  /* Status */
  --hm-deal: #FF5630;
  --hm-success: #16A34A;
  --hm-amber: #F59E0B;
  --hm-oos: #EF4444;
  --hm-ai: #7C3AED;
  --hm-mint: #3DDC97;
  /* Surfaces */
  --hm-canvas: #EEF1F6;
  --hm-surface: #F5F7FB;
  --hm-surface-2: #F8FAFD;
  --hm-border: #E5E9F2;
  --hm-border-soft: #EEF1F6;
  /* Fonts */
  --hm-font-display: 'Plus Jakarta Sans', sans-serif;
  --hm-font-body: 'Manrope', sans-serif;
  --hm-font-mono: 'Space Mono', monospace;
}

/* hitec pages use Manrope as the base UI font */
.hm-root { font-family: var(--hm-font-body); color: var(--hm-navy); }
.hm-display { font-family: var(--hm-font-display); }
.hm-mono { font-family: var(--hm-font-mono); }

/* ---- Keyframes (ported from the design) ---- */
@keyframes hm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hm-pulse   { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes hm-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes hm-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes hm-spin    { to { transform: rotate(360deg); } }

.hm-anim-float   { animation: hm-float 5s ease-in-out infinite; }
.hm-anim-marquee { animation: hm-marquee 26s linear infinite; }
.hm-anim-pulse   { animation: hm-pulse 1.1s infinite; }

/* Marquee fade mask */
.hm-marquee-mask {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Hover lift used by product cards & category tiles */
.hm-lift { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.hm-lift:hover { transform: translateY(-5px); box-shadow: 0 18px 40px -18px rgba(14,26,51,.28); border-color: var(--hm-primary); }

.hm-tile:hover { border-color: var(--hm-primary); box-shadow: 0 14px 30px -16px rgba(26,108,245,.4); transform: translateY(-3px); }

/* Product-card "Add to cart" hover (navy -> blue) */
.hm-atc { transition: background .15s ease; }
.hm-atc:hover { background: var(--hm-primary) !important; }

/* Wishlist heart hover on card image */
.hm-heart:hover { background: var(--hm-deal) !important; border-color: var(--hm-deal) !important; }
.hm-heart:hover svg { stroke: #fff !important; }

/* CTA buttons */
.hm-btn-primary { background: var(--hm-primary); transition: background .15s ease; }
.hm-btn-primary:hover { background: var(--hm-primary-hover); }

/* Line clamp for product titles */
.hm-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Hide scrollbars where needed */
.hm-no-scrollbar::-webkit-scrollbar { display: none; }
.hm-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Sticky header shadow once scrolled */
.hm-sticky { box-shadow: 0 10px 30px -18px rgba(14,26,51,.35); }

/* Mobile drawer slide-in */
.hm-drawer-enter { transition: transform .28s ease, opacity .28s ease; }
.hm-drawer-start { transform: translateX(-100%); opacity: .4; }
.hm-drawer-end   { transform: translateX(0); opacity: 1; }

/* Mobile: leave room for the fixed bottom nav */
@media (max-width: 1023px) {
  .hm-mobile-pad { padding-bottom: 86px; }
}

/* ---- Home layout helpers (responsive, build-independent) ---- */
/* Full-width to align with the header / nav (also full-width with 28px gutters),
   matching the listing, PDP and cart pages. */
.hm-container { max-width: none; margin-left: 0; margin-right: 0; }
.hm-page { padding-left: 28px; padding-right: 28px; }
.cms-index-index .page-main { max-width: none; margin: 0; padding: 0; }
.cms-index-index .columns, .cms-index-index .column.main { display: block; width: 100%; }
/* Force the whole home content chain full width (Hyvä may wrap it in a Tailwind
   .container that caps the width like the category page does). */
.cms-index-index #maincontent,
.cms-index-index .columns,
.cms-index-index .column.main,
.cms-index-index .container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;   /* the only home gutter is .hm-page's 28px, so it
                                   lines up exactly with the header (28px) */
  padding-right: 0 !important;
}

.hm-hero-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; }
.hm-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.hm-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* Grid items must be allowed to shrink below their content width, or a wide
   card (e.g. Frequently Bought Together) overflows the row and widens the page. */
.hm-grid-6 > *, .hm-grid-4 > * { min-width: 0; }
.hm-grid-cat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-grid-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hm-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 28px; }

@media (max-width: 1100px) {
  .hm-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .hm-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 1023px) {
  .hm-page { padding-left: 16px; padding-right: 16px; }
  .hm-hero-grid { grid-template-columns: 1fr; }
  .hm-grid-4 { grid-template-columns: 1fr 1fr; gap: 11px; }
  .hm-grid-6 { grid-template-columns: 1fr 1fr; gap: 11px; }
  .hm-grid-trust { grid-template-columns: 1fr 1fr; }
  .hm-grid-2 { grid-template-columns: 1fr; }
  .hm-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .hm-footer-grid { grid-template-columns: 1fr; }
}

.hm-news { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
@media (max-width: 1023px) {
  .hm-news { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hm-news-form { width: 100% !important; }
}

/* Responsive display utilities (mirror Tailwind) so desktop/mobile switching
   works regardless of the Tailwind build state. */
.hidden { display: none; }
@media (min-width: 1024px) {
  .lg\:block  { display: block; }
  .lg\:grid   { display: grid; }
  .lg\:flex   { display: flex; }
  .lg\:hidden { display: none !important; }
}

/* Category section: dedicated desktop/mobile toggles (no inline-style clash) */
.hm-cat-desktop { display: none; }
.hm-cat-mobile  { display: flex; gap: 9px; overflow-x: auto; }
@media (min-width: 1024px) {
  .hm-cat-desktop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .hm-cat-mobile  { display: none !important; }
}

/* Hero carousel fade */
.hm-fade { transition: opacity .5s ease; }
.hm-fade-start { opacity: 0; }
.hm-fade-end { opacity: 1; }

/* Display set via classes (NOT inline) so Alpine x-show toggling display:none/''
   doesn't wipe a flex/grid layout when the element is revealed. */
.hm-hero-slide { display: flex; align-items: center; }
.hm-mega-grid  { display: grid; grid-template-columns: 240px 1fr; }
.hm-hero-price { display: flex; align-items: center; gap: 16px; }
.hm-opt-row   { display: flex; gap: 10px; flex-wrap: wrap; }
.hm-opt-col   { display: flex; flex-direction: column; gap: 10px; }
.hm-opt-field { display: flex; align-items: center; gap: 8px; }

/* Quick-view "Choose your options" modal: desktop dialog, mobile bottom sheet */
.hm-qv-wrap { display: flex; align-items: center; justify-content: center; padding: 16px; }
.hm-qv-panel { display: flex; flex-direction: column; width: 600px; max-width: 100%; max-height: 88vh; border-radius: 22px; }
.hm-qv-handle { display: none; }
@media (max-width: 767px) {
  .hm-qv-wrap { align-items: flex-end; padding: 0; }
  .hm-qv-panel { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 26px 26px 0 0; }
  .hm-qv-handle { display: flex; justify-content: center; padding: 10px 0 2px; }
  .hm-qv-fulldetails { display: none !important; }
}

/* ==========================================================================
   Listing pages (category / search / offers / flash) — Frame 10
   Build-independent: defines the 250px filters + 1fr grid layout, price slider
   thumbs and listing chrome so it renders correctly without the Tailwind build.
   ========================================================================== */

/* Full-width with 28px gutters so the listing aligns exactly with the header
   nav (logo / "All Categories" … "Bulk / Corporate"), which is also full-width. */
.catalog-category-view .page-main,
.catalogsearch-result-index .page-main {
  display: block;        /* Hyvä makes page-main a flex column → children shrink
                            to content, leaving a right gap. Force block flow. */
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 28px;
  padding-right: 28px;
}

/* Two-column listing: 250px filters + fluid grid, 24px gap (design Frame 10). */
.catalog-category-view .columns,
.catalogsearch-result-index .columns,
.page-with-filter .columns {
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start;
  width: 100% !important;   /* fill page-main regardless of parent flex sizing */
  max-width: none !important;
  padding-left: 0 !important;  /* page-main already provides the 28px gutter */
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Listing main column: no extra padding on top of page-main's 28px gutter.
   (Do NOT touch #maincontent/.page-main here — that element carries the 28px.) */
.catalog-category-view .column.main,
.catalogsearch-result-index .column.main {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Custom full pages (trade-in, used phones listing + used PDP, brands, PTA tax) — full width
   with the same 28px header-aligned gutter as the category/listing pages. White background,
   native breadcrumb bar; the templates carry no horizontal padding of their own. */
.tradein-index-index .page-main,
.usedphone-index-index .page-main,
.usedphone-product-view .page-main,
.vesbrand-index-index .page-main,
.usol_ptatax-index-index .page-main {
  display: block; width: 100%; max-width: none; margin: 0;
  padding-left: 28px; padding-right: 28px;
}
.tradein-index-index .columns, .tradein-index-index .column.main,
.usedphone-index-index .columns, .usedphone-index-index .column.main,
.usedphone-product-view .columns, .usedphone-product-view .column.main,
.vesbrand-index-index .columns, .vesbrand-index-index .column.main,
.usol_ptatax-index-index .columns, .usol_ptatax-index-index .column.main {
  display: block; width: 100% !important; max-width: none !important;
  margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}
/* Home Flash Deals horizontal slider scrollbar. */
.hm-flash-slider { scrollbar-width: thin; scrollbar-color: #C9D2E0 transparent; }
.hm-flash-slider::-webkit-scrollbar { height: 6px; }
.hm-flash-slider::-webkit-scrollbar-thumb { background: #C9D2E0; border-radius: 6px; }
.hm-flash-slider::-webkit-scrollbar-track { background: transparent; }

/* Flash Deals page carries its own gutters (.fd-wrap), so strip all container padding. */
.flashdeals-index-index .page-main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.flashdeals-index-index .columns, .flashdeals-index-index .column.main {
  display: block; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}

/* Store Locator + Contact/Help + Track Order full pages — templates carry their own
   28px gutter, so strip all container padding/width caps (incl. the Tailwind .container). */
.storelocator-index-index .page-main,
.contacthelp-index-index .page-main,
.sales-guest-form .page-main { display: block; width: 100%; max-width: none; margin: 0; padding: 0; }
.storelocator-index-index #maincontent,
.storelocator-index-index .columns,
.storelocator-index-index .column.main,
.storelocator-index-index .container,
.contacthelp-index-index #maincontent,
.contacthelp-index-index .columns,
.contacthelp-index-index .column.main,
.contacthelp-index-index .container,
.sales-guest-form #maincontent,
.sales-guest-form .columns,
.sales-guest-form .column.main,
.sales-guest-form .container {
  display: block; width: 100% !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
@media (max-width: 1023px) {
  .tradein-index-index .page-main,
  .usedphone-index-index .page-main,
  .usedphone-product-view .page-main,
  .vesbrand-index-index .page-main,
  .usol_ptatax-index-index .page-main { padding-left: 16px; padding-right: 16px; }
}
.catalog-category-view .columns > .column.main,
.catalogsearch-result-index .columns > .column.main,
.page-with-filter .columns > .column.main {
  min-width: 0;
}
.catalog-category-view .sidebar-main,
.catalogsearch-result-index .sidebar-main,
.page-with-filter .sidebar-main { width: 100%; }
/* Hyvä wraps category content in <div class="category-view container"> — the
   Tailwind .container class caps the width, which is why the title + grid stop
   short while the full-bleed hero spans edge to edge. Force it full width. */
.catalog-category-view #category-view-container,
.catalog-category-view .category-view,
.catalog-category-view .columns .container,
.catalogsearch-result-index .container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The compare / additional sidebar isn't part of the design listing. */
.catalog-category-view .sidebar-additional,
.catalogsearch-result-index .sidebar-additional { display: none; }

/* Listing grid: desktop 4-up (Compact = 5-up), tablet 3-up, mobile 2-up.
   NOTE: this is mirrored inline in product/list.phtml so it stays correct even
   when pub/static serves a stale hitec.css. Overrides shared .hm-grid-4. */
#hm-listing-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
#hm-listing-grid.hm-compact { grid-template-columns: repeat(5, 1fr) !important; }

@media (max-width: 1023px) {
  .catalog-category-view .columns,
  .catalogsearch-result-index .columns,
  .page-with-filter .columns { grid-template-columns: 1fr !important; }
  .catalog-category-view .page-main,
  .catalogsearch-result-index .page-main { padding-left: 16px; padding-right: 16px; }
  #hm-listing-grid, #hm-listing-grid.hm-compact { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
@media (max-width: 480px) {
  #hm-listing-grid, #hm-listing-grid.hm-compact { grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* Category page title (no Tailwind build → style explicitly). */
.catalog-category-view .page-title-wrapper .page-title,
.catalogsearch-result-index .page-title-wrapper .page-title {
  font-family: var(--hm-font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--hm-navy);
  margin: 4px 0 18px;
}

/* Dual-handle price range slider (sidebar). Both inputs overlay one 18px-tall
   track; only the thumbs are interactive so each handle can be dragged. */
.hm-price-range {
  -webkit-appearance: none; appearance: none;
  height: 18px; background: transparent; pointer-events: none; margin: 0;
}
.hm-price-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 3px solid var(--hm-primary); cursor: pointer; box-shadow: 0 1px 3px rgba(14,26,51,.25);
}
.hm-price-range::-moz-range-thumb {
  pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  border: 3px solid var(--hm-primary); cursor: pointer; box-shadow: 0 1px 3px rgba(14,26,51,.25);
}
.hm-price-range::-webkit-slider-runnable-track { background: transparent; border: none; height: 18px; }
.hm-price-range::-moz-range-track { background: transparent; border: none; height: 18px; }
.hm-price-range:focus { outline: none; }

/* ---- Deals hero + category tabs (offers / flash) ---- */
.hm-deals-hero {
  margin: 0 0 22px;
  border-radius: 20px;
  background: radial-gradient(130% 130% at 90% 0%, #1A3A6E, #0E1A33 60%);
  padding: 30px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  color: #fff;
  gap: 24px;
}
.hm-deals-hero::before {
  content: ""; position: absolute; bottom: -50px; left: 25%; width: 300px; height: 300px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,86,48,.22), transparent 70%);
}
.hm-deals-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
@media (max-width: 1023px) {
  .hm-deals-hero { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* ==========================================================================
   Product Detail Page (Frame 06 desktop / Frame 16 mobile)
   ========================================================================== */
.catalog-product-view .page-main { max-width: none; margin: 0; padding-left: 28px; padding-right: 28px; }
.catalog-product-view .columns,
.catalog-product-view .column.main { display: block; width: 100%; }
.hm-pdp { font-family: var(--hm-font-body); color: var(--hm-navy); max-width: 1480px; margin: 0 auto; padding-bottom: 44px; }
/* The theme renders its own product title (.hm-pdp-title); Magento's default
   full-width <h1 class="page-title"> is redundant and overflows the page.
   Keep it screen-reader-only (SEO) but remove it from the visual layout. */
.catalog-product-view h1.page-title,
.catalog-product-view .page-title-wrapper { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Store Locator + Contact/Help carry their own hero heading; hide the redundant
   Magento page title (screen-reader-only) — robust even if the layout cache lags. */
.storelocator-index-index h1.page-title,
.storelocator-index-index .page-title-wrapper,
.contacthelp-index-index h1.page-title,
.contacthelp-index-index .page-title-wrapper,
.sales-guest-form h1.page-title,
.sales-guest-form .page-title-wrapper { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Catch-all: no stray full-width element may push a horizontal scrollbar on the
   product page. overflow-x:clip (not hidden) keeps fixed/sticky bars working. */
.catalog-product-view, .catalog-product-view .page-wrapper { overflow-x: clip; }

.hm-pdp-crumb { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #8A95AC; font-weight: 600; padding: 14px 0; border-bottom: 1px solid #F1F4F9; flex-wrap: wrap; }
.hm-pdp-crumb a { color: #8A95AC; text-decoration: none; }
.hm-pdp-crumb .cur { color: #0E1A33; font-weight: 700; }

.hm-pdp-grid { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 36px; padding: 26px 0; align-items: start; }
/* Let both PDP columns shrink below their content min-width so the page never
   overflows horizontally on narrower viewports (grid min-width:auto gotcha). */
.hm-pdp-gallery, .hm-pdp-info { min-width: 0; }
.hm-pdp-stage { min-width: 0; }
.hm-pdp-stage-img { max-width: 100%; height: auto; }

/* gallery */
.hm-pdp-gallery { display: flex; gap: 14px; min-width: 0; }
.hm-pdp-thumbs { display: flex; flex-direction: column; gap: 11px; }
.hm-pdp-thumb { width: 74px; height: 74px; border-radius: 13px; border: 1px solid #E5E9F2; background: #F5F7FB; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; padding: 6px; }
.hm-pdp-thumb.is-active { border: 2px solid var(--hm-primary); }
.hm-pdp-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hm-pdp-phone-mini { width: 26px; height: 50px; border-radius: 8px; background: linear-gradient(165deg,#2C3E5E,#0E1A33); }
.hm-pdp-stage { flex: 1; position: relative; border-radius: 20px; background: linear-gradient(150deg,#F5F7FB,#E9EEF7); border: 1px solid #E5E9F2; display: flex; align-items: center; justify-content: center; height: 480px; overflow: hidden; }
.hm-pdp-stage-pat { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg,rgba(26,108,245,.04) 0 2px,transparent 2px 12px); }
.hm-pdp-stage-img { position: relative; max-height: 430px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 40px 70px rgba(14,26,51,.45)); }
.hm-pdp-phone { width: 218px; height: 430px; border-radius: 42px; background: linear-gradient(165deg,#2C3E5E,#0E1A33); box-shadow: 0 50px 80px -30px rgba(14,26,51,.6); position: relative; }
.hm-pdp-phone::before { content: ""; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 60px; height: 18px; background: #000; border-radius: 13px; }
.hm-pdp-badges { position: absolute; top: 16px; left: 16px; display: flex; flex-direction: column; gap: 8px; }
.hm-pdp-badge-off { background: var(--hm-deal); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 11px; border-radius: 9px; }
.hm-pdp-badge-warr { background: #0E1A33; color: #fff; font-weight: 700; font-size: 11px; padding: 5px 9px; border-radius: 7px; }
.hm-pdp-pills { position: absolute; bottom: 16px; left: 16px; display: flex; gap: 9px; }
.hm-pdp-pill { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E5E9F2; padding: 8px 13px; border-radius: 30px; font-size: 12.5px; font-weight: 800; color: #0E1A33; }
.hm-pdp-pill-ar { background: #EEF4FF; color: var(--hm-primary); border-color: #EEF4FF; }
.hm-pdp-zoom { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 1px solid #E5E9F2; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* info */
.hm-pdp-top { display: flex; align-items: center; justify-content: space-between; }
.hm-pdp-brand { font-family: var(--hm-font-mono); font-size: 12px; letter-spacing: 1px; font-weight: 700; color: var(--hm-primary); }
.hm-pdp-actions { display: flex; gap: 14px; }
.hm-pdp-actions span { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #5A6781; cursor: pointer; }
.hm-pdp-title { font-family: var(--hm-font-display); font-weight: 800; font-size: 30px; letter-spacing: -.8px; line-height: 1.15; margin: 8px 0 12px; color: #0E1A33; }
.hm-pdp-rating { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.hm-pdp-rating .stars { display: flex; align-items: center; gap: 2px; }
.hm-pdp-rating .stars b { font-weight: 800; font-size: 14px; margin-left: 5px; color: #0E1A33; }
.hm-pdp-rating .rev { color: var(--hm-primary); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.hm-pdp-stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; padding: 5px 11px; border-radius: 20px; }
.hm-pdp-stock.low { background: #FEF3E2; color: #D97706; }
.hm-pdp-stock.low .dot { width: 7px; height: 7px; border-radius: 50%; background: #F59E0B; animation: hm-pulse 1.1s infinite; }
.hm-pdp-stock.oos { background: #FEECEC; color: #EF4444; }
.hm-pdp-pricebox { background: #F8FAFD; border: 1px solid #EEF1F6; border-radius: 16px; padding: 18px 20px; margin-bottom: 22px; }
.hm-pdp-pricebox .row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hm-pdp-pricebox .now { font-family: var(--hm-font-display); font-weight: 800; font-size: 34px; color: #0E1A33; }
.hm-pdp-pricebox .was { font-size: 17px; color: #A6AFC2; text-decoration: line-through; font-weight: 600; }
.hm-pdp-pricebox .save { background: var(--hm-deal); color: #fff; font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 8px; }
.hm-pdp-pricebox .inst { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #5A6781; font-weight: 600; }
.hm-pdp-pricebox .inst b { color: var(--hm-primary); }
.hm-pdp-opt { margin-bottom: 18px; }
.hm-pdp-opt-label { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13.5px; color: #0E1A33; margin-bottom: 10px; }
.hm-pdp-opt-label .sel { color: #5A6781; font-weight: 600; }
.hm-pdp-swatches { display: flex; gap: 11px; flex-wrap: wrap; }
.hm-pdp-swatch { width: 42px; height: 42px; border-radius: 50%; border: 2px solid #E5E9F2; cursor: pointer; padding: 0; }
.hm-pdp-swatch.is-active { border: 3px solid var(--hm-primary); box-shadow: 0 0 0 2px #fff inset; }
.hm-pdp-tiles { display: flex; gap: 11px; flex-wrap: wrap; }
.hm-pdp-tile { border: 2px solid #E5E9F2; border-radius: 12px; padding: 10px 18px; text-align: center; cursor: pointer; background: #fff; }
.hm-pdp-tile .t { font-weight: 800; font-size: 14px; color: #5A6781; }
.hm-pdp-tile.is-active { border-color: var(--hm-primary); background: #EEF4FF; }
.hm-pdp-tile.is-active .t { color: var(--hm-primary); }
.hm-pdp-buy { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; }
.hm-pdp-qty { display: flex; align-items: center; border: 1.5px solid #E5E9F2; border-radius: 12px; overflow: hidden; height: 54px; flex-shrink: 0; }
.hm-pdp-qty button { border: none; background: #F5F7FB; width: 46px; height: 100%; font-size: 20px; color: #0E1A33; cursor: pointer; }
.hm-pdp-qty span { width: 50px; text-align: center; font-weight: 800; font-size: 16px; }
.hm-pdp-atc { flex: 1; border: none; background: #0E1A33; color: #fff; font-family: var(--hm-font-display); font-weight: 800; font-size: 15px; height: 54px; border-radius: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; }
.hm-pdp-atc:disabled, .hm-pdp-buynow:disabled { opacity: .55; cursor: not-allowed; }
.hm-pdp-buynow { flex: 1; border: none; background: var(--hm-primary); color: #fff; font-family: var(--hm-font-display); font-weight: 800; font-size: 15px; height: 54px; border-radius: 13px; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(26,108,245,.7); }
.hm-pdp-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 18px; }
.hm-pdp-trust > div { display: flex; align-items: center; gap: 11px; border: 1px solid #EEF1F6; border-radius: 13px; padding: 13px 15px; }
.hm-pdp-trust .t { font-weight: 800; font-size: 13px; color: #0E1A33; }
.hm-pdp-trust .s { font-size: 11.5px; color: #8A95AC; font-weight: 600; }

/* tabs */
.hm-pdp-tabs { padding: 8px 0 0; }
.hm-pdp-tablist { display: flex; gap: 6px; border-bottom: 1.5px solid #EEF1F6; flex-wrap: wrap; }
.hm-pdp-tablist span { padding: 14px 20px; font-weight: 700; font-size: 14px; color: #5A6781; cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1.5px; }
.hm-pdp-tablist span.is-active { color: var(--hm-primary); font-weight: 800; border-bottom-color: var(--hm-primary); }
.hm-pdp-tabpane { padding: 22px 0 8px; }
.hm-pdp-desc-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 34px; }
.hm-pdp-desc-grid > * { min-width: 0; }
.hm-pdp-desc-body { font-size: 14.5px; line-height: 1.7; color: #5A6781; }
.hm-pdp-keyspecs, .hm-pdp-spectable { background: #F8FAFD; border: 1px solid #EEF1F6; border-radius: 16px; padding: 20px; }
.hm-pdp-keyspecs .ttl { font-weight: 800; font-size: 14px; color: #0E1A33; margin-bottom: 14px; }
.hm-pdp-keyspecs .row, .hm-pdp-spectable .row { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; font-size: 13.5px; padding: 7px 0; }
.hm-pdp-keyspecs .k, .hm-pdp-spectable .k { flex: 0 0 32%; color: #8A95AC; font-weight: 600; }
.hm-pdp-keyspecs .v, .hm-pdp-spectable .v { flex: 1; min-width: 0; text-align: right; font-weight: 700; color: #0E1A33; overflow-wrap: anywhere; word-break: break-word; }
/* Specifications tab: single column per section; long values wrap cleanly */
.hm-pdp-spectable { display: block; }
.hm-pdp-spectable .row + .row { border-top: 1px solid #EEF1F6; }
/* Top-nav links strip: keep one line, never shrink/stack the Compare icon+text;
   overflow scrolls horizontally (scrollbar hidden) so the page never widens. */
.hm-nav-scroll { scrollbar-width: none; }
.hm-nav-scroll::-webkit-scrollbar { display: none; }
.hm-nav-scroll > a { flex-shrink: 0; white-space: nowrap; align-items: center; }
.hm-pdp-empty { font-size: 14px; color: #8A95AC; font-weight: 600; }
/* grouped specs (Specifications tab) */
.hm-pdp-specgroups { display: flex; flex-direction: column; gap: 16px; }
.hm-pdp-specgroup .hd { font-weight: 800; font-size: 14px; color: #0E1A33; margin: 0 0 12px; padding: 0 0 9px; border-bottom: 1px solid #EEF1F6; }
/* key highlights strip under Add to Cart (Display / RAM / Battery / Camera) */
.hm-pdp-keyhl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 4px; }
.hm-pdp-keyhl-item { display: flex; align-items: center; gap: 11px; min-width: 0; background: #F8FAFD; border: 1px solid #EEF1F6; border-radius: 14px; padding: 12px 14px; }
.hm-pdp-keyhl-item .ic { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #EEF1F6; border-radius: 10px; }
.hm-pdp-keyhl-item .tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hm-pdp-keyhl-item .lb { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A95AC; }
.hm-pdp-keyhl-item .vl { font-size: 14px; font-weight: 800; color: #0E1A33; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) { .hm-pdp-keyhl { grid-template-columns: repeat(2, 1fr); } }
.hm-pdp-highlights { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.hm-pdp-hl { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #0E1A33; font-weight: 600; }
.hm-pdp-faqs { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.hm-pdp-faq { border: 1px solid #EEF1F6; border-radius: 13px; overflow: hidden; }
.hm-pdp-faq .q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #F8FAFD; border: none; padding: 15px 18px; font-family: var(--hm-font-display); font-weight: 800; font-size: 14px; color: #0E1A33; cursor: pointer; text-align: left; }
.hm-pdp-faq .q svg { transition: transform .15s ease; flex-shrink: 0; }
.hm-pdp-faq .a { padding: 14px 18px; font-size: 13.5px; line-height: 1.65; color: #5A6781; font-weight: 500; }
.hm-pdp-reviews { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.hm-pdp-review { border: 1px solid #EEF1F6; border-radius: 14px; padding: 16px 18px; }
.hm-pdp-review .rh { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.hm-pdp-review .rs { display: flex; gap: 1px; }
.hm-pdp-review .rn { font-weight: 800; font-size: 13px; color: #0E1A33; }
.hm-pdp-review .rd { font-size: 12px; color: #A6AFC2; font-weight: 600; margin-left: auto; }
.hm-pdp-review .rt { font-family: var(--hm-font-display); font-weight: 800; font-size: 14px; color: #0E1A33; margin-bottom: 4px; }
.hm-pdp-review .rb { font-size: 13.5px; line-height: 1.6; color: #5A6781; font-weight: 500; }

/* frequently bought together */
.hm-pdp-fbt { padding: 24px 0 8px; }
.hm-pdp-fbt .hd { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.hm-pdp-fbt .ai { display: inline-flex; align-items: center; gap: 6px; background: #F3EEFF; color: #7C3AED; font-weight: 800; font-size: 12px; padding: 6px 11px; border-radius: 30px; }
.hm-pdp-fbt h2 { font-family: var(--hm-font-display); font-weight: 800; font-size: 22px; margin: 0; letter-spacing: -.5px; }

/* mobile sticky CTA — hidden on desktop */
.hm-pdp-sticky { display: none; }

@media (max-width: 1023px) {
    .hm-pdp-grid { grid-template-columns: 1fr; gap: 18px; }
    .hm-pdp-gallery { flex-direction: column-reverse; }
    .hm-pdp-thumbs { flex-direction: row; overflow-x: auto; }
    .hm-pdp-stage { height: 320px; }
    .hm-pdp-title { font-size: 22px; }
    .hm-pdp-pricebox .now { font-size: 27px; }
    .hm-pdp-desc-grid { grid-template-columns: 1fr; gap: 18px; }
    .hm-pdp-spectable { grid-template-columns: 1fr; }
    .hm-pdp-buy { display: none; }                 /* replaced by sticky bar */
    .hm-pdp { padding-bottom: 96px; }
    .hm-pdp-sticky { display: flex; align-items: center; gap: 11px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid #EEF1F6; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -16px rgba(14,26,51,.25); }
    .hm-pdp-sticky .hm-pdp-qty { height: 48px; }
    .hm-pdp-sticky .hm-pdp-qty button { width: 36px; font-size: 18px; }
    .hm-pdp-sticky .hm-pdp-qty span { width: 34px; }
    .hm-pdp-sticky .hm-pdp-atc, .hm-pdp-sticky .hm-pdp-buynow { height: 48px; font-size: 14px; border-radius: 12px; }
}

/* ==========================================================================
   Cart page (Frame 07 desktop / Frame 16 mobile)
   ========================================================================== */
.checkout-cart-index .page-main { max-width: none; margin: 0; padding: 26px 28px 40px; }
.checkout-cart-index .columns, .checkout-cart-index .column.main { display: block; width: 100%; }
.hm-cart { font-family: var(--hm-font-body); color: var(--hm-navy); }
.hm-cart-cross { margin-top: 22px; }
.hm-cart-cross .ttl { font-family: var(--hm-font-display); font-weight: 800; font-size: 16px; color: #0E1A33; margin-bottom: 12px; }
.hm-cart-cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hm-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.hm-cart-head h1 { font-family: var(--hm-font-display); font-weight: 800; font-size: 28px; margin: 0; letter-spacing: -.5px; }
.hm-cart-head h1 span { color: #8A95AC; font-weight: 700; font-size: 18px; }
.hm-cart-head .cont { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--hm-primary); font-weight: 800; text-decoration: none; }

.hm-cart-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; align-items: start; }
.hm-cart-col { min-width: 0; }
.hm-cart-items { display: flex; flex-direction: column; gap: 14px; }

.hm-cart-item { background: #fff; border: 1px solid #E5E9F2; border-radius: 16px; padding: 18px; display: flex; gap: 18px; align-items: center; }
.hm-cart-img { width: 92px; height: 92px; border-radius: 14px; background: linear-gradient(150deg,#F5F7FB,#E9EEF7); border: 1px solid #E5E9F2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.hm-cart-img img { max-width: 86%; max-height: 86%; object-fit: contain; }
.hm-cart-phone { width: 34px; height: 66px; border-radius: 9px; background: linear-gradient(165deg,#2C3E5E,#0E1A33); }
.hm-cart-info { flex: 1; min-width: 0; }
.hm-cart-info .brand { font-family: var(--hm-font-mono); font-size: 10.5px; font-weight: 700; color: #8A95AC; letter-spacing: .5px; }
.hm-cart-info .name { display: block; font-family: var(--hm-font-display); font-weight: 800; font-size: 16px; color: #0E1A33; margin: 3px 0 6px; text-decoration: none; }
.hm-cart-info .opts { display: flex; gap: 8px; flex-wrap: wrap; }
.hm-cart-info .opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hm-cart-info .chip { font-size: 11.5px; background: #F1F4F9; color: #5A6781; font-weight: 700; padding: 4px 9px; border-radius: 7px; }
.hm-cart-info .chip.stock-in { display: inline-flex; align-items: center; gap: 5px; background: #E9F7EF; color: #16A34A; }
.hm-cart-info .chip.stock-in .dot { width: 6px; height: 6px; border-radius: 50%; background: #16A34A; }
.hm-cart-info .chip.stock-out { display: inline-flex; align-items: center; gap: 5px; background: #FEECEC; color: #EF4444; }
.hm-cart-info .chip.stock-out .dot { width: 6px; height: 6px; border-radius: 50%; background: #EF4444; }
.hm-cart-qty { display: flex; align-items: center; border: 1.5px solid #E5E9F2; border-radius: 10px; overflow: hidden; height: 42px; flex-shrink: 0; margin: 0; }
.hm-cart-qty button { border: none; background: #F5F7FB; width: 38px; height: 100%; font-size: 17px; cursor: pointer; color: #0E1A33; }
.hm-cart-qty .q { width: 44px; height: 100%; text-align: center; font-weight: 800; font-size: 15px; border: none; outline: none; -moz-appearance: textfield; }
.hm-cart-qty .q::-webkit-outer-spin-button, .hm-cart-qty .q::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hm-cart-price { text-align: right; min-width: 120px; }
.hm-cart-price .now { font-family: var(--hm-font-display); font-weight: 800; font-size: 18px; color: #0E1A33; }
.hm-cart-price .was { font-size: 12px; color: #A6AFC2; text-decoration: line-through; font-weight: 600; }
.hm-cart-remove { margin: 0; }
.hm-cart-remove button { border: none; background: none; cursor: pointer; color: #C2C9D6; padding: 4px; transition: color .15s; }
.hm-cart-remove button:hover { color: var(--hm-deal); }

.hm-cart-summary { background: #fff; border: 1px solid #E5E9F2; border-radius: 18px; padding: 22px; position: sticky; top: 20px; }
.hm-cart-summary .ttl { font-family: var(--hm-font-display); font-weight: 800; font-size: 18px; color: #0E1A33; margin-bottom: 18px; }
.hm-cart-promo { display: flex; align-items: center; gap: 9px; border: 1.5px dashed #C5D3EC; border-radius: 12px; padding: 5px 5px 5px 14px; margin-bottom: 16px; }
.hm-cart-promo input[type=text] { flex: 1; border: none; outline: none; font-size: 13.5px; font-family: var(--hm-font-body); background: transparent; min-width: 0; }
.hm-cart-promo button { border: none; background: var(--hm-primary); color: #fff; font-weight: 800; font-size: 12.5px; padding: 9px 15px; border-radius: 9px; cursor: pointer; }
.hm-cart-applied { display: flex; align-items: center; gap: 7px; background: #E9F7EF; border-radius: 10px; padding: 9px 12px; margin-bottom: 16px; font-size: 12.5px; color: #16A34A; font-weight: 800; }
.hm-cart-applied .rm { border: none; background: none; color: #16A34A; cursor: pointer; font-weight: 800; }
.hm-cart-rows { display: flex; flex-direction: column; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid #EEF1F6; }
.hm-cart-rows .r { display: flex; justify-content: space-between; font-size: 14px; }
.hm-cart-rows .r span { color: #5A6781; font-weight: 600; }
.hm-cart-rows .r b { font-weight: 700; color: #0E1A33; }
.hm-cart-rows .disc { color: #16A34A; }
.hm-cart-rows .free { color: #16A34A; font-weight: 800; }
.hm-cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; }
.hm-cart-total span { font-family: var(--hm-font-display); font-weight: 800; font-size: 17px; color: #0E1A33; }
.hm-cart-total .amt { font-size: 26px; }
.hm-cart-checkout { width: 100%; border: none; background: var(--hm-primary); color: #fff; font-family: var(--hm-font-display); font-weight: 800; font-size: 15.5px; padding: 16px; border-radius: 13px; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(26,108,245,.7); display: flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; }
.hm-cart-ssl { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 12px; color: #8A95AC; font-weight: 600; }
.hm-cart-pays { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.hm-cart-pays span { height: 26px; padding: 0 9px; border-radius: 6px; background: #F1F4F9; display: flex; align-items: center; font-weight: 800; font-size: 10px; color: #5A6781; }

.hm-cart-sticky { display: none; }

@media (max-width: 1023px) {
    .checkout-cart-index .page-main { padding: 16px 16px 0; }
    .hm-cart-grid { grid-template-columns: 1fr; }
    .hm-cart-cross-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
    .hm-cart-summary { display: none; }
    .hm-cart-item { padding: 13px; gap: 13px; align-items: flex-start; flex-wrap: wrap; }
    .hm-cart-img { width: 64px; height: 64px; }
    .hm-cart-info { flex: 1 1 auto; }
    .hm-cart-info .name { font-size: 13.5px; }
    .hm-cart-price { min-width: 0; order: 3; }
    .hm-cart-qty { order: 4; height: 36px; margin-left: auto; }
    .hm-cart-remove { order: 2; }
    .hm-cart { padding-bottom: 200px; }
    .hm-cart-sticky { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid #EEF1F6; border-radius: 22px 22px 0 0; padding: 16px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -16px rgba(14,26,51,.2); }
    .hm-cart-sticky .rows .r { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 7px; }
    .hm-cart-sticky .rows .r span { color: #5A6781; font-weight: 600; }
    .hm-cart-sticky .rows .r b { font-weight: 700; color: #0E1A33; }
    .hm-cart-sticky .rows .free { color: #16A34A; }
    .hm-cart-sticky .tot { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0 13px; border-top: 1px solid #EEF1F6; margin-top: 4px; }
    .hm-cart-sticky .tot span { font-weight: 800; font-size: 15px; color: #0E1A33; }
    .hm-cart-sticky .tot .amt { font-family: var(--hm-font-display); font-size: 21px; }
}

/* ==========================================================================
   Checkout (Frame 08 desktop / Frame 16 mobile) — custom one-step
   ========================================================================== */
.checkout-index-index .page-main { max-width: none; margin: 0; padding: 0; }
.checkout-index-index #header, .checkout-index-index .page-footer, .checkout-index-index .page-header { display: none !important; }
.hm-co { font-family: var(--hm-font-body); color: var(--hm-navy); background: #F8FAFD; min-height: 70vh; }

.hm-co-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 28px; border-bottom: 1px solid #EEF1F6; background: #fff; }
.hm-co-head img { height: 32px; }
.hm-co-steps { display: flex; align-items: center; gap: 10px; }
.hm-co-steps .step { display: flex; align-items: center; gap: 10px; }
.hm-co-steps .step .b { width: 28px; height: 28px; border-radius: 50%; background: #F1F4F9; color: #8A95AC; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.hm-co-steps .step .t { font-weight: 700; font-size: 13.5px; color: #8A95AC; }
.hm-co-steps .step.done .b { background: #16A34A; color: #fff; }
.hm-co-steps .step.done .t, .hm-co-steps .step.on .t { color: #0E1A33; font-weight: 800; }
.hm-co-steps .step.on .b { background: var(--hm-primary); color: #fff; }
.hm-co-steps .bar { width: 34px; height: 2px; background: #E5E9F2; }
.hm-co-steps .bar.on { background: var(--hm-primary); }
.hm-co-secure { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #16A34A; font-weight: 800; }

.hm-co-grid { max-width: none; margin: 0; padding: 26px 28px 60px; display: grid; grid-template-columns: 1fr 400px; gap: 24px; align-items: start; }
.hm-co-forms { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hm-co-card { background: #fff; border: 1px solid #E5E9F2; border-radius: 18px; padding: 24px; }
.hm-co-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hm-co-card-head .ttl { font-family: var(--hm-font-display); font-weight: 800; font-size: 17px; color: #0E1A33; }
.hm-co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hm-co-fields .span2 { grid-column: span 2; }
.hm-co-fields label { font-size: 12.5px; font-weight: 700; color: #5A6781; display: block; margin-bottom: 7px; }
.hm-co-fields input { width: 100%; height: 48px; border: 1.5px solid #E5E9F2; border-radius: 11px; padding: 0 14px; font-size: 14px; color: #0E1A33; font-weight: 600; font-family: var(--hm-font-body); outline: none; }
.hm-co-fields input:focus { border-color: var(--hm-primary); }

.hm-co-radios { display: flex; flex-direction: column; gap: 12px; }
.hm-co-radio { display: flex; align-items: center; gap: 14px; border: 1.5px solid #E5E9F2; border-radius: 13px; padding: 15px 18px; cursor: pointer; }
.hm-co-radio.on { border: 2px solid var(--hm-primary); background: #EEF4FF; }
.hm-co-radio .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C5D3EC; background: #fff; flex-shrink: 0; }
.hm-co-radio .dot.on { border: 6px solid var(--hm-primary); }
.hm-co-radio .meta { flex: 1; }
.hm-co-radio .meta .t { display: block; font-weight: 800; font-size: 14px; color: #0E1A33; }
.hm-co-radio .meta .s { display: block; font-size: 12.5px; color: #5A6781; font-weight: 600; }
.hm-co-radio .pr { font-weight: 800; font-size: 14px; color: #0E1A33; }
.hm-co-radio .pr.free { color: #16A34A; }

.hm-co-pays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.hm-co-pay { border: 1.5px solid #E5E9F2; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; background: #fff; position: relative; }
.hm-co-pay span { font-size: 12px; font-weight: 800; color: #5A6781; text-align: center; }
.hm-co-pay.on { border: 2px solid var(--hm-primary); background: #EEF4FF; }
.hm-co-pay.on span { color: var(--hm-primary); }
.hm-co-pay.disabled { opacity: .55; cursor: not-allowed; }
.hm-co-pay .soon { position: absolute; top: 6px; right: 6px; font-size: 8.5px; background: #F1F4F9; color: #8A95AC; padding: 2px 5px; border-radius: 5px; }
.hm-co-pay-note { margin-top: 14px; font-size: 12.5px; color: #5A6781; font-weight: 600; background: #F8FAFD; border: 1px solid #EEF1F6; border-radius: 11px; padding: 12px 14px; }

.hm-co-summary { background: #fff; border: 1px solid #E5E9F2; border-radius: 18px; padding: 22px; position: sticky; top: 20px; }
.hm-co-summary .ttl { font-family: var(--hm-font-display); font-weight: 800; font-size: 17px; color: #0E1A33; margin-bottom: 16px; }
.hm-co-items { display: flex; flex-direction: column; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid #EEF1F6; }
.hm-co-item { display: flex; gap: 12px; align-items: center; }
.hm-co-item .img { width: 50px; height: 50px; border-radius: 11px; background: linear-gradient(150deg,#F5F7FB,#E9EEF7); border: 1px solid #E5E9F2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; }
.hm-co-item .img .ph { width: 18px; height: 36px; border-radius: 5px; background: linear-gradient(165deg,#2C3E5E,#0E1A33); }
.hm-co-item .img .q { position: absolute; top: -7px; right: -7px; background: #0E1A33; color: #fff; font-size: 10px; font-weight: 800; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hm-co-item .meta { flex: 1; min-width: 0; }
.hm-co-item .meta .n { font-weight: 800; font-size: 13px; color: #0E1A33; line-height: 1.3; }
.hm-co-item .meta .v { font-size: 11.5px; color: #8A95AC; font-weight: 600; }
.hm-co-item .p { font-weight: 800; font-size: 13.5px; color: #0E1A33; }
.hm-co-rows { display: flex; flex-direction: column; gap: 11px; padding: 16px 0; border-bottom: 1px solid #EEF1F6; }
.hm-co-rows .r { display: flex; justify-content: space-between; font-size: 13.5px; }
.hm-co-rows .r span { color: #5A6781; font-weight: 600; }
.hm-co-rows .r b { font-weight: 700; color: #0E1A33; }
.hm-co-rows .disc { color: #16A34A; }
.hm-co-rows .free { color: #16A34A; font-weight: 800; }
.hm-co-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; }
.hm-co-total span { font-family: var(--hm-font-display); font-weight: 800; font-size: 16px; color: #0E1A33; }
.hm-co-total .amt { font-size: 25px; }
.hm-co-place { width: 100%; border: none; background: var(--hm-primary); color: #fff; font-family: var(--hm-font-display); font-weight: 800; font-size: 15.5px; padding: 16px; border-radius: 13px; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(26,108,245,.7); display: flex; align-items: center; justify-content: center; gap: 9px; }
.hm-co-terms { font-size: 11.5px; color: #8A95AC; text-align: center; margin: 13px 0 0; line-height: 1.5; }
.hm-co-terms a { color: var(--hm-primary); font-weight: 700; text-decoration: none; }

.hm-co-sticky { display: none; }

@media (max-width: 1023px) {
    .hm-co-head { padding: 14px 16px; }
    .hm-co-steps .step .t { display: none; }
    .hm-co-grid { grid-template-columns: 1fr; padding: 16px 16px 110px; gap: 14px; }
    .hm-co-card { padding: 18px; }
    .hm-co-fields { grid-template-columns: 1fr; }
    .hm-co-fields .span2 { grid-column: span 1; }
    .hm-co-summary { position: static; }
    .hm-co-summary .hm-co-place, .hm-co-summary .hm-co-terms { display: none; }
    .hm-co-sticky { display: flex; align-items: center; gap: 12px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: #fff; border-top: 1px solid #EEF1F6; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px -16px rgba(14,26,51,.25); }
    .hm-co-sticky .tot { display: flex; flex-direction: column; }
    .hm-co-sticky .tot span:first-child { font-size: 11px; color: #5A6781; font-weight: 700; }
    .hm-co-sticky .tot .amt { font-family: var(--hm-font-display); font-weight: 800; font-size: 18px; color: #0E1A33; }
    .hm-co-sticky .hm-co-place { flex: 1; box-shadow: none; }
}

/* ==========================================================================
   Order success (Frame 09 desktop / Frame 16 mobile)
   ========================================================================== */
.baseer-checkout-success .page-main { max-width: 1480px; margin: 0 auto; padding: 0 0 44px; }
.baseer-checkout-success .columns, .baseer-checkout-success .column.main { display: block; width: 100%; }
.hm-su { font-family: var(--hm-font-body); color: var(--hm-navy); }

.hm-su-hero { position: relative; background: radial-gradient(120% 130% at 50% 0%, #EAF7F0, #F8FAFD 60%); padding: 50px 28px 36px; text-align: center; overflow: hidden; border-radius: 0 0 24px 24px; }
.hm-su-hero .c { position: absolute; width: 10px; height: 10px; }
.hm-su-hero .c1 { top: 40px; left: 18%; border-radius: 2px; background: #FF5630; transform: rotate(20deg); }
.hm-su-hero .c2 { top: 70px; left: 30%; border-radius: 50%; background: #1A6CF5; }
.hm-su-hero .c3 { top: 34px; right: 22%; border-radius: 2px; background: #F59E0B; transform: rotate(-15deg); }
.hm-su-hero .c4 { top: 90px; right: 30%; border-radius: 50%; background: #16A34A; }
.hm-su-hero .c5 { top: 120px; left: 42%; border-radius: 2px; background: #7C3AED; transform: rotate(35deg); }
.hm-su-hero .check { width: 84px; height: 84px; border-radius: 50%; background: #16A34A; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 18px 36px -14px rgba(22,163,74,.6); animation: hm-float 4s ease-in-out infinite; }
.hm-su-hero h1 { font-family: var(--hm-font-display); font-weight: 800; font-size: 34px; letter-spacing: -.8px; margin: 0 0 8px; color: #0E1A33; }
.hm-su-hero p { font-size: 15.5px; color: #5A6781; margin: 0; font-weight: 500; }
.hm-su-hero p b { color: #0E1A33; }
.hm-su-hero .ord { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E5E9F2; border-radius: 30px; padding: 9px 18px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: #0E1A33; }
.hm-su-hero .ord .num { font-family: var(--hm-font-mono); color: var(--hm-primary); }
.hm-su-hero .ord .sep { width: 1px; height: 16px; background: #E5E9F2; }

.hm-su-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; padding: 22px 28px 0; }
.hm-su-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hm-su-card { background: #fff; border: 1px solid #E5E9F2; border-radius: 18px; padding: 24px; }
.hm-su-card .ttl { font-family: var(--hm-font-display); font-weight: 800; font-size: 17px; color: #0E1A33; margin-bottom: 22px; }
.hm-su-card .ttl.sm { font-size: 15px; margin-bottom: 16px; }

.hm-su-track { display: flex; align-items: flex-start; justify-content: space-between; position: relative; }
.hm-su-track .line { position: absolute; top: 17px; left: 8%; right: 8%; height: 3px; background: #EEF1F6; }
.hm-su-track .fill { position: absolute; top: 17px; left: 8%; width: 30%; height: 3px; background: #16A34A; }
.hm-su-track .node { display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; z-index: 2; width: 25%; }
.hm-su-track .b { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #E5E9F2; color: #C2C9D6; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.hm-su-track .b.done { background: #16A34A; border-color: #16A34A; color: #fff; }
.hm-su-track .b.cur { border: 3px solid var(--hm-primary); color: var(--hm-primary); }
.hm-su-track .lbl { text-align: center; }
.hm-su-track .lbl .t { font-weight: 800; font-size: 12.5px; color: #0E1A33; }
.hm-su-track .lbl .t.off { color: #8A95AC; }
.hm-su-track .lbl .s { font-size: 11px; color: #8A95AC; font-weight: 600; }

.hm-su-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hm-su-two .addr-name { font-size: 14px; font-weight: 800; color: #0E1A33; margin-bottom: 4px; }
.hm-su-two .addr-lines { font-size: 13px; color: #5A6781; font-weight: 600; line-height: 1.6; }
.hm-su-two .addr-tag { display: inline-flex; align-items: center; gap: 7px; background: #EEF4FF; color: var(--hm-primary); font-weight: 800; font-size: 12px; padding: 7px 12px; border-radius: 9px; margin-top: 14px; }
.hm-su-two .pay-method { font-size: 13.5px; font-weight: 700; color: #0E1A33; margin-bottom: 12px; }
.hm-su-two .r { display: flex; justify-content: space-between; font-size: 13.5px; margin-bottom: 8px; }
.hm-su-two .r span { color: #5A6781; font-weight: 600; }
.hm-su-two .r b { font-weight: 700; color: #0E1A33; }
.hm-su-two .r .disc { color: #16A34A; }
.hm-su-two .r.paid { padding-top: 10px; border-top: 1px solid #EEF1F6; margin-bottom: 0; font-size: 15px; }
.hm-su-two .r.paid span, .hm-su-two .r.paid b { font-weight: 800; color: #0E1A33; }

.hm-su-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hm-su-actions a { text-decoration: none; font-family: var(--hm-font-display); font-weight: 800; font-size: 14px; border-radius: 13px; display: inline-flex; align-items: center; gap: 8px; }
.hm-su-actions .primary { background: var(--hm-primary); color: #fff; border: none; padding: 14px 24px; }
.hm-su-actions .ghost { border: 1.5px solid #D4DBE6; background: #fff; color: #0E1A33; padding: 13px 22px; }

.hm-su-right { display: flex; flex-direction: column; gap: 18px; }
.hm-su-right .reco-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-family: var(--hm-font-display); font-weight: 800; font-size: 15px; color: #0E1A33; }
.hm-su-right .reco-hd .ai { display: inline-flex; align-items: center; gap: 5px; background: #F3EEFF; color: #7C3AED; font-weight: 800; font-size: 11px; padding: 5px 9px; border-radius: 20px; }
.hm-su-reco-list { display: flex; flex-direction: column; gap: 12px; }
.hm-su-refer { background: linear-gradient(120deg,#0E1A33,#1A3A6E); border-radius: 14px; padding: 18px; text-align: center; }
.hm-su-refer .eyebrow { color: #9FE6C4; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.hm-su-refer .head { color: #fff; font-weight: 800; font-size: 15px; margin: 6px 0 12px; }
.hm-su-refer button { border: none; background: #fff; color: #0E1A33; font-weight: 800; font-size: 12.5px; padding: 10px 18px; border-radius: 10px; cursor: pointer; }

@media (max-width: 1023px) {
    .baseer-checkout-success .page-main { padding: 0 0 30px; }
    .hm-su-hero { padding: 36px 18px 26px; }
    .hm-su-hero h1 { font-size: 25px; }
    .hm-su-grid { grid-template-columns: 1fr; padding: 16px 16px 0; gap: 14px; }
    .hm-su-two { grid-template-columns: 1fr; }
    .hm-su-card { padding: 18px; }
    .hm-su-actions a { flex: 1; justify-content: center; }
}

/* ==========================================================================
   CMS pages — About (Frame 13), FAQ (Frame 14), Privacy (Frame 15)
   ========================================================================== */
.cms-page-view .page-main,
.faqs-index-index .page-main { max-width: none; margin: 0; padding: 0; }
.cms-page-view .columns, .cms-page-view .column.main,
.faqs-index-index .columns, .faqs-index-index .column.main { display: block; width: 100%; }
/* Kill any wrapper padding/max-width so the FAQ page is truly full width. */
.faqs-index-index #maincontent,
.faqs-index-index .columns,
.faqs-index-index .column.main,
.faqs-index-index .container,
.cms-page-view #maincontent,
.cms-page-view .container {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.faqs-index-index .sidebar { display: none; }
.hm-faq-empty { text-align: center; color: #6B7A99; font-size: 15px; padding: 40px 0; margin: 0; }
.hm-cms { font-family: var(--hm-font-body); color: var(--hm-navy); max-width: 1480px; margin: 0 auto 44px; }

/* About */
.hm-about-hero { position: relative; background: radial-gradient(120% 130% at 80% 0%, #1A3A6E, #0E1A33 65%); padding: 60px 48px; color: #fff; overflow: hidden; border-radius: 18px; margin: 26px 28px 0; }
.hm-about-hero .badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.1); color: #9FE6C4; font-weight: 800; font-size: 12px; padding: 7px 13px; border-radius: 30px; margin-bottom: 16px; }
.hm-about-hero h1 { font-family: var(--hm-font-display); font-weight: 800; font-size: 44px; line-height: 1.08; letter-spacing: -1.5px; margin: 0 0 16px; max-width: 640px; }
.hm-about-hero p { font-size: 16.5px; color: #C7D0E0; line-height: 1.6; margin: 0; font-weight: 500; max-width: 640px; }
.hm-about-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 26px 28px 0; border: 1px solid #EEF1F6; border-radius: 18px; overflow: hidden; }
.hm-about-stats > div { padding: 34px 28px; text-align: center; border-right: 1px solid #EEF1F6; }
.hm-about-stats > div:last-child { border-right: none; }
.hm-about-stats .n { font-family: var(--hm-font-display); font-weight: 800; font-size: 38px; color: var(--hm-primary); letter-spacing: -1px; }
.hm-about-stats .l { font-size: 13.5px; color: #5A6781; font-weight: 700; margin-top: 4px; }
.hm-about-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 44px 28px 0; }
.hm-about-mv .card { background: #F8FAFD; border: 1px solid #EEF1F6; border-radius: 18px; padding: 30px; }
.hm-about-mv .ic { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.hm-about-mv .ic.blue { background: #EEF4FF; } .hm-about-mv .ic.purple { background: #F3EEFF; }
.hm-about-mv h3 { font-family: var(--hm-font-display); font-weight: 800; font-size: 20px; margin: 0 0 10px; color: #0E1A33; }
.hm-about-mv p { font-size: 14.5px; color: #5A6781; line-height: 1.65; margin: 0; }
.hm-about-journey { padding: 36px 28px 0; }
.hm-about-journey h3, .hm-about-team h3 { font-family: var(--hm-font-display); font-weight: 800; font-size: 22px; margin: 0 0 28px; color: #0E1A33; }
.hm-about-journey .tl { display: flex; position: relative; }
.hm-about-journey .ln { position: absolute; top: 13px; left: 5%; right: 5%; height: 2px; background: #E5E9F2; }
.hm-about-journey .step { flex: 1; text-align: center; position: relative; }
.hm-about-journey .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--hm-primary); display: inline-block; position: relative; z-index: 2; }
.hm-about-journey .dot.last { background: var(--hm-deal); }
.hm-about-journey .y { font-family: var(--hm-font-display); font-weight: 800; font-size: 16px; color: #0E1A33; margin-top: 14px; }
.hm-about-journey .d { font-size: 12.5px; color: #5A6781; font-weight: 600; margin-top: 4px; padding: 0 12px; }
.hm-about-team { padding: 36px 28px 10px; }
.hm-about-team .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hm-about-team .m { text-align: center; }
.hm-about-team .ph { aspect-ratio: 1; border-radius: 18px; background: linear-gradient(150deg,#E9EEF7,#D7E1F0); border: 1px solid #E5E9F2; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.hm-about-team .nm { font-weight: 800; font-size: 15px; color: #0E1A33; }
.hm-about-team .ro { font-size: 12.5px; color: var(--hm-primary); font-weight: 700; }

/* FAQ */
.hm-faq-hero { background: radial-gradient(120% 130% at 50% 0%, #EEF4FF, #fff 70%); padding: 48px 28px 30px; text-align: center; border-radius: 18px; margin: 26px 28px 0; }
.hm-faq-hero h1 { font-family: var(--hm-font-display); font-weight: 800; font-size: 34px; letter-spacing: -.8px; margin: 0 0 8px; color: #0E1A33; }
.hm-faq-hero p { font-size: 15px; color: #5A6781; margin: 0 0 22px; font-weight: 500; }
.hm-faq-hero .search { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 11px; background: #fff; border: 2px solid var(--hm-primary); border-radius: 14px; padding: 0 16px; height: 54px; box-shadow: 0 14px 34px -18px rgba(26,108,245,.5); }
.hm-faq-hero .search input { flex: 1; border: none; outline: none; font-size: 15px; color: #0E1A33; background: transparent; }
.hm-faq-hero .chips { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hm-faq-hero .chips span { background: #fff; border: 1.5px solid #E5E9F2; color: #5A6781; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 30px; cursor: pointer; }
.hm-faq-hero .chips .on { background: #0E1A33; color: #fff; border-color: #0E1A33; font-weight: 800; }
.hm-faq-list { max-width: 1040px; margin: 0 auto; padding: 28px 28px 0; display: flex; flex-direction: column; gap: 12px; }
.hm-faq-item { border: 1px solid #E5E9F2; border-radius: 14px; overflow: hidden; }
.hm-faq-item.on { border-color: var(--hm-primary); background: #F8FBFF; }
.hm-faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: none; padding: 20px 22px; cursor: pointer; text-align: left; font-family: var(--hm-font-display); font-weight: 700; font-size: 16px; color: #0E1A33; }
.hm-faq-item.on button { font-weight: 800; }
.hm-faq-item .ic { width: 20px; height: 20px; flex-shrink: 0; position: relative; }
.hm-faq-item .ic::before, .hm-faq-item .ic::after { content: ""; position: absolute; background: #8A95AC; }
.hm-faq-item .ic::before { top: 9px; left: 2px; right: 2px; height: 2.4px; }
.hm-faq-item .ic::after { left: 9px; top: 2px; bottom: 2px; width: 2.4px; transition: opacity .15s; }
.hm-faq-item.on .ic::before, .hm-faq-item.on .ic::after { background: var(--hm-primary); }
.hm-faq-item.on .ic::after { opacity: 0; }
.hm-faq-item .a { padding: 0 22px 20px; font-size: 14px; color: #5A6781; line-height: 1.65; }
.hm-faq-item .a b { color: var(--hm-primary); }
.hm-faq-cta { max-width: 1040px; margin: 26px auto 0; padding: 0 28px; }
.hm-faq-cta > div:first-child, .hm-faq-cta { }
.hm-faq-cta { display: block; }
.hm-faq-cta > div { }
.hm-faq-cta { }
.hm-faq-cta-inner { }
.hm-faq-cta { background: none; }
.hm-faq-cta { display: flex; }
.hm-faq-cta { background: linear-gradient(120deg,#0E1A33,#1A3A6E); border-radius: 18px; padding: 30px 34px; align-items: center; justify-content: space-between; max-width: 1040px; margin: 26px auto 0; }
.hm-faq-cta .h { font-family: var(--hm-font-display); font-weight: 800; font-size: 20px; color: #fff; }
.hm-faq-cta .s { font-size: 14px; color: #AEB9D0; font-weight: 500; margin-top: 5px; }
.hm-faq-cta .btns { display: flex; gap: 11px; }
.hm-faq-cta .primary { border: none; background: #fff; color: #0E1A33; font-weight: 800; font-size: 13.5px; padding: 12px 20px; border-radius: 11px; cursor: pointer; }
.hm-faq-cta .ghost { border: 1.5px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-weight: 800; font-size: 13.5px; padding: 11px 20px; border-radius: 11px; cursor: pointer; }

/* Privacy */
.hm-privacy-head { padding: 40px 48px 20px; border-bottom: 1px solid #EEF1F6; margin: 26px 28px 0; }
.hm-privacy-head .eyebrow { font-size: 13px; color: #8A95AC; font-weight: 700; margin-bottom: 8px; }
.hm-privacy-head h1 { font-family: var(--hm-font-display); font-weight: 800; font-size: 34px; letter-spacing: -.8px; margin: 0; color: #0E1A33; }
.hm-privacy-head .updated { display: inline-flex; align-items: center; gap: 7px; background: #F1F4F9; color: #5A6781; font-weight: 700; font-size: 12.5px; padding: 7px 13px; border-radius: 20px; margin-top: 14px; }
.hm-privacy-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; padding: 34px 48px 10px; }
.hm-privacy-grid .toc { position: sticky; top: 20px; }
.hm-privacy-grid .toc .t { font-family: var(--hm-font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #8A95AC; font-weight: 700; margin-bottom: 14px; }
.hm-privacy-grid .toc .links { display: flex; flex-direction: column; gap: 3px; border-left: 2px solid #EEF1F6; }
.hm-privacy-grid .toc a { padding: 8px 16px; font-size: 13.5px; font-weight: 600; color: #5A6781; text-decoration: none; }
.hm-privacy-grid .toc a.on { font-weight: 800; color: var(--hm-primary); border-left: 2px solid var(--hm-primary); margin-left: -2px; }
.hm-privacy-grid .body { max-width: 760px; }
.hm-privacy-grid .body .lead { font-size: 15px; color: #5A6781; line-height: 1.75; margin: 0 0 30px; }
.hm-privacy-grid .body h3 { font-family: var(--hm-font-display); font-weight: 800; font-size: 20px; color: #0E1A33; margin: 0 0 12px; scroll-margin-top: 90px; }
.hm-privacy-grid .body p { font-size: 14.5px; color: #5A6781; line-height: 1.75; margin: 0 0 30px; }
.hm-privacy-grid .checks { display: flex; flex-direction: column; gap: 9px; margin: -18px 0 30px; }
.hm-privacy-grid .checks div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #0E1A33; font-weight: 600; }
.hm-privacy-grid .checks div::before { content: "✓"; color: #16A34A; font-weight: 800; }
.hm-privacy-grid .contact { background: #F8FAFD; border: 1px solid #EEF1F6; border-radius: 16px; padding: 24px 26px; }
.hm-privacy-grid .contact .h { font-family: var(--hm-font-display); font-weight: 800; font-size: 16px; color: #0E1A33; margin-bottom: 8px; }
.hm-privacy-grid .contact p { font-size: 14px; color: #5A6781; line-height: 1.7; margin: 0; }
.hm-privacy-grid .contact b { color: var(--hm-primary); }

@media (max-width: 1023px) {
  .hm-about-hero { padding: 36px 20px; margin: 16px 16px 0; }
  .hm-about-hero h1 { font-size: 30px; }
  .hm-about-stats { grid-template-columns: 1fr 1fr; margin: 16px 16px 0; }
  .hm-about-stats > div:nth-child(2) { border-right: none; }
  .hm-about-stats > div:nth-child(-n+2) { border-bottom: 1px solid #EEF1F6; }
  .hm-about-mv { grid-template-columns: 1fr; padding: 24px 16px 0; }
  .hm-about-journey, .hm-about-team { padding: 28px 16px 0; }
  .hm-about-journey .tl { flex-direction: column; gap: 18px; }
  .hm-about-journey .ln { display: none; }
  .hm-about-team .grid { grid-template-columns: 1fr 1fr; }
  .hm-faq-hero { padding: 32px 16px 24px; margin: 16px 16px 0; }
  .hm-faq-hero h1 { font-size: 26px; }
  .hm-faq-list, .hm-faq-cta { padding-left: 16px; padding-right: 16px; }
  .hm-faq-cta { flex-direction: column; align-items: flex-start; gap: 16px; margin-left: 16px; margin-right: 16px; }
  .hm-privacy-head { padding: 28px 16px 18px; margin: 16px 16px 0; }
  .hm-privacy-head h1 { font-size: 26px; }
  .hm-privacy-grid { grid-template-columns: 1fr; gap: 22px; padding: 22px 16px 0; }
  .hm-privacy-grid .toc { display: none; }
}

/* ==========================================================================
   Login & Register (Frame 12)
   ========================================================================== */
.customer-account-login .page-main, .customer-account-create .page-main { max-width: none; margin: 0; padding: 0; }
.customer-account-login .columns, .customer-account-create .columns,
.customer-account-login .column.main, .customer-account-create .column.main { display: block; width: 100%; }
.hm-auth { font-family: var(--hm-font-body); color: var(--hm-navy); background: #F8FAFD; min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 44px 28px; }
.hm-auth-card { background: #fff; border: 1px solid #DDE3EC; border-radius: 20px; box-shadow: 0 40px 90px -50px rgba(14,26,51,.5); overflow: hidden; width: 100%; max-width: 960px; margin: 0 auto; }
.hm-auth-login { display: grid; grid-template-columns: 340px 1fr; }
.hm-auth-aside { background: radial-gradient(130% 120% at 0% 0%, #1A3A6E, #0E1A33 65%); padding: 34px 28px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.hm-auth-aside::after { content: ""; position: absolute; bottom: -40px; right: -30px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(26,108,245,.35), transparent 70%); }
.hm-auth-aside .logo { background: #fff; display: inline-flex; padding: 9px 11px; border-radius: 11px; align-self: flex-start; position: relative; z-index: 1; }
.hm-auth-aside .logo img { height: 22px; }
.hm-auth-aside .mid { position: relative; z-index: 1; }
.hm-auth-aside h3 { font-family: var(--hm-font-display); font-weight: 800; font-size: 23px; line-height: 1.2; margin: 0 0 18px; }
.hm-auth-aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.hm-auth-aside li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #C7D0E0; font-weight: 600; }
.hm-auth-aside .foot { position: relative; z-index: 1; font-size: 11.5px; color: #8A95AC; }
.hm-auth-aside .foot a { color: #fff; font-weight: 800; text-decoration: none; }
.hm-auth-form { padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; }
.hm-auth-form h2 { font-family: var(--hm-font-display); font-weight: 800; font-size: 24px; margin: 0 0 6px; color: #0E1A33; }
.hm-auth-form .sub { font-size: 13.5px; color: #8A95AC; margin: 0 0 22px; font-weight: 500; }
.hm-auth-form label { font-size: 12.5px; font-weight: 700; color: #5A6781; margin-bottom: 7px; }
.hm-auth .fld { height: 48px; border: 1.5px solid #E5E9F2; border-radius: 11px; display: flex; align-items: center; gap: 9px; padding: 0 14px; margin-bottom: 16px; }
.hm-auth .fld.focus { border-color: var(--hm-primary); }
.hm-auth .fld input { flex: 1; border: none; outline: none; font-size: 14px; color: #0E1A33; font-weight: 600; background: transparent; }
.hm-auth .fld button { border: none; background: none; cursor: pointer; padding: 0; }
.hm-auth .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.hm-auth .rem, .hm-auth .agree { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5A6781; font-weight: 600; cursor: pointer; }
.hm-auth .rem input, .hm-auth .agree input { display: none; }
.hm-auth .bx { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #D4DBE6; flex-shrink: 0; position: relative; }
.hm-auth input:checked + .bx { background: var(--hm-primary); border-color: var(--hm-primary); }
.hm-auth input:checked + .bx::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 800; position: absolute; top: -1px; left: 3px; }
.hm-auth .forgot { font-size: 13px; color: var(--hm-primary); font-weight: 800; text-decoration: none; }
.hm-auth-submit { width: 100%; border: none; background: var(--hm-primary); color: #fff; font-family: var(--hm-font-display); font-weight: 800; font-size: 15px; padding: 14px; border-radius: 12px; cursor: pointer; box-shadow: 0 14px 28px -12px rgba(26,108,245,.7); }
.hm-auth .or { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.hm-auth .or span { height: 1px; flex: 1; background: #EEF1F6; }
.hm-auth .or { font-size: 11.5px; color: #A6AFC2; font-weight: 700; }
.hm-auth .social { display: flex; gap: 10px; }
.hm-auth .social button { flex: 1; border: 1.5px solid #E5E9F2; background: #fff; border-radius: 11px; padding: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 13px; color: #0E1A33; }
.hm-auth-register { max-width: 720px; padding: 30px 36px; display: flex; flex-direction: column; }
.hm-auth-rhead { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.hm-auth-rhead h2 { font-family: var(--hm-font-display); font-weight: 800; font-size: 24px; margin: 0 0 4px; color: #0E1A33; }
.hm-auth-rhead .sub { font-size: 13px; color: #8A95AC; margin: 0; font-weight: 500; }
.hm-auth-rhead .gift { display: inline-flex; align-items: center; gap: 7px; background: #FFF1EC; color: #FF5630; font-weight: 800; font-size: 12px; padding: 7px 12px; border-radius: 20px; white-space: nowrap; }
.hm-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hm-auth-grid .span2 { grid-column: span 2; }
.hm-auth-grid label { font-size: 12px; font-weight: 700; color: #5A6781; display: block; margin-bottom: 6px; }
.hm-auth-grid input { width: 100%; height: 46px; border: 1.5px solid #E5E9F2; border-radius: 11px; padding: 0 13px; font-size: 13.5px; color: #0E1A33; font-weight: 600; outline: none; }
.hm-auth-grid input:focus { border-color: var(--hm-primary); }
.hm-auth-grid .pw { display: flex; gap: 4px; margin-top: 8px; }
.hm-auth-grid .pw span { flex: 1; height: 4px; border-radius: 3px; background: #EEF1F6; }
.hm-auth-grid .pw span.on { background: #16A34A; }
.hm-auth-register .agree { margin: 16px 0 6px; align-items: flex-start; }
.hm-auth-register .agree:last-of-type { margin-bottom: 16px; align-items: center; }
.hm-auth-register .agree a { color: var(--hm-primary); font-weight: 800; text-decoration: none; }
.hm-auth-alt { font-size: 12.5px; color: #8A95AC; text-align: center; margin: 14px 0 0; font-weight: 600; }
.hm-auth-alt a { color: var(--hm-primary); font-weight: 800; text-decoration: none; }

/* ==========================================================================
   My Account (Frame 11)
   ========================================================================== */
.account .page-main { max-width: 1480px; margin: 0 auto; padding: 26px 28px 40px; }
.account .columns { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.account .column.main { min-width: 0; }
.account .sidebar-main { width: 100%; }
.account .sidebar-additional { display: none; }
.hm-acc-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 20px; }
.hm-acc-profile { background: linear-gradient(135deg,#0E1A33,#1A3A6E); border-radius: 18px; padding: 22px; color: #fff; text-align: center; }
.hm-acc-profile .av { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.hm-acc-profile .nm { font-family: var(--hm-font-display); font-weight: 800; font-size: 17px; }
.hm-acc-profile .meta { font-size: 12.5px; color: #9FB2D6; font-weight: 600; margin-top: 2px; }
.hm-acc-nav { background: #fff; border: 1px solid #E5E9F2; border-radius: 18px; padding: 10px; }
.hm-acc-nav a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: #5A6781; font-weight: 700; font-size: 14px; text-decoration: none; border-radius: 11px; }
.hm-acc-nav a.on { background: #EEF4FF; color: var(--hm-primary); font-weight: 800; }
.hm-acc-nav a.danger { color: var(--hm-deal); border-top: 1px solid #EEF1F6; margin-top: 6px; border-radius: 0 0 11px 11px; }
.hm-acc-main { display: flex; flex-direction: column; gap: 20px; }
.hm-acc-hello h1 { font-family: var(--hm-font-display); font-weight: 800; font-size: 26px; margin: 0 0 4px; letter-spacing: -.5px; }
.hm-acc-hello p { font-size: 14px; color: #5A6781; margin: 0; font-weight: 500; }
.hm-acc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hm-acc-stats > div { background: #fff; border: 1px solid #E5E9F2; border-radius: 16px; padding: 20px; }
.hm-acc-stats .ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.hm-acc-stats .ic.blue { background: #EEF4FF; } .hm-acc-stats .ic.red { background: #FFF1EC; } .hm-acc-stats .ic.purple { background: #F3EEFF; } .hm-acc-stats .ic.green { background: #E9F7EF; }
.hm-acc-stats .n { font-family: var(--hm-font-display); font-weight: 800; font-size: 26px; color: #0E1A33; }
.hm-acc-stats .l { font-size: 13px; color: #8A95AC; font-weight: 700; }
.hm-acc-orders { background: #fff; border: 1px solid #E5E9F2; border-radius: 18px; padding: 22px; }
.hm-acc-orders .hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hm-acc-orders .hd .t { font-family: var(--hm-font-display); font-weight: 800; font-size: 17px; color: #0E1A33; }
.hm-acc-orders .hd a { font-size: 13px; color: var(--hm-primary); font-weight: 800; text-decoration: none; }
.hm-acc-orders .list { display: flex; flex-direction: column; gap: 12px; }
.hm-acc-orders .row { display: flex; align-items: center; gap: 16px; border: 1px solid #EEF1F6; border-radius: 14px; padding: 14px 16px; }
.hm-acc-orders .img { width: 54px; height: 54px; border-radius: 12px; background: linear-gradient(150deg,#F5F7FB,#E9EEF7); border: 1px solid #E5E9F2; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hm-acc-orders .img .ph { width: 20px; height: 40px; border-radius: 6px; background: linear-gradient(165deg,#2C3E5E,#0E1A33); }
.hm-acc-orders .meta { flex: 1; min-width: 0; }
.hm-acc-orders .nm { font-weight: 800; font-size: 14px; color: #0E1A33; }
.hm-acc-orders .nm .ex { color: #8A95AC; font-weight: 600; }
.hm-acc-orders .sub { font-family: var(--hm-font-mono); font-size: 11.5px; color: #8A95AC; font-weight: 600; margin-top: 3px; }
.hm-acc-orders .st { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; padding: 6px 12px; border-radius: 20px; }
.hm-acc-orders .st .dot { width: 7px; height: 7px; border-radius: 50%; }
.hm-acc-orders .amt { font-family: var(--hm-font-display); font-weight: 800; font-size: 15px; color: #0E1A33; min-width: 110px; text-align: right; }
.hm-acc-orders .empty { font-size: 14px; color: #8A95AC; font-weight: 600; }
.hm-acc-recos .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.hm-acc-recos .hd .ai { display: inline-flex; align-items: center; gap: 5px; background: #F3EEFF; color: #7C3AED; font-weight: 800; font-size: 11px; padding: 5px 9px; border-radius: 20px; }
.hm-acc-recos .hd .t { font-family: var(--hm-font-display); font-weight: 800; font-size: 17px; color: #0E1A33; }

@media (max-width: 1023px) {
  .hm-auth-login { grid-template-columns: 1fr; }
  .hm-auth-aside { display: none; }
  .hm-auth-form, .hm-auth-register { padding: 26px 20px; }
  .hm-auth-grid { grid-template-columns: 1fr; }
  .hm-auth-grid .span2 { grid-column: span 1; }
  .account .page-main { padding: 16px 16px 30px; }
  .account .columns { grid-template-columns: 1fr; }
  .hm-acc-side { position: static; }
  .hm-acc-stats { grid-template-columns: 1fr 1fr; }
  .hm-acc-orders .row { flex-wrap: wrap; }
  .hm-acc-orders .amt { min-width: 0; margin-left: auto; }
}

[x-cloak] { display: none !important; }

/* PDP — Write a review form (native Magento review post) */
.hm-pdp-revform { margin-top: 22px; padding-top: 20px; border-top: 1px solid #EEF1F6; max-width: 820px; }
.hm-pdp-revform .hd { font-family: var(--hm-font-display); font-weight: 800; font-size: 16px; color: #0E1A33; margin-bottom: 14px; }
.hm-pdp-revform .rv-rate { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hm-pdp-revform .rv-rate .lbl { font-size: 13px; font-weight: 700; color: #5A6781; min-width: 90px; }
.hm-pdp-revform .rv-stars { display: flex; gap: 2px; }
.hm-pdp-revform .rv-star { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; }
.hm-pdp-revform .rv-star svg { fill: #E5E9F2; transition: fill .12s ease; }
.hm-pdp-revform .rv-star.on svg { fill: #F59E0B; }
.hm-pdp-revform .rv-fields { display: flex; gap: 12px; margin: 14px 0 12px; flex-wrap: wrap; }
.hm-pdp-revform .rv-fields input { flex: 1 1 200px; }
.hm-pdp-revform input[type=text], .hm-pdp-revform textarea { width: 100%; border: 1px solid #E1E6F0; border-radius: 12px; padding: 11px 14px; font-size: 14px; color: #0E1A33; font-family: inherit; }
.hm-pdp-revform input[type=text]:focus, .hm-pdp-revform textarea:focus { outline: none; border-color: var(--hm-primary); box-shadow: 0 0 0 3px rgba(26,108,245,.12); }
.hm-pdp-revform textarea { resize: vertical; min-height: 96px; }
.hm-pdp-revform .rv-submit { margin-top: 14px; background: var(--hm-primary); color: #fff; border: 0; border-radius: 30px; padding: 12px 28px; font-size: 14px; font-weight: 700; cursor: pointer; }
.hm-pdp-revform .rv-submit:hover { filter: brightness(1.05); }
.hm-pdp-revform .rv-note { margin-top: 9px; font-size: 12px; color: #8A95AC; font-weight: 600; }

/* Checkout — installment plan card */
.hm-co-inst .hm-co-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hm-co-inst-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #5A6781; cursor: pointer; }
.hm-co-inst-toggle input { width: 16px; height: 16px; accent-color: var(--hm-primary); }
.hm-co-inst-select { width: 100%; margin-top: 12px; border: 1px solid #E1E6F0; border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 600; color: #0E1A33; background: #fff; font-family: inherit; }
.hm-co-inst-select:focus { outline: none; border-color: var(--hm-primary); box-shadow: 0 0 0 3px rgba(26,108,245,.12); }
.hm-co-inst-note { margin-top: 8px; font-size: 12px; color: #8A95AC; font-weight: 600; }