@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/*
  Themes Frappe/ERPNext Webshop pages to match the resilient_domains brand
  system. Scoped under body classes/attributes Frappe/Webshop sets per page
  type so it never touches custom www/ pages (coach pages etc.) that don't
  carry these.

  Page types covered so far:
    body.product-page        -> Website Item detail page + /all-products
                                 listing (both grid and list view)
    body[data-path="wishlist"] -> /wishlist
    body[data-path="cart"]     -> /cart

  Add more blocks below as we style additional webshop pages (checkout).
*/

:root {
  --webshop-primary: #582581;
  --webshop-primary-hover: #9A4795;
  --webshop-teal: #00A19E;
  --webshop-text: #434B49;
  --webshop-muted-bg: #F2F8F8;
  --webshop-border: #E6EFEF;
}

body.product-page {
  font-family: 'Comfortaa', sans-serif;
  color: var(--webshop-text);
  background: #FFFFFF;
}

body.product-page * {
  font-family: 'Comfortaa', sans-serif;
}

/* NAVBAR - replaced by the Hub's own branded nav/footer, injected by
   webshop_chrome.js. Hidden here (not just via the injected block's own
   CSS) so there's no flash of the stock navbar before the JS runs. */

body.product-page nav.navbar,
body.product-page footer.web-footer,
body[data-path="cart"] nav.navbar,
body[data-path="cart"] footer.web-footer,
body[data-path="wishlist"] nav.navbar,
body[data-path="wishlist"] footer.web-footer {
  display: none !important;
}

/* Cart/wishlist icons injected into the Hub nav by webshop_chrome.js -
   the Hub's branded nav has no e-commerce icons of its own, so these are
   added only on webshop pages. */

.trh-hub-shop-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}

.trh-hub-shop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: #582581;
  transition: background 0.2s ease, color 0.2s ease;
}

.trh-hub-shop-icon:hover {
  background: #F2F8F8;
  color: #9A4795;
  text-decoration: none;
}

.trh-hub-shop-icon svg {
  width: 22px;
  height: 22px;
}

/* BREADCRUMBS */

body.product-page .item-breadcrumbs {
  padding: 18px 0;
  font-size: 13px;
}

body.product-page .item-breadcrumbs a {
  color: var(--webshop-text);
  opacity: 0.7;
  text-decoration: none;
}

body.product-page .item-breadcrumbs a:hover {
  color: var(--webshop-primary);
  opacity: 1;
}

body.product-page .breadcrumb-item.active {
  color: var(--webshop-primary);
  font-weight: 600;
}

/* PRODUCT IMAGE */

body.product-page .product-image {
  border-radius: 24px !important;
  border-color: var(--webshop-border) !important;
  background: var(--webshop-muted-bg);
}

body.product-page .no-image-item {
  background: var(--webshop-primary);
  color: #FFFFFF;
  font-size: 42px;
  font-weight: 800;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* PRODUCT TITLE / META */

body.product-page .product-title {
  color: var(--webshop-teal);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 10px;
}

body.product-page .product-code {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--webshop-primary-hover);
  opacity: 0.9;
}

body.product-page .product-item-group {
  background: var(--webshop-muted-bg);
  border-radius: 999px;
  padding: 4px 12px;
  margin-right: 8px;
}

/* PRICE */

body.product-page .product-price {
  font-size: 28px;
  font-weight: 700;
  color: var(--webshop-primary);
  margin: 18px 0 6px;
}

body.product-page .product-price .formatted-price {
  font-size: 14px;
  font-weight: 400;
  color: var(--webshop-text);
  opacity: 0.7;
}

/* BUTTONS */

body.product-page .btn-inquiry,
body.product-page .btn-add-to-cart,
body.product-page .btn-view-in-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 2px solid var(--webshop-primary) !important;
  background: var(--webshop-primary) !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease;
}

body.product-page .btn-inquiry:hover,
body.product-page .btn-add-to-cart:hover,
body.product-page .btn-view-in-cart:hover {
  background: var(--webshop-primary-hover) !important;
  border-color: var(--webshop-primary-hover) !important;
  transform: translateY(-2px);
}

body.product-page .btn-write-review {
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: 1px solid var(--webshop-border) !important;
  background: #FFFFFF !important;
  color: var(--webshop-teal) !important;
  font-weight: 700 !important;
}

body.product-page .btn-write-review:hover {
  border-color: var(--webshop-teal) !important;
}

body.product-page .like-action-item-fp {
  cursor: pointer;
}

/* DESCRIPTION */

body.product-page .product-description,
body.product-page .ql-editor {
  font-size: 17px;
  line-height: 1.75;
  color: var(--webshop-text);
}

body.product-page .product-description h2,
body.product-page .product-description h3 {
  color: var(--webshop-teal);
  font-weight: 700;
  margin-top: 28px;
}

body.product-page .product-description ul {
  padding-left: 22px;
}

body.product-page .product-description ul li {
  margin-bottom: 8px;
}

/* SPECIFICATIONS TABLE */

body.product-page .item-website-specification {
  background: #FFFFFF;
  border: 1px solid var(--webshop-border);
  border-radius: 24px;
  padding: 8px 24px;
  box-shadow: 0 18px 50px rgba(67, 75, 73, 0.06);
}

body.product-page .item-website-specification .product-title {
  font-size: 20px;
  color: var(--webshop-primary);
}

body.product-page .item-website-specification table {
  margin-bottom: 0;
}

body.product-page .item-website-specification .spec-label {
  color: var(--webshop-teal);
  font-weight: 700;
  width: 220px;
  border-color: var(--webshop-border);
}

body.product-page .item-website-specification .spec-content {
  border-color: var(--webshop-border);
}

/* REVIEWS */

body.product-page .ratings-reviews-section {
  border-top: 1px solid var(--webshop-border);
  padding-top: 32px;
}

body.product-page .reviews-header {
  font-size: 20px;
  font-weight: 700;
  color: var(--webshop-primary);
}

body.product-page .rating-summary-numbers h2 {
  color: var(--webshop-primary) !important;
}

body.product-page .progress-bar-cosmetic {
  background-color: var(--webshop-primary) !important;
}

/* PRODUCT LISTING (/all-products) */

body.product-page .toolbar {
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

body.product-page #search-box {
  border: 1px solid var(--webshop-border) !important;
  border-radius: 999px !important;
  padding: 12px 18px 12px 42px !important;
  font-size: 15px;
  box-shadow: none !important;
}

body.product-page #search-box:focus {
  border-color: var(--webshop-primary) !important;
}

body.product-page .search-icon svg {
  color: var(--webshop-text);
  opacity: 0.5;
}

body.product-page #search-results-container {
  border-radius: 18px;
  border: 1px solid var(--webshop-border);
  box-shadow: 0 18px 45px rgba(67, 75, 73, 0.12);
  margin-top: 8px;
}

body.product-page .toggle-container {
  display: flex !important;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0;
  border: 1px solid var(--webshop-border);
  border-radius: 999px;
  overflow: hidden;
  width: fit-content;
  margin-left: auto;
  background: #FFFFFF;
}

body.product-page .toggle-container .form-group {
  margin: 0 !important;
}

body.product-page .toggle-container .form-group:first-child {
  border-right: 1px solid var(--webshop-border);
}

body.product-page .toggle-container .btn {
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: #FFFFFF !important;
  color: var(--webshop-primary) !important;
  padding: 10px 18px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.product-page .toggle-container .btn svg {
  color: inherit;
}

body.product-page .toggle-container .btn.btn-primary {
  background: var(--webshop-primary) !important;
  color: #FFFFFF !important;
}

/* Grid view cards */

body.product-page #products-grid-area .item-card .card {
  border: 1px solid var(--webshop-border);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(67, 75, 73, 0.06);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.product-page #products-grid-area .item-card .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(67, 75, 73, 0.1);
}

body.product-page #products-grid-area .card-img-container {
  background: var(--webshop-muted-bg);
}

body.product-page #products-grid-area .no-image {
  background: var(--webshop-primary);
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 800;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.product-page #products-grid-area .product-title {
  color: var(--webshop-teal);
  font-weight: 700;
  font-size: 17px;
}

body.product-page #products-grid-area .product-category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--webshop-primary-hover);
  opacity: 0.85;
  margin: 4px 0 8px;
}

body.product-page #products-grid-area .product-price {
  font-weight: 700;
  color: var(--webshop-primary);
  font-size: 18px;
}

body.product-page #products-grid-area .cart-indicator {
  background: var(--webshop-primary);
  color: #FFFFFF;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

/* List view rows */

body.product-page #products-list-area .list-row {
  border-bottom: 1px solid var(--webshop-border);
  padding-bottom: 18px;
}

body.product-page #products-list-area .list-image {
  border-radius: 18px !important;
  border-color: var(--webshop-border) !important;
  overflow: hidden;
  background: var(--webshop-muted-bg);
}

body.product-page #products-list-area .no-image-list {
  background: var(--webshop-primary);
  color: #FFFFFF;
  font-size: 22px;
  font-weight: 800;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.product-page #products-list-area .product-link {
  color: var(--webshop-teal) !important;
  font-weight: 700 !important;
}

body.product-page #products-list-area .product-code {
  font-size: 12px;
  color: var(--webshop-primary-hover);
  opacity: 0.85;
}

body.product-page #products-list-area .product-price {
  color: var(--webshop-primary);
  font-weight: 700;
}

/* WISHLIST (/wishlist) */

body[data-path="wishlist"] {
  font-family: 'Comfortaa', sans-serif;
  color: var(--webshop-text);
}

body[data-path="wishlist"] * {
  font-family: 'Comfortaa', sans-serif;
}

body[data-path="wishlist"] .wishlist-card .card {
  border: 1px solid var(--webshop-border);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(67, 75, 73, 0.06);
  overflow: hidden;
}

body[data-path="wishlist"] .card-img-container {
  background: var(--webshop-muted-bg);
}

body[data-path="wishlist"] .no-image {
  background: var(--webshop-primary);
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 800;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-path="wishlist"] .remove-wish {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 4px;
}

body[data-path="wishlist"] .product-title {
  color: var(--webshop-teal);
  font-weight: 700;
  font-size: 17px;
}

body[data-path="wishlist"] .product-category {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--webshop-primary-hover);
  opacity: 0.85;
  margin: 4px 0 8px;
}

body[data-path="wishlist"] .product-price {
  font-weight: 700;
  color: var(--webshop-primary);
  font-size: 18px;
}

body[data-path="wishlist"] .btn-add-to-cart-list {
  border-radius: 999px !important;
  border: 2px solid var(--webshop-primary) !important;
  background: var(--webshop-primary) !important;
  font-weight: 700 !important;
}

body[data-path="wishlist"] .btn-add-to-cart-list:hover {
  background: var(--webshop-primary-hover) !important;
  border-color: var(--webshop-primary-hover) !important;
}

/* CART (/cart) */

body[data-path="cart"] {
  font-family: 'Comfortaa', sans-serif;
  color: var(--webshop-text);
}

body[data-path="cart"] main.container {
  padding-top: 48px;
  padding-bottom: 64px;
}

body[data-path="cart"] * {
  font-family: 'Comfortaa', sans-serif;
}

body[data-path="cart"] .shopping-cart-header {
  color: var(--webshop-teal);
  font-weight: 700;
}

body[data-path="cart"] .frappe-card {
  border: 1px solid var(--webshop-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(67, 75, 73, 0.06) !important;
}

body[data-path="cart"] .cart-items-header {
  font-size: 18px;
  font-weight: 700;
  color: var(--webshop-primary);
}

body[data-path="cart"] .cart-table th {
  color: var(--webshop-text);
  opacity: 0.7;
  font-weight: 700;
  border-color: var(--webshop-border) !important;
}

body[data-path="cart"] .cart-table td {
  border-color: var(--webshop-border) !important;
}

body[data-path="cart"] .no-image-cart-item {
  background: var(--webshop-primary);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-path="cart"] .item-title {
  color: var(--webshop-teal);
  font-weight: 700;
}

body[data-path="cart"] .item-subtitle {
  font-size: 12px;
  opacity: 0.7;
}

body[data-path="cart"] .number-spinner {
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--webshop-border);
}

body[data-path="cart"] .cart-btn {
  background: var(--webshop-muted-bg);
  border: none;
  color: var(--webshop-primary);
  font-weight: 700;
}

body[data-path="cart"] .cart-qty {
  border: none !important;
  box-shadow: none !important;
}

body[data-path="cart"] .remove-cart-item-logo {
  color: var(--webshop-text);
  opacity: 0.6;
}

body[data-path="cart"] .item-grand-total,
body[data-path="cart"] .net-total {
  color: var(--webshop-primary);
}

body[data-path="cart"] .btn-primary-light {
  border-radius: 999px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--webshop-border) !important;
  color: var(--webshop-text) !important;
  font-weight: 700 !important;
}

body[data-path="cart"] .btn-primary-light:hover {
  border-color: var(--webshop-primary) !important;
  color: var(--webshop-primary) !important;
}

body[data-path="cart"] .payment-summary h6,
body[data-path="cart"] .address-header h6 {
  color: var(--webshop-primary);
  font-weight: 700;
}

body[data-path="cart"] .bill-content.net-total {
  font-weight: 700;
}

/* Extra-qualified selector (place-order ancestor + full class chain) so
   this reliably outranks webshop's own bundled button styling, which
   loads after webshop_theme.css in the page <head>. */
body[data-path="cart"] .place-order .btn.btn-primary.btn-request-for-quotation {
  border-radius: 999px !important;
  background: var(--webshop-primary) !important;
  border: 2px solid var(--webshop-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

body[data-path="cart"] .place-order .btn.btn-primary.btn-request-for-quotation:hover,
body[data-path="cart"] .place-order .btn.btn-primary.btn-request-for-quotation:focus {
  background: var(--webshop-primary-hover) !important;
  border-color: var(--webshop-primary-hover) !important;
  color: #FFFFFF !important;
}

/* FAMILY WELLNESS - COACH PICKER
   Rendered by {{ family_wellness_coaches() }}, embedded directly in the
   Family Wellness Session Website Item's description. Coaches only
   appear here if "Family Session" is set up as an active appointment
   type on their record (see get_active_appointment_types filtering it
   out of the coach page's own list). */

body.product-page .trh-family-wellness-coaches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

body.product-page .trh-fw-coach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--webshop-border);
  border-radius: 22px;
  padding: 24px 18px;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 14px 40px rgba(67, 75, 73, 0.06);
}

body.product-page .trh-fw-coach-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 50px rgba(67, 75, 73, 0.1);
}

body.product-page .trh-fw-coach-photo,
body.product-page .trh-fw-coach-photo-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  margin-bottom: 14px;
}

body.product-page .trh-fw-coach-photo-placeholder {
  background: var(--webshop-primary);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 800;
}

body.product-page .trh-fw-coach-info h3 {
  color: var(--webshop-teal) !important;
  font-size: 18px !important;
  margin: 0 0 4px !important;
}

body.product-page .trh-fw-coach-info p {
  font-size: 13px !important;
  color: var(--webshop-text) !important;
  opacity: 0.75;
  margin: 0 0 12px !important;
}

body.product-page .trh-fw-coach-book {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--webshop-primary);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 13px;
}

body.product-page .trh-fw-coach-card:hover .trh-fw-coach-book {
  background: var(--webshop-primary-hover);
}

/* FOOTER - see note at the top of this file; hidden and replaced by
   webshop_chrome.js. */