/** Shopify CDN: Minification failed

Line 234:30 Unexpected "*"

**/
/* ============================================================
   Cocoa brand layer for the draft theme (see-food2 / Dawn base)
   Keeps original layout, modules and Liquid business logic.
   Main content keeps NO background: user uploads their own body
   background image later. Navbar + footer are #2B1F18 only.
   ============================================================ */

:root {
  --cocoa-brown: #2B1F18;
  --cocoa-brown-deep: #1E1510;
  --cocoa-card: rgba(43, 31, 24, 0.76);
  --cocoa-gold: #D1A879;
  --cocoa-gold-dark: #B99162;
  --cocoa-btn: #634834;
  --cocoa-btn-hover: #4A3526;
  --cocoa-text: #F7EFE5;
  --cocoa-text-2: #C9B9AD;
  --cocoa-text-3: #A8907C;
  --cocoa-gold-soft: #EBD3B0;
  --cocoa-gold-deep: #A87B4F;
  --cocoa-link: #E3BE8E;
  --cocoa-border: rgba(209, 168, 121, 0.3);
  --cocoa-gradient-heading: linear-gradient(100deg, #F6E7CF 0%, #D1A879 48%, #B08A5C 100%);
  --cocoa-gradient-gold: linear-gradient(135deg, #EBD3B0 0%, #D1A879 55%, #B99162 100%);
  --cocoa-gradient-btn: linear-gradient(135deg, #6E5138 0%, #4A3526 100%);
  --cocoa-gradient-card: linear-gradient(155deg, rgba(62, 45, 34, 0.78) 0%, rgba(33, 24, 18, 0.82) 100%);
  --font-heading-family: 'Cormorant Garamond', Georgia, serif;
  --font-heading-weight: 600;
  --font-body-family: 'Open Sans', 'Segoe UI', sans-serif;
  --font-body-weight: 400;
  --buttons-radius: 5px;
}

/* ------------------------------------------------------------------
   Fonts
   ------------------------------------------------------------------ */
html,
body,
.ocean-cat-wrapper,
.ocean-iwt-wrapper,
.ocean-prod-wrapper,
.ocean-bento-wrapper,
.ocean-footer-wrapper,
.ocean-cat-title,
button,
input,
select,
textarea,
.field__input,
.list-menu__item,
.header__menu-item,
.menu-drawer__menu-item,
.footer,
.footer-block,
.footer-block__details-content,
.newsletter-form__field-wrapper,
.predictive-search {
  font-family: var(--font-body-family) !important;
  font-style: normal;
  font-weight: var(--font-body-weight);
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5, .h6,
.ocean-iwt-title,
.ocean-cat-wrapper h2,
.ocean-prod-wrapper h2,
.ocean-bento-wrapper h2,
.ocean-bento-card h3,
.trustpilot-reviews h2,
.trustpilot-reviews h3,
.ocean-footer-title,
.title-with-highlight {
  font-family: var(--font-heading-family) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--cocoa-text);
}

/* ---- warm gold gradient for large headings (solid colour is the fallback) ---- */
h1, h2,
.h0, .h1, .h2,
.banner__heading,
.ocean-iwt-title,
.ocean-cat-wrapper h2,
.ocean-prod-wrapper h2,
.ocean-bento-wrapper h2,
.trustpilot-reviews h2,
.newsletter h2,
.ocean-pd-title,
.ocean-pdp-wrapper h1 {
  color: #F6E7CF;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1, h2,
  .h0, .h1, .h2,
  .banner__heading,
  .ocean-iwt-title,
  .ocean-cat-wrapper h2,
  .ocean-prod-wrapper h2,
  .ocean-bento-wrapper h2,
  .trustpilot-reviews h2,
  .newsletter h2,
  .ocean-pd-title,
  .ocean-pdp-wrapper h1 {
    background-image: var(--cocoa-gradient-heading) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  /* highlighted words inside a gradient heading keep a solid gold tone */
  h1 strong, h2 strong,
  .title-with-highlight strong {
    -webkit-text-fill-color: currentColor !important;
    color: var(--cocoa-gold) !important;
  }
}

/* prices use the gold gradient too */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .price,
  .price__regular .price-item,
  .price__sale .price-item--sale,
  .card-information .price {
    background-image: var(--cocoa-gradient-gold) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
}

/* small utility / facet labels keep the secondary colour (no gradient) */
.facets__heading,
.facet-filters__label,
.product-count__text,
.mobile-facets__heading,
.mobile-facets__count,
main label,
main caption,
.ocean-prod-wrapper .text-gray-500,
.ocean-cat-wrapper .text-gray-500 {
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--cocoa-text-2) !important;
}

/* ---- rating block (Trustpilot "Excellent ★★★★★") ----
   The heading gradient must not make the star pseudo-element transparent. */
.trustpilot-reviews .trustpilot-reviews__subheading {
  background-image: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--cocoa-text-2) !important;
}
.trustpilot-reviews .trustpilot-reviews__subheading strong {
  color: var(--cocoa-gold) !important;
  -webkit-text-fill-color: var(--cocoa-gold) !important;
}
.rating-stars__container--underlay,
.rating-stars__container--underlay::before {
  -webkit-text-fill-color: currentColor !important;
}
.trustpilot-reviews .trustpilot-reviews__subheading .rating-stars__container--underlay::before {
  color: #F4B400 !important;
}

/* ------------------------------------------------------------------
   Page body: NO background on the content area (user adds image later)
   ------------------------------------------------------------------ */
body.gradient,
body {
  background-color: var(--cocoa-brown) !important;
  /* page background photo: flat cocoa veil (32%) over the image = slight transparency.
     Cover image, navbar and footer keep their own backgrounds. */
  background-image:
    linear-gradient(rgba(43, 31, 24, 0.32), rgba(43, 31, 24, 0.32)),
    url("/cdn/shop/files/page-bg-0910.jpg?v=1789007780") !important;
  background-size: auto, cover !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
}

.content-for-layout,
#MainContent,
#MainContent .gradient,
#MainContent .color-custom,
#MainContent .color-background-1,
#MainContent .color-background-2,
#MainContent .color-inverse,
#MainContent section,
#MainContent .shopify-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Ocean inline section backgrounds (Tailwind helpers) */
.ocean-cat-wrapper,
.ocean-iwt-wrapper,
.ocean-bento-wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

/* placeholder image boxes inside ocean sections: keep transparent */
.ocean-iwt-image-box {
  background: transparent !important;
}
.ocean-iwt-image-box .bg-gray-200 {
  background: transparent !important;
  border: 1px dashed var(--cocoa-border);
}

/* ------------------------------------------------------------------
   Global text colors
   ------------------------------------------------------------------ */
body,
.content-for-layout,
#MainContent {
  color: var(--cocoa-text);
}

main .caption,
.product__text,
.product__info .product__text,
.card .caption,
.ocean-iwt-desc,
.ocean-iwt-wrapper .text-gray-*,
.ocean-prod-wrapper .text-gray-*,
.ocean-cat-wrapper .text-gray-*,
.ocean-footer-text,
.ocean-footer-text a,
.ocean-footer-text li,
.ocean-footer-text p,
.ocean-policy-links,
.ocean-policy-links a,
.ocean-copyright-text,
.customer p,
.rte .caption {
  color: var(--cocoa-text-2);
}

main a:not(.button):not(.ocean-btn-add):not(.ocean-iwt-btn):not(.ocean-bento-btn) {
  color: var(--cocoa-link);
}
main a:not(.button):not(.ocean-btn-add):not(.ocean-iwt-btn):not(.ocean-bento-btn):hover {
  color: var(--cocoa-gold-soft);
}

/* ------------------------------------------------------------------
   Borders
   ------------------------------------------------------------------ */
.card,
.card--card,
.card--standard .card__inner,
.testimonial-card,
.trustpilot-review,
.ocean-prod-wrapper [class*="bg-white"],
.ocean-grid-wrapper [class*="bg-white"],
.ocean-bento-card,
.ocean-cat-img-box,
.content-container,
.product-form__input .product-form__input--pill input + label,
.field__input,
.select__select,
.quantity,
textarea,
input[type="email"],
input[type="text"],
input[type="tel"],
input[type="search"] {
  border-color: var(--cocoa-border) !important;
}

/* ------------------------------------------------------------------
   Navigation bar: #2B1F18 background only
   ------------------------------------------------------------------ */
.header-wrapper,
.shopify-section-group-header-group,
.shopify-section-header-sticky,
.header,
.menu-drawer,
.menu-drawer__inner-container,
.drawer__inner,
.search-modal,
details-modal .modal__content,
.modal__content .search-modal {
  background-color: var(--cocoa-brown) !important;
  background-image: none !important;
  color: #FFFFFF !important;
}

.header-wrapper {
  border-bottom: 1px solid var(--cocoa-border);
}

.header__heading-link,
.header__heading-logo,
.header__menu-item,
.header__menu-item span,
.header__icon,
.header__icon span,
.header__icon .icon,
.menu-drawer__menu-item,
.menu-drawer .list-menu__item,
.menu-drawer__close-button,
.header__active-menu-item {
  color: #FFFFFF !important;
}

.header__menu-item:hover,
.header__menu-item:hover span,
.header__menu-item:focus,
.header__icon:hover,
.menu-drawer__menu-item:hover,
.menu-drawer__menu-item:hover span,
.menu-drawer .list-menu__item:hover {
  color: var(--cocoa-gold) !important;
}

.header__active-menu-item {
  color: var(--cocoa-gold) !important;
  text-decoration-color: var(--cocoa-gold);
}

/* cart item-count bubble inside the header icon
   (the theme renders it with scheme colours; our white header text rule
   made the number white on a white bubble, i.e. invisible) */
.header__icon .cart-count-bubble,
.cart-count-bubble {
  background-color: var(--cocoa-gold) !important;
  background-image: var(--cocoa-gradient-gold) !important;
  color: var(--cocoa-brown) !important;
  height: 1.7rem !important;
  min-width: 1.7rem !important;
  width: auto !important;
  padding: 0 0.4rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}
.header__icon .cart-count-bubble span,
.cart-count-bubble span {
  color: var(--cocoa-brown) !important;
  -webkit-text-fill-color: var(--cocoa-brown) !important;
  line-height: 1.7rem !important;
}

.header__submenu,
.mega-menu__content,
.menu-drawer__submenu {
  background-color: var(--cocoa-brown) !important;
  color: var(--cocoa-text) !important;
}

/* ------------------------------------------------------------------
   Footer: #2B1F18 background only
   ------------------------------------------------------------------ */
.ocean-footer-wrapper,
footer.footer,
.footer {
  background-color: var(--cocoa-brown) !important;
  background-image: none !important;
  color: var(--cocoa-text);
  border-top: 1px solid var(--cocoa-border);
}

.ocean-footer-wrapper a {
  color: var(--cocoa-text-2);
}
.ocean-footer-wrapper a:hover,
.ocean-policy-links a:hover {
  color: var(--cocoa-gold) !important;
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.button:not(.button--secondary):not(.button--tertiary),
.shopify-payment-button__button--unbranded,
.newsletter-form__button,
input[type="submit"],
button[type="submit"],
.ocean-iwt-btn,
.ocean-btn-add,
.quick-add__submit {
  background-color: var(--cocoa-btn) !important;
  background-image: var(--cocoa-gradient-btn) !important;
  border-color: var(--cocoa-btn) !important;
  color: var(--cocoa-text) !important;
  border-radius: 5px !important;
}

.button:not(.button--secondary):not(.button--tertiary):hover,
.shopify-payment-button__button--unbranded:hover,
.newsletter-form__button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.ocean-iwt-btn:hover,
.ocean-btn-add:hover,
.quick-add__submit:hover {
  background-color: var(--cocoa-btn-hover) !important;
  border-color: var(--cocoa-btn-hover) !important;
  color: var(--cocoa-text) !important;
  transform: none !important;
  box-shadow: none !important;
}

.button--secondary,
.button--secondary:hover,
.ocean-view-all-btn {
  background-color: transparent !important;
  border: 1px solid rgba(209, 168, 121, 0.7) !important;
  color: var(--cocoa-gold) !important;
  border-radius: 5px !important;
}
.ocean-view-all-btn:hover {
  background-color: var(--cocoa-gold) !important;
  color: var(--cocoa-brown) !important;
}

/* hide empty "View all" pills (they render as a blank gold ellipse) */
#MainContent .ocean-view-all:empty,
#MainContent .ocean-view-all-btn:empty,
#MainContent a.ocean-view-all[href=""],
/* the product-grid module links to the collection it is already on */
#MainContent .ocean-grid-wrapper a.ocean-view-all {
  display: none !important;
}

/* ------------------------------------------------------------------
   Cart drawer safety net
   The theme sometimes leaves a stale "is-empty" class on <cart-drawer>
   after an AJAX add-to-cart, which collapses the drawer body to height 0
   (looks completely blank). Whenever the drawer actually contains a line
   item, force the normal (non-empty) layout back on.
   ------------------------------------------------------------------ */
cart-drawer.is-empty:has(.cart-item) .drawer__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: normal !important;
  grid-template-rows: none !important;
}
cart-drawer.is-empty:has(.cart-item) .drawer__header {
  height: auto !important;
  padding: 1.5rem !important;
  overflow: visible !important;
}
cart-drawer.is-empty:has(.cart-item) .cart-drawer__body {
  height: auto !important;
  min-height: 12rem !important;
  padding: 0 1.5rem !important;
  overflow: auto !important;
}
cart-drawer.is-empty:has(.cart-item) .drawer__footer {
  height: auto !important;
  padding: 0 1.5rem !important;
  overflow: visible !important;
}
cart-drawer.is-empty:has(.cart-item) .cart-drawer__warnings,
cart-drawer.is-empty:has(.cart-item) .drawer__inner-empty {
  display: none !important;
}
/* the theme also hides .cart__contents while "is-empty" is set - show it again */
cart-drawer.is-empty:has(.cart-item) .cart__contents {
  display: block !important;
}
cart-drawer.is-empty:has(.cart-item) .cart__footer {
  display: flex !important;
}
cart-drawer.is-empty:has(.cart-item) .cart__empty-text {
  display: none !important;
}

/* ------------------------------------------------------------------
   Cart drawer: cocoa surfaces + readable text
   (the theme paints the drawer header/footer with the scheme's white
   background, which made the light heading and dark meta text unreadable)
   ------------------------------------------------------------------ */
cart-drawer .drawer__inner,
cart-drawer .drawer__header,
cart-drawer .drawer__footer,
cart-drawer .cart-drawer__body,
cart-drawer .drawer__inner-empty,
cart-drawer .cart-drawer__warnings {
  background-color: var(--cocoa-brown) !important;
  background-image: none !important;
  color: var(--cocoa-text) !important;
}

cart-drawer .drawer__heading,
cart-drawer .drawer__title,
cart-drawer .cart-drawer__warnings h2,
cart-drawer .cart__empty-text {
  color: var(--cocoa-gold-soft) !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none !important;
}

cart-drawer .cart-item__name,
cart-drawer .cart-item__name a,
cart-drawer .cart-item__details,
cart-drawer .cart-item__quantity,
cart-drawer .quantity,
cart-drawer .quantity__button,
cart-drawer .cart-item__quantity label,
cart-drawer .cart-drawer__footer,
cart-drawer .cart__footer,
cart-drawer .totals,
cart-drawer .totals * ,
cart-drawer .product-option,
cart-drawer .caption,
cart-drawer .cart-item__price,
cart-drawer .cart-drawer__totals__row {
  color: var(--cocoa-text) !important;
}

/* quantity input value must be readable on the cocoa surface */
cart-drawer .quantity {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: var(--cocoa-border) !important;
}
cart-drawer .quantity:after,
cart-drawer .quantity:before {
  border-color: var(--cocoa-border) !important;
}
cart-drawer .quantity__button {
  background-color: transparent !important;
  color: var(--cocoa-text) !important;
}
cart-drawer .quantity__button svg,
cart-drawer .quantity__button .icon,
cart-drawer .quantity__button use {
  color: var(--cocoa-text) !important;
  fill: currentColor !important;
}
cart-drawer .quantity__input,
cart-drawer input.quantity__input,
cart-drawer input {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: var(--cocoa-border) !important;
}

/* unit price / per kg meta lines were dark on dark */
cart-drawer .cart-item__unit-price,
cart-drawer .cart-item__unit-price *,
cart-drawer .unit-price,
cart-drawer .unit-price *,
cart-drawer .price--end + .cart-item__unit-price,
cart-drawer [class*="unit-price"] {
  color: var(--cocoa-text-2) !important;
  -webkit-text-fill-color: var(--cocoa-text-2) !important;
}

/* prices in the drawer use the gold accent */
cart-drawer .cart-item .price,
cart-drawer .cart-item__price,
cart-drawer .cart-drawer__totals__row__money,
cart-drawer .totals__subtotal-value,
cart-drawer .price--end,
cart-drawer .price--end * {
  color: var(--cocoa-gold) !important;
  -webkit-text-fill-color: var(--cocoa-gold) !important;
}

/* accent (emphasis) buttons */
.ocean-bento-btn,
.slideshow .banner__buttons .button,
.slideshow .button {
  background-color: var(--cocoa-gold) !important;
  background-image: var(--cocoa-gradient-gold) !important;
  border-color: var(--cocoa-gold) !important;
  color: var(--cocoa-brown) !important;
  border-radius: 5px !important;
}
.ocean-bento-btn:hover,
.slideshow .banner__buttons .button:hover,
.slideshow .button:hover {
  background-color: var(--cocoa-gold-dark) !important;
  border-color: var(--cocoa-gold-dark) !important;
  color: var(--cocoa-brown) !important;
}

/* ------------------------------------------------------------------
   Cards: translucent cocoa surfaces
   ------------------------------------------------------------------ */
.card-wrapper,
.card,
.card--card,
.card--standard .card__inner,
.product-card-wrapper .card,
.collection-card-wrapper .card,
.ocean-prod-wrapper [class*="bg-white"],
.ocean-grid-wrapper [class*="bg-white"],
.trustpilot-review,
.testimonial-card,
.splide__slide .rte {
  background-color: var(--cocoa-card) !important;
  background-image: var(--cocoa-gradient-card) !important;
  border: 1px solid var(--cocoa-border) !important;
  border-radius: 9px !important;
}

/* Bento cards keep their own photo backgrounds (set per block) */
.ocean-bento-card {
  border: 1px solid var(--cocoa-border) !important;
  border-radius: 9px !important;
  background-size: cover !important;
  background-position: center !important;
}
.ocean-bento-card:not([style*="background-image"]) {
  background-color: var(--cocoa-card) !important;
  background-image: var(--cocoa-gradient-card) !important;
}
.ocean-bento-card[style*="background-image"] {
  background-color: var(--cocoa-brown) !important;
}
/* flat tint instead of gradient overlay on photo cards */
.ocean-overlay {
  background: rgba(43, 31, 24, 0.38) !important;
}

/* ------------------------------------------------------------------
   Module surfaces: ONE page grid for every content module.
   All cards share the same width (max 1280px) and the same inner
   padding, so their left/right whitespace always lines up.
   ------------------------------------------------------------------ */
#MainContent .ocean-prod-wrapper,
#MainContent .ocean-cat-wrapper > .container,
#MainContent .ocean-bento-wrapper > .container,
#MainContent .trustpilot-reviews,
#MainContent .newsletter__wrapper,
#MainContent .ocean-grid-wrapper,
#MainContent .ocean-pdp-wrapper,
#MainContent .related-products,
#MainContent .template-search,
#MainContent #main-cart-items,
#MainContent #main-cart-footer,
#MainContent .collection,
#MainContent .featured-collection,
#MainContent > .shopify-section > .page-width {
  width: calc(100% - 32px) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 22px !important;
  background-color: var(--cocoa-card) !important;
  background-image: var(--cocoa-gradient-card) !important;
  border: 1px solid var(--cocoa-border) !important;
  border-radius: 9px !important;
}

/* outer wrappers of the ocean modules stay transparent so card edges line up */
#MainContent .ocean-cat-wrapper,
#MainContent .ocean-bento-wrapper {
  background: transparent !important;
  border: 0 none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* product detail inner container fills the card so padding matches */
#MainContent .ocean-pdp-container {
  max-width: 100% !important;
  width: 100% !important;
}

/* image-with-text keeps its two-column layout, matched padding + surface */
#MainContent .ocean-iwt-content {
  padding: 22px !important;
  background-color: var(--cocoa-card) !important;
  background-image: var(--cocoa-gradient-card) !important;
  border: 1px solid var(--cocoa-border) !important;
  border-radius: 9px !important;
}

/* ---- collection / category module: uniform, aligned cards ---- */
#MainContent .ocean-cat-item {
  height: 100%;
}
#MainContent .ocean-cat-title {
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}

/* ---- bento module: equal card heights ---- */
#MainContent .ocean-bento-grid {
  align-items: stretch !important;
}
#MainContent .ocean-bento-card {
  grid-column: span 1 !important;
  grid-row: span 1 !important;
  height: 100% !important;
  min-height: 100%;
}
@media (min-width: 768px) {
  #MainContent .ocean-bento-card {
    min-height: 200px !important;
  }
}
@media (max-width: 767px) {
  #MainContent .ocean-bento-card {
    min-height: 150px !important;
  }
}

/* ---- reviews module: card surface + equal heights ---- */
#MainContent .trustpilot-review {
  background-color: var(--cocoa-card) !important;
  background-image: var(--cocoa-gradient-card) !important;
  border: 1px solid var(--cocoa-border) !important;
  border-radius: 9px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
}
#MainContent .trustpilot-reviews .splide__slide {
  display: flex !important;
  height: auto !important;
}
#MainContent .trustpilot-reviews .splide__slide > .splide__slide__container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  flex: 1 1 auto !important;
}
#MainContent .trustpilot-review .testimonial-card__author-container {
  margin-top: auto !important;
}

/* ---- newsletter module: visible, complete form ---- */
#MainContent .newsletter__wrapper .newsletter__subheading,
#MainContent .newsletter__wrapper .newsletter__subheading p {
  color: var(--cocoa-text-2) !important;
}
#MainContent .newsletter .field__input {
  background-color: rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(209, 168, 121, 0.45) !important;
  color: var(--cocoa-text) !important;
}
#MainContent .newsletter .field__label {
  color: var(--cocoa-text-2) !important;
}
#MainContent .newsletter-form__button,
#MainContent .newsletter__solid-btn {
  background-color: var(--cocoa-btn) !important;
  border-color: var(--cocoa-btn) !important;
  color: var(--cocoa-text) !important;
  border-radius: 5px !important;
}
#MainContent .newsletter-form__button:hover,
#MainContent .newsletter__solid-btn:hover {
  background-color: var(--cocoa-btn-hover) !important;
  border-color: var(--cocoa-btn-hover) !important;
  color: var(--cocoa-text) !important;
}

/* ------------------------------------------------------------------
   Dawn-native pages (cards & padding handled by the unified grid above)
   ------------------------------------------------------------------ */
#MainContent .collection-list-wrapper,
#MainContent .collection-hero {
  width: calc(100% - 32px) !important;
  background-image: var(--cocoa-gradient-card) !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 22px !important;
  background-color: var(--cocoa-card) !important;
  border: 1px solid var(--cocoa-border) !important;
  border-radius: 9px !important;
}

/* product detail internals stay readable on the cocoa surface */
#MainContent .ocean-main-image-box,
#MainContent .ocean-thumb-item {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--cocoa-border) !important;
  border-radius: 9px !important;
}
#MainContent .ocean-pdp-wrapper,
#MainContent .ocean-pdp-wrapper p,
#MainContent .ocean-pdp-wrapper li,
#MainContent .ocean-pdp-wrapper span,
#MainContent .ocean-pdp-wrapper div {
  color: var(--cocoa-text);
}
#MainContent .ocean-pdp-wrapper .ocean-pd-desc,
#MainContent .ocean-pdp-wrapper .ocean-pd-sku,
#MainContent .ocean-pdp-wrapper .ocean-pd-meta {
  color: var(--cocoa-text-2) !important;
}

.card .card__content,
.card .card__information,
.card .card__inner,
.card__media,
.ocean-prod-wrapper [class*="bg-white"] .ocean-prod-img-container,
.ocean-grid-wrapper [class*="bg-white"] .ocean-prod-img-container,
.ocean-bento-card > *,
.trustpilot-review > * {
  background-color: transparent !important;
  background-image: none !important;
}

.card .card__inner .card__media img,
.ocean-prod-img,
.ocean-bento-card img {
  border-radius: 9px;
}

.card__heading,
.card__heading a,
.card-information .price,
.price,
.price__regular .price-item,
.ocean-prod-title,
.ocean-bento-card h3,
.trustpilot-review {
  color: var(--cocoa-text) !important;
}

.card .caption,
.card-information .caption,
.price__sale .price-item--sale,
.ocean-bento-card p,
.trustpilot-review .rte {
  color: var(--cocoa-text-2) !important;
}

/* ------------------------------------------------------------------
   Badges / tags
   ------------------------------------------------------------------ */
.badge,
.card__badge .badge,
.badge--sale,
.badge--sold-out,
.ocean-prod-wrapper [class*="bg-green-700"] {
  background-color: var(--cocoa-gold) !important;
  background-image: var(--cocoa-gradient-gold) !important;
  border-color: var(--cocoa-gold) !important;
  color: var(--cocoa-brown) !important;
  border-radius: 5px !important;
}

.facets__display,
.facets__summary,
.facets__price,
.facets__selected,
.facet-checkbox input[type="checkbox"] + span::before,
.facets__item input[type="checkbox"] + span::before {
  color: var(--cocoa-text);
  border-color: var(--cocoa-border) !important;
}

/* ------------------------------------------------------------------
   Forms & inputs
   ------------------------------------------------------------------ */
.field__input,
.select__select,
input,
textarea,
select {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: var(--cocoa-text) !important;
  border-radius: 5px !important;
}
.field__input::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(201, 185, 173, 0.7) !important;
}
.field__label {
  color: var(--cocoa-text-2);
}

/* product page + cart readable on cocoa */
.product__info-wrapper,
.product__description,
.main-product__content,
.cart__items,
.cart-drawer__footer,
.cart__footer {
  color: var(--cocoa-text);
}

.divider,
.product__info-wrapper .product__info-container > * + * {
  border-color: var(--cocoa-border) !important;
}

/* keep splide/dots/icons visible */
.splide__arrow,
.slider-button {
  color: var(--cocoa-gold) !important;
  background-color: rgba(43, 31, 24, 0.76) !important;
  border: 1px solid var(--cocoa-border) !important;
}

/* Trustpilot rating color */
.trustpilot-reviews .rating-stars svg,
.trustpilot-stars-svg {
  fill: var(--cocoa-gold) !important;
}