/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

:root{
  /* color palette */
  --brand:        #FFC45E;  /* banana yellow */
  --brand-700:    #F5A93F;  /* deeper banana for hover */
  --accent:       #6FD3E7;  /* aqua highlights */
  --coral:        #FF8FA3;  /* coral jellyfish */
  --peach:        #FFA676;  /* apricot cliffs */
  --mint:         #BFEED6;  /* minty foam */
  --seafoam:      #9FD7C4;  /* sea */
  --sand:         #F6E3A6;  /* sand rocks */
  --bg:           #FFF4E3;  /* warm cream background */
  --card:         #FFFFFF;
  --ink:          #47392E;  /* soft cocoa text (friendlier than pure black) */
  --muted:        #6B5F58;
  --border:       #EADCC8;
}


/* base */
body {
  background-image: linear-gradient(
    180deg,
    var(--bg) 0%,
    color-mix(in srgb, var(--seafoam) 18%, var(--bg)) 45%,
    color-mix(in srgb, var(--sand) 28%, var(--bg)) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
h1,h2,h3{ letter-spacing:.2px; }

/* header / top strip */
#header .header-nav,
#header .header-top{
  background:#fff !important;
  border-bottom:1px solid var(--border);
}
#header .header-nav a,
#header .header-top a{ color:var(--ink) !important; }

/* main menu: soft pills + mint hover */
.top-menu a{
  padding:.5rem .75rem; border-radius:12px; font-weight:600;
}
.top-menu a:hover{ background:var(--mint); color:#0f172a !important; }

/* global buttons incl. add-to-cart */
.btn, .btn-primary,
.ajax_add_to_cart_button, button[data-button-action="add-to-cart"]{
  border-radius:999px; font-weight:700;
  background:var(--brand); color:#fff !important; border:0;
  box-shadow:0 8px 18px rgba(245,169,63,.28);
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn:hover, .btn-primary:hover,
.ajax_add_to_cart_button:hover, button[data-button-action="add-to-cart"]:hover{
  background:var(--brand-700); transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(245,169,63,.34);
}

/* price emphasis */
#product .product-prices .current-price{
  font-size:1.9rem; font-weight:900; color:var(--brand);
}

/* product cards */
.product-miniature{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-miniature:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(17,24,39,.12);
  border-color:#e6dacb;
}
.product-miniature img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block;
}
.product-miniature .product-description{ padding:12px 14px 16px; }
.product-miniature .product-title a{
  color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.product-miniature .price{ color:var(--brand); font-weight:800; font-size:1.05rem; }
.product-miniature .regular-price{ color:var(--muted); text-decoration:line-through; }

/* flags */
.product-flags{ position:absolute; left:10px; top:10px; display:flex; gap:6px; z-index:2; }
.product-flag{ border-radius:999px; padding:.25rem .6rem; font-weight:700; font-size:.72rem; }
.product-flags .new{ background:var(--mint);  color:#0f5132; }
.product-flags .on-sale{ background:var(--coral); color:#540b2f; }

/* heart bubble */
button.addToWishlist, .wishlist-button{
  background:#fff; border:1px solid var(--border); border-radius:999px;
  width:36px; height:36px; display:grid; place-items:center;
  position:absolute; right:10px; top:10px; box-shadow:0 6px 16px rgba(17,24,39,.08);
}

/* inputs */
.form-control{ border:1px solid var(--border); border-radius:12px; }
.form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(255,196,94,.22);
}

/* breadcrumbs */
.breadcrumb{ background:transparent; }
.breadcrumb a, .breadcrumb li{ color:var(--muted); }

/* pagination */
.pagination .page-list li > a, .pagination .page-list li > span{
  border-radius:999px; border:1px solid var(--border); background:#fff;
}
.pagination .current a, .pagination .current span{
  background:var(--sand); border-color:var(--sand); font-weight:800;
}

/* Croissant cursor (SVG data URI) */
html, body {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><g fill="none" stroke="%237B4B2A" stroke-width="1.5"><path fill="%23FFE3B3" d="M7 22c-1.5-4.8.7-9.8 5.3-12.1C17 7 22.4 8.6 25.5 13c.6.8.2 2-.7 2.4-3.2 1.4-6 3.6-7.7 6.5-1 1.6-3 2.3-4.7 1.6-2-.8-4-.8-5.4-1.5z"/><path fill="%23FFD8B5" d="M27.8 14.2c1.4 2.2 1.8 5 .8 7.6-.3.9-1.4 1.3-2.3.8-1.7-1-3.8-1.4-6-1.2 1.6-2.6 4-4.8 7.5-7.2z"/><path d="M10.2 10.8c1.1.3 2 .9 2.8 1.7M12.4 8.6c1 .3 1.9.8 2.6 1.6"/></g></svg>') 6 6, auto;
}

/* footer */
.footer-container{ background:#fff; border-top:1px solid var(--border); }
.footer-container a{ color:#374151; }
.footer-container a:hover{ color:var(--brand); }

