/* ============================================================
   Optikmash — polish layer
   Loaded after optikmash.css (and catalogue.css) by chrome.php while the
   'polish' feature is on. Changes NO layout and NO content: only corners,
   surfaces, shadows and motion. Deleting this file restores the old look.

   Three ideas, used everywhere so it reads as one system:
     1. Rounded corners on three radii.
     2. Frosted glass on things that float over the page: the sticky header,
        dropdowns, the search results, modals.
     3. Small, quick motion: lift on hover, press on click, soft entrances.
   Everything that moves stops under prefers-reduced-motion (bottom).
============================================================ */

:root {
  --pl-r-sm: 8px;
  --pl-r:    14px;
  --pl-r-lg: 20px;
  --pl-ease: cubic-bezier(.2, .8, .2, 1);
  --pl-line: rgba(15, 30, 45, .08);
  --pl-shadow-1: 0 1px 2px rgba(15,30,45,.04), 0 2px 8px rgba(15,30,45,.04);
  --pl-shadow-2: 0 2px 4px rgba(15,30,45,.04), 0 12px 28px -6px rgba(15,30,45,.14);
  --pl-shadow-3: 0 4px 10px rgba(15,30,45,.06), 0 24px 56px -12px rgba(15,30,45,.28);
  --pl-glass-bg: rgba(255, 255, 255, .78);
  --pl-glass-blur: blur(18px) saturate(180%);
  --pl-glass-edge: rgba(255, 255, 255, .6);
  --pl-ring: 0 0 0 3px rgba(2, 117, 178, .22);
}

body { background: #f6f8fa; }
.website-wrapper { background: #f6f8fa; }

::selection { background: rgba(2, 117, 178, .18); }

/* Keyboard focus, everywhere, one look. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--pl-ring);
  border-radius: var(--pl-r-sm);
}

/* ============================================================
   HEADER — frosted glass while it sticks
============================================================ */
.whb-header {
  background: var(--pl-glass-bg);
  -webkit-backdrop-filter: var(--pl-glass-blur);
  backdrop-filter: var(--pl-glass-blur);
  box-shadow: 0 1px 0 var(--pl-line), 0 8px 24px -16px rgba(15,30,45,.25);
}
.whb-header .whb-color-dark:not(.whb-with-bg),
.whb-header .whb-row { background-color: transparent; }
.whb-general-header { border-bottom-color: transparent; }
.whb-top-bar-inner { border-bottom-color: var(--pl-line); }

.om-announcement {
  background: linear-gradient(90deg, #02679d, #0284c7 50%, #02679d);
  background-size: 200% 100%;
  animation: pl-sheen 14s linear infinite;
}
@keyframes pl-sheen { to { background-position: -200% 0; } }

/* Dropdowns: glass, rounded, and they ease in instead of snapping. */
.woodmart-navigation.main-nav .sub-menu {
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: var(--pl-glass-blur);
  backdrop-filter: var(--pl-glass-blur);
  border: 1px solid var(--pl-glass-edge);
  border-top: 1px solid var(--pl-glass-edge);
  border-radius: var(--pl-r);
  box-shadow: var(--pl-shadow-3);
  overflow: hidden;
}
@media (min-width: 1111px) {
  .woodmart-navigation.main-nav .item-level-0:hover .sub-menu { animation: pl-drop .22s var(--pl-ease); }
}
@keyframes pl-drop {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.om-mega-groups { background: rgba(240, 244, 247, .85); }
.om-mega-group { border-radius: 0; }
.om-mega-group:hover, .om-mega-group.active { background: rgba(255,255,255,.75); }
.om-mega-cat { border-radius: var(--pl-r-sm); }

/* Search: one rounded pill with the button inside its curve. */
.om-header-search-group { border-radius: 999px; box-shadow: var(--pl-shadow-1); }
.om-header-search-group .om-header-search {
  border-radius: 999px 0 0 999px;
  background: rgba(240, 243, 246, .9);
  border-right: none;
  padding-left: 16px;
  transition: background .2s, box-shadow .2s;
}
.om-header-search-group .om-header-search:focus-within { background: #fff; box-shadow: inset 0 0 0 1px rgba(2,117,178,.35); }
.om-header-search-group .btn-om { border-radius: 0 999px 999px 0; padding-right: 20px; }
.om-header-search { border-radius: 999px; }
.om-header-search-results {
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: var(--pl-glass-blur);
  backdrop-filter: var(--pl-glass-blur);
  border: 1px solid var(--pl-glass-edge);
  border-radius: var(--pl-r);
  box-shadow: var(--pl-shadow-3);
  animation: pl-drop .2s var(--pl-ease);
}
.om-hs-thumb { border-radius: var(--pl-r-sm); }

/* Mobile search overlay and menus */
.om-search-overlay-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.om-search-bar, .om-search-overlay-inner { border-radius: var(--pl-r); }
.om-search-result-item, .om-search-popular-item, .om-search-cat-chip { border-radius: var(--pl-r-sm); }
.om-lang-menu {
  border-radius: var(--pl-r);
  overflow: hidden;
  box-shadow: var(--pl-shadow-3);
}
.woodmart-navigation.main-nav.nav-open {
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: var(--pl-glass-blur);
  backdrop-filter: var(--pl-glass-blur);
  border-radius: 0 0 var(--pl-r-lg) var(--pl-r-lg);
}
.om-mobile-burger span { border-radius: 2px; }

/* ============================================================
   BUTTONS — rounded, lift on hover, press on click
============================================================ */
.btn-om {
  border-radius: 10px;
  transition: background .2s, color .2s, border-color .2s, transform .18s var(--pl-ease), box-shadow .2s;
}
.btn-om-primary {
  background: linear-gradient(180deg, #0a83c4, #0275B2);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 12px -4px rgba(2,117,178,.55);
}
.btn-om-primary:hover {
  background: linear-gradient(180deg, #0378b8, #02679d);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -6px rgba(2,117,178,.6);
}
.btn-om:hover { transform: translateY(-1px); }
.btn-om:active { transform: translateY(0) scale(.97); transition-duration: .06s; }
.om-header-search-group .btn-om:hover,
.om-header-search-group .btn-om:active { transform: none; }

/* ============================================================
   HERO — soft drifting colour behind a glass category rail
============================================================ */
.om-hero { border-bottom-color: var(--pl-line); }
.om-hero-bg::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(closest-side at 70% 40%, rgba(2,117,178,.10), transparent),
    radial-gradient(closest-side at 30% 75%, rgba(120,170,210,.10), transparent),
    radial-gradient(closest-side at 85% 85%, rgba(46,125,79,.05), transparent);
  animation: pl-drift 24s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes pl-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
.om-hero-cats {
  background: rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,.7);
  box-shadow: 1px 0 0 var(--pl-line);
  padding: 6px;
  gap: 2px;
}
.om-cat-item {
  border-bottom: none;
  border-left: none;
  border-radius: 10px;
  position: relative;
  transition: background .25s var(--pl-ease), color .25s, transform .25s var(--pl-ease), box-shadow .25s;
}
.om-cat-item::before {
  content: '';
  position: absolute;
  left: 4px; top: 50%;
  width: 3px; height: 0;
  border-radius: 3px;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height .25s var(--pl-ease);
}
.om-cat-item:hover, .om-cat-item.active {
  background: rgba(255, 255, 255, .85);
  box-shadow: var(--pl-shadow-1);
}
.om-cat-item.active::before { height: 18px; }
.om-cat-item:hover { transform: translateX(2px); }
.om-cat-item .om-cat-count { border-radius: 999px; }


/* "More in …" rail under the hero */
.om-hero-more-track { padding: 6px 4px 14px; }
.om-mini {
  border-radius: var(--pl-r);
  border-color: var(--pl-line);
  box-shadow: var(--pl-shadow-1);
  transition: border-color .2s, box-shadow .25s, transform .25s var(--pl-ease);
}
.om-mini:hover {
  transform: translateY(-3px);
  border-color: rgba(2,117,178,.35);
  box-shadow: var(--pl-shadow-2);
}
.om-mini-media img { transition: transform .4s var(--pl-ease); }
.om-mini:hover .om-mini-media img { transform: scale(1.05); }
.om-mini-name { border-top-color: var(--pl-line); }
.om-hero-more-btn {
  width: 30px; height: 30px;
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--pl-shadow-1);
  transition: border-color .15s, color .15s, opacity .15s, transform .15s var(--pl-ease);
}
.om-hero-more-btn:hover:not(:disabled) { transform: scale(1.08); }
.om-hero-more-all { transition: gap .2s; }

/* USP strip */
.om-usp-icon { border-radius: 12px; }

/* ============================================================
   CARDS — one shape for every card on the site
============================================================ */
.om-product-card,
.om-cat-card,
.om-review-card,
.om-mfr-card,
.om-contact-form-card,
.om-compat-card,
.om-kbp-card,
.om-um-gradecard {
  border-radius: var(--pl-r);
  border-color: var(--pl-line);
  box-shadow: var(--pl-shadow-1);
}

.om-product-card {
  transition: border-color .25s, box-shadow .3s var(--pl-ease), transform .3s var(--pl-ease);
}
.om-product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(2,117,178,.3);
  box-shadow: var(--pl-shadow-2);
}
/* The card cannot clip (the Verified mark hangs off its corner), so the photo
   area takes the card's top corners itself. */
.om-product-image {
  border-radius: calc(var(--pl-r) - 1px) calc(var(--pl-r) - 1px) 0 0;
  background: linear-gradient(180deg, #f7f8fa, #eef1f4);
}
.om-card-edit { border-radius: 999px; }

.om-cat-card { transition: border-color .25s, transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease); }
.om-cat-card:hover { border-color: rgba(2,117,178,.3); box-shadow: var(--pl-shadow-2); }
.om-cat-icon { border-radius: 12px; }

.om-review-card {
  border-top: 1px solid var(--pl-line);
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease);
}
.om-review-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #5bb4e5);
}
.om-review-card:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow-2); }
.om-reviews-arrow {
  background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .2s, box-shadow .2s, transform .2s var(--pl-ease);
}
.om-reviews-arrow:hover { transform: scale(1.06); }

.om-mfr-card { transition: border-color .2s, box-shadow .3s var(--pl-ease), transform .3s var(--pl-ease); }
.om-mfr-card:hover { border-color: rgba(2,117,178,.3); box-shadow: var(--pl-shadow-2); transform: translateY(-3px); }

/* ============================================================
   SHOP — sidebar, toolbar, filters
============================================================ */
.om-sidebar {
  border-radius: var(--pl-r);
}
.om-filter-list a { border-radius: var(--pl-r-sm); transition: color .2s, padding-left .2s var(--pl-ease); }
.om-filter-list a:hover { padding-left: 4px; }
.om-filter-count, .om-filter-badge { border-radius: 999px; }
.om-filter-toggle, .om-shop-sort select { border-radius: 10px; }
.om-filter-overlay {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ============================================================
   FORMS
============================================================ */
.om-form-control,
.om-inquiry-modal-field input,
.om-inquiry-modal-field textarea {
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.om-form-control:focus,
.om-inquiry-modal-field input:focus,
.om-inquiry-modal-field textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--pl-ring);
}
.om-form-notice, .om-form-success, .om-inquiry-modal-msg { border-radius: 10px; }

/* ============================================================
   MODALS & LIGHTBOX — blurred backdrop, soft entrance
============================================================ */
.om-inquiry-modal {
  background: rgba(10, 20, 30, .38);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  animation: pl-fade .2s ease;
}
.om-inquiry-modal-box {
  border-radius: var(--pl-r-lg);
  box-shadow: var(--pl-shadow-3);
  animation: pl-pop .32s var(--pl-ease);
}
.om-inquiry-modal-close { border-radius: 50%; transition: background .2s, transform .2s var(--pl-ease); }
.om-inquiry-modal-close:hover { transform: rotate(90deg); }
.om-inquiry-modal-product { border-radius: 12px; }
@keyframes pl-fade { from { opacity: 0; } }
@keyframes pl-pop  { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.om-lightbox {
  background: rgba(8, 12, 18, .82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: pl-fade .2s ease;
}
.om-lightbox-img { border-radius: 12px; }

/* ============================================================
   PRODUCT PAGE
============================================================ */
.om-gallery-main { border-radius: var(--pl-r-lg); overflow: hidden; }
.om-gallery-thumb {
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, transform .2s var(--pl-ease), box-shadow .2s;
}
.om-gallery-thumb:hover { transform: translateY(-2px); box-shadow: var(--pl-shadow-1); }
.om-gallery-arrow {
  background: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: opacity .2s, background .2s, transform .2s var(--pl-ease), box-shadow .2s;
}
.om-gallery-arrow:hover { transform: scale(1.06); }
.om-gallery-dot { transition: width .25s var(--pl-ease), background .2s; }
.om-inquiry-merged { border-radius: var(--pl-r); }

.om-product-price-box {
  border-radius: var(--pl-r);
  background: linear-gradient(180deg, #fff, #f8fafb);
  border-color: var(--pl-line);
  box-shadow: var(--pl-shadow-1);
}
.om-specs-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--pl-line);
  border-radius: var(--pl-r);
  overflow: hidden;
}
.om-specs-table tr:last-child th, .om-specs-table tr:last-child td { border-bottom: none; }
.om-specs-table tr { transition: background .2s; }
.om-tab-btn { transition: color .2s, border-color .25s var(--pl-ease); }
/* Boxes that carry a left accent bar: keep the bar, round the box. */
.om-um-buy, .om-um-gradecard, .om-kb-answer, #om-unit-mode-notice, .om-kb-qa-a, .om-notice {
  border-radius: 12px;
}
.om-verified-pop { border-radius: var(--pl-r); }

.om-photo-btn {
  border-radius: 12px;
  overflow: hidden;
  transition: transform .3s var(--pl-ease), box-shadow .3s var(--pl-ease);
}
.om-photo-btn:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow-2); }
.om-photo-btn img { transition: transform .5s var(--pl-ease); }
.om-photo-btn:hover img { transform: scale(1.04); }
.om-contact-detail-icon { border-radius: 10px; }

/* ============================================================
   FOOTER
============================================================ */
.om-footer {
  border-top: none;
  background:
    radial-gradient(ellipse 60% 120% at 85% 0%, rgba(2,117,178,.14), transparent 60%),
    var(--dark2);
}
.om-social-btn,
.om-footer-social a {
  border-radius: 50%;
  transition: background .2s, transform .2s var(--pl-ease);
}
.om-social-btn:hover,
.om-footer-social a:hover { transform: translateY(-2px); }
.om-footer-links a { transition: color .2s, padding-left .2s var(--pl-ease); }
.om-footer-links a:hover { padding-left: 3px; }

/* ============================================================
   SMALL THINGS
============================================================ */
.om-skel-bar, .om-skel-bar-dark { border-radius: 6px; }
.om-cta-banner { border-radius: 0; }
.om-topbar-status { transition: color .2s; }

/* ============================================================
   FLOATING WHATSAPP BUTTON — liquid glass (js/layout.js mounts it)
   A clear, green-tinted lens: heavy blur and saturation pull colour from
   whatever is behind it, a bright rim and a specular highlight on top give
   it thickness, and a coloured shadow underneath lifts it off the page.
============================================================ */
.om-wa-fab {
  position: fixed;
  right: max(22px, calc(env(safe-area-inset-right, 0px) + 12px));
  bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  z-index: 8500;
  display: inline-flex;
  align-items: center;
  height: 60px;
  min-width: 60px;
  padding: 0 16px;
  border-radius: 999px;
  color: #12a150;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,.16) 100%),
    rgba(37, 211, 102, .16);
  -webkit-backdrop-filter: blur(16px) saturate(220%) brightness(1.06);
  backdrop-filter: blur(16px) saturate(220%) brightness(1.06);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .95),
    inset 0 -10px 18px -10px rgba(18, 140, 74, .45),
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    0 12px 30px -10px rgba(18, 140, 74, .55),
    0 3px 8px rgba(15, 30, 45, .10);
  transition: transform .35s var(--pl-ease), box-shadow .35s var(--pl-ease), color .2s;
  animation: pl-fab-in .7s var(--pl-ease) .6s backwards;
}
/* Specular highlight: the light catching the top of the lens. */
.om-wa-fab::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 10%; right: 10%; top: 2px;
  height: 46%;
  border-radius: 999px 999px 60% 60% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  opacity: .75;
  pointer-events: none;
}
/* A sheen that sweeps across on hover. */
.om-wa-fab::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20%; bottom: -20%;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg) translateX(0);
  transition: transform .8s var(--pl-ease);
  pointer-events: none;
}
.om-wa-fab svg { flex-shrink: 0; filter: drop-shadow(0 1px 1px rgba(255,255,255,.6)); }
.om-wa-fab-label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  font-family: 'Hind', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #0e7a3c;
  transition: max-width .45s var(--pl-ease), opacity .3s, margin-left .45s var(--pl-ease);
}
.om-wa-fab:hover, .om-wa-fab:focus-visible {
  color: #0e8f45;
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .98),
    inset 0 -10px 18px -10px rgba(18, 140, 74, .5),
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 18px 40px -12px rgba(18, 140, 74, .65),
    0 4px 10px rgba(15, 30, 45, .12);
  border-radius: 999px;
}
.om-wa-fab:hover::after { transform: skewX(-18deg) translateX(520%); }
.om-wa-fab:active { transform: translateY(-1px) scale(.97); transition-duration: .08s; }
@media (hover: hover) and (min-width: 768px) {
  .om-wa-fab:hover .om-wa-fab-label,
  .om-wa-fab:focus-visible .om-wa-fab-label { max-width: 220px; opacity: 1; margin-left: 10px; }
}
@media (max-width: 767px) {
  .om-wa-fab { height: 56px; min-width: 56px; padding: 0 14px; right: max(16px, calc(env(safe-area-inset-right, 0px) + 10px)); bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 10px)); }
}
@keyframes pl-fab-in {
  from { opacity: 0; transform: translateY(16px) scale(.8); }
  to   { opacity: 1; transform: none; }
}
/* Clears the admin preview's own bottom-right "restore" pill. */
html[data-om-preview] .om-wa-fab { bottom: 72px; }
@media print { .om-wa-fab { display: none; } }

/* ============================================================
   REDUCED MOTION — keep the shapes, drop the movement
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .om-announcement,
  .om-hero-bg::before,
  .om-header-search-results,
  .om-inquiry-modal,
  .om-inquiry-modal-box,
  .om-lightbox,
  .om-wa-fab,
  .woodmart-navigation.main-nav .item-level-0:hover .sub-menu { animation: none !important; }
  .btn-om:hover, .btn-om:active,
  .om-product-card:hover, .om-mini:hover, .om-cat-item:hover,
  .om-review-card:hover, .om-mfr-card:hover, .om-gallery-thumb:hover,
  .om-hero-more-btn:hover:not(:disabled), .om-reviews-arrow:hover,
  .om-social-btn:hover, .om-footer-social a:hover,
  .om-mini:hover .om-mini-media img,
  .om-photo-btn:hover, .om-photo-btn:hover img,
  .om-inquiry-modal-close:hover,
  .om-wa-fab:hover, .om-wa-fab:active { transform: none !important; }
  .om-wa-fab::after { display: none; }
}