/*
Theme Name: Storefront Pharmacity
Theme URI: https://example.com/
Description: Custom WooCommerce pharmacy child theme (Storefront-based). Multilingual-ready with Polylang, includes an inquiry-based cart -> contact checkout flow. Ships with placeholder text and images for the client to replace via wp-admin.
Author: Your Company
Author URI: https://example.com/
Template: storefront
Version: 1.1.3
Text Domain: storefront-pharmacity
Requires PHP: 7.4
Requires at least: 6.0
*/

/* =========================================================
   Design tokens (pharmacy palette) — placeholders, safe to
   change here or via Customizer > Colors.
   ========================================================= */
:root {
  --pharm-primary: #0a8f5f;      /* pharmacy green */
  --pharm-primary-dark: #076b46;
  --pharm-secondary: #1a73e8;    /* medical blue accent */
  --pharm-accent: #ff9800;       /* CTA orange */
  --pharm-bg-soft: #f3f9f6;
  --pharm-text: #1f2d27;
  --pharm-text-muted: #5a6b64;
  --pharm-border: #e1ece6;
  --pharm-white: #ffffff;
  --pharm-radius: 10px;
  --pharm-shadow: 0 8px 24px rgba(10, 40, 30, 0.08);
}

/* =========================================================
   Global safety net — avoid horizontal overflow/wrapping
   caused by long navigation labels pushing header content.
   ========================================================= */
body {
  overflow-x: hidden;
}
.pharm-topbar {
  position: relative;
  z-index: 10;
}

/* =========================================================
   Header/nav contrast on a dark header background.
   Storefront's own Header Text Color (Customize > Colors) is meant to
   handle this, but if it's left on the default dark text while the
   header background is set dark, the primary menu becomes unreadable.
   These rules only fix the text/icon colors — they don't change the
   header's background color itself (that stays whatever is set in
   Customize > Colors > Header Background).
   ========================================================= */
.main-navigation a,
.main-navigation .menu-toggle,
#primary-menu > li > a,
#primary-menu li a,
.primary-navigation a,
.handheld-navigation a {
  color: var(--pharm-white) !important;
}
.site-header-cart .cart-contents,
.site-header-cart .cart-contents .amount,
.site-header-cart .cart-contents .count,
.site-header-cart .widget_shopping_cart a,
.site-header-cart .widget_shopping_cart .amount,
.site-header-cart .widget_shopping_cart .quantity,
.site-header-cart .widget_shopping_cart .total,
.site-header-cart .widget_shopping_cart .buttons a,
.site-header-cart .widget_shopping_cart li,
.site-header-cart .widget_shopping_cart p,
.site-header-cart .widget_shopping_cart span {
  color: var(--pharm-white) !important;
}
.site-header-cart .cart-contents::after,
.site-header-cart .cart-contents:before,
.site-header-cart .widget_shopping_cart::before {
  color: var(--pharm-white) !important;
}
.main-navigation a:hover,
.main-navigation .menu-toggle:hover,
.primary-navigation a:hover,
.handheld-navigation a:hover,
.site-header-cart .cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover {
  color: var(--pharm-accent) !important;
}
.main-navigation .menu-toggle {
  border-color: var(--pharm-white);
}

/* =========================================================
   Header language switcher — dropdown next to the main nav,
   easier to find/use than the small text links in the thin
   top bar alone. Uses Polylang's native <select> dropdown mode.
   ========================================================= */
.pharm-header-lang-switcher {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.pharm-header-lang-switcher select {
  background: rgba(255, 255, 255, 0.12);
  color: var(--pharm-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--pharm-radius);
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.pharm-header-lang-switcher select:hover,
.pharm-header-lang-switcher select:focus {
  border-color: var(--pharm-white);
}
.pharm-header-lang-switcher select option {
  color: var(--pharm-text);
}

/* =========================================================
   Top utility bar (contact info + language switcher)
   ========================================================= */
.pharm-topbar {
  background: var(--pharm-primary-dark);
  color: var(--pharm-white);
  font-size: 13px;
}
.pharm-topbar__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
}
.pharm-topbar a {
  color: var(--pharm-white);
  text-decoration: none;
  opacity: 0.9;
}
.pharm-topbar a:hover {
  opacity: 1;
  text-decoration: underline;
}
.pharm-topbar__contacts {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.pharm-topbar__lang {
  display: flex;
  gap: 10px;
  align-items: center;
}
.pharm-topbar__lang ul {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================================================
   Hero section
   ========================================================= */
.pharm-hero {
  background: linear-gradient(120deg, var(--pharm-bg-soft) 55%, var(--pharm-white) 45%);
  padding: 64px 20px;
}
.pharm-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.pharm-hero__eyebrow {
  display: inline-block;
  color: var(--pharm-primary);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
}
.pharm-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--pharm-text);
}
.pharm-hero__subtitle {
  font-size: 17px;
  color: var(--pharm-text-muted);
  margin-bottom: 28px;
  max-width: 46ch;
}
.pharm-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pharm-btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--pharm-radius);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pharm-btn--primary {
  background: var(--pharm-primary);
  color: var(--pharm-white);
}
.pharm-btn--primary:hover {
  background: var(--pharm-primary-dark);
  color: var(--pharm-white);
  transform: translateY(-2px);
}
.pharm-btn--outline {
  border: 2px solid var(--pharm-primary);
  color: var(--pharm-primary);
  background: transparent;
}
.pharm-btn--outline:hover {
  background: var(--pharm-primary);
  color: var(--pharm-white);
}
.pharm-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--pharm-radius);
  box-shadow: var(--pharm-shadow);
}

/* =========================================================
   Section wrapper + heading
   ========================================================= */
.pharm-section {
  padding: 64px 20px;
}
.pharm-section--soft {
  background: var(--pharm-bg-soft);
}
.pharm-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.pharm-section__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}
.pharm-section__eyebrow {
  color: var(--pharm-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
}
.pharm-section__title {
  font-size: clamp(24px, 3vw, 34px);
  margin: 8px 0 12px;
  color: var(--pharm-text);
}
.pharm-section__desc {
  color: var(--pharm-text-muted);
}

/* =========================================================
   Why choose us grid (services CPT)
   ========================================================= */
.pharm-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.pharm-service-card {
  background: var(--pharm-white);
  border: 1px solid var(--pharm-border);
  border-radius: var(--pharm-radius);
  padding: 28px 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pharm-service-card:hover {
  box-shadow: var(--pharm-shadow);
  transform: translateY(-4px);
}
.pharm-service-card__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--pharm-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pharm-service-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.pharm-service-card__title {
  font-size: 18px;
  margin: 0 0 8px;
}
.pharm-service-card__desc {
  color: var(--pharm-text-muted);
  font-size: 14px;
  margin: 0;
}

/* =========================================================
   Stats counter
   ========================================================= */
.pharm-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  background: var(--pharm-primary);
  border-radius: var(--pharm-radius);
  padding: 40px 20px;
}
.pharm-stat {
  text-align: center;
  color: var(--pharm-white);
}
.pharm-stat__number {
  font-size: 38px;
  font-weight: 800;
  display: block;
}
.pharm-stat__label {
  font-size: 14px;
  opacity: 0.9;
}

/* =========================================================
   Featured products grid (WooCommerce)
   ========================================================= */
.pharm-products ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 24px;
}
.pharm-products ul.products li.product {
  /* WooCommerce's own CSS sets an explicit float + percentage width on
     .product (e.g. width: 22%; float: left;) which, unlike auto-sized
     boxes, is NOT overridden by the grid's default stretch alignment —
     it was making each card ~22% of its already-narrow grid track,
     collapsing text to one character per line. Force it back to fill
     its grid cell. */
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  border: 1px solid var(--pharm-border);
  border-radius: var(--pharm-radius);
  padding: 16px;
  transition: box-shadow 0.2s ease;
}
.pharm-products ul.products li.product img {
  width: 100%;
  height: auto;
}
.pharm-products ul.products li.product:hover {
  box-shadow: var(--pharm-shadow);
}
.pharm-products .pharm-empty-state {
  text-align: center;
  color: var(--pharm-text-muted);
  padding: 40px 0;
}

/* =========================================================
   Testimonials
   ========================================================= */
.pharm-testimonials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.pharm-testimonial-card {
  background: var(--pharm-white);
  border-radius: var(--pharm-radius);
  padding: 28px;
  box-shadow: var(--pharm-shadow);
}
.pharm-testimonial-card__quote {
  font-style: italic;
  color: var(--pharm-text);
  margin-bottom: 16px;
}
.pharm-testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pharm-testimonial-card__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.pharm-testimonial-card__name {
  font-weight: 700;
  margin: 0;
}
.pharm-testimonial-card__role {
  font-size: 13px;
  color: var(--pharm-text-muted);
  margin: 0;
}

/* =========================================================
   Latest news
   ========================================================= */
.pharm-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.pharm-news-card {
  background: var(--pharm-white);
  border: 1px solid var(--pharm-border);
  border-radius: var(--pharm-radius);
  overflow: hidden;
}
.pharm-news-card__thumb img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.pharm-news-card__body {
  padding: 18px;
}
.pharm-news-card__date {
  font-size: 12px;
  color: var(--pharm-primary);
  font-weight: 700;
  text-transform: uppercase;
}
.pharm-news-card__title {
  font-size: 17px;
  margin: 8px 0;
}
.pharm-news-card__title a {
  color: var(--pharm-text);
  text-decoration: none;
}
.pharm-news-card__excerpt {
  color: var(--pharm-text-muted);
  font-size: 14px;
}

/* =========================================================
   CTA banner
   ========================================================= */
.pharm-cta {
  background: var(--pharm-primary-dark);
  border-radius: var(--pharm-radius);
  padding: 48px 32px;
  color: var(--pharm-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.pharm-cta__title {
  font-size: 24px;
  margin: 0 0 6px;
}
.pharm-cta__desc {
  opacity: 0.85;
  margin: 0;
}
.pharm-cta .pharm-btn--primary {
  background: var(--pharm-accent);
}
.pharm-cta .pharm-btn--primary:hover {
  background: #e68900;
}

/* =========================================================
   Contact / inquiry cart page
   ========================================================= */
.pharm-inquiry-cart {
  background: var(--pharm-white);
  border: 1px solid var(--pharm-border);
  border-radius: var(--pharm-radius);
  padding: 24px;
  margin-bottom: 32px;
}
.pharm-inquiry-cart__title {
  margin-top: 0;
}
.pharm-inquiry-cart table {
  width: 100%;
  border-collapse: collapse;
}
.pharm-inquiry-cart table th,
.pharm-inquiry-cart table td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--pharm-border);
}
.pharm-inquiry-cart__empty {
  color: var(--pharm-text-muted);
}
.pharm-contact-form .form-row {
  margin-bottom: 16px;
}
.pharm-contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.pharm-contact-form input[type="text"],
.pharm-contact-form input[type="email"],
.pharm-contact-form input[type="tel"],
.pharm-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--pharm-border);
  border-radius: var(--pharm-radius);
  font-size: 15px;
}
.pharm-contact-form textarea {
  min-height: 140px;
}
.pharm-contact-form .pharm-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
}
.pharm-form-notice {
  padding: 14px 16px;
  border-radius: var(--pharm-radius);
  margin-bottom: 20px;
}
.pharm-form-notice--success {
  background: #e6f6ee;
  color: var(--pharm-primary-dark);
  border: 1px solid var(--pharm-primary);
}
.pharm-form-notice--error {
  background: #fdeceb;
  color: #b3261e;
  border: 1px solid #f5b5b0;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 782px) {
  .pharm-hero__inner {
    grid-template-columns: 1fr;
  }
  .pharm-cta {
    flex-direction: column;
    text-align: center;
  }
}