/* ========================================
   Obwocha's Pharmacy — Responsive Styles
   Injected after all other styles
   ======================================== */

/* Hide nav close button on desktop — it's only for mobile drawer */
.main-nav .nav-close { display: none; }

/* Remove ugly focus box-shadow/outline on click (keeps keyboard focus via :focus-visible) */
button:focus, a:focus, .btn:focus, input:focus, select:focus, textarea:focus, .page-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}
button:focus-visible, a:focus-visible, .btn:focus-visible, .page-btn:focus-visible {
  outline: none !important;
}

/* Kill mobile tap highlight + :active shadow on all interactive elements */
* {
  -webkit-tap-highlight-color: transparent !important;
}
button:active, a:active, .btn:active, input[type="button"]:active,
input[type="submit"]:active, .page-btn:active, .nav-close:active,
.mobile-menu-toggle:active, .cart-btn:active, .wishlist-btn:active,
.account-btn:active, .whatsapp-float:active, .product-actions .btn:active {
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* --- Universal: Prevent overflow on all breakpoints --- */
body{overflow-x:hidden;max-width:100vw}img{max-width:100%;height:auto}table{overflow-x:auto;display:block;max-width:100%}pre,code{white-space:pre-wrap;word-break:break-word}[style*="max-width:"]{max-width:100%!important}*{word-break:break-word;overflow-wrap:break-word}

@media (max-width: 768px) {
  img { max-width: 100%; height: auto; }
  [style*="display: flex"] { flex-wrap: wrap !important; }
  [style*="display:flex"] { flex-wrap: wrap !important; }
  [style*="width:"] { max-width: 100% !important; }
  iframe,embed,object{max-width:100%!important}
  .container{width:100%!important;padding:0 12px!important}
}

/* ========================================
   CART PAGE
   ======================================== */
@media (max-width: 768px) {
  .cart-page .cart-table,
  .cart-page .cart-table thead,
  .cart-page .cart-table tbody,
  .cart-page .cart-table tr,
  .cart-page .cart-table th,
  .cart-page .cart-table td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .cart-page .cart-table thead { display: none !important; }
  .cart-page .cart-table tr {
    position: relative;
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
  }
  .cart-page .cart-table td {
    padding: 6px 0 !important;
    border: none !important;
    text-align: left !important;
  }
  .cart-page .cart-table td:before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: #666;
    display: block;
    margin-bottom: 2px;
  }
  /* Product column: image + name side by side row */
  /* Product column: image, name, and remove button side by side */
  .cart-page .cart-table td:first-child {
    display: flex !important;
    gap: 12px;
    align-items: center;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    margin-bottom: 8px;
  }
  .cart-page .cart-table td:first-child > div {
    flex: 1;
    min-width: 0;
  }
  .cart-page .cart-product-img img {
    width: 60px !important;
    height: 60px !important;
  }
  /* Quantity controls row */
  .cart-page .cart-table td:nth-child(3) {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }
  .cart-page .cart-table td:nth-child(3):before {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 6px;
  }
  /* Price rows */
  .cart-page .cart-table td:nth-child(2),
  .cart-page .cart-table td:nth-child(4) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }
  .cart-page .cart-table td:nth-child(2) span,
  .cart-page .cart-table td:nth-child(4) strong {
    font-size: 15px;
  }
  /* Remove button inline in product row */
  .cart-page .cart-table td:first-child .remove-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
    border-radius: 50%;
    background: #fee2e2;
    color: #dc2626;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* Cart summary on mobile */
  .cart-page .cart-summary {
    margin-top: 20px;
  }
  .cart-page .cart-summary h3 { font-size: 18px; }
  .cart-sr-links {
    flex-direction: column;
    gap: 10px;
  }
  .cart-sr-links a {
    text-align: center;
    width: 100%;
  }
}

/* ========================================
   CHECKOUT PAGE
   ======================================== */
@media (max-width: 768px) {
  .checkout-layout {
    flex-direction: column !important;
  }
  .checkout-layout > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  .checkout-form-section {
    padding: 16px !important;
  }
  .checkout-form-section .form-group {
    flex-direction: column !important;
  }
  .checkout-form-section .form-group > * {
    width: 100% !important;
    min-width: 100% !important;
  }
  .checkout-form-section input,
  .checkout-form-section select,
  .checkout-form-section textarea {
    font-size: 16px !important;  /* prevent iOS zoom */
    width: 100% !important;
    box-sizing: border-box;
  }
  .payment-options {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .payment-option {
    width: 100% !important;
    padding: 12px !important;
  }
  [class*="stk-push-modal"] {
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto;
  }
}

/* ========================================
   HOMEPAGE (index)
   ======================================== */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column !important;
    padding: 20px 16px !important;
    text-align: center;
  }
  .hero-section .hero-text {
    padding-right: 0 !important;
    margin-bottom: 20px;
  }
  .hero-section .hero-text h1 {
    font-size: 26px !important;
    line-height: 1.3;
  }
  .hero-section .hero-text p {
    font-size: 14px !important;
  }
  .hero-section .hero-image img {
    max-width: 100%;
    height: auto;
  }
  .hero-buttons {
    flex-direction: column;
    gap: 10px;
  }
  .hero-buttons a {
    width: 100%;
    text-align: center;
  }
  .categories-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .category-card {
    padding: 16px !important;
  }
  .category-card .cat-icon { font-size: 28px !important; }
  .category-card h3 { font-size: 14px !important; }
  .features-row {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }
  .feature-item { width: 100% !important; }
  .featured-products-grid,
  .special-offers-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ========================================
   PRODUCT DETAIL PAGE
   ======================================== */
@media (max-width: 768px) {
  .product-detail {
    flex-direction: column !important;
    padding: 16px !important;
  }
  .product-detail .product-image {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px;
  }
  .product-detail .product-info {
    width: 100% !important;
    padding-left: 0 !important;
  }
  .product-detail .product-info h1 {
    font-size: 22px !important;
  }
  .product-detail .product-actions {
    flex-direction: column;
    gap: 10px;
  }
  .product-detail .product-actions button,
  .product-detail .product-actions a {
    width: 100%;
    text-align: center;
  }
  .product-gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  .product-gallery-thumbs img {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ========================================
   SHOP PAGE (improve existing responsive)
   ======================================== */
@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .product-card { padding: 10px !important; }
  .product-card h3 { font-size: 13px !important; }
  .product-card .price { font-size: 14px !important; }
}

/* ========================================
   GENERAL PAGES (prescription, contact, faq, track-order)
   ======================================== */
@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .page-header { padding: 20px 16px !important; }
  .page-header h2 { font-size: 22px !important; }
  .page-header p { font-size: 14px !important; }
  .content-section { padding: 20px 16px !important; }
  .form-container {
    padding: 16px !important;
    margin: 0 !important;
    border-radius: 8px !important;
  }
  .form-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .form-row > * {
    width: 100% !important;
  }
  input, select, textarea, button {
    font-size: 16px !important;  /* prevent iOS zoom */
  }
  .card-grid {
    grid-template-columns: 1fr !important;
  }
  .two-col {
    flex-direction: column !important;
  }
  .two-col > * {
    width: 100% !important;
  }

  /* Tables on mobile */
  table.responsive,
  table.responsive thead,
  table.responsive tbody,
  table.responsive tr,
  table.responsive th,
  table.responsive td {
    display: block !important;
    width: 100% !important;
  }
  table.responsive thead { display: none !important; }
  table.responsive tr {
    margin-bottom: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
  }
  table.responsive td {
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
  }
  table.responsive td:before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 12px;
    color: #666;
    display: block;
  }
}

/* ========================================
   HEADER / NAV (global)
   ======================================== */
@media (max-width: 768px) {
  .top-bar { display: none !important; }
  
  /* Header: logo row with icons, search below */
  header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px 12px !important;
    position: relative;
    border-bottom: 1px solid #e0e0e0;
  }
  
  /* Hide long tagline on mobile */
  .logo-text small { display: none !important; }
  .logo-text h1 { font-size: 16px !important; margin: 0; }
  .logo-icon { width: 34px !important; height: 34px !important; }
  .logo-icon img { width: 34px !important; height: 34px !important; }
  .logo-icon svg { width: 34px !important; height: 34px !important; }
  
  /* Hamburger menu button — icon only, text hidden */
  .mobile-menu-toggle {
    display: block !important;
    font-size: 0 !important;
    padding: 8px !important;
    order: 0;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    line-height: 1;
    text-align: center;
    overflow: hidden;
  }
  .mobile-menu-toggle::before {
    content: '\2630';
    font-size: 22px;
    line-height: 1;
  }
  
  /* Logo: let it breathe (full remaining space) */
  header > .logo {
    order: 1;
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    gap: 8px;
    overflow: hidden;
  }
  .logo-text h1 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Icons on the right — clean and minimal */
  .header-icons {
    order: 2;
    gap: 12px !important;
  }
  .header-icons a { font-size: 13px !important; }
  
  /* Hide WhatsApp from header on mobile (redundant with FAB) */
  .header-icons .whatsapp-btn { display: none !important; }
  
  /* Hide Account text, show icon only */
  .header-icons .account-link { font-size: 0 !important; }
  .header-icons .account-link i { font-size: 18px !important; }
  .header-icons .account-link:after { font-size: 0 !important; }
  
  .header-icons .cart-icon { font-size: 18px !important; }
  
  
  /* Navigation: slide-in drawer from the left */
  nav.main-nav {
    display: block;
    position: fixed;
    top: 0;
    left: -300px;
    width: 290px;
    height: 100vh;
    z-index: 9999;
    background: #fff;
    padding: 0;
    box-shadow: 0 0 30px rgba(0,0,0,0.25);
    border-radius: 0 16px 16px 0;
    overflow-y: auto;
    transition: left 0.3s cubic-bezier(0.4,0,0.2,1);
    border-bottom: none;
  }
  nav.main-nav.open { left: 0 !important; }
  nav.main-nav .nav-close {
    display: flex;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #555;
    transition: all 0.2s;
    line-height: 1;
  }
  nav.main-nav .nav-close:hover { background: #e0e0e0; color: #000; transform: rotate(90deg); }
  nav.main-nav ul { padding-top: 50px; }
  .nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .nav-overlay.show { display: block; opacity: 1; }

  /* Search bar: own row below logo + icons */
  .search-bar {
    order: 3;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 4px 0 0 !important;
  }
  .search-bar input {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 14px !important;
    padding: 8px 12px !important;
  }
  .search-bar button {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
  
  nav.main-nav ul li a { display: block; padding: 14px 16px; font-size: 15px; font-weight: 600; color: #333; text-decoration: none; }
  nav.main-nav ul li a:hover { background: #1a5c2e; color: #fff; }

@media (max-width: 400px) {
  header { padding: 6px 10px !important; }
  .logo-text h1 { font-size: 15px !important; }
  .logo-icon { width: 28px !important; height: 28px !important; }
  .logo-icon svg { width: 28px !important; height: 28px !important; }
  .logo-icon img { width: 28px !important; height: 28px !important; }
  header > .logo { gap: 6px; }
  .header-icons { gap: 8px !important; }
  .header-icons a i,
  .header-icons a svg { font-size: 18px !important; }
  .mobile-menu-toggle { font-size: 0 !important; padding: 6px !important; width: 36px !important; min-width: 36px !important; height: 36px !important; }
  .mobile-menu-toggle::before { font-size: 20px; }
}

/* ========================================
   FOOTER (global)
   ======================================== */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    text-align: left;
  }
  .contact-info { grid-column: 1 / -1 !important; }
  .newsletter { padding: 24px 16px !important; }
  .newsletter h3 { font-size: 18px !important; }
}

/* ========================================
   VERY SMALL SCREENS (under 400px)
   ======================================== */
@media (max-width: 400px) {
  .featured-products-grid,
  .special-offers-grid,
  .products-grid,
  .categories-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .footer-grid { grid-template-columns: 1fr !important; }
  [style*="padding"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ========================================
   MID-RANGE PHONES (401px-480px)
   iPhone 14/15, Galaxy S23, Pixel 7
   ======================================== */
@media (min-width: 401px) and (max-width: 480px) {
  .hero-section .hero-text h1 { font-size: 22px !important; }
  .hero-section .hero-text p { font-size: 13px !important; }
  .categories-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .featured-products-grid,
  .special-offers-grid,
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .product-card h3 { font-size: 13px !important; }
  .product-card .price { font-size: 14px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .page-header { padding: 24px 16px !important; }
  .page-header h2 { font-size: 20px !important; }
  .logo-text h1 { font-size: 15px !important; }
  .logo-text small { display: none !important; }
  .logo-icon { width: 36px !important; height: 36px !important; }
  .logo-icon img, .logo-icon svg { width: 36px !important; height: 36px !important; }
  .btn { min-height: 44px !important; }
  .product-actions .btn { font-size: 12px !important; padding: 8px 12px !important; }
}

/* ========================================
   LARGE DESKTOP (1200px+) — constrain content width
   ======================================== */
@media (min-width: 1200px) {
  .container,
  .about-content,
  .shop-layout,
  .checkout-layout,
  .cart-page {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .hero-section { max-width: 1200px; margin: 0 auto; }
  footer .footer-grid { max-width: 1200px; margin: 0 auto; }
  header { max-width: 1200px; margin: 0 auto; }
}

/* ========================================
   BUTTON RESPONSIVENESS (modern pill-shaped)
   ======================================== */
@media (max-width: 768px) {
  /* Product card buttons in 2-col grid: compact but tappable */
  .product-actions .btn {
    font-size: 11px !important;
    padding: 8px 10px !important;
  }
  .product-actions {
    gap: 6px !important;
  }

  /* Newsletter: stack input + button on small screens */
  .newsletter-form {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .newsletter-form input {
    width: 100% !important;
    text-align: center;
  }
  .newsletter-form button {
    width: 100% !important;
  }

  /* Hero buttons full-width */
  .hero-buttons .btn {
    width: 100% !important;
    text-align: center;
    padding: 14px 20px !important;
  }

  /* Search bar: make search button pill-shaped with sufficient padding */
  .search-bar button {
    border-radius: 50px !important;
  }
}

@media (max-width: 400px) {
  /* Product card buttons ultra-compact on tiny screens */
  .product-actions .btn {
    font-size: 10px !important;
    padding: 7px 8px !important;
  }

  /* Shop Now / Submit Prescription in hero — comfy tap targets */
  .btn {
    padding: 12px 24px !important;
  }
}

/* Built: 2026-07-09 08:28:48 UTC */
/* Shop / Products page overflow fix */@media(max-width:768px){.shop-layout{width:100%!important;overflow:hidden!important}.shop-layout>*{max-width:100%!important;overflow:hidden!important}.product-grid{width:100%!important;padding-left:0!important;padding-right:0!important}.product-grid>*{max-width:100%!important}.shop-controls{width:100%!important}}