/**
* Opening hours popup - storefront styles.
*
* Deliberately built on the same design language as the "Poradca pri vybere"
* widget (catalog/view/javascript/plant_advisor/widget.css): the same leaf green,
* the same pill with a translucent icon disc, and above all the same two-line
* text - a 14px/700 title over an 11px caption at 82% white.
*
* The markup is injected by system/opening_hours_popup.ocmod.xml, and this file
* is loaded from there rather than added to the theme's main.css, so the module
* stays self-contained and survives a theme update.
*
* Everything here matches on #opening_hours_popup, the same specificity the
* theme's own rules use. It wins because the is injected before
,
* so it comes later in the document than the theme stylesheet in .
*/
#opening_hours_popup {
--ohp-leaf: #2f7d3f;
--ohp-leaf-lit: #3d9553;
--ohp-clay: #a33224;
--ohp-clay-lit: #c04a34;
--ohp-sans: "Quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif;
align-items: center;
background-image: linear-gradient(135deg, var(--ohp-leaf) 0%, var(--ohp-leaf-lit) 100%);
border-radius: 999px;
bottom: 12px;
box-shadow: 0 16px 36px rgba(31, 110, 55, .3);
box-sizing: border-box;
color: #fff;
display: flex;
font-family: var(--ohp-sans);
gap: 12px;
left: 15px;
max-width: calc(100vw - 30px);
min-height: 56px;
padding: 0 14px 0 8px;
position: fixed;
z-index: 99;
}
#opening_hours_popup *,
#opening_hours_popup *::before,
#opening_hours_popup *::after {
box-sizing: border-box;
}
/* Shut: the same shift the widget's green makes, moved onto a clay red. The old
fire-engine red shouted louder than anything else on the page. */
#opening_hours_popup.closed {
background-image: linear-gradient(135deg, var(--ohp-clay) 0%, var(--ohp-clay-lit) 100%);
box-shadow: 0 16px 36px rgba(120, 40, 26, .3);
}
/* ------------------------------------------------------------------ icon */
/* The widget's .pav-fab-icon disc, at the same 40px. */
#opening_hours_popup .ohp-icon {
align-items: center;
background: rgba(255, 255, 255, .18);
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 50%;
display: flex;
flex: none;
height: 40px;
justify-content: center;
width: 40px;
}
#opening_hours_popup .ohp-icon svg {
display: block;
height: 20px;
width: 20px;
}
/* ------------------------------------------------------------------ text */
/*
* The point of the exercise. Previously this inherited the theme body font at
* 14px/22px with a between the lines, which read as a paragraph rather than
* a label. Now it is the widget's stacked pair: tight leading, the state in bold,
* the detail quieter underneath.
*/
#opening_hours_popup .opening_hours {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.2;
padding: 8px 0;
position: relative;
text-align: left;
}
#opening_hours_popup .opening_hours strong {
font-size: 14px;
font-weight: 700;
letter-spacing: .01em;
}
#opening_hours_popup .opening_hours small {
color: rgba(255, 255, 255, .82);
font-size: 11px;
font-weight: 600;
margin-top: 2px;
}
/* The caption is a link when the shop is shut, and it should still read as the
caption - not as the underlined blue-ish link the theme sets globally. */
#opening_hours_popup .opening_hours small a,
#opening_hours_popup a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .45);
text-underline-offset: 2px;
}
#opening_hours_popup .opening_hours small a:hover,
#opening_hours_popup a:hover {
color: #fff;
text-decoration-color: rgba(255, 255, 255, .9);
}
/* ----------------------------------------------------------------- close */
/* The widget's .pav-close: a small quiet cross, not a second focal point. */
#opening_hours_popup .close_button {
align-items: center;
display: flex;
flex: none;
justify-content: center;
padding: 0;
}
#opening_hours_popup .close_button a {
align-items: center;
background: rgba(255, 255, 255, .16);
border-radius: 50%;
color: #fff;
display: flex;
height: 26px;
justify-content: center;
opacity: .75;
text-decoration: none;
transition: opacity .18s ease, background .18s ease;
width: 26px;
}
#opening_hours_popup .close_button a:hover,
#opening_hours_popup .close_button a:focus-visible {
background: rgba(255, 255, 255, .28);
opacity: 1;
}
#opening_hours_popup .close_button svg {
display: block;
height: 14px;
width: 14px;
}
/* ---------------------------------------------------------------- mobile */
/*
* The widget drops its caption on a phone, but here the caption is the answer to
* the question being asked - "until when are you open?" - so both lines stay and
* the pill tightens instead.
*/
@media (max-width: 767px) {
#opening_hours_popup {
bottom: 14px;
gap: 10px;
left: 14px;
min-height: 48px;
padding: 0 12px 0 7px;
}
#opening_hours_popup .ohp-icon {
height: 34px;
width: 34px;
}
#opening_hours_popup .ohp-icon svg {
height: 17px;
width: 17px;
}
#opening_hours_popup .opening_hours strong {
font-size: 13px;
}
}
@media (prefers-reduced-motion: reduce) {
#opening_hours_popup .close_button a {
transition: none;
}
}