/* SHIORA77 — shared Open Sans typography and neutral storefront palette.
   Loaded on every page. Keeps Shoptet's icon fonts and commerce behaviour. */
:root {
  --sh77-action:#222222;
  --sh77-action-hover:#4e4e4e;
  --sh77-surface:#f3f3f3;
  --sh77-white:#ffffff;
  --sh77-text:#1a1c1f;
  --sh77-border:#eaeaea;
  --sh77-control-border:#bbbbbb;
  --sh77-surface-strong:#ededed;
  --sh77-muted:#666666;
  --sh77-subtle:#f9f9f9;
  --template-font:"Open Sans" !important;
  --template-headings-font:"Open Sans" !important;
  --color-primary:#222222 !important;
  --color-primary-hover:#4e4e4e !important;
  --color-secondary:#222222 !important;
  --color-secondary-hover:#4e4e4e !important;
  --color-tertiary:#222222 !important;
  --color-tertiary-hover:#f3f3f3 !important;
  --color-header-background:#ffffff !important;
  --_color-header-text:#1a1c1f !important;
  --_color-header-contrast-text:#ffffff !important;
  --colors-foregrounds-content-primary:#1a1c1f !important;
  --colors-foregrounds-content-primary-dark:#1a1c1f !important;
  --colors-foregrounds-content-secondary:#666666 !important;
  --colors-foregrounds-content-tertiary:#666666 !important;
  --colors-foregrounds-headlines-primary:#1a1c1f !important;
  --colors-foregrounds-content-inverted:#ffffff !important;
  --colors-foregrounds-icons-primary:#1a1c1f !important;
  --colors-foregrounds-borders-primary:#eaeaea !important;
  --colors-foregrounds-borders-secondary:#f3f3f3 !important;
  --colors-surface-primary:#ffffff !important;
  --colors-surface-secondary:#f3f3f3 !important;
  --colors-surface-subtle:#f3f3f3 !important;
  --colors-surface-rating:#222222 !important;
  --colors-forms-background:#ffffff !important;
  --colors-forms-border:#bbbbbb !important;
  --colors-forms-activated:#222222 !important;
  --colors-forms-positive:#1a1c1f !important;
  --colors-forms-critical:#222222 !important;
  --colors-forms-warning:#222222 !important;
  --colors-forms-informative:#222222 !important;
  --colors-state-success:#1a1c1f !important;
  --colors-state-danger:#222222 !important;
  --colors-state-warning:#222222 !important;
  --colors-state-informative:#222222 !important;
  --colors-focus-primary:#222222 !important;
  --dialog-bg-color:#ffffff !important;
  --cookies-notice-background:#f3f3f3 !important;
  --cookies-notice-color:#1a1c1f !important;
  --cookies-notice-button-hover:#4e4e4e !important;
  --cookies-notice-link-hover:#222222 !important;
  --dklab-lastvisited-background-color:#ffffff !important;
  --dklab-instagram-header-color:#1a1c1f !important;
}

/* Text nodes only: no universal/pseudo-element font reset (icons use shoptet). */
html body,
html body :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,p,div,span,a,button,input,select,textarea,label,legend,li,dt,dd,th,td,small,strong,b,em,summary,figcaption,blockquote,font,section,article,main,header,footer,nav,aside) {
  font-family:"Open Sans",sans-serif !important;
}
html body {font-size:16px;line-height:1.625;color:var(--sh77-text);background:var(--sh77-white)}
html body :where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,p,div,span,li,dt,dd,th,td,label,legend,small,strong,b,em,font) {color:var(--sh77-text)}
html body :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4) {color:var(--sh77-text)!important;font-weight:700!important;line-height:1.4}
html body h1,html body .h1 {font-size:28px}
html body h2,html body .h2 {font-size:24px}
html body :is(h3,h4,h5,h6,.h3,.h4) {font-size:16px}
html body :is(strong,b) {font-weight:700}
html body a {color:var(--sh77-action)}
html body a:hover {color:var(--sh77-action-hover)}
html body :is(input,select,textarea) {font-size:16px;color:var(--sh77-text);accent-color:var(--sh77-action)}
html body :is(input,select,textarea):focus-visible {outline-color:var(--sh77-action)}
html body :is(p,td,th,li,div,span,font)[style*="color"] {color:var(--sh77-text)!important}
/* Rich-text product descriptions historically contain inline Verdana. */
html body :is([style*="verdana" i],[face*="verdana" i]) {font-size:16px!important;color:var(--sh77-text)!important}
html body :is([style*="verdana" i],[face*="verdana" i]) :where(p,div,span,li,th,td,strong,b,em,i,a,small) {font-size:inherit!important;color:inherit!important}

/* Header, wordmark and the existing home-page editorial blocks. */
html body :is(#header,.header-top,.header-bottom,.top-navigation-bar,#content) {background:var(--sh77-white)!important}
html body #header .site-name a:after {content:'SHIORA77';font:600 28px/1.2 "Open Sans",sans-serif!important;letter-spacing:.035em;color:var(--sh77-text)!important}
html body :is(#navigation,.navigation-in,.top-navigation-bar) a {color:var(--sh77-text)!important}
html body :is(#navigation,.navigation-in,.top-navigation-bar) a:hover {color:var(--sh77-action)!important}
html body #navigation :is(a,b) {font-family:"Open Sans",sans-serif!important;font-size:14px!important}
html body .sh77-butik {color:var(--sh77-text)}
html body .sh77-butik :is(p,small,span) {color:var(--sh77-text)!important}
html body .sh77-butik h1 {font-size:clamp(30px,3.5vw,48px)!important;letter-spacing:-.025em}
html body :is(.sh77-butik h2,.sh77-butik-cat span,.sh77-butik-visit h2) {font-size:24px!important;font-weight:700!important}
html body :is(.sh77-butik-benefits,.sh77-butik-benefits small,.sh77-butik-cat small) {font-size:14px!important}
html body .sh77-butik .sh77-butik-eyebrow {color:var(--sh77-action)!important;font-size:14px!important}
html body :is(.homepage-group-title,.products-header) {font-family:"Open Sans",sans-serif!important;font-size:24px!important;font-weight:700!important;color:var(--sh77-text)!important}
html body #footer {background:var(--sh77-surface)!important;color:var(--sh77-text)!important;border-color:var(--sh77-border)!important}
html body #footer :is(p,a,span,div,h3,h4,strong) {color:var(--sh77-text)!important}
html body #footer :is(h3,h4) {font-size:16px!important;font-weight:700!important}
html body .footer-bottom {background:var(--sh77-surface)!important}

/* Product cards, information tabs and stock badges. */
html body .p {background:var(--sh77-white)!important;border-color:var(--sh77-border)!important}
html body .p .name,html body:is(.type-index,.type-category) .p .name {font-size:14px!important;font-weight:600!important;line-height:1.55!important;color:var(--sh77-text)!important}
html body .p .name span {color:inherit!important}
html body .p .price-final,html body:is(.type-index,.type-category) .p .price-final {font-size:16px!important;font-weight:700!important;color:var(--sh77-text)!important}
html body :is(.price-final,.price-standard,.price-additional,.availability,.availability span) {color:var(--sh77-text)!important}
html body .availability-label {color:var(--sh77-text)!important}
html body :is(.availability,.widget-parameter-list,.price-additional) {font-size:14px!important}
html body .flags .flag {background:var(--sh77-surface)!important;color:var(--sh77-action)!important;font-weight:700!important}
html body .flags .flag * {color:inherit!important}
html body .flag.flag-discount {background:var(--sh77-action)!important;color:var(--sh77-white)!important}
html body :is(.shp-tab-link,.shp-tab-link:visited) {font-size:16px!important;font-weight:700!important;color:var(--sh77-text)!important}
html body :is(.shp-tab.active .shp-tab-link,.shp-tab-link[aria-selected="true"]) {color:var(--sh77-action)!important;border-color:var(--sh77-action)!important}

/* Conversion actions, including native cart/checkout and the gallery sticky bar. */
html body :is(.btn-primary,.btn-conversion,.add-to-cart-button,.sh77-sticky button,.sh77-butik-cta) {
  background:var(--sh77-action)!important;border-color:var(--sh77-action)!important;
  color:var(--sh77-white)!important;font-family:"Open Sans",sans-serif!important;font-size:16px!important;font-weight:700!important;
}
html body :is(.btn-primary,.btn-conversion,.add-to-cart-button,.sh77-sticky button,.sh77-butik-cta) :is(span,strong,b,small) {color:var(--sh77-white)!important}
html body :is(.btn-primary,.btn-conversion,.add-to-cart-button,.sh77-sticky button,.sh77-butik-cta):hover {background:var(--sh77-action-hover)!important;border-color:var(--sh77-action-hover)!important}
html body .btn-default {background:var(--sh77-surface)!important;border-color:var(--sh77-border)!important;color:var(--sh77-text)!important;font-weight:700}
html body .btn-default:hover {border-color:var(--sh77-action)!important;color:var(--sh77-action)!important}
html body .price-range {background:var(--sh77-surface-strong)!important}
html body .price-range>div {background:var(--sh77-action)!important}
html body :is(.extra.delivery,.extra.delivery span) {font-size:16px;color:var(--sh77-text)!important}
html body .advanced-order .h1 {font-size:24px!important}
html body .advanced-order .h2 {font-size:16px!important}
html body .advanced-order .h2>span {display:block;margin-top:6px;font-size:14px;font-weight:400}
html body #cboxContent {background:var(--sh77-white)}
html body .cart-header :is(.active,.completed)>:is(a,strong):before {background:var(--sh77-action);color:var(--sh77-white)}
html body :is(.messages,.message,.msg) {color:var(--sh77-text);border-color:var(--sh77-action)}

/* Match the shared product gallery without altering its layout or interactions. */
html body.sh77-pdp {--sh77-ink:#1a1c1f;--sh77-line:#eaeaea}
html body.sh77-pdp h1 {font-family:"Open Sans",sans-serif!important;font-size:23px!important;font-weight:700!important;color:var(--sh77-text)!important}
html body.sh77-pdp :is(.brand-wrapper,.detail-parameters,.sh77-variants,.sh77-selection-message) {font-size:14px}
html body.sh77-pdp .p-final-price-wrapper .price-final {font-family:"Open Sans",sans-serif;font-size:24px}
html body.sh77-pdp .p-short-description {font-size:16px;color:var(--sh77-text)}
html body.sh77-pdp :is(.sh77-option,.sh77-tool) {background:var(--sh77-white);border-color:var(--sh77-control-border);color:var(--sh77-text)}
html body.sh77-pdp .sh77-colors .sh77-option {font-size:11px;font-weight:700}
html body.sh77-pdp .sh77-colors .sh77-option[aria-pressed="true"] {background:var(--sh77-surface);border-color:var(--sh77-action)}
html body.sh77-pdp .sh77-sizes .sh77-option {font-size:14px;font-weight:700}
html body.sh77-pdp .sh77-sizes .sh77-option[aria-pressed="true"] {background:var(--sh77-action);border-color:var(--sh77-action);color:var(--sh77-white)}
html body.sh77-pdp .sh77-option:focus-visible {outline-color:var(--sh77-action)}
html body.sh77-pdp :is(.sh77-sticky,.sh77-modal) {background:var(--sh77-white);color:var(--sh77-text);border-color:var(--sh77-border)}
html body.sh77-pdp .sh77-bar:after {background:var(--sh77-control-border)}
html body.sh77-pdp .sh77-bar[aria-current="true"]:after {background:var(--sh77-action)}
html body.sh77-pdp .sh77-selection-message {color:var(--sh77-action)}

/* Shop-owned utility widgets use the same palette as the storefront. */
html body #OPHWidgetWrapp .OPHWidgetItem {background:var(--sh77-action)!important;color:var(--sh77-white)!important}
html body #OPHWidgetWrapp .OPHWidgetItem :is(div,a,small) {color:var(--sh77-white)!important}
html body #OPHWidgetWrapp :is(.OPHWidgetTable,.headTable,.contentTable,.addressText) {background:var(--sh77-white)!important;color:var(--sh77-text)!important}
html body #return-to-top {background:var(--sh77-action)!important;color:var(--sh77-white)!important}
@media(max-width:767px) {
  html body #header .site-name a:after {font-size:23px!important;letter-spacing:.025em}
  html body :is(h1,.h1) {font-size:24px}
  html body :is(h2,.h2,.homepage-group-title,.products-header) {font-size:20px!important}
  html body .sh77-butik h1 {font-size:32px!important}
  html body .sh77-butik-cat span {font-size:16px!important;line-height:1.4}
  html body.sh77-pdp h1 {font-size:20px!important}
  html body .advanced-order .h1 {font-size:22px!important}
  html body .advanced-order .h2 {font-size:16px!important}
  html body #footer :is(.vote-summary,.vote-product-name) {white-space:normal;overflow-wrap:anywhere}
}

/* Neutral surfaces also cover the earlier editorial HTML and third-party theme defaults. */
html body :is(.sh77-butik-hero,.sh77-butik-cat,.sh77-butik-visit) {background:var(--sh77-surface)!important}
html body :is(.header-bottom,.top-navigation-bar,.sh77-butik-benefits,.sh77-variants fieldset+fieldset) {border-color:var(--sh77-border)!important}
html body :is(.sh77-photo,.sh77-colors img) {background:var(--sh77-surface)}
html body :is(.search-input,#formSearch input,.search-form input) {background:var(--sh77-subtle)!important;border-color:var(--sh77-border)!important}
html body :is(.sh77-butik-copy p) {font-size:18px!important;line-height:1.7!important}
html body :is(.sh77-butik-visit p,.p-short-description,.p-short-description p,#description p,#description li,#description td,#description th,.basic-description p,.basic-description li,.basic-description td,.basic-description th) {font-size:16px!important;line-height:1.7!important}
html body :is(.basic-description,#description) :is(span,font)[style*="font-size"] {font-size:inherit!important}
html body :is(.p-short-description p,.sh77-butik-visit p) {color:var(--sh77-text)!important}
html body :is(.price-additional,.price-standard,.breadcrumbs,.breadcrumbs a,.sh77-butik-benefits small,.sh77-butik-cat small) {color:var(--sh77-muted)!important}
html body :is(.sh77-gallery,.sh77-modal,.sh77-variants,.sh77-sticky) button:focus-visible {outline-color:var(--sh77-action)!important}
html body :is(.btn,.sh77-option,.sh77-tool) {transition:background-color .15s ease,border-color .15s ease,color .15s ease}
@media(hover:hover) {
  html body.sh77-pdp .sh77-option:not([aria-pressed="true"]):not(:disabled):hover {background:var(--sh77-surface);border-color:var(--sh77-action)}
}
@media(prefers-reduced-motion:reduce) {html body :is(.btn,.sh77-option,.sh77-tool) {transition:none}}

/* Legacy editorial/brand blocks have their own stronger selectors. */
html body .sh77-butik .sh77-butik-cta {color:var(--sh77-white)!important}
html body :is(.sh77-butik-visit,.sh77-brand,.p-final-price-wrapper) {color:var(--sh77-text)!important}
html body :is(.sh77-butik-visit a,.sh77-brand-all) {color:var(--sh77-action)!important}
html body .sh77-brand {border-color:var(--sh77-border)!important}
html body .sh77-brand-card {background:var(--sh77-white)!important;color:var(--sh77-text)!important;border-color:var(--sh77-border)!important}
html body .sh77-brand-stock {color:var(--sh77-muted)!important}
html body.sh77-pdp .p-short-description p {color:var(--sh77-text)!important}
html body .p .name,html body:is(.type-index,.type-category) .p .name {font-size:16px!important}

/* Mobile header v1: 50px row (80px above 480px) + the existing 10px
   top/bottom padding + two 1px borders. Reserve its full fixed height. */
@media(max-width:767px) {
  html body.template-13.mobile-header-version-1:not(.ordering-process) .overall-wrapper {
    padding-top:72px!important;
  }

  /* Every category level uses this list. Do not apply to the product grid. */
  html body.type-category .subcategories {
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0 0 24px;
    padding:0;
  }
  html body.type-category .subcategories>li {
    flex:0 0 auto;
    width:100%!important;
    max-width:100%;
    margin:0;
    padding:0;
  }
  html body.type-category .subcategories>li>a {
    display:flex;
    align-items:center;
    width:100%;
    height:auto!important;
    min-height:56px;
    padding:14px 16px;
    overflow:visible;
    background:var(--sh77-subtle);
    border:1px solid var(--sh77-border);
  }
  html body.type-category .subcategories>li>a .text {
    display:block;
    flex:1 1 auto;
    min-width:0;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
    -webkit-box-orient:initial;
    white-space:normal!important;
    overflow-wrap:anywhere;
    text-overflow:clip;
    font-size:16px!important;
    font-weight:700;
    line-height:1.5!important;
    text-align:left;
  }
}
@media(min-width:481px) and (max-width:767px) {
  html body.template-13.mobile-header-version-1:not(.ordering-process) .overall-wrapper {
    padding-top:102px!important;
  }
}

/* Footer utilities: readable symbols and separate left/right controls. */
html body #footer a.social-icon {
  background:var(--sh77-action)!important;
  color:var(--sh77-white)!important;
}
html body #footer a.social-icon::before {color:var(--sh77-white)!important}
html body #footer a.social-icon:hover {background:var(--sh77-action-hover)!important}
html body #footer a.social-icon:focus-visible {
  outline:2px solid var(--sh77-text);outline-offset:3px;
}
html body #return-to-top {
  bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
  right:20px!important;
}

/* Equal compact footer controls on desktop and mobile. GLAMI stays in flow. */
html body>.container:has(>a[href="https://www.glami.sk/sh77-sk-2/"]) {
  width:100%!important;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
}
html body a[href="https://www.glami.sk/sh77-sk-2/"] {
  display:flex;align-items:center;width:164px;min-height:44px;
}
html body a[href="https://www.glami.sk/sh77-sk-2/"] img {
  display:block;width:100%;height:auto;max-width:100%;
}
/* The doubled ID overrides the addon's !important RTL positioning. */
html body #OPHWidgetWrapp#OPHWidgetWrapp,
html body #OPHWidgetWrapp#OPHWidgetWrapp.collapsed {
  left:auto!important;right:20px!important;
  bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  width:164px!important;max-width:calc(100vw - 24px);height:44px!important;
}
html body #OPHWidgetWrapp#OPHWidgetWrapp .OPHWidgetQuickView {width:100%}
html body #OPHWidgetWrapp#OPHWidgetWrapp .OPHWidgetItem {
  width:100%;height:44px;min-height:44px;margin:0;padding:0;
  background:var(--sh77-surface-strong)!important;
  color:var(--sh77-text)!important;
  border:1px solid var(--sh77-control-border);border-radius:8px;
  box-shadow:0 2px 8px #1a1c1f14;
}
html body #OPHWidgetWrapp#OPHWidgetWrapp .OPHWidgetItem :is(div,a,small) {color:var(--sh77-text)!important}
html body #OPHWidgetWrapp#OPHWidgetWrapp .OPHWidgetItemInner {display:none}
html body #OPHWidgetWrapp#OPHWidgetWrapp .toggleOpenHours {
  left:0!important;right:auto!important;top:0;
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;width:100%!important;height:42px;
  padding:3px 8px 3px 42px;background-image:none!important;border-radius:8px;
}
/* Draw the clock in CSS so its contrast does not depend on the white PNG. */
html body #OPHWidgetWrapp#OPHWidgetWrapp .toggleOpenHours::before {
  content:"";position:absolute;top:9px;left:10px;
  width:24px;height:24px;border:1.5px solid currentColor;border-radius:50%;
}
html body #OPHWidgetWrapp#OPHWidgetWrapp .toggleOpenHours::after {
  content:"";position:absolute;top:14px;left:21px;
  width:6px;height:9px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:skewY(25deg);
}
html body #OPHWidgetWrapp#OPHWidgetWrapp .toggleOpenHours small {
  position:static;top:auto;left:auto;display:block;width:auto;margin:0;padding:0;
  font-family:"Open Sans",sans-serif!important;font-size:10px;line-height:12px;font-weight:700;
  text-transform:uppercase;text-align:center;white-space:normal;
}
html body #OPHWidgetWrapp#OPHWidgetWrapp .toggleOpenHours:hover {background-color:#1a1c1f0a}
html body #OPHWidgetWrapp#OPHWidgetWrapp .toggleOpenHours:focus-visible {outline:2px solid var(--sh77-text);outline-offset:2px}
html body #OPHWidgetWrapp#OPHWidgetWrapp .OPHWidgetTable {
  left:auto!important;right:0!important;margin-left:0;
  width:280px;max-width:calc(100vw - 24px);
  top:auto!important;bottom:52px!important;border:1px solid var(--sh77-border);
}
html body #OPHWidgetWrapp#OPHWidgetWrapp:not(.openTable) .OPHWidgetTable {visibility:hidden;pointer-events:none}
html body #OPHWidgetWrapp#OPHWidgetWrapp.openTable .OPHWidgetTable {
  height:auto!important;max-height:calc(100dvh - 100px);
  overflow-y:auto;overscroll-behavior:contain;
}
html body #OPHWidgetWrapp#OPHWidgetWrapp :is(.titleTable,.status-text,.todayInfo,table,td,.addressText,.removeWidget) {
  font-family:"Open Sans",sans-serif!important;
}
html body #OPHWidgetWrapp#OPHWidgetWrapp .titleTable {font-size:16px!important;font-weight:700}
html body #OPHWidgetWrapp#OPHWidgetWrapp td {font-size:14px!important;line-height:1.5}
html body #OPHWidgetWrapp#OPHWidgetWrapp .addressText {font-size:12px;line-height:1.5;padding:8px 12px}
/* Keep the arrow out of the opened hours panel on every screen size. */
html body:has(#OPHWidgetWrapp.openTable) #return-to-top {visibility:hidden;pointer-events:none}
@media(max-width:767px) {
  html body #OPHWidgetWrapp#OPHWidgetWrapp,
  html body #OPHWidgetWrapp#OPHWidgetWrapp.collapsed {
    right:12px!important;width:min(164px,calc((100vw - 36px)/2))!important;
  }
  html body #return-to-top {right:12px!important}
  html body>.container:has(>a[href="https://www.glami.sk/sh77-sk-2/"]) {
    padding-left:12px!important;padding-right:12px!important;
  }
  html body a[href="https://www.glami.sk/sh77-sk-2/"] {width:min(164px,calc((100vw - 36px)/2))}
}