/* ================================================================
   JIBU eshop reskin — imitates the old jibuco.com WooCommerce shop
   (jibuco.com/old-site/shop, Salient "classic" product style).
   SCOPE: the products grid (#products-grid) ONLY. Loaded AFTER
   jibu_catalog.css + the page's inline <style>, so it wins.
   Card = flat (no chrome), image on top with a blue #005499
   "Add to cart" button that slides up on hover; Cabin title,
   Open Sans price. Values lifted from the live Salient CSS.
   ================================================================ */

/* ---- Grid: flat flex, 4-up -> 3-up -> 2-up (old-shop gutters) ---- */
#products-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    grid-template-columns: none !important;
}
#products-grid .product-card {
    width: 23.4% !important;
    margin: 0 1.5% 34px 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: visible !important;
    transition: none !important;
    transform: none !important;
}
@media (max-width: 1300px) {
    #products-grid .product-card { width: 31.2% !important; margin-right: 2% !important; }
}
@media (max-width: 999px) {
    #products-grid .product-card { width: 47.8% !important; margin-right: 4% !important; }
}

/* ---- Image: square, full width, no radius, no hover scale ---- */
#products-grid .product-image-container {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 0 !important;
    aspect-ratio: 1 / 1;
    box-shadow: none !important;
}
#products-grid .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: none !important;
}

/* ---- Details: left-aligned, tight (old-shop) ---- */
#products-grid .product-details {
    padding: 0 !important;
    text-align: left !important;
    background: transparent !important;
}
/* Title: Cabin 18/23 600 dark, padding .5em 0 .3em, margin-top 10px */
#products-grid .product-name {
    font-family: 'Cabin', sans-serif !important;
    font-size: 18px !important;
    line-height: 23px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    margin: 10px 0 0 0 !important;
    padding: .5em 0 .3em 0 !important;
}
/* Price: Open Sans 18/22 600 Jibu blue */
#products-grid .product-price {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 22px !important;
    font-weight: 600 !important;
    color: #005499 !important;
    margin: 0 0 .5em 0 !important;
    text-align: left !important;
    background: none !important;
    -webkit-text-fill-color: #005499;
}

/* ---- Add-to-cart button: parked below image, slides up on card hover ---- */
#products-grid .eshop-cart-ctl {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
}
#products-grid .eshop-add {
    display: block;
    width: 100%;
    background: #005499 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    padding: 8px 15px !important;
    min-height: 40px;
    border: none !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    text-align: center;
    transform: translateY(101%);
    transition: transform .25s ease 0s, opacity .2s ease !important;
}
#products-grid .product-card:hover .eshop-add { transform: translateY(0); }
#products-grid .eshop-add:hover { opacity: .9; }
#products-grid .eshop-add.added { background: #1aa85d !important; }

/* Touch / small screens: no hover -> keep the button visible */
@media (hover: none) {
    #products-grid .eshop-add { transform: translateY(0) !important; }
}
@media (max-width: 999px) {
    #products-grid .eshop-add { transform: translateY(0) !important; }
}

/* ---- Stepper: hidden until item added, then shown under the price ---- */
#products-grid .eshop-stepper {
    display: none !important;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
#products-grid .product-card.has-qty .eshop-stepper { display: flex !important; }
#products-grid .eshop-stepper .qty-btn {
    width: 30px; height: 30px;
    background: #005499 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    border: none !important;
    border-radius: 3px !important;
    font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
#products-grid .eshop-stepper .qty-input {
    width: 44px; height: 30px; text-align: center;
    border: 1px solid #d6dee6 !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #142e44 !important;
    -webkit-text-fill-color: #142e44;
    color-scheme: light;
    font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 600;
}


/* ---- Slim top bar (old-shop header imitation) ---- */
.eshop-topbar {
    display: flex; align-items: center; gap: 14px;
    background: #005499;
    padding: 12px 18px;
    margin: 0 0 2px 0;
}
.eshop-topbar .eshop-logo { height: 40px; width: auto; display: block; }
.eshop-topbar .eshop-shop-title {
    margin-left: auto;
    font-family: 'Cabin', sans-serif;
    color: #fff; -webkit-text-fill-color:#fff;
    font-size: 20px; font-weight: 600; letter-spacing: .5px;
}

/* ---- Order-as selector, relocated below the slim header (light bg) ---- */
.eshop-orderas { padding: 14px 4px 2px; }
.eshop-orderas .price-list-label {
    font-family: 'Open Sans', sans-serif; font-size: 13px;
    color: #5a6a82; margin: 0 0 8px 2px; font-weight: 600;
}
.eshop-orderas .price-list-toggle {
    background: #eef3f8 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    flex-wrap: wrap;
}
.eshop-orderas .price-option {
    color: #005499 !important; -webkit-text-fill-color:#005499;
}
.eshop-orderas .price-option:hover {
    color: #003a68 !important; -webkit-text-fill-color:#003a68;
    background: rgba(0,84,153,.08) !important;
}
.eshop-orderas .price-option.active {
    background: #005499 !important;
    color: #fff !important; -webkit-text-fill-color:#fff;
}

/* ---- Search / deep-link hide ----
   The reskin sets `.product-card { display:flex !important }`, so filtering by
   inline style.display was a no-op. This class is more specific AND !important,
   so it reliably hides non-matching cards. Paired with the classList toggle in
   applyProductVisibility(). */
#products-grid .product-card.eshop-hidden { display: none !important; }

/* ---- Whole card is tap-to-add ---- */
#products-grid .product-card { cursor: pointer; }
#products-grid .product-card:active .product-image-container { opacity: .85; }
/* the stepper controls keep the normal button cursor */
#products-grid .eshop-stepper .qty-input { cursor: text; }

/* ---- Social links (Account -> About Jibu) ---- */
.eshop-social {
    display: flex; align-items: center; gap: 14px;
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid #e5ebf2;
    flex-wrap: wrap;
}
.eshop-social .eshop-social-label {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px; font-weight: 600; color: #5a6a82;
}
.eshop-social .eshop-social-icons { display: flex; gap: 10px; }
.eshop-social a {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: #005499; color: #fff !important; -webkit-text-fill-color: #fff;
    text-decoration: none; font-size: 17px; line-height: 1;
    transition: background .15s ease, transform .15s ease;
}
.eshop-social a:hover { background: #003a68; transform: translateY(-2px); }
.eshop-social a:focus-visible { outline: 2px solid #1aa85d; outline-offset: 2px; }

/* ---- Always-visible page footer (brand + social) ---- */
.eshop-footer {
    margin: 26px 0 96px;          /* big bottom gap clears the fixed bottom-nav / cart bar */
    padding: 20px 16px 4px;
    border-top: 1px solid #e5ebf2;
    text-align: center;
}
/* footer variant of the social row: centered, no own divider (footer has one) */
.eshop-social.eshop-social--footer {
    justify-content: center;
    margin-top: 0; padding-top: 0; border-top: none;
}
.eshop-footer .eshop-footer-tag {
    margin: 14px 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px; color: #8a97a8;
}

/* === HEADER-SOCIAL-BAR (UG align) 2026-07-07 ===
   Flat white social glyphs in the header upper-right (matches RW/KE/CT106);
   higher specificity than the round-button .eshop-social a base. */
.eshop-topbar .eshop-social--bar{ display:flex; align-items:center; gap:15px; margin-left:14px; margin-top:0; padding-top:0; border-top:none; flex-wrap:nowrap; }
.eshop-topbar .eshop-social--bar a{
  width:auto; height:auto; padding:0; background:transparent; border-radius:0;
  color:#fff !important; -webkit-text-fill-color:#fff; font-size:17px; line-height:1;
  transition:opacity .15s ease, transform .15s ease;
}
.eshop-topbar .eshop-social--bar a:hover{ background:transparent; opacity:.82; transform:translateY(-1px); }
@media (max-width:520px){
  .eshop-topbar .eshop-social--bar{ gap:12px; margin-left:10px; }
  .eshop-topbar .eshop-social--bar a{ font-size:15px; }
}