/* css/plugin-core.css -- generated by pinogy_app/static_bundles.py. Do not edit; edit the sources named below. */

/* ---- common_plugins/static/css/custom-header.css ---- */
.page-header-top {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}

.page-header-center {
    flex-grow: 1;
    text-align: center;
    align-self: center;
}

ul.page-header-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.page-header-menu li a {
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 140%;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
}

/* Header Menu Wrapping */
@media (max-width: 1200px){
    ul.page-header-menu li a {
        padding: 5px;
        font-size: 18px;
    }
}

ul.page-header-menu li a:hover {
    text-decoration: underline;
}
.only-stroke{
fill: var(--global-primary-color) !important;;
}

ul.page-header-menu li {
    display: inline-block;
}

.page-header-left {
    flex-shrink: 0;
    align-self: center;
}

.page-header-right {
    flex-shrink: 0;
    align-self: center;
    display: flex;
    gap: 20px;
}

.page-header-contact {
    display: flex;
    gap: 10px;
    align-items: center;
    font-weight: 400;
}
.page-header-contact a{
    display: flex;
    gap: inherit;
    font-size: 20px !important;
}

.page-header-social {}

ul.page-header-top-social {
    list-style: none;
    display: flex;
    max-width: 28px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 2px;
}

ul.page-header-top-social li {
    line-height: 10px;
    display: inline-block;
}

ul.page-header-top-social li a img {
    max-width: 12px;
}

ul.page-header-top-social li a:hover {
    opacity: 0.8;
}

/* .page-header-bottom.style-1 {
    background: #efefef;
} */

.page-header-bottom-inner {
    display: flex;
    padding: 5px 0;
    align-items: center;
}

ul.page-header-bottom-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-self: center;
}

ul.page-header-bottom-menu li > a,
ul.page-header-bottom-menu li > .account-login-toggle {
    display: flex;
    gap: 5px;
    align-items: center;
    font-family: var(--general-font);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--global-primary-color);
    text-decoration: none;
}

li.has-sub-menu{
    list-style: none;
}

li.has-sub-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0px;
    display: none;
    z-index: 999;
}

.page-header-menu li.has-sub-menu ul {
    left: 0px;
}
.page-header-menu li.has-sub-menu ul li a,
.page-header-menu li.has-sub-menu ul li .menu-login-action{
    text-decoration: none;
}

li.has-sub-menu.menu-right ul {
    right: 0;
    left: auto;
}
.page-header-menu li.has-sub-menu.menu-right ul {
    right: 0;
    left: auto;
}
li.has-sub-menu {
    position: relative;
}

/* PW-2376: Sign In / Sign Out / Create Account in `ul.menu_login` are
   `<button class="menu-login-action">`, not `<a href="javascript:void(0);">`.
   Every `… li a` rule for that panel names `.menu-login-action` beside it; this
   strips what a button has and an anchor does not. `:where()` keeps this at
   (0,1,0) — below those rules — so their font, colour and padding still win. */
:where(.has-sub-menu .menu_login) .menu-login-action {
    background: none;
    border: 0;
    margin: 0;
    font: inherit;
    /* `font` does not reach these, and the user-agent button sets its own. */
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    text-indent: inherit;
    text-shadow: inherit;
    text-align: left;
    cursor: pointer;
}

/* PW-2376 (#6038): the account icon that opens `ul.menu_login` is
   `<button class="account-login-toggle">`, not `<a href="javascript:;">`. The
   rules that laid the anchor out (`ul.page-header-bottom-menu li > a` above,
   `.plb-account > li > a` in petland2/header.css) name it too; this strips the
   user-agent button chrome an anchor never had. `:where()` keeps it at (0,1,0)
   so those rules still win. Its content is two SVGs with their own colours, so
   `color: inherit` only matters for `currentColor`. */
:where(.has-sub-menu) > .account-login-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    text-indent: inherit;
    text-shadow: inherit;
    text-align: inherit;
    cursor: pointer;
}

li.has-sub-menu ul li a,
li.has-sub-menu ul li .menu-login-action,
.store-change-outer
{
    font-family: var(--heading-font);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--global-primary-color);
    padding: 10px;
    /* background: #efefef; */
    display: inline-block;
    white-space: nowrap;
}

.store-change-outer{
    padding: 0;
}

ul.page-header-bottom-social {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

ul.page-header-bottom-social li a:hover {
    opacity: 0.8;
}

ul.page-header-bottom-social lia {
    display: inline-block;
}


.page-header-bottom.style-2 {
    background: var(--global-primary-color);
}

.page-header-bottom.style-2 ul.page-header-bottom-menu li a {
    color: #fff;
}

.page-header-bottom.style-2 ul.page-header-bottom-menu li.has-sub-menu ul li >  a {
    color: var(--global-primary-color);
}

.page-header-bottom-search {
    position: relative;
}

.page-header-bottom-search button {
    position: absolute;
    right: 4px;
    top: 5px;
    background: transparent;
    border: 0;
}

.page-header-bottom-search input {
    width: 100%;
    height: 40px;
    padding: 10px;
    font-family: var(--general-font);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 40px;
    text-align: start;
    color: var(--global-primary-color);
    padding-right: 40px;
    border-radius: var(--border-radius);
}

.page-header-bottom-right {
    display: flex;
    align-content: center;
    gap: 20px;
}

.page-header-bottom-left {
    align-self: center;
}

/* ---- common_plugins/static/css/custom-footer.css ---- */
.footer-top {
    padding: 60px 0;
}

/* v1's carried footer logo renders on its own row (#5128), not in the panel's
 * col-lg-2 / col-xl-3 column, so cap it at about that column's width (#5294).
 *
 * The box is not reserved before the lazy image loads, and that shift is
 * accepted (#5454). `width: auto` is what keeps `max-height` from distorting a
 * tall image, and it also discards the `width` attribute, so the attribute
 * ratio has no definite side to size from. Letting the attribute width stand,
 * or an inline `aspect-ratio`, sizes the box from the attribute, and
 * `max-height` then squashes the image instead of scaling it. The footer is the
 * last thing on the page and lazy-loaded below the fold, so little moves. */
.footer-v1-logo img {
    max-width: min(100%, 18rem);
    max-height: 8rem;
    width: auto;
    height: auto;
}

.footer-social ul {
    list-style: none;
    margin: 1;
    padding: 0;
}

.footer-social ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.footer-social {
    margin-top: 35px;
}
@media (max-width: 575px) {
    .footer-links ul li, .footer-links ul li a{
        font-size: 18px;
    }
}
@media (min-width: 576px) {
    .footer-links ul li, .footer-links ul li a{
        font-size: 13px;
    }
}
@media (min-width: 768px) {
    .footer-links ul li, .footer-links ul li a{
        font-size: 15px;
    }
}
@media (min-width: 1200px) {
    .footer-links ul li, .footer-links ul li a{
        font-size: 14px;
    }
}
@media (min-width: 1400px) {
    .footer-links ul li, .footer-links ul li a{
        font-size: 17px;
    }
}
.footer-links ul li {
    font-family: var(--general-font);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: #FFFFFF;
    padding: 10px 0;
}

.footer-links ul li a {
    word-break: break-word;
    font-family: var(--general-font);
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-decoration: none;
}

.footer-links ul li a:hover {
    text-decoration: underline;
}

/* WCAG 2.5.8 Target Size (Minimum), PW-2580 (#7941): a quick link or footer
   menu link was one line of text, about 21px tall, under the 24px minimum. The
   link box now has at least 24px of height with the text centred in it, so the
   text sits where it did and each row grows by a few pixels at most. Only
   the classless menu links: the contact rows (`.ftr-wrap`) are flex rows with an
   icon and lay themselves out. */
.footer-links ul li a:not([class]) {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.footer-links ul li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-links ul {
    margin: 0;
    padding: 0;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 28px 0;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
/* identical to box height */


/* White */
    color: #FFFFFF;
    /* The only opacity on the bottom bar: a second 0.8 on its links multiplied
       to 0.64 and failed WCAG AA contrast (#5937). */
    opacity: 0.8;
}

.footer-bottom-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* `.copyright-line` is the copyright `<span>` that used to be an
   `<a href="javascript:;">` linking nowhere (PW-2376); styled as it was. */
.footer-bottom-links ul li a,
.footer-bottom-links ul li .copyright-line {
    font-family: var(--general-font);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 19px;
    color: #FFFFFF;
    text-decoration: none;
    display: inline-block;
}

/* WCAG 2.5.8 (#7941): Privacy Policy / Terms of Use measured 19px tall (the
   19px line-height). Give the link box 24px, text centred, without changing
   the font or the copyright line beside it. */
.footer-bottom-links ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.footer-bottom-links ul {
    display: flex;
    flex-flow: row;
    gap: 20px;
}

.footer-links.store-hours-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links.store-hours-links li {
    display: grid;
    grid-template-columns: 9ch auto;
    gap: 1rem;
    align-items: baseline;
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* #7180: grouped days ("Wednesday – Saturday", up to 20 characters) need a
   wider day column than 9ch, or the label runs under the time. The column
   grows to the label where there is room and, in a narrow column (col-xl-3,
   or a small phone), the label wraps at its spaces ("Monday –" / "Saturday")
   while the time stays on one line, in its column. With subgrid every row
   shares one day column sized to the longest label, so the times line up. */
.footer-links.store-hours-links ul.store-hours-grouped li {
    grid-template-columns: minmax(min-content, 20ch) auto;
    white-space: normal;
}

.footer-links.store-hours-links ul.store-hours-grouped .hours {
    white-space: nowrap;
}

@supports (grid-template-columns: subgrid) {
    .footer-links.store-hours-links ul.store-hours-grouped {
        display: grid;
        grid-template-columns: minmax(min-content, max-content) auto;
        column-gap: 1rem;
    }

    .footer-links.store-hours-links ul.store-hours-grouped li {
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
    }
}

@supports not (display: grid) {
    .footer-links.store-hours-links li {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }
}