/* ============================================================================
   ApkiShop — Site-wide UI enhancement layer (color-neutral)
   ----------------------------------------------------------------------------
   Loaded after main.css on every public page. Polishes product cards, buttons
   and interaction states WITHOUT recolouring anything, so it harmonises with
   both the main green theme and vendor storefronts' custom palettes.
   Brand-coloured "bolder" treatment lives in apki-home-enhance.css (home only).
   Non-destructive: no layout/markup changes, fully reversible.
   ========================================================================== */

:root {
  --apkix-ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quint */
  --apkix-dur: 240ms;
  --apkix-radius: 14px;
  --apkix-shadow-rest: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 6px rgba(16, 24, 40, .05);
  --apkix-shadow-hover: 0 10px 28px rgba(16, 24, 40, .12);
}

/* ---- Product cards ------------------------------------------------------ */
.product-cart-wrap.product-card {
  border-radius: var(--apkix-radius);
  box-shadow: var(--apkix-shadow-rest);
  transition: transform var(--apkix-dur) var(--apkix-ease),
              box-shadow var(--apkix-dur) var(--apkix-ease),
              border-color var(--apkix-dur) var(--apkix-ease);
  will-change: transform;
}
.product-cart-wrap.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--apkix-shadow-hover);   /* single defined shadow, not border+shadow */
}

/* Clip the image so the zoom stays inside the rounded corners */
.product-cart-wrap .product-img-action-wrap,
.product-cart-wrap .product-img {
  overflow: hidden;
  border-radius: calc(var(--apkix-radius) - 4px);
}

/* Snappier, tasteful image zoom (theme default is a sluggish 1.5s) */
.product-img-zoom a img {
  transition: transform 600ms var(--apkix-ease) !important;
}
.product-cart-wrap:hover .product-img-zoom a img,
.product-img-zoom:hover a img {
  transform: scale(1.07);
}

/* ---- Buttons & interactive chrome --------------------------------------- */
.btn, .button, .add-cart, .product-action a {
  transition: transform var(--apkix-dur) var(--apkix-ease),
              box-shadow var(--apkix-dur) var(--apkix-ease),
              background-color var(--apkix-dur) var(--apkix-ease),
              color var(--apkix-dur) var(--apkix-ease);
}
.btn:hover, .button:hover { transform: translateY(-1px); }
.btn:active, .button:active { transform: translateY(0); }

/* Hover-reveal action icons (wishlist/compare/quickview) feel smoother */
.product-action {
  transition: opacity var(--apkix-dur) var(--apkix-ease),
              transform var(--apkix-dur) var(--apkix-ease);
}

/* ---- Accessibility: visible keyboard focus everywhere ------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.add-cart:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Motion safety ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .product-cart-wrap.product-card,
  .product-img-zoom a img,
  .btn, .button, .add-cart, .product-action { transition: none !important; }
  .product-cart-wrap.product-card:hover { transform: none; }
  .product-cart-wrap:hover .product-img-zoom a img,
  .product-img-zoom:hover a img { transform: none; }
}

/* ----------------------------------------------------------
   Banner button — bottom-center position + price overlay
   ---------------------------------------------------------- */
.banner-img .banner-text.banner-text-bottom {
  top: auto !important;
  bottom: 20px !important;
  transform: none !important;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 16px;
  text-align: center;
}
.banner-img.style-2 .banner-text.banner-text-bottom {
  top: auto !important;
  bottom: 28px !important;
  transform: none !important;
}
.banner-text-bottom .banner-price {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  margin: 0 0 8px;
  line-height: 1.1;
}
.banner-text-bottom h4 {
  margin-bottom: 6px;
}
.banner-text-bottom h2 {
  margin-bottom: 10px;
}

/* ----------------------------------------------------------
   Banner images — hold the intended 768x450 landscape ratio so
   off-ratio uploads are cropped (cover) instead of shown stretched
   or portrait. The portrait special banner (.style-2) renders via a
   CSS background image and is intentionally excluded.
   ---------------------------------------------------------- */
.banner-img:not(.style-2) {
  aspect-ratio: 768 / 450 !important;
  overflow: hidden !important;
}
.banner-img:not(.style-2) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* ----------------------------------------------------------
   Footer hotline phone numbers — two numbers on a single line,
   strictly top-aligned so both phone numbers sit on the same
   horizontal baseline.
   ---------------------------------------------------------- */

/* Hotline internal alignment (all breakpoints) */
.footer-bottom-compact .hotline {
  align-items: flex-start;
}
.footer-bottom-compact .hotline img {
  margin-top: 4px;
}
.footer-bottom-compact .hotline p {
  margin-bottom: 0;
  line-height: 1.3;
}
.footer-bottom-compact .hotline p span {
  display: block;
  font-size: 11px;
}

/* XL: lay the two hotline blocks out as a flex row */
@media (min-width: 1200px) {
  .footer-bottom-compact .col-xl-4.text-center.d-md-block {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 24px;
  }
  .footer-bottom-compact .hotline.d-lg-inline-flex {
    margin-right: 0 !important;
    white-space: nowrap;
  }
}

/* Business operator attribution (compliance/verification notice) — deliberately understated */
.operated-by-note {
  font-size: 11px;
  line-height: 1.4;
  color: #b6bdc4;
  opacity: 0.75;
  letter-spacing: 0.1px;
}
.operated-by-note a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.operated-by-note a:hover {
  color: var(--brand-color, #3bb77e);
  opacity: 1;
}