/* Segris.lt 2026 design — scoped under .sg-scope so it never touches the rest of the (bootstrap/PavoThemes) theme. */
.sg-scope{font-family:'Open Sans',Helvetica,Arial,sans-serif;color:#3e3d39;line-height:1.5;-webkit-font-smoothing:antialiased}
.sg-scope *{box-sizing:border-box}
.sg-scope a{color:#1f3326;text-decoration:none}
.sg-scope a:hover{color:#8a6a3d}
/* base theme's opencart-typo-less.css forces h2/h3/h4{text-transform:uppercase;font-size:...} as
   plain element selectors (0,0,0,1) — lower specificity than this .sg-scope rule so font-family/
   weight/margin/line-height already won, but text-transform/color were never declared here before,
   so nothing overrode them and every h2/h3/h4 across the whole site rendered UPPERCASE until this
   fix (confirmed live via the checkout preview page 2026-09-28 — "Jūsų duomenys" showed as
   "JŪSŲ DUOMENYS"). font-size is intentionally left to each specific heading class. */
.sg-scope h1,.sg-scope h2,.sg-scope h3,.sg-scope h4{font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-weight:700 !important;color:#22231f !important;margin:0;line-height:1.2 !important;text-transform:none !important}
.sg-scope p{margin:0}
.sg-scope ul{margin:0;padding:0;list-style:none}
.sg-scope button,.sg-scope input,.sg-scope select,.sg-scope textarea{font-family:inherit;font-size:14px;color:#22231f}
.sg-mont{font-family:Montserrat,Helvetica,Arial,sans-serif}
.sg-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.sg-eyebrow{font-family:Montserrat,sans-serif;font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a6a3d}
.sg-muted{color:#6b6860}
.sg-btn{position:static !important;top:auto !important;right:auto !important;bottom:auto !important;left:auto !important;width:auto !important;max-width:none !important;min-width:0 !important;float:none !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;height:48px !important;padding:0 26px !important;border-radius:4px !important;font-family:Montserrat,sans-serif !important;font-weight:600 !important;font-size:14px !important;letter-spacing:.02em;border:0 !important;cursor:pointer;white-space:nowrap;text-decoration:none !important;line-height:normal !important;margin:0 !important;box-shadow:none !important;background-image:none !important;transition:background .15s}
.sg-btn-green{background:#1f3326 !important;color:#fff !important}.sg-btn-green:hover{background:#2a4533 !important;color:#fff !important}
.sg-btn-olive{background:#8a6a3d !important;color:#fff !important}.sg-btn-olive:hover{background:#75592f !important;color:#fff !important}
.sg-btn-ghost{background:transparent !important;border:1.5px solid rgba(243,239,224,.6) !important;color:#f3efe0 !important}.sg-btn-ghost:hover{border-color:#f3efe0 !important;color:#fff !important}
.sg-btn-outline{background:#fff !important;border:1.5px solid #1f3326 !important;color:#1f3326 !important}.sg-btn-outline:hover{background:#f0ede4 !important;color:#1f3326 !important}
.sg-btn-sm{height:40px !important;padding:0 18px !important;font-size:13px !important}
.sg-ico{width:20px;height:20px;flex:none}
/* !important throughout this block: header.tpl reuses legacy structural ids (#topbar,
   #header-main, #pav-mainnav, #search, #search-small) that PavoThemes/OpenCart already
   style with plain #id selectors (background/position/margin) in the compiled base CSS —
   confirmed live via a rendered preview build 2026-09-28. An ID beats any class combination
   regardless of source order, so without !important these bare-id rules silently win:
   #topbar (gray bg), #header-main (background:none, killing our dark green), #pav-mainnav
   (gray bg + unwanted 20px margin-bottom), #search/#search-small (position:absolute;
   width:315px/230px — this alone was enough to rip the whole search bar out of the header
   layout). Keep the ids (JS in common.js binds '#pav-mainnav [data-toggle=dropdown]' etc.),
   just make sure our visual rules always win on top of them. */
.sg-topbar{background:#16241a !important;color:#d9d3c1 !important;font-size:13px !important;border-bottom:0 !important}
.sg-topbar a{color:#d9d3c1}
.sg-topbar .sg-wrap{display:flex;align-items:center;justify-content:space-between;height:36px;flex-wrap:wrap;gap:6px 20px}
.sg-topbar .sg-tb-left{display:flex;gap:28px;flex-wrap:wrap}
.sg-topbar .sg-tb-right{display:flex;gap:24px;align-items:center}
.sg-hdr{background:#1f3326 !important;color:#f3efe0 !important}
.sg-hdr .sg-wrap{display:flex;align-items:center;gap:40px;min-height:92px;flex-wrap:wrap;padding:14px 20px}
.sg-logo{display:flex;align-items:center;gap:14px;color:#f3efe0;flex:none}
.sg-logo img{width:56px;height:56px;display:block}
.sg-logo .sg-name{display:block;font-weight:800;font-size:24px;letter-spacing:.1em;line-height:1;color:#f3efe0 !important}
.sg-logo .sg-tag{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#d4ae74;margin-top:5px}
.sg-search{position:static !important;top:auto !important;right:auto !important;left:auto !important;margin-top:0 !important;display:flex;height:46px;width:auto !important;background:#fff;border-radius:4px;overflow:hidden;flex-grow:1;max-width:560px}
.sg-search input{position:static !important;top:auto !important;right:auto !important;left:auto !important;transition:none !important;flex-grow:1;width:auto !important;height:auto !important;border:0;padding:0 18px;font-size:14px;outline:0;color:#22231f !important;background:#fff !important}
.sg-search button,.sg-search .button-search{position:static !important;top:auto !important;right:auto !important;left:auto !important;width:56px !important;height:auto !important;background:#8a6a3d !important;background-image:none !important;border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.sg-hact-row{display:flex;gap:32px;margin-left:auto;flex-wrap:wrap}
.sg-hact{display:flex;align-items:center;gap:10px;color:#f3efe0;font-size:13px;line-height:1.25}
.sg-hact strong{display:block;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px}
.sg-hact-account a.account{display:flex;align-items:center;gap:10px;color:#f3efe0 !important;text-decoration:none !important}
.sg-hact-account .sg-acct-sub{color:#cfc9b8;font-size:12px;line-height:1.4}
.sg-hact-account .sg-acct-sub a{color:#d9b27a !important;text-decoration:underline !important;text-underline-offset:2px}
.sg-hact-account .sg-acct-sub a:hover{color:#f3efe0 !important}
.sg-nav{background:#fff !important;border-bottom:1px solid #e2ddd1 !important;margin-bottom:0 !important}
.sg-nav .sg-wrap{display:flex;align-items:center;justify-content:space-between;min-height:52px;flex-wrap:wrap;padding:0 20px}
.sg-nav-links{display:flex;flex-wrap:wrap;margin-left:-14px}
.sg-nav-links > a,.sg-nav-links > li > a{font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:#22231f;min-height:52px;display:inline-flex;align-items:center;padding:0 14px;border-bottom:3px solid transparent}
.sg-nav-links > a:hover,.sg-nav-links > li > a:hover{color:#1f3326}

/* header.tpl echoes the real, admin-configured mainmenu MODULE (pav-megamenu) raw — its own
   markup (.pav-megamenu > .navbar > ul.navbar-nav.megamenu > li.parent.dropdown > a) never
   passes through our .sg-nav-links fallback at all, so #pav-mainnav's own ID-scoped legacy
   CSS (border-right dividers, yellow #CFCD0F underline, uppercase-but-different font-weight)
   was still winning — confirmed live 2026-09-28. Reskin the real classes directly instead of
   assuming the fallback renders. */
/* .navbar-collapse (the real menu) is nested INSIDE .navbar-header here, not a sibling like
   standard bootstrap markup — hiding the whole header (an earlier attempt) hid the menu
   itself on desktop too. bootstrap.css already hides .navbar-toggle at >=768px and shows it
   below that natively (no override needed there — an earlier unconditional display:none
   !important on it would have also broken the mobile hamburger toggle; removed). */
.sg-nav .navbar-header{float:none !important;width:auto !important}
.sg-nav .navbar-collapse{padding:0 !important;overflow:visible !important;float:none !important;width:auto !important}
.sg-nav ul.nav.navbar-nav.megamenu{display:flex !important;flex-wrap:wrap !important;margin:0 !important;float:none !important}
.sg-nav ul.nav.navbar-nav.megamenu > li{float:none !important}
.sg-nav ul.nav.navbar-nav.megamenu > li > a{
  font-family:Montserrat,sans-serif !important;font-weight:600 !important;font-size:13px !important;
  letter-spacing:.03em;text-transform:uppercase !important;color:#22231f !important;
  min-height:52px !important;height:auto !important;display:inline-flex !important;align-items:center !important;
  padding:0 14px !important;border:0 !important;border-bottom:3px solid transparent !important;background:transparent !important;border-radius:0 !important;
  box-sizing:border-box;transition:border-color .15s,color .15s
}
.sg-nav ul.nav.navbar-nav.megamenu > li > a:before{display:none !important}
.sg-nav ul.nav.navbar-nav.megamenu > li:hover > a,
.sg-nav ul.nav.navbar-nav.megamenu > li.open > a,
.sg-nav ul.nav.navbar-nav.megamenu > li.active > a{color:#1f3326 !important;background:transparent !important;border-bottom-color:#8a6a3d !important}
/* Dropdown: columns sized to their content (stock layout gave each col-sm-3 25% of a fixed
   620px box, wrapping names), no arrow-bitmap bullets, roomy rows. */
.sg-nav .dropdown-menu{width:auto !important;min-width:240px !important;padding:18px 22px !important;border:1px solid #e2ddd1 !important;border-top:0 !important;border-radius:0 0 6px 6px !important;box-shadow:0 14px 30px rgba(31,51,38,.12) !important;margin-top:0 !important;background:#fff !important}
.sg-nav .dropdown-menu .dropdown-menu-inner > .row{display:flex !important;gap:36px;margin:0 !important}
/* Bootstrap's .row clearfix ::before/::after become flex items and add a leading gap. */
.sg-nav .dropdown-menu .dropdown-menu-inner > .row:before,.sg-nav .dropdown-menu .dropdown-menu-inner > .row:after{display:none !important}
.sg-nav .dropdown-menu .mega-col{float:none !important;width:auto !important;min-width:170px;padding:0 !important}
.sg-nav .dropdown-menu .mega-col-inner,.sg-nav .dropdown-menu .dropdown-menu-inner{padding:0 !important;margin:0 !important}
.sg-nav .dropdown-menu ul{list-style:none !important;margin:0 !important;padding:0 !important}
.sg-nav .dropdown-menu li{background:none !important;padding:0 !important;border:0 !important}
.sg-nav .dropdown-menu a{display:block !important;padding:7px 0 !important;background-image:none !important;color:#3e3d39 !important;white-space:nowrap}
.sg-nav .dropdown-menu .menu-title{font-family:'Open Sans',Helvetica,Arial,sans-serif !important;font-weight:600 !important;font-size:14px !important;color:inherit !important;text-transform:none !important}
.sg-nav .dropdown-menu a:hover{color:#8a6a3d !important;background:transparent !important}
.sg-nav .dropdown-toggle .caret{border-top-color:#6b6860 !important}
.sg-sec{padding:56px 0 0}
.sg-sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:16px;flex-wrap:wrap}
.sg-sec-head h2{font-size:28px;margin-top:8px}
.sg-more-link{font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;color:#8a6a3d;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.sg-grid4{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px}
.sg-grid3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px}
.sg-grid2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:24px}
.sg-card{background:#fff;border:1px solid #e2ddd1;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.sg-card .sg-img{height:230px;display:flex;align-items:center;justify-content:center;padding:18px;background:#fff;border-bottom:1px solid #eeeae1}
.sg-card .sg-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sg-card .sg-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex-grow:1}
.sg-brand{font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b6860}
.sg-pname{font-weight:600;font-size:15px;line-height:1.35;color:#22231f}
.sg-pname:hover{color:#8a6a3d}
.sg-price{font-family:Montserrat,sans-serif;font-weight:700;font-size:19px;color:#22231f;margin-top:4px}
.sg-price.sg-has-special{color:#b9312f}
.sg-price-old{font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;color:#736e62;text-decoration:line-through;margin-right:6px}
.sg-stock{font-size:12px;color:#2e6b3a;display:flex;align-items:center;gap:6px}
.sg-stock.sg-out{color:#8a5a2a}
.sg-dot{width:7px;height:7px;border-radius:50%;background:#2e6b3a;display:inline-block}
.sg-out .sg-dot{background:#c2924f}
.sg-card .sg-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:auto;padding-top:12px;gap:10px}
.sg-badge{position:absolute;top:12px;left:12px;background:#8a6a3d;color:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:3px;z-index:1}
.sg-badge.sg-red{background:#b9312f}
.sg-tile{display:flex;align-items:center;gap:20px;background:#fff;border:1px solid #e2ddd1;border-radius:6px;padding:16px 20px 16px 16px;min-height:150px}
.sg-tile .sg-timg{width:100px;height:100px;flex:none;display:flex;align-items:center;justify-content:center;background:#fff}
.sg-tile .sg-timg img{max-width:100%;max-height:100%;object-fit:contain}
.sg-tile .sg-noimg{width:100px;height:100px;flex:none;display:flex;align-items:center;justify-content:center;background:#eef0e8;border-radius:6px;color:#8a6a3d}
.sg-tile h3{font-size:17px;line-height:1.25}
.sg-tile .sg-cnt{display:block;font-size:13px;color:#6b6860;margin-top:4px}
.sg-tile .sg-more{font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:#8a6a3d;margin-top:10px;display:inline-flex;align-items:center;gap:6px}
.sg-usp-row{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px;min-height:104px;align-items:center;padding:20px 0}
.sg-usp{display:flex;align-items:center;gap:14px}
.sg-usp b{display:block;font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;color:#22231f}
.sg-usp span{font-size:13px;color:#6b6860}
.sg-usp .sg-ic{width:44px;height:44px;border-radius:50%;background:#eef0e8;color:#1f3326;display:flex;align-items:center;justify-content:center;flex:none}
.sg-footer{background:#16241a;color:#cfc9b8;font-size:14px}
.sg-footer .sg-footer-contact{line-height:1.7;color:#cfc9b8}
.sg-footer .sg-footer-contact p{margin:0}
.sg-footer h4{color:#f3efe0 !important;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
.sg-footer a{color:#cfc9b8}.sg-footer a:hover{color:#fff}
.sg-footer li{margin-bottom:9px}
.sg-crumbs{font-size:13px;color:#6b6860;display:flex;align-items:center;gap:8px;padding:18px 0;flex-wrap:wrap}
.sg-crumbs a{color:#6b6860}
.sg-crumbs b{color:#22231f;font-weight:600}
@media (max-width:1100px){
  .sg-grid4{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sg-grid3{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sg-grid2{grid-template-columns:1fr}
  .sg-usp-row{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .sg-hero h1{font-size:38px!important}
}
@media (max-width:640px){
  .sg-grid4,.sg-grid3{grid-template-columns:1fr}
  .sg-usp-row{grid-template-columns:1fr}
  .sg-topbar{display:none !important}
  .sg-logo .sg-tag{display:none}
  .sg-logo img{width:40px;height:40px}
  .sg-hdr .sg-wrap{gap:12px;min-height:0 !important;padding:10px 16px}
  .sg-hact-row{gap:16px}
  .sg-acct-sub{display:none}
  .sg-scope .sg-hact-cart #cart-total{padding:0 !important;font-size:12px !important;white-space:normal !important;line-height:1.3 !important;max-width:118px;display:inline-block}
  .sg-search{max-width:none;order:3;flex:1 1 100%}
  .sg-hero{min-height:0!important}
  .sg-hero-img{display:none}
  .sg-hero h1{font-size:30px!important}
}


/* --- from new_css_category.css --- */
/* Restored the original common/breadcrumb.tpl require() verbatim (see notes) instead of
   inlining a custom nav, so id="breadcrumb" and every crumb (including the current page)
   stay clickable <a> tags exactly as in the original. This CSS restyles that unmodified
   bootstrap ol.breadcrumb markup to match the mockup's crumb trail, scoped under .sg-scope
   so pages that haven't been converted yet (and still render breadcrumb.tpl outside
   .sg-scope) are unaffected. */
.sg-scope #breadcrumb{padding:18px 0}
.sg-scope #breadcrumb ol.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;margin:0;padding:0;background:transparent;list-style:none;font-size:13px;color:#6b6860}
.sg-scope #breadcrumb ol.breadcrumb > li{display:inline-flex;align-items:center;padding:0}
.sg-scope #breadcrumb ol.breadcrumb > li + li{margin-left:10px}
.sg-scope #breadcrumb ol.breadcrumb > li + li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-right:1.8px solid #9a9587;border-bottom:1.8px solid #9a9587;transform:rotate(-45deg)}
.sg-scope #breadcrumb ol.breadcrumb > li + li::before{padding:0}
.sg-scope #breadcrumb ol.breadcrumb > li > a{color:#6b6860}
.sg-scope #breadcrumb ol.breadcrumb > li > a:hover{color:#8a6a3d}
.sg-scope #breadcrumb ol.breadcrumb > li:last-child > a{color:#22231f;font-weight:600}

/* --- from new_css_product.css --- */
/* ===== product.tpl / review.tpl — single product page ===== */

/* generic panel base (used for gallery main image + price box) */
.sg-scope .sg-panel{background:#fff;border:1px solid #e2ddd1;border-radius:6px}

/* --- gallery --- */
.sg-scope .image.sg-gallery-main{display:flex;align-items:center;justify-content:center;height:460px;padding:32px;position:relative}
.sg-scope .image.sg-gallery-main img{max-width:100%;max-height:100%;object-fit:contain}
.sg-scope #image-additional{margin-top:14px}
.sg-scope #image-additional .item{display:none;gap:12px;flex-wrap:nowrap;justify-content:center}
/* only the current slide (and the ones animating in/out) — showing every .item stacked all 15 thumbs */
.sg-scope #image-additional .item.active,.sg-scope #image-additional .item.next,.sg-scope #image-additional .item.prev{display:flex}
.sg-scope #image-additional a.colorbox{box-sizing:border-box;flex:none;display:flex;align-items:center;justify-content:center;width:84px;height:84px;padding:8px;border:1px solid #e2ddd1;border-radius:6px;background:#fff;overflow:hidden}
.sg-scope #image-additional a.colorbox img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sg-scope #image-additional .carousel-control{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #e2ddd1;display:flex;align-items:center;justify-content:center;color:#1f3326;cursor:pointer}

/* --- info column --- */
.sg-scope .sg-info-col{padding-top:8px}
.sg-scope .sg-info-col h1{font-size:32px !important;line-height:1.2 !important;margin-bottom:2px;margin-top:0 !important;font-weight:700 !important}
.sg-scope .sg-meta-row{font-size:13px;color:#6b6860;display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:10px 0}
.sg-scope .sg-meta-row b{color:#22231f;font-weight:600}
.sg-scope .sg-meta-row a{color:inherit}
.sg-scope .sg-meta-row .sg-stock{font-size:13px}
.sg-scope .share{margin:6px 0 4px}
.sg-scope .share .addthis_default_style{font-size:12px}

/* --- price / buy panel --- */
.sg-scope .price.sg-price-row-wrap{padding:22px 26px;display:flex;flex-direction:column;gap:8px;margin:14px 0}
.sg-scope .sg-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sg-scope .sg-price-big{font-family:Montserrat,sans-serif;font-weight:800;font-size:30px;color:#22231f}
.sg-scope .sg-price-big.sg-has-special{color:#b9312f}
.sg-scope .sg-price-old-big{font-family:Montserrat,sans-serif;font-weight:600;font-size:16px;color:#736e62;text-decoration:line-through}

.sg-scope .product-extra.sg-buy-controls{display:flex;flex-direction:column;gap:14px;margin:0 0 18px}
.sg-scope .quantity-adder.sg-qty{display:flex;align-items:center;gap:10px;font-size:13px;color:#6b6860}
.sg-scope .quantity-adder.sg-qty input.form-control{width:56px;height:40px;text-align:center;border:1px solid #cfc9bb;border-radius:4px;background:#fff;font-weight:600}
.sg-scope .quantity-adder.sg-qty .add-action{position:static !important;top:auto !important;left:auto !important;right:auto !important;float:none !important;margin:0 !important;background:#fff !important;width:40px !important;height:40px !important;line-height:normal !important;display:inline-flex;align-items:center;justify-content:center;border:1px solid #cfc9bb;border-radius:4px;cursor:pointer;font-weight:700;font-size:18px;color:#22231f;user-select:none}
.sg-scope .quantity-adder.sg-qty .add-action:hover{border-color:#1f3326}
/* markup order is label, input, +, − : show as "Kiekis: [−] [1] [+]" */
.sg-scope .quantity-adder.sg-qty .add-down{order:1}
.sg-scope .quantity-adder.sg-qty input.form-control{order:2}
.sg-scope .quantity-adder.sg-qty .add-up{order:3}
.sg-scope .product-action.sg-cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sg-scope .product-action.sg-cta-row .cart{display:inline-flex}
.sg-scope .product-action.sg-cta-row .wishlist,
.sg-scope .product-action.sg-cta-row .compare{display:inline-flex}
.sg-scope .product-action.sg-cta-row .wishlist a,
.sg-scope .product-action.sg-cta-row .compare a{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1.5px solid #1f3326;border-radius:4px;color:#1f3326;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;text-decoration:none}
.sg-scope .product-action.sg-cta-row .wishlist a:hover,
.sg-scope .product-action.sg-cta-row .compare a:hover{background:#f0ede4}
.sg-scope .minimum{margin-bottom:10px}

/* --- payment profile + configurable options (share the theme's .option class) --- */
.sg-scope .product-info .option{margin:14px 0}
.sg-scope .product-info .option h2{font-size:14px;margin-bottom:8px}
.sg-scope .product-info .option label{font-size:13px;font-weight:600;color:#22231f;display:inline-block;margin-bottom:6px}
.sg-scope .product-info .option .required{color:#b9312f;margin-right:4px}
.sg-scope .product-info select.form-control,
.sg-scope .product-info input.form-control,
.sg-scope .product-info textarea.form-control{height:44px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;padding:0 12px;font-size:14px;color:#22231f;max-width:360px;width:100%}
.sg-scope .product-info textarea.form-control{height:auto;padding:10px 12px}
.sg-scope .options.sg-options .option{padding:12px 0;border-top:1px solid #eeeae1}
.sg-scope .options.sg-options .option:first-of-type{border-top:0}
.sg-scope .tags{margin-top:16px}
.sg-scope .tags a{color:#8a6a3d}

/* --- tabs --- */
.sg-scope .sg-tabs-group{margin-top:48px}
.sg-scope #tabs{display:flex;gap:4px;border-bottom:1px solid #e2ddd1;flex-wrap:wrap;list-style:none;padding:0}
.sg-scope #tabs a{font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;padding:14px 20px;color:#6b6860;border-bottom:3px solid transparent;margin-bottom:-1px;display:inline-block !important;float:none !important;text-transform:none !important;text-align:left;text-decoration:none}
.sg-scope #tabs a:hover{color:#1f3326}
.sg-scope #tabs a.selected,
.sg-scope #tabs a.active,
.sg-scope #tabs a.ui-tabs-active{color:#1f3326;border-bottom-color:#8a6a3d}
.sg-scope .tab-content{padding:28px 0;font-size:15px;line-height:1.7}
.sg-scope .tab-content{counter-reset:sg-feature}
.sg-scope .tab-content h2{font-size:22px;margin:36px 0 14px;position:relative}
.sg-scope .tab-content h2:first-child{margin-top:0}
/* mockup shows each feature section (every h2 after the intro one) prefixed with an auto
   "01/02/03..." numeral above the heading — pure CSS counter, no content/data change needed,
   so it applies automatically to any real product description with multiple h2 sections. */
.sg-scope .tab-content h2:not(:first-child)::before{counter-increment:sg-feature;content:counter(sg-feature, decimal-leading-zero);display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;color:#8a6a3d;margin-bottom:6px}
.sg-scope .tab-content h3{font-size:17px;margin:26px 0 10px}
.sg-scope .tab-content p{margin:0 0 14px}
/* real product descriptions (OpenCart WYSIWYG content, e.g. Nocpix VISTA H50R) embed bare,
   classless <img>/<table>/<iframe> — style those directly so any existing or future rich
   description renders well without every author having to add sg-spec-table by hand. */
.sg-scope .tab-content img{max-width:100%;height:auto;border-radius:6px;display:block;margin:18px 0}
.sg-scope .tab-content p:has(> img:only-child){margin:0 0 18px}
.sg-scope .tab-content iframe{max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border-radius:6px;margin:18px 0;border:0}
.sg-scope table.sg-spec-table,.sg-scope .tab-content table{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 24px}
.sg-scope table.sg-spec-table thead td,.sg-scope .tab-content table thead td{font-family:Montserrat,sans-serif;font-weight:700;padding:10px 4px;color:#22231f}
.sg-scope table.sg-spec-table tbody td,.sg-scope .tab-content table tbody td{padding:10px 14px;border-bottom:1px solid #eeeae1}
.sg-scope table.sg-spec-table tbody tr:nth-child(odd) td,.sg-scope .tab-content table tbody tr:nth-child(odd) td{background:#faf9f5}
.sg-scope .tab-content table td:first-child{color:#6b6860;width:45%}
.sg-scope .tab-content table td:last-child{font-weight:600;color:#22231f}
/* most real Work Sharp descriptions use bare <ul><li> feature lists — .sg-scope's blanket
   ul{list-style:none} reset (for our own component markup) was stripping their bullets and
   spacing entirely, making them read as one run-on block. Confirmed live 2026-09-28 across
   15 real product pages. */
.sg-scope .tab-content ul{list-style:disc !important;padding-left:22px !important;margin:0 0 16px !important;display:block}
.sg-scope .tab-content ol{list-style:decimal !important;padding-left:22px !important;margin:0 0 16px !important;display:block}
.sg-scope .tab-content li{margin-bottom:6px;display:list-item !important}

/* --- reviews tab (also applies to review.tpl loaded via AJAX into #review) --- */
.sg-scope .sg-review-item{border-bottom:1px solid #e2ddd1;padding:14px 0}
.sg-scope .sg-review-item .author{font-size:13px;color:#6b6860;margin-bottom:6px}
.sg-scope .sg-review-item .rating img{height:14px}
.sg-scope .sg-review-item .text{font-size:14px;line-height:1.6;margin-top:6px}
.sg-scope .form-review{max-width:520px;margin-top:20px;display:flex;flex-direction:column;gap:14px}
.sg-scope .form-review .option{margin:0}
.sg-scope #button-review{margin-top:6px}

/* --- related products (mirrors home.tpl's card technique) --- */
.sg-scope .product-related.sg-related{margin-top:56px}
.sg-scope .box-heading.sg-sec-head{margin-bottom:20px;border:0;padding:0;background:none}
.sg-scope .box-heading.sg-sec-head span{font-family:Montserrat,sans-serif;font-weight:700;font-size:22px;color:#22231f}
.sg-scope .product-related .product-block.sg-card{overflow:visible;margin-bottom:24px}
.sg-scope .product-related .product-block.sg-card .sg-img{position:relative}
.sg-scope .product-related .product-block.sg-card .description.sg-related-desc{display:none}
.sg-scope .product-related .product-block.sg-card h3.name{font-size:0;margin:0}
.sg-scope .product-related .product-block.sg-card h3.name a.sg-pname{font-size:15px}
.sg-scope .product-related .rating img{height:14px;margin-top:2px}
.sg-scope .product-related .product-hover{display:flex;gap:10px;margin-top:8px}
.sg-scope .product-related .product-hover a{font-size:12px;color:#8a6a3d}

/* --- from new_css_cart.css --- */
/* sg-cart — standalone shopping-cart page, extends sg-design.css */
.sg-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sg-cart-h1{font-size:32px !important;line-height:1.2 !important;margin:0 !important}
.sg-panel{background:#fff;border:1px solid #e2ddd1;border-radius:6px}
.sg-panel-h{padding:18px 24px;border-bottom:1px solid #eeeae1}
.sg-panel-h h2{font-size:18px}
.sg-cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;padding:8px 0 60px}
.sg-cart-main{min-width:0}
.sg-cart-panel{overflow:hidden}
.sg-cart-head-row{display:grid;grid-template-columns:84px 1fr 110px 140px 110px 32px;gap:16px;padding:12px 20px;border-bottom:1px solid #eeeae1;font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860}
.sg-cart-row{display:grid;grid-template-columns:84px 1fr 110px 140px 110px 32px;gap:16px;align-items:center;padding:18px 20px;border-bottom:1px solid #eeeae1}
.sg-cart-row:last-child{border-bottom:0}
.sg-cart-img{width:84px;height:84px;border:1px solid #eeeae1;border-radius:4px;display:flex;align-items:center;justify-content:center;padding:6px;background:#fff}
.sg-cart-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sg-cart-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.sg-cart-info .sg-pname{font-weight:600;font-size:14px;line-height:1.35;color:#22231f}
.sg-cart-oos{font-size:12px;color:#b9312f;font-weight:600}
.sg-cart-opts{font-size:12px;color:#6b6860}
.sg-cart-reward{font-size:12px;color:#8a6a3d}
.sg-cart-model{font-size:12px;color:#736e62}
.sg-cart-price{font-size:14px;color:#3e3d39;white-space:nowrap}
.sg-cart-qty{display:flex;align-items:center;gap:6px}
.sg-qty-input{width:56px;height:40px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;padding:0 8px;font-size:14px;text-align:center}
.sg-qty-update{width:32px;height:32px;border:0;background:#f0ede4;border-radius:4px;cursor:pointer;padding:6px}
.sg-cart-total{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:#22231f;text-align:right;white-space:nowrap}
.sg-cart-remove{width:32px;height:32px;border:0;background:transparent;color:#8d8a80;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sg-cart-remove img{width:18px;height:18px;opacity:.6}
.sg-cart-remove:hover img{opacity:1}
.sg-cart-recurring{padding:14px 20px;border-bottom:1px solid #eeeae1;font-size:13px;color:#6b6860;overflow:hidden}
.sg-cart-row-voucher .sg-cart-info{font-size:14px}
.sg-cart-actions{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.sg-cart-next{margin-top:28px}
.sg-cart-next-body{padding:20px 24px}
.sg-cart-next-opts{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px}
.sg-cart-module{border-top:1px solid #eeeae1;padding:20px 24px}
.sg-cart-module-panel{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sg-cart-module-panel .sg-field{display:inline-flex}
.sg-inp{height:44px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;padding:0 14px;font-size:14px;color:#22231f}
.sg-shipping-table{border-collapse:collapse;margin:14px 0}
.sg-shipping-table td{padding:8px 10px;font-size:14px;vertical-align:middle}
.sg-shipping-table select,.sg-shipping-table input:not([type=radio]):not([type=checkbox]){height:42px;border:1px solid #cfc9bb;border-radius:4px;padding:0 12px;background:#fff}
.sg-shipping-table input[type=radio]{width:auto;height:auto}
.sg-shipping-table tr.highlight td{border-bottom:1px solid #f2efe7;padding:10px 10px}
.sg-shipping-table b{font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;color:#22231f}
.sg-cart-side{position:sticky;top:20px}
.sg-summary-panel{padding:26px 28px}
.sg-cart-totals{display:flex;flex-direction:column}
.sg-tot{display:flex;justify-content:space-between;font-size:14px;padding:8px 0}
/* OpenCart's $totals loop always renders sub-total/shipping/tax rows before the grand total
   last — give that final row the mockup's bold/bigger/bordered treatment instead of every
   row looking identical (confirmed via live cart 2026-09-28). */
.sg-tot:last-child{font-family:Montserrat,sans-serif;font-weight:700;font-size:18px;color:#22231f;border-top:1px solid #e2ddd1;margin-top:6px;padding-top:16px}
.sg-cart-checkout-row{margin-top:6px}
@media (max-width:900px){
  .sg-cart-layout{grid-template-columns:1fr}
  .sg-cart-side{position:static}
  .sg-cart-head-row{display:none}
  .sg-cart-row{grid-template-columns:64px 1fr;row-gap:6px}
  .sg-cart-price,.sg-cart-qty,.sg-cart-total{grid-column:2}
  .sg-cart-remove{grid-column:2;justify-self:start}
}

/* --- from new_css_checkout_shell.css --- */
/* Checkout wizard shell (checkout.tpl) — adapted from atsiskaitymas.html mockup's
   .panel/.panel-h/.num/.step visual language to the real 5-6-section AJAX accordion. */
.sg-checkout-wrap{padding:32px 0 72px}
.sg-checkout-steps{display:flex;gap:22px;flex-wrap:wrap;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px}
.sg-step{display:flex;align-items:center;gap:8px;color:#8d8a80}
.sg-step-num{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:#eeeae1;color:#8d8a80}
.sg-step-done{color:#1f3326}
.sg-step-done .sg-step-num{background:#1f3326;color:#fff}
.sg-step-on{color:#1f3326}
.sg-step-on .sg-step-num{background:#8a6a3d;color:#fff}
@media (max-width:640px){ .sg-checkout-steps{gap:10px} .sg-step{font-size:0} .sg-step-num{font-size:12px} }
.sg-checkout-page-title{font-size:30px !important;line-height:1.2 !important;margin:0 0 24px !important}
.sg-checkout-wizard{display:flex;flex-direction:column;gap:20px;counter-reset:sg-checkout-step}
.sg-checkout-panel{background:#fff;border:1px solid #e2ddd1;border-radius:6px;overflow:hidden}

/* .checkout-heading / .checkout-content keep their original class names (the original inline
   JS binds to them via '#id .checkout-heading', '.checkout-heading a',
   '.parent().parent().find(...)', and — only for #payment-address — '.checkout-heading span')
   these rules only add visual styling through the extra sg-checkout-panel-h/-body classes,
   and deliberately never add a new <span> inside .checkout-heading so that selector still
   matches exactly one element. */
.sg-checkout-panel-h{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid #eeeae1;font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;color:#22231f}
.sg-checkout-panel-h::before{counter-increment:sg-checkout-step;content:counter(sg-checkout-step);width:28px;height:28px;border-radius:50%;background:#1f3326;color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
/* the "Modify" <a> is appended by the original inline JS with no class — style it structurally */
.sg-checkout-panel-h a{margin-left:auto;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:#8a6a3d;cursor:pointer;white-space:nowrap;text-decoration:none}
.sg-checkout-panel-h a:hover{color:#75592f}
/* :not(:empty) so the collapsed/not-yet-AJAX-loaded sections don't show a padded empty box */
.sg-checkout-panel-body:not(:empty){padding:24px 28px}

@media (max-width:640px){
  .sg-checkout-page-title{font-size:24px !important;margin-bottom:16px !important}
  .sg-checkout-panel-h{padding:14px 16px;font-size:15px;gap:10px}
  .sg-checkout-panel-h::before{width:24px;height:24px;font-size:12px}
  .sg-checkout-panel-body:not(:empty){padding:16px}
}

/* Order review / confirm step (confirm.tpl) — final order table + totals, styled like the
   mockup's "Jūsų užsakymas" summary card. Table markup kept as-is (name/model/quantity/
   price/total columns, exactly as OpenCart outputs them, no thumbnails since $product has
   no image field here); only descendant selectors added, scoped to .sg-checkout-otable so
   nothing leaks outside this page's .sg-scope. */
.sg-checkout-order-review{background:transparent}
.sg-checkout-otable{width:100%;border-collapse:collapse;font-size:14px}
.sg-checkout-otable thead td{font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860;padding:0 10px 10px 0;border-bottom:1px solid #e2ddd1}
.sg-checkout-otable tbody td{padding:14px 10px 14px 0;border-bottom:1px solid #eeeae1;vertical-align:top;color:#3e3d39}
.sg-checkout-otable tbody tr:last-child td{border-bottom:0}
.sg-checkout-otable td.name a{font-weight:600;color:#22231f}
.sg-checkout-otable td.name a:hover{color:#8a6a3d}
.sg-checkout-otable td.name small{color:#6b6860;font-size:12.5px}
.sg-checkout-otable td.model,.sg-checkout-otable td.quantity{color:#6b6860;white-space:nowrap}
.sg-checkout-otable td.price,.sg-checkout-otable td.total{font-family:Montserrat,sans-serif;font-weight:600;text-align:right;white-space:nowrap}
.sg-checkout-otable tfoot td{padding:9px 10px 9px 0;border:0}
/* last row of the totals tfoot is OpenCart's grand "Total" line — emphasize it like mockup .tot.big */
.sg-checkout-otable tfoot tr:last-child td{font-family:Montserrat,sans-serif;font-weight:700;font-size:19px;color:#22231f;border-top:1px solid #e2ddd1;padding-top:16px}
.sg-checkout-order-payment{padding-top:18px;margin-top:8px;border-top:1px solid #e2ddd1;font-size:14px;line-height:1.7;color:#3e3d39}

@media (max-width:640px){
  .sg-checkout-otable thead{display:none}
  .sg-checkout-otable,.sg-checkout-otable tbody,.sg-checkout-otable tr,.sg-checkout-otable td{display:block;width:100%}
  .sg-checkout-otable tbody tr{padding:12px 0;border-bottom:1px solid #eeeae1}
  .sg-checkout-otable tbody td{border-bottom:0;padding:2px 0}
  .sg-checkout-otable td.price,.sg-checkout-otable td.total{text-align:left}
  .sg-checkout-otable tfoot tr:last-child td{padding-top:12px}
}

/* --- from new_css_checkout_steps.css --- */
/* sg-forms: field/input/choice styling for checkout step panels (login, guest, register, payment_address, shipping_address, shipping_method, payment_method, guest_shipping). Nothing here is defined yet in sg-design.css. */
.sg-form-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px 24px}
.sg-span2{grid-column:span 2}
.sg-field{display:flex;flex-direction:column;gap:6px}
.sg-field label,.sg-flabel{font-size:13px;font-weight:600;color:#22231f}
.sg-req{color:#b9312f;margin-right:2px}
.sg-scope input.sg-inp,.sg-scope select.sg-inp,.sg-scope textarea.sg-inp{height:46px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;padding:0 14px;font-size:14px;color:#22231f;width:100%;outline:0;transition:border-color .15s}
.sg-scope input.sg-inp:focus,.sg-scope select.sg-inp:focus,.sg-scope textarea.sg-inp:focus{border-color:#1f3326}
.sg-scope textarea.sg-inp{height:auto;min-height:100px;padding:12px 14px;line-height:1.5;resize:vertical}
.sg-scope select.sg-inp{appearance:none;-webkit-appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6860' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:38px}
.sg-hint{font-size:12px;color:#6b6860}
.sg-scope input[type=checkbox].sg-cb,.sg-scope input[type=radio].sg-rb{width:19px;height:19px;accent-color:#1f3326;cursor:pointer;flex:none;margin:0}
.sg-chk-row{display:flex;align-items:center;gap:10px;font-size:14px;color:#22231f;cursor:pointer}
.sg-choice-list{display:flex;flex-direction:column;gap:12px}
.sg-choice{display:flex;align-items:center;gap:14px;padding:15px 18px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;cursor:pointer}
.sg-choice:has(input:checked){border-color:#1f3326;border-width:1.5px}
.sg-choice b{font-weight:600;color:#22231f;font-size:14px}
.sg-choice-price{margin-left:auto;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:#22231f;white-space:nowrap}
.sg-panel-sub{display:flex;flex-direction:column;gap:10px}
.sg-checkout-title{font-size:18px;margin-bottom:4px}
.sg-checkout-lead{font-size:14px;color:#6b6860;margin-bottom:14px}
.sg-link-inline{font-size:13px;color:#8a6a3d;font-weight:600;font-family:Montserrat,sans-serif}
.sg-form-actions{display:flex;justify-content:flex-end;margin-top:22px;padding-top:18px;border-top:1px solid #eeeae1}
.sg-scope input[type=button].sg-btn,.sg-scope input[type=submit].sg-btn{appearance:none;-webkit-appearance:none}
.sg-error-box{background:#fbeceb;border:1px solid #e3a6a3;color:#8f2b28;padding:12px 16px;border-radius:4px;font-size:14px}
.sg-scope .wait{margin-left:8px;display:inline-flex;align-items:center}
@media (max-width:640px){
  .sg-form-grid{grid-template-columns:1fr}
  .sg-span2{grid-column:auto}
  .sg-choice{flex-wrap:wrap}
}


/* --- from orig_category_css.css --- */
/* Category / product-listing page + sidebar category-tree module — additions on top of sg-design.css.
   Scoped under .sg-scope (both files wrap their own output in it). */

/* --- sidebar category tree (module/category.tpl) --- */
.sg-side-panel{background:#fff;border:1px solid #e2ddd1;border-radius:6px;padding:22px 24px;margin-bottom:20px}
.sg-side-h{font-family:Montserrat,sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#22231f;margin-bottom:14px}
.sg-side-h span{display:block}
.sg-cat-tree{display:flex;flex-direction:column}
.sg-cat-item{display:flex;align-items:center;flex-wrap:wrap;padding:7px 0;font-size:14px;border-bottom:1px solid #f2efe7}
.sg-cat-item:last-child{border-bottom:0}
.sg-cat-item > a:not(.sg-cat-toggle){flex:1 1 auto;color:#3e3d39}
.sg-cat-item > a.sg-cat-active{color:#1f3326;font-weight:700}
.sg-cat-toggle{flex:none;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#8a6a3d;cursor:pointer}
.sg-cat-toggle svg{transition:transform .15s}
.sg-cat-toggle:not(.collapsed) svg{transform:rotate(90deg)}
.sg-cat-children{flex:1 0 100%;padding-left:16px;display:flex;flex-direction:column}
.sg-cat-child{padding:6px 0;font-size:13px}
.sg-cat-child a{color:#6b6860}
.sg-cat-child a.sg-cat-active{color:#1f3326;font-weight:700}
.sg-cat-count{color:#8d8a80;font-size:12px;margin-left:6px;font-weight:400}

/* (dead first-draft category CSS removed 2026-09-28 audit — .sg-cat-head/-info/-thumb/-desc
   matched no element in the current category.tpl, which uses the v2 markup below) */
.sg-cat-desc img{max-width:100%;height:auto}

/* --- sub-category "refine" chip list --- */
.sg-refine{margin-bottom:28px}
.sg-refine-h{margin-bottom:12px}
.sg-refine-h span{font-size:16px}
.sg-refine-list{display:flex;flex-wrap:wrap;gap:10px}
.sg-refine-col{margin-bottom:10px}
.sg-chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:4px;background:#eef0e8;color:#1f3326;font-size:13px;font-weight:600}
.sg-chip:hover{background:#e2ead9;color:#1f3326}
.sg-chip-count{color:#6b6860;font-weight:400;margin-left:4px}

/* --- sort / limit / compare toolbar --- */
.sg-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:14px 0;border-top:1px solid #e2ddd1;border-bottom:1px solid #e2ddd1;margin-bottom:24px}
.sg-toolbar-right{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sg-field-inline{display:flex;align-items:center;gap:8px;font-size:13px}
.sg-select{height:40px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;padding:0 10px;font-size:13px;min-width:120px}

/* The legacy ".display" grid/list toggle has its innerHTML fully replaced at runtime by the
   page's own inline <script> (kept verbatim — see VERIFICATION notes). We cannot give that
   JS-generated markup sg- classes, so these plain, .sg-scope-scoped rules style the exact
   legacy class names ("display", "list", "grid", "active", "em") the script hard-codes. */
.sg-scope .display{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b6860}
.sg-scope .display span{white-space:nowrap}
.sg-scope .display a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #cfc9bb;border-radius:4px;color:#22231f}
.sg-scope .display a em{font-style:normal;display:none}
.sg-scope .display a.active{background:#1f3326;border-color:#1f3326;color:#fff}

/* --- product card extras beyond home.tpl's .sg-card (description, rating, wishlist/compare) --- */
.sg-pname-wrap{margin:0}
.sg-desc{font-size:13px;color:#6b6860;line-height:1.5}
.sg-rating img{height:16px}
.sg-price-new{color:#b9312f;margin-right:6px}
.sg-hover-actions{display:flex;gap:8px;position:absolute;top:12px;right:12px;z-index:2}
.sg-fav a,.sg-cmp a{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #e2ddd1;display:flex;align-items:center;justify-content:center;color:#1f3326}
.sg-fav a:hover,.sg-cmp a:hover{background:#eef0e8}
.sg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* swap-image and quick-view are off by default in themeConfig; hide their markup since
   no approved visual exists for them yet (see notes) */
.sg-faceback{display:none}
.sg-quickview{display:none}

.sg-empty{padding:40px 0;font-size:15px;color:#6b6860}
.sg-empty-buttons{margin-top:16px}
.sg-pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:36px}
.sg-pagination ul{display:flex;flex-wrap:wrap;gap:8px}
.sg-pagination li{list-style:none}
.sg-pagination a,.sg-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid #cfc9bb;border-radius:4px;font-weight:600;font-size:14px;color:#22231f}
.sg-pagination li.active a,.sg-pagination li.active span,.sg-pagination a.active{background:#1f3326;border-color:#1f3326;color:#fff}

@media (max-width:1100px){
  .sg-cat-info{flex-direction:column}
  .sg-toolbar{flex-direction:column;align-items:flex-start}
}


/* --- from sg-category-v2.css --- */
/* Category page v2 — 1:1 port of segris_mockup/maketas/kategorija.html. Scoped under .sg-scope. */
.sg-scope .sg-cat-titlebar{display:flex;align-items:flex-end;justify-content:space-between;padding:8px 0 28px;border-bottom:1px solid #e2ddd1;margin-bottom:32px}
.sg-scope .sg-cat-h1{font-size:36px !important;line-height:1.2 !important;margin:0 !important}
.sg-scope .sg-cat-h1 span{display:block}
.sg-scope .sg-cat-lead{margin-top:8px;font-size:15px;max-width:720px;line-height:1.6}
.sg-scope .sg-cat-lead p{margin:0 0 6px}

.sg-scope .sg-cat-layout{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;padding-bottom:60px}
.sg-scope .sg-side{min-width:0}
.sg-scope .sg-cat-main{min-width:0}

.sg-scope .sg-side-panel{background:#fff;border:1px solid #e2ddd1;border-radius:6px;padding:22px 24px;margin-bottom:20px}
.sg-scope .sg-side-h{font-family:Montserrat,sans-serif;font-size:16px;font-weight:700;color:#22231f;margin-bottom:14px}
.sg-scope .sg-cat-tree{display:flex;flex-direction:column}
.sg-scope .sg-cat-item{padding:7px 0;font-size:14px;border-bottom:1px solid #f2efe7}
.sg-scope .sg-cat-item:last-child{border-bottom:0}
.sg-scope .sg-cat-item > a{color:#3e3d39;display:block}
.sg-scope .sg-cat-item > a:hover{color:#8a6a3d}
.sg-scope .sg-cat-item > a.sg-cat-active{color:#1f3326;font-weight:700}
.sg-scope .sg-cat-children{padding-left:16px;display:flex;flex-direction:column}
.sg-scope .sg-cat-child{padding:6px 0;font-size:13px}
.sg-scope .sg-cat-child a{color:#6b6860;display:block}
.sg-scope .sg-cat-child a:hover{color:#8a6a3d}
.sg-scope .sg-cat-child a.sg-cat-active{color:#1f3326;font-weight:700}

.sg-scope .sg-cat-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px}
.sg-scope .sg-cat-count{font-size:14px}
.sg-scope .sg-cat-toolbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.sg-scope .sg-toolbar-field{display:flex;align-items:center;gap:8px}
.sg-scope .sg-select{height:40px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;padding:0 10px;font-size:13px;min-width:170px;color:#22231f}
.sg-scope .sg-select-narrow{min-width:70px}

.sg-scope .sg-card{min-height:100%}
.sg-scope .sg-zoom{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #e2ddd1;display:flex;align-items:center;justify-content:center;color:#1f3326;z-index:1}
.sg-scope .sg-zoom:hover{background:#eef0e8}
.sg-scope .sg-hover-actions{display:flex;gap:8px;position:absolute;top:12px;left:12px;z-index:1}
.sg-scope .sg-fav a,.sg-scope .sg-cmp a{width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #e2ddd1;display:flex;align-items:center;justify-content:center;color:#1f3326;cursor:pointer}
.sg-scope .sg-fav a:hover,.sg-scope .sg-cmp a:hover{background:#eef0e8}
.sg-scope .sg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.sg-scope .sg-pagination{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px}
.sg-scope .sg-pagination .links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sg-scope .sg-pagination .links a,.sg-scope .sg-pagination .links b{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 8px;border:1px solid #cfc9bb;border-radius:4px;font-weight:600;font-size:14px;color:#22231f;font-style:normal;text-decoration:none}
.sg-scope .sg-pagination .links b{background:#1f3326;border-color:#1f3326;color:#fff}
.sg-scope .sg-pagination .links a:hover{border-color:#1f3326}
.sg-scope .sg-pagination .results{font-size:13px;color:#6b6860}

.sg-scope .sg-empty{padding:40px 0 8px;font-size:15px;color:#6b6860}
.sg-scope .sg-empty-buttons{margin-bottom:40px}

@media (max-width:1100px){
  .sg-scope .sg-cat-layout{grid-template-columns:1fr}
  .sg-scope .sg-side{order:2}
  /* With offcanvas sidebars on, the sidebar is hidden until its button is tapped — then it
     must open above the products, where the button is, not below them. */
  .offcanvas-siderbars .sg-scope .sg-side{order:0}
}
@media (max-width:640px){
  .sg-scope .sg-cat-h1{font-size:26px !important}
  .sg-scope .sg-cat-toolbar{flex-direction:column;align-items:flex-start}
}

/* small residual gaps found during 1:1 mockup audit */
.sg-scope .sg-gallery-col{padding-right:28px}
.sg-scope .sg-options{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.sg-scope .sg-cart-row-voucher{border-top:1px dashed #e2ddd1}
.sg-scope .sg-inline-form{display:inline-flex;align-items:center;gap:8px}
.sg-scope .sg-hact-account{position:relative}
.sg-scope .sg-hact-cart{position:relative;display:flex !important;align-items:center !important;gap:10px !important}
/* module/cart.tpl's raw output (echoed as $cart) keeps its own legacy markup — #cart,
   .media-body.heading, .icon-cart, #cart-total — confirmed live 2026-09-28: unconstrained
   bootstrap .pull-left/.pull-right floats made the icon/label/total overlap the account
   block next to it. Our own SVG icon (added in header.tpl right before $cart) replaces the
   module's own icon; everything else in its markup is hidden except the real total text. */
.sg-scope .sg-hact-cart #cart{position:static !important;float:none !important;display:flex !important;align-items:center !important}
.sg-scope .sg-hact-cart .media-body.heading{float:none !important;display:flex !important;align-items:center !important;margin:0 !important;z-index:auto !important}
.sg-scope .sg-hact-cart .icon-cart,
.sg-scope .sg-hact-cart .heading > h4{display:none !important}
.sg-scope .sg-hact-cart #cart-total{color:#f3efe0 !important;font-size:13px !important;font-family:Montserrat,sans-serif !important;font-weight:600 !important;line-height:normal !important;white-space:nowrap;background:transparent !important;padding:0 !important}
.sg-scope .sg-hact-cart .content{top:100% !important;margin-top:14px !important;border-top:3px solid #1f3326 !important;border-radius:4px !important;font-size:14px}
.sg-scope .sg-hact-cart .content .heading h4{display:block !important;font-family:Montserrat,sans-serif !important;font-weight:700 !important;text-transform:none !important;background-image:none !important;padding:0 !important;color:#22231f !important;font-size:14px !important}
.sg-scope .sg-hact-cart .content .empty{padding:24px 8px !important}
.sg-scope .sg-hact-cart .checkout .button{border-radius:4px !important}
.sg-scope .sg-hact-cart .checkout .view-cart{background-color:#8a6a3d !important}
.sg-scope .sg-hact-cart .checkout .button.checkout{background-color:#1f3326 !important}
@media (max-width:860px){ .sg-scope .sg-gallery-col{padding-right:0} }

/* Pre-existing SEO-extension auto-injected H2/H3 right after category H1 (not from our template —
   it's inserted by an installed SEO module). Keep it in the DOM for search engines, make it visually
   quiet instead of looking like duplicated/broken heading text. */
.sg-scope .sg-cat-titlebar h2,
.sg-scope .sg-cat-titlebar h3{
  font-family:'Open Sans',Helvetica,Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  text-transform:none !important;
  color:#6b6860 !important;
  margin:2px 0 0 !important;
  line-height:1.4 !important;
}

/* Same SEO-extension injection, confirmed live on product pages too (2026-09-28 audit): it inserts
   a classless <h2>ProductName</h2> as the next sibling right after whichever <h1> it matches (raw
   HTML string injection, not template-aware — matches regardless of the h1's own class). Cover both
   possible injection points (the sr-only h1 and the visible sg-p-h1) with one adjacent-sibling rule. */
.page-product .sg-scope #content h1 + h2,
.page-product .sg-scope #content h1 + h3,
.page-category .sg-scope #content h1 + h2,
.page-category .sg-scope #content h1 + h3{
  font-family:'Open Sans',Helvetica,Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:400 !important;
  text-transform:none !important;
  color:#6b6860 !important;
  margin:2px 0 0 !important;
  line-height:1.4 !important;
}

/* --- phone/tablet main-menu button: common.js opens the offcanvas menu from #pav-mainnav .navbar-toggle;
   the stock icon bars had no colour here, leaving an invisible button on a blank white bar. --- */
@media (max-width:767px){
  .sg-scope .sg-nav .navbar-toggle{display:flex !important;align-items:center;gap:10px;float:none !important;margin:8px 0 !important;padding:9px 14px !important;border:1px solid #cfc9bb !important;border-radius:4px !important;background:#fff !important;flex-direction:row}
  .sg-scope .sg-nav .navbar-toggle .icon-bar{display:block;width:20px;height:2px;margin:0 !important;background:#1f3326 !important;border-radius:1px;box-shadow:0 -6px 0 #1f3326,0 6px 0 #1f3326}
  .sg-scope .sg-nav .navbar-toggle .icon-bar + .icon-bar{display:none}
  .sg-scope .sg-nav .navbar-toggle::after{content:"Meniu";font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#1f3326}
}

/* --- phone offcanvas main menu: common.js clones the megamenu into <nav id="menu-offcanvas"> on
   <body> (outside .sg-scope), so it's styled by id. Replaces the old lime/white stock look. --- */
#menu-offcanvas,#menu-offcanvas .menu-offcanvas-inner{background:#16241a !important}
#menu-offcanvas .menu-offcanvas-inner{min-height:100%;padding:12px 0 24px}
#menu-offcanvas .menu-offcanvas-content{margin:0;padding:0;list-style:none}
#menu-offcanvas .menu-offcanvas-content > li{display:block;float:none;background:transparent !important;border:0 !important;border-bottom:1px solid rgba(243,239,224,.1) !important}
#menu-offcanvas .menu-offcanvas-content > li > a{display:flex !important;align-items:center;justify-content:space-between;padding:15px 20px !important;background:transparent !important;color:#f3efe0 !important;font-family:Montserrat,sans-serif !important;font-weight:600 !important;font-size:14px !important;letter-spacing:.02em;text-transform:none !important;border:0 !important}
#menu-offcanvas .caret{border-top-color:#d4ae74 !important}
#menu-offcanvas .dropdown-menu{position:static !important;display:block !important;float:none !important;width:auto !important;min-width:0 !important;margin:0 !important;padding:0 0 10px !important;background:transparent !important;border:0 !important;box-shadow:none !important}
#menu-offcanvas .dropdown-menu .row{margin:0 !important}
#menu-offcanvas .dropdown-menu .mega-col{float:none !important;width:auto !important;padding:0 !important}
#menu-offcanvas .dropdown-menu ul{margin:0;padding:0;list-style:none}
#menu-offcanvas .dropdown-menu li{background:transparent !important;border:0 !important}
#menu-offcanvas .dropdown-menu a{display:block;padding:8px 20px 8px 34px !important;background:transparent !important;color:#cfc9b8 !important;font-family:'Open Sans',Helvetica,Arial,sans-serif !important;font-size:14px !important;font-weight:400 !important;text-transform:none !important}
#menu-offcanvas .dropdown-menu a:hover,#menu-offcanvas .menu-offcanvas-content > li > a:hover{color:#fff !important}

/* --- phone-only "open sidebar" buttons (theme's offcanvas sidebars, enabled in themecontrol) --- */
.sg-oc-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 4px !important;overflow:visible !important}
/* common.js shows/hides these with jQuery .show()/.hide() (inline display); .sg-btn's
   display:inline-flex !important would otherwise override the hide. */
.sg-oc-buttons .sg-btn[style*="none"]{display:none !important}
.sg-oc-buttons .sg-btn{flex:1 1 auto}
.offcanvas-siderbars.column-left-active [data-for="column-left"],
.offcanvas-siderbars.column-right-active [data-for="column-right"]{background:#1f3326 !important;color:#fff !important}

/* --- footer_top position: manufacturer logo carousel (all pages) + home SEO text --- */
.sg-scope .sg-footer-top{padding:48px 20px 40px}
.sg-scope .sg-footer-top > .row{margin:0}
.sg-scope .sg-footer-top > .row > div{width:100%;float:none;padding:0}
.sg-scope .sg-footer-top .pavcarousel{position:relative;background:#fff;border:1px solid #e2ddd1;border-radius:6px;padding:14px 64px;margin-bottom:28px}
.sg-scope .sg-footer-top .pavcarousel .carousel-inner > .item{margin:0}
.sg-scope .sg-footer-top .pavcarousel .item-inner{display:flex;align-items:center;justify-content:center;height:84px;padding:6px 10px}
.sg-scope .sg-footer-top .pavcarousel img{max-height:64px;max-width:100%;width:auto;height:auto;filter:grayscale(1);opacity:.7;transition:filter .2s,opacity .2s}
.sg-scope .sg-footer-top .pavcarousel a:hover img{filter:none;opacity:1}
.sg-scope .sg-footer-top .pavcarousel .carousel-control{position:absolute;top:50%;margin-top:-18px;width:36px;height:36px;border:1px solid #e2ddd1;border-radius:50%;background:#fff !important;background-image:none !important;opacity:1;color:#1f3326;text-shadow:none;font-size:20px;line-height:34px;text-align:center;bottom:auto}
.sg-scope .sg-footer-top .pavcarousel .carousel-control:hover{border-color:#1f3326}
.sg-scope .sg-footer-top .pavcarousel .carousel-control.left{left:14px;right:auto}
.sg-scope .sg-footer-top .pavcarousel .carousel-control.right{right:14px;left:auto}
.sg-scope .sg-footer-top .pav-custom{max-width:900px;margin:0 auto;background:transparent;border:0;padding:0}
.sg-scope .sg-footer-top .pav-custom .box-content{background:transparent;padding:0}
/* SEO copy pasted from Word carries inline Arial 10pt + justify; bring it into the site's type. */
.sg-scope .sg-footer-top .pav-custom p,.sg-scope .sg-footer-top .pav-custom span,.sg-scope .sg-footer-top .pav-custom strong{font-family:'Open Sans',Helvetica,Arial,sans-serif !important;font-size:14px !important;line-height:1.75 !important;text-align:left !important;color:#4a4943}
.sg-scope .sg-footer-top .pav-custom strong{color:#22231f}
.sg-scope .sg-footer-top .pav-custom p{margin:0 0 12px !important}

/* --- category SEO text, shown under the product grid --- */
.sg-scope .sg-cat-seo{margin-top:48px;padding-top:32px;border-top:1px solid #e2ddd1;font-size:14px;line-height:1.75;color:#4a4943;max-width:820px}
.sg-scope .sg-cat-seo p{margin:0 0 14px}
.sg-scope .sg-cat-seo h2,.sg-scope .sg-cat-seo h3{font-size:18px !important;margin:22px 0 10px}
.sg-scope .sg-cat-seo strong{color:#22231f}

/* Headings on dark backgrounds: the base .sg-scope h1-h4 rule sets color with !important,
   which beats a plain inline style — this class must carry !important too. */
.sg-scope .sg-on-dark{color:#f3efe0 !important}
/* gold eyebrow text needs a lighter gold on dark green / darker gold on sand for >=4.5:1 */
.sg-scope .sg-hero .sg-eyebrow,.sg-scope .sg-promo-dark .sg-eyebrow{color:#d4ae74 !important}
.sg-scope .sg-promo-sand .sg-eyebrow{color:#6e532c !important}

.sg-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
@media (max-width:900px){ .sg-footer-grid{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:480px){ .sg-footer-grid{grid-template-columns:1fr} }

/* --- home promo banners + about block --- */
.sg-scope .sg-promo{border-radius:6px;padding:40px 44px;display:flex;align-items:center;gap:32px;min-height:300px}
.sg-scope .sg-promo-dark{background:#1f3326}
.sg-scope .sg-promo-sand{background:#e9e4d6}
.sg-scope .sg-promo-body{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.sg-scope .sg-promo-img{width:200px;height:200px;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:14px;flex:none}
.sg-scope .sg-promo-img img{max-width:100%;max-height:100%;object-fit:contain}
.sg-scope .sg-about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
@media (max-width:640px){
  .sg-scope .sg-promo{flex-direction:column;align-items:stretch;padding:28px 22px;gap:20px;min-height:0}
  .sg-scope .sg-promo-img{width:100%;height:180px}
  .sg-scope .sg-about-grid{grid-template-columns:1fr;gap:24px}
}

/* --- generic content-page skin --- */
/* Covers every plain "utility" page (account/*, information/*, success, 404, search,
   manufacturer, compare) that shares the same #content/.sg-wrap skeleton as category.tpl
   but has no bespoke layout of its own. One shared skin instead of per-page CSS. */
.sg-scope .sg-page-wrap{padding:32px 0 60px}
.sg-scope .sg-page-h1{font-size:32px !important;line-height:1.2 !important;margin:0 0 22px !important}
.sg-scope .sg-page-lead{font-size:15px;color:#6b6860;line-height:1.6;margin:-8px 0 24px}
.sg-scope .sg-page-body{font-size:14px;line-height:1.7}
.sg-scope .sg-page-body p{margin:0 0 14px}
.sg-scope .sg-page-body ul,.sg-scope .sg-page-body ol{margin:0 0 14px;padding-left:22px}

.sg-scope .breadcrumb{background:transparent !important;padding:14px 0 !important;margin:0 !important;border-bottom:1px solid #eeeae1;border-radius:0 !important;font-size:13px;list-style:none;display:flex;flex-wrap:wrap;gap:0}
.sg-scope .breadcrumb>li{display:inline-block}
.sg-scope .breadcrumb a{color:#6b6860 !important}
.sg-scope .breadcrumb>li:last-child a{color:#22231f !important;font-weight:600}
.sg-scope .breadcrumb>li+li{margin-left:10px}
.sg-scope .breadcrumb>li+li:before{content:"" !important;display:inline-block;width:6px;height:6px;padding:0;margin:0 10px 0 0;border-right:1.8px solid #9a9587;border-bottom:1.8px solid #9a9587;transform:rotate(-45deg)}

.sg-scope .sg-success-box{background:#eef5ea;border:1px solid #b9d9a8;color:#1f3326;padding:14px 18px;border-radius:4px;font-size:14px;margin-bottom:20px}
.sg-scope div.success{background:#eef5ea !important;border:1px solid #b9d9a8 !important;color:#1f3326 !important;padding:14px 18px !important;border-radius:4px !important;font-size:14px !important;margin:0 0 20px !important}
.sg-scope div.warning{background:#fbeceb !important;border:1px solid #e3a6a3 !important;color:#8f2b28 !important;padding:14px 18px !important;border-radius:4px !important;font-size:14px !important;margin:0 0 20px !important}

.sg-scope table.sg-table{width:100%;border-collapse:collapse;font-size:14px}
.sg-scope table.sg-table th{text-align:left;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;padding:12px;border-bottom:2px solid #22231f;color:#22231f}
.sg-scope table.sg-table td{padding:14px 12px;border-bottom:1px solid #eeeae1;vertical-align:middle}
.sg-scope table.sg-table tbody tr:hover td{background:#faf9f5}
.sg-scope table.sg-table td.sg-cell-right{text-align:right}

.sg-scope .pagination{margin:26px 0 0;padding:0;display:flex;gap:6px;list-style:none;flex-wrap:wrap}
.sg-scope .pagination>li{display:inline-block}
.sg-scope .pagination>li>a,.sg-scope .pagination>li>span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border:1px solid #e2ddd1;border-radius:4px;color:#22231f;text-decoration:none;font-size:13px}
.sg-scope .pagination>.active>a,.sg-scope .pagination>.active>span{background:#1f3326 !important;border-color:#1f3326 !important;color:#fff !important}
.sg-scope .results{color:#6b6860;font-size:13px;margin-top:10px}

.sg-scope fieldset{border:0;padding:0;margin:0 0 28px}
.sg-scope legend{font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;border-bottom:1px solid #e2ddd1;padding-bottom:10px;margin-bottom:20px;color:#22231f;width:100%}
.sg-scope .radio,.sg-scope .checkbox{font-size:14px;margin:0 0 8px}
.sg-scope .radio label,.sg-scope .checkbox label{display:flex;align-items:center;gap:8px;font-weight:400}

.sg-scope ul.sg-acct-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
.sg-scope ul.sg-acct-links li{margin:0}
.sg-scope ul.sg-acct-links a{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#faf9f5;border:1px solid #eeeae1;border-radius:4px;color:#22231f !important;text-decoration:none !important;font-weight:600;font-size:14px;transition:border-color .15s}
.sg-scope ul.sg-acct-links a:hover{border-color:#8a6a3d}
.sg-scope ul.sg-acct-links a:after{content:"→";color:#8a6a3d;font-weight:700}

.sg-scope .sg-empty{padding:40px 20px;text-align:center;color:#6b6860;background:#faf9f5;border:1px solid #eeeae1;border-radius:4px}
.sg-scope .sg-empty .sg-btn{margin-top:16px}

@media (max-width:640px){
  .sg-scope .sg-page-h1{font-size:24px !important}
  .sg-scope ul.sg-acct-links{grid-template-columns:1fr}
  .sg-scope table.sg-table{display:block;overflow-x:auto;white-space:nowrap}
}

/* product page price block: stock theme .price-old / .price-tax colours (#aaa-ish) beat the
   plain class rules above and fell under 4.5:1 on white */
.sg-scope .sg-price-old-big{color:#736e62 !important}
.sg-scope .price-tax{color:#6b6860 !important}

/* ======================================================================
   Site-wide modernisation pass (aligns every page with the mockup system)
   ====================================================================== */

/* Clean off-white page instead of the theme's 2016 wood texture (themecontrol customize CSS). */
body.offcanvas-container,body.offcanvas-container #page{background:#f6f4ee !important;background-image:none !important}
::selection{background:#e6d7bb;color:#22231f}

/* One content width for header, content and footer (the theme's .container is 1190px, the
   header/footer .sg-wrap is 1240px, so content edges sat ~35px inside the logo). */
#columns > .container{width:auto !important;max-width:1240px !important;padding-left:20px !important;padding-right:20px !important}
#columns .sg-wrap{max-width:none;padding-left:0;padding-right:0}
.page-home #columns > .container > .row{margin-left:0;margin-right:0}

/* Product tabs: underline tabs (mockup) instead of jQuery UI's grey gradient buttons. */
.sg-scope #tabs{display:flex !important;gap:4px;border-bottom:1px solid #e2ddd1 !important;background:none !important;padding:0 !important;margin:0 0 24px !important}
.sg-scope #tabs a{background:none !important;background-image:none !important;border:0 !important;border-bottom:3px solid transparent !important;border-radius:0 !important;padding:14px 22px !important;margin:0 0 -1px !important;font-family:Montserrat,sans-serif !important;font-weight:600 !important;font-size:14px !important;color:#6b6860 !important;box-shadow:none !important}
.sg-scope #tabs a.selected,.sg-scope #tabs a:hover{color:#1f3326 !important;border-bottom-color:#8a6a3d !important}

/* Main menu: olive underline on hover/open like the mockup nav. */
/* A megamenu entry with an empty title (admin data) renders as a blank row — hide it. */
.sg-nav li:has(> a > .menu-title:empty),#menu-offcanvas li:has(> a > .menu-title:empty){display:none !important}

/* Product tags as chips. */
.sg-scope .sg-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px}
.sg-scope .sg-tags-label{font-size:13px;font-weight:600;color:#6b6860;margin-right:4px}
.sg-scope .sg-chip{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:4px;background:#eef0e8;color:#1f3326 !important;font-size:13px;font-weight:600;text-decoration:none !important;transition:background .15s}
.sg-scope .sg-chip:hover{background:#e0e5d6}

/* Sidebar category tree: count right-aligned and muted (mockup .side). */
.sg-scope .sg-cat-item > a,.sg-scope .sg-cat-child > a{display:flex !important;align-items:baseline;justify-content:space-between;gap:10px}
.sg-scope .sg-cat-qty{flex:none;font-size:13px;font-weight:400;color:#767266}
.sg-scope .sg-cat-item > a.sg-cat-active .sg-cat-qty{color:#1f3326}
.sg-scope .sg-cat-children{padding-top:4px}

/* Quantity: one joined [−][1][+] control (mockup .qty). */
.sg-scope .quantity-adder.sg-qty{gap:0}
.sg-scope .quantity-adder.sg-qty .add-action,.sg-scope .quantity-adder.sg-qty input.form-control{height:44px !important;border-color:#cfc9bb !important;box-shadow:none !important}
.sg-scope .quantity-adder.sg-qty .add-down{margin-left:12px !important;border-radius:4px 0 0 4px !important;border-right:0 !important}
.sg-scope .quantity-adder.sg-qty input.form-control{width:52px !important;border-radius:0 !important;font-size:15px}
.sg-scope .quantity-adder.sg-qty .add-up{border-radius:0 4px 4px 0 !important;border-left:0 !important}
.sg-scope .quantity-adder.sg-qty .add-action:hover{background:#f6f4ee !important;border-color:#cfc9bb !important}

/* Quiet, consistent hover feedback on clickable cards. */
.sg-card,.sg-tile,.sg-scope ul.sg-acct-links a{transition:box-shadow .2s,border-color .2s,transform .2s}
.sg-card:hover{border-color:#d6cfbe;box-shadow:0 12px 28px rgba(31,51,38,.09);transform:translateY(-2px)}
.sg-tile:hover{border-color:#8a6a3d;box-shadow:0 10px 24px rgba(31,51,38,.08)}
@media (prefers-reduced-motion:reduce){.sg-card,.sg-tile{transition:none}.sg-card:hover{transform:none}}

/* Visible keyboard focus everywhere (the theme removed outlines). */
.sg-scope a:focus-visible,.sg-scope button:focus-visible,.sg-scope input:focus-visible,.sg-scope select:focus-visible,.sg-scope textarea:focus-visible,#menu-offcanvas a:focus-visible{outline:2px solid #8a6a3d !important;outline-offset:2px}

/* Product card action icons: one column on the right (zoom, wishlist, compare) so the
   top-left corner is free for the "Pigu"/"Naujiena" badge — they used to overlap. On
   devices with a mouse they appear on hover/focus only, keeping the grid calm. */
.sg-scope .sg-card .sg-zoom{top:12px;right:12px;left:auto}
.sg-scope .sg-card .sg-hover-actions{top:54px;right:12px;left:auto;flex-direction:column}
.sg-scope .sg-card .sg-badge{z-index:3}
@media (hover:hover){
  .sg-scope .sg-card .sg-zoom,.sg-scope .sg-card .sg-hover-actions{opacity:0;transition:opacity .15s}
  .sg-scope .sg-card:hover .sg-zoom,.sg-scope .sg-card:hover .sg-hover-actions,
  .sg-scope .sg-card:focus-within .sg-zoom,.sg-scope .sg-card:focus-within .sg-hover-actions{opacity:1}
}

/* Cart table: the visually-hidden "Nuotrauka" header must still occupy its grid cell,
   otherwise every header shifts one column left over the wrong data. */
.sg-cart-head-row .sg-vh{position:static !important;width:auto !important;height:auto !important;margin:0 !important;clip:auto !important;visibility:hidden}
.sg-cart-qty{display:inline-flex;align-items:center;gap:6px}
.sg-qty-update{display:inline-flex;align-items:center;justify-content:center;color:#1f3326;background:#eef0e8 !important;border:1px solid transparent;transition:border-color .15s}
.sg-qty-update:hover{border-color:#1f3326}
.sg-cart-remove{color:#767266 !important;border-radius:4px;transition:color .15s,background .15s}
.sg-cart-remove:hover{color:#b9312f !important;background:#fbeceb}
.sg-cart-weight{font-size:15px;font-weight:600;color:#767266;margin-left:6px}

/* Checkout step panels: white headers with a hairline (mockup .panel-h) instead of the
   stock grey #e7e7e7 bars; step headings get room above the form grid. */
.sg-scope .sg-checkout-panel-h{background:#fff !important;background-image:none !important}
.sg-scope .sg-checkout-panel + .sg-checkout-panel{margin-top:14px}
.sg-scope .sg-checkout-panel-body .sg-checkout-title{margin:0 0 16px !important}
.sg-scope .sg-checkout-panel-body .sg-form-grid + .sg-checkout-title,.sg-scope .sg-checkout-panel-body .sg-checkout-title[style*="margin-top"]{margin-top:28px !important}

/* The quiet-h2 rule above is only for the SEO extension's injected <h2> on product/category
   pages; real section headings elsewhere (account dashboard) keep full size and get air. */
.sg-scope ul.sg-acct-links + h2,.sg-scope ul.sg-acct-links + h3{margin-top:36px !important}
.sg-scope .sg-page-wrap > h2,.sg-scope .sg-page-wrap > h3{margin-bottom:14px}

/* Side columns (category module on product pages, account module on account pages) start
   level with the page content under the breadcrumb row, not flush with the menu bar. */
#columns > .container > .row > aside{padding-top:62px}
@media (max-width:767px){ #columns > .container > .row > aside{padding-top:0} }

/* Breadcrumb is global: on cart / checkout / 404 it sits outside .sg-scope and fell back
   to the stock grey (#8c8c8c, 3:1) look. */
#breadcrumb .breadcrumb{background:transparent !important;padding:14px 0 !important;margin:0 !important;border-radius:0 !important;border-bottom:1px solid #eeeae1;font-size:13px;list-style:none;display:flex;flex-wrap:wrap}
#breadcrumb .breadcrumb > li{display:inline-flex;align-items:center}
#breadcrumb .breadcrumb > li a{color:#6b6860 !important;font-size:13px}
#breadcrumb .breadcrumb > li:last-child a{color:#22231f !important;font-weight:600}
#breadcrumb .breadcrumb > li + li{margin-left:10px}
#breadcrumb .breadcrumb > li + li:before{content:"" !important;display:inline-block;width:6px;height:6px;padding:0;margin:0 10px 0 0;border-right:1.8px solid #9a9587;border-bottom:1.8px solid #9a9587;transform:rotate(-45deg)}
#columns > .container > .row > #breadcrumb{padding:0 10px}

/* Muted helper texts that sat under 4.5:1 on the new #f6f4ee page background. */
.sg-cat-count{color:#6b6860 !important}
.sg-step.sg-step-upcoming{color:#6b6860}
.sg-scope .sg-product-note{color:#6b6860 !important}

/* ---- Phone compaction: get products on the first screen ---- */
@media (max-width:640px){
  /* header: logo + account/cart on one row, account label kept for screen readers only */
  .sg-hdr .sg-wrap{row-gap:10px}
  .sg-hact-row{gap:14px;align-items:center}
  .sg-hact-account a.account strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  /* category title + toolbar: one compact block instead of five stacked rows */
  .sg-scope .sg-cat-titlebar{padding:4px 0 12px !important;margin-bottom:14px !important}
  .sg-scope .sg-cat-toolbar{flex-direction:row !important;align-items:center !important;gap:10px !important;margin-bottom:16px}
  .sg-scope .sg-cat-toolbar > .sg-cat-count{flex:1 0 100%;font-size:13px}
  .sg-scope .sg-cat-toolbar-right{flex:1 0 100%;flex-wrap:nowrap !important;gap:8px !important}
  .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:first-child{flex:1 1 0;min-width:0}
  .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:first-child select{min-width:0}
  .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:first-child > span{display:none}
  .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:first-child select{width:100%}
  .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:nth-child(2){display:none}
  .sg-scope .sg-cat-toolbar-right #compare-total{flex:none;padding:0 12px !important;font-size:12px !important}
}
@media (max-width:480px){
  /* the round logo image already reads "SEGRIS": drop the wordmark so logo, account and
     cart share one header row instead of two */
  .sg-logo > span{display:none}
  .sg-hdr .sg-wrap{flex-wrap:nowrap !important}
  .sg-hdr .sg-search{order:3}
  .sg-hdr .sg-wrap{flex-wrap:wrap !important}
}

/* Phone hero: keep the photo (it was hidden, leaving a flat green block) as a banner on top
   of the text block — as a full background it cropped down to the cap only. */
@media (max-width:640px){
  .sg-scope .sg-hero{display:flex;flex-direction:column}
  .sg-scope .sg-hero .sg-hero-img{display:block !important;position:relative !important;width:100% !important;height:210px !important;object-position:62% 14% !important}
  .sg-scope .sg-hero > img + div{display:none}
  .sg-scope .sg-hero > .sg-wrap{min-height:0 !important;padding:26px 20px 30px !important;gap:16px !important}
}
/* review form note: the language string hard-codes <span style="color:#FF0000"> (4:1 on white) */
.sg-scope .sg-product-note span{color:#b9312f !important}
/* Section headings inside plain content pages (register, edit, address, return form...):
   room below; extra room when a new section follows a form grid. */
.sg-scope .sg-page-wrap h2:not(.sg-page-h1),.sg-scope .sg-page-wrap h3:not(.sg-checkout-title){margin-bottom:14px}
.sg-scope .sg-page-wrap .sg-form-grid + h2,.sg-scope .sg-page-wrap .sg-form-grid + h3,.sg-scope .sg-page-wrap .sg-form-grid + .sg-checkout-title{margin-top:32px !important}

/* ---- account-orders.css ---- */
/* ======================================================================
   Account: order history, order info, address book, address form, wishlist
   (account/order_list, order_info, address_list, address_form, wishlist .tpl)
   Every rule hangs off the page wrapper class that only these templates print
   (.sg-page-wrap.sg-acct-orders / -order-info / -addresses / -address-form / -wishlist),
   so nothing here can reach another page.
   ====================================================================== */

/* --- shared bits --- */
.sg-scope .sg-page-wrap.sg-acct-orders .sg-status,
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-status{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:13px;background:#eef0e8;color:#1f3326;font-family:Montserrat,sans-serif;font-weight:600;font-size:12px;letter-spacing:.02em;line-height:1;white-space:nowrap}
/* Back on the left, primary action on the right (the old .buttons .left/.right) */
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-form-actions.sg-actions-split,
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-form-actions.sg-actions-split{justify-content:space-between;gap:12px;flex-wrap:wrap}
/* list / detail pages: the "Tęsti" bar follows the cards / pagination without a rule line */
.sg-scope .sg-page-wrap.sg-acct-orders .sg-form-actions.sg-actions-start,
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-form-actions.sg-actions-start{margin-top:22px}

/* ------------------------------------------------ order history (order_list.tpl) */
.sg-scope .sg-page-wrap.sg-acct-orders .sg-orders{display:flex;flex-direction:column;gap:14px}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-card{margin:0;overflow:hidden}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-bottom:1px solid #eeeae1;background:#fcfbf8}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-id{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-lbl{font-size:13px;color:#6b6860}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-no{font-family:Montserrat,sans-serif;font-weight:700;font-size:16px;color:#22231f}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-body{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;padding:18px 22px}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-facts{display:grid;grid-template-columns:100px 64px minmax(120px,1fr) 100px;gap:6px 28px;margin:0;flex:1 1 440px;min-width:0}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-facts dt{font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860;margin:0 0 5px;line-height:1.3}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-facts dd{margin:0;font-size:14px;color:#22231f;line-height:1.4;overflow-wrap:anywhere}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-facts dd.sg-order-total{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;white-space:nowrap}
.sg-scope .sg-page-wrap.sg-acct-orders .sg-order-actions{display:flex;gap:10px;margin-left:auto}
/* pagination: the stock .pagination draws a grey top rule that doubled the actions' rule */
.sg-scope .sg-page-wrap.sg-acct-orders .pagination{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;width:auto;margin:22px 0 0;padding:0;border:0;border-radius:0}
.sg-scope .sg-page-wrap.sg-acct-orders .pagination .links{float:none;display:flex;flex-wrap:wrap;gap:8px}
.sg-scope .sg-page-wrap.sg-acct-orders .pagination .links a,
.sg-scope .sg-page-wrap.sg-acct-orders .pagination .links b{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;color:#22231f;font-weight:600;font-size:14px;text-decoration:none}
.sg-scope .sg-page-wrap.sg-acct-orders .pagination .links b{background:#1f3326;border-color:#1f3326;color:#fff}
.sg-scope .sg-page-wrap.sg-acct-orders .pagination .links a:hover{border-color:#1f3326;background:#fff;color:#1f3326}
.sg-scope .sg-page-wrap.sg-acct-orders .pagination .results{float:none;padding:0;margin:0;font-size:13px;color:#6b6860}

/* ------------------------------------------------ order info (order_info.tpl) */
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-panel{margin:0 0 20px;overflow:hidden}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-panel-h{padding:15px 22px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-panel-h h2{font-size:16px;margin:0}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px 24px;margin:0;padding:18px 22px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-facts dt{font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860;margin:0 0 5px;line-height:1.3}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-facts dd{margin:0;font-size:14px;color:#22231f;line-height:1.45}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-facts dd.sg-oi-strong{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-addresses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 20px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-addresses .sg-oi-panel{margin:0}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-address,
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-text{padding:16px 22px 18px;font-size:14px;line-height:1.7;color:#3e3d39;overflow-wrap:anywhere}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-address::first-line{font-weight:600;color:#22231f}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table{width:100%;border-collapse:collapse;font-size:14px;margin:0}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table th{padding:12px 14px;border-bottom:1px solid #eeeae1;font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860;text-align:left;vertical-align:bottom;white-space:nowrap;background:#fcfbf8}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td{padding:16px 14px;border-bottom:1px solid #eeeae1;vertical-align:middle;color:#3e3d39;line-height:1.45}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table th:first-child,
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td:first-child{padding-left:22px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table th:last-child,
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td:last-child{padding-right:22px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tbody tr:last-child td{border-bottom:0}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table .sg-cell-right{text-align:right;white-space:nowrap}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-name{font-weight:600;color:#22231f}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-name small{font-weight:400;font-size:12.5px;color:#6b6860}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-model{font-size:13px;color:#6b6860}
/* short codes such as "WSKTS-KO MK2" should not break over two lines next to a long product name */
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td.sg-oi-model{min-width:128px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td.sg-oi-total{font-family:Montserrat,sans-serif;font-weight:700;color:#22231f}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-act{width:1%;text-align:right;white-space:nowrap}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-return{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid #e2ddd1;border-radius:4px;background:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:12px;color:#1f3326;white-space:nowrap;transition:border-color .15s,background .15s}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-return:hover{border-color:#1f3326;background:#f6f4ee;color:#1f3326}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-return .sg-ico{width:16px;height:16px}
/* order totals = the table's tfoot: titles end at the price column, amounts sit in the
   "Viso" column under the line totals; the last row is the grand total */
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot th,
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot td{padding:7px 14px;border:0;background:#fcfbf8;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:#3e3d39;text-align:right;vertical-align:baseline;line-height:1.45}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot th{font-weight:600;color:#22231f;white-space:normal}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot td{white-space:nowrap}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr:first-child > *{padding-top:16px;border-top:1px solid #eeeae1}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr:last-child > *{padding-bottom:18px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr.sg-oi-grand > *{padding-top:14px;font-family:Montserrat,sans-serif;font-weight:700;font-size:18px;color:#22231f}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr.sg-oi-grand:not(:first-child) > *{border-top:1px solid #e2ddd1}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-history .sg-oi-table td{vertical-align:top}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-hdate{width:120px;white-space:nowrap}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-hstatus{width:150px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-history td.sg-oi-hstatus{padding-top:13px;padding-bottom:13px}
.sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-hcomment{line-height:1.6}

/* ------------------------------------------------ address book (address_list.tpl) */
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-card{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:20px 22px 16px}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-text{font-size:14px;line-height:1.7;color:#3e3d39;overflow-wrap:anywhere}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-text::first-line{font-weight:600;color:#22231f}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding-top:14px;border-top:1px solid #eeeae1}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-actions .sg-ico{width:16px;height:16px}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-actions .sg-btn{gap:8px !important}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-delete{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:4px;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:#6b6860;text-decoration:none;transition:color .15s,background .15s}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-delete:hover{color:#b9312f;background:#fbeceb}

/* ------------------------------------------------ address form (address_form.tpl) */
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-af-panel{margin:0 0 20px}
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-panel-h h2{margin:0;font-size:17px}
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-af-body{padding:24px}
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-form-actions.sg-actions-split{margin-top:4px;padding-top:0;border-top:0}
.sg-scope .sg-page-wrap.sg-acct-addresses .sg-form-actions.sg-actions-split{margin-top:20px;padding-top:0;border-top:0}
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-radio-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 28px;min-height:30px}
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-radio-row label{margin:0;font-size:14px;font-weight:400;color:#22231f;cursor:pointer}
/* field errors: the shared span.error look of forms.css (icon + text), same as register / edit */
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-field:has(> .error) .sg-inp{border-color:#b9312f}
/* the country change handler puts <span class="wait"> right after the country select while
   it loads the regions: show it as a small spinner inside the field instead of a new line */
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-select-wrap{position:relative}
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-select-wrap > .wait{position:absolute;right:40px;top:50%;margin:-8px 0 0;pointer-events:none}
.sg-scope .sg-page-wrap.sg-acct-address-form .sg-spinner{display:block;width:16px;height:16px;border:2px solid #d9d3c1;border-top-color:#1f3326;border-radius:50%;animation:sg-acct-spin .7s linear infinite}
@keyframes sg-acct-spin{to{transform:rotate(360deg)}}

/* ------------------------------------------------ wishlist (wishlist.tpl) — same row look as the cart */
.sg-scope .sg-page-wrap.sg-acct-wishlist div.success{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.sg-scope .sg-page-wrap.sg-acct-wishlist div.success img.close{float:none;flex:none;width:16px;height:16px;margin:2px 0 0;padding:0;opacity:.7;cursor:pointer}
.sg-scope .sg-page-wrap.sg-acct-wishlist div.success img.close:hover{opacity:1}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-panel{overflow:hidden}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-head,
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-row{display:grid;grid-template-columns:84px minmax(0,1fr) 110px 120px 186px;gap:16px;padding:12px 20px}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-head{border-bottom:1px solid #eeeae1;font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860}
/* the visually hidden header labels still hold their grid cell (same fix as the cart) */
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-head .sg-vh{position:static !important;width:auto !important;height:auto !important;margin:0 !important;clip:auto !important;visibility:hidden}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-right{text-align:right}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-row{align-items:center;padding:18px 20px;border-bottom:1px solid #eeeae1}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-row:last-child{border-bottom:0}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-info .sg-pname{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-stock{font-size:13px;color:#3e3d39}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-stock .sg-stock{font-size:13px;font-weight:600}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-stock .sg-wl-label{font-weight:400;color:#6b6860}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-label{display:none}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-price{text-align:right;white-space:nowrap}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-price .sg-price-old{display:block;margin:0 0 2px;font-size:13px}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-now{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:#22231f}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-now.sg-wl-special{color:#b9312f}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-actions .sg-btn{gap:8px !important;padding:0 14px !important}
/* the remove link shares the cart's .sg-cart-remove look; the cart page pins its own one to the
   item's corner on tablets/phones (checkout.css) - here it stays next to "Į krepšelį" in the row */
.sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-actions .sg-cart-remove{position:static;flex:none}

@media (max-width:900px){
  /* tablet: no header row, stock moves under the name, price + buttons stay on the right */
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-head{display:none}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-row{grid-template-columns:84px minmax(0,1fr) auto auto;grid-template-areas:"img info price actions" "img stock price actions";row-gap:4px;padding:16px 20px}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-img{grid-area:img}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-info{grid-area:info;align-self:end}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-stock{grid-area:stock;align-self:start}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-label{display:inline}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-price{grid-area:price}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-actions{grid-area:actions}
}

@media (max-width:767px){
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-addresses{grid-template-columns:1fr}
  .sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-grid{grid-template-columns:1fr}

  /* order info: every table row becomes a small card, labels from data-label */
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-panel-h{padding:14px 16px}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-facts{grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-address,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-text{padding:14px 16px 16px}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table thead{display:none}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tbody,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tr,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td{display:block;width:auto}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tr{padding:14px 16px;border-bottom:1px solid #eeeae1}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tbody tr:last-child{border-bottom:0}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td:first-child,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td:last-child{padding:3px 0;border:0;text-align:left}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td[data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td[data-label]::before{content:attr(data-label);flex:none;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:400;font-size:13px;color:#6b6860}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td.sg-oi-model{min-width:0;font-size:14px;color:#3e3d39}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td.sg-oi-name{padding-bottom:8px;font-size:14.5px}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td.sg-oi-act{padding-top:10px}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table td.sg-oi-empty{display:none}
  /* totals (tfoot): title left, amount right */
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot{display:block;padding:8px 16px 14px;background:#fcfbf8;border-top:1px solid #eeeae1}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:6px 0;border:0}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr > th,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr > td,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr > th:first-child,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr > td:last-child,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr:first-child > *,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr:last-child > *{display:block;padding:0;border:0;background:none;text-align:left}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr > td.sg-oi-act.sg-oi-empty{display:none}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr.sg-oi-grand{margin-top:6px;padding-top:12px}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr.sg-oi-grand:not(:first-child){border-top:1px solid #e2ddd1}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-table tfoot tr.sg-oi-grand:not(:first-child) > *{border:0}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-history .sg-oi-table td.sg-oi-hdate,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-history .sg-oi-table td.sg-oi-hstatus{display:inline-flex;align-items:center;vertical-align:middle;padding:0}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-history .sg-oi-table td.sg-oi-hdate{margin-right:12px;font-weight:600;color:#22231f}
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-oi-history .sg-oi-table td.sg-oi-hcomment{padding-top:10px}
}

@media (max-width:640px){
  /* order history cards */
  .sg-scope .sg-page-wrap.sg-acct-orders .sg-order-head{padding:12px 16px}
  .sg-scope .sg-page-wrap.sg-acct-orders .sg-order-body{padding:16px;gap:16px}
  .sg-scope .sg-page-wrap.sg-acct-orders .sg-order-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;flex:1 1 100%}
  .sg-scope .sg-page-wrap.sg-acct-orders .sg-order-actions{flex:1 1 100%;margin-left:0}
  .sg-scope .sg-page-wrap.sg-acct-orders .sg-order-actions .sg-btn{flex:1 1 0}

  /* address book + address form card */
  .sg-scope .sg-page-wrap.sg-acct-addresses .sg-addr-card{padding:16px 16px 12px}
  .sg-scope .sg-page-wrap.sg-acct-address-form .sg-af-body{padding:18px 16px}
  .sg-scope .sg-page-wrap.sg-acct-address-form .sg-panel-h{padding:14px 16px}
  /* "Atgal" + the main button: two equal halves, like the other account forms (forms.css .sg-acctf).
     The side padding is smaller so "Naujas adresas" + its icon fit half a 375px screen; a button
     never gets narrower than its label (narrower phones: it takes the room it needs, and below
     ~280px the pair wraps to two full-width rows) */
  .sg-scope .sg-page-wrap.sg-acct-address-form .sg-form-actions.sg-actions-split > .sg-btn,
  .sg-scope .sg-page-wrap.sg-acct-addresses .sg-form-actions.sg-actions-split > .sg-btn{flex:1 1 0;min-width:max-content !important;padding:0 10px !important;gap:8px !important}
  /* "Tęsti" / back bars: full width, easy to tap */
  .sg-scope .sg-page-wrap.sg-acct-orders .sg-form-actions.sg-actions-start > .sg-btn,
  .sg-scope .sg-page-wrap.sg-acct-order-info .sg-form-actions.sg-actions-start > .sg-btn,
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-form-actions.sg-actions-start > .sg-btn{flex:1 1 auto}

  /* wishlist: one stacked card per product */
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-row{grid-template-columns:72px minmax(0,1fr);grid-template-areas:"img info" "img stock" "img price" "img actions";align-items:start;row-gap:6px;padding:16px}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-img{width:72px;height:72px}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-info,
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-stock{align-self:auto}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-price{text-align:left}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-price .sg-price-old{display:inline;margin:0 8px 0 0}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-actions{justify-content:flex-start;margin-top:6px}
  .sg-scope .sg-page-wrap.sg-acct-wishlist .sg-wl-actions .sg-btn{flex:1 1 auto}
}

/* ---- activation.css ---- */
/* ======================================================================
   Product cards on the category listing and the home page, and the home page layout
   (common/home.tpl, product/category.tpl).
   ====================================================================== */

/* ---- sale price: many of the new products (24 of the planned 201) carry one. Inline "old new"
   price plus the button no longer fit one row of a 3-column (category) / 4-column (home) card, so
   the button dropped to its own line, left-aligned, unlike every regular card. The old price
   stacks above the sale price instead: price and button stay on one row in every card. ---- */
.page-category .sg-scope .sg-card .sg-price.sg-has-special,
.page-home .sg-scope .sg-card .sg-price.sg-has-special{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.page-category .sg-scope .sg-card .sg-price.sg-has-special .sg-price-old,
.page-home .sg-scope .sg-card .sg-price.sg-has-special .sg-price-old{margin:0 0 2px;font-size:13px;line-height:1.2}

/* ---- photo area: proportioned to the thumbnails, the photo as large as it fits. Category
   thumbnails are the shop's 254x348 list canvases with the photo in the middle (admin "product
   list image" size): in the old 230px-high strip the product came out ~140px wide. Home cards
   use 260x230 thumbnails (controller). min-height:0 keeps the ratio from growing to the image. ---- */
.page-category .sg-scope .sg-card .sg-img,
.page-home .sg-scope .sg-card .sg-img{height:auto;min-height:0;max-height:300px;padding:10px;overflow:hidden}
.page-category .sg-scope .sg-card .sg-img{aspect-ratio:12 / 13}
.page-home .sg-scope .sg-card .sg-img{aspect-ratio:9 / 8;max-height:280px}
/* home "Naujiena" cards: the photo starts under the badge (tall pack shots ran under it) */
.page-home .sg-scope .sg-card > .sg-badge + .sg-img{padding-top:42px}
/* no photo, or one that fails to load (onerror in the templates): a neutral box, never the
   browser's broken-image icon with the alt text */
.page-category .sg-scope .sg-card .sg-img.sg-img-missing::before,
.page-home .sg-scope .sg-card .sg-img.sg-img-missing::before,
.page-home .sg-scope .sg-tile .sg-timg.sg-img-missing::before{content:"";display:block;flex:none;width:100%;height:100%;border-radius:4px;background:#f2efe7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3ab98' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") no-repeat center/40px 40px}
.page-home .sg-scope .sg-tile .sg-timg.sg-img-missing::before{background-size:32px 32px}

/* ======================================================================
   Home page
   ====================================================================== */

/* Hero and trust band run edge to edge like the mockup: the page container is full width here
   and every section keeps the 1240px content width through its own .sg-wrap. The theme's
   sidebar-button row is always empty on this page (home.tpl prints no side columns). */
.page-home #columns > .container{max-width:none !important;padding-left:0 !important;padding-right:0 !important}
.page-home #columns > .container > .row.visible-xs{display:none !important}
.page-home #columns .sg-wrap{max-width:1240px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
/* hero label: a term never wraps apart from its separator (no line starting with "· optika") */
.page-home .sg-scope .sg-hero .sg-eyebrow .sg-nw{white-space:nowrap}
/* trust band: the four items share one top line; columns as wide as their text, spread out */
.page-home .sg-scope .sg-usp-row{align-items:start}
@media (min-width:1101px){
  .page-home .sg-scope .sg-usp-row{grid-template-columns:repeat(4,minmax(0,max-content));justify-content:space-between}
}
@media (min-width:641px) and (max-width:1100px){
  /* tablet: the headline stays on the dark part, off the face in the photo */
  .page-home .sg-scope .sg-hero h1,
  .page-home .sg-scope .sg-hero .sg-wrap > p{max-width:56% !important}
}

@media (max-width:640px){
  /* "Ko ieškote?": two compact tiles per row (mockup mobile) instead of six full-width rows */
  .page-home .sg-scope .sg-grid3{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .page-home .sg-scope .sg-tile{min-height:76px;padding:10px;gap:10px;align-items:center}
  .page-home .sg-scope .sg-tile .sg-timg,
  .page-home .sg-scope .sg-tile .sg-noimg{width:46px;height:46px}
  .page-home .sg-scope .sg-tile .sg-noimg .sg-ico{width:22px;height:22px}
  /* the text column may shrink; a word only breaks when it is longer than the whole line */
  .page-home .sg-scope .sg-tile > span:last-child{min-width:0}
  .page-home .sg-scope .sg-tile h3{font-size:13px;line-height:1.25;overflow-wrap:break-word}
  .page-home .sg-scope .sg-tile .sg-cnt{font-size:12px;margin-top:2px}
  .page-home .sg-scope .sg-tile .sg-more{display:none}
  /* trust band: tighter rows */
  .page-home .sg-scope .sg-usp-row{gap:14px;padding:18px 0;min-height:0}
  .page-home .sg-scope .sg-usp .sg-ic{width:38px;height:38px}
  /* sections a little closer together */
  .page-home .sg-scope .sg-sec{padding-top:40px}
  .page-home .sg-scope .sg-sec-head{margin-bottom:18px}
  .page-home .sg-scope .sg-sec-head h2{font-size:24px}
}

/* ======================================================================
   Phones: two product cards per row (mockup "mobili"), compact card
   ====================================================================== */
@media (max-width:640px){
  .page-category .sg-scope #sg-product-grid,
  .page-home .sg-scope .sg-grid4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .page-category .sg-scope .sg-card .sg-img,
  .page-home .sg-scope .sg-card .sg-img{max-height:none;padding:8px}
  .page-home .sg-scope .sg-card > .sg-badge + .sg-img{padding-top:30px}
  .page-category .sg-scope .sg-card .sg-badge,
  .page-home .sg-scope .sg-card .sg-badge{top:8px;left:8px;padding:4px 7px;font-size:10px}
  .page-category .sg-scope .sg-card .sg-body,
  .page-home .sg-scope .sg-card .sg-body{padding:10px 12px 12px;gap:4px}
  .page-category .sg-scope .sg-card .sg-brand,
  .page-home .sg-scope .sg-card .sg-brand{font-size:10px;letter-spacing:.1em}
  .page-category .sg-scope .sg-card .sg-pname,
  .page-home .sg-scope .sg-card .sg-pname{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
  .page-category .sg-scope .sg-card .sg-stock,
  .page-home .sg-scope .sg-card .sg-stock{font-size:11.5px}
  .page-category .sg-scope .sg-card .sg-price,
  .page-home .sg-scope .sg-card .sg-price{font-size:16px}
  .page-category .sg-scope .sg-card .sg-price-old,
  .page-home .sg-scope .sg-card .sg-price-old{font-size:12px}
  .page-category .sg-scope .sg-card .sg-foot,
  .page-home .sg-scope .sg-card .sg-foot{flex-direction:column;align-items:stretch;gap:8px;padding-top:8px}
  /* "Į krepšelį" (adds to cart) keeps a full-width button under the price, home cards included
     (home.tpl uses the category card's button) */
  .page-category .sg-scope .sg-card .sg-foot .sg-btn,
  .page-home .sg-scope .sg-card .sg-foot .sg-btn{width:100% !important;height:36px !important;padding:0 8px !important;font-size:12.5px !important}
  /* photo zoom / wishlist / compare icons (always shown on touch screens): smaller and tucked in */
  .page-category .sg-scope .sg-card .sg-zoom{top:6px;right:6px;width:30px;height:30px}
  .page-category .sg-scope .sg-card .sg-hover-actions{top:42px;right:6px;gap:6px}
  .page-category .sg-scope .sg-card .sg-fav a,
  .page-category .sg-scope .sg-card .sg-cmp a{width:30px;height:30px}
  .page-category .sg-scope .sg-card .sg-zoom .sg-ico,
  .page-category .sg-scope .sg-card .sg-fav .sg-ico,
  .page-category .sg-scope .sg-card .sg-cmp .sg-ico{width:15px;height:15px}
}

/* ---- hyphenated words in menu / sidebar names (megamenu model and module/category.tpl wrap
   them in .sg-nw): "„Clip-On“" moves to the next line whole instead of splitting after "Clip-" ---- */
.sg-nav .menu-title .sg-nw,
#menu-offcanvas .menu-title .sg-nw,
.sg-scope .sg-cat-tree .sg-cat-name .sg-nw{white-space:nowrap}

/* ---- category-seo.css ---- */
/* ======================================================================
   Category page (product/category.tpl): title bar, sidebar filters, toolbar, pager, the empty
   category box, and the Paladin SEO module's vQmod injections (ssb-catalog-generate.xml).
   product/category.tpl keeps the vQmod search lines; production then outputs
     - <div class="tags gen-area gen-tags"><b>Žymos: </b><a>…</a>,<a>…</a></div> right after the
       product grid / pagination,
     - <h2>seo_h2</h2><h3>seo_h3</h3> as the first children of .sg-cat-seo (the SEO text block,
       which the template only opens when the category has a description).
   ====================================================================== */

/* ---- title bar: on tablets/phones the sidebar button ("Filtrai ir kategorijos") is moved here,
   under/next to the heading, by the script in category.tpl (it used to sit above the breadcrumb) ---- */
.page-category .sg-scope .sg-cat-oc-slot{display:none}
@media (max-width:1100px){
  .page-category .sg-scope .sg-cat-titlebar{flex-wrap:wrap;gap:14px 24px}
  .page-category .sg-scope .sg-cat-oc-slot{display:block;flex:none}
  .page-category .sg-scope .sg-cat-oc-slot .sg-oc-buttons{margin:0 !important}
}
@media (max-width:640px){
  .page-category .sg-scope .sg-cat-titlebar > div:first-child,
  .page-category .sg-scope .sg-cat-oc-slot{flex:1 1 100%}
}

/* ---- a one-sentence category text is the intro under the H1 (mockup); the template then leaves
   it out of the SEO block under the listing and marks that block .sg-cat-seo-moved (it only holds
   the module's headings repeating the H1, already hidden) ---- */
.page-category .sg-scope .sg-cat-intro{max-width:620px;margin:10px 0 0;font-size:15px;line-height:1.6;color:#6b6860}
.page-category .sg-scope .sg-cat-seo-moved{display:none}
@media (max-width:640px){
  .page-category .sg-scope .sg-cat-intro{margin-top:6px;font-size:14px;line-height:1.55}
}

/* ---- sidebar "Gamintojas" filter: mockup checkboxes (20px box, dark green when ticked),
   regular-weight names, counts right-aligned and muted like the category list ---- */
.page-category .sg-scope .sg-filter-list .sg-cat-item{padding:0}
.page-category .sg-scope .sg-filter-row{display:flex;align-items:center;gap:10px;width:100%;max-width:none;margin:0;padding:7px 0;font-size:14px;font-weight:400;line-height:1.4;color:#3e3d39;cursor:pointer}
.page-category .sg-scope .sg-filter-row .sg-filter-name{flex:1 1 auto;min-width:0}
.page-category .sg-scope .sg-filter-row .sg-cat-qty{margin-left:auto}
.page-category .sg-scope .sg-filter-row:hover .sg-filter-name{color:#8a6a3d}
.page-category .sg-scope input[type=checkbox].sg-filter-brand{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:none;width:20px;height:20px;margin:0;padding:0;border:1.5px solid #9a9587;border-radius:3px;background:#fff no-repeat center/14px 14px;cursor:pointer;transition:background-color .15s,border-color .15s}
.page-category .sg-scope .sg-filter-row:hover input[type=checkbox].sg-filter-brand{border-color:#1f3326}
.page-category .sg-scope input[type=checkbox].sg-filter-brand:checked{border-color:#1f3326;background-color:#1f3326;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E")}
.page-category .sg-scope .sg-filter-row input:checked + .sg-filter-name{color:#1f3326}

/* ---- toolbar: count left, styled selects + a quiet compare link right, one row on desktop ---- */
.page-category .sg-scope .sg-cat-toolbar > .sg-cat-count{margin-left:0}
.page-category .sg-scope .sg-cat-toolbar-right{margin-left:auto;gap:10px 14px}
.page-category .sg-scope .sg-cat-toolbar .sg-toolbar-field{margin:0;font-size:14px;font-weight:400}
.page-category .sg-scope .sg-cat-toolbar .sg-toolbar-field > span{font-weight:400}
.page-category .sg-scope .sg-cat-toolbar .sg-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:40px;width:196px;min-width:0;margin:0;padding:0 34px 0 12px;border:1px solid #cfc9bb;border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322231f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;font-size:14px;color:#22231f;box-shadow:none;cursor:pointer;transition:border-color .15s}
.page-category .sg-scope .sg-cat-toolbar .sg-select:hover{border-color:#1f3326}
.page-category .sg-scope .sg-cat-toolbar .sg-select-narrow{width:88px} /* fits "Visos" (all products on one page) */
/* #compare-total: common.js rewrites its text after "add to compare" — the icon lives in CSS */
.page-category .sg-scope .sg-cat-toolbar .sg-cmp-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.3;color:#1f3326;white-space:nowrap}
.page-category .sg-scope .sg-cat-toolbar .sg-cmp-link::before{content:"";flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3326' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h13M7 7l3-3M7 7l3 3M17 17H4M17 17l-3 3M17 17l-3-3'/%3E%3C/svg%3E") no-repeat center/16px 16px}
.page-category .sg-scope .sg-cat-toolbar .sg-cmp-link:hover{color:#8a6a3d;text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){
  /* phones: the sort select alone (the compare page stays reachable from the "added" notice) */
  .page-category .sg-scope .sg-cat-toolbar-right #compare-total{display:none}
  .page-category .sg-scope .sg-cat-toolbar-right{margin-left:0}
}

/* ---- pager (built in category.tpl): 44px boxes, chevrons, centred "…"; its results line is
   hidden — the toolbar above the grid already says "Rodoma … iš …" ---- */
.page-category .sg-scope .sg-pagination{margin-top:40px}
.page-category .sg-scope .sg-pagination .results{display:none}
.page-category .sg-scope .sg-pagination .links{align-items:center;gap:8px}
.page-category .sg-scope .sg-pagination .links a,
.page-category .sg-scope .sg-pagination .links b{min-width:44px;height:44px;padding:0 10px;border-color:#cfc9bb;background:#fff;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;transition:border-color .15s}
.page-category .sg-scope .sg-pagination .links b{background:#1f3326;border-color:#1f3326;color:#fff}
.page-category .sg-scope .sg-pagination .links a:hover{border-color:#1f3326;color:#1f3326}
.page-category .sg-scope .sg-pagination .links .sg-pg-arrow{padding:0;color:#22231f}
.page-category .sg-scope .sg-pagination .links .sg-pg-gap{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:44px;padding:0;border:0;background:none;color:#6b6860;font-size:16px;font-weight:600}
.page-category .sg-scope .sg-pagination .links .sg-pg-hd{display:none !important}
@media (min-width:641px){
  .page-category .sg-scope .sg-pagination .links .sg-pg-mo{display:none !important}
}
@media (max-width:640px){
  .page-category .sg-scope .sg-pagination{margin-top:28px}
  .page-category .sg-scope .sg-pagination .links{gap:5px}
  .page-category .sg-scope .sg-pagination .links a,
  .page-category .sg-scope .sg-pagination .links b{min-width:38px;height:38px;padding:0 6px}
  .page-category .sg-scope .sg-pagination .links .sg-pg-gap{min-width:16px;height:38px}
  .page-category .sg-scope .sg-pagination .links .sg-pg-hm,
  .page-category .sg-scope .sg-pagination .links .sg-pg-do{display:none !important}
}

/* ---- empty category: one white box with the message and its button, centred ---- */
.page-category .sg-scope .sg-cat-empty{display:flex;flex-direction:column;align-items:center;gap:20px;padding:56px 24px;background:#fff;border:1px solid #e2ddd1;border-radius:6px;text-align:center;font-size:15px;line-height:1.6;color:#3e3d39}
.page-category .sg-scope .sg-cat-empty .sg-empty-buttons{margin:0}

/* ---- "Žymos:" tag line as chips (same look as the brand page's tags) ----
   font-size:0 hides the bare commas the vQmod puts between the links (text nodes = zero-width
   flex items that still take a gap each: 4px gap = 8px between chips). Chips that only repeat
   the heading / another chip get .sg-tag-repeat from the page script and are hidden (they stay
   in the HTML); a line with nothing left gets .sg-tags-repeat. */
.page-category .sg-scope .sg-cat-main > .gen-tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:40px 0 0;font-size:0;line-height:1}
.page-category .sg-scope .sg-cat-main > .gen-tags b{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;font-weight:600;color:#6b6860;margin-right:8px}
.page-category .sg-scope .sg-cat-main > .gen-tags a{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border:1px solid #e2ddd1;border-radius:4px;background:#fff;color:#1f3326;font-size:13px;font-weight:600;line-height:1.3;text-decoration:none;transition:border-color .15s,color .15s}
.page-category .sg-scope .sg-cat-main > .gen-tags a:hover{border-color:#1f3326;color:#1f3326}
.page-category .sg-scope .sg-cat-main > .gen-tags a:empty{display:none} /* "a, b," in the admin field */
.page-category .sg-scope .sg-cat-main > .gen-tags a.sg-tag-repeat,
.page-category .sg-scope .sg-cat-main > .gen-tags.sg-tags-repeat{display:none}

/* ---- SEO text block: the module's h2 is its title, the h3 a subtitle. The divider spans the
   product column; the text keeps a readable line length. ---- */
.page-category .sg-scope .sg-cat-seo{max-width:none;margin-top:48px;padding-top:36px}
.page-category .sg-scope .sg-cat-seo-text{max-width:72ch}
.page-category .sg-scope .sg-cat-seo > h2{font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-size:24px !important;font-weight:700 !important;line-height:1.3 !important;color:#22231f !important;text-transform:none !important;margin:0 !important}
.page-category .sg-scope .sg-cat-seo > h3{font-family:'Open Sans',Helvetica,Arial,sans-serif !important;font-size:15px !important;font-weight:600 !important;line-height:1.5 !important;color:#8a6a3d !important;text-transform:none !important;margin:6px 0 0 !important}
/* the module often repeats the H1 in the h2, or the h2 in the h3 (the template adds these classes) */
.page-category .sg-scope .sg-cat-seo-h2dup > h2,
.page-category .sg-scope .sg-cat-seo-h3dup > h3{display:none !important}
.page-category .sg-scope .sg-cat-seo-h2dup > h3{margin-top:0 !important}
.page-category .sg-scope .sg-cat-seo > h2 ~ .sg-cat-seo-text,
.page-category .sg-scope .sg-cat-seo > h3 ~ .sg-cat-seo-text{margin-top:18px}
.page-category .sg-scope .sg-cat-seo-h2dup.sg-cat-seo-h3dup > .sg-cat-seo-text{margin-top:0}
.page-category .sg-scope .sg-cat-seo-text > :last-child{margin-bottom:0}
.page-category .sg-scope .sg-cat-seo-text img{max-width:100%;height:auto}
/* page 2, 3…: the same category text again under every page of the list — kept in the HTML, not shown */
.page-category .sg-scope .sg-cat-seo-repeat{display:none}

/* shared sg-design.css rule for a module h2/h3 right after the h1 (not used with this store's
   "before description" setting): keep it AA-readable on the category page too */
.page-category .sg-scope #content h1 + h2,
.page-category .sg-scope #content h1 + h3{color:#6b6860 !important}

@media (max-width:640px){
  .page-category .sg-scope .sg-cat-main > .gen-tags{margin-top:32px}
  .page-category .sg-scope .sg-cat-seo{margin-top:36px;padding-top:28px}
  .page-category .sg-scope .sg-cat-seo > h2{font-size:20px !important}
}

/* ---- tablets: the category sidebar collapses behind the same button as on phones ----
   The theme (offcanvas CSS, max-width:768px) hides .offcanvas-sidebar and shows the
   "Kategorijos / Filtrai ir kategorijos" button row (.row.visible-xs, <768px); live common.js
   marks the sidebar's parent #oc-column-left.offcanvas-sidebar and toggles .column-left-active
   on #columns with that button (click, any width). Here the same rules extend to tablet widths:
   up to 1100px (the sidebar sits above the products below 1101px). The page script moves the
   button into the title bar; the row rule below only matters if that script does not run. */
@media (min-width:768px) and (max-width:1100px){
  .page-category #columns.offcanvas-siderbars > .container > .row.visible-xs{display:block !important}
  /* its inner .container would be Bootstrap's max-width:750px box: align the button with the page */
  .page-category #columns.offcanvas-siderbars > .container > .row.visible-xs > .container{width:auto;max-width:none;padding:0 10px}
  .page-category .offcanvas-siderbars .offcanvas-sidebar{display:none}
  /* open: the panels side by side instead of one tall stack */
  .page-category .offcanvas-siderbars.column-left-active #oc-column-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;margin-bottom:28px}
  .page-category .offcanvas-siderbars.column-left-active #oc-column-left .sg-side-panel{margin-bottom:0}
  /* the (tall) category list on the left, the filter panels stacked on the right; alone it spans both */
  .page-category .offcanvas-siderbars.column-left-active #oc-column-left > #column-left{grid-row:span 2}
  .page-category .offcanvas-siderbars.column-left-active #oc-column-left > :only-child{grid-column:1 / -1}
}

/* ---- checkout.css ---- */
/* ==========================================================================
   Cart + checkout
   - cart: checkout/cart.tpl (its own .sg-cart-* classes); the empty cart is error/not_found.tpl on
     the cart route -> scoped with the route's body class .page-checkout-cart
   - checkout: checkout/checkout.tpl + its AJAX steps + payment/bank_transfer.tpl; every rule is
     scoped to .sg-scope .sg-checkout-wrap, which only checkout.tpl renders
   - order placed: common/success.tpl on the checkout/success route (.page-checkout-success)
   ========================================================================== */

/* ==================================== CART ==================================== */

/* ---- layout: items | summary on wide screens; "Tęsti apsipirkimą" and the coupon / gift voucher /
   shipping estimate panel follow under the items. Narrower: the summary with "Formuoti užsakymą"
   comes straight after the items (the DOM order), the optional panel last. ---- */
.sg-scope .sg-cart-layout{grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto auto 1fr;grid-template-areas:"main side" "actions side" "next side";column-gap:32px;row-gap:20px}
.sg-scope .sg-cart-layout > .sg-cart-main{grid-area:main}
.sg-scope .sg-cart-layout > .sg-cart-side{grid-area:side}
.sg-scope .sg-cart-layout > .sg-cart-actions{grid-area:actions;margin:0}
.sg-scope .sg-cart-layout > .sg-cart-next{grid-area:next;margin:8px 0 0}

/* ---- item rows (table layout on wide screens) ---- */
.sg-scope .sg-cart-head-row,.sg-scope .sg-cart-row{grid-template-columns:84px minmax(0,1fr) 110px 120px 110px 32px}
.sg-scope .sg-cart-img a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
/* no thumbnail (product without a photo) or one that failed to load (cart.tpl marks it): a neutral box */
.sg-scope .sg-cart-img img.sg-img-broken{display:none}
.sg-scope .sg-cart-img:not(:has(img:not(.sg-img-broken))){background:#f6f4ee}
.sg-scope .sg-cart-info .sg-pname:hover{color:#8a6a3d}
/* quantity: the field and its "Atnaujinti" button as one joined control (the generic .sg-inp width:100%
   used to stretch the field across the whole row once the row stacked) */
.sg-scope .sg-cart-qty{display:inline-flex;align-items:stretch;gap:0}
.sg-scope .sg-cart-qty input.sg-qty-input{width:60px;flex:0 0 60px;height:44px;padding:0 6px;border-radius:4px 0 0 4px;text-align:center;font-weight:600;font-size:15px}
.sg-scope .sg-cart-qty input.sg-qty-input:last-child{border-radius:4px}
.sg-scope .sg-cart-qty input.sg-qty-input[disabled]{background:#faf9f5;color:#6b6860}
.sg-scope .sg-cart-qty .sg-qty-update{width:44px;height:44px;flex:0 0 44px;padding:0;border:1px solid #cfc9bb;border-left:0;border-radius:0 4px 4px 0;background:#f6f4ee !important;color:#1f3326}
.sg-scope .sg-cart-qty .sg-qty-update:hover{border-color:#cfc9bb;background:#eef0e8 !important}

/* ---- summary + "Formuoti užsakymą" ---- */
.sg-scope .sg-summary-panel{padding:24px 26px}
.sg-scope .sg-cart-totals .sg-tot{align-items:baseline;gap:16px;color:#3e3d39}
.sg-scope .sg-cart-totals .sg-tot b{font-weight:400}
.sg-scope .sg-cart-totals .sg-tot > span:last-child{flex:none;text-align:right;font-weight:600;color:#22231f}
.sg-scope .sg-cart-totals .sg-tot:last-child b,.sg-scope .sg-cart-totals .sg-tot:last-child > span:last-child{font-weight:700;color:#22231f}
/* the stock .sg-btn rule (width:auto / height / margin with !important) beat the button's full width */
.sg-scope .sg-cart-checkout-row{margin-top:18px}
.sg-scope .sg-cart-checkout-row .sg-btn{width:100% !important;height:52px !important;font-size:15px !important}

/* ---- coupon / gift voucher / shipping estimate ---- */
.sg-scope .sg-cart-next .sg-panel-h h2{margin:0}
.sg-scope .sg-cart-next-body{padding:18px 24px 20px}
.sg-scope .sg-cart-next-body > p{margin:0;font-size:14px;line-height:1.55;color:#6b6860}
.sg-scope .sg-cart-next-opts{gap:12px 28px}
.sg-scope .sg-cart-next-opts input[type=radio]{width:19px;height:19px;margin:0;flex:none;accent-color:#1f3326;cursor:pointer}
.sg-scope .sg-cart-next-opts label{margin:0;font-weight:600;font-size:14px;line-height:1.4;color:#22231f;cursor:pointer}
/* only the panel that is open draws a divider and padding: the wrapper used to keep both while every
   panel was hidden, which left an empty band under the options. display:block = the same layout
   whether the page opens a panel (inline display:block) or the script shows it (.show()). */
.sg-scope .sg-cart-module{border-top:0;padding:0}
.sg-scope .sg-cart-module-panel{display:block;border-top:1px solid #eeeae1;padding:20px 24px}
.sg-scope .sg-cart-module-panel > p{margin:0 0 6px;font-size:14px;color:#6b6860}
.sg-scope .sg-cart-module .sg-inline-form{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.sg-scope .sg-cart-module .sg-inline-form label{flex:0 0 auto;margin:0;font-weight:600;font-size:13px;color:#22231f}
.sg-scope .sg-cart-module .sg-inline-form input.sg-inp{flex:0 1 240px;width:240px;min-width:0;height:44px}
.sg-scope .sg-cart-module .required{color:#b9312f}
.sg-scope .sg-cart-module .sg-shipping-table{margin:6px 0 16px}
.sg-scope .sg-cart-module .sg-shipping-table td{padding:6px 16px 6px 0}
.sg-scope .sg-cart-module .sg-shipping-table td:first-child{white-space:nowrap;font-weight:600;font-size:13px;color:#22231f}
.sg-scope .sg-cart-module .sg-shipping-table select.sg-inp,.sg-scope .sg-cart-module .sg-shipping-table input.sg-inp{width:300px;max-width:100%;height:44px}
.sg-scope .sg-cart-module .sg-shipping-table + .sg-btn{margin-top:4px !important}

@media (max-width:1199px){
  /* the items get the full width; under them "Tęsti apsipirkimą" + the optional panel on the left and
     the summary with "Formuoti užsakymą" on the right, right below the items */
  .sg-scope .sg-cart-layout{grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"main main" "actions side" "next side"}
  .sg-scope .sg-cart-side{position:static}
}
@media (max-width:991px){
  .sg-scope .sg-cart-head-row{display:none}
  /* every item as a card: photo | name + model, then unit price, quantity and line total on one line;
     "Pašalinti" in the corner. The unit price and quantity carry their column names (data-label). */
  .sg-scope .sg-cart-row{position:relative;grid-template-columns:84px minmax(0,1fr) auto minmax(96px,auto);grid-template-areas:"img info info info" "img price qty total";column-gap:18px;row-gap:12px;align-items:center;padding:18px 20px}
  .sg-scope .sg-cart-img{grid-area:img;align-self:start}
  .sg-scope .sg-cart-info{grid-area:info;align-self:start;padding-right:36px}
  .sg-scope .sg-cart-price{grid-area:price;min-width:0;white-space:normal;font-size:13px;line-height:1.4}
  .sg-scope .sg-cart-price::before{content:attr(data-label) ": ";color:#6b6860}
  .sg-scope .sg-cart-qty{grid-area:qty}
  .sg-scope .sg-cart-qty::before{content:attr(data-label);align-self:center;margin-right:10px;font-size:13px;color:#6b6860}
  .sg-scope .sg-cart-total{grid-area:total;justify-self:end;font-size:16px}
  .sg-scope .sg-cart-remove{position:absolute;top:12px;right:12px}
}
@media (max-width:767px){
  /* one column: items, the summary with "Formuoti užsakymą", "Tęsti apsipirkimą", the optional panel */
  .sg-scope .sg-cart-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"main" "side" "actions" "next";row-gap:16px}
}
@media (max-width:640px){
  .sg-scope .sg-cart-row{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"img info info" "img price price" "qty qty total";column-gap:14px;row-gap:10px;padding:16px}
  .sg-scope .sg-cart-img{width:64px;height:64px;padding:4px}
  .sg-scope .sg-cart-info{padding-right:30px}
  .sg-scope .sg-cart-remove{top:8px;right:8px}
  .sg-scope .sg-cart-total{font-size:17px}
  .sg-scope .sg-summary-panel{padding:20px}
  .sg-scope .sg-cart-actions .sg-btn{width:100% !important}
  .sg-scope .sg-cart-next .sg-panel-h{padding:16px 18px}
  .sg-scope .sg-cart-next-body{padding:16px 18px}
  .sg-scope .sg-cart-next-opts{flex-direction:column;align-items:flex-start;gap:12px}
  .sg-scope .sg-cart-module-panel{padding:18px}
  .sg-scope .sg-cart-module .sg-inline-form label{flex-basis:100%}
  .sg-scope .sg-cart-module .sg-inline-form input.sg-inp{flex:1 1 140px;width:auto}
  .sg-scope .sg-cart-module .sg-shipping-table,.sg-scope .sg-cart-module .sg-shipping-table tbody,
  .sg-scope .sg-cart-module .sg-shipping-table tr,.sg-scope .sg-cart-module .sg-shipping-table td{display:block;width:100%}
  .sg-scope .sg-cart-module .sg-shipping-table td{padding:0}
  .sg-scope .sg-cart-module .sg-shipping-table td:first-child{padding:12px 0 6px}
  .sg-scope .sg-cart-module .sg-shipping-table select.sg-inp,.sg-scope .sg-cart-module .sg-shipping-table input.sg-inp{width:100%}
}

/* ---- empty cart (checkout/cart renders error/not_found.tpl): the header's cart icon instead of the
   "not found" magnifier ---- */
.page-checkout-cart .sg-scope .sg-notfound-ico .sg-ico{display:none}
.page-checkout-cart .sg-scope .sg-notfound-ico::before{content:"";width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3326' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 12.4a1 1 0 0 0 1 .8h9.2a1 1 0 0 0 1-.8L21 8H6'/%3E%3C/svg%3E") center/contain no-repeat}

/* ================================== CHECKOUT ================================== */

/* ---- title row + progress: cart (done) -> order details -> confirmation; three fixed steps, the
   script in checkout.tpl only moves the "current" mark to the last one on the confirm panel ---- */
.sg-scope .sg-checkout-wrap .sg-checkout-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;margin:0 0 24px}
.sg-scope .sg-checkout-wrap .sg-checkout-top .sg-checkout-page-title{margin:0 !important}
.sg-scope .sg-checkout-wrap ol.sg-checkout-steps{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:nowrap;gap:10px}
.sg-scope .sg-checkout-wrap .sg-step{display:flex;align-items:center;gap:8px;margin:0;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;line-height:1.3;color:#6b6860}
.sg-scope .sg-checkout-wrap .sg-step + .sg-step::before{content:"";width:28px;height:1px;background:#cfc9bb;margin-right:2px;flex:none}
.sg-scope .sg-checkout-wrap .sg-step-done + .sg-step::before{background:#1f3326}
.sg-scope .sg-checkout-wrap .sg-step-num{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;background:#eeeae1;border:0;color:#6b6860;font-size:12px;font-weight:700;line-height:1}
.sg-scope .sg-checkout-wrap .sg-step-num svg{display:none}
.sg-scope .sg-checkout-wrap .sg-step-done{color:#1f3326}
.sg-scope .sg-checkout-wrap .sg-step-done .sg-step-num{background:#1f3326;color:#fff}
.sg-scope .sg-checkout-wrap .sg-step-done .sg-step-n{display:none}
.sg-scope .sg-checkout-wrap .sg-step-done .sg-step-num svg{display:block}
.sg-scope .sg-checkout-wrap .sg-step-on{color:#22231f}
.sg-scope .sg-checkout-wrap .sg-step-on .sg-step-num{background:#8a6a3d;color:#fff}

/* ---- accordion panels ---- */
.sg-scope .sg-checkout-wrap .sg-checkout-wizard{gap:12px}
.sg-scope .sg-checkout-wrap .sg-checkout-panel + .sg-checkout-panel{margin-top:0}
.sg-scope .sg-checkout-wrap .sg-checkout-panel{transition:border-color .2s,box-shadow .2s}
/* stock .checkout-heading: grey box with its own border and a 15px bottom margin that left an
   empty strip under every collapsed step */
.sg-scope .sg-checkout-wrap .sg-checkout-panel-h{margin:0;border:0;min-height:62px;padding-top:16px;padding-bottom:16px}
.sg-scope .sg-checkout-wrap .sg-checkout-panel-body{border-top:1px solid #eeeae1}
/* the step that is open now (class toggled by the presentation script in checkout.tpl) */
.sg-scope .sg-checkout-wrap .sg-checkout-panel-open{border-color:#d6cfbe;box-shadow:0 10px 28px rgba(31,51,38,.07)}
.sg-scope .sg-checkout-wrap .sg-checkout-panel-open > .sg-checkout-panel-h::before{background:#8a6a3d}
/* steps not reached yet (not open, not before the open one, no "Redaguoti" link): muted */
.sg-scope .sg-checkout-wrap .sg-checkout-js > .sg-checkout-panel:not(.sg-checkout-panel-open):not(.sg-checkout-panel-done):not(.sg-checkout-panel-past) > .sg-checkout-panel-h:not(:has(> a)){color:#6b6860}
.sg-scope .sg-checkout-wrap .sg-checkout-js > .sg-checkout-panel:not(.sg-checkout-panel-open):not(.sg-checkout-panel-done):not(.sg-checkout-panel-past) > .sg-checkout-panel-h:not(:has(> a))::before{background:#eeeae1;color:#6b6860}
/* a completed step: a check mark in its number circle, the same on every finished step -- the
   steps above the open one, a signed-in customer's first step and every step the flow gave a
   "Redaguoti" link. The link (where the flow offers one) stays on the right; no second mark. */
.sg-scope .sg-checkout-wrap .sg-checkout-panel-done > .sg-checkout-panel-h::before,
.sg-scope .sg-checkout-wrap .sg-checkout-panel-past > .sg-checkout-panel-h::before,
.sg-scope .sg-checkout-wrap .sg-checkout-panel:not(.sg-checkout-panel-open) > .sg-checkout-panel-h:has(> a)::before{content:"";background:#1f3326 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
/* "Redaguoti" (appended by the flow's JS, no class): a small pencil link with a comfortable hit area */
.sg-scope .sg-checkout-wrap .sg-checkout-panel-h > a{display:inline-flex;align-items:center;gap:6px;margin:-6px -8px -6px auto;padding:6px 8px;border-radius:4px;font-size:13px;color:#8a6a3d;text-decoration:none}
.sg-scope .sg-checkout-wrap .sg-checkout-panel-h > a::before{content:"";width:14px;height:14px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E") center/contain no-repeat}
.sg-scope .sg-checkout-wrap .sg-checkout-panel-h > a:hover{background:#f6f4ee;color:#75592f}
/* "Redaguoti" on the panel that is already open would only re-open it: hidden there */
.sg-scope .sg-checkout-wrap .sg-checkout-panel-open > .sg-checkout-panel-h > a{display:none}

/* ---- step content ---- */
.sg-scope .sg-checkout-wrap .sg-checkout-lead{margin:0 0 14px}
.sg-scope .sg-checkout-wrap .sg-field{position:relative}
.sg-scope .sg-checkout-wrap .sg-field > label{margin:0}
/* two fields per row: an address always starts a new row, so "Adresas 1 | Adresas 2" stay a pair
   whichever company fields (Įmonė / Registracijos Nr. / PVM kodas) are shown */
.sg-scope .sg-checkout-wrap .sg-form-grid > .sg-co-row-start{grid-column-start:1}
/* validation messages: the original JS inserts <span class="error"> after the field (or after the
   hidden <br class="sg-err-anchor"> that follows it); the message itself uses the site-wide
   .sg-scope span.error style (css_parts/forms.css) */
.sg-scope .sg-checkout-wrap .sg-err-anchor{display:none}
.sg-scope .sg-checkout-wrap div.error{background:#fbeceb;border:1px solid #e3a6a3;color:#8f2b28;padding:12px 16px;border-radius:4px;font-size:14px}
/* warning box: the JS-built close button is the stock close.png -> drawn as a thin "x" */
.sg-scope .sg-checkout-wrap div.warning{position:relative;padding-right:46px !important;line-height:1.5}
.sg-scope .sg-checkout-wrap div.warning a{color:#8f2b28;text-decoration:underline}
.sg-scope .sg-checkout-wrap div.warning img.close{position:absolute;top:50%;right:12px;margin-top:-12px;float:none;box-sizing:border-box;width:24px;height:24px;padding:12px;border-radius:4px;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f2b28' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/12px no-repeat}
.sg-scope .sg-checkout-wrap div.warning img.close:hover{background-color:rgba(143,43,40,.08)}
/* loading indicator: the JS inserts the stock loading.gif -> a small ring spinner instead */
.sg-scope .sg-checkout-wrap .wait{display:inline-flex;align-items:center;margin-left:10px;font-size:0;line-height:0}
.sg-scope .sg-checkout-wrap .wait img{display:none}
.sg-scope .sg-checkout-wrap .wait::after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid #d6cfbe;border-top-color:#1f3326;animation:sg-co-spin .7s linear infinite}
.sg-scope .sg-checkout-wrap .sg-field > .wait{position:absolute;right:40px;top:37px;margin:0}
@keyframes sg-co-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sg-scope .sg-checkout-wrap .wait::after{animation-duration:2s}}
/* every step ends the same way: divider line, the step's button on the right (.sg-form-actions) */
.sg-scope .sg-checkout-wrap .sg-form-actions{align-items:center}

/* ---- 1: new / returning customer ---- */
.sg-scope .sg-checkout-wrap .sg-co-login{align-items:stretch;gap:24px 56px}
.sg-scope .sg-checkout-wrap .sg-co-login-col{display:flex;flex-direction:column;min-width:0}
.sg-scope .sg-checkout-wrap .sg-co-login-col .sg-checkout-title{margin:0 0 6px !important}
.sg-scope .sg-checkout-wrap .sg-co-login-col .sg-checkout-lead{margin:0 0 18px}
.sg-scope .sg-checkout-wrap .sg-co-login-hint{margin:16px 0 22px;font-size:13px;line-height:1.55}
.sg-scope .sg-checkout-wrap .sg-co-login-col .sg-field + .sg-field{margin-top:16px}
.sg-scope .sg-checkout-wrap .sg-co-login-forgot{margin:12px 0 22px}
/* both columns' button rows sit at the bottom, on one line */
.sg-scope .sg-checkout-wrap .sg-co-login-actions{margin-top:auto;display:flex;align-items:center}
.sg-scope .sg-checkout-wrap .sg-co-login-returning{position:relative}
.sg-scope .sg-checkout-wrap .sg-co-login-returning::before{content:"";position:absolute;left:-28px;top:0;bottom:0;border-left:1px solid #eeeae1}

/* ---- choices (account type, saved address, shipping + payment method) ---- */
.sg-scope .sg-checkout-wrap .sg-choice{transition:border-color .15s}
.sg-scope .sg-checkout-wrap .sg-choice:hover{border-color:#9a9587}
.sg-scope .sg-checkout-wrap .sg-choice:has(input:checked){border-color:#1f3326;box-shadow:inset 0 0 0 .5px #1f3326;border-width:1px}
.sg-scope .sg-checkout-wrap .sg-choice-name{flex:1 1 auto;min-width:0;font-weight:600}
.sg-scope .sg-checkout-wrap .sg-choice-price-free{color:#2e6b3a}
.sg-scope .sg-checkout-wrap .sg-co-methods{display:flex;flex-direction:column;gap:12px;margin:0 0 24px}
/* a method that lists its own title (several options or an error) gets air above it */
.sg-scope .sg-checkout-wrap .sg-co-method-group:not(:first-child):has(> .sg-co-method-title){margin-top:10px}
.sg-scope .sg-checkout-wrap .sg-co-method-group{display:flex;flex-direction:column;gap:12px}
.sg-scope .sg-checkout-wrap .sg-co-method-title{font-family:Montserrat,sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860}
.sg-scope .sg-checkout-wrap .sg-co-comment textarea.sg-inp{height:112px;min-height:80px}
/* the order comment is asked once: in the shipping-method step when the order has delivery steps.
   The payment-method step keeps its textarea in the form (pre-filled with that same comment and
   sent again, as before), just not shown a second time. */
.sg-scope .sg-checkout-wrap .sg-co-has-shipping #payment-method .sg-co-comment{display:none}

/* saved addresses: the original <select size> list, styled as a list of rows */
.sg-scope .sg-checkout-wrap #payment-existing,.sg-scope .sg-checkout-wrap #shipping-existing{margin:-2px 0 2px 33px}
.sg-scope .sg-checkout-wrap select.sg-co-addr-list{height:auto;padding:6px;background-image:none;overflow-y:auto;cursor:pointer}
.sg-scope .sg-checkout-wrap select.sg-co-addr-list option{padding:10px 12px;border-radius:3px;font-size:14px;line-height:1.4;color:#22231f;white-space:normal}
.sg-scope .sg-checkout-wrap select.sg-co-addr-list option:checked{background:#eef0e8 linear-gradient(#eef0e8,#eef0e8);color:#1f3326;font-weight:600}
.sg-scope .sg-checkout-wrap select.sg-co-addr-list:focus option:checked{background:#e0e5d6 linear-gradient(#e0e5d6,#e0e5d6);color:#1f3326}
.sg-scope .sg-checkout-wrap #payment-new,.sg-scope .sg-checkout-wrap #shipping-new{margin-top:6px}

/* newsletter / same-address options + agreement */
.sg-scope .sg-checkout-wrap .sg-co-options{margin-top:24px;padding-top:18px;border-top:1px solid #eeeae1;display:flex;flex-direction:column;gap:12px}
.sg-scope .sg-checkout-wrap .sg-co-options.sg-chk-row{flex-direction:row;align-items:center;gap:10px}
.sg-scope .sg-checkout-wrap .sg-co-options label{font-weight:400;font-size:14px;color:#22231f}
.sg-scope .sg-checkout-wrap .sg-co-agree-actions{justify-content:space-between;flex-wrap:wrap;gap:14px 24px}
/* the agreement text reads like the "same address" option above it (regular weight); only the
   document name inside it (<b> in the language string) stays bold */
.sg-scope .sg-checkout-wrap .sg-co-agree{align-items:flex-start;max-width:640px;margin:0;font-weight:400;font-size:14px;line-height:1.5;color:#22231f}
.sg-scope .sg-checkout-wrap .sg-co-agree .sg-cb{margin-top:1px}
.sg-scope .sg-checkout-wrap .sg-co-agree a{color:#8a6a3d;text-decoration:underline}

/* ---- 6: order review (confirm.tpl) ---- */
/* stock .checkout-product table had a grey header row and side borders */
.sg-scope .sg-checkout-wrap .checkout-product table.sg-checkout-otable{border:0;margin:0}
.sg-scope .sg-checkout-wrap .sg-checkout-otable thead td{background:transparent;padding-top:0}
.sg-scope .sg-checkout-wrap .sg-checkout-otable td:last-child{padding-right:0}
.sg-scope .sg-checkout-wrap .sg-checkout-otable td.quantity{text-align:right}
.sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.name{width:58%}
/* same emphasis as the cart: the unit price is plain text, the line total is the bold amount
   (sg-design.css gave both columns the same 600 Montserrat) */
.sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.price{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:400;color:#3e3d39}
.sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.total{font-family:Montserrat,sans-serif;font-weight:700;color:#22231f}
/* the model: a quiet line under the product name (it has no column of its own) */
.sg-scope .sg-checkout-wrap .sg-checkout-otable .sg-co-model{display:block;margin-top:3px;font-size:12.5px;font-weight:400;color:#6b6860}
.sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot tr:first-child td{padding-top:16px;border-top:1px solid #e2ddd1}
.sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot td.price b{font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:400;color:#3e3d39}
.sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot td.total{font-family:Montserrat,sans-serif;font-weight:600;color:#22231f}
.sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot tr:last-child td.price b{font-family:Montserrat,sans-serif;font-weight:700;color:#22231f}
.sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot tr:last-child td{font-size:19px;font-weight:700}
.sg-scope .sg-checkout-wrap .sg-co-recurring td{font-size:13px;color:#6b6860;padding-bottom:4px}
.sg-scope .sg-checkout-wrap .sg-co-recurring-ico{display:inline-flex;vertical-align:-3px;margin-right:8px;color:#8a6a3d}

/* payment method's own block under the order (payment/bank_transfer.tpl) */
.sg-scope .sg-checkout-wrap .sg-checkout-order-payment{margin-top:22px;padding-top:24px;line-height:1.65}
.sg-scope .sg-checkout-wrap .sg-co-bank .sg-checkout-title{font-size:17px;margin:0 0 12px !important}
.sg-scope .sg-checkout-wrap .sg-co-bank .sg-checkout-title b{font-weight:inherit}
.sg-scope .sg-checkout-wrap .sg-co-bank-box{background:#faf9f5;border:1px solid #eeeae1;border-radius:4px;padding:18px 22px;font-size:14px;line-height:1.7;color:#3e3d39}
.sg-scope .sg-checkout-wrap .sg-co-bank-box p + p{margin-top:10px}
.sg-scope .sg-checkout-wrap .sg-co-bank-lead{font-weight:600;color:#22231f}
.sg-scope .sg-checkout-wrap .sg-co-bank-details{overflow-wrap:anywhere}
.sg-scope .sg-checkout-wrap .sg-co-bank-actions{margin-top:22px}
/* other payment modules' own stock templates (free_checkout, paysera ...): same look */
.sg-scope .sg-checkout-wrap .payment .buttons{display:flex;justify-content:flex-end;align-items:center;background:none;border:0;border-top:1px solid #eeeae1;border-radius:0;margin:22px 0 0;padding:18px 0 0;overflow:visible}
.sg-scope .sg-checkout-wrap .payment .buttons .right,.sg-scope .sg-checkout-wrap .payment .buttons .left{float:none;display:flex;align-items:center;gap:10px}
.sg-scope .sg-checkout-wrap .payment input.button,.sg-scope .sg-checkout-wrap .payment a.button{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border:0;border-radius:4px;background:#1f3326;color:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;letter-spacing:.02em;box-shadow:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.sg-scope .sg-checkout-wrap .payment input.button:hover,.sg-scope .sg-checkout-wrap .payment a.button:hover{background:#2a4533;box-shadow:none;color:#fff}
.sg-scope .sg-checkout-wrap .payment h2{font-size:17px;margin:0 0 12px}

/* ---- tablet / phone ---- */
@media (max-width:991px){
  /* the progress always has its own row under the title (it no longer moves between steps) */
  .sg-scope .sg-checkout-wrap .sg-checkout-top{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:767px){
  .sg-scope .sg-checkout-wrap .sg-co-login-returning::before{left:0;right:0;top:-12px;bottom:auto;border-left:0;border-top:1px solid #eeeae1}
  .sg-scope .sg-checkout-wrap .sg-co-login-returning{padding-top:12px}
}
@media (max-width:640px){
  .sg-scope .sg-checkout-wrap .sg-checkout-top{align-items:stretch;margin-bottom:18px}
  /* all three steps keep their names: number above, name under it (may wrap to two lines) */
  .sg-scope .sg-checkout-wrap ol.sg-checkout-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:100%}
  .sg-scope .sg-checkout-wrap .sg-step{position:relative;flex-direction:column;justify-content:flex-start;gap:6px;min-width:0;padding:0 4px;text-align:center;font-size:12px;line-height:1.3}
  .sg-scope .sg-checkout-wrap .sg-step + .sg-step::before{position:absolute;top:12px;right:calc(50% + 18px);width:calc(100% - 36px);margin:0}
  .sg-scope .sg-checkout-wrap .sg-checkout-panel-h{min-height:56px;padding-top:12px;padding-bottom:12px}
  .sg-scope .sg-checkout-wrap #payment-existing,.sg-scope .sg-checkout-wrap #shipping-existing{margin-left:0}
  .sg-scope .sg-checkout-wrap .sg-choice{flex-wrap:nowrap;padding:14px 14px;gap:12px}
  .sg-scope .sg-checkout-wrap .sg-form-actions{justify-content:stretch}
  .sg-scope .sg-checkout-wrap .sg-form-actions .sg-btn{flex:1 1 auto}
  .sg-scope .sg-checkout-wrap .sg-co-login-actions .sg-btn{width:100% !important}
  .sg-scope .sg-checkout-wrap .sg-co-agree-actions .sg-btn{flex-basis:100%}
  .sg-scope .sg-checkout-wrap .sg-co-bank-box{padding:14px 16px}

  /* order review: one block per product, then label | amount rows for the totals */
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:3px;width:100%;padding:0 0 14px;margin-bottom:4px;border-bottom:1px solid #eeeae1}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td{display:block;width:auto !important;padding:0;border:0;text-align:left;white-space:normal}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.name{grid-column:1 / -1;font-size:15px;line-height:1.35;margin-bottom:2px}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.quantity,.sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.price{grid-column:1;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-weight:400;font-size:13px;color:#3e3d39}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.quantity,.sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.price{text-align:left}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.quantity::before,.sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.price::before{content:attr(data-label) ": ";color:#6b6860}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody td.total{grid-column:2;grid-row:2 / span 2;align-self:end;text-align:right;font-size:16px;font-weight:700;color:#22231f}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tbody tr.sg-co-recurring{display:block;border:0;padding:0}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot{display:block;width:100%}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot tr{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot td{display:block;width:auto;padding:7px 0;border:0 !important;text-align:left}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot td.total{text-align:right;white-space:nowrap}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot tr:first-child td{padding-top:10px}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot tr:last-child{border-top:1px solid #e2ddd1;margin-top:6px}
  .sg-scope .sg-checkout-wrap .sg-checkout-otable tfoot tr:last-child td{padding-top:12px;font-size:18px}
}

@media (max-width:400px){
  /* narrow phones: "Redaguoti" without its pencil, so step names like "Apmokėjimo detalės" stay on one line */
  .sg-scope .sg-checkout-wrap .sg-checkout-panel-h > a::before{display:none}
}

/* =============================== ORDER PLACED =============================== */
/* common/success.tpl on checkout/success: one centred card with the icon on top -- the same end-state
   look as the empty cart (the account pages keep their own left-aligned success panel) */
.page-checkout-success .sg-scope .sg-acctf .sg-success-panel{max-width:640px;margin:8px auto 0;padding:44px 40px 40px;text-align:center}
.page-checkout-success .sg-scope .sg-acctf .sg-success-ic{width:64px;height:64px;margin:0 auto 18px}
.page-checkout-success .sg-scope .sg-acctf .sg-success-ic .sg-ico{width:30px;height:30px}
.page-checkout-success .sg-scope .sg-acctf .sg-success-panel .sg-page-h1{font-size:28px !important;margin:0 0 12px !important}
.page-checkout-success .sg-scope .sg-acctf .sg-success-panel .sg-page-body{max-width:none;font-size:15px;color:#4a4943}
.page-checkout-success .sg-scope .sg-acctf .sg-success-panel .sg-page-body p:last-child{margin-bottom:0}
.page-checkout-success .sg-scope .sg-acctf .sg-success-panel .sg-form-actions{justify-content:center;margin-top:26px}
@media (max-width:640px){
  .page-checkout-success .sg-scope .sg-acctf .sg-success-panel{padding:32px 20px 28px}
  .page-checkout-success .sg-scope .sg-acctf .sg-success-panel .sg-page-h1{font-size:24px !important}
}

/* ---- descriptions.css ---- */
/* ===== product page: description tab (product/product.tpl #tab-description .sg-desc-body) =====
   Product descriptions are admin-editor HTML, much of it pasted from other shops / WordPress
   (inline fonts, sizes, colours, justify/centre alignment, fixed px widths, absolutely positioned
   video boxes, 500px tables...). These rules make every description read like the mockup's
   description column (maketas/preke.html): Open Sans 15px/1.7 #3e3d39, Montserrat headings,
   left aligned, max ~800px wide, rounded images, 16:9 videos, zebra spec tables.
   Inline style="" attributes can only be overridden with !important, hence the many !important.
   Everything is scoped to .page-product .sg-scope .sg-desc-body, so no other page is touched. */

.page-product .sg-scope .tab-content.sg-desc{padding:32px 0 8px}
.page-product .sg-scope .sg-desc-body{max-width:800px;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.7;color:#3e3d39;overflow-wrap:break-word;word-wrap:break-word;counter-reset:sg-desc-feature}
.page-product .sg-scope .sg-desc-body::after{content:"";display:table;clear:both}
/* safety net: a few pasted <img style="max-width:none !important"> cannot be capped from a stylesheet
   (inline !important wins), so the column clips instead of pushing the page sideways on phones */
.page-product .sg-scope .sg-desc-body{overflow-x:hidden;overflow-x:clip}

/* --- neutralise pasted inline typography / layout on every descendant --- */
.page-product .sg-scope .sg-desc-body *{
  font-family:inherit !important;line-height:inherit !important;color:inherit !important;
  letter-spacing:normal !important;word-spacing:normal !important;text-transform:none !important;
  text-align:left !important;text-indent:0 !important;white-space:normal !important;
  background-color:transparent !important;background-image:none !important;
  position:static !important;float:none !important;max-width:100% !important;min-width:0 !important;
  box-sizing:border-box !important;opacity:1 !important;visibility:visible !important;transform:none !important;
  box-shadow:none !important;text-shadow:none !important}
/* :where() keeps these at the specificity of the rule above, so the element rules below still win */
.page-product .sg-scope .sg-desc-body :where(:not(h1,h2,h3,h4,h5,h6,small,sub,sup)){font-size:inherit !important}
.page-product .sg-scope .sg-desc-body :where(:not(img,iframe,video,table,td,th,svg)){width:auto !important;height:auto !important;min-height:0 !important}
.page-product .sg-scope .sg-desc-body div,
.page-product .sg-scope .sg-desc-body span,
.page-product .sg-scope .sg-desc-body font,
.page-product .sg-scope .sg-desc-body center,
.page-product .sg-scope .sg-desc-body section,
.page-product .sg-scope .sg-desc-body article{padding:0 !important;margin-left:0 !important;margin-right:0 !important;border:0 !important;overflow:visible !important}
.page-product .sg-scope .sg-desc-body pre{white-space:pre-wrap !important;overflow-x:auto !important;font-family:Menlo,Consolas,monospace !important;font-size:13px !important}
.page-product .sg-scope .sg-desc-body small{font-size:13px !important}

/* --- text --- */
.page-product .sg-scope .sg-desc-body p{margin:0 0 14px !important;padding:0 !important;border:0 !important}
.page-product .sg-scope .sg-desc-body p:empty,
.page-product .sg-scope .sg-desc-body .sg-desc-empty{display:none !important}
.page-product .sg-scope .sg-desc-body img.sg-desc-broken{display:none !important}
/* chrome of a "Unite Gallery" slider pasted from another shop (thumbnail strip = duplicates of the
   photos already shown, arrows, zoom buttons): useless without its script */
.page-product .sg-scope .sg-desc-body [class*="ug-thumb"],
.page-product .sg-scope .sg-desc-body [class*="ug-strip"],
.page-product .sg-scope .sg-desc-body [class*="ug-slider-control"],
.page-product .sg-scope .sg-desc-body [class*="ug-zoompanel"],
.page-product .sg-scope .sg-desc-body [class*="ug-button"]{display:none !important}
.page-product .sg-scope .sg-desc-body [class*="ug-item-wrapper"] > img{width:100% !important}
/* ...the rest of that widget (fullscreen/play buttons, text panel, "&nbsp;" spacer divs) and the
   tab bar of a pasted "resp-tabs" block (a stray "IMAGES" pill) only left blank lines */
.page-product .sg-scope .sg-desc-body .ug-gallery-wrapper > :not(.ug-slider-wrapper),
.page-product .sg-scope .sg-desc-body .resp-tabs-list{display:none !important}
/* a picture whose file is gone is hidden with the figure / paragraph it was the only content of
   (product.tpl marks them), so dead hotlinks leave no uneven gaps */
.page-product .sg-scope .sg-desc-body .sg-desc-broken-wrap{display:none !important}
/* line break a pasted paragraph starts with (product.tpl marks it) */
.page-product .sg-scope .sg-desc-body br.sg-desc-lead-br{display:none !important}
/* Word-pasted "·&nbsp;&nbsp;&nbsp;" paragraphs (product.tpl marks them and drops the typed bullet):
   shown like the real lists — accent dot, hanging indent, list spacing */
.page-product .sg-scope .sg-desc-body p.sg-desc-fakeli{position:relative !important;margin:0 0 6px !important;padding:0 0 0 24px !important}
.page-product .sg-scope .sg-desc-body p.sg-desc-fakeli::before{content:"";position:absolute;left:8px;top:.72em;width:6px;height:6px;border-radius:50%;background:#8a6a3d}
.page-product .sg-scope .sg-desc-body p.sg-desc-fakeli-last{margin-bottom:16px !important}
.page-product .sg-scope .sg-desc-body strong,
.page-product .sg-scope .sg-desc-body b{font-weight:700 !important;color:#22231f !important}
.page-product .sg-scope .sg-desc-body em,
.page-product .sg-scope .sg-desc-body i{font-style:italic}
.page-product .sg-scope .sg-desc-body u{text-decoration:none !important}
.page-product .sg-scope .sg-desc-body a{color:#8a6a3d !important;text-decoration:underline !important;text-underline-offset:2px}
.page-product .sg-scope .sg-desc-body a:hover{color:#1f3326 !important}
.page-product .sg-scope .sg-desc-body hr{height:0 !important;border:0 !important;border-top:1px solid #e2ddd1 !important;margin:28px 0 !important;background:none !important}
.page-product .sg-scope .sg-desc-body blockquote{margin:20px 0 !important;padding:4px 0 4px 18px !important;border-left:3px solid #8a6a3d !important;color:#3e3d39 !important}

/* --- headings (h1 inside a description is shown at h2 size: the page already has its h1) --- */
.page-product .sg-scope .sg-desc-body h1,
.page-product .sg-scope .sg-desc-body h2,
.page-product .sg-scope .sg-desc-body h3,
.page-product .sg-scope .sg-desc-body h4,
.page-product .sg-scope .sg-desc-body h5,
.page-product .sg-scope .sg-desc-body h6{font-family:Montserrat,sans-serif !important;font-weight:700 !important;color:#22231f !important;line-height:1.3 !important;padding:0 !important;border:0 !important;overflow:visible !important}
.page-product .sg-scope .sg-desc-body h1,
.page-product .sg-scope .sg-desc-body h2{font-size:22px !important;margin:40px 0 12px !important}
.page-product .sg-scope .sg-desc-body h3{font-size:17px !important;margin:30px 0 10px !important}
.page-product .sg-scope .sg-desc-body h4,
.page-product .sg-scope .sg-desc-body h5,
.page-product .sg-scope .sg-desc-body h6{font-size:15px !important;margin:22px 0 8px !important}
.page-product .sg-scope .sg-desc-body > :first-child{margin-top:0 !important}
.page-product .sg-scope .sg-desc-body h1 *,
.page-product .sg-scope .sg-desc-body h2 *,
.page-product .sg-scope .sg-desc-body h3 *,
.page-product .sg-scope .sg-desc-body h4 *{font-weight:inherit !important;color:inherit !important}

/* Feature sections: like the mockup, every h2 after the first one gets a small "01, 02..." numeral
   above it (the shared sg-design.css rule counts from :first-child, which here is the SEO heading,
   and prints "010" from the tenth). Spec headings directly followed by a table are not numbered. */
.page-product .sg-scope .sg-desc-body h2::before{content:none !important;counter-increment:none !important}
.page-product .sg-scope .sg-desc-body h2 ~ h2:not(:has(+ table)):not(:has(+ .sg-desc-table)):not(:has(+ figure.wp-block-table))::before{content:counter(sg-desc-feature, decimal-leading-zero) !important;counter-increment:sg-desc-feature !important;display:block;font-family:Montserrat,sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;color:#8a6a3d;margin-bottom:6px}

/* SSB SEO module injects <h3>seo_h3</h3> ("Kategorija - Prekė") right before the description
   (vQmod op on "<?php echo $description;"). It repeats the product name, so show it the way the
   mockup opens its description: a small accent-coloured eyebrow line above the text. */
.page-product .sg-scope .sg-desc-body > h3:first-child{font-size:12px !important;font-weight:600 !important;letter-spacing:.1em !important;text-transform:uppercase !important;color:#8a6a3d !important;line-height:1.5 !important;margin:0 0 14px !important}
.page-product .sg-scope .sg-desc-body > h3:first-child *{font-weight:inherit !important}
.page-product .sg-scope .sg-desc-body > h3:first-child + *{margin-top:0 !important}
/* ...unless it only repeats the SEO h2 / product name shown above (product.tpl adds .sg-seo-h3-dup):
   then it stays in the HTML for the SEO module but is visually hidden */
.page-product .sg-scope .sg-seo-h3-dup > .sg-desc-body > h3:first-child,
.page-product .sg-scope .sg-seo-h3-dup > .sg-desc-body > h2:first-child + h3{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
.page-product .sg-scope .sg-seo-h3-dup > .sg-desc-body > h3:first-child + *{margin-top:0 !important}

/* --- lists (shared rules give the bullets back; here only the pasted inline spacing) --- */
.page-product .sg-scope .sg-desc-body ul,
.page-product .sg-scope .sg-desc-body ol{margin:0 0 16px !important;padding:0 0 0 22px !important;border:0 !important}
.page-product .sg-scope .sg-desc-body li{margin:0 0 6px !important;padding:0 0 0 2px !important;display:list-item !important}
.page-product .sg-scope .sg-desc-body li > p{margin:0 !important}
.page-product .sg-scope .sg-desc-body ul ul,
.page-product .sg-scope .sg-desc-body ol ol,
.page-product .sg-scope .sg-desc-body ul ol,
.page-product .sg-scope .sg-desc-body ol ul{margin:6px 0 0 !important}
.page-product .sg-scope .sg-desc-body li::marker{color:#8a6a3d}

/* --- images: never wider than the column, big square/transparent renders capped in height --- */
.page-product .sg-scope .sg-desc-body img{display:block !important;width:auto !important;height:auto !important;max-width:100% !important;max-height:520px !important;margin:22px 0 !important;padding:0 !important;border:0 !important;border-radius:6px;background-color:transparent !important;object-fit:contain}
/* the thin frame + white ground only once the picture has loaded (product.tpl adds .sg-desc-ok), so
   a lazy or dead hotlinked picture never shows as a stray 2px line or an empty white card */
.page-product .sg-scope .sg-desc-body img.sg-desc-ok{border:1px solid #e2ddd1 !important;background-color:#fff !important}
.page-product .sg-scope .sg-desc-body p > img,
.page-product .sg-scope .sg-desc-body figure img,
.page-product .sg-scope .sg-desc-body a > img{margin-top:8px !important;margin-bottom:8px !important}
.page-product .sg-scope .sg-desc-body p:has(> img:only-child){margin:14px 0 !important}
/* PNG pictures are mostly cut-out product renders on a transparent background: shown straight on
   the page, not as big empty white bordered squares */
.page-product .sg-scope .sg-desc-body img.sg-desc-ok[src$=".png" i],
.page-product .sg-scope .sg-desc-body img.sg-desc-ok[src*=".png?" i]{border:0 !important;border-radius:0;background-color:transparent !important}
.page-product .sg-scope .sg-desc-body img[src$=".png" i],
.page-product .sg-scope .sg-desc-body img[src*=".png?" i]{border-radius:0}
.page-product .sg-scope .sg-desc-body figure{display:block !important;margin:22px 0 !important;padding:0 !important;border:0 !important;overflow:visible !important}
.page-product .sg-scope .sg-desc-body figcaption{font-size:13px !important;color:#6b6860 !important;text-align:center !important;margin-top:6px !important}
/* photos inside tables and runs of small inline pictures stay inline */
.page-product .sg-scope .sg-desc-body td img,
.page-product .sg-scope .sg-desc-body th img,
.page-product .sg-scope .sg-desc-body td img.sg-desc-ok,
.page-product .sg-scope .sg-desc-body th img.sg-desc-ok{display:inline-block !important;margin:4px !important;max-height:none !important;vertical-align:middle;border:0 !important;background-color:transparent !important}

/* --- video: YouTube iframes / <video> fill the column at 16:9 (WordPress "padding-bottom" boxes
   and absolute positioning are neutralised above) --- */
.page-product .sg-scope .sg-desc-body iframe{display:block !important;width:100% !important;height:auto !important;aspect-ratio:16/9;max-width:100% !important;margin:24px 0 !important;padding:0 !important;border:0 !important;border-radius:6px;background:#000 !important}
.page-product .sg-scope .sg-desc-body p:has(> iframe:only-child){margin:0 !important}
.page-product .sg-scope .sg-desc-body video{display:block !important;width:100% !important;height:auto !important;max-width:100% !important;margin:24px 0 !important;border-radius:6px;background:#000 !important}

/* --- tables: own scroll box (product.tpl wraps each top-level table in .sg-desc-table), zebra rows
   like the mockup's spec table; 2-column tables get the muted-label / bold-value look --- */
.page-product .sg-scope .sg-desc-body .sg-desc-table{overflow-x:auto !important;-webkit-overflow-scrolling:touch;margin:14px 0 26px !important;border:1px solid #e2ddd1 !important;border-radius:6px;background:#fff !important}
.page-product .sg-scope .sg-desc-body table{width:100% !important;max-width:none !important;height:auto !important;margin:0 !important;border:0 !important;border-collapse:collapse !important;border-spacing:0 !important;font-size:14px !important;line-height:1.5 !important;table-layout:auto !important;background:transparent !important}
.page-product .sg-scope .sg-desc-body table:has(tr > :nth-child(4)){min-width:560px !important}
.page-product .sg-scope .sg-desc-body td,
.page-product .sg-scope .sg-desc-body th{width:auto !important;height:auto !important;padding:10px 14px !important;border:0 !important;border-bottom:1px solid #eeeae1 !important;vertical-align:top !important;text-align:left !important;font-size:14px !important;font-weight:400 !important;color:#3e3d39 !important;background:transparent !important}
.page-product .sg-scope .sg-desc-body tr:nth-child(odd) > td,
.page-product .sg-scope .sg-desc-body tr:nth-child(odd) > th{background:#faf9f5 !important}
.page-product .sg-scope .sg-desc-body tr:last-child > td,
.page-product .sg-scope .sg-desc-body tr:last-child > th{border-bottom:0 !important}
.page-product .sg-scope .sg-desc-body th,
.page-product .sg-scope .sg-desc-body thead td{font-family:Montserrat,sans-serif !important;font-weight:700 !important;color:#22231f !important}
.page-product .sg-scope .sg-desc-body tr:has(> :nth-child(2):last-child) > td:first-child{color:#6b6860 !important;width:45% !important}
.page-product .sg-scope .sg-desc-body tr:has(> :nth-child(2):last-child) > td:last-child{font-weight:600 !important;color:#22231f !important}
.page-product .sg-scope .sg-desc-body td p,
.page-product .sg-scope .sg-desc-body th p{margin:0 !important}
.page-product .sg-scope .sg-desc-body td ul,
.page-product .sg-scope .sg-desc-body td ol{margin:0 !important}
.page-product .sg-scope .sg-desc-body td strong,
.page-product .sg-scope .sg-desc-body td b{color:inherit !important}

/* --- phones --- */
@media (max-width:767px){
  .page-product .sg-scope .tab-content.sg-desc{padding-top:24px}
  .page-product .sg-scope .sg-desc-body{font-size:15px;line-height:1.65}
  .page-product .sg-scope .sg-desc-body h1,
  .page-product .sg-scope .sg-desc-body h2{font-size:19px !important;margin-top:32px !important}
  .page-product .sg-scope .sg-desc-body h3{font-size:16px !important}
  .page-product .sg-scope .sg-desc-body img{max-height:420px !important}
  .page-product .sg-scope .sg-desc-body td,
  .page-product .sg-scope .sg-desc-body th{padding:9px 10px !important}
}


/* ===== product page top area — product/product.tpl (full width, like maketas/preke.html) =====
   The product layout prints no column_left/column_right any more (the Category module stays in the
   admin layout), so gallery and buy box share the whole row: ~600px gallery + ~560px info at 1440. */

/* no sidebar on product pages: the offcanvas "Kategorijos" / "Paskyros meniu" buttons (header.tpl)
   would have nothing to open (common.js hides the buttons too; this also removes their empty row and
   covers the moment before the script runs). Scoped to a real product page (.sg-product-top): the
   "product not found" page has the same body class but prints the sidebar, so its button stays. */
.page-product:has(.sg-product-top) .sg-oc-buttons,
.page-product:has(.sg-product-top) #columns.offcanvas-siderbars > .container > .row.visible-xs{display:none !important}

/* two columns: gallery | info (Bootstrap float columns replaced by a grid, so the gap is exact) */
.page-product .sg-scope .product-info > .row.sg-product-top{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);column-gap:44px;align-items:start;margin:0}
.page-product .sg-scope .product-info > .row.sg-product-top::before,
.page-product .sg-scope .product-info > .row.sg-product-top::after{content:none;display:none}
.page-product .sg-scope .product-info > .row.sg-product-top > .sg-gallery-col,
.page-product .sg-scope .product-info > .row.sg-product-top > .sg-info-col{float:none;width:auto;min-width:0;padding:0}
@media (min-width:768px) and (max-width:991px){
  .page-product .sg-scope .product-info > .row.sg-product-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}
}
@media (max-width:767px){
  .page-product .sg-scope .product-info > .row.sg-product-top{grid-template-columns:minmax(0,1fr);row-gap:26px}
}

/* --- gallery: main picture in a white card that never lets it spill out; square on desktop, a bit
   taller on tablets/phones (the shop's product images are portrait canvases, 508x696, with the
   product centred on white) --- */
.page-product .sg-scope .product-info .image.sg-gallery-main{display:block;position:relative;height:auto;margin:0;padding:0;overflow:hidden;text-align:center;background:#fff}
.page-product .sg-scope .product-info .image.sg-gallery-main::before{content:"";display:block;padding-top:100%}
.page-product .sg-scope .product-info .image.sg-gallery-main > a.colorbox{position:absolute;top:24px;right:24px;bottom:24px;left:24px;display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.page-product .sg-scope .product-info .image.sg-gallery-main > a.colorbox > img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;margin:0;padding:0;border:0;object-fit:contain}
@media (max-width:991px){
  .page-product .sg-scope .product-info .image.sg-gallery-main::before{padding-top:120%}
  .page-product .sg-scope .product-info .image.sg-gallery-main > a.colorbox{top:16px;right:16px;bottom:16px;left:16px}
}
/* product without any photo on the server: neutral placeholder (no broken-image icon) */
.page-product .sg-scope .product-info .image.sg-gallery-main.sg-gallery-empty{background:#faf9f5}
.page-product .sg-scope .sg-gallery-empty .sg-gallery-empty-ico{position:absolute;top:50%;left:50%;width:72px;height:72px;margin:-36px 0 0 -36px;color:#cfc9bb}

/* sale badge: the theme's round 41px .product-label-special clipped "PIGU" — same pill as the cards */
.page-product .sg-scope .sg-gallery-main .product-label-special.sg-badge{width:auto !important;height:auto !important;line-height:1.2 !important;border-radius:3px !important;padding:6px 10px !important;top:14px !important;left:14px !important;right:auto !important;font-size:11px !important;background:#b9312f !important;color:#fff !important;text-indent:0 !important;z-index:2}
.page-product .sg-scope .sg-gallery-main .product-label-special.sg-badge::before{display:none !important;content:none !important}

/* thumbnails: four per slide; arrows only when there is more than one slide (product.tpl) */
.page-product .sg-scope #image-additional{margin-top:14px;padding:0 40px !important;position:relative;overflow:visible}
.page-product .sg-scope #image-additional.sg-thumbs-one{padding:0 !important}
.page-product .sg-scope #image-additional .carousel-inner{overflow:hidden}
.page-product .sg-scope #image-additional .item{gap:10px;justify-content:center}
.page-product .sg-scope #image-additional.sg-thumbs-one .item{justify-content:flex-start}
.page-product .sg-scope #image-additional a.colorbox{margin:0 !important;float:none !important;width:calc((100% - 30px) / 4) !important;max-width:112px;height:auto !important;aspect-ratio:1/1;padding:6px}
.page-product .sg-scope #image-additional a.colorbox:hover{border-color:#1f3326}
/* one frame per thumbnail: the theme's .product-info .image-additional img{border:1px solid #f1f1f1}
   drew a second, square grey frame inside the rounded box */
.page-product .sg-scope #image-additional a.colorbox img{border:0;padding:0;box-shadow:none;background:none}
/* product photos with an off-white backdrop (e.g. #fefefe inside a white canvas) showed a faint grey
   square in the white gallery card; 3% brightness turns those near-whites white and leaves the
   product itself visually unchanged (multiply would not help: the card under it is white) */
.page-product .sg-scope .product-info #image,
.page-product .sg-scope #image-additional a.colorbox img{filter:brightness(1.03)}
.page-product .sg-scope #image-additional .carousel-control{position:absolute;top:50% !important;margin-top:-16px;width:32px !important;height:32px !important;font-size:18px !important;opacity:1;text-shadow:none;background-image:none !important}
.page-product .sg-scope #image-additional .carousel-control.left{left:0 !important;right:auto !important}
.page-product .sg-scope #image-additional .carousel-control.right{right:0 !important;left:auto !important}
.page-product .sg-scope #image-additional .carousel-control:hover{border-color:#1f3326}

/* --- info column --- */
.page-product .sg-scope .sg-info-col{padding-top:6px}
.page-product .sg-scope .sg-info-col .sg-p-eyebrow{display:block;margin-bottom:8px}
.page-product .sg-scope .sg-info-col h1.sg-p-h1{text-wrap:balance}
.page-product .sg-scope .sg-info-col.sg-title-long h1.sg-p-h1{font-size:28px !important}
.page-product .sg-scope .sg-info-col.sg-title-xlong h1.sg-p-h1{font-size:25px !important;line-height:1.25 !important}
/* SSB SEO h2 ("Kategorija - Prekė") injected right after the visible h1: kept for the SEO module,
   shown as a quiet subtitle (the shared rule greyed it to 1.9:1 contrast) */
.page-product .sg-scope #content h1.sg-p-h1 + h2{color:#6b6860 !important;font-size:13px !important;margin:6px 0 0 !important;text-wrap:balance}
/* ...and visually hidden when it is the h1 text once more (product.tpl adds .sg-seo-h2-dup) */
.page-product .sg-scope #content .sg-info-col.sg-seo-h2-dup h1.sg-p-h1 + h2{position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
.page-product .sg-scope .sg-info-col .description.sg-meta-row{margin:14px 0 0;gap:6px 22px}
.page-product .sg-scope .sg-info-col .description.sg-meta-row > span{padding-right:0;font-weight:400}
.page-product .sg-scope .sg-info-col .review.sg-review-row{margin:8px 0 0;gap:8px;font-size:13px;line-height:1.4}
.page-product .sg-scope .sg-info-col .review.sg-review-row a{cursor:pointer;color:#6b6860;text-decoration:underline;text-decoration-color:#cfc9bb;text-underline-offset:3px}
.page-product .sg-scope .sg-info-col .review.sg-review-row a:hover{color:#1f3326;text-decoration-color:currentColor}
.page-product .sg-scope .sg-info-col .sg-review-sep{color:#cfc9bb}

/* --- buy box (mockup): price + "Kaina su PVM", stock, choices, then quantity + add to cart --- */
.page-product .sg-scope .sg-buybox{display:flex;flex-direction:column;gap:18px;margin:22px 0 0;padding:26px 28px}
.page-product .sg-scope .sg-buybox .price.sg-price-row-wrap{margin:0;padding:0;border:0;background:none;gap:6px;font-size:14px;color:#6b6860}
.page-product .sg-scope .sg-buybox .sg-price-row{align-items:baseline;gap:4px 14px}
.page-product .sg-scope .sg-buybox .sg-price-big{font-size:34px;line-height:1.1}
.page-product .sg-scope .sg-buybox .price-tax.sg-price-vat{font-size:13px;font-weight:400;color:#6b6860}
.page-product .sg-scope .sg-buybox .sg-price-note{display:block;font-size:13px;font-weight:400;color:#6b6860}
.page-product .sg-scope .sg-buybox .sg-price-note small{font-size:inherit}
/* stock: "● Sandėlyje" (the "Ar turime:" label stays for screen readers) */
.page-product .sg-scope .sg-buybox .sg-buy-stock{display:flex;align-items:center;gap:8px;margin:-4px 0 0;font-size:14px;font-weight:600;color:#2e6b3a}
.page-product .sg-scope .sg-buybox .sg-buy-stock .sg-dot{width:8px;height:8px;flex:none}
.page-product .sg-scope .sg-buybox .sg-buy-stock.sg-out{color:#8a5a2a}
.page-product .sg-scope .sg-buybox .sg-buy-stock .sg-stock-label{font-weight:400;color:#6b6860}
.page-product .sg-scope .sg-buybox > .option{margin:0;padding-top:16px;border-top:1px solid #eeeae1}
.page-product .sg-scope .sg-buybox > .option br{display:none}
.page-product .sg-scope .sg-buybox .minimum{margin:-8px 0 0}

/* buy row: quantity + "Į krepšelį" + wishlist/compare icon buttons, all 48px high (wraps on phones);
   the legacy icon-action.png sprite is replaced by inline SVG */
.page-product .sg-scope .product-extra.sg-buy-controls{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 16px;margin:0}
.page-product .sg-scope .product-info .quantity-adder.sg-qty{margin:0;font-size:13px}
.page-product .sg-scope .quantity-adder.sg-qty .add-action,
.page-product .sg-scope .quantity-adder.sg-qty input.form-control{height:48px !important}
.page-product .sg-scope .quantity-adder.sg-qty .add-action{width:44px !important}
.page-product .sg-scope .product-action.sg-cta-row{flex:1 1 260px;flex-wrap:nowrap;gap:10px;margin:0}
.page-product .sg-scope .product-action.sg-cta-row .cart{display:flex !important;flex:1 1 auto;float:none !important;margin:0 !important}
/* sentence case like every other button (the theme uppercases .product-action inputs) + cart icon */
.page-product .sg-scope .product-action.sg-cta-row #button-cart{flex:1 1 auto;width:100% !important;min-width:150px;height:48px;margin:0 !important;text-transform:none !important;letter-spacing:.01em;font-size:15px !important;padding:0 20px 0 48px !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1'/%3E%3Ccircle cx='18' cy='20' r='1'/%3E%3Cpath d='M3 4h2l2.4 12.4a1 1 0 0 0 1 .8h9.2a1 1 0 0 0 1-.8L21 8H6'/%3E%3C/svg%3E") !important;background-repeat:no-repeat !important;background-position:calc(50% - 38px) 50% !important;background-size:20px 20px !important}
.page-product .sg-scope .product-action.sg-cta-row .wishlist,
.page-product .sg-scope .product-action.sg-cta-row .compare{flex:none;margin:0 !important;float:none !important;border:0;background:none}
.page-product .sg-scope .product-action.sg-cta-row .wishlist a.sg-icon-btn,
.page-product .sg-scope .product-action.sg-cta-row .compare a.sg-icon-btn{width:48px;height:48px;padding:0 !important;justify-content:center;border:1.5px solid #cfc9bb !important;border-radius:4px;background:#fff none !important;color:#1f3326 !important;cursor:pointer;text-indent:0 !important}
.page-product .sg-scope .product-action.sg-cta-row .wishlist a.sg-icon-btn:hover,
.page-product .sg-scope .product-action.sg-cta-row .compare a.sg-icon-btn:hover{border-color:#1f3326 !important;background:#f0ede4 none !important}
.page-product .sg-scope .product-action.sg-cta-row a.sg-icon-btn .sg-ico{display:block;flex:none}

/* --- product options (no live product has any today; checked on /preke-parinktys.html): inside the
   buy box above the quantity row; label on its own line, 19px radios/checkboxes like the checkout --- */
.page-product .sg-scope .sg-buybox .options.sg-options{gap:0;margin:0;padding-top:4px;border-top:1px solid #eeeae1}
.page-product .sg-scope .options.sg-options > h2{font-size:17px !important;margin:14px 0 2px !important}
.page-product .sg-scope .product-info .options.sg-options .option{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;margin:0 !important;padding:14px 0;border-top:1px solid #eeeae1}
.page-product .sg-scope .product-info .options.sg-options > h2 + .option{border-top:0}
.page-product .sg-scope .product-info .options.sg-options .option > .required{grid-column:1;margin-right:4px}
.page-product .sg-scope .product-info .options.sg-options .option > label{grid-column:2;margin:0 0 8px}
.page-product .sg-scope .product-info .options.sg-options .option > :not(.required):not(label){grid-column:1 / -1;justify-self:start}
.page-product .sg-scope .product-info .options.sg-options .option > select.form-control,
.page-product .sg-scope .product-info .options.sg-options .option > input.form-control,
.page-product .sg-scope .product-info .options.sg-options .option > textarea.form-control{justify-self:stretch;max-width:420px}
.page-product .sg-scope .options.sg-options .radio,
.page-product .sg-scope .options.sg-options .checkbox{display:flex;align-items:center;gap:10px;margin:4px 0 !important;padding:0;min-height:0}
.page-product .sg-scope .options.sg-options .radio input,
.page-product .sg-scope .options.sg-options .checkbox input,
.page-product .sg-scope .options.sg-options table.option-image input{position:static !important;margin:0 !important;float:none}
.page-product .sg-scope .options.sg-options .radio label,
.page-product .sg-scope .options.sg-options .checkbox label{font-weight:400 !important;font-size:14px !important;margin:0 !important;padding:0 !important;min-height:0;cursor:pointer;color:#22231f}
.page-product .sg-scope .options.sg-options input[type=button]{height:40px;padding:0 16px;border:1.5px solid #1f3326;border-radius:4px;background:#fff;color:#1f3326;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;cursor:pointer}
.page-product .sg-scope .options.sg-options input[type=button]:hover{background:#f0ede4}
.page-product .sg-scope .options.sg-options table.option-image td{padding:4px 8px 4px 0;vertical-align:middle}
.page-product .sg-scope .product-info .error{display:block;color:#b9312f;font-size:13px;margin:-6px 0 8px}

/* phones */
@media (max-width:767px){
  .page-product .sg-scope .sg-info-col h1.sg-p-h1{font-size:25px !important;line-height:1.25 !important}
  .page-product .sg-scope .sg-info-col.sg-title-long h1.sg-p-h1{font-size:22px !important}
  .page-product .sg-scope .sg-info-col.sg-title-xlong h1.sg-p-h1{font-size:20px !important}
  .page-product .sg-scope .sg-buybox{padding:20px 18px;gap:16px}
  .page-product .sg-scope .sg-buybox .sg-price-big{font-size:30px}
  .page-product .sg-scope .product-action.sg-cta-row{flex-basis:100%}
  .page-product .sg-scope #image-additional{padding:0 38px !important}
  .page-product .sg-scope #image-additional.sg-thumbs-one{padding:0 !important}
  .page-product .sg-scope #image-additional .item{gap:8px}
  .page-product .sg-scope #image-additional a.colorbox{width:calc((100% - 24px) / 4) !important;padding:4px}
}

/* rating stars (inline SVG instead of the theme's stars-N.png bitmaps; same shape as compare.tpl) */
.page-product .sg-scope .sg-stars{display:inline-flex;gap:2px;vertical-align:-2px}
.page-product .sg-scope .sg-stars svg{display:block}
.page-product .sg-scope .sg-stars .sg-star-on{fill:#8a6a3d}
.page-product .sg-scope .sg-stars .sg-star-off{fill:#d8d2c4}

/* --- description tab extras --- */
/* product tags (moved out of the buy box): a quiet chip row under the description */
.page-product .sg-scope .tab-content.sg-desc .tags.sg-tags{max-width:800px;margin:34px 0 0;padding-top:20px;border-top:1px solid #e2ddd1}

/* --- reviews tab --- */
/* review list: as wide as the description column, stars on the author's line */
.page-product .sg-scope .sg-review-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;max-width:800px}
/* the theme's .review-list{border:1px solid #F1F1F1; margin-bottom:20px} box: only the warm divider
   between reviews stays (the cool-grey top/left/right lines sat 1-2px from the text) */
.page-product .sg-scope .sg-review-item{border:0;border-bottom:1px solid #e2ddd1;margin:0;padding:14px 0}
.page-product .sg-scope .sg-review-item .author{grid-column:1;margin:0}
.page-product .sg-scope .sg-review-item .rating{grid-column:2;grid-row:1;float:none;margin:0}
.page-product .sg-scope .sg-review-item .text{grid-column:1 / -1}
.page-product .sg-scope #review > .pagination{max-width:800px}
/* the last review's divider already closes the list: no second (cool-grey) line under it, and an
   empty pager (one page of reviews) takes no room */
.page-product .sg-scope #review > .pagination{border-top:0}
.page-product .sg-scope #review > .pagination:empty{display:none}
.page-product .sg-scope #review > .content{color:#6b6860;font-size:14px;padding:4px 0 8px}
.page-product .sg-scope #review .pagination{margin-top:12px;font-size:13px}
/* the shared feature-numbering rule (.tab-content h2:not(:first-child)::before) also put an "01"
   above "Rašyti atsiliepimą" */
.page-product .sg-scope #tab-review h2::before{content:none !important;counter-increment:none !important}
.page-product .sg-scope #tab-review #review-title{font-size:20px !important;margin:28px 0 6px !important}
.page-product .sg-scope .form-review{max-width:560px;gap:18px}
.page-product .sg-scope .form-review .option > label{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:#22231f}
.page-product .sg-scope .form-review input.form-control,
.page-product .sg-scope .form-review textarea.form-control{display:block;width:100%;max-width:none;height:46px;padding:0 14px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;box-shadow:none;font-size:14px;color:#22231f}
.page-product .sg-scope .form-review textarea.form-control{height:auto;min-height:150px;padding:12px 14px;line-height:1.55;resize:vertical}
.page-product .sg-scope .form-review input.form-control:focus,
.page-product .sg-scope .form-review textarea.form-control:focus{border-color:#1f3326;outline:0}
/* "Pastaba: HTML nesiverčia!" — the language string carries an inline red style */
.page-product .sg-scope .form-review .sg-product-note{display:block;margin-top:6px;font-size:12px;color:#6b6860}
.page-product .sg-scope .form-review .sg-product-note span{color:#6b6860 !important;font-weight:600}
/* rating: star picker over the five radio inputs (name="rating" 1-5) */
.page-product .sg-scope .sg-rate-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.page-product .sg-scope .sg-rate-end{font-size:13px;color:#6b6860}
.page-product .sg-scope .sg-rate{display:inline-flex;align-items:center;gap:2px}
.page-product .sg-scope .sg-rate input{position:absolute !important;width:1px;height:1px;margin:0 !important;padding:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}
.page-product .sg-scope .sg-rate label{display:block;margin:0 !important;padding:3px;border-radius:4px;cursor:pointer;line-height:0}
.page-product .sg-scope .sg-rate label svg{display:block;fill:#d8d2c4;transition:fill .12s}
.page-product .sg-scope .sg-rate input:focus-visible + label{outline:2px solid #8a6a3d;outline-offset:1px}
.page-product .sg-scope .sg-rate:has(input[value="1"]:checked) label:nth-of-type(-n+1) svg,
.page-product .sg-scope .sg-rate:has(input[value="2"]:checked) label:nth-of-type(-n+2) svg,
.page-product .sg-scope .sg-rate:has(input[value="3"]:checked) label:nth-of-type(-n+3) svg,
.page-product .sg-scope .sg-rate:has(input[value="4"]:checked) label:nth-of-type(-n+4) svg,
.page-product .sg-scope .sg-rate:has(input[value="5"]:checked) label:nth-of-type(-n+5) svg{fill:#8a6a3d}
/* hover preview (after the checked rules: same specificity, so it wins while the pointer is on a star) */
.page-product .sg-scope .sg-rate:has(label:nth-of-type(n):hover) label:nth-of-type(n) svg{fill:#d8d2c4}
.page-product .sg-scope .sg-rate:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1) svg,
.page-product .sg-scope .sg-rate:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2) svg,
.page-product .sg-scope .sg-rate:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3) svg,
.page-product .sg-scope .sg-rate:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4) svg,
.page-product .sg-scope .sg-rate:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) svg{fill:#b08a55}
/* captcha: label on its own line, code picture and its input side by side */
.page-product .sg-scope .form-review .sg-captcha-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.page-product .sg-scope .form-review .sg-captcha-row .form-group{display:block;margin:0;vertical-align:middle}
/* the code picture comes with a hard black 1px frame: clipped inside a soft rounded box */
.page-product .sg-scope .form-review .sg-captcha-row .form-group:first-child{flex:none;height:46px;overflow:hidden;border:1px solid #e2ddd1;border-radius:4px;background:#fff}
.page-product .sg-scope .form-review #captcha{display:block;height:50px;width:auto;max-width:none;margin:-2px;border:0}
.page-product .sg-scope .form-review .sg-captcha-row .form-group:last-child{flex:1 1 110px;max-width:180px}
.page-product .sg-scope #button-review{margin-top:4px}

/* --- related products carousel (oc_product_related is empty today, so live never shows it; checked
   on /preke-susijusios.html): same card as the category grid, 4 per slide on the full-width page --- */
.page-product .sg-scope .product-related.sg-related{position:relative}
.page-product .sg-scope .product-related .box-heading.sg-sec-head{padding-right:96px}
.page-product .sg-scope .product-related .carousel-controls{position:absolute;top:0;right:0;display:flex;gap:8px;margin:0;z-index:2}
.page-product .sg-scope .product-related .carousel-controls .carousel-control{position:static !important;width:36px !important;height:36px !important;margin:0 !important;padding:0 !important;border:1px solid #e2ddd1;border-radius:50%;background:#fff none !important;color:#1f3326;opacity:1;text-shadow:none;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;text-decoration:none}
.page-product .sg-scope .product-related .carousel-controls .carousel-control:hover{border-color:#1f3326}
.page-product .sg-scope .product-related #related .item > .row{display:flex;flex-wrap:wrap;row-gap:0}
.page-product .sg-scope .product-related #related .item > .row > div{display:flex;padding-bottom:20px}
.page-product .sg-scope .product-related .product-block.sg-card{width:100%;overflow:hidden;margin:0 !important;padding:0;display:flex;flex-direction:column}
.page-product .sg-scope .product-related .product-block.sg-card .image.sg-img{height:230px;margin:0;padding:18px;border:0;border-bottom:1px solid #eeeae1;display:flex;align-items:center;justify-content:center;background:#fff;position:relative}
.page-product .sg-scope .product-related .product-block.sg-card .image.sg-img a.img{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.page-product .sg-scope .product-related .product-block.sg-card .image.sg-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.page-product .sg-scope .product-related .product-block.sg-card .product-label-special.sg-badge{width:auto !important;height:auto !important;line-height:1.2 !important;border-radius:3px !important;padding:5px 9px !important;top:12px !important;left:12px !important;right:auto !important;font-size:11px !important;text-indent:0 !important}
.page-product .sg-scope .product-related .product-block.sg-card .product-label-special.sg-badge::before{display:none !important;content:none !important}
.page-product .sg-scope .product-related .product-meta.sg-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex-grow:1;text-align:left}
/* footer at the bottom of every card: an optional old-price line, then price + outline button on one
   row, so prices and buttons line up across the row whether or not a card has an old price */
.page-product .sg-scope .product-related .price.sg-foot{display:grid !important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;margin:auto 0 0 !important;padding-top:12px;text-align:left}
.page-product .sg-scope .product-related .price.sg-foot .price-old{grid-column:1;grid-row:1;font-size:13px !important;line-height:1.2;color:#736e62 !important;margin:0}
.page-product .sg-scope .product-related .price.sg-foot .sg-price{grid-column:1;grid-row:2;margin:0;line-height:1.2}
.page-product .sg-scope .product-related .price.sg-foot .cart{grid-column:2;grid-row:2;margin:0;float:none;position:static}
/* phones: every related product in a two-column grid (no slide of three stacked full-width cards
   with its arrows far above them) */
@media (max-width:767px){
  .page-product .sg-scope .product-related .box-heading.sg-sec-head{padding-right:0}
  .page-product .sg-scope .product-related .carousel-controls{display:none}
  .page-product .sg-scope .product-related #related .carousel-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible}
  .page-product .sg-scope .product-related #related .carousel-inner > .item,
  .page-product .sg-scope .product-related #related .carousel-inner > .item > .row{display:contents !important}
  /* the row's clearfix pseudo-elements would otherwise take the first grid cells */
  .page-product .sg-scope .product-related #related .carousel-inner > .item > .row::before,
  .page-product .sg-scope .product-related #related .carousel-inner > .item > .row::after{content:none;display:none}
  .page-product .sg-scope .product-related #related .item > .row > div{display:flex;width:auto;float:none;padding:0}
  .page-product .sg-scope .product-related .product-block.sg-card .image.sg-img{height:150px;padding:12px}
  .page-product .sg-scope .product-related .product-meta.sg-body{padding:12px 12px 14px}
  .page-product .sg-scope .product-related .product-meta.sg-body .name{font-size:14px !important}
  .page-product .sg-scope .product-related .price.sg-foot{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .page-product .sg-scope .product-related .price.sg-foot .cart{grid-column:1;grid-row:3;margin-top:10px}
  .page-product .sg-scope .product-related .price.sg-foot .cart input{width:100% !important;padding:0 8px !important}
}

/* ---- forms.css ---- */
/* ======================================================================
   forms.css — (1) shared rules for every form inside .sg-scope, (2) the account form /
   account list pages (register, edit, password, forgotten, newsletter, voucher, returns,
   reward points, transactions, downloads, recurring payments, common/success.tpl).
   Part (2) is scoped to .sg-acctf, a class only those templates put on their
   .sg-page-wrap, so nothing here reaches other pages.
   Part (3) is the layout every account/*.tpl shares: the full-width page head
   (.sg-acct-headcol / .sg-acct-head), the content column (.sg-acct-body), the account
   menu (module/account.tpl, .sg-acct-menu) and its tablet toggle.
   ====================================================================== */

/* ---------- (1) generic form rules (.sg-scope) ---------- */

/* Button rows: buttons never touch, and wrap instead of overflowing on phones. */
.sg-scope .sg-form-actions{gap:12px;flex-wrap:wrap;align-items:center}

/* OpenCart validation messages: <span class="error"> under a field (server-side, and the
   ones checkout/cart JS inserts). Legacy CSS made them plain #FF0000 text. */
.sg-scope span.error{display:flex;align-items:flex-start;gap:6px;margin:2px 0 0;color:#b9312f;font-size:13px;font-weight:600;line-height:1.4}
.sg-scope span.error::before{content:"";flex:none;width:15px;height:15px;margin-top:1px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9312f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.1'/%3E%3C/svg%3E") no-repeat center/contain}
.sg-scope .sg-field:has(> span.error) .sg-inp{border-color:#b9312f}

/* Hint text language strings carry as <span class="help"> (legacy: 10px #999, under 3:1). */
.sg-scope .help{display:inline;font-family:inherit;font-size:12.5px;font-weight:400;line-height:1.5;color:#6b6860}

/* Radio / checkbox option labels inside a field are content, not field labels. */
.sg-scope .sg-field label.sg-chk-row{font-size:14px;font-weight:400;color:#22231f}
.sg-scope .sg-radio-inline{display:flex;flex-wrap:wrap;gap:10px 28px}

/* "I agree to ..." row in a button bar: the checkbox + text sit together, the text may wrap. */
.sg-scope .sg-agree{flex:1 1 280px;align-items:flex-start;gap:10px;font-size:14px;font-weight:400;line-height:1.5;cursor:pointer}
.sg-scope .sg-agree .sg-cb{margin-top:1px !important}
.sg-scope .sg-agree a{color:#8a6a3d;text-decoration:underline;text-underline-offset:2px}
.sg-scope .sg-agree a b{font-weight:600}
.sg-scope .sg-agree-full{flex-basis:100%}

/* Date fields (jQuery UI datepicker on input.date): same field, with a calendar hint. */
.sg-scope input.sg-inp.date{padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b6860' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") no-repeat right 14px center}


/* Captcha: input and image on one line. */
.sg-scope .sg-captcha{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.sg-scope .sg-captcha .sg-inp{flex:1 1 120px;min-width:0;max-width:180px}
.sg-scope .sg-captcha img{display:block;flex:none;max-width:100%;height:auto}

/* small spinner for AJAX "loading" markers (replaces the legacy loading.gif) */
.sg-scope .sg-spin{display:inline-block;width:16px;height:16px;border:2px solid #d9d3c4;border-top-color:#1f3326;border-radius:50%;animation:sg-acctf-spin .7s linear infinite}
@keyframes sg-acctf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sg-scope .sg-spin{animation-duration:2s}}

/* jQuery UI datepicker popup (return form date; product "date" options if a product ever has
   one). jQuery UI appends it to <body>, outside .sg-scope, and the stock ui-lightness theme is
   orange - restyled to the palette. Only exists on pages that start a datepicker. */
#ui-datepicker-div{width:288px;padding:12px;background:#fff;border:1px solid #e2ddd1;border-radius:6px;box-shadow:0 14px 30px rgba(31,51,38,.14);font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;z-index:1000 !important}
#ui-datepicker-div .ui-datepicker-header{background:none;border:0;padding:4px 0 10px;color:#22231f;font-family:Montserrat,sans-serif;font-weight:700}
#ui-datepicker-div .ui-datepicker-title{line-height:30px}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{top:4px;width:30px;height:30px;border:1px solid #e2ddd1 !important;border-radius:4px;background:#fff !important;cursor:pointer}
#ui-datepicker-div .ui-datepicker-prev{left:0}
#ui-datepicker-div .ui-datepicker-next{right:0}
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span{background:none !important;text-indent:0;overflow:hidden;width:8px;height:8px;margin:-4px 0 0 -4px;font-size:0;border-left:1.8px solid #1f3326;border-bottom:1.8px solid #1f3326;transform:rotate(45deg)}
#ui-datepicker-div .ui-datepicker-next span{transform:rotate(-135deg);margin-left:-6px}
#ui-datepicker-div th{padding:6px 0;font-weight:600;font-size:11px;color:#6b6860;text-transform:uppercase}
#ui-datepicker-div td{padding:1px}
#ui-datepicker-div td a{display:block;padding:6px 0;text-align:center;border:0 !important;border-radius:4px;background:transparent !important;color:#22231f !important;font-weight:400}
#ui-datepicker-div td a:hover{background:#eef0e8 !important}
#ui-datepicker-div td a.ui-state-highlight{background:#f6f4ee !important;font-weight:600}
#ui-datepicker-div td a.ui-state-active{background:#1f3326 !important;color:#fff !important}

/* ---------- (2) account form / list pages (.sg-acctf) ---------- */

.sg-scope .sg-acctf .sg-page-lead p{margin:0}
.sg-scope .sg-acctf .sg-page-lead a{color:#8a6a3d;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sg-scope .sg-acctf .sg-page-lead b{color:#22231f}
.sg-scope .sg-acctf .warning,.sg-scope .sg-acctf .success{max-width:none}

/* form sections = white panels with a hairline header (mockup .panel / .panel-h) */
.sg-scope .sg-acctf .sg-fpanel{margin:0 0 20px}
.sg-scope .sg-page-wrap.sg-acctf .sg-panel-h h2{margin:0;font-size:17px}
.sg-scope .sg-acctf .sg-fpanel-b{padding:24px}
/* a field that must start a new grid row (keeps address pairs together when the register
   JS hides the company-code / VAT-code field next to it) */
.sg-scope .sg-acctf .sg-row-start{grid-column-start:1}
.sg-scope .sg-acctf .sg-fpanel-b > .sg-form-grid + .sg-form-grid,
.sg-scope .sg-acctf .sg-fpanel-b > * + .sg-field,
.sg-scope .sg-acctf .sg-fpanel-b > .sg-form-grid + .sg-captcha-field{margin-top:18px}
.sg-scope .sg-acctf .sg-fpanel-b > .sg-panel-text{margin:0 0 18px;max-width:760px;font-size:14px;line-height:1.6;color:#6b6860}
/* a field alone in its card (forgotten password e-mail, newsletter choice): the card keeps the
   column width like every other account form, the input gets a width that fits an e-mail */
.sg-scope .sg-acctf .sg-fpanel-b > .sg-field{max-width:460px}
/* legacy fax field (register / edit): stays in the form and is still posted, shown only when
   the account already has a fax number (templates add .sg-legacy-fax when it is empty) */
.sg-scope .sg-acctf .sg-field.sg-legacy-fax{display:none}
.sg-scope .sg-acctf input.sg-inp{text-align:left}
/* register's country -> zone AJAX puts <span class="wait"> right after the select: keep it
   inside the field (left of the arrow) instead of pushing the grid row down */
.sg-scope .sg-acctf .sg-field{position:relative}
.sg-scope .sg-acctf .sg-field > .wait{position:absolute;right:42px;bottom:15px;margin:0;line-height:0}

/* button bar under the panels: "Atgal" on the left, the main button always on the right */
.sg-scope .sg-acctf .sg-form-actions{margin-top:4px;padding-top:0;border-top:0;justify-content:flex-start}
.sg-scope .sg-acctf .sg-form-actions > .sg-btn-green{margin-left:auto !important}
/* ...except bars that start on the left (.sg-actions-start): the register form's single submit
   (under the last card, like the mockup checkout's final button) and the quiet "Tęsti" link of
   list / detail pages, which only leads back */
.sg-scope .sg-acct-body .sg-form-actions.sg-actions-start{justify-content:flex-start;margin-top:4px;padding-top:0;border-top:0}
.sg-scope .sg-acct-body .sg-form-actions.sg-actions-start > .sg-btn{margin-left:0 !important}
.sg-scope .sg-acct-body .sg-form-actions.sg-actions-start > .sg-actions-end{margin-left:auto !important}
.sg-scope .sg-acct-body .sg-form-actions.sg-actions-start > input[type=submit].sg-btn{min-width:200px !important}

/* read-only facts (label above value): return / recurring details, list cards */
.sg-scope .sg-acctf dl.sg-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin:0}
.sg-scope .sg-acctf dl.sg-facts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sg-scope .sg-acctf dl.sg-facts dt{margin:0 0 3px;font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860;line-height:1.4}
.sg-scope .sg-acctf dl.sg-facts dd{margin:0;font-size:14px;font-weight:600;color:#22231f;line-height:1.5;overflow-wrap:anywhere}
.sg-scope .sg-acctf dl.sg-facts dd a{color:#1f3326;text-decoration:underline;text-underline-offset:2px}
.sg-scope .sg-acctf dl.sg-facts dd a:hover{color:#8a6a3d}
/* a value the store has not filled in (e.g. a return's action before it is decided, an
   untranslated reason, an empty payment reference): a quiet dash instead of a bare label */
.sg-scope .sg-acctf dl.sg-facts dd:empty::before{content:"\2013";font-weight:400;color:#6b6860}
.sg-scope .sg-acctf .sg-fpanel-b > .sg-text-block{font-size:14px;line-height:1.7;color:#3e3d39}

/* tables inside a panel: quiet head row like the cart's (.sg-cart-head-row) */
.sg-scope .sg-acctf .sg-tpanel{overflow:hidden;margin:0 0 20px}
.sg-scope .sg-acctf .sg-tpanel table.sg-table{margin:0}
.sg-scope .sg-acctf .sg-tpanel table.sg-table th{padding:12px 20px;background:#faf9f5;border-bottom:1px solid #e2ddd1;font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860}
.sg-scope .sg-acctf .sg-tpanel table.sg-table td{padding:14px 20px;color:#3e3d39}
.sg-scope .sg-acctf .sg-tpanel table.sg-table tbody tr:last-child td{border-bottom:0}
.sg-scope .sg-acctf .sg-tpanel table.sg-table td a{color:#1f3326;text-decoration:underline;text-underline-offset:2px}
.sg-scope .sg-acctf .sg-tpanel table.sg-table td a:hover{color:#8a6a3d}
.sg-scope .sg-acctf .sg-tpanel table.sg-table td a.sg-btn{text-decoration:none}
.sg-scope .sg-acctf table.sg-table th.sg-cell-right,.sg-scope .sg-acctf table.sg-table td.sg-cell-right{text-align:right}
.sg-scope .sg-acctf table.sg-table td.sg-cell-center{text-align:center}
.sg-scope .sg-acctf table.sg-table th.sg-col-30{width:30%}
.sg-scope .sg-acctf table.sg-table .sg-num{font-family:Montserrat,sans-serif;font-weight:600;color:#22231f;white-space:nowrap;font-variant-numeric:tabular-nums}
.sg-scope .sg-acctf table.sg-table .sg-nowrap{white-space:nowrap}
.sg-scope .sg-acctf .sg-h2{font-size:20px;margin:28px 0 14px !important}

/* list cards (returns, downloads). The markup keeps the legacy return-/download-* class names,
   whose old rules float every inner div at 33%/49% and add borders/margins - reset them. */
.sg-scope .sg-acctf .sg-cards{display:flex;flex-direction:column;gap:14px;margin:0 0 20px}
.sg-scope .sg-acctf .sg-rcard{margin:0}
.sg-scope .sg-acctf .sg-rcard .sg-rcard-h > div{float:none;width:auto;margin:0;text-align:left}
.sg-scope .sg-acctf .sg-rcard .sg-rcard-b{width:auto;margin:0;border:0}
.sg-scope .sg-acctf .sg-rcard .sg-rcard-b div{float:none;width:auto;text-align:left}
.sg-scope .sg-acctf .sg-rcard-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;padding:14px 20px;border-bottom:1px solid #eeeae1}
.sg-scope .sg-acctf .sg-rcard-lbl{font-size:13px;color:#6b6860}
.sg-scope .sg-acctf .sg-rcard-no{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;color:#22231f}
.sg-scope .sg-acctf .sg-rcard-meta{font-size:13px;color:#6b6860}
.sg-scope .sg-acctf .sg-rcard-meta b{color:#22231f;font-weight:600}
.sg-scope .sg-acctf .sg-rstatus{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:13px;background:#eef0e8;color:#1f3326;font-size:12px;font-weight:600;white-space:nowrap}
.sg-scope .sg-acctf .sg-rcard-b{display:flex;align-items:center;flex-wrap:wrap;gap:16px 24px;padding:16px 20px}
.sg-scope .sg-acctf .sg-rcard-b > dl.sg-facts{flex:1 1 360px}
.sg-scope .sg-acctf .sg-rcard-actions{display:flex;justify-content:flex-end;gap:10px;min-width:150px;margin-left:auto}

/* results line / page links under a list (legacy .pagination had borders + floats) */
.sg-scope .sg-acctf .pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;width:auto;margin:0 0 20px;padding:0;border:0}
.sg-scope .sg-acctf .pagination .links{float:none;display:flex;flex-wrap:wrap;gap:6px}
.sg-scope .sg-acctf .pagination .links a,.sg-scope .sg-acctf .pagination .links b{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;color:#22231f;font-weight:600;font-size:13px;font-style:normal;text-decoration:none}
.sg-scope .sg-acctf .pagination .links b{background:#1f3326;border-color:#1f3326;color:#fff}
.sg-scope .sg-acctf .pagination .links a:hover{border-color:#1f3326}
.sg-scope .sg-acctf .pagination .results{float:none;margin:0;padding:0;font-size:13px;color:#6b6860}

/* empty states (orders, wishlist, returns, reward points, transactions, recurring payments):
   one white card with an icon circle, the store's text and the page's continue button - the same
   component as the "nothing here" card of error/not_found.tpl, but as wide as the column */
.sg-scope .sg-acct-body .sg-empty.sg-empty-card{margin:0;padding:44px 32px 40px;background:#fff;border:1px solid #e2ddd1;border-radius:6px;text-align:center;font-size:15px;color:#4a4943}
.sg-scope .sg-acct-body .sg-empty-card .sg-empty-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 0 18px;border-radius:50%;background:#f0ede4;color:#1f3326}
.sg-scope .sg-acct-body .sg-empty-card .sg-empty-ico .sg-ico{width:28px;height:28px}
.sg-scope .sg-acct-body .sg-empty-card .sg-empty-text{max-width:560px;margin:0 auto;line-height:1.6}
.sg-scope .sg-acct-body .sg-empty-card .sg-empty-actions{display:flex;justify-content:center;margin:24px 0 0}
.sg-scope .sg-acct-body .sg-empty-card .sg-empty-actions .sg-btn{margin:0 !important}

/* success page (common/success.tpl) */
.sg-scope .sg-acctf .sg-success-panel{padding:32px 36px}
.sg-scope .sg-acctf .sg-success-ic{display:flex;align-items:center;justify-content:center;width:52px;height:52px;margin:0 0 18px;border-radius:50%;background:#eef5ea;color:#1f3326}
.sg-scope .sg-acctf .sg-success-ic .sg-ico{width:26px;height:26px}
.sg-scope .sg-acctf .sg-success-panel .sg-page-h1{margin-bottom:14px !important}
.sg-scope .sg-acctf .sg-success-panel .sg-page-body{max-width:720px;color:#3e3d39}
.sg-scope .sg-acctf .sg-success-panel .sg-page-body a{color:#8a6a3d;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sg-scope .sg-acctf .sg-success-panel .sg-form-actions{margin-top:22px}
/* the button continues the text column (icon, heading, message, button share one left edge) */
.sg-scope .sg-acctf .sg-success-panel .sg-form-actions > .sg-btn-green{margin-left:0 !important}

/* return details: the return (id, date) on one row, its order (id, date) under it - the same
   columns as the 3-column product card below */
.sg-scope .sg-acctf dl.sg-facts-3.sg-facts-pairs > div:nth-child(3){grid-column-start:1}

/* return form captcha: the generated 150x35 picture in a white box as tall as the input next to it.
   The picture is drawn slightly larger and the box crops its edges, which cuts away OpenCart's thin
   black frame - the same treatment as the product review captcha (descriptions.css .sg-captcha-row). */
.sg-scope .sg-acctf .sg-captcha-pic{flex:none;height:46px;overflow:hidden;border:1px solid #e2ddd1;border-radius:4px;background:#fff}
.sg-scope .sg-acctf .sg-captcha-pic img{display:block;height:50px;width:auto;max-width:none;margin:-2px;padding:0;border:0}

@media (max-width:900px){
  .sg-scope .sg-acctf dl.sg-facts-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .sg-scope .sg-acctf .sg-fpanel-b{padding:18px 16px}
  .sg-scope .sg-acctf .sg-panel-h{padding:14px 16px}
  .sg-scope .sg-acctf .sg-success-panel{padding:24px 18px}
  .sg-scope .sg-acctf dl.sg-facts{gap:14px 18px}
  /* return details: the product name (often long) takes the whole row, model + quantity follow */
  .sg-scope .sg-acctf dl.sg-facts > .sg-fact-wide{grid-column:1 / -1}
  /* return form captcha: a slightly smaller picture (still cropping the frame) and a narrower code
     field keep both on one line on a 375px phone; narrower screens wrap the picture under the field */
  .sg-scope .sg-acctf .sg-captcha-pic img{height:48px}
  .sg-scope .sg-acctf .sg-captcha .sg-inp{flex-basis:80px}
  .sg-scope .sg-acctf .sg-rcard-h,.sg-scope .sg-acctf .sg-rcard-b{padding:14px 16px}
  .sg-scope .sg-acctf .sg-rcard-actions{flex:1 1 100%;min-width:0;margin-left:0;justify-content:flex-start}
  .sg-scope .sg-acctf .sg-rcard-actions > .sg-btn{flex:1 1 auto}
  .sg-scope .sg-acctf .sg-rcard-actions:not(:has(*)){display:none}
  /* phone: button bars use the full width (easier to tap), the agree text gets its own row */
  .sg-scope .sg-acctf .sg-form-actions > .sg-btn{flex:1 1 0}
  .sg-scope .sg-acctf .sg-form-actions > .sg-agree{flex-basis:100%}
  .sg-scope .sg-acct-body .sg-form-actions.sg-actions-start > .sg-btn{flex:1 1 0}
  .sg-scope .sg-acct-body .sg-form-actions.sg-actions-start > input[type=submit].sg-btn{min-width:0 !important}
  .sg-scope .sg-acct-body .sg-empty.sg-empty-card{padding:32px 20px 28px}
  .sg-scope .sg-acct-body .sg-empty-card .sg-empty-actions .sg-btn{flex:1 1 auto}
  /* downloads without any file print error/not_found.tpl (.sg-notfound) instead of the empty card:
     its "Tęsti" gets the same full width as on the other empty account lists */
  .page-account-download .sg-scope .sg-notfound-cols .sg-notfound-actions .sg-btn{flex:1 1 auto}
  .sg-scope .sg-acctf .sg-form-grid .sg-row-start{grid-column-start:auto}
  /* 3-column tables fit a phone when their cells may wrap (the shared rule makes every
     .sg-table a nowrap horizontal scroller) */
  .sg-scope .sg-acctf table.sg-table{display:table;overflow:visible;white-space:normal}
  .sg-scope .sg-acctf .sg-tpanel table.sg-table th,.sg-scope .sg-acctf .sg-tpanel table.sg-table td{padding:12px 12px}
  /* wider tables (recurring payments list) stack: one block per row, labels from data-label */
  .sg-scope .sg-acctf table.sg-stack thead{display:none}
  .sg-scope .sg-acctf table.sg-stack,.sg-scope .sg-acctf table.sg-stack tbody,.sg-scope .sg-acctf table.sg-stack tr,.sg-scope .sg-acctf table.sg-stack td{display:block;width:100%}
  .sg-scope .sg-acctf table.sg-stack tr{padding:10px 0;border-bottom:1px solid #eeeae1}
  .sg-scope .sg-acctf table.sg-stack tbody tr:last-child{border-bottom:0}
  .sg-scope .sg-acctf .sg-tpanel table.sg-stack td{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 16px;border:0;text-align:right}
  .sg-scope .sg-acctf .sg-tpanel table.sg-stack td:not([data-label]){padding-top:10px}
  .sg-scope .sg-acctf table.sg-stack td:not([data-label]) .sg-btn{flex:1 1 auto}
  .sg-scope .sg-acctf table.sg-stack td[data-label]::before{content:attr(data-label);flex:none;font-family:Montserrat,sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6b6860;text-align:left}
}

/* ---------- (3) account layout: page head, content column, account menu ---------- */

/* Breadcrumb + H1 (+ the page's intro / summary line) run across the whole row in a
   .col-xs-12 printed before the columns, like the title bar of the mockup's category page,
   so the content column and the account menu start on the same line. */
.sg-scope .sg-acct-head .sg-page-h1{margin:32px 0 24px !important}
.sg-scope .sg-acct-head .sg-page-lead{max-width:780px;margin:-10px 0 24px}
.sg-scope .sg-acct-head .sg-page-lead p{margin:0}
.sg-scope .sg-acct-head .sg-page-lead a{color:#8a6a3d;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sg-scope .sg-acct-head .sg-page-lead b{color:#22231f;font-weight:700}
.sg-scope .sg-page-wrap.sg-acct-body{padding-top:0}
/* sg-design.css pushes side columns 62px down to meet content that started under an in-column
   breadcrumb; here both columns start right under the head */
#columns > .container > .row > .sg-acct-headcol ~ aside{padding-top:0}

/* Two account-layout pages print through shared templates that keep the breadcrumb inside the
   content column: the account "success" page (common/success.tpl, card right under the breadcrumb)
   and downloads without any file (error/not_found.tpl, breadcrumb + H1 above the card). There the
   account menu is pushed down to the card's top instead of the 62px every side column gets. */
@media (min-width:992px){
  #columns > .container > .row:has(> section .sg-success-panel) > aside:has(.sg-acct-menu){padding-top:117px}
  #columns > .container > .row:has(> section .sg-notfound-cols) > aside:has(.sg-acct-menu){padding-top:177px}
}
@media (max-width:991px){
  #columns > .container > .row:has(> section .sg-success-panel) > aside:has(.sg-acct-menu),
  #columns > .container > .row:has(> section .sg-notfound-cols) > aside:has(.sg-acct-menu){padding-top:0}
}

/* account menu: the page being shown is marked like the category tree's active item; the
   logout link sits a little apart from the pages */
.sg-scope .sg-acct-menu .sg-cat-item > a.sg-cat-active{color:#1f3326;font-weight:700}
.sg-scope .sg-acct-menu .sg-acct-logout{margin-top:4px}
.sg-scope .sg-acct-menu .sg-acct-logout > a{color:#6b6860}
.sg-scope .sg-acct-menu .sg-acct-logout > a:hover{color:#8a6a3d}

/* Tablet (768-991px): the stacked account menu was a long list dumped under the content. It
   now stays behind the same "Paskyros meniu" button as on phones: the theme's offcanvas script
   binds the button at every width and toggles .column-right-active; its CSS only acts up to
   768px, so the same show/hide is repeated here for pages that carry the account menu. */
@media (min-width:768px) and (max-width:991px){
  #columns.offcanvas-siderbars:has(.sg-acct-menu) > .container > .row.visible-xs{display:block !important}
  #columns.offcanvas-siderbars:has(.sg-acct-menu) > .container > .row.visible-xs > .container{width:auto;max-width:none}
  #columns.offcanvas-siderbars:has(.sg-acct-menu) .sg-oc-buttons .sg-btn{flex:0 0 auto}
}
@media (min-width:769px) and (max-width:991px){
  #columns.offcanvas-siderbars .offcanvas-sidebar:has(.sg-acct-menu){display:none}
  #columns.offcanvas-siderbars.column-right-active .offcanvas-sidebar:has(.sg-acct-menu){display:block}
  #columns.offcanvas-siderbars.column-right-active:has(.offcanvas-sidebar .sg-acct-menu) .main-column{display:none}
}
/* phones + tablets: an opened menu sits right under the page head */
@media (max-width:991px){
  #columns > .container > .row > .sg-acct-headcol ~ aside .sg-acct-menu{margin-bottom:8px}
}
/* phones + tablets: the "Paskyros meniu" button row (header.tpl prints it above the content row)
   is shown under the breadcrumb + H1, like the category page's "Filtrai ir kategorijos" button.
   The content row lets its columns join the page container's flex column (display:contents), so
   the button row is ordered between the page head and the content / the opened menu. The DOM and
   the offcanvas script are unchanged. The container's side padding (20px !important in
   sg-design.css) takes over the row's -10px margins, so every column keeps its x position. */
@media (max-width:991px){
  #columns.offcanvas-siderbars:has(> .container > .row > .sg-acct-headcol) > .container{display:flex;flex-direction:column;padding-left:10px !important;padding-right:10px !important}
  #columns.offcanvas-siderbars:has(> .container > .row > .sg-acct-headcol) > .container::before,
  #columns.offcanvas-siderbars:has(> .container > .row > .sg-acct-headcol) > .container::after,
  #columns.offcanvas-siderbars > .container > .row:has(> .sg-acct-headcol)::before,
  #columns.offcanvas-siderbars > .container > .row:has(> .sg-acct-headcol)::after{content:none;display:none}
  #columns.offcanvas-siderbars > .container > .row:has(> .sg-acct-headcol){display:contents}
  #columns.offcanvas-siderbars > .container > .row > .sg-acct-headcol{order:1}
  #columns.offcanvas-siderbars:has(> .container > .row > .sg-acct-headcol) > .container > .row.visible-xs{order:2;margin-left:0;margin-right:0}
  #columns.offcanvas-siderbars > .container > .row:has(> .sg-acct-headcol) > :not(.sg-acct-headcol){order:3}
  #columns.offcanvas-siderbars:has(> .container > .row > .sg-acct-headcol) .sg-oc-buttons{margin:-6px 0 24px !important}
}
@media (max-width:640px){
  #columns.offcanvas-siderbars:has(> .container > .row > .sg-acct-headcol) .sg-oc-buttons{margin:-4px 0 18px !important}
}
@media (max-width:640px){
  .sg-scope .sg-acct-head .sg-page-h1{margin:22px 0 18px !important}
  .sg-scope .sg-acct-head .sg-page-lead{margin:-6px 0 20px}
}

/* ---- info.css ---- */
/* ==== info.css — information pages, sitemap, contact, login, 404 + global shell (header/footer) ====
   Scoped by template-level classes that only these templates print (.sg-infopage, .sg-info-body,
   .sg-sitemap, .sg-contact, .sg-login, .sg-notfound) or by the shell's own ids/classes. */

/* ---------- information/information: admin-entered HTML (Word/other-site paste) ---------- */
/* One centred reading column (breadcrumb, H1, text card, link, tags): the 860px card no longer sits
   against the left edge of the 1200px container with an empty third beside it. */
#columns .sg-scope .sg-info-crumbs,#columns .sg-scope .sg-page-wrap.sg-infopage{max-width:860px;margin-left:auto;margin-right:auto}
.sg-scope .sg-info-body{background:#fff;border:1px solid #e2ddd1;border-radius:6px;padding:36px 44px 22px;font-size:15px;line-height:1.75;color:#3e3d39;overflow-wrap:break-word}
/* Inline font/colour/size/alignment/background from the pasted HTML: bring everything back to the
   site's type. (Some pasted text was colour #e6e3e6 on white — invisible — or Arial 10pt justified.) */
.sg-scope .sg-info-body *{font-family:inherit !important;font-size:inherit !important;line-height:inherit !important;color:inherit !important;background:transparent !important;text-align:left !important;letter-spacing:normal !important;text-indent:0 !important;box-shadow:none !important}
.sg-scope .sg-info-body div,.sg-scope .sg-info-body p,.sg-scope .sg-info-body span,.sg-scope .sg-info-body table,
.sg-scope .sg-info-body th,.sg-scope .sg-info-body td,.sg-scope .sg-info-body h1,.sg-scope .sg-info-body h2,
.sg-scope .sg-info-body h3,.sg-scope .sg-info-body h4,.sg-scope .sg-info-body h5,.sg-scope .sg-info-body h6{width:auto !important;max-width:100%}
.sg-scope .sg-info-body p{margin:0 0 14px !important;padding:0 !important}
.sg-scope .sg-info-body strong,.sg-scope .sg-info-body b{font-weight:700 !important;color:#22231f !important}
.sg-scope .sg-info-body u{text-decoration:none !important;font-weight:600 !important;color:#22231f !important}
.sg-scope .sg-info-body a{color:#1f3326 !important;text-decoration:underline !important;text-underline-offset:2px}
.sg-scope .sg-info-body a:hover{color:#8a6a3d !important}
/* real headings */
.sg-scope .sg-info-body h1,.sg-scope .sg-info-body h2{font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-size:21px !important;line-height:1.3 !important;font-weight:700 !important;color:#22231f !important;margin:26px 0 12px !important;padding:0 !important}
.sg-scope .sg-info-body h3{font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-size:17px !important;line-height:1.35 !important;font-weight:700 !important;color:#22231f !important;margin:26px 0 10px !important;padding:0 !important}
/* A heading that closes a pasted block (Apie mus: <h1>&nbsp;</h1> used as a spacer) must not add a
   heading's worth of margin on top of the next section's own spacing. */
.sg-scope .sg-info-body div > h1:last-child,.sg-scope .sg-info-body div > h2:last-child{margin:0 !important}
/* ...and when it closes a run of h4 "paragraphs" (that pasted company-directory markup) it is only the
   &nbsp; spacer: give it no line height either (any text in it would still paint). */
.sg-scope .sg-info-body div > h4 ~ h1:last-child{line-height:0 !important}
/* h4–h6 are only ever used here as paragraph text (pasted from a company directory), so they read as body copy */
.sg-scope .sg-info-body h4,.sg-scope .sg-info-body h5,.sg-scope .sg-info-body h6{font-family:'Open Sans',Helvetica,Arial,sans-serif !important;font-size:15px !important;line-height:1.75 !important;font-weight:400 !important;color:#3e3d39 !important;margin:0 0 14px !important;padding:0 !important}
.sg-scope .sg-info-body > :first-child,.sg-scope .sg-info-body > :first-child > :first-child,
.sg-scope .sg-info-body > :first-child > :first-child > :first-child,
.sg-scope .sg-info-body > :first-child > :first-child > :first-child > :first-child{margin-top:0 !important}
.sg-scope .sg-info-body ul{list-style:disc !important;margin:0 0 16px !important;padding:0 0 0 22px !important}
.sg-scope .sg-info-body ol{list-style:decimal !important;margin:0 0 16px !important;padding:0 0 0 22px !important}
.sg-scope .sg-info-body li{margin:0 0 6px !important;padding:0 !important}
.sg-scope .sg-info-body table{border-collapse:collapse !important;border:0 !important;margin:4px 0 18px !important;width:100% !important;max-width:none}
/* label column the same width in every table, so stacked key/value tables line up */
.sg-scope .sg-info-body th:first-child{width:38% !important}
.sg-scope .sg-info-body th,.sg-scope .sg-info-body td{padding:9px 24px 9px 0 !important;border:0 !important;border-bottom:1px solid #eeeae1 !important;vertical-align:top !important;line-height:1.5 !important}
.sg-scope .sg-info-body th{font-weight:600 !important;color:#6b6860 !important;white-space:nowrap}
.sg-scope .sg-info-body th > :last-child,.sg-scope .sg-info-body td > :last-child{margin-bottom:0 !important}
.sg-scope .sg-info-body img{max-width:100% !important;height:auto !important}
.sg-scope .sg-info-body > :last-child,.sg-scope .sg-info-body > :last-child > :last-child{margin-bottom:0 !important}
/* bold-only paragraphs marked by information.tpl (data-sg-h): the policy's "1. Bendrosios nuostatos"
   ... "8. Baigiamosios nuostatos", "GRĄŽINIMAS" — styled as the section titles they are */
.sg-scope .sg-info-body [data-sg-h]{font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-size:17px !important;line-height:1.35 !important;color:#22231f !important;margin:30px 0 10px !important}
.sg-scope .sg-info-body > [data-sg-h]:first-child{margin-top:0 !important}
/* "Tęsti" only leads back to the home page: a quiet secondary link under the text, not a primary button */
.sg-scope .sg-infopage > .sg-form-actions{justify-content:flex-start;border-top:0;padding-top:0;margin-top:20px}
/* "Žymos:" list the superseobox vQmod prints after the page body */
.sg-scope .sg-infopage .gen-tags{margin-top:18px;font-size:13px;line-height:1.6;color:#6b6860}
.sg-scope .sg-infopage .gen-tags b{font-weight:600;color:#6b6860;margin-right:6px}
.sg-scope .sg-infopage .gen-tags a{color:#6b6860;text-decoration:underline;text-underline-offset:2px}
.sg-scope .sg-infopage .gen-tags a ~ a{margin-left:5px} /* the vQmod joins tags with a bare "," */
.sg-scope .sg-infopage .gen-tags a:hover{color:#8a6a3d}
@media (max-width:640px){
  .sg-scope .sg-info-body{padding:22px 18px 10px;font-size:15px}
  .sg-scope .sg-info-body th{white-space:normal}
  .sg-scope .sg-info-body th,.sg-scope .sg-info-body td{padding-right:14px !important}
  .sg-scope .sg-info-body [data-sg-h]{font-size:16px !important;margin-top:26px !important}
}
/* phones: key/value tables (Apie mus contacts) stack the label above its value, so neither the
   labels ("El. pašto adresas:") nor the phone numbers break mid-way in two narrow columns */
@media (max-width:575px){
  .sg-scope .sg-info-body table,.sg-scope .sg-info-body tbody,.sg-scope .sg-info-body tr,
  .sg-scope .sg-info-body th,.sg-scope .sg-info-body td,.sg-scope .sg-info-body th:first-child{display:block !important;width:auto !important}
  .sg-scope .sg-info-body th,.sg-scope .sg-info-body td{padding-right:0 !important}
  .sg-scope .sg-info-body th{padding:10px 0 0 !important;border-bottom:0 !important;font-size:13px !important;line-height:1.4 !important}
  .sg-scope .sg-info-body td{padding:1px 0 10px !important}
}

/* ---------- information/sitemap ----------
   Two full-width cards, one under the other (categories, then the shop's own pages), each flowing its
   groups into balanced CSS columns: 3 on desktop, 2 on tablets, 1 on phones. Side by side the two
   cards could never end on the same line (their content differs per category tree), and the 2-column
   category list left one column far shorter than the other. Groups are separated by space, not rules:
   in multi-column layout a rule under the last group of a column cannot be avoided. */
.sg-scope .sg-sitemap{display:flex;flex-direction:column;gap:24px}
.sg-scope .sg-sitemap-panel{padding:30px 34px}
.sg-scope .sg-sitemap-list{margin:0;padding:0;list-style:none;column-count:3;column-gap:48px}
/* spacing lives below each group, never above: margins at a column break are truncated, so every
   column starts on the same line */
.sg-scope .sg-sitemap-group{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;padding:0;margin:0 0 24px;border:0}
.sg-scope .sg-sitemap-list > .sg-sitemap-group:last-child{margin-bottom:0}
.sg-scope .sg-sitemap-top{display:inline-block;font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:600;font-size:14px;line-height:1.4;color:#22231f}
.sg-scope a.sg-sitemap-top:hover{color:#8a6a3d}
/* "Informacija" is the only group heading that is not a link: same type as the others, not a link colour */
.sg-scope .sg-sitemap-label{cursor:default}
.sg-scope .sg-sitemap-sub{margin:8px 0 0;padding:0 0 0 14px;list-style:none;border-left:1px solid #e2ddd1}
.sg-scope .sg-sitemap-sub .sg-sitemap-sub{margin-top:4px}
.sg-scope .sg-sitemap-sub li{padding:4px 0;font-size:14px;line-height:1.45}
.sg-scope .sg-sitemap-sub a{color:#6b6860}
.sg-scope .sg-sitemap-sub a:hover{color:#8a6a3d}
@media (max-width:1000px){
  .sg-scope .sg-sitemap-panel{padding:26px 26px}
  .sg-scope .sg-sitemap-list{column-gap:30px}
}
/* two columns only on small tablets: with the tall Hikmicro / night-vision groups a 2-column list
   cannot balance, so three narrower columns are kept down to 768px */
@media (max-width:767px){
  .sg-scope .sg-sitemap-list{column-count:2;column-gap:32px}
}
@media (max-width:640px){
  .sg-scope .sg-sitemap{gap:16px}
  .sg-scope .sg-sitemap-panel{padding:22px 20px}
  .sg-scope .sg-sitemap-list{column-count:1}
  .sg-scope .sg-sitemap-group{margin-bottom:20px}
}

/* ---------- error/not_found ---------- */
.sg-scope .sg-notfound{max-width:640px;margin:8px auto 0;padding:44px 40px 40px;text-align:center}
.sg-scope .sg-notfound-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#f0ede4;color:#1f3326;margin-bottom:18px}
.sg-scope .sg-notfound-ico .sg-ico{width:30px;height:30px}
.sg-scope .sg-notfound .sg-page-h1{font-size:28px !important;margin:0 0 10px !important}
.sg-scope .sg-notfound .sg-page-body{font-size:15px;color:#6b6860}
.sg-scope .sg-notfound-actions{margin-top:26px;display:flex;justify-content:center}
/* next to a side column (account/download without downloads, a missing product or category): the H1
   stays left-aligned above it like on the neighbouring pages and the card fills the column */
.sg-scope .sg-notfound-cols .sg-notfound{max-width:none;margin:0;padding:40px 32px 36px}
/* account/download renders this template when there is nothing to download: a download icon instead of
   the "not found" magnifier (the empty cart gets its cart icon the same way, in checkout.css) */
.page-account-download .sg-scope .sg-notfound-ico .sg-ico{display:none}
.page-account-download .sg-scope .sg-notfound-ico::before{content:"";width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3326' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){
  .sg-scope .sg-notfound{padding:32px 20px 28px}
  .sg-scope .sg-notfound .sg-page-h1{font-size:24px !important}
  .sg-scope .sg-notfound-cols .sg-notfound{padding:30px 20px 26px}
}

/* ---------- account/login ---------- */
.sg-scope .sg-login{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch}
.sg-scope .sg-login-panel{display:flex;flex-direction:column;padding:28px 30px 26px}
.sg-scope .sg-login-panel > form{display:flex;flex-direction:column;flex:1 1 auto}
.sg-scope .sg-login-panel h2{font-size:20px !important;margin:0 0 14px !important}
.sg-scope .sg-login-body{display:flex;flex-direction:column;gap:16px;font-size:14px;line-height:1.6;color:#4a4943}
.sg-scope .sg-login-body p{margin:0}
.sg-scope .sg-login-body .sg-login-strong{margin-bottom:-10px}
.sg-scope .sg-login-body .sg-login-strong b{color:#22231f;font-weight:600}
.sg-scope a.sg-login-forgot{align-self:flex-start;font-size:13px;font-weight:600;color:#8a6a3d;text-decoration:underline;text-underline-offset:2px;margin-top:-4px}
.sg-scope a.sg-login-forgot:hover{color:#1f3326}
/* both panels stretch to the same height; their buttons sit on the same bottom line */
.sg-scope .sg-login-panel .sg-login-actions{margin-top:auto;padding-top:24px;border-top:0}
@media (max-width:1000px){
  .sg-scope .sg-login{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sg-scope .sg-login-panel{padding:22px 20px}
  .sg-scope .sg-login-actions .sg-btn{width:100% !important}
}

/* ---------- information/contact ---------- */
.sg-scope .sg-contact .contact-location{margin-bottom:0}
.sg-scope .sg-contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.sg-scope .sg-contact-panel{padding:28px 30px}
.sg-scope .sg-contact-panel h2{font-size:20px !important;margin:0 0 18px !important}
.sg-scope .sg-contact-store{font-weight:600;color:#22231f;margin:0 0 16px;font-size:15px}
.sg-scope .sg-contact-list{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none}
.sg-scope .sg-contact-list li{display:flex;gap:14px;align-items:flex-start;font-size:14px;line-height:1.6;color:#4a4943}
.sg-scope .sg-contact-list b{color:#22231f;font-weight:600}
.sg-scope .sg-contact-list a{color:#1f3326;text-decoration:underline;text-decoration-color:rgba(31,51,38,.35);text-underline-offset:3px}
.sg-scope .sg-contact-list a:hover{color:#8a6a3d;text-decoration-color:currentColor}
.sg-scope .sg-contact-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;border-radius:50%;background:#f0ede4;color:#1f3326}
.sg-scope .sg-contact .contact-customhtml{margin-top:20px}
.sg-scope .sg-contact-field{margin-top:18px}
.sg-scope .sg-contact textarea.sg-inp{min-height:170px}
.sg-scope .sg-contact-captcha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sg-scope .sg-contact-captcha input.sg-inp{flex:1 1 120px;max-width:180px}
/* the generated captcha (150x35) has a hard 1px black frame drawn into it: frame the image like an input
   and push the drawn frame just outside the clipped box */
.sg-scope .sg-contact-captcha-img{display:block;flex:none;height:46px;border:1px solid #cfc9bb;border-radius:4px;overflow:hidden;background:#fff}
.sg-scope .sg-contact-captcha-img img{display:block;height:48px;width:auto;max-width:none;margin:-2px -2px 0}
/* read the code first, then type it: the image stands left of (on phones: above) its input */
.sg-scope .sg-contact-captcha-img{order:-1}
/* validation errors use the shared style from forms.css */
@media (max-width:1000px){
  .sg-scope .sg-contact-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  /* the code image drops under the input here: make the pair the same width so it reads as one block */
  .sg-scope .sg-contact-captcha input.sg-inp{flex:0 1 202px;max-width:202px}
}
@media (max-width:640px){
  .sg-scope .sg-contact-panel{padding:22px 20px}
  .sg-scope .sg-contact .sg-form-actions .sg-btn{width:100% !important}
}

/* ================================== global shell ================================== */

/* ---------- header account block (DECISION 5) ----------
   header.tpl prints "Paskyra" (account link) and under it only the two links of text_welcome /
   text_logged: "Prisijungti · Registruotis" for guests, "<Vardas> · Atsijungti" when signed in.
   Same two-line block as the mockup's "Paskyra / Prisijungti", the person icon left of both lines.
   Phones (<=640px) keep the icon-only account link from sg-design.css. */
@media (min-width:641px){
  .sg-hdr .sg-hact-account{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:36px;padding-left:30px}
  .sg-hdr .sg-hact-account a.account{display:block;line-height:1.25}
  .sg-hdr .sg-hact-account a.account .sg-ico{position:absolute;left:0;top:50%;margin-top:-10px}
  .sg-hdr .sg-hact-account .sg-acct-links{display:flex;align-items:baseline;gap:6px;white-space:nowrap;font-size:12px;line-height:1.35;color:#cfc9b8}
  .sg-hdr .sg-hact-account .sg-acct-links a{color:#cfc9b8 !important;text-decoration:none !important}
  .sg-hdr .sg-hact-account .sg-acct-links a:hover,.sg-hdr .sg-hact-account .sg-acct-links a:focus{color:#fff !important;text-decoration:underline !important;text-underline-offset:2px}
  .sg-hdr .sg-hact-account .sg-acct-sep{color:#b3ad9e}
  /* a long first name must not push the cart off the row */
  .sg-hdr .sg-hact-account .sg-acct-name{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
}
/* fallback only (a language string without exactly two links is printed whole): the bold brackets
   of text_logged are hidden and the two links get a quiet dot between them */
.sg-hact-account .sg-acct-sub b{display:none}
.sg-hact-account .sg-acct-sub b + a::before{content:"\00b7";display:inline-block;margin-right:4px;color:#b3ad9e;text-decoration:none}

/* topbar: second USP only where there is room for it */
@media (max-width:1100px){ .sg-topbar .sg-tb-free{display:none} }

/* 641–1199px: logo + account/cart on the first row, a full-width search on the second (the default
   flex-wrap put the search next to the logo and left account/cart alone on a right-aligned 2nd row). */
@media (min-width:641px) and (max-width:1199px){
  .sg-hdr .sg-wrap{row-gap:14px;padding-top:16px;padding-bottom:16px}
  .sg-hdr .sg-search{order:3;flex:1 1 100%;max-width:none}
  /* account + cart take whatever the logo leaves (flex-basis 0), so they can never drop under the
     logo; if the row gets tight (long name + big cart total) the total wraps inside its own box */
  .sg-hdr .sg-hact-row{flex:1 1 0;min-width:0;justify-content:flex-end;gap:28px;align-items:center;flex-wrap:nowrap}
  .sg-scope .sg-hact-cart,.sg-scope .sg-hact-cart #cart,.sg-scope .sg-hact-cart .media-body.heading,.sg-scope .sg-hact-cart .media-body.heading > a{min-width:0}
  .sg-scope .sg-hact-cart #cart-total{white-space:normal !important}
}
/* small tablets: room for "Paskyra / Prisijungti · Registruotis" next to the logo by dropping the
   logo's tagline and tightening the gaps */
@media (min-width:641px) and (max-width:719px){
  .sg-hdr .sg-wrap{column-gap:28px}
  .sg-hdr .sg-logo .sg-tag{display:none}
  .sg-hdr .sg-hact-row{gap:22px}
  .sg-hdr .sg-hact-account .sg-acct-name{max-width:90px}
}
/* 768–1000px: the theme hides the collapsed megamenu below 1000px but only shows the toggle for
   .navbar-inverse (a wrapper the new header no longer has) — the bar was empty. Show the same
   "Meniu" button as on phones; common.js binds the offcanvas menu to it at every width. */
@media (max-width:1000px){
  .sg-scope .sg-nav .navbar-toggle{display:flex !important;align-items:center;gap:10px;float:none !important;margin:8px 0 !important;padding:9px 14px !important;border:1px solid #cfc9bb !important;border-radius:4px !important;background:#fff !important;flex-direction:row}
  .sg-scope .sg-nav .navbar-toggle .icon-bar{display:block;width:20px;height:2px;margin:0 !important;background:#1f3326 !important;border-radius:1px;box-shadow:0 -6px 0 #1f3326,0 6px 0 #1f3326}
  .sg-scope .sg-nav .navbar-toggle .icon-bar + .icon-bar{display:none}
  .sg-scope .sg-nav .navbar-toggle::after{content:"Meniu";font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#1f3326}
  /* the -14px pull only lines up text links; a bordered button must sit on the content edge */
  .sg-scope .sg-nav .sg-nav-links{margin-left:0}
}
/* legacy responsive CSS below 750px: "#header #cart{display:block !important;width:100%;
   margin-left:35%|20%;margin-bottom:20px}" (two ids, so it beat .sg-scope .sg-hact-cart #cart) pushed
   the total off the right edge and 10px above the icons on phones */
#header .sg-hact-cart #cart{display:flex !important;margin:0 !important;width:auto !important}
@media (max-width:640px){
  /* same 20px gutter as the page content below it */
  .sg-hdr .sg-wrap{padding:10px 20px}
  /* one line: "1 prekė(s) - 600.00€" fits next to the icons (481–640px; narrower: below) */
  .sg-scope .sg-hact-cart #cart-total{white-space:nowrap !important;max-width:none}
}
/* phones: emblem + "SEGRIS" wordmark (tagline dropped) with the account and cart icons on the same
   row, like the mockup's phone header. The icon row takes whatever is left (flex-basis 0), so it can
   never wrap under the logo; a long cart total wraps inside its own box instead. */
@media (max-width:480px){
  .sg-hdr .sg-logo{gap:9px}
  .sg-hdr .sg-logo img{width:36px;height:36px}
  .sg-hdr .sg-logo > span{display:block}
  .sg-hdr .sg-logo .sg-name{font-size:17px}
  .sg-hdr .sg-hact-row{flex:1 1 0;min-width:0;justify-content:flex-end;flex-wrap:nowrap;gap:14px}
  .sg-scope .sg-hact-cart{min-width:0;gap:8px !important}
  .sg-scope .sg-hact-cart #cart,.sg-scope .sg-hact-cart .media-body.heading,.sg-scope .sg-hact-cart .media-body.heading > a{min-width:0}
  .sg-scope .sg-hact-cart #cart-total{white-space:normal !important;font-size:12px !important;line-height:1.3 !important}
}

/* notifications (#sys-notification: header $error + common.js addToCart/Wishlist/Compare messages).
   Legacy look was a bitmap icon + pastel box on a 1170px bootstrap container. */
#sys-notification .container{max-width:1240px;width:auto;padding:0 20px;margin:0 auto}
#sys-notification .success,#sys-notification .warning,#sys-notification .attention,#sys-notification .information{
  position:relative;margin:16px 0 0 !important;padding:13px 44px 13px 46px !important;border-radius:4px !important;
  font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;background-position:16px 14px !important;background-repeat:no-repeat !important;background-size:18px 18px !important}
#sys-notification .success{background-color:#eef5ea !important;border:1px solid #b9d9a8 !important;color:#1f3326 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E") !important}
#sys-notification .warning{background-color:#fbeceb !important;border:1px solid #e3a6a3 !important;color:#8f2b28 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f2b28' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.3'/%3E%3C/svg%3E") !important}
#sys-notification .attention,#sys-notification .information{background-color:#f7f1e3 !important;border:1px solid #e0cfa6 !important;color:#5e4724 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e532c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8v.3'/%3E%3C/svg%3E") !important}
#sys-notification .success a,#sys-notification .warning a,#sys-notification .attention a,#sys-notification .information a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* common.js injects <img src=".../close.png" class="close"> and removes the message when that img is
   clicked — keep the element (it is the click target), paint a vector × instead of the bitmap. */
#sys-notification img.close{position:absolute;top:50%;right:10px;width:28px;height:28px;margin-top:-14px;padding:0 !important;float:none !important;cursor:pointer;
  opacity:1 !important;/* bootstrap's .close{opacity:.2} */
  object-position:-999px -999px;border-radius:4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3326' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/14px 14px no-repeat}
#sys-notification .warning img.close{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f2b28' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
#sys-notification .attention img.close,#sys-notification .information img.close{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e4724' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E")}
#sys-notification img.close:hover{background-color:rgba(0,0,0,.07)}
/* phones: header + search + menu already take ~170px; keep stacked messages compact so the page
   heading still shows on the first screen */
@media (max-width:640px){
  #sys-notification .success,#sys-notification .warning,#sys-notification .attention,#sys-notification .information{
    margin-top:10px !important;padding:9px 38px 9px 37px !important;font-size:13px;line-height:1.45;background-position:12px 10px !important;background-size:16px 16px !important}
  #sys-notification img.close{right:5px}
}

/* ---------- footer ---------- */
.sg-scope .sg-footer{padding:56px 0 0}
.sg-scope .sg-footer h4{font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-size:12px !important;font-weight:600 !important;letter-spacing:.1em;text-transform:uppercase !important;color:#f3efe0 !important;line-height:1.4 !important;margin:0 0 18px !important}
.sg-scope .sg-footer-grid ul{margin:0;padding:0;list-style:none}
.sg-scope .sg-footer-grid li{margin:0 0 9px;line-height:1.5}
.sg-scope .sg-footer-grid a{color:#cfc9b8}
.sg-scope .sg-footer-grid a:hover{color:#fff}
.sg-scope .sg-footer-grid-5{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));gap:36px}
.sg-scope .sg-footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sg-scope .sg-footer-logo img{width:44px;height:44px;display:block}
.sg-scope .sg-footer-logo .sg-mont{font-weight:800;font-size:20px;letter-spacing:.1em;color:#f3efe0;line-height:1}
.sg-scope .sg-footer-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;min-height:64px;font-size:13px;color:#9a9587;padding:18px 0}
.sg-scope .sg-footer-modules{padding-bottom:32px}
@media (max-width:1100px){
  .sg-scope .sg-footer-grid-5{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 28px}
  .sg-scope .sg-footer-grid-5 > .sg-footer-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .sg-scope .sg-footer-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .sg-scope .sg-footer{padding-top:44px}
  /* phones: the four short link lists two by two under the full-width brand block, instead of one
     ~1000px column (the mockup's phone footer is a compact block too) */
  .sg-scope .sg-footer-grid-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}
  /* "Klientų aptarnavimas" takes two lines in a phone column, so "Informacija" beside it gets the
     same two-line height and both link lists start on one line */
  .sg-scope .sg-footer-grid-5 > div:nth-child(2) > h4,.sg-scope .sg-footer-grid-5 > div:nth-child(3) > h4{min-height:2.8em}
}
/* ---------- footer_top: manufacturer logo carousel (pavcarousel module, every layout) ----------
   Was a white box with 64px grey logos and round arrow buttons. Now a quiet brand strip between two
   hairlines like the mockup's brand row: logos at their full 80px thumbnail size, the thumbnails'
   white JPG background multiplied into the page colour, each slide's logos centred in four equal
   slots, plain chevrons for prev/next. Module content and Bootstrap carousel behaviour unchanged. */
.sg-scope .sg-footer-top .pavcarousel{background:transparent;border:0;border-top:1px solid #e2ddd1;border-bottom:1px solid #e2ddd1;border-radius:0;padding:8px 48px}
.sg-scope .sg-footer-top .pavcarousel .carousel-inner > .item{text-align:center;font-size:0}
.sg-scope .sg-footer-top .pavcarousel .carousel-inner > .item > div{float:none;display:inline-block;vertical-align:middle;width:25%;font-size:14px}
.sg-scope .sg-footer-top .pavcarousel .item-inner{height:96px}
.sg-scope .sg-footer-top .pavcarousel img{max-height:80px;mix-blend-mode:multiply}
.sg-scope .sg-footer-top .pavcarousel .carousel-control{width:36px;height:36px;margin-top:-18px;border:0;border-radius:4px;background:transparent !important;color:#6b6860;font-size:22px;line-height:36px}
.sg-scope .sg-footer-top .pavcarousel .carousel-control:hover,.sg-scope .sg-footer-top .pavcarousel .carousel-control:focus{background:#ebe7dc !important;color:#1f3326}
.sg-scope .sg-footer-top .pavcarousel .carousel-control.left{left:0}
.sg-scope .sg-footer-top .pavcarousel .carousel-control.right{right:0}
/* One even row of logos. Every banner is a white 80x80 canvas (the module's admin size) with the
   logo letterboxed in the middle, so a shared box can't even them out: a wide logo stays an 80x20
   strip beside an 80x45 one. Each of today's banner files is scaled from the centre (the white margin
   is invisible through multiply) to about the same visual size - wide/thin logos up (at most 1.25x,
   the files are only 80px), big or boxed ones down - and solid dark logos are toned a little lighter,
   pale line logos a little darker, so the grey row reads as one set (hover: full colour as before).
   brightness(1.04) turns the near-white JPG/GIF backgrounds (Dipol #fcfefc) pure white, so no faint
   box shows around them. Keyed on the file name incl. "-80x80": a new or re-sized banner shows at 1x.
   Logo box measured inside each 80x80 canvas in the comments. */
.sg-scope .sg-footer-top .pavcarousel img{transform-origin:50% 50%;filter:grayscale(1) brightness(1.04)}
.sg-scope .sg-footer-top .pavcarousel a:hover img{filter:brightness(1.04)}
.sg-scope .sg-footer-top .pavcarousel img[src*="tagline-80x80."]{transform:scale(1.15);opacity:.55}                    /* Work Sharp 80x20, black box */
.sg-scope .sg-footer-top .pavcarousel img[src*="logo_nay_2013_44x14-80x80."]{opacity:.6}                               /* Nayvis 80x26, dark box */
.sg-scope .sg-footer-top .pavcarousel img[src*="lazdos/logo-80x80."]{transform:scale(1.25);opacity:.6}                 /* 2WOLFS 80x14 */
.sg-scope .sg-footer-top .pavcarousel img[src*="gamintojai/logo-80x80."]{transform:scale(1.25);opacity:.95}            /* Dipol 79x18, pale */
.sg-scope .sg-footer-top .pavcarousel img[src*="kainuunpuukko_logo_normal_1006_1a0-80x80."]{transform:scale(1.25);opacity:.6} /* Kainuun Puukko 56x22 */
.sg-scope .sg-footer-top .pavcarousel img[src*="GSCI_NEW_LOGOm_1-80x80."]{transform:scale(.8);opacity:.55}             /* GSCI 78x44, solid black */
.sg-scope .sg-footer-top .pavcarousel img[src*="data/partner/logo"][src*="(1)-80x80."]{transform:scale(.85);opacity:.95} /* Leupold 73x52, pale */
.sg-scope .sg-footer-top .pavcarousel img[src*="ddoptics_logo-80x80."]{transform:scale(.65);opacity:.6}                /* DDoptics 77x64, dark box */
/* manufacturer carousel is .hidden-xs on phones: don't leave its 88px of padding behind as a gap */
@media (max-width:767px){
  .sg-scope .sg-footer-top{padding-top:0;padding-bottom:0}
  .sg-scope .sg-footer-top .pav-custom{padding:36px 0 32px}
}

/* information pages (information/information, body.page-information): the messages above the page
   (stock warning, "Ačiū: Jūs pridėjote ...") line up with the 860px information column under them
   (.sg-info-crumbs / .sg-infopage above) instead of spanning the 1200px shell container.
   900px = 860px + the container's 2 × 20px padding. */
body.page-information #sys-notification .container{max-width:900px}

/* ---- listings.css ---- */
/* ======================================================================
   Product listings other than the category page: search, specials, brand list, brand page,
   comparison (product/search.tpl, special.tpl, manufacturer_list.tpl, manufacturer_info.tpl,
   compare.tpl). Cards, toolbar and pagination use the category page's markup and classes; the
   rules that give the category page its look live in css_parts/activation.css (cards) and
   css_parts/category-seo.css (toolbar, pager, empty box), scoped to .page-category, so the same
   declarations are repeated below for these pages (keep the two in step when merging).
   Everything is scoped by the body page class, except the first block (every product card).
   ====================================================================== */

/* ---- every product card grid (category, home, search, specials, brand pages) ----
   A sale price stacks the old price above the new one (the rule css_parts/activation.css has for
   the category and home cards), so the price and "Į krepšelį" always share one row and a sale
   card's footer looks like a regular one in the same grid row. Not for the product page's related
   cards (.product-block, product.tpl): their old price is a sibling of the new one, laid out by
   css_parts/descriptions.css. */
.sg-scope .sg-card:not(.product-block) .sg-price.sg-has-special{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.sg-scope .sg-card:not(.product-block) .sg-price.sg-has-special .sg-price-old{margin:0 0 2px;font-size:13px;line-height:1.2}
/* the two-line price is as tall as the button: without the price's 4px top margin the footer keeps
   the button's height, so the button sits exactly where it does on a regular card */
.sg-scope .sg-card:not(.product-block) .sg-foot > .sg-price.sg-has-special{margin-top:0}
/* Product photos: they were shot on RGB 254 grey, not white, and resize() pads them with pure
   white, so a faint grey square showed around the product on the white card. 1% brighter lifts
   254 to 255 (the square disappears); the product itself doesn't visibly change. */
.sg-scope .sg-card:not(.product-block) .sg-img img{filter:brightness(1.01)}

/* ---- listing cards: the category page's card (css_parts/activation.css) ----
   Photo area proportioned to the 254x348 list thumbnails; no photo, or one that fails to load
   (onerror in the templates), shows a neutral box instead of the broken-image icon. */
.page-product-search .sg-scope .sg-card .sg-img,
.page-product-special .sg-scope .sg-card .sg-img,
.page-product-manufacturer-info .sg-scope .sg-card .sg-img{height:auto;min-height:0;max-height:300px;padding:10px;overflow:hidden;aspect-ratio:12 / 13}
.page-product-search .sg-scope .sg-card .sg-img.sg-img-missing::before,
.page-product-special .sg-scope .sg-card .sg-img.sg-img-missing::before,
.page-product-manufacturer-info .sg-scope .sg-card .sg-img.sg-img-missing::before,
.page-product-compare .sg-scope .sg-cmp-img.sg-img-missing::before{content:"";display:block;flex:none;width:100%;height:100%;border-radius:4px;background:#f2efe7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3ab98' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E") no-repeat center/40px 40px}

/* These routes have no side modules: content runs the full width. */
.page-product-search .sg-scope .sg-list-layout,
.page-product-special .sg-scope .sg-list-layout,
.page-product-manufacturer .sg-scope .sg-list-layout,
.page-product-manufacturer-info .sg-scope .sg-list-layout,
.page-product-compare .sg-scope .sg-list-layout{padding-bottom:60px}

/* ---- toolbar: count left, styled selects + a quiet compare link right (category-seo.css) ---- */
.page-product-search .sg-scope .sg-cat-toolbar > .sg-cat-count,
.page-product-special .sg-scope .sg-cat-toolbar > .sg-cat-count,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar > .sg-cat-count{margin-left:0}
.page-product-search .sg-scope .sg-cat-toolbar-right,
.page-product-special .sg-scope .sg-cat-toolbar-right,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar-right{margin-left:auto;gap:10px 14px}
/* the labels also lose the theme's label margin-bottom:5px, which lifted the selects 2-3px */
.page-product-search .sg-scope .sg-cat-toolbar .sg-toolbar-field,
.page-product-special .sg-scope .sg-cat-toolbar .sg-toolbar-field,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-toolbar-field{margin:0;font-size:14px;font-weight:400}
.page-product-search .sg-scope .sg-cat-toolbar .sg-toolbar-field > span,
.page-product-special .sg-scope .sg-cat-toolbar .sg-toolbar-field > span,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-toolbar-field > span{font-weight:400}
.page-product-search .sg-scope .sg-cat-toolbar .sg-select,
.page-product-special .sg-scope .sg-cat-toolbar .sg-select,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:40px;width:196px;min-width:0;margin:0;padding:0 34px 0 12px;border:1px solid #cfc9bb;border-radius:4px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322231f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;font-size:14px;color:#22231f;box-shadow:none;cursor:pointer;transition:border-color .15s}
.page-product-search .sg-scope .sg-cat-toolbar .sg-select:hover,
.page-product-special .sg-scope .sg-cat-toolbar .sg-select:hover,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-select:hover{border-color:#1f3326}
.page-product-search .sg-scope .sg-cat-toolbar .sg-select-narrow,
.page-product-special .sg-scope .sg-cat-toolbar .sg-select-narrow,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-select-narrow{width:72px}
/* #compare-total: common.js rewrites its text after "add to compare" — the icon lives in CSS */
.page-product-search .sg-scope .sg-cat-toolbar .sg-cmp-link,
.page-product-special .sg-scope .sg-cat-toolbar .sg-cmp-link,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-cmp-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;line-height:1.3;color:#1f3326;white-space:nowrap}
.page-product-search .sg-scope .sg-cat-toolbar .sg-cmp-link::before,
.page-product-special .sg-scope .sg-cat-toolbar .sg-cmp-link::before,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-cmp-link::before{content:"";flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3326' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h13M7 7l3-3M7 7l3 3M17 17H4M17 17l-3 3M17 17l-3-3'/%3E%3C/svg%3E") no-repeat center/16px 16px}
.page-product-search .sg-scope .sg-cat-toolbar .sg-cmp-link:hover,
.page-product-special .sg-scope .sg-cat-toolbar .sg-cmp-link:hover,
.page-product-manufacturer-info .sg-scope .sg-cat-toolbar .sg-cmp-link:hover{color:#8a6a3d;text-decoration:underline;text-underline-offset:3px}

/* ---- pager (built in the templates like category.tpl's): 44px boxes, chevrons, centred "…";
   the library's results line was moved into the toolbar by the templates ---- */
.page-product-search .sg-scope .sg-pagination:empty,
.page-product-special .sg-scope .sg-pagination:empty,
.page-product-manufacturer-info .sg-scope .sg-pagination:empty{display:none}
.page-product-search .sg-scope .sg-pagination,
.page-product-special .sg-scope .sg-pagination,
.page-product-manufacturer-info .sg-scope .sg-pagination{margin-top:40px}
.page-product-search .sg-scope .sg-pagination .links,
.page-product-special .sg-scope .sg-pagination .links,
.page-product-manufacturer-info .sg-scope .sg-pagination .links{align-items:center;gap:8px}
.page-product-search .sg-scope .sg-pagination .links a,
.page-product-search .sg-scope .sg-pagination .links b,
.page-product-special .sg-scope .sg-pagination .links a,
.page-product-special .sg-scope .sg-pagination .links b,
.page-product-manufacturer-info .sg-scope .sg-pagination .links a,
.page-product-manufacturer-info .sg-scope .sg-pagination .links b{min-width:44px;height:44px;padding:0 10px;border-color:#cfc9bb;background:#fff;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;transition:border-color .15s}
.page-product-search .sg-scope .sg-pagination .links b,
.page-product-special .sg-scope .sg-pagination .links b,
.page-product-manufacturer-info .sg-scope .sg-pagination .links b{background:#1f3326;border-color:#1f3326;color:#fff}
.page-product-search .sg-scope .sg-pagination .links a:hover,
.page-product-special .sg-scope .sg-pagination .links a:hover,
.page-product-manufacturer-info .sg-scope .sg-pagination .links a:hover{border-color:#1f3326;color:#1f3326}
.page-product-search .sg-scope .sg-pagination .links .sg-pg-arrow,
.page-product-special .sg-scope .sg-pagination .links .sg-pg-arrow,
.page-product-manufacturer-info .sg-scope .sg-pagination .links .sg-pg-arrow{padding:0;color:#22231f}
.page-product-search .sg-scope .sg-pagination .links .sg-pg-gap,
.page-product-special .sg-scope .sg-pagination .links .sg-pg-gap,
.page-product-manufacturer-info .sg-scope .sg-pagination .links .sg-pg-gap{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:44px;padding:0;border:0;background:none;color:#6b6860;font-size:16px;font-weight:600}
.page-product-search .sg-scope .sg-pagination .links .sg-pg-hd,
.page-product-special .sg-scope .sg-pagination .links .sg-pg-hd,
.page-product-manufacturer-info .sg-scope .sg-pagination .links .sg-pg-hd{display:none !important}

/* ---- empty states: one white box, the message and its button(s) centred (category's
   .sg-cat-empty) ---- */
.page-product-search .sg-scope .sg-empty,
.page-product-special .sg-scope .sg-empty,
.page-product-manufacturer .sg-scope .sg-empty,
.page-product-manufacturer-info .sg-scope .sg-empty,
.page-product-compare .sg-scope .sg-empty{display:flex;flex-direction:column;align-items:center;gap:20px;padding:56px 24px;background:#fff;border:1px solid #e2ddd1;border-radius:6px;text-align:center;font-size:15px;line-height:1.6;color:#3e3d39}
.page-product-search .sg-scope .sg-empty > p,
.page-product-special .sg-scope .sg-empty > p,
.page-product-manufacturer .sg-scope .sg-empty > p,
.page-product-manufacturer-info .sg-scope .sg-empty > p,
.page-product-compare .sg-scope .sg-empty > p{margin:0}
.page-product-search .sg-scope .sg-empty-buttons,
.page-product-special .sg-scope .sg-empty-buttons,
.page-product-manufacturer .sg-scope .sg-empty-buttons,
.page-product-manufacturer-info .sg-scope .sg-empty-buttons,
.page-product-compare .sg-scope .sg-empty-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0}
.page-product-search .sg-scope .sg-empty-buttons .sg-btn,
.page-product-special .sg-scope .sg-empty-buttons .sg-btn,
.page-product-manufacturer .sg-scope .sg-empty-buttons .sg-btn,
.page-product-manufacturer-info .sg-scope .sg-empty-buttons .sg-btn,
.page-product-compare .sg-scope .sg-empty-buttons .sg-btn{margin:0}
/* search "nothing found" and empty specials: the account pages' empty-state card (css_parts/forms.css
   .sg-acct-body .sg-empty-card: round beige badge with an icon, text, button), same sizes */
.page-product-search .sg-scope .sg-empty.sg-empty-card,
.page-product-special .sg-scope .sg-empty.sg-empty-card{gap:0;padding:44px 32px 40px;color:#4a4943}
.page-product-search .sg-scope .sg-empty-card .sg-empty-ico,
.page-product-special .sg-scope .sg-empty-card .sg-empty-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;width:64px;height:64px;margin:0 0 18px;border-radius:50%;background:#f0ede4;color:#1f3326}
.page-product-search .sg-scope .sg-empty-card .sg-empty-ico .sg-ico,
.page-product-special .sg-scope .sg-empty-card .sg-empty-ico .sg-ico{width:28px;height:28px}
.page-product-search .sg-scope .sg-empty-card .sg-empty-text,
.page-product-special .sg-scope .sg-empty-card .sg-empty-text{max-width:560px;margin:0 auto;line-height:1.6}
.page-product-search .sg-scope .sg-empty-card .sg-empty-actions,
.page-product-special .sg-scope .sg-empty-card .sg-empty-actions{display:flex;justify-content:center;align-self:stretch;margin:24px 0 0}
.page-product-search .sg-scope .sg-empty-card .sg-empty-actions .sg-btn,
.page-product-special .sg-scope .sg-empty-card .sg-empty-actions .sg-btn{margin:0 !important}

/* ---- search: criteria panel ---- */
.page-product-search .sg-scope .sg-list-h2{font-size:20px !important;margin:0 0 18px !important}
.page-product-search .sg-scope .sg-search-panel{padding:24px 26px 22px;margin-bottom:40px}
.page-product-search .sg-scope .sg-search-panel .sg-list-h2{font-size:16px !important;margin-bottom:16px !important}
.page-product-search .sg-scope .sg-search-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px) auto;gap:16px;align-items:end}
.page-product-search .sg-scope .sg-search-go .sg-btn{height:46px !important}
.page-product-search .sg-scope .sg-search-opts{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:16px}
.page-product-search .sg-scope .sg-search-opts .sg-chk-row{margin:0;font-weight:400}
/* sub_category is disabled while "Visos kategorijos" is selected (the page's own script) */
.page-product-search .sg-scope .sg-search-opts input:disabled{cursor:not-allowed}
.page-product-search .sg-scope .sg-search-opts input:disabled + span{color:#767266;cursor:not-allowed}

/* ---- brand page header ----
   Paladin SEO injects "<h2>Brand</h2>" and <div class="manufacturer-description"> (logo, then the
   brand description, if any) right after the H1 line, i.e. inside .sg-brand-head. The logo tile
   sits beside the H1; a SEO h2/h3 that differs from the H1 is a quiet subtitle line under both;
   one that repeats the H1 is hidden by the template's sg-brand-h2dup / -h3dup class (it stays in
   the HTML). The logo file is resize()d into the category image box (865x250, white padding),
   so it is shown as a white tile. */
.page-product-manufacturer-info .sg-scope .sg-cat-titlebar{align-items:center}
.page-product-manufacturer-info .sg-scope .sg-brand-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;min-width:0}
.page-product-manufacturer-info .sg-scope .sg-brand-head > h1{order:0;min-width:0;overflow-wrap:anywhere}
.page-product-manufacturer-info .sg-scope .sg-brand-head > .manufacturer-description{order:1;min-width:0}
.page-product-manufacturer-info .sg-scope .sg-brand-head > h2,
.page-product-manufacturer-info .sg-scope .sg-brand-head > h3{order:2;flex:1 0 100%;font-family:'Open Sans',Helvetica,Arial,sans-serif !important;font-size:14px !important;font-weight:400 !important;color:#6b6860 !important;margin:0 !important;line-height:1.4 !important}
.page-product-manufacturer-info .sg-scope .sg-brand-h2dup > h2,
.page-product-manufacturer-info .sg-scope .sg-brand-h3dup > h3{display:none !important}
/* the same repeats when the module's position setting puts them at the top of the description
   block (after the logo): -desc classes, set by the template only for that position */
.page-product-manufacturer-info .sg-scope .sg-brand-h2dup-desc > .manufacturer-description > h2:first-child,
.page-product-manufacturer-info .sg-scope .sg-brand-h2dup-desc > .manufacturer-description > img:first-child + h2,
.page-product-manufacturer-info .sg-scope .sg-brand-h3dup-desc > .manufacturer-description > h3:first-child,
.page-product-manufacturer-info .sg-scope .sg-brand-h3dup-desc > .manufacturer-description > img:first-child + h3,
.page-product-manufacturer-info .sg-scope .sg-brand-h3dup-desc > .manufacturer-description > h2:first-child + h3,
.page-product-manufacturer-info .sg-scope .sg-brand-h3dup-desc > .manufacturer-description > img:first-child + h2 + h3{display:none !important}
/* a brand description that only repeats the brand name (template: sg-brand-descdup): its text is
   hidden (font-size:0 for a bare text node, display:none for its elements), the logo stays */
.page-product-manufacturer-info .sg-scope .sg-brand-descdup > .manufacturer-description{font-size:0;line-height:0}
.page-product-manufacturer-info .sg-scope .sg-brand-descdup > .manufacturer-description > :not(img){display:none !important}
.page-product-manufacturer-info .sg-scope .manufacturer-description img.manufacturer-info-logo{display:block;width:auto;max-width:100%;height:72px;margin:0;padding:6px 10px;background:#fff;border:1px solid #e2ddd1;border-radius:6px;object-fit:contain;filter:brightness(1.02)}
/* (brightness: some logo files sit on RGB 252 off-white, which showed as a grey box in the tile) */
/* a brand with a description: text under the H1 line, the logo floated beside it */
/* the head then spans the title bar, and an empty full-width flex item (::after, ordered before the
   text) starts a new line: the text's max-width alone let it fit beside the H1 */
.page-product-manufacturer-info .sg-scope .sg-cat-titlebar > .sg-brand-has-desc{flex:1 1 100%}
.page-product-manufacturer-info .sg-scope .sg-brand-has-desc::after{content:"";order:2;flex:0 0 100%;height:0}
.page-product-manufacturer-info .sg-scope .sg-brand-has-desc > .manufacturer-description{order:3;flex:1 0 100%;max-width:820px;font-size:15px;line-height:1.65;color:#4a4943}
.page-product-manufacturer-info .sg-scope .sg-brand-has-desc .manufacturer-description img.manufacturer-info-logo{float:right;margin:4px 0 12px 24px}
.page-product-manufacturer-info .sg-scope .manufacturer-description p{margin:10px 0 0}
.page-product-manufacturer-info .sg-scope .manufacturer-description h2,
.page-product-manufacturer-info .sg-scope .manufacturer-description h3{font-size:18px !important;margin:18px 0 6px !important}
.page-product-manufacturer-info .sg-scope .manufacturer-description img{max-width:100%;height:auto}
.page-product-manufacturer-info .sg-scope .manufacturer-description::after{content:"";display:table;clear:both}

/* "Žymos:" tag line (Paladin SEO, after the page links) as chips. font-size:0 hides the commas
   between the links (text nodes, i.e. zero-width flex items that still take a gap each: hence the
   4px gap = 8px between chips). Hidden when every tag only repeats the brand name (template). */
.page-product-manufacturer-info .sg-scope .tags{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:40px;padding-top:24px;border-top:1px solid #e2ddd1;font-size:0}
.page-product-manufacturer-info .sg-scope .tags b{font-size:13px;font-weight:600;color:#6b6860;margin-right:8px}
.page-product-manufacturer-info .sg-scope .tags a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #e2ddd1;border-radius:4px;background:#fff;color:#1f3326;font-size:13px;font-weight:600;transition:border-color .15s,color .15s}
.page-product-manufacturer-info .sg-scope .tags a:hover{border-color:#1f3326;color:#1f3326}
.page-product-manufacturer-info .sg-scope .sg-brand-tags-dup .tags{display:none}

/* ---- brand list: letter index + one card per letter ---- */
.page-product-manufacturer .sg-scope .sg-brand-index{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:28px}
.page-product-manufacturer .sg-scope .sg-brand-index-label{font-size:13px;font-weight:600;color:#6b6860;margin-right:6px}
.page-product-manufacturer .sg-scope .sg-brand-index a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 10px;border:1px solid #cfc9bb;border-radius:4px;background:#fff;font-family:Montserrat,sans-serif;font-weight:600;font-size:14px;color:#22231f;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.page-product-manufacturer .sg-scope .sg-brand-index a:hover{background:#1f3326;border-color:#1f3326;color:#fff}
.page-product-manufacturer .sg-scope .sg-brand-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.page-product-manufacturer .sg-scope .manufacturer-list.sg-brand-group{display:flex;flex-direction:column;margin:0;padding:20px 22px 12px;background:#fff;border:1px solid #e2ddd1;border-radius:6px;scroll-margin-top:16px;transition:border-color .15s,box-shadow .15s}
.page-product-manufacturer .sg-scope .sg-brand-group:target{border-color:#1f3326;box-shadow:0 0 0 1px #1f3326}
.page-product-manufacturer .sg-scope .manufacturer-heading.sg-brand-letter{margin:0 0 6px;padding:0 0 12px;border-bottom:1px solid #eeeae1;background:none;font-family:Montserrat,sans-serif;font-weight:700;font-size:24px;line-height:1.1;color:#8a6a3d;white-space:nowrap}
.page-product-manufacturer .sg-scope .sg-brand-group .manufacturer-content{padding:0;overflow:visible}
/* the theme floats ".manufacturer-list ul" into 25%-wide columns */
.page-product-manufacturer .sg-scope .manufacturer-list ul.sg-brand-links{display:flex;flex-direction:column;float:none;width:auto;margin:0;padding:0;list-style:none}
.page-product-manufacturer .sg-scope .sg-brand-links li{float:none;width:auto;margin:0;border-bottom:1px solid #f2efe7}
.page-product-manufacturer .sg-scope .sg-brand-links li:last-child{border-bottom:0}
.page-product-manufacturer .sg-scope .sg-brand-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;font-size:15px;font-weight:600;line-height:1.35;color:#22231f}
.page-product-manufacturer .sg-scope .sg-brand-links a::after{content:"";flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a6a3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") no-repeat center}
.page-product-manufacturer .sg-scope .sg-brand-links a:hover{color:#8a6a3d}

/* ---- comparison table ----
   Three or more products: the full content width. One or two: the card (and the "removed" message
   above it, and "Tęsti" under it) is only as wide as the label column plus at most 340px per
   product, about the width a column has with three, so there is no empty filler column next to the
   products (.sg-cmp-layout-n1/-n2 from compare.tpl). On narrow screens the table scrolls sideways in
   its own panel, the label column and the group titles stay in place (sticky) and a soft shadow at
   the right edge shows there is more (background-attachment local/scroll: the white cover at the
   table's end hides it once scrolled to the end). */
.page-product-compare .sg-scope .sg-cmp-layout-n1 > .success,
.page-product-compare .sg-scope .sg-cmp-layout-n1 > .sg-cmp-box{max-width:542px}  /* 200 + 340 + 2px border */
.page-product-compare .sg-scope .sg-cmp-layout-n2 > .success,
.page-product-compare .sg-scope .sg-cmp-layout-n2 > .sg-cmp-box{max-width:882px}  /* 200 + 2 × 340 + 2 */
.page-product-compare .sg-scope .sg-cmp-panel{overflow:hidden}
.page-product-compare .sg-scope .sg-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(to left,#fff 40%,rgba(255,255,255,0)) right center / 32px 100% no-repeat local,linear-gradient(to left,rgba(31,51,38,.16),rgba(31,51,38,0)) right center / 14px 100% no-repeat scroll}
.page-product-compare .sg-scope table.sg-cmp-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;margin:0;font-size:14px;color:#3e3d39}
.page-product-compare .sg-scope table.sg-cmp-n2{min-width:600px}
.page-product-compare .sg-scope table.sg-cmp-n3{min-width:780px}
.page-product-compare .sg-scope table.sg-cmp-n4{min-width:960px}
.page-product-compare .sg-scope .sg-cmp-table col.sg-cmp-labelcol{width:200px}
.page-product-compare .sg-scope .sg-cmp-table th,
.page-product-compare .sg-scope .sg-cmp-table td{padding:14px 20px;border-bottom:1px solid #eeeae1;vertical-align:top;text-align:left;overflow-wrap:break-word}
.page-product-compare .sg-scope .sg-cmp-table td{border-left:1px solid #eeeae1}
.page-product-compare .sg-scope .sg-cmp-table thead th{padding:16px 20px 12px;font-family:Montserrat,sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a6a3d;background:transparent;border-bottom:1px solid #e2ddd1}
.page-product-compare .sg-scope .sg-cmp-table tbody + thead th{padding-top:28px}
/* group titles ("Prekių aprašymai", attribute groups) stay in view while the table scrolls sideways */
.page-product-compare .sg-scope .sg-cmp-table thead th > .sg-cmp-group{display:inline-block;position:sticky;left:20px}
.page-product-compare .sg-scope .sg-cmp-table tbody th[scope=row]{position:sticky;left:0;z-index:1;background:#faf9f5;box-shadow:1px 0 0 #eeeae1;font-family:Montserrat,sans-serif;font-weight:600;font-size:13px;color:#6b6860}
.page-product-compare .sg-scope .sg-cmp-table td.name a{font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;line-height:1.35;color:#22231f}
.page-product-compare .sg-scope .sg-cmp-table td.name a:hover{color:#8a6a3d}
/* pictures: centred in their column, one size for every product (the photo area of the list
   thumbnail, 254x348); a missing one is the same neutral box as on the listing cards */
.page-product-compare .sg-scope .sg-cmp-images td{text-align:center;vertical-align:middle}
.page-product-compare .sg-scope .sg-cmp-img{display:inline-flex;align-items:center;justify-content:center;max-width:100%;background:#fff;vertical-align:middle}
.page-product-compare .sg-scope .sg-cmp-img img{display:block;width:200px;max-width:100%;height:auto;object-fit:contain;filter:brightness(1.01)}
.page-product-compare .sg-scope .sg-cmp-img.sg-img-missing{width:200px;max-width:100%;aspect-ratio:254 / 348}
.page-product-compare .sg-scope .sg-cmp-price{font-family:Montserrat,sans-serif;font-weight:700;font-size:17px;color:#22231f;white-space:nowrap}
.page-product-compare .sg-scope .sg-cmp-price.sg-has-special{color:#b9312f}
.page-product-compare .sg-scope .sg-cmp-table .sg-price-old{white-space:nowrap}
.page-product-compare .sg-scope .sg-cmp-stars{display:inline-flex;gap:2px;vertical-align:middle}
.page-product-compare .sg-scope .sg-cmp-stars svg{display:block}
.page-product-compare .sg-scope .sg-star-on{fill:#8a6a3d}
.page-product-compare .sg-scope .sg-star-off{fill:#e2ddd1}
.page-product-compare .sg-scope .sg-cmp-reviews{display:block;margin-top:4px;font-size:12px;color:#6b6860}
.page-product-compare .sg-scope .sg-cmp-table td.description{font-size:13px;line-height:1.6;color:#4a4943}
.page-product-compare .sg-scope .sg-cmp-actions th,
.page-product-compare .sg-scope .sg-cmp-actions td{border-bottom:0}
.page-product-compare .sg-scope .sg-cmp-actions th{background:#fff}
.page-product-compare .sg-scope .sg-cmp-actions tr:first-child th,
.page-product-compare .sg-scope .sg-cmp-actions tr:first-child td{padding-top:20px;padding-bottom:10px}
.page-product-compare .sg-scope .sg-cmp-actions tr + tr th,
.page-product-compare .sg-scope .sg-cmp-actions tr + tr td{padding-top:0;padding-bottom:20px}
.page-product-compare .sg-scope .sg-cmp-remove{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#6b6860}
.page-product-compare .sg-scope .sg-cmp-remove:hover{color:#b9312f}
.page-product-compare .sg-scope .sg-cmp-continue{border-top:0;padding-top:0;margin-top:24px}
/* success message after "Pašalinti": close icon on the right (common.js closes on img click) */
.page-product-compare .sg-scope div.success{display:flex;align-items:center;justify-content:space-between;gap:12px}
.page-product-compare .sg-scope div.success img.close{float:none;flex:none;width:16px;height:16px;padding:0;cursor:pointer;opacity:1}

@media (min-width:641px){
  .page-product-search .sg-scope .sg-pagination .links .sg-pg-mo,
  .page-product-special .sg-scope .sg-pagination .links .sg-pg-mo,
  .page-product-manufacturer-info .sg-scope .sg-pagination .links .sg-pg-mo{display:none !important}
}
@media (min-width:641px) and (max-width:1100px){
  .page-product-search .sg-scope .sg-search-row{grid-template-columns:minmax(0,1fr) minmax(0,240px) auto}
  .page-product-compare .sg-scope .sg-cmp-table col.sg-cmp-labelcol{width:150px}
  .page-product-compare .sg-scope .sg-cmp-layout-n1 > .success,
  .page-product-compare .sg-scope .sg-cmp-layout-n1 > .sg-cmp-box{max-width:492px}  /* 150 + 340 + 2 */
  .page-product-compare .sg-scope .sg-cmp-layout-n2 > .success,
  .page-product-compare .sg-scope .sg-cmp-layout-n2 > .sg-cmp-box{max-width:832px}
}
@media (max-width:640px){
  /* ---- phones: two compact product cards per row, as on the category page ---- */
  .page-product-search .sg-scope .sg-list-grid,
  .page-product-special .sg-scope .sg-list-grid,
  .page-product-manufacturer-info .sg-scope .sg-list-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .page-product-search .sg-scope .sg-card .sg-img,
  .page-product-special .sg-scope .sg-card .sg-img,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-img{max-height:none;padding:8px}
  .page-product-search .sg-scope .sg-card .sg-badge,
  .page-product-special .sg-scope .sg-card .sg-badge,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-badge{top:8px;left:8px;padding:4px 7px;font-size:10px}
  .page-product-search .sg-scope .sg-card .sg-body,
  .page-product-special .sg-scope .sg-card .sg-body,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-body{padding:10px 12px 12px;gap:4px}
  .page-product-search .sg-scope .sg-card .sg-brand,
  .page-product-special .sg-scope .sg-card .sg-brand,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-brand{font-size:10px;letter-spacing:.1em}
  .page-product-search .sg-scope .sg-card .sg-pname,
  .page-product-special .sg-scope .sg-card .sg-pname,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-pname{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
  .page-product-search .sg-scope .sg-card .sg-stock,
  .page-product-special .sg-scope .sg-card .sg-stock,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-stock{font-size:11.5px}
  .page-product-search .sg-scope .sg-card .sg-price,
  .page-product-special .sg-scope .sg-card .sg-price,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-price{font-size:16px}
  .page-product-search .sg-scope .sg-card .sg-price-old,
  .page-product-special .sg-scope .sg-card .sg-price-old,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-price-old{font-size:12px}
  .page-product-search .sg-scope .sg-card .sg-foot,
  .page-product-special .sg-scope .sg-card .sg-foot,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-foot{flex-direction:column;align-items:stretch;gap:8px;padding-top:8px}
  /* "Į krepšelį" keeps a full-width button under the price */
  .page-product-search .sg-scope .sg-card .sg-foot .sg-btn,
  .page-product-special .sg-scope .sg-card .sg-foot .sg-btn,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-foot .sg-btn{width:100% !important;height:36px !important;padding:0 8px !important;font-size:12.5px !important}
  /* photo zoom / wishlist / compare icons (always shown on touch screens): smaller and tucked in */
  .page-product-search .sg-scope .sg-card .sg-zoom,
  .page-product-special .sg-scope .sg-card .sg-zoom,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-zoom{top:6px;right:6px;width:30px;height:30px}
  .page-product-search .sg-scope .sg-card .sg-hover-actions,
  .page-product-special .sg-scope .sg-card .sg-hover-actions,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-hover-actions{top:42px;right:6px;gap:6px}
  .page-product-search .sg-scope .sg-card .sg-fav a,
  .page-product-search .sg-scope .sg-card .sg-cmp a,
  .page-product-special .sg-scope .sg-card .sg-fav a,
  .page-product-special .sg-scope .sg-card .sg-cmp a,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-fav a,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-cmp a{width:30px;height:30px}
  .page-product-search .sg-scope .sg-card .sg-zoom .sg-ico,
  .page-product-search .sg-scope .sg-card .sg-fav .sg-ico,
  .page-product-search .sg-scope .sg-card .sg-cmp .sg-ico,
  .page-product-special .sg-scope .sg-card .sg-zoom .sg-ico,
  .page-product-special .sg-scope .sg-card .sg-fav .sg-ico,
  .page-product-special .sg-scope .sg-card .sg-cmp .sg-ico,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-zoom .sg-ico,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-fav .sg-ico,
  .page-product-manufacturer-info .sg-scope .sg-card .sg-cmp .sg-ico{width:15px;height:15px}

  /* ---- phones: toolbar = the sort select alone (compare page stays reachable from the "added"
     notice), its "Rikiuoti:" label kept for screen readers instead of display:none ---- */
  .page-product-search .sg-scope .sg-cat-toolbar-right #compare-total,
  .page-product-special .sg-scope .sg-cat-toolbar-right #compare-total,
  .page-product-manufacturer-info .sg-scope .sg-cat-toolbar-right #compare-total{display:none}
  .page-product-search .sg-scope .sg-cat-toolbar-right,
  .page-product-special .sg-scope .sg-cat-toolbar-right,
  .page-product-manufacturer-info .sg-scope .sg-cat-toolbar-right{margin-left:0}
  .page-product-search .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:first-child > span,
  .page-product-special .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:first-child > span,
  .page-product-manufacturer-info .sg-scope .sg-cat-toolbar-right .sg-toolbar-field:first-child > span{display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* ---- phones: pager ---- */
  .page-product-search .sg-scope .sg-pagination,
  .page-product-special .sg-scope .sg-pagination,
  .page-product-manufacturer-info .sg-scope .sg-pagination{margin-top:28px}
  .page-product-search .sg-scope .sg-pagination .links,
  .page-product-special .sg-scope .sg-pagination .links,
  .page-product-manufacturer-info .sg-scope .sg-pagination .links{gap:5px}
  .page-product-search .sg-scope .sg-pagination .links a,
  .page-product-search .sg-scope .sg-pagination .links b,
  .page-product-special .sg-scope .sg-pagination .links a,
  .page-product-special .sg-scope .sg-pagination .links b,
  .page-product-manufacturer-info .sg-scope .sg-pagination .links a,
  .page-product-manufacturer-info .sg-scope .sg-pagination .links b{min-width:38px;height:38px;padding:0 6px}
  .page-product-search .sg-scope .sg-pagination .links .sg-pg-gap,
  .page-product-special .sg-scope .sg-pagination .links .sg-pg-gap,
  .page-product-manufacturer-info .sg-scope .sg-pagination .links .sg-pg-gap{min-width:16px;height:38px}
  .page-product-search .sg-scope .sg-pagination .links .sg-pg-hm,
  .page-product-search .sg-scope .sg-pagination .links .sg-pg-do,
  .page-product-special .sg-scope .sg-pagination .links .sg-pg-hm,
  .page-product-special .sg-scope .sg-pagination .links .sg-pg-do,
  .page-product-manufacturer-info .sg-scope .sg-pagination .links .sg-pg-hm,
  .page-product-manufacturer-info .sg-scope .sg-pagination .links .sg-pg-do{display:none !important}

  /* ---- phones: search form in one column: keyword, category, the two options, the button ---- */
  .page-product-search .sg-scope .sg-search-panel{display:flex;flex-direction:column;gap:12px;padding:18px 16px;margin-bottom:28px}
  .page-product-search .sg-scope .sg-search-panel .sg-list-h2{margin-bottom:0 !important}
  .page-product-search .sg-scope .sg-search-row{display:contents}
  .page-product-search .sg-scope .sg-search-opts{order:1;flex-direction:column;gap:12px;margin:2px 0}
  .page-product-search .sg-scope .sg-search-go{order:2}
  .page-product-search .sg-scope .sg-search-go .sg-btn{width:100% !important}
  .page-product-search .sg-scope .sg-list-h2{font-size:18px !important}

  .page-product-search .sg-scope .sg-empty,
  .page-product-special .sg-scope .sg-empty,
  .page-product-manufacturer .sg-scope .sg-empty,
  .page-product-manufacturer-info .sg-scope .sg-empty,
  .page-product-compare .sg-scope .sg-empty{padding:40px 18px}
  .page-product-search .sg-scope .sg-empty.sg-empty-card,
  .page-product-special .sg-scope .sg-empty.sg-empty-card{padding:32px 20px 28px}
  .page-product-search .sg-scope .sg-empty-card .sg-empty-actions .sg-btn,
  .page-product-special .sg-scope .sg-empty-card .sg-empty-actions .sg-btn{flex:1 1 auto}

  .page-product-manufacturer-info .sg-scope .sg-brand-head{gap:10px 16px}
  .page-product-manufacturer-info .sg-scope .manufacturer-description img.manufacturer-info-logo{height:52px;padding:4px 8px}
  .page-product-manufacturer-info .sg-scope .sg-brand-has-desc .manufacturer-description img.manufacturer-info-logo{float:none;margin:0 0 12px}

  .page-product-manufacturer .sg-scope .sg-brand-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .page-product-manufacturer .sg-scope .manufacturer-list.sg-brand-group{padding:16px 16px 8px}
  .page-product-manufacturer .sg-scope .manufacturer-heading.sg-brand-letter{font-size:20px;padding-bottom:10px}
  .page-product-manufacturer .sg-scope .sg-brand-links a{font-size:14px;padding:8px 0;overflow-wrap:anywhere}
  .page-product-manufacturer .sg-scope .sg-brand-links a::after{display:none}
  .page-product-manufacturer .sg-scope .sg-brand-index{gap:6px}
  .page-product-manufacturer .sg-scope .sg-brand-index a{min-width:36px;height:36px;padding:0 8px;font-size:13px}
  .page-product-manufacturer .sg-scope .sg-brand-index-label{flex:1 0 100%}

  .page-product-compare .sg-scope .sg-cmp-table col.sg-cmp-labelcol{width:112px}
  .page-product-compare .sg-scope .sg-cmp-table th,
  .page-product-compare .sg-scope .sg-cmp-table td{padding:12px 14px}
  /* phones: the card always spans the width; one product fills it, more scroll sideways */
  .page-product-compare .sg-scope .sg-cmp-layout-n1 > .success,
  .page-product-compare .sg-scope .sg-cmp-layout-n1 > .sg-cmp-box,
  .page-product-compare .sg-scope .sg-cmp-layout-n2 > .success,
  .page-product-compare .sg-scope .sg-cmp-layout-n2 > .sg-cmp-box{max-width:none}
  /* With two or more products every product column is exactly as wide as the panel beside the
     sticky label column (100cqw = the scroll panel's width), so each view shows one whole product
     with its labels, and a swipe snaps to the next product (scroll-padding: the snap point is just
     right of the label column). Browsers without container units keep the fixed minimum widths. */
  .page-product-compare .sg-scope .sg-cmp-scroll{container-type:inline-size;scroll-snap-type:x mandatory;scroll-padding-left:112px}
  .page-product-compare .sg-scope .sg-cmp-table td{scroll-snap-align:start}
  .page-product-compare .sg-scope table.sg-cmp-n2{min-width:472px;min-width:calc(112px + 2 * (100cqw - 112px))}
  .page-product-compare .sg-scope table.sg-cmp-n3{min-width:652px;min-width:calc(112px + 3 * (100cqw - 112px))}
  .page-product-compare .sg-scope table.sg-cmp-n4{min-width:832px;min-width:calc(112px + 4 * (100cqw - 112px))}
}

/* Full-width page like the mockup: the theme's "boxed" layout setting (body.layout-boxed-lg)
   capped #page at 1190px with a shadow, leaving empty side margins on wide screens. Header,
   menu, hero and footer bands now span the window; content stays centred in the 1240px wraps. */
body.layout-boxed-lg #page,body.layout-boxed-md #page{max-width:none !important;box-shadow:none !important}

/* Header mini-cart when empty: the dropdown inherited the header's light text colour, so the
   "Jūsų krepšelis yra tuščias!" line was almost invisible in a big blank box. */
#header #cart .content .empty.sg-cart-empty,.sg-scope .sg-hact-cart .content .empty.sg-cart-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 18px 22px !important;text-align:center;color:#22231f !important}
.sg-hact-cart .content .sg-cart-empty .sg-ico{width:40px;height:40px;color:#8a6a3d}
.sg-hact-cart .content .sg-cart-empty p{margin:0;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;line-height:1.4;color:#22231f !important}
.sg-hact-cart .content .sg-cart-empty .sg-btn{margin-top:2px;color:#1f3326 !important;text-decoration:none}
#header #cart .content:has(.sg-cart-empty){min-height:0 !important}

/* Cookie consent bar (TLSCookiesEU vQmod, injected before </body>): on phones it covered ~43%
   of the screen. Compact it to max 200px: smaller text that scrolls inside the bar, with the
   "Supratau" button kept visible as a full-width strip at its bottom. Desktop unchanged. */
@media (max-width:767px){
  #tlscookieseu-bar{font-size:12px !important;line-height:1.45 !important;padding:12px 14px 0 !important;max-height:200px !important;overflow-y:auto !important;text-align:left !important;background:#1f3326 !important;box-shadow:0 -6px 18px rgba(0,0,0,.18)}
  #tlscookieseu-bar a{color:#e9dcc3}
  #tlscookieseu-bar #tlscookieseu-ok{display:block !important;position:sticky;bottom:0;margin:10px -14px 0 !important;padding:12px !important;text-align:center;background:#8a6a3d !important;color:#fff !important;font-weight:700;font-size:14px;border-radius:0 !important;text-decoration:none}
}

/* Header mini-cart dropdown with items (2026-10-03): readable buttons (the text was dark green on
   dark green / brown), a bridge over the 14px gap so the pointer can travel from the cart to the
   dropdown without closing it, a real thumbnail, and calmer price colours. */
.sg-scope .sg-hact-cart .sg-cart-icon{display:inline-flex;color:inherit}
.sg-scope .sg-hact-cart .media-body.heading > a{cursor:pointer;color:inherit;text-decoration:none}
.sg-scope .sg-hact-cart .content::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.sg-scope .sg-hact-cart .content{min-width:340px !important;padding:12px 14px 14px !important;box-shadow:0 12px 30px rgba(20,30,20,.18) !important}
.sg-scope .sg-hact-cart .mini-cart-info table{width:100%;border-collapse:collapse}
.sg-scope .sg-hact-cart .mini-cart-info td{padding:8px 4px !important;vertical-align:top;border-bottom:1px solid #eeeae1}
.sg-scope .sg-hact-cart .mini-cart-info td.image{width:58px}
.sg-scope .sg-hact-cart .mini-cart-info td.image img{width:50px !important;height:auto !important;max-width:none !important;border:1px solid #eeeae1;border-radius:4px;background:#fff}
.sg-scope .sg-hact-cart .mini-cart-info td.name a{color:#22231f !important;font-weight:600;font-size:13px;line-height:1.35;text-decoration:none}
.sg-scope .sg-hact-cart .mini-cart-info td.name .price{color:#6b6860 !important;font-size:12px;margin-top:3px}
.sg-scope .sg-hact-cart .mini-cart-info td.total{color:#22231f !important;font-weight:700;font-family:Montserrat,sans-serif;white-space:nowrap}
.sg-scope .sg-hact-cart .mini-cart-info td.remove img{cursor:pointer;opacity:.6;width:16px;height:16px}
.sg-scope .sg-hact-cart .mini-cart-info td.remove img:hover{opacity:1}
.sg-scope .sg-hact-cart .mini-cart-total td{color:#22231f !important}
.sg-scope .sg-hact-cart .checkout{display:flex !important;gap:8px;margin-top:10px;padding:0 !important}
.sg-scope .sg-hact-cart .checkout .button{flex:1 1 0;margin:0 !important;padding:11px 10px !important;color:#fff !important;font-family:Montserrat,sans-serif;font-weight:600;font-size:12px !important;letter-spacing:.02em;text-transform:none !important;text-align:center;text-decoration:none !important;line-height:1.2;border:0 !important}
.sg-scope .sg-hact-cart .checkout .view-cart:hover{background-color:#76592f !important}
.sg-scope .sg-hact-cart .checkout .button.checkout:hover{background-color:#16261b !important}

/* Colorbox (product photo lightbox, shipping-estimate popup): the global border-box sizing broke
   its size maths, hiding the close X, the arrows and the counter and cutting off the frame. */
#colorbox,#colorbox *,#cboxWrapper,#cboxOverlay{box-sizing:content-box}
/* Mini-cart buttons: the old theme paints a lime inset box-shadow on .button:hover */
.sg-scope .sg-hact-cart .checkout .button:hover,.sg-scope .sg-hact-cart .checkout .button:focus{box-shadow:none !important;color:#fff !important}

/* Home promo slider of the new product lines (2026-10-05): DJI-style key visual, big uppercase
   headline, one line of text, outline pill button. Scroll-snap track = native swipe on phones. */
.sg-ps-sec{padding-top:40px !important}
.sg-scope .sg-ps{position:relative;border-radius:16px;overflow:hidden;background:#141a16}
.sg-scope .sg-ps-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;outline:none}
.sg-scope .sg-ps-track::-webkit-scrollbar{display:none}
.sg-scope .sg-ps-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;min-height:460px;display:flex;align-items:center;overflow:hidden}
.sg-scope .sg-ps-pic,.sg-scope .sg-ps-pic img{position:absolute;inset:0;width:100%;height:100%}
.sg-scope .sg-ps-pic img{object-fit:cover;max-width:none}
.sg-scope .sg-ps-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,16,13,.86) 0%,rgba(12,16,13,.62) 38%,rgba(12,16,13,.12) 66%,rgba(12,16,13,0) 100%);pointer-events:none}
.sg-scope .sg-ps-body{position:relative;z-index:1;max-width:600px;padding:56px 64px 72px}
.sg-scope .sg-ps-eyebrow{display:block;font-family:Montserrat,Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#d4ae74;margin-bottom:14px}
.sg-scope .sg-ps-title{font-size:54px !important;line-height:1.02 !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:-.01em;color:#fff !important;margin:0}
.sg-scope .sg-ps-text{font-size:17px;line-height:1.55;color:rgba(255,255,255,.88);margin:16px 0 28px;max-width:470px}
.sg-scope .sg-ps-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sg-scope .sg-ps-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 30px;border:1.5px solid rgba(255,255,255,.92);border-radius:999px;color:#fff !important;font-size:16px;font-weight:600;text-decoration:none !important;background:rgba(10,14,11,.18);transition:background .2s,color .2s}
.sg-scope .sg-ps-btn:hover,.sg-scope .sg-ps-btn:focus-visible{background:#fff;color:#141a16 !important}
.sg-scope .sg-ps-price{font-family:Montserrat,Helvetica,Arial,sans-serif;font-size:20px;font-weight:700;color:#fff}
.sg-scope .sg-ps-arrow{position:absolute;top:50%;z-index:2;width:46px;height:46px;margin-top:-23px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,background .2s}
.sg-scope .sg-ps:hover .sg-ps-arrow,.sg-scope .sg-ps-arrow:focus-visible{opacity:1}
.sg-scope .sg-ps-arrow:hover{background:rgba(255,255,255,.3)}
.sg-scope .sg-ps-prev{left:16px}.sg-scope .sg-ps-next{right:16px}
.sg-scope .sg-ps-dots{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:flex;justify-content:center;gap:8px}
.sg-scope .sg-ps-dot{width:9px;height:9px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer;transition:width .25s,background .25s}
.sg-scope .sg-ps-dot[aria-current="true"]{width:34px;background:#fff}
@media (hover:none){.sg-scope .sg-ps-arrow{display:none}}
@media (max-width:991px){
  .sg-scope .sg-ps-title{font-size:42px !important}
  .sg-scope .sg-ps-body{padding:44px 40px 64px;max-width:470px}
  .sg-scope .sg-ps-text{font-size:16px;max-width:390px}
}
@media (max-width:767px){
  /* phones: text on the dark card, photo below it, button over the bottom of the photo */
  .sg-ps-sec{padding-top:24px !important}
  .sg-scope .sg-ps{border-radius:14px}
  .sg-scope .sg-ps-slide{flex-direction:column;align-items:stretch;min-height:0}
  .sg-scope .sg-ps-slide::after{display:none}
  .sg-scope .sg-ps-body{order:-1;position:static;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:none;padding:28px 22px 6px}
  .sg-scope .sg-ps-pic{position:relative;inset:auto;display:block;flex:1 0 auto;height:auto;min-height:300px}
  .sg-scope .sg-ps-pic img{position:absolute;inset:0}
  .sg-scope .sg-ps-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#141a16 0%,rgba(20,26,22,0) 24%,rgba(20,26,22,0) 52%,rgba(20,26,22,.88) 100%)}
  .sg-scope .sg-ps-eyebrow{font-size:11px;margin-bottom:10px;letter-spacing:.11em}
  .sg-scope .sg-ps-title{font-size:34px !important}
  .sg-scope .sg-ps-text{font-size:14px;margin:10px 0 0;color:rgba(255,255,255,.82)}
  .sg-scope .sg-ps-actions{position:absolute;z-index:2;left:0;right:0;bottom:44px;flex-direction:column;gap:8px}
  .sg-scope .sg-ps-price{font-size:17px;order:-1}
  .sg-scope .sg-ps-dots{bottom:16px}
}
@media (prefers-reduced-motion:reduce){.sg-scope .sg-ps-track{scroll-behavior:auto}}
/* text on the right when the photo's subject is on the left */
.sg-scope .sg-ps-r .sg-ps-body{margin-left:auto;max-width:510px;padding-right:56px}
.sg-scope .sg-ps-r::after{background:linear-gradient(270deg,rgba(12,16,13,.86) 0%,rgba(12,16,13,.62) 38%,rgba(12,16,13,.12) 66%,rgba(12,16,13,0) 100%)}
@media (max-width:767px){
  .sg-scope .sg-ps-r .sg-ps-body{margin-left:0}
}

/* slider motion (2026-10-05): progress fill on the active dot, pause button, slow zoom on the photo,
   staggered text entrance. Only with JS (.sg-ps-js) and only when the visitor allows motion. */
.sg-scope .sg-ps-dot{position:relative;overflow:hidden}
.sg-scope .sg-ps-toggle{position:absolute;z-index:2;right:18px;bottom:13px;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.sg-scope .sg-ps-toggle:hover{background:rgba(255,255,255,.3)}
.sg-scope .sg-ps-i-play{display:none}
.sg-scope .sg-ps-paused .sg-ps-i-pause{display:none}
.sg-scope .sg-ps-paused .sg-ps-i-play{display:block}
@media (prefers-reduced-motion:no-preference){
  .sg-scope .sg-ps-run .sg-ps-dot[aria-current="true"]{background:rgba(255,255,255,.38)}
  .sg-scope .sg-ps-run .sg-ps-dot[aria-current="true"]::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform-origin:left center;animation:sgPsFill 3s linear forwards}
  .sg-scope .sg-ps-js .sg-ps-pic img{transform:scale(1);transition:transform .01s linear 1.2s}
  .sg-scope .sg-ps-js .sg-ps-slide.is-active .sg-ps-pic img{transform:scale(1.06);transition:transform 7s cubic-bezier(.2,.6,.3,1)}
  .sg-scope .sg-ps-js .sg-ps-body > *{opacity:0;transform:translateY(18px);transition:opacity .2s linear 1.1s,transform .2s linear 1.1s}
  .sg-scope .sg-ps-js .sg-ps-slide.is-active .sg-ps-body > *{opacity:1;transform:none;transition:opacity .7s ease .35s,transform .7s cubic-bezier(.2,.7,.2,1) .35s}
  .sg-scope .sg-ps-js .sg-ps-slide.is-active .sg-ps-title{transition-delay:.45s}
  .sg-scope .sg-ps-js .sg-ps-slide.is-active .sg-ps-text{transition-delay:.58s}
  .sg-scope .sg-ps-js .sg-ps-slide.is-active .sg-ps-actions{transition-delay:.7s}
}
@keyframes sgPsFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (max-width:767px){.sg-scope .sg-ps-toggle{right:14px;bottom:10px}}

/* "Naktinio matymo prietaisai" browsed by brand (2026-10-06): brand list, hover/focus flyout with
   the brand's device types (model/menu/megamenu.php sgBrandMenu) */
.sg-nav .dropdown-menu.sg-bm-drop{min-width:270px !important;padding:10px 0 !important;overflow:visible !important}
.sg-nav .sg-bm-list{margin:0 !important;padding:0 !important}
.sg-nav .sg-bm-list > li{position:relative}
.sg-nav .sg-bm-list > li > a{display:flex !important;align-items:center;justify-content:space-between;gap:16px;padding:10px 22px !important}
.sg-nav .sg-bm-brand > a .menu-title{font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-weight:700 !important;letter-spacing:.06em;text-transform:uppercase !important;color:#22231f !important}
.sg-nav .sg-bm-arrow{flex:none;color:#8a6a3d;transition:transform .15s}
.sg-nav .sg-bm-brand:hover > a,.sg-nav .sg-bm-brand:focus-within > a{background:#f6f4ee !important}
.sg-nav .sg-bm-brand:hover > a .sg-bm-arrow,.sg-nav .sg-bm-brand:focus-within > a .sg-bm-arrow{transform:translateX(3px)}
.sg-nav .sg-bm-sub{display:none;position:absolute;left:100%;top:-10px;z-index:20;min-width:310px;margin:0 !important;padding:10px 0 !important;background:#fff;border:1px solid #e2ddd1;border-radius:6px;box-shadow:0 14px 30px rgba(31,51,38,.14)}
.sg-nav .sg-bm-brand:hover > .sg-bm-sub,.sg-nav .sg-bm-brand:focus-within > .sg-bm-sub{display:block}
.sg-nav .sg-bm-sub a{display:flex !important;align-items:center;justify-content:space-between;gap:16px;padding:9px 22px !important}
.sg-nav .sg-bm-sub a:hover{background:#f6f4ee !important}
.sg-nav .sg-bm-n{flex:none;min-width:24px;padding:1px 7px;border-radius:999px;background:#eef0ea;color:#4a5a4f;font-size:12px;font-weight:700;text-align:center}
.sg-nav .dropdown-menu li.sg-bm-sep{height:1px;margin:8px 22px !important;background:#e2ddd1 !important}
/* phone menu: brands as headings with their types listed under them */
#menu-offcanvas .sg-bm-sub{display:block;position:static;min-width:0;margin:0;padding:0 0 6px;border:0;box-shadow:none;background:transparent}
#menu-offcanvas .sg-bm-arrow{display:none}
#menu-offcanvas .sg-bm-brand > a{color:#f3efe0 !important;font-weight:700 !important}
#menu-offcanvas .sg-bm-sub a{padding-left:50px !important}
#menu-offcanvas .sg-bm-n{margin-left:8px;color:#9a958a;font-size:12px}
#menu-offcanvas .sg-bm-n:before{content:"("}
#menu-offcanvas .sg-bm-n:after{content:")"}
#menu-offcanvas .sg-bm-sep{height:1px;margin:6px 34px;background:rgba(255,255,255,.12)}
/* category sidebar: brand with its device types */
.sg-scope .sg-cat-brand > a .sg-cat-name{font-weight:700;color:#22231f}
.sg-scope .sg-cat-types{list-style:none;margin:2px 0 4px;padding:0 0 0 14px;border-left:2px solid #e2ddd1}
.sg-scope .sg-cat-types li{padding:4px 0;font-size:13px}
.sg-scope .sg-cat-types a{display:flex !important;align-items:baseline;justify-content:space-between;gap:10px;color:#6b6860}
.sg-scope .sg-cat-types a:hover{color:#8a6a3d}
.sg-scope .sg-cat-types a.sg-cat-active{color:#1f3326;font-weight:700}


/* Home hero, 2026-10-06 (owner request): two scenes cross-fade, the Nocpix photo + headline and the Work Sharp
   photo + "Premium Work Sharp galąstuvai" (home.tpl #sg-hero, script right after it). The photos share the right
   60 %, the two text blocks share one grid cell, so the hero keeps the height of the taller one. */
.sg-scope .sg-hero .sg-hero-pics{position:absolute;right:0;top:0;width:60%;height:100%}
.sg-scope .sg-hero .sg-hero-pics .sg-hero-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .9s ease}
.sg-scope .sg-hero .sg-hero-pics .sg-hero-img.sg-hs-on{opacity:1}
.sg-scope .sg-hero .sg-hs-txt{grid-area:1/1;display:flex;flex-direction:column;gap:22px;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.sg-scope .sg-hero .sg-hs-txt.sg-hs-on{opacity:1;visibility:visible;transition:opacity .55s ease .2s,visibility 0s}
.sg-scope .sg-hero .sg-hs-title{margin:0;font-family:Montserrat,Helvetica,Arial,sans-serif !important;font-weight:700 !important;line-height:1.2 !important}
@media (max-width:1100px){
  .sg-scope .sg-hero .sg-hs-title{font-size:38px !important}
}
@media (min-width:641px) and (max-width:1100px){
  .page-home .sg-scope .sg-hero .sg-hs-title,
  .page-home .sg-scope .sg-hero .sg-hs-txt > p{max-width:56% !important}
}
@media (max-width:640px){
  .sg-scope .sg-hero .sg-hero-pics{position:relative;width:100%;height:210px;flex:0 0 auto}
  .sg-scope .sg-hero .sg-hero-pics .sg-hero-img{position:absolute !important;inset:0;height:100% !important}
  .sg-scope .sg-hero .sg-hero-pics .sg-hero-ws{object-position:74% 55% !important}
  .sg-scope .sg-hero .sg-hero-shade{display:none}
  .sg-scope .sg-hero .sg-hs-txt{gap:16px}
  .sg-scope .sg-hero .sg-hs-title{font-size:30px !important}
}

/* "Naujausios prekės" (2026-10-06): the list is hand-picked, so its length varies (7 now). Same card width as the
   other four-column blocks, an incomplete last row is centred instead of leaving a hole on the right. */
.page-home .sg-scope .sg-latest-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.page-home .sg-scope .sg-latest-grid > .sg-card{flex:0 0 calc((100% - 72px) / 4);min-width:0}
@media (max-width:1100px){
  .page-home .sg-scope .sg-latest-grid > .sg-card{flex-basis:calc((100% - 24px) / 2)}
}
@media (max-width:640px){
  .page-home .sg-scope .sg-latest-grid{gap:12px}
  .page-home .sg-scope .sg-latest-grid > .sg-card{flex-basis:calc((100% - 12px) / 2)}
}

/* slider: "Naujiena" label on the newest products' slides ('new' => true in home.php $sg_slide_config), the same
   brown label as on the product cards */
.sg-scope .sg-ps-new{display:inline-block;align-self:flex-start;background:#8a6a3d;color:#fff;font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;line-height:1;padding:8px 12px;border-radius:4px;margin-bottom:16px}
@media (max-width:767px){
  .sg-scope .sg-ps-new{align-self:center;font-size:11px;padding:6px 10px;margin-bottom:10px}
}

/* "Akcijinės prekės" badge: the sale red used for special prices (.sg-has-special) */
.sg-scope .sg-badge.sg-badge-sale{background:#b9312f}

/* product cards: badge row ("Naujiena" for sgbrand::$new_ids, "Pigu" for specials) */
.sg-scope .sg-card .sg-badges{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px;z-index:3}
.sg-scope .sg-card .sg-badges .sg-badge{position:static}
@media (max-width:640px){
  .sg-scope .sg-card .sg-badges{top:8px;left:8px;gap:4px}
}

/* logo strip (pavcarousel, banner "Gamintojai"): the logos share the row evenly whatever their number (5 now;
   the module's 12/columns grid class is invalid for 5) */
.sg-scope .sg-footer-top .pavcarousel .carousel-inner > .item.active{display:flex;align-items:center;justify-content:space-around}
.sg-scope .sg-footer-top .pavcarousel .carousel-inner > .item > div{float:none;flex:1 1 0;width:auto;min-width:0}

/* phone menu (2026-10-06): the off-canvas panel was position:absolute and one screen tall, so scrolling the page moved it
   away and left the page's light background on the left. Now it is fixed to the screen and scrolls inside itself, and the
   page behind it does not scroll while the menu is open. */
#menu-offcanvas{position:fixed !important;top:0 !important;bottom:0 !important;height:100% !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
body.offcanvas-menu-open{overflow:hidden !important}

/* "Žymos:" tag line, one look on every page (owner 2026-10-06): thin rule above, label with a tag icon,
   round "#" chips that turn dark green on hover. Category / brand / information lines come from the SEO
   module's vQmod (<b>Žymos:</b><a>…</a>, bare commas hidden by font-size:0); the product line is the theme's.
   Column gap 0 + a right margin on each chip: the hidden bare commas are flex items too.
   The hiding rules above (.sg-tag-repeat, .sg-tags-repeat, .sg-brand-tags-dup, a:empty) still win. */
.page-category .sg-scope .sg-cat-main > .gen-tags,
.page-product-manufacturer-info .sg-scope .tags,
.page-product .sg-scope .tab-content.sg-desc .tags.sg-tags,
.sg-scope .sg-infopage .gen-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:40px 0 0;padding-top:22px;border-top:1px solid #e2ddd1;font-size:0;line-height:1}
.page-category .sg-scope .sg-cat-main > .gen-tags b,
.page-product-manufacturer-info .sg-scope .tags b,
.page-product .sg-scope .tags.sg-tags .sg-tags-label,
.sg-scope .sg-infopage .gen-tags b{display:inline-flex;align-items:center;gap:7px;margin:0 14px 0 0;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;font-weight:600;color:#6b6860}
.page-category .sg-scope .sg-cat-main > .gen-tags b::before,
.page-product-manufacturer-info .sg-scope .tags b::before,
.page-product .sg-scope .tags.sg-tags .sg-tags-label::before,
.sg-scope .sg-infopage .gen-tags b::before{content:"";width:16px;height:16px;flex:none;background:#b28c55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.page-category .sg-scope .sg-cat-main > .gen-tags a,
.page-product-manufacturer-info .sg-scope .tags a,
.page-product .sg-scope .tags.sg-tags a.sg-chip,
.sg-scope .sg-infopage .gen-tags a{display:inline-flex;align-items:center;height:34px;min-height:0;margin:0 8px 0 0;padding:0 15px 0 13px;border:1px solid #e2ddd1;border-radius:999px;background:#fff;color:#1f3326 !important;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:13px;font-weight:600;line-height:1;text-decoration:none !important;box-shadow:0 1px 2px rgba(31,51,38,.05);transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
.page-category .sg-scope .sg-cat-main > .gen-tags a::before,
.page-product-manufacturer-info .sg-scope .tags a::before,
.page-product .sg-scope .tags.sg-tags a.sg-chip::before,
.sg-scope .sg-infopage .gen-tags a::before{content:"#";margin-right:3px;color:#b28c55;font-weight:700;transition:color .2s}
.page-category .sg-scope .sg-cat-main > .gen-tags a:hover,
.page-category .sg-scope .sg-cat-main > .gen-tags a:focus-visible,
.page-product-manufacturer-info .sg-scope .tags a:hover,
.page-product-manufacturer-info .sg-scope .tags a:focus-visible,
.page-product .sg-scope .tags.sg-tags a.sg-chip:hover,
.page-product .sg-scope .tags.sg-tags a.sg-chip:focus-visible,
.sg-scope .sg-infopage .gen-tags a:hover,
.sg-scope .sg-infopage .gen-tags a:focus-visible{background:#1f3326;border-color:#1f3326;color:#fff !important;box-shadow:0 3px 10px rgba(31,51,38,.18)}
.page-category .sg-scope .sg-cat-main > .gen-tags a:hover::before,
.page-category .sg-scope .sg-cat-main > .gen-tags a:focus-visible::before,
.page-product-manufacturer-info .sg-scope .tags a:hover::before,
.page-product-manufacturer-info .sg-scope .tags a:focus-visible::before,
.page-product .sg-scope .tags.sg-tags a.sg-chip:hover::before,
.page-product .sg-scope .tags.sg-tags a.sg-chip:focus-visible::before,
.sg-scope .sg-infopage .gen-tags a:hover::before,
.sg-scope .sg-infopage .gen-tags a:focus-visible::before{color:#d9c39a}
@media (max-width:767px){
  .page-category .sg-scope .sg-cat-main > .gen-tags,
  .page-product-manufacturer-info .sg-scope .tags,
  .page-product .sg-scope .tab-content.sg-desc .tags.sg-tags,
  .sg-scope .sg-infopage .gen-tags{margin-top:32px;padding-top:18px}
  /* label on its own line, chips below it; taller chips for fingers */
  .page-category .sg-scope .sg-cat-main > .gen-tags b,
  .page-product-manufacturer-info .sg-scope .tags b,
  .page-product .sg-scope .tags.sg-tags .sg-tags-label,
  .sg-scope .sg-infopage .gen-tags b{flex-basis:100%;margin:0 0 2px}
  .page-category .sg-scope .sg-cat-main > .gen-tags a,
  .page-product-manufacturer-info .sg-scope .tags a,
  .page-product .sg-scope .tags.sg-tags a.sg-chip,
  .sg-scope .sg-infopage .gen-tags a{height:38px}
}