/* ============================================================
   PurpleBean × Zoho Commerce — Custom Theme CSS
   Paste this in: Zoho Commerce → Design → Custom CSS
   ============================================================ */

/* --- Brand tokens ------------------------------------------ */
:root {
  --pb-purple:       #86198f;
  --pb-purple-dark:  #6b0f78;
  --pb-purple-light: #9b1faa;
  --pb-teal:         #14b8a6;
  --pb-teal-light:   #2dd4bf;
  --pb-gray:         #374151;
  --pb-gray-light:   #f9fafb;
  --pb-shadow:       0 4px 16px rgba(134, 25, 143, 0.08);
  --pb-radius:       12px;
}

/* --- Global ----------------------------------------------- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Oxygen, Ubuntu, Cantarell, sans-serif !important;
  background: #ffffff !important;
  color: var(--pb-gray) !important;
}

a {
  color: var(--pb-purple);
}
a:hover {
  color: var(--pb-purple-dark);
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: #1a1a1a;
}

/* --- Buttons (Add to Cart, Buy Now, Checkout) -------------- */
.btn-primary,
.btn-success,
.add-to-cart-btn,
.buy-now-btn,
.checkout-btn,
[class*="addcart"],
[class*="buynow"],
button.primary,
input[type="submit"],
button[type="submit"] {
  background-color: var(--pb-purple) !important;
  border-color:     var(--pb-purple) !important;
  border-radius:    9999px !important;
  font-weight:      600 !important;
  padding:          0.55rem 1.6rem !important;
  color:            #fff !important;
  transition:       background 0.2s, transform 0.15s !important;
  letter-spacing:   0.3px;
}

.btn-primary:hover,
.btn-success:hover,
.add-to-cart-btn:hover,
.buy-now-btn:hover,
button.primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--pb-purple-dark) !important;
  border-color:     var(--pb-purple-dark) !important;
  transform:        translateY(-1px);
}

/* Secondary / outline buttons */
.btn-secondary,
.btn-outline,
button.secondary {
  background:    transparent !important;
  border:        2px solid var(--pb-purple) !important;
  color:         var(--pb-purple) !important;
  border-radius: 9999px !important;
  font-weight:   600 !important;
}
.btn-secondary:hover,
.btn-outline:hover {
  background: var(--pb-purple) !important;
  color: #fff !important;
}

/* --- Product Cards ---------------------------------------- */
.product-card,
.product-item,
.product-tile,
[class*="product-card"],
[class*="product-item"],
[class*="product-tile"] {
  border-radius: var(--pb-radius) !important;
  box-shadow:    var(--pb-shadow) !important;
  border:        1px solid #f0e6f2 !important;
  overflow:      hidden;
  background:    #fff !important;
  transition:    box-shadow 0.2s, transform 0.2s;
}

.product-card:hover,
.product-item:hover,
.product-tile:hover,
[class*="product-card"]:hover {
  box-shadow: 0 8px 28px rgba(134, 25, 143, 0.16) !important;
  transform:  translateY(-3px);
}

/* Product image */
.product-card img,
.product-item img,
[class*="product-card"] img {
  width: 100%;
  object-fit: cover;
}

/* Product name */
.product-name,
.product-title,
[class*="product-name"],
[class*="product-title"] {
  font-weight: 600 !important;
  font-size:   1rem !important;
  color:       #1a1a1a !important;
}

/* Product price */
.product-price,
.price,
[class*="product-price"],
[class*="item-price"] {
  color:       var(--pb-purple) !important;
  font-weight: 700 !important;
  font-size:   1.1rem !important;
}

/* Strike-through original price */
.original-price,
.compare-price,
[class*="original-price"],
del {
  color: #9ca3af !important;
}

/* --- Product Detail Page ---------------------------------- */
.product-detail,
[class*="product-detail"] {
  background: var(--pb-gray-light);
  border-radius: var(--pb-radius);
  padding: 2rem;
}

/* --- Search Input ----------------------------------------- */
input[type="search"],
.search-input,
[class*="search-input"] {
  border-radius: 9999px !important;
  border:        1px solid #e5e7eb !important;
  padding:       0.5rem 1.25rem !important;
  outline:       none;
}
input[type="search"]:focus,
.search-input:focus {
  border-color: var(--pb-purple) !important;
  box-shadow:   0 0 0 3px rgba(134, 25, 143, 0.12) !important;
}

/* --- Category / Tag pills --------------------------------- */
.category-badge,
.tag-badge,
[class*="category-tag"],
[class*="collection-tag"] {
  background:    #f3e8f7 !important;
  color:         var(--pb-purple) !important;
  border-radius: 9999px !important;
  padding:       0.2rem 0.85rem !important;
  font-size:     0.8rem;
  font-weight:   600;
}

/* --- Breadcrumbs ------------------------------------------ */
.breadcrumb-item a,
[class*="breadcrumb"] a {
  color: var(--pb-purple) !important;
}
.breadcrumb-separator {
  color: #9ca3af;
}

/* --- Pagination ------------------------------------------- */
.page-item.active .page-link,
[class*="pagination"] .active a,
[class*="pagination"] .active {
  background:   var(--pb-purple) !important;
  border-color: var(--pb-purple) !important;
  color:        #fff !important;
}
.page-link,
[class*="page-link"] {
  color:         var(--pb-purple) !important;
  border-radius: 6px !important;
}

/* --- Form inputs (checkout, address, etc.) ---------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
  border:        1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding:       0.5rem 0.9rem !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--pb-purple) !important;
  box-shadow:   0 0 0 3px rgba(134, 25, 143, 0.1) !important;
  outline:      none;
}

/* --- Success / error alerts ------------------------------- */
.alert-success,
[class*="alert-success"],
.success-message {
  background:   #f0fdf4 !important;
  border-color: var(--pb-teal) !important;
  color:        #065f46 !important;
  border-radius: var(--pb-radius) !important;
}
.alert-danger,
.alert-error,
[class*="alert-error"],
.error-message {
  background:   #fff1f2 !important;
  border-color: #f05230 !important;
  border-radius: var(--pb-radius) !important;
}

/* --- Footer ----------------------------------------------- */
footer,
.site-footer,
.store-footer,
[class*="site-footer"],
[class*="store-footer"] {
  background: var(--pb-purple) !important;
  color:      #fff !important;
}
footer a,
.site-footer a {
  color: rgba(255, 255, 255, 0.85) !important;
}
footer a:hover,
.site-footer a:hover {
  color: #fff !important;
  text-decoration: underline;
}

/* --- Promo / sale badge ----------------------------------- */
.sale-badge,
.discount-badge,
[class*="sale-badge"] {
  background:    var(--pb-teal) !important;
  color:         #fff !important;
  border-radius: 6px !important;
  font-weight:   700 !important;
  font-size:     0.75rem !important;
  padding:       0.15rem 0.5rem !important;
}

/* --- Section headings (homepage, category pages) ---------- */
.section-title,
[class*="section-title"] {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight:    800;
}


/* ============================================================
   Zoho Theme Header Overrides
   Targets the actual class names rendered by Zoho Commerce
   ============================================================ */

/* ---- Desktop header bar ---------------------------------- */
.zpheader-style-04,
.theme-header {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  border-bottom: none !important;
}

/* ---- Desktop nav links ----------------------------------- */
.theme-menu a,
.theme-menu-name {
  font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important;
  color:           #374151 !important;
  font-weight:     600 !important;
  font-size:       0.95rem !important;
  text-decoration: none !important;
  transition:      color 0.15s !important;
}
.theme-menu a:hover,
.theme-menu a:hover .theme-menu-name {
  color:      var(--pb-purple) !important;
  background: transparent !important;
}
.theme-menu-selected > a,
.theme-menu-selected .theme-menu-name {
  color: var(--pb-purple) !important;
}

/* Store link — purple pill (matches website's active store indicator) */
.theme-menu a:has([data-theme-menu-name="Store"]),
.theme-sub-menu a:has([data-theme-menu-name="Store"]) {
  background:    var(--pb-purple) !important;
  color:         #fff !important;
  border-radius: 9999px !important;
  padding:       0.35rem 1rem !important;
  cursor:        default !important;
}
.theme-menu a:has([data-theme-menu-name="Store"]) .theme-menu-name,
.theme-sub-menu a:has([data-theme-menu-name="Store"]) .theme-menu-name {
  color: #fff !important;
}
.theme-menu a:has([data-theme-menu-name="Store"]):hover,
.theme-sub-menu a:has([data-theme-menu-name="Store"]):hover {
  background: var(--pb-purple-dark) !important;
  color:      #fff !important;
}

/* ---- Dropdown sub-menu ----------------------------------- */
.theme-sub-menu {
  background:    #ffffff !important;
  border:        1px solid #f0e6f2 !important;
  border-radius: var(--pb-radius) !important;
  box-shadow:    0 8px 24px rgba(134, 25, 143, 0.1) !important;
  padding:       0.4rem 0 !important;
}
.theme-sub-menu li a {
  padding:     0.5rem 1.25rem !important;
  font-size:   0.9rem !important;
  font-weight: 500 !important;
}
.theme-sub-menu li a:hover {
  background: #fdf6ff !important;
  color:      var(--pb-purple) !important;
}

/* ---- Desktop search -------------------------------------- */

/* Search icon — stroke only, no fill on the circle */
.theme-search-icon svg {
  fill: none !important;
}
.theme-search-icon svg circle {
  fill:   none !important;
  stroke: #374151 !important;
  transition: stroke 0.15s !important;
}
.theme-search-icon svg line {
  stroke: #374151 !important;
  transition: stroke 0.15s !important;
}
.theme-search-icon:hover svg circle,
.theme-search-icon:hover svg line {
  stroke: var(--pb-purple) !important;
}

/* Remove black border/outline that appears when search expands */
.theme-search-field-container,
.theme-search-and-mini-cart-group,
.theme-search-cart-non-res,
.theme-search {
  border:  none !important;
  outline: none !important;
  box-shadow: none !important;
}
.theme-search-field-container input[type="text"] {
  border-radius: 9999px !important;
  border:        1px solid #e5e7eb !important;
  outline:       none !important;
}
.theme-search-field-container input[type="text"]:focus {
  border-color: var(--pb-purple) !important;
  box-shadow:   0 0 0 3px rgba(134, 25, 143, 0.12) !important;
  outline:      none !important;
}
.theme-search-close-icon line {
  stroke: var(--pb-purple) !important;
}

/* ---- Wishlist icon --------------------------------------- */
.theme-wishlist-icon svg path {
  fill:       #374151 !important;
  transition: fill 0.15s !important;
}
.theme-wishlist-icon:hover svg path {
  fill: var(--pb-purple) !important;
}

/* ---- User / portal icon ---------------------------------- */
.theme-portal-login svg circle,
.theme-portal-login svg path {
  stroke: #374151 !important;
  transition: stroke 0.15s !important;
}
.theme-portal-login:hover svg circle,
.theme-portal-login:hover svg path {
  stroke: var(--pb-purple) !important;
}
.theme-portal-container-dropdown {
  background:    #ffffff !important;
  border:        1px solid #f0e6f2 !important;
  border-radius: var(--pb-radius) !important;
  box-shadow:    0 8px 24px rgba(134, 25, 143, 0.1) !important;
}

/* Sign In / Sign Up items — clear Zoho's default highlight, text-only hover */
.theme-portal-content {
  background: transparent !important;
}
.theme-portal-content a {
  color:            #374151 !important;
  font-weight:      600 !important;
  display:          block !important;
  padding:          0.5rem 1.25rem !important;
  background:       transparent !important;
  border:           none !important;
  box-shadow:       none !important;
  text-decoration:  none !important;
  transition:       color 0.15s !important;
}
.theme-portal-content a:hover,
.theme-portal-content a:focus {
  color:      var(--pb-purple) !important;
  background: transparent !important;
  outline:    none !important;
}
.theme-username-dropdown-list li a {
  color:      #374151 !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.theme-username-dropdown-list li a:hover {
  color:      var(--pb-purple) !important;
  background: transparent !important;
}

/* ---- Cart icon ------------------------------------------- */
.theme-minicart-icon svg path {
  fill:       #374151 !important;
  transition: fill 0.15s !important;
}
.theme-minicart-icon:hover svg path {
  fill: var(--pb-purple) !important;
}
.theme-mini-cart-count {
  background:    var(--pb-teal) !important;
  color:         #fff !important;
  border-radius: 9999px !important;
}

/* ---- Mobile top bar -------------------------------------- */
.theme-mobile-header-style-05.theme-mobile-header-top {
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Mobile search icon */
.theme-mobile-header-search-icon path {
  fill: #374151 !important;
}
.theme-mobile-header-search-back path {
  fill: var(--pb-purple) !important;
}
.theme-search-go {
  background:    var(--pb-purple) !important;
  color:         #fff !important;
  border:        none !important;
  border-radius: 9999px !important;
  padding:       0.4rem 1rem !important;
  font-weight:   600 !important;
  cursor:        pointer !important;
}

/* Mobile bottom icon bar (wishlist, user, cart) */
.theme-mobile-header-bottom {
  background:  #ffffff !important;
  border-top:  1px solid #f0e6f2 !important;
}
.theme-mobile-header-icon svg path {
  fill:       #374151 !important;
  transition: fill 0.15s !important;
}
.theme-mobile-header-icon:hover svg path {
  fill: var(--pb-purple) !important;
}

/* Hamburger stays purple always — placed after the general icon rule to win specificity */
.theme-mobile-header-icon.theme-mobile-header-slide-open svg path {
  fill: var(--pb-purple) !important;
}

/* ---- Mobile slide drawer --------------------------------- */
.theme-mobile-header-slidewrapper {
  z-index: 9999 !important;
}
.theme-mobile-header-slide {
  background: #ffffff !important;
  box-shadow: -4px 0 24px rgba(134, 25, 143, 0.12) !important;
}
.theme-mobile-header-slide-header {
  display:         flex !important;
  align-items:     center !important;
  justify-content: flex-end !important;
  padding:         1rem 1.25rem !important;
  border-bottom:   1px solid #f0e6f2 !important;
}
.theme-mobile-header-slide-close {
  color:         var(--pb-purple) !important;
  cursor:        pointer !important;
  padding:       0.25rem !important;
  border-radius: 50% !important;
  transition:    background 0.15s !important;
}
.theme-mobile-header-slide-close:hover {
  background: #f3e8f7 !important;
}
.theme-mobile-header-slide-close svg path {
  fill: var(--pb-purple) !important;
}

/* Nav links inside the drawer (populated by Zoho from menu setup) */
.theme-responsive-menu a,
.theme-mobile-header-navigation a {
  display:         block !important;
  padding:         0.7rem 1.5rem !important;
  color:           #374151 !important;
  font-weight:     600 !important;
  font-size:       1rem !important;
  text-align:      center !important;
  text-decoration: none !important;
  border-bottom:   1px solid #f9f0fa !important;
  transition:      color 0.15s, background 0.15s !important;
}
.theme-responsive-menu a:hover,
.theme-mobile-header-navigation a:hover {
  color:      var(--pb-purple) !important;
  background: #fdf6ff !important;
}
.theme-responsive-menu .theme-menu-selected > a,
.theme-responsive-menu a.active {
  color: var(--pb-purple) !important;
}

/* Portal area at the bottom of the drawer */
.theme-portal-style {
  padding:    1rem 1.5rem !important;
  border-top: 1px solid #f0e6f2 !important;
}


.theme-desktop-cart-inner-container{
  display:none;
}