/* ==========================================================================
   DEKI.LT — charcoal + electric blue design
   Order: tokens > base/type > header > hero/picker > sections >
          cards/grid > product page > footer > responsive > a11y/motion
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root {
  --deki-ink:   #111318;
  /* Solid fills — buttons, picker submit, badges. Always pair with
     --deki-paper (white) text/icons, never ink. */
  --deki-accent: #2F6BFF;
  /* Accent text/thin marks on the charcoal --deki-ink background. Plain
     --deki-accent on --deki-ink is ~3.4:1 and fails AA for small text;
     this lighter tint clears it. Also used for focus rings on dark
     surfaces so the ring stays visible against ink. */
  --deki-accent-soft: #7FA6FF;
  --deki-paper: #FFFFFF;
  --deki-fog:   #F4F5F7;
  --deki-steel: #6E7480;
  --deki-edge:  #E4E6EA;

  --deki-font-display: 'Archivo', Arial, sans-serif;
  --deki-font-body: 'Inter', Arial, sans-serif;
  --deki-font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --deki-container: 1280px;
}

/* ---------- BASE / TYPE ---------- */
html { -webkit-text-size-adjust: 100%; }
body, button, input, select, textarea {
  font-family: var(--deki-font-body);
  color: var(--deki-ink);
  font-size: 16px;
  line-height: 1.6;
}
body { background: var(--deki-paper); overflow-x: hidden; }
h1, h2, h3, h4 {
  font-family: var(--deki-font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 800;
  color: var(--deki-ink);
  margin: 0 0 .5em;
}
h1 { font-size: 64px; }
h2 { font-size: 40px; }
h3 { font-size: 28px; }
h4 { font-size: 20px; }
/* Explicit (not inherited) so any Astra selector of equal/lower specificity
   never wins a cascade-order fluke; header/nav/footer/buttons all carry
   their own higher-specificity or !important color rules and still win. */
a, a:visited { color: var(--deki-ink); }
a:hover, a:focus { color: var(--deki-ink); }
img { max-width: 100%; height: auto; }
/* !important is required here: Astra's page-builder-template layout resets
   max-width:none on grandchildren of .entry-content (entry-content > section
   > .deki-wrap matches its `:not(.wp-block-group) > *` full-width-content
   rule, specificity ~(0,4,0) even without !important of its own) — every
   .deki-wrap on the site was silently full-bleed instead of a contained
   1280px column until this was added (caught via computed-style inspection
   on the wave-2 homepage rebuild; the static pages from wave 1 share this
   nesting pattern and were quietly affected too). */
.deki-wrap { max-width: var(--deki-container) !important; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.deki-eyebrow, .deki-mono {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
#content, .ast-container { overflow-x: hidden; }

/* ---------- HEADER ---------- */
.site-header {
  background: var(--deki-ink) !important;
  position: sticky;
  top: 0;
  z-index: 999;
  border: 0 !important;
  box-shadow: none !important;
}
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header,
.ast-below-header {
  background: var(--deki-ink) !important;
  border-color: #24262d !important;
}
.site-title,
.ast-site-title-wrap .site-title a,
.site-title a {
  font-family: var(--deki-font-display) !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--deki-paper) !important;
  font-size: 24px !important;
}
.site-title::after {
  content: '\2022';
  color: var(--deki-accent-soft);
  margin-left: 4px;
}
.main-header-menu .menu-item > .menu-link,
.ast-builder-menu .menu-link,
.main-header-bar .main-header-menu a {
  font-family: var(--deki-font-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
  font-size: 13px;
  color: var(--deki-paper) !important;
  position: relative;
}
.main-header-menu .menu-item > .menu-link {
  overflow: hidden;
}
.main-header-menu .menu-item > .menu-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 4px;
  height: 2px;
  background: var(--deki-accent-soft);
  transition: right .2s ease;
}
.main-header-menu .menu-item:hover > .menu-link::after,
.main-header-menu .menu-item.deki-cart-item > .menu-link::after { right: 0; }
.main-header-menu .menu-item.deki-cart-item::after { content: none; }
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .menu-item > .menu-link:focus { color: var(--deki-accent-soft) !important; }
.ast-header-break-point .main-header-bar .ast-mobile-menu-buttons-minimal svg,
.ast-mobile-menu-buttons svg,
.main-header-bar .menu-toggle,
.main-header-bar .ast-mobile-menu-trigger-minimal,
.main-header-bar .ast-mobile-menu-trigger-minimal svg,
.main-header-bar .menu-toggle svg { fill: var(--deki-paper) !important; color: var(--deki-paper) !important; }
.ast-header-break-point .main-navigation,
.ast-header-break-point #ast-mobile-header-wrap,
.ast-header-break-point .main-header-bar,
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .ast-mobile-header-content,
.ast-header-break-point .ast-builder-menu-mobile,
.ast-header-break-point .main-header-menu {
  background: var(--deki-ink) !important;
}
.ast-header-break-point .main-header-menu .menu-item,
.ast-header-break-point .main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-item.current-menu-item > .menu-link,
.ast-header-break-point .main-header-menu .menu-item.current-menu-item {
  border-color: #24262d !important;
  background: var(--deki-ink) !important;
  color: var(--deki-paper) !important;
}
.ast-header-break-point .main-header-menu .menu-link:hover,
.ast-header-break-point .main-header-menu .menu-link:focus {
  background: rgba(127, 166, 255, .15) !important;
  color: var(--deki-accent-soft) !important;
}
.ast-mobile-popup-drawer, .ast-mobile-popup-content { background: var(--deki-ink) !important; }

/* Header: compact on scroll (deki-scrolled class set by a small script in
   functions.php's deki_header_interactions_script()). Astra's header
   customizer settings can ship inline padding on this element with equal
   or higher specificity than a plain class rule, so !important on both
   states keeps the transition working regardless. */
.main-header-bar {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  transition: padding-top .2s ease, padding-bottom .2s ease;
}
.site-header.deki-scrolled .main-header-bar {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Header: product search (wave 2). Icon toggle + dropdown panel wrapping
   WooCommerce's own product search form — a plain GET form, works with
   JS off; the toggle script only shows/hides an already-rendered panel. */
.deki-search-item.menu-item { position: relative; display: flex; align-items: center; margin-left: 6px; }
.deki-search-item.menu-item::after { content: none; }
.deki-search-toggle {
  background: none;
  border: 0;
  color: var(--deki-paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 8px;
  min-width: 36px;
  min-height: 36px;
  justify-content: center;
}
.deki-search-toggle svg { width: 19px; height: 19px; display: block; }
.deki-search-toggle:hover, .deki-search-toggle:focus { color: var(--deki-accent-soft); }
.deki-search-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: var(--deki-paper);
  border: 1px solid var(--deki-edge);
  padding: 14px;
  min-width: 280px;
  box-shadow: 0 12px 28px rgba(17, 19, 24, .16);
  z-index: 1000;
}
.deki-search-panel[hidden] { display: none; }
.deki-search-panel form.woocommerce-product-search { display: flex; flex-direction: column; gap: 10px; }
.deki-search-panel .search-field {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--deki-edge);
  font-family: var(--deki-font-body);
  font-size: 14px;
  color: var(--deki-ink);
  box-sizing: border-box;
}
.deki-search-panel .search-submit {
  background: var(--deki-ink);
  color: var(--deki-paper);
  border: 0;
  padding: 10px;
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.deki-search-panel .search-submit:hover { background: var(--deki-accent); }
/* Mobile drawer: search is always visible near the top instead of a
   toggle — no extra tap once the drawer itself is open. */
.ast-header-break-point .deki-search-toggle { display: none; }
.ast-header-break-point .deki-search-item.menu-item { display: block; padding: 14px 20px !important; border-color: #24262d !important; }
.ast-header-break-point .deki-search-panel {
  position: static;
  display: block !important;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  min-width: 0;
}
.ast-header-break-point .deki-search-panel .search-field { background: var(--deki-ink); border-color: #35383f; color: var(--deki-paper); }
.ast-header-break-point .deki-search-panel .search-field::placeholder { color: var(--deki-steel); }

/* Mobile nav "drawer" — Astra's mobile header type on this site is
   "dropdown" (position: static, height driven by content = 243px for
   our 5 links + cart icon), not a true off-canvas overlay, and it ships
   no scrim/backdrop element at all (confirmed: zero elements matching
   *overlay* anywhere in the live DOM). Result (audit finding I9): the
   panel's charcoal background stopped 243px down, and the still-live,
   still-interactive hero content (tagline + device picker) was visible
   immediately below it with no dividing line — reads as an unfinished
   overlay. Fix: when the panel is open (Astra's own `.toggle-on` class,
   confirmed live on `.main-header-bar-navigation` when the hamburger is
   toggled), extend its existing solid background to fill the rest of
   the viewport, so opening the menu shows ONLY the nav — no page
   content bleeds through — while staying in normal document flow (no
   fixed positioning needed, no scroll-lock JS, safe with the "no
   container restarts, CSS/PHP-only" scope of this fix). */
.ast-header-break-point .main-header-bar-navigation.toggle-on {
  min-height: 100vh;
}

/* cart icon */
.deki-cart-item.menu-item { display: flex; align-items: center; margin-left: 4px; }
.ast-header-break-point .deki-cart-item.menu-item {
  justify-content: flex-start;
  margin-left: 0;
  padding: 14px 20px !important;
}
.ast-header-break-point .deki-cart-link { padding: 0 !important; }
.deki-cart-link { display: flex !important; align-items: center; gap: 6px; color: var(--deki-paper) !important; text-decoration: none; padding: 8px 0 !important; }
.deki-cart-icon { display: inline-flex; }
.deki-cart-icon svg { display: block; width: 20px; height: 20px; }
.deki-cart-count {
  font-family: var(--deki-font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--deki-accent);
  color: var(--deki-paper);
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-sizing: border-box;
}

/* Astra "scroll to top" floating button — recolor off its default blue */
#ast-scroll-top {
  background: var(--deki-ink) !important;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus {
  background: var(--deki-accent) !important;
}
#ast-scroll-top svg,
#ast-scroll-top path { fill: var(--deki-paper); transition: fill .15s ease; }
/* Solid fill in both states (ink at rest, accent on hover) — icon stays
   white/paper throughout, never ink. */
#ast-scroll-top:hover svg,
#ast-scroll-top:hover path,
#ast-scroll-top:focus svg,
#ast-scroll-top:focus path { fill: var(--deki-paper); }

/* Hide default page-title banner on the homepage (custom hero replaces it) */
.home .ast-archive-description,
.home.blog .page-header,
body.home .entry-header:not(.woocommerce-products-header) { display: none; }

/* ---------- HERO / DEVICE PICKER ---------- */
.deki-hero {
  background: var(--deki-ink);
  padding: 72px 0 64px;
}
.deki-hero__inner { text-align: center; }
.deki-eyebrow.deki-hero__eyebrow { color: var(--deki-accent-soft); display: block; margin-bottom: 16px; font-size: 14px; }
.deki-hero__title { color: var(--deki-paper); font-size: 64px; margin: 0 0 20px; }
.deki-hero__lead {
  color: #C7CAD1;
  font-size: 18px;
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: 1.6;
}
.deki-picker {
  background: var(--deki-paper);
  max-width: 640px;
  margin: 0 auto;
  border-top: 3px solid var(--deki-accent);
  padding: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  text-align: left;
  box-sizing: border-box;
}
.deki-picker__field { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; }
.deki-picker__field label {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--deki-steel);
  font-weight: 600;
}
.deki-picker__field select {
  font-family: var(--deki-font-body);
  font-size: 15px;
  padding: 12px;
  min-height: 44px;
  border: 1px solid var(--deki-edge);
  background: var(--deki-paper);
  color: var(--deki-ink);
  border-radius: 0;
  box-sizing: border-box;
  width: 100%;
}
.deki-picker__submit {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: 13px;
  background: var(--deki-accent);
  color: var(--deki-paper);
  border: 0;
  padding: 13px 28px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.deki-picker__submit:hover { background: #2557D6; }
/* I12: submitting with no model chosen used to silently reload the
   homepage with a dangling empty querystring. Now the form's own inline
   script blocks submission and reveals this instead — forces the field
   full-width via flex-basis so it always lands on its own line under
   the two selects, above the button. */
.deki-picker__error {
  flex: 1 0 100%;
  margin: -6px 0 0;
  font-family: var(--deki-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: #D64550;
}

/* ---------- SECTIONS ---------- */
.deki-section-title {
  font-size: 28px;
  text-align: center;
  margin-bottom: 32px;
}

/* Category tiles (wave 2): image-backed cards — a real product photo per
   category (deki_category_tile_image_id() in functions.php) instead of a
   flat label block, with a hover zoom on the image. Product photography
   here is isolated-on-white catalog shots, not lifestyle scenes, so the
   image sits in a fog "media" box (same contain treatment as product
   cards) rather than as a full-bleed cropped background. */
.deki-tiles { background: var(--deki-paper); padding: 64px 0; }
.deki-tiles__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.deki-tile {
  background: var(--deki-paper);
  border: 1px solid var(--deki-edge);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0; /* grid items default to min-width:auto, which for an <img>
                   child equals its intrinsic pixel width — with varying
                   supplier photo sizes that widened the 1fr tracks past the
                   container and pushed the last tile off-screen. */
  transition: border-color .15s ease;
}
.deki-tile, .deki-tile__title, a.deki-tile { text-decoration: none !important; }
.deki-tile:hover { border-color: var(--deki-ink); }
.deki-tile__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--deki-fog);
  overflow: hidden;
}
.deki-tile__media--empty { background: var(--deki-ink); }
.deki-tile__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  box-sizing: border-box;
  transition: transform .25s ease;
}
.deki-tile:hover .deki-tile__img { transform: scale(1.06); }
.deki-tile__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px;
}
.deki-tile__title {
  font-family: var(--deki-font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  color: var(--deki-ink);
  letter-spacing: -0.01em;
}
.deki-tile__arrow {
  color: var(--deki-accent);
  font-size: 20px;
  display: inline-block;
  transition: transform .15s ease;
}
.deki-tile:hover .deki-tile__arrow { transform: translateX(6px); }

.deki-row { padding: 64px 0; background: var(--deki-fog); }
/* Second product row alternates onto paper so the two rows read as
   distinct sections, not one long fog field. */
.deki-row--alt { background: var(--deki-paper); border-top: 1px solid var(--deki-edge); border-bottom: 1px solid var(--deki-edge); }
.deki-row__title { font-size: 28px; margin-bottom: 32px; text-align: center; }
.deki-row .products { margin: 0 !important; }

.deki-about { padding: 56px 0; }
.deki-about__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.deki-about__inner p { color: var(--deki-steel); font-size: 17px; line-height: 1.7; margin: 0 0 14px; }
.deki-about__link {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: 13px;
  color: var(--deki-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--deki-accent);
  padding-bottom: 2px;
}
.deki-about__link:hover { color: var(--deki-accent); }

.deki-brands { padding: 40px 0; border-top: 1px solid var(--deki-edge); border-bottom: 1px solid var(--deki-edge); }
.deki-brands__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 13px;
  font-weight: 600;
  color: var(--deki-steel);
}

.deki-trust { padding: 56px 0; }
.deki-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.deki-trust__item { padding-top: 16px; border-top: 2px solid var(--deki-accent); }
.deki-trust__label {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  font-weight: 600;
  color: var(--deki-ink);
}

/* ---------- CARDS / GRID ---------- */
.woocommerce ul.products, .woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
  margin: 0 !important;
  padding: 0 !important;
}
.woocommerce ul.products li.product {
  width: auto !important;
  min-width: 0; /* same 1fr-track-vs-intrinsic-image-width issue as the
                   category tiles below — defensive here too. */
  margin: 0 !important;
  float: none !important;
  background: var(--deki-paper);
  border: 1px solid var(--deki-edge);
  padding: 0 0 20px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
  box-sizing: border-box;
}
.woocommerce ul.products li.product:hover { border-color: var(--deki-ink); transform: translateY(-1px); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex: 1;
}
.woocommerce ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  height: auto !important;
  object-fit: contain !important;
  background: var(--deki-fog);
  padding: 12px;
  margin: 0 0 16px !important;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .deki-card-brand {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--deki-steel);
  padding: 0 16px;
  display: block;
  margin-bottom: 6px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--deki-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--deki-ink);
  padding: 0 16px;
  margin: 0 0 8px;
  min-height: 2.8em; /* reserves 2 lines even when a title only fills 1, so
                         price/button rows stay level across a row of cards
                         regardless of how long each product's LT title is */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: none;
  letter-spacing: normal;
}
.woocommerce ul.products li.product .price {
  font-family: var(--deki-font-mono);
  font-weight: 600;
  font-size: 16px;
  color: var(--deki-ink);
  padding: 0 16px;
  margin: 0 0 14px;
  display: block;
}
.woocommerce ul.products li.product .price del { color: var(--deki-steel); opacity: .7; margin-right: 6px; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: auto 16px 0 !important;
  text-align: center;
  background: var(--deki-ink) !important;
  color: var(--deki-paper) !important;
  font-family: var(--deki-font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 16px !important;
  min-height: 44px;
  box-sizing: border-box;
  border-radius: 0 !important;
  border: 0;
  text-transform: none;
  letter-spacing: normal;
  transition: background .15s ease, color .15s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
  background: var(--deki-accent) !important;
  color: var(--deki-paper) !important;
}
.woocommerce span.onsale {
  background: var(--deki-accent) !important;
  color: var(--deki-paper) !important;
  font-family: var(--deki-font-mono);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .04em;
  border-radius: 0;
  min-height: auto;
  min-width: auto;
  padding: 4px 8px;
  top: 12px;
  left: 12px;
  line-height: 1;
  right: auto;
}

/* Shop / archive header */
.woocommerce-products-header__title.page-title,
.archive .page-title,
.tax-product_cat .page-title,
.tax-pa_prekes-zenklas .page-title,
.tax-pa_telefono-modelis .page-title {
  font-family: var(--deki-font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--deki-ink);
  font-size: 40px;
}
.term-description { color: var(--deki-steel); max-width: 720px; line-height: 1.6; }
/* !important needed here: Astra's woocommerce-grid.min.css ships
   `.woocommerce-js .woocommerce-breadcrumb a` (two classes + tag), which
   otherwise outranks a plain `.woocommerce-breadcrumb a` override. */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb a { color: var(--deki-steel) !important; font-family: var(--deki-font-body); }
.woocommerce-breadcrumb a:hover,
.woocommerce-breadcrumb a:focus { color: var(--deki-ink) !important; }
.single-product-category,
.single-product-category a { color: var(--deki-ink); text-decoration: none; }
.single-product-category a:hover { color: var(--deki-ink); text-decoration: underline; text-decoration-color: var(--deki-accent); }
.woocommerce-result-count, .woocommerce-ordering select { font-family: var(--deki-font-body); color: var(--deki-steel); }
.woocommerce-ordering select {
  border: 1px solid var(--deki-edge);
  border-radius: 0;
  padding: 8px 32px 8px 12px;
  background-color: var(--deki-paper);
}
.ast-separate-container .ast-woocommerce-container { background: transparent !important; box-shadow: none !important; padding: 0 !important; }

/* Pagination: token-consistent styling (was riding on Astra's own default
   accent, unstyled by deki.css). */
.woocommerce-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 40px 0 0; }
.woocommerce-pagination .page-numbers li { margin: 0; }
.woocommerce-pagination .page-numbers li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: var(--deki-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--deki-ink);
  background: var(--deki-paper);
  border: 1px solid var(--deki-edge);
  text-decoration: none;
}
.woocommerce-pagination .page-numbers li a.page-numbers:hover,
.woocommerce-pagination .page-numbers li a.page-numbers:focus {
  border-color: var(--deki-ink);
  background: var(--deki-fog);
}
.woocommerce-pagination .page-numbers li span.page-numbers.current {
  background: var(--deki-ink);
  border-color: var(--deki-ink);
  color: var(--deki-paper);
}

/* Empty-state CTA (B5/P5) — appended after WooCommerce's own "Produktų
   nerasta." notice on any archive/search with zero results, incl. an
   emptied-out category or a device-picker brand+model combo with no
   match, so the visitor always has a next step. */
.deki-no-results-cta { margin-top: 16px; }
.deki-no-results-cta a {
  display: inline-block;
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  font-size: 13px;
  color: var(--deki-paper);
  background: var(--deki-ink);
  padding: 12px 24px;
  text-decoration: none;
}
.deki-no-results-cta a:hover { background: var(--deki-accent); color: var(--deki-paper); }

/* ---------- PRODUCT PAGE ---------- */
.woocommerce div.product .product_title {
  font-family: var(--deki-font-display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 28px;
  margin-bottom: 12px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--deki-font-mono);
  font-weight: 600;
  font-size: 28px;
  color: var(--deki-ink);
}
/* I7: the decimal separator's own span (deki_price_decimal_span() in
   functions.php, hooked on the wc_price filter) — rendered in the body
   font so its glyph cell shrinks to the period's actual width instead
   of a full monospace cell, closing the "€10 . 99" gap. Applies
   everywhere a WooCommerce price prints (product page, cards,
   device-picker results), harmless at the smaller card size too. */
.deki-price-dot {
  font-family: var(--deki-font-body);
  letter-spacing: normal;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--deki-steel);
  line-height: 1.6;
  margin: 16px 0;
}
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--deki-ink) !important;
  color: var(--deki-paper) !important;
  font-family: var(--deki-font-body);
  font-weight: 600;
  padding: 16px 32px !important;
  min-height: 44px;
  border-radius: 0;
  border: 0;
  text-transform: none;
  font-size: 15px;
  transition: background .15s ease, color .15s ease;
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--deki-accent) !important;
  color: var(--deki-paper) !important;
}
.woocommerce div.product div.images img,
.woocommerce div.product div.images .woocommerce-product-gallery__image { background: var(--deki-fog); }
/* Gallery thumbnail strip: same fog-box + contain treatment as product
   cards, so near-white product photography reads as a tile instead of
   blending into the page background. */
.woocommerce-product-gallery .flex-control-thumbs li {
  background: var(--deki-fog);
  border: 1px solid var(--deki-edge);
  box-sizing: border-box;
  transition: border-color .15s ease;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  background: var(--deki-fog);
}
.woocommerce-product-gallery .flex-control-thumbs li:hover,
.woocommerce-product-gallery .flex-control-thumbs li.flex-active { border-color: var(--deki-ink); }
.woocommerce div.product .product_meta { font-size: 13px; color: var(--deki-steel); }
.woocommerce div.product .product_meta a { color: var(--deki-steel); }
/* Astra's woocommerce-grid.min.css hardcodes `.stock { color:#77a464 }`
   (3 classes + tag) — a stray non-token green. Replace with the palette. */
.woocommerce div.product p.stock,
.woocommerce div.product span.stock { color: var(--deki-ink); font-weight: 600; }

.deki-spec-chips { margin: 20px 0 28px; display: flex; flex-direction: column; gap: 14px; }
.deki-spec-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.deki-spec-label {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--deki-steel);
  min-width: 130px;
  font-weight: 600;
}
.deki-spec-values { display: flex; flex-wrap: wrap; gap: 8px; }
.deki-spec-chip {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  font-weight: 600;
  color: var(--deki-ink);
  border: 1px solid var(--deki-edge);
  padding: 6px 12px;
}
.related.products ul.products { margin-top: 0 !important; }
.related.products > h2 {
  font-family: var(--deki-font-display);
  text-transform: uppercase;
  font-size: 28px;
  text-align: center;
  margin: 56px 0 32px;
}
/* P4: with 1-3 related products the base 4-col `1fr` grid stretched a
   single card full-width, leaving a large empty gap beside it. Cap each
   track to the card's natural width and center the row instead — a full
   row of 4 still fills the same space it did before (auto-fit only
   collapses the tracks nothing occupies), a partial row now centers. */
.related.products ul.products,
.upsells.products ul.products {
  grid-template-columns: repeat(auto-fit, minmax(240px, 296px)) !important;
  justify-content: center;
}

/* ---------- CART / CHECKOUT ---------- */
/* Audit I8 / wave-2 root cause: WooCommerce Blocks' cart & checkout line
   items pass BOTH shortDescription and fullDescription into the same
   product-metadata component (confirmed in the compiled cart.js bundle:
   `shortDescription:e,fullDescription:t` on the same node) and it falls
   back to the full description when the short one is empty. For products
   with no short description set, that surfaces the FIRST PARAGRAPH of
   the full marketing copy verbatim under the line item — eg. a Hofi
   glass product opens its description with the rhetorical line "Ar
   lankstumas gali reikšti geriau?", which then appears as a stray,
   out-of-context sentence in the order review. This is WooCommerce
   Blocks' own designed fallback, not a bug in a specific product, and it
   would resurface for any other product missing a short description —
   so it's suppressed at the display layer for every cart/checkout line
   rather than patched product-by-product (no product content was
   edited, per this wave's guardrails). Order review keeps product name,
   variant/attribute meta, quantity and price — the parts that are
   actually useful there. */
.wc-block-components-product-metadata__description { display: none !important; }

/* ---------- STATIC PAGES (Apie mus / Kontaktai / Pristatymas / Grąžinimai) ---------- */
.deki-page { padding: 64px 0 88px; }
.deki-page__inner { max-width: 760px; margin: 0 auto; }
.deki-page__title { margin-bottom: 28px; }
.deki-page p { margin: 0 0 20px; line-height: 1.7; max-width: 70ch; }
.deki-page ul, .deki-page ol { margin: 0 0 24px; padding-left: 22px; line-height: 1.7; max-width: 70ch; }
.deki-page li { margin-bottom: 10px; }
.deki-page h2 { font-size: 26px; margin: 44px 0 16px; }
.deki-page h2:first-of-type { margin-top: 8px; }
.deki-page h3 { font-size: 18px; margin: 28px 0 10px; }
.deki-page a { text-decoration: underline; text-decoration-color: var(--deki-accent); }
.deki-page a:hover { color: var(--deki-accent); }

/* Visible "owner must fill this in" marker — never rendered as if real. */
.deki-fill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--deki-fog);
  border: 1px dashed var(--deki-accent);
  color: var(--deki-accent);
  font-family: var(--deki-font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  text-decoration: none;
}

.deki-page__notice {
  background: var(--deki-fog);
  border-left: 3px solid var(--deki-accent);
  padding: 16px 20px;
  margin: 0 0 28px;
  font-family: var(--deki-font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--deki-steel);
  max-width: 70ch;
}
.deki-page__notice strong { color: var(--deki-ink); }

.deki-contact-block {
  background: var(--deki-fog);
  border: 1px solid var(--deki-edge);
  padding: 28px;
  margin: 8px 0 32px;
  max-width: 70ch;
  box-sizing: border-box;
}
.deki-contact-block dl { margin: 0; display: grid; gap: 18px; }
.deki-contact-block dt {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 600;
  color: var(--deki-steel);
}
.deki-contact-block dd { margin: 4px 0 0; font-size: 16px; color: var(--deki-ink); }
.deki-contact-block dd a { color: var(--deki-ink); text-decoration: underline; text-decoration-color: var(--deki-accent); }
.deki-contact-block dd a:hover { color: var(--deki-accent); }

/* ---------- FOOTER ---------- */
.site-footer { display: none !important; }
.deki-footer { background: var(--deki-ink); color: #C7CAD1; padding: 56px 0 0; margin-top: 64px; }
.deki-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.deki-footer__brand { font-family: var(--deki-font-display); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 24px; color: var(--deki-paper); }
.deki-footer__brand .deki-dot { color: var(--deki-accent-soft); }
.deki-footer__tagline { margin-top: 12px; font-size: 13px; color: var(--deki-steel); max-width: 260px; line-height: 1.6; }
.deki-footer__col h5 {
  font-family: var(--deki-font-mono);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--deki-paper);
  margin: 6px 0 16px;
  font-weight: 600;
}
.deki-footer__col ul { list-style: none; margin: 0; padding: 0; }
.deki-footer__col li { margin: 0 0 10px; }
.deki-footer__col a { color: #C7CAD1; text-decoration: none; font-size: 14px; }
.deki-footer__col a:hover { color: var(--deki-accent-soft); }
.deki-footer__payments {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #24262d;
  font-family: var(--deki-font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--deki-steel);
}
.deki-footer__payments span { border: 1px solid #2A2D35; padding: 6px 10px; }
.deki-footer__copy {
  margin-top: 32px;
  padding: 22px 0;
  border-top: 1px solid #24262d;
  text-align: center;
  font-size: 13px;
  color: var(--deki-steel);
}

/* ---------- RESPONSIVE ---------- */
/* Product grid rhythm: 4 / 3 / 2 columns (was a straight 4-to-2 jump). */
@media (max-width: 1180px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .deki-tiles__grid { grid-template-columns: repeat(3, 1fr); }
  .deki-trust__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
  .deki-footer__inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .deki-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .deki-tiles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  h1, .deki-hero__title { font-size: 40px; }
  h2 { font-size: 28px; }
  .deki-wrap { padding: 0 16px; }
  .deki-picker { flex-direction: column; align-items: stretch; padding: 20px; gap: 14px; }
  /* Fields inherit `flex: 1 1 200px` from the desktop rule, where 200px is a
     WIDTH basis in a row layout. In this column layout the same value
     becomes a MIN-HEIGHT basis instead, stretching each label+select pair
     to 200px tall and opening a large gap below short content. Reset the
     basis so each field's height simply hugs its content. */
  .deki-picker__field { flex: 0 0 auto; }
  .deki-picker__submit { width: 100%; }
  .deki-hero { padding: 48px 0 40px; }
  .deki-row, .deki-tiles, .deki-trust, .deki-brands, .deki-about { padding: 40px 0; }
  .deki-tiles__grid { gap: 10px; }
  .deki-trust__grid { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .deki-trust__item { padding-top: 0; border-top: 0; border-left: 2px solid var(--deki-accent); padding-left: 14px; }
  .deki-brands__row { gap: 20px; font-size: 12px; }
  .deki-spec-label { min-width: 100%; }
}
@media (max-width: 360px) {
  .deki-hero__title { font-size: 34px; }
  .woocommerce div.product p.price, .woocommerce div.product span.price { font-size: 22px; }
}

/* ---------- A11Y / MOTION ---------- */
/* Default: light surfaces (cards, product page, picker card, body) —
   full-saturation accent reads clearly against paper/fog. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.woocommerce ul.products li.product a:focus-visible {
  outline: 2px solid var(--deki-accent);
  outline-offset: 2px;
}
/* Dark charcoal surfaces (header incl. mobile drawer, footer,
   scroll-to-top) — swap to the lighter accent-soft so the ring stays
   visible against --deki-ink instead of nearly disappearing into it. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.ast-mobile-popup-drawer a:focus-visible,
.ast-mobile-popup-drawer button:focus-visible,
.deki-footer a:focus-visible,
#ast-scroll-top:focus-visible {
  outline-color: var(--deki-accent-soft);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}