/*
Theme Name:   Sun Health Pharmacy (Astra)
Theme URI:    https://sunhealthpharmacy.thedinosignal.com
Description:  Astra child theme for 新興藥房 Sun Health Pharmacy, styled after a classic e-commerce marketplace layout — top info bar, centered search, left CATEGORIES sidebar, hero + promo tiles, FEATURED PRODUCTS grid. Orange + charcoal palette. Order-only store (no online payment).
Author:       Dino Signal
Template:     astra
Version:      3.0.0
Text Domain:  sunhealth
*/

/* ============================================================================
   Palette — marketplace template: orange primary + charcoal + white.
   ========================================================================== */
:root {
  --sh-orange:#F5821F; --sh-orange-dark:#E06C0A; --sh-orange-050:#FEF3E8; --sh-orange-100:#FBDCBD;
  --sh-charcoal:#3A3A3A; --sh-charcoal-2:#4A4A4A;
  --sh-ink:#333333; --sh-ink-soft:#555555; --sh-muted:#888888;
  --sh-line:#E3E3E3; --sh-bg:#F5F5F5; --sh-surface:#FFFFFF;
  --sh-star:#F5A623;
  --sh-radius:4px; --sh-radius-sm:3px;
  --sh-shadow:0 1px 3px rgba(0,0,0,.08);
  --sh-shadow-lg:0 4px 16px rgba(0,0,0,.12);

  /* Astra global palette overrides */
  --ast-global-color-0:#F5821F;  /* primary */
  --ast-global-color-1:#E06C0A;  /* primary hover */
  --ast-global-color-2:#333333;  /* body text */
  --ast-global-color-3:#3A3A3A;  /* headings */
  --ast-global-color-4:#F5F5F5;  /* light bg */
  --ast-global-color-5:#E3E3E3;  /* border */
  --ast-global-color-6:#888888;  /* muted */
}

body, .ast-container, button, input, select, textarea {
  font-family:"Noto Sans TC","PingFang HK","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
body { font-size:15.5px; line-height:1.7; color:var(--sh-ink); background:var(--sh-bg); }
h1,h2,h3,h4,.entry-title { line-height:1.35; color:var(--sh-charcoal); }
a { color:var(--sh-ink); }
a:hover { color:var(--sh-orange); }
.ast-container { max-width:1200px; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .button:focus-visible, .ast-button:focus-visible {
  outline:2px solid var(--sh-orange); outline-offset:2px;
}

/* ============================================================================
   Top info bar (phone · email · address) — injected via wp_body_open
   ========================================================================== */
.sh-infobar-top { background:#fafafa; border-bottom:1px solid var(--sh-line); font-size:.82rem; color:var(--sh-muted); }
.sh-infobar-top .sh-wrap { max-width:1200px; margin:0 auto; padding:.5em 20px; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; align-items:center; }
.sh-infobar-top .sh-wrap span { display:inline-flex; align-items:center; gap:.4em; }
.sh-infobar-top a { color:var(--sh-muted); }
.sh-infobar-top a:hover { color:var(--sh-orange); }
.sh-infobar-top .ic { color:var(--sh-orange); }

/* ============================================================================
   Header search band (logo is in Astra header; search sits just below)
   ========================================================================== */
.sh-searchband { background:#fff; border-bottom:1px solid var(--sh-line); padding:.9rem 0; }
.sh-searchband .sh-wrap { max-width:1200px; margin:0 auto; padding:0 20px; display:flex; justify-content:center; }
.sh-search-form { display:flex; width:100%; max-width:680px; }
.sh-search-form input[type="search"] {
  flex:1; border:1px solid var(--sh-line); border-right:0; border-radius:var(--sh-radius) 0 0 var(--sh-radius);
  padding:.7em 1.1em; font-size:.95rem; background:#fff; font-family:inherit; color:var(--sh-ink);
}
.sh-search-form input[type="search"]:focus { outline:none; border-color:var(--sh-orange); }
.sh-search-form button { border:0; background:var(--sh-orange); color:#fff; border-radius:0 var(--sh-radius) var(--sh-radius) 0; padding:0 1.4em; font-weight:700; cursor:pointer; }
.sh-search-form button:hover { background:var(--sh-orange-dark); }

/* ============================================================================
   Nav — active tab in orange (Astra primary menu)
   ========================================================================== */
.main-header-menu, .ast-primary-header-bar { background:#fff; }
.main-header-menu .menu-item > a { color:var(--sh-charcoal); font-weight:600; }
.main-header-menu .menu-item > a:hover,
.main-header-menu .current-menu-item > a,
.main-header-menu .current-menu-ancestor > a { color:var(--sh-orange); }

/* ============================================================================
   Buttons — orange
   ========================================================================== */
.ast-button, button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit, .woocommerce .single_add_to_cart_button,
.wc-block-components-button {
  background:var(--sh-orange) !important; color:#fff !important; border:0 !important;
  border-radius:var(--sh-radius) !important; font-weight:700 !important;
  transition:background .15s ease;
}
.ast-button:hover, button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover, .wc-block-components-button:hover {
  background:var(--sh-orange-dark) !important; color:#fff !important;
}

/* ============================================================================
   Homepage two-column layout: left sidebar + main
   ========================================================================== */
.sh-home { max-width:1200px; margin:1.2rem auto; padding:0 20px; display:grid; grid-template-columns:250px 1fr; gap:1.2rem; align-items:start; }
@media (max-width:900px){ .sh-home { grid-template-columns:1fr; } }

/* Boxed panel with dark header (CATEGORIES / FASHION) */
.sh-panel { background:#fff; border:1px solid var(--sh-line); border-radius:var(--sh-radius); margin-bottom:1.2rem; overflow:hidden; }
.sh-panel > .sh-panel-hd { background:var(--sh-charcoal); color:#fff; font-weight:700; padding:.75em 1em; display:flex; align-items:center; justify-content:space-between; letter-spacing:.03em; }
.sh-panel > .sh-panel-hd .bars { opacity:.8; }
.sh-panel.sh-panel--accent > .sh-panel-hd { background:var(--sh-charcoal); }
.sh-panel.sh-panel--accent > .sh-panel-hd::before { content:"👕"; }

/* Category list */
.sh-catlist { list-style:none; margin:0; padding:.3em 0; }
.sh-catlist li { border-bottom:1px solid #f0f0f0; }
.sh-catlist li:last-child { border-bottom:0; }
.sh-catlist a { display:flex; align-items:center; gap:.6em; padding:.6em 1em; color:var(--sh-ink); font-size:.9rem; }
.sh-catlist a:hover { color:var(--sh-orange); background:var(--sh-orange-050); padding-left:1.3em; transition:padding .15s ease; }
.sh-catlist .ic { color:var(--sh-muted); font-size:.85rem; }
.sh-catlist a:hover .ic { color:var(--sh-orange); }

/* Promo box (fashion-style banner) */
.sh-promo-box { position:relative; border:3px solid var(--sh-orange); border-radius:var(--sh-radius); margin:1em; overflow:hidden; }
.sh-promo-box .sh-promo-inner { background:linear-gradient(135deg,#fff 0%,var(--sh-orange-050) 100%); padding:1.4em 1em; text-align:center; }
.sh-promo-box .sh-off { font-size:1.4rem; font-weight:800; color:var(--sh-orange); }
.sh-promo-box .sh-off small { display:block; font-size:.8rem; color:var(--sh-charcoal); font-weight:700; letter-spacing:.05em; }
.sh-promo-box .sh-promo-emoji { font-size:3rem; margin:.3em 0; }

/* ============================================================================
   Hero + promo tiles (main column)
   ========================================================================== */
.sh-hero {
  background:linear-gradient(135deg,#FDE8EF 0%,#FBDCBD 100%); color:var(--sh-charcoal);
  border-radius:var(--sh-radius); padding:clamp(1.6rem,4vw,2.6rem); position:relative; overflow:hidden;
  display:grid; gap:.6rem; min-height:230px; align-content:center;
}
.sh-hero .sh-eyebrow { font-size:1.1rem; font-weight:700; color:var(--sh-orange); letter-spacing:.06em; }
.sh-hero h1 { margin:0; font-size:clamp(1.6rem,4vw,2.4rem); color:var(--sh-charcoal); }
.sh-hero h1 b { color:var(--sh-orange); }
.sh-hero p { margin:0; color:var(--sh-ink-soft); }
.sh-hero .sh-hero-cta { display:inline-flex; align-items:center; gap:.4em; background:var(--sh-orange); color:#fff; font-weight:800; border-radius:var(--sh-radius); padding:.6em 1.4em; width:fit-content; margin-top:.4rem; }
.sh-hero .sh-hero-cta:hover { background:var(--sh-orange-dark); color:#fff; }

.sh-promo-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem; }
@media (max-width:640px){ .sh-promo-tiles { grid-template-columns:1fr; } }
.sh-tile { position:relative; border-radius:var(--sh-radius); overflow:hidden; min-height:130px; display:flex; flex-direction:column; justify-content:center; padding:1.1em; color:#fff; }
.sh-tile.t1 { background:linear-gradient(135deg,#4a4a4a,#6a6a6a); }
.sh-tile.t2 { background:linear-gradient(135deg,#2E9488,#3AA79A); }
.sh-tile.t3 { background:linear-gradient(135deg,#C0392B,#E1615A); }
.sh-tile .sh-tile-t { font-weight:800; font-size:1.1rem; text-shadow:0 1px 4px rgba(0,0,0,.2); }
.sh-tile .sh-tile-s { font-size:.85rem; opacity:.92; margin-top:.2em; }
.sh-tile .sh-shopnow { margin-top:.7em; background:var(--sh-orange); color:#fff; font-weight:700; font-size:.8rem; padding:.4em .9em; border-radius:var(--sh-radius); width:fit-content; }
.sh-tile .sh-shopnow:hover { background:var(--sh-orange-dark); color:#fff; }

/* ============================================================================
   Section header (FEATURED PRODUCTS) — orange top accent
   ========================================================================== */
.sh-sec { margin-top:1.6rem; background:#fff; border:1px solid var(--sh-line); border-radius:var(--sh-radius); }
.sh-sec > h2 { margin:0; font-size:1.05rem; font-weight:800; color:var(--sh-charcoal); padding:.8em 1em; border-top:2px solid var(--sh-orange); border-bottom:1px solid var(--sh-line); letter-spacing:.03em; }
.sh-sec .sh-sec-body { padding:1.1em; }

/* ============================================================================
   Product cards — orange stars + orange price
   ========================================================================== */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  background:#fff; border:1px solid var(--sh-line); border-radius:var(--sh-radius);
  padding:.8rem; box-shadow:none; text-align:center; transition:box-shadow .15s ease, border-color .15s ease;
}
.woocommerce ul.products li.product:hover { box-shadow:var(--sh-shadow-lg); border-color:var(--sh-orange-100); }
.woocommerce ul.products li.product a img { border-radius:0; background:#fff; aspect-ratio:1/1; object-fit:contain; margin-bottom:.6rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size:.9rem; font-weight:600; color:var(--sh-ink); min-height:2.8em; }
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price { color:var(--sh-orange) !important; font-weight:800; }
.woocommerce ul.products li.product .price del { color:var(--sh-muted); font-weight:500; }
.woocommerce ul.products li.product .price ins { color:var(--sh-orange); text-decoration:none; }
.woocommerce .star-rating span::before, .woocommerce p.stars a::before { color:var(--sh-star); }
.woocommerce .star-rating::before { color:#ddd; }
.woocommerce ul.products li.product .star-rating { margin:0 auto .4em; }
.woocommerce span.onsale { background:var(--sh-orange) !important; color:#fff !important; border-radius:2px; min-height:auto; min-width:auto; padding:.2em .55em; font-weight:700; line-height:1.4; }
.sh-card-cat { display:inline-block; font-size:.68rem; font-weight:700; color:var(--sh-orange-dark); background:var(--sh-orange-050); border-radius:2px; padding:.15em .55em; margin-bottom:.3em; }
.sh-price-tbd { color:var(--sh-muted); font-weight:700; font-size:.85rem; }

/* Homepage product grids — force 4 columns regardless of WooCommerce body class */
.sh-sec-body .products { display:flex !important; flex-wrap:wrap; gap:1rem; margin:0 !important; padding:0; list-style:none; }
.sh-sec-body .products::before, .sh-sec-body .products::after { display:none !important; }
.sh-sec-body .products li.product { width:calc(25% - .75rem) !important; margin:0 !important; float:none !important; clear:none !important; }
@media (max-width:1100px){ .sh-sec-body .products li.product { width:calc(33.333% - .667rem) !important; } }
@media (max-width:640px){ .sh-sec-body .products li.product { width:calc(50% - .5rem) !important; } }

/* Order-only note */
.sh-orderonly-note { background:var(--sh-orange-050); border:1px solid var(--sh-orange-100); color:#7a4a12; border-radius:var(--sh-radius); padding:.8em 1em; margin:0 0 1.2em; font-weight:600; }

/* Shop/archive: style Astra sidebar category widget like the template */
.widget-area .widget_product_categories .widget-title,
.widget-area .widget_categories .widget-title {
  background:var(--sh-charcoal); color:#fff; padding:.7em 1em; margin:0 0 .3em; border-radius:var(--sh-radius) var(--sh-radius) 0 0; font-size:1rem;
}
.widget-area .widget_product_categories ul li { border-bottom:1px solid #f0f0f0; padding:.5em 0; }
.widget-area .widget_product_categories ul li a:hover { color:var(--sh-orange); }