/* ==========================================================================
   THEME V2 — Modern Premium Fashion Storefront
   Loaded AFTER bootstrap5 + main.css/responsive.css so it can safely override
   old Bootstrap 3 template styles without editing/breaking legacy CSS files.
   ========================================================================== */

:root{
  --color-primary:   #b1173f;   /* deep rose - can be swapped per theme_color setting */
  --color-primary-dark: #8c1132;
  --color-ink:       #1c1c1c;
  --color-ink-soft:  #4a4a4a;
  --color-cream:     #faf7f2;
  --color-border:    #e8e2d9;
  --font-display:    'Playfair Display', Georgia, serif;
  --font-body:        'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --shadow-card: 0 2px 18px rgba(0,0,0,.06);
  --shadow-card-hover: 0 10px 30px rgba(0,0,0,.12);
}

body{
  font-family: var(--font-body);
  color: var(--color-ink);
  background:#fff;
}

h1,h2,h3,.section-title,.brand-logo-text{
  font-family: var(--font-display);
}

a{ transition: color .2s ease, background-color .2s ease, transform .2s ease; }

/* ---------- Top utility bar ---------- */
.tv2-topbar{
  background: var(--color-ink);
  color:#e8e2d9;
  font-size:.8rem;
  padding:6px 0;
}
.tv2-topbar a{ color:#e8e2d9; }
.tv2-topbar a:hover{ color:#fff; }
.tv2-topbar .divider{ opacity:.35; margin:0 .5rem; }

/* ---------- Main header ---------- */
.tv2-header{
  background:#fff;
  border-bottom:1px solid var(--color-border);
  position: sticky;
  top:0;
  z-index: 1030;
}
.tv2-header .navbar-brand img{ max-height:52px; width:auto; }
.tv2-header .brand-logo-text{
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:.03em;
  color: var(--color-ink);
}

.tv2-icon-link{
  color: var(--color-ink);
  position:relative;
  font-size:1.15rem;
  padding:.4rem .55rem;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}
.tv2-icon-link:hover{ color: var(--color-primary); }
.tv2-badge{
  position:absolute;
  top:-2px; right:-6px;
  background: var(--color-primary);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  line-height:1;
  padding:3px 5px;
  border-radius:50px;
  min-width:16px;
  text-align:center;
}

/* ---------- Nav / mega menu ---------- */
.tv2-nav{
  background: var(--color-cream);
  border-bottom:1px solid var(--color-border);
}
.tv2-nav .nav-link{
  color: var(--color-ink);
  font-weight:600;
  font-size:.88rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:.85rem 1rem;
}
.tv2-nav .nav-link:hover,
.tv2-nav .nav-item:hover > .nav-link{
  color: var(--color-primary);
}
.tv2-nav .dropdown-menu{
  border:none;
  box-shadow: var(--shadow-card-hover);
  border-radius: var(--radius-md);
  padding:.75rem 0;
}
.tv2-nav .dropdown-item{
  padding:.4rem 1.2rem;
  font-size:.9rem;
}
.tv2-nav .dropdown-item:hover{
  background: var(--color-cream);
  color: var(--color-primary);
}

/* ---------- Buttons ---------- */
.btn-tv2-primary{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  border-radius: var(--radius-sm);
  padding:.6rem 1.4rem;
}
.btn-tv2-primary:hover{
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color:#fff;
}
.btn-tv2-outline{
  border:1.5px solid var(--color-ink);
  color: var(--color-ink);
  font-weight:600;
  border-radius: var(--radius-sm);
  background:transparent;
}
.btn-tv2-outline:hover{
  background: var(--color-ink);
  color:#fff;
}

/* ---------- Product cards ---------- */
.tv2-product-card{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
  height:100%;
}
.tv2-product-card:hover{
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.tv2-product-card .tv2-img-wrap{
  position:relative;
  aspect-ratio: 3/4;
  overflow:hidden;
  background: var(--color-cream);
}
.tv2-product-card .tv2-img-wrap img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .45s ease;
}
.tv2-product-card:hover .tv2-img-wrap img{ transform: scale(1.06); }
.tv2-label{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase;
  padding:4px 9px;
  border-radius:50px;
  color:#fff;
}
.tv2-label.bestseller{ background:#c98a1f; }
.tv2-label.new{ background:#1f7a4c; }
.tv2-label.sale{ background: var(--color-primary); }

.tv2-product-card .tv2-label{
  top:10px; left:10px;
}
.tv2-product-card .tv2-body{ padding:1rem 1rem 1.1rem; }
.tv2-product-card .tv2-name{
  font-size:.95rem; font-weight:600; color:var(--color-ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tv2-price-old{ color:#9a9a9a; text-decoration:line-through; font-size:.85rem; margin-right:.4rem; }
.tv2-price-current{ color: var(--color-primary); font-weight:700; }

/* ---------- Section headers ---------- */
.tv2-section-head{ text-align:center; margin-bottom:2.2rem; }
.tv2-section-head .eyebrow{
  text-transform:uppercase; letter-spacing:.15em; font-size:.75rem;
  color: var(--color-primary); font-weight:700;
}
.tv2-section-head h2{ font-size:2rem; margin:.35rem 0 .5rem; }
.tv2-section-head p{ color: var(--color-ink-soft); max-width:560px; margin:0 auto; }

/* ---------- Footer ---------- */
.tv2-footer{ background: var(--color-ink); color:#cfcfcf; padding:3.5rem 0 0; }
.tv2-footer h3{ color:#fff; font-size:1.05rem; margin-bottom:1.1rem; }
.tv2-footer a{ color:#cfcfcf; }
.tv2-footer a:hover{ color:#fff; }
.tv2-footer .tv2-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:2.5rem; padding:1.1rem 0; font-size:.85rem; color:#9a9a9a;
}

/* ---------- Newsletter ---------- */
.tv2-newsletter{ background: var(--color-primary); color:#fff; padding:2.4rem 0; }
.tv2-newsletter h2{ font-size:1.4rem; margin-bottom:.9rem; }
.tv2-newsletter .form-control{ border-radius: var(--radius-sm) 0 0 var(--radius-sm); border:none; height:48px; }
.tv2-newsletter .btn{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; height:48px; }

/* ---------- Misc / helpers ---------- */
.tv2-scrollup{
  position:fixed; right:22px; bottom:22px; width:44px; height:44px;
  background: var(--color-ink); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-card-hover); z-index:1040;
}
.tv2-scrollup:hover{ background: var(--color-primary); color:#fff; }

@media (max-width: 991.98px){
  .tv2-header .navbar-brand img{ max-height:42px; }
  .tv2-nav{ display:none; } /* replaced by offcanvas mobile menu */
}

/* ==========================================================================
   Homepage — restyling EXISTING markup only (classes below are required by
   owl.carousel init in custom.js — do not rename .product-carousel/.item,
   only override their appearance here)
   ========================================================================== */

.product .headline{ text-align:center; margin-bottom:2.2rem; }
.product .headline h2{
  font-family: var(--font-display);
  font-size:2rem;
  color: var(--color-ink);
  margin-bottom:.25rem;
}
.product .headline h3{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color: var(--color-primary);
  font-weight:700;
}

.product-carousel .item{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
  margin: 0 8px;
}
.product-carousel .item:hover{
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.product-carousel .thumb{ position:relative; overflow:hidden; }
.product-carousel .thumb .photo{
  padding-top:130%;
  background-size:cover;
  background-position:center;
  transition: transform .45s ease;
}
.product-carousel .item:hover .thumb .photo{ transform: scale(1.06); }
.product-carousel .text{ padding:1rem 1.1rem 1.2rem; text-align:left; }
.product-carousel .text h3{
  font-family: var(--font-body);
  font-size:.95rem;
  font-weight:600;
  margin-bottom:.35rem;
}
.product-carousel .text h3 a{ color: var(--color-ink); }
.product-carousel .text h3 a:hover{ color: var(--color-primary); }
.product-carousel .text h4{
  color: var(--color-primary);
  font-weight:700;
  font-size:1rem;
  margin-bottom:.5rem;
}
.product-carousel .text h4 del{ color:#9a9a9a; font-weight:400; margin-left:.4rem; }
.product-carousel .text p a{
  display:inline-block;
  background: var(--color-ink);
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:.4rem .9rem;
  border-radius: var(--radius-sm);
}
.product-carousel .text p a:hover{ background: var(--color-primary); }
.product-carousel .out-of-stock .inner{
  background: var(--color-ink);
  color:#fff;
  display:inline-block;
  font-size:.78rem;
  padding:.35rem .8rem;
  border-radius: var(--radius-sm);
}

.welcome{
  background-size:cover !important;
  background-position:center !important;
  border-radius: var(--radius-md);
}

.testimonial-v1{
  background-size:cover !important;
  background-position:center !important;
}

/* ==========================================================================
   Shared product-card look — also applies to category/listing grid
   (.item-product-cat), search results, and related-products blocks, since
   they all reuse the same .item > .thumb/.photo + .text markup as the
   homepage carousel. Keeping selectors additive/generic so any current or
   future page using this pattern picks up the same modern look for free.
   ========================================================================== */
.product .item,
.item-product-cat{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
  margin-bottom:1.5rem;
}
.product .item:hover,
.item-product-cat:hover{
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.item-product-cat .inner{ height:100%; }
.product .thumb .photo,
.item-product-cat .thumb .photo{
  padding-top:120%;
  background-size:cover;
  background-position:center;
  transition: transform .45s ease;
}
.product .item:hover .thumb .photo,
.item-product-cat:hover .thumb .photo{ transform: scale(1.06); }
.product .text h3 a,
.item-product-cat .text h3 a{ color: var(--color-ink); font-weight:600; }
.product .text h3 a:hover,
.item-product-cat .text h3 a:hover{ color: var(--color-primary); }
.product .text h4,
.item-product-cat .text h4{ color: var(--color-primary); font-weight:700; }

/* Sidebar filter widget (category page left column) */
.widget{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:1.25rem;
  margin-bottom:1.5rem;
  background:#fff;
}
.widget h4{
  font-family: var(--font-display);
  font-size:1.05rem;
  border-bottom:2px solid var(--color-border);
  padding-bottom:.6rem;
  margin-bottom:1rem;
}

/* Page banner (category/about/blog/contact hero strips) */
.page-banner{
  background-size:cover !important;
  background-position:center !important;
  border-radius:0 0 var(--radius-md) var(--radius-md);
}

/* Pagination */
div.pagination a,
div.pagination span.current{
  border-radius: var(--radius-sm) !important;
  font-weight:600;
}

/* Cart & checkout tables */
.cart table, .checkout table{
  border-radius: var(--radius-md);
  overflow:hidden;
}
.cart table thead th, .checkout table thead th{
  background: var(--color-cream);
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.04em;
}

/* Legacy .tab-pane markup (product.php) doesn't carry BS5's .fade/.show
   classes — this fallback guarantees panes still toggle correctly via
   just the .active class, regardless of Bootstrap version quirks. */
.tab-content > .tab-pane{ display:none; }
.tab-content > .tab-pane.active{ display:block; }

/* Bootstrap 5 renamed .img-responsive to .img-fluid — alias kept here so
   blog.php / blog-single.php / category.php don't lose responsive scaling
   until they're migrated directly in a later installment. */
.img-responsive{ max-width:100%; height:auto; display:block; }

/* ==========================================================================
   Shared inner-page banner — used by about/faq/blog/cart/checkout/login/
   registration/product-category/gallery/contact/search-result etc. (18
   pages). One change here uplifts all of them at once.
   ========================================================================== */
.page-banner{
  background-size:cover !important;
  background-position:center !important;
  position:relative;
  padding:4.5rem 0;
  margin-bottom:2.5rem;
}
.page-banner::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(28,28,28,.45);
}
.page-banner .inner{ position:relative; text-align:center; }
.page-banner .inner h1{
  color:#fff;
  font-family: var(--font-display);
  font-size:2.4rem;
  margin:0;
}

/* ---------- Product listing (product-category.php) ---------- */
.product-cat .item .inner{
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s ease, transform .25s ease;
  height:100%;
}
.product-cat .item .inner:hover{
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.product-cat .thumb{ position:relative; overflow:hidden; }
.product-cat .thumb .photo{
  padding-top:130%;
  background-size:cover;
  background-position:center;
  transition: transform .45s ease;
}
.product-cat .item:hover .thumb .photo{ transform: scale(1.06); }
.product-cat .text{ padding:1rem 1.1rem 1.2rem; }
.product-cat .text h3{ font-size:.95rem; font-weight:600; margin-bottom:.35rem; }
.product-cat .text h3 a{ color: var(--color-ink); }
.product-cat .text h3 a:hover{ color: var(--color-primary); }
.product-cat .text h4{ color: var(--color-primary); font-weight:700; font-size:1rem; margin-bottom:.5rem; }
.product-cat .text h4 del{ color:#9a9a9a; font-weight:400; margin-left:.4rem; }
.product-cat .text p a{
  display:inline-block;
  background: var(--color-ink);
  color:#fff;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  padding:.4rem .9rem;
  border-radius: var(--radius-sm);
}
.product-cat .text p a:hover{ background: var(--color-primary); }

/* ---------- Category sidebar filter ---------- */
#left.span3{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:1.2rem;
}