/*
Theme Name: TheMedic Shop
Theme URI: https://themedic.shop
Author: Custom Build
Description: Fully responsive WooCommerce theme for themedic.shop — red/white color scheme, WhatsApp + Order Now ordering, animated banner, blog support.
Version: 1.0
Requires PHP: 7.4
Text Domain: themedic-shop
*/

:root{
  --brand-red:#c0392b;
  --brand-maroon:#7a1f2b;
  --navy:#111c34;
  --dark-green:#1e3a2f;
  --whatsapp:#25d366;
  --yellow:#f2b807;
  --text-dark:#111111;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Poppins',sans-serif;color:var(--text-dark);background:#fafafa;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.container{max-width:1320px;margin:0 auto;padding:0 12px;}

/* ===== Announcement bar ===== */
.ann-bar{background:#111;color:#fff;text-align:center;font-size:13px;font-weight:500;position:relative;padding:12px 10px;min-height:16px;overflow:hidden;}
.ann-inner{position:relative;min-height:16px;}
.ann-line{position:absolute;left:0;right:0;top:0;animation:annFade 6s infinite;}
.ann-line:nth-child(2){animation-delay:3s;}
@keyframes annFade{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}

/* ===== Header ===== */
.site-header{background:#fff;border:2px solid var(--brand-maroon);border-top:none;border-bottom:none;padding:16px 30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.site-logo{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;}
.site-logo img{max-height:40px;width:auto;}
.site-logo .dot{width:26px;height:26px;border-radius:50%;background:var(--yellow);}
.site-logo span{font-weight:600;font-size:20px;}
.header-search{flex:2;max-width:560px;display:flex;height:40px;border:1px solid #d8d8d8;border-radius:6px;overflow:hidden;min-width:200px;position:relative;}
.header-search select{border:none;background:#f7f7f7;padding:0 12px;font-size:13px;border-right:1px solid #d8d8d8;}
.header-search input{flex:1;border:none;padding:0 12px;font-size:13px;outline:none;}
.header-search button{background:var(--navy);color:#fff;border:none;padding:0 22px;font-size:13px;font-weight:500;cursor:pointer;}
.search-suggestions{position:absolute;top:44px;left:0;right:0;background:#fff;border:1px solid #e5e5e5;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.1);z-index:50;display:none;}
.search-suggestions.active{display:block;}
.search-suggestions .sugg-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid #f0f0f0;}
.search-suggestions .sugg-item img{width:36px;height:36px;object-fit:cover;border-radius:4px;}
.header-icons{flex:1;display:flex;justify-content:flex-end;gap:24px;align-items:center;min-width:150px;}
.header-icons .icon-wrap{position:relative;text-align:center;font-size:11px;color:#333;}
.header-icons i{font-size:20px;display:block;}
.cart-total-wrap{display:flex !important;flex-direction:row !important;align-items:center;gap:10px;text-align:left !important;}
.cart-total-wrap i{font-size:22px;}
.cart-total-text{font-size:13px;font-weight:500;color:#333;white-space:nowrap;}
.badge{position:absolute;top:-6px;right:-8px;background:var(--brand-red);color:#fff;border-radius:50%;font-size:10px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}

/* ===== Nav row ===== */
.nav-row{background:#fff;padding:12px 30px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.nav-row.home-nav{border-bottom:1px solid #e5e5e5;}
.nav-row .spacer{flex:1;}
.nav-menu{display:flex;gap:32px;flex-wrap:wrap;}
.nav-menu a{font-size:14px;font-weight:600;color:#333;display:flex;align-items:center;gap:5px;padding-bottom:5px;border-bottom:2px solid transparent;transition:.15s;}
.nav-menu a:hover,.nav-menu a.current{color:var(--brand-red);border-bottom-color:var(--brand-red);}
.discount-menu{flex:1;display:flex;justify-content:flex-end;position:relative;}
.discount-menu > a{font-size:13px;color:var(--brand-red);font-weight:500;display:flex;align-items:center;gap:5px;}
.discount-dropdown{display:none;position:absolute;top:100%;right:0;background:#fff;border:1px solid #eee;border-radius:6px;box-shadow:0 6px 16px rgba(0,0,0,.1);min-width:180px;z-index:50;}
.discount-menu:hover .discount-dropdown{display:block;}
.discount-dropdown a{display:block;padding:10px 16px;font-size:13px;color:#333;}
.discount-dropdown a:hover{background:#faf5f5;color:var(--brand-red);}

/* Mobile nav toggle */
.mobile-nav-toggle{display:none;background:none;border:none;font-size:24px;cursor:pointer;}

/* ===== Breadcrumb ===== */
.breadcrumb{background:#e9e9e9;padding:14px;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;color:#666;margin-top:10px;flex-wrap:wrap;}
.breadcrumb a{color:#666;border-bottom:1px solid transparent;transition:.15s;}
.breadcrumb a:hover{color:var(--brand-red);border-bottom-color:var(--brand-red);}
.breadcrumb .current{color:var(--text-dark);}

/* ===== Ticker ===== */
.ticker-wrap{padding:12px 12px 16px;}
.ticker{background:#f7f7f7;border-radius:16px;overflow:hidden;white-space:nowrap;padding:12px 0;max-width:1320px;margin:0 auto;}
.ticker-track{display:inline-flex;gap:44px;animation:scrollTicker 18s linear infinite;}
.ticker-track span{font-size:13px;display:inline-flex;align-items:center;gap:6px;}
@keyframes scrollTicker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ===== Hero Banner ===== */
.banner-wrap{padding:20px 12px 0;}
.carousel{position:relative;background:#f0f0f0;height:460px;max-width:1320px;margin:0 auto;border-radius:24px;overflow:hidden;}
.slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .6s;padding:20px;text-align:center;}
.slide.active{opacity:1;}
.slide .eyebrow{font-size:12px;font-weight:500;padding:5px 14px;border-radius:999px;display:inline-block;margin-bottom:12px;}
.slide h2{font-size:32px;font-weight:600;margin:0 0 6px;}
.slide p{font-size:14px;color:#666;margin:0 0 16px;}
.slide .cta{display:inline-block;background:var(--navy);color:#fff;padding:12px 26px;border-radius:8px;font-size:14px;font-weight:500;}
.dots{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:8px;}
.dots .dot{width:8px;height:8px;border-radius:50%;background:#ccc;transition:.3s;cursor:pointer;}
.dots .dot.active{width:24px;border-radius:4px;background:var(--brand-red);}

/* ===== Shop by Category ===== */
.section-heading-script{font-family:'Alex Brush',cursive;font-size:44px;color:var(--brand-red);text-align:center;letter-spacing:-1px;padding-top:30px;}
.cat-tabs{display:flex;justify-content:center;gap:32px;margin:20px 0 30px;flex-wrap:wrap;}
.cat-tabs span{font-size:14px;color:#666;padding-bottom:5px;border-bottom:2px solid transparent;cursor:pointer;transition:.15s;}
.cat-tabs span.active,.cat-tabs span:hover{color:var(--brand-red);font-weight:500;border-bottom-color:var(--brand-red);}

.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:0 40px 40px;max-width:1320px;margin:0 auto;}
.cat-panel{display:none;}
.cat-panel.active{display:grid;}
.p-card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.06);position:relative;transition:transform .15s ease, box-shadow .15s ease;cursor:pointer;}
.p-card:hover{transform:translateY(-6px);box-shadow:0 10px 22px rgba(0,0,0,.12);}
.p-card:active{transform:scale(.97);}
.p-card .p-img{aspect-ratio:1/1;background-size:cover;background-position:center;}
.p-card .p-body{padding:14px;}
.p-card .p-name{font-size:13px;font-weight:600;margin-bottom:6px;}
.p-card .p-name a{color:inherit;}
.p-card .p-price{font-size:14px;font-weight:600;margin-bottom:10px;}
.p-card .badge-sale{position:absolute;top:8px;left:8px;background:#639922;color:#fff;font-size:10px;padding:3px 7px;border-radius:4px;z-index:2;}
.btn-row{display:flex;flex-direction:column;gap:6px;}
.btn{border:none;border-radius:6px;font-size:12px;font-weight:500;padding:9px 0;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;color:#fff;width:100%;}
.btn-cart{background:var(--navy);}
.btn-order{background:var(--dark-green);}
.btn-wa{background:var(--whatsapp);}

/* ===== Order Process ===== */
.order-process{max-width:1100px;margin:0 auto;padding:30px 40px 50px;text-align:center;}
.order-process h2{font-size:24px;font-weight:600;margin-bottom:4px;}
.order-process p.sub{font-size:13px;color:#666;margin-bottom:30px;}
.op-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.op-card{border:1px solid #eee;border-bottom:3px solid transparent;border-radius:10px;padding:20px 10px;box-shadow:0 3px 10px rgba(0,0,0,.05);transition:.2s;}
.op-card:hover{box-shadow:0 10px 20px rgba(192,57,43,.18);transform:translateY(-5px);border-bottom-color:var(--brand-red);}
.op-circle{width:46px;height:46px;border-radius:50%;background:var(--brand-red);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-weight:600;}
.op-card .label{font-size:13px;font-weight:500;}

/* ===== Single Product Page ===== */
.product-layout{display:flex;gap:30px;padding:30px 40px;max-width:1200px;margin:0 auto;flex-wrap:wrap;}
.gallery{width:48%;min-width:280px;}
.main-img{position:relative;background:#f5f5f5;border-radius:8px;aspect-ratio:1/1;overflow:hidden;margin-bottom:12px;}
.main-img img{width:100%;height:100%;object-fit:cover;}
.zoom-btn{position:absolute;top:10px;right:10px;width:32px;height:32px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;}
.thumbs img{width:70px;height:70px;object-fit:cover;border:1px solid #e5e5e5;border-radius:6px;cursor:pointer;}
.thumbs img.active{border-color:#111;}

.details{flex:1;min-width:280px;}
.details h1{font-size:26px;font-weight:700;margin:0 0 12px;color:#111;}
.pill{display:inline-flex;align-items:center;gap:5px;background:#eaf3de;color:#3b6d11;font-size:12px;font-weight:500;padding:5px 13px;border-radius:999px;margin-bottom:6px;}
.pill-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:14px;}
.price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:20px;}
.price-row .now{font-size:26px;font-weight:600;color:var(--brand-red);}
.price-row .old{font-size:16px;color:#999;text-decoration:line-through;}

.buy-box{border:1px solid #eee;border-radius:10px;padding:18px;margin-bottom:16px;}
.buy-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.qty-box{display:flex;align-items:center;border:1px solid #ddd;border-radius:6px;overflow:hidden;flex-shrink:0;}
.qty-box button{width:32px;height:40px;border:none;background:none;font-size:15px;cursor:pointer;}
.qty-box input{width:40px;height:40px;border:none;border-left:1px solid #ddd;border-right:1px solid #ddd;text-align:center;font-size:14px;}
.buy-row .btn{flex:1;height:40px;font-size:12px;min-width:100px;}
.delivery-row{border-top:1px solid #f0f0f0;padding-top:12px;font-size:12px;color:#333;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

.description-box{padding-top:12px;border-top:1px solid #f0f0f0;}
.description-box h4{font-size:13px;font-weight:600;margin:0 0 6px;}
.description-box p{font-size:12px;color:#666;line-height:1.6;margin:0;}

.tabs-wrap{max-width:1200px;margin:0 auto;padding:20px 40px;}
.tabs-wrap hr{border:none;border-top:1px solid #eee;margin-bottom:20px;}
.tab-row{display:flex;gap:30px;margin-bottom:16px;}
.tab-row span{font-size:15px;padding-bottom:8px;border-bottom:2px solid transparent;color:#999;cursor:pointer;}
.tab-row span.active{color:var(--text-dark);font-weight:500;border-bottom-color:var(--brand-red);}
.tab-panel{display:none;font-size:13px;color:#666;line-height:1.8;}
.tab-panel.active{display:block;}

.related-wrap{max-width:1200px;margin:0 auto;padding:10px 40px 40px;overflow:hidden;}
.related-track{display:inline-flex;gap:22px;animation:relScroll 16s linear infinite;}
@keyframes relScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.rel-card{width:170px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.08);cursor:pointer;transition:.15s;flex-shrink:0;}
.rel-card:active{transform:scale(.95);}
.rel-card .rel-img{aspect-ratio:1/1;background-size:cover;background-position:center;}
.rel-card .rel-body{padding:8px;}
.rel-card .rel-name{font-size:11px;}
.rel-card .rel-price{font-size:11px;font-weight:600;color:var(--brand-red);}

/* ===== Category / Shop archive extras ===== */
.archive-title{text-align:center;font-size:22px;margin:24px 0 4px;}
.result-count{text-align:center;font-size:13px;color:#999;margin-bottom:24px;}
.pagination-wrap{display:flex;justify-content:center;gap:8px;padding:20px 0 30px;}
.pagination-wrap a,.pagination-wrap span{width:34px;height:34px;border:1px solid #ddd;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#333;}
.pagination-wrap .current{background:var(--brand-red);color:#fff;border-color:var(--brand-red);}
.category-description{max-width:1000px;margin:0 auto;padding:0 40px 30px;}
.category-description hr{border:none;border-top:1px solid #eee;margin-bottom:16px;}
.category-description h4{font-size:15px;}
.category-description p{font-size:13px;color:#555;line-height:1.7;}

/* ===== Blog ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1200px;margin:0 auto;padding:30px 40px;}
.blog-card{background:#fff;border:1px solid #eee;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.06);}
.blog-card .blog-img{aspect-ratio:4/3;background-size:cover;background-position:center;}
.blog-card .blog-body{padding:14px;}
.blog-card h3{font-size:15px;margin:0 0 8px;}
.blog-card p{font-size:12px;color:#777;line-height:1.5;margin:0 0 10px;}
.blog-card a.read-more{color:var(--brand-red);font-size:12px;font-weight:500;}

.single-post-wrap{max-width:900px;margin:0 auto;padding:24px 40px;}
.single-post-wrap h1{font-size:26px;font-weight:600;margin:0 0 16px;}
.single-post-images{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;}
.single-post-images > *{flex:1;min-width:150px;aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:8px;}
.single-post-content{font-size:14px;color:#555;line-height:1.8;}
.related-posts-single{max-width:900px;margin:0 auto;padding:0 40px 30px;}

.copyright-bar{background:#111;border-top:3px solid var(--brand-red);border-bottom:3px solid var(--brand-red);padding:16px;text-align:center;font-size:13px;color:#ccc;}

/* ===== WooCommerce default pages (Cart, Checkout, My Account) — re-skinned ===== */
.woocommerce table.shop_table{border-radius:10px;overflow:hidden;border:1px solid #eee;}
.woocommerce table.shop_table th{background:#f7f7f7;}
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce-page a.button {
  background:var(--brand-red) !important;
  color:#fff !important;
  border-radius:6px !important;
  border:none !important;
  font-weight:500;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover {
  background:var(--brand-maroon) !important;
}
.woocommerce ul.products li.product .price{color:var(--brand-red);font-weight:600;}
.woocommerce-checkout #payment{border-radius:10px;}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select{
  border-radius:6px;border:1px solid #ddd;
}

/* ===== Responsive ===== */
@media (max-width:900px){
  .op-grid{grid-template-columns:repeat(2,1fr);}
  .product-layout{flex-direction:column;}
  .gallery{width:100%;}
  .blog-grid{grid-template-columns:1fr;}
  .single-post-images > *{min-width:100px;}
}

@media (max-width:768px){
  .site-header{padding:12px 16px;flex-wrap:wrap;}
  .site-logo{order:1;flex:1 1 auto;}
  .header-icons{order:2;flex:0 0 auto;justify-content:flex-end;}
  .header-search{order:3;flex-basis:100%;max-width:none;margin-top:10px;}
  .nav-menu{gap:16px;flex-wrap:wrap;}
  .discount-menu{flex-basis:100%;justify-content:center;margin-top:8px;}
  .nav-row{flex-wrap:wrap;justify-content:center;}
  .nav-row .spacer{display:none;}
  .cart-total-text{font-size:11px;}
}

@media (max-width:600px){
  /* Homepage: 2 products per row on mobile, as requested */
  .product-grid,.cat-panel{grid-template-columns:repeat(2,1fr) !important;gap:10px;padding:0 16px 30px;}
  .banner-wrap{padding:14px 8px 0;}
  .carousel{height:280px;border-radius:16px;}
  .slide h2{font-size:20px;}
  .slide p{font-size:12px;}
  .op-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .nav-menu{gap:10px;font-size:12px;}
  .discount-menu > a{font-size:11px;}
}