/*
  D9C Storefront Theme (CS-Cart-like)
  ---------------------------------
  This is an original theme inspired by CS-Cart storefront layout patterns.
  It does NOT use CS-Cart proprietary code/assets.
*/

:root{
  --cs-primary: #1b79d0;
  --cs-primary-dark: #1563ad;
  --cs-bg: #ffffff;
  --cs-text: #111827;
  --cs-muted: #6b7280;
  --cs-border: rgba(0,0,0,.10);
  --cs-soft: #f6f8fb;
}

body{
  /* Light neutral background to create CS-Cart-like "page edge" effect */
  background: var(--cs-soft);
  color: var(--cs-text);
}

a{ text-decoration: none; }
.cs-muted{ color: var(--cs-muted) !important; }

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */

.cs-topbar{
  background: #f7f8fb;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: .875rem;
}

.cs-topbar-link{
  color: #4b5563;
}
.cs-topbar-link:hover{
  color: #111827;
  text-decoration: underline;
}

.cs-mainbar{
  background: #fff;
}

.cs-brand{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--cs-text);
}
.cs-brand__logo{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(27,121,208,.25);
}
.cs-brand__name{
  font-weight: 800;
  font-size: 1.25rem;
}

.cs-search{
  min-width: 280px;
  max-width: 560px;
  flex: 1 1 380px;
}
.cs-search .form-control{
  border: 1px solid rgba(0,0,0,.14);
  border-right: 0;
}
.cs-search .btn{
  border: 1px solid rgba(0,0,0,.14);
}

.cs-phone{
  align-items: center;
  gap: .65rem;
}
.cs-phone__icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cs-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cs-primary);
}
.cs-phone__number{
  font-weight: 800;
  line-height: 1.1;
}
.cs-phone__link{
  font-size: .9rem;
  color: var(--cs-primary);
}
.cs-phone__link:hover{ text-decoration: underline; }

.cs-cart{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: var(--cs-text);
}
.cs-cart:hover{
  border-color: rgba(0,0,0,.16);
}
.cs-cart__icon{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cs-cart__title{ font-weight: 800; }
.cs-cart__sub{ font-size: .88rem; color: var(--cs-muted); }

/* Navigation bar (blue) */
.cs-nav{
  background: var(--cs-primary);
}
.cs-nav__inner{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 0;
}
.cs-nav__catbtn{
  color: #fff;
  font-weight: 800;
  padding: .45rem .7rem;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  white-space: nowrap;
}
.cs-nav__catbtn:hover{ background: rgba(255,255,255,.20); color:#fff; }

.cs-nav__links{
  display: flex;
  gap: .25rem;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.cs-nav__links::-webkit-scrollbar{ height: 6px; }
.cs-nav__links::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.28); border-radius: 20px; }

.cs-nav__link{
  color: rgba(255,255,255,.95);
  font-weight: 600;
  padding: .45rem .65rem;
  border-radius: 10px;
}
.cs-nav__link:hover{
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* Page heading (used by several storefront pages) */
.cs-page-heading{
  margin: .25rem 0 1rem;
  padding: 1rem 1rem;
  border: 1px solid rgba(0,0,0,.10);
  background: #ffffff;
  border-radius: 14px;
}
.cs-page-heading__title{
  font-weight: 900;
  font-size: 1.1rem;
}
.cs-page-heading__subtitle{
  color: var(--cs-muted);
  font-size: .92rem;
  margin-top: .15rem;
}

/* Content cards (storefront)
   Used by account/profile pages and several storefront blocks.
*/
.content-card{
  border: 0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
  padding: 1.5rem;
}

@media (max-width: 576px){
  .content-card{ padding: 1.1rem; }
}

/* ─────────────────────────────────────────────────────────────
   Homepage blocks
   ───────────────────────────────────────────────────────────── */

.cs-hero{
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
}
.cs-hero img{
  width: 100%;
  height: 420px;
  object-fit: cover;
  opacity: .94;
}
@media (max-width: 768px){
  .cs-hero img{ height: 240px; }
}

.cs-hero .carousel-caption{
  text-align: left;
  bottom: 2rem;
}
.cs-hero .carousel-caption h3{
  font-weight: 900;
  font-size: 2.2rem;
}
.cs-hero .carousel-caption p{
  font-size: 1.05rem;
}

.cs-section-title{
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin: 1.25rem 0 .75rem;
}
.cs-section-title h2{
  font-size: 1.25rem;
  font-weight: 900;
  margin: 0;
}
.cs-section-title .small{ color: var(--cs-muted); }

.cs-category-tile{
  display:block;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 14px;
  padding: 16px;
  height:100%;
  transition: box-shadow .15s ease, transform .15s ease;
}
.cs-category-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(0,0,0,.10);
}
.cs-category-tile .name{ font-weight: 800; color: var(--cs-text); }

/* Product cards (CS-Cart-like) */
.cs-product-card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cs-product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.12);
}
.cs-product-card .img{
  height: 190px;
  background: var(--cs-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cs-product-card .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-product-card .body{ padding: 14px; }
.cs-product-card .title{ font-weight: 700; line-height: 1.2; min-height: 2.4em; }
.cs-product-card .title a{ color: var(--cs-text); }
.cs-product-card .meta{ color: var(--cs-muted); font-size: .9rem; }

.cs-rating{
  display: flex;
  gap: .25rem;
  align-items: center;
  font-size: .9rem;
  margin-top: .35rem;
}
.cs-rating .stars{ color: #f59e0b; }
.cs-rating .reviews{ color: var(--cs-muted); font-size: .86rem; }

.cs-price{ font-weight: 900; font-size: 1.05rem; }

.cs-product-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .6rem;
}

.cs-icon-btn{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cs-text);
}
.cs-icon-btn:hover{ border-color: rgba(0,0,0,.18); }

.cs-add-btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 0;
  background: var(--cs-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 22px rgba(27,121,208,.25);
}
.cs-add-btn:hover{ background: var(--cs-primary-dark); }

/* Footer */
.cs-footer{
  background:#111827;
  color: rgba(226,232,240,.95);
}
.cs-footer .cs-muted{ color: rgba(226,232,240,.78) !important; }


/* ─────────────────────────────────────────────────────────────
   Topbar currency + account dropdown (CS‑Cart-like)
   ───────────────────────────────────────────────────────────── */

.cs-currency__item{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  color:#111827;
  font-weight:700;
  font-size:.9rem;
  opacity:.9;
}
.cs-currency__item:hover{
  opacity:1;
  text-decoration: underline;
}

.cs-account-dropdown .cs-account-toggle{
  border:0;
  background:transparent;
  padding:0;
  font: inherit;
  color: #4b5563;
}
.cs-account-dropdown .cs-account-toggle:hover{
  color:#111827;
  text-decoration: underline;
}
.cs-account-menu{
  width: 320px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 24px 44px rgba(0,0,0,.12);
}
.cs-account-menu .dropdown-item{
  padding: .55rem .85rem;
}

/* ─────────────────────────────────────────────────────────────
   Newsletter bar + social buttons
   ───────────────────────────────────────────────────────────── */

.cs-newsletter{
  background: var(--cs-primary);
  color: #fff;
}
.cs-newsletter__icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.18);
  color:#fff;
}
.cs-newsletter__title{
  font-weight: 900;
  font-size: 1.1rem;
  line-height: 1.1;
}
.cs-newsletter__subtitle{
  font-size: .92rem;
  opacity: .92;
}
.cs-newsletter__form .form-control{
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: none;
}
.cs-newsletter__form .btn{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: none;
}

.cs-newsletter__social-label{
  font-weight: 800;
}
.cs-social{
  display:inline-flex;
  gap: .5rem;
}
.cs-social__btn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.18);
  color:#fff;
}
.cs-social__btn:hover{
  background: rgba(255,255,255,.26);
  color:#fff;
}

/* ─────────────────────────────────────────────────────────────
   Auth modal (CS‑Cart-like)
   ───────────────────────────────────────────────────────────── */
.cs-auth-modal{
  border-radius: 14px;
}

/* ─────────────────────────────────────────────────────────────
   Quick Add-to-Cart + Added-to-cart modals (CS‑Cart-like)
   ───────────────────────────────────────────────────────────── */
.cs-quickadd-modal,
.cs-added-modal{
  border-radius: 16px;
}

.cs-qa-title{
  font-weight: 800;
  font-size: 1.35rem;
  margin-bottom: .25rem;
}
.cs-qa-price{
  font-weight: 900;
  font-size: 1.55rem;
}
.cs-qa-img{
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  background: #f8fafc;
  padding: .5rem;
  border: 1px solid rgba(0,0,0,.06);
}

.cs-qa-option{ margin-top: .75rem; }
.cs-qa-values{ display:flex; flex-wrap:wrap; gap:.5rem; }

.cs-qa-values.is-color .cs-qa-swatch{
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 4px;
}
.cs-qa-values.is-color .cs-qa-swatch img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.cs-qa-color-dot{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
}

.cs-qa-values.is-text .cs-qa-size{
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  padding: .35rem .75rem;
  font-weight: 600;
}

.cs-qa-swatch.active,
.cs-qa-size.active{
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 2px rgba(30,106,214,.15);
}

.cs-qa-qty{ max-width: 132px; }

.cs-added-thumb{
  width: 80px;
  height: 80px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  overflow:hidden;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cs-added-thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ─────────────────────────────────────────────────────────────
   Shared CS‑Cart-like page elements (tables, breadcrumbs)
   ───────────────────────────────────────────────────────────── */
.cs-breadcrumb a{
  color: var(--cs-muted);
  text-decoration: none;
}
.cs-breadcrumb a:hover{
  text-decoration: underline;
}

.cs-search-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: #f3f4f6;
  border-radius: 12px;
  padding: .75rem .85rem;
}
.cs-search-bar__title{ font-weight: 700; color:#111827; }

.cs-table thead th{
  background: #f3f4f6;
  border-bottom: 0;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
}
.cs-table tbody td{
  vertical-align: middle;
}

.cs-profile-avatar{
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: #f3f4f6;
  margin: 0 auto;
}

/* Pill buttons (used heavily in CS-Cart UI) */
.btn-pill{
  border-radius: 999px !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  font-weight: 600 !important;
}

/* ─────────────────────────────────────────────────────────────
   Cart page (CS‑Cart-like)
   ───────────────────────────────────────────────────────────── */
.cs-empty-cart{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  min-height: 160px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--cs-muted);
  font-size: 1.05rem;
}

.cs-cart-table thead th{ background: #f3f4f6; }
.cs-cart-table td{ vertical-align: top; }

.cs-cart-product{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.cs-cart-product img{
  width: 72px;
  height: 72px;
  object-fit: contain;
  background:#f8fafc;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
}
.cs-cart-title{ font-weight: 700; }
.cs-cart-remove{
  background: transparent;
  border: 0;
  color: var(--cs-muted);
  font-size: 18px;
  line-height: 1;
}
.cs-cart-remove:hover{ color: #dc2626; }

.cs-qty-group{
  display:flex;
  align-items:center;
  gap: 6px;
}
.cs-qty-group button{
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.cs-qty-group input{
  width: 48px;
  text-align:center;
}

/* ─────────────────────────────────────────────────────────────
   Checkout page (CS‑Cart-like)
   ───────────────────────────────────────────────────────────── */
.cs-checkout-section{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.04);
}

.cs-shipping-box{
  border: 2px solid rgba(30,106,214,.18);
  background: rgba(30,106,214,.05);
  border-radius: 12px;
  padding: 14px;
}

.cs-paymethod-card{
  display:flex;
  gap: .5rem;
  align-items:flex-start;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  background: #fff;
}
.cs-paymethod-card input{ margin-top: .35rem; }
.cs-paymethod-card.is-active{
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px rgba(30,106,214,.10);
}

.cs-order-items{
  border-top: 1px solid rgba(0,0,0,.06);
}
.cs-order-item{
  padding: .65rem 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}