/* =================================================================
   Lolly & Laine — "Pillow" personality layer
   Loaded after theme.css. Colours + fonts come from config/scss.json;
   this file adds the candy-rounded shapes, soft shadows and glassy
   header that settings can't express. Override-only — no template/JS
   changes, so all commerce keeps working.
   ================================================================= */

:root {
  --ll-accent: #a274cf;
  --ll-accent-soft: #f0e3fb;
  --ll-bg: #f5ecfb;
  --ll-ink: #483d52;
  --ll-ink-soft: #857a90;
  --ll-line: #e7ddec;
  --ll-surface: #ffffff;
  --ll-shadow: 0 20px 40px -22px rgba(140, 90, 200, 0.55);
  --ll-radius: 28px;
  --ll-radius-sm: 18px;
}

/* ---- typography safety net (in case theme.css specifies its own) ---- */
body, button, input, select, textarea, .btn {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.site-header__logo, .grid-link__title, .section-header h2, .featured-product__title {
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

body { background: var(--ll-bg); }

/* ---- buttons: candy pills with a soft drop ---- */
.btn,
.btn--outline,
.btn--secondary,
input[type="submit"],
button.btn,
.addToCartList,
.float-btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn,
input[type="submit"],
button.btn {
  box-shadow: 0 8px 0 -2px color-mix(in srgb, var(--ll-accent) 55%, #00000022);
}
.btn:hover,
input[type="submit"]:hover,
button.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 0 -2px color-mix(in srgb, var(--ll-accent) 55%, #00000022);
}
.btn:active { transform: translateY(0); }
.btn--outline {
  background: transparent !important;
  color: var(--ll-accent) !important;
  box-shadow: inset 0 0 0 2px var(--ll-accent) !important;
}
.btn--outline:hover { color: #fff !important; background: var(--ll-accent) !important; }

/* ---- glassy sticky header ---- */
.header-bar .header-bg-wrapper,
#es_header_bar .header-bg-wrapper {
  background: rgba(245, 236, 251, 0.9) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ll-line);
}
.header-bar a { font-weight: 600; }
.header-bar__cart-count,
.cart-count {
  background: var(--ll-accent) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* ---- announcement / topbar message ---- */
.header-message,
.announcement-bar,
.es-announcement {
  background: var(--ll-accent);
  color: #fff;
}

/* ---- product cards: rounded, soft, lift on hover ---- */
.product_grid-item,
.grid-link__container {
  border-radius: var(--ll-radius);
}
.product_grid-item .grid-link__image,
.grid-link__image--product,
.grid-link__image-centered,
.product_grid-item img,
.featured-product img,
.featured-single-product img {
  border-radius: var(--ll-radius) !important;
  overflow: hidden;
}
.product_grid-item {
  transition: transform .22s ease;
}
.product_grid-item:hover { transform: translateY(-5px); }
.grid-link__title { margin-top: 12px; }
.grid-link__meta { color: var(--ll-ink); font-weight: 800; }

/* ---- sale / sold-out badges: soft pill, accent ---- */
.badge--sale .badge__text,
.badge--sold-out .badge__text {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.badge--sale .badge__text { background: var(--ll-accent); color: #fff; }

/* ---- generic surfaces: images, cards, media in sections ---- */
.image-text-section img,
.video-section img,
.highlight-section img,
.parallax-section,
.testimonial-section .testimonial-slide,
.collection-grid-item img,
.search-result-grid img {
  border-radius: var(--ll-radius);
}

/* ---- form fields ---- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="password"],
select,
textarea {
  border-radius: 14px !important;
}
input[type="search"] { border-radius: 999px !important; }

/* ---- cart drawer + cart page polish ---- */
.cart-drawer,
.drawer,
#CartDrawer {
  border-top-left-radius: var(--ll-radius);
  border-bottom-left-radius: var(--ll-radius);
}
.cart-drawer .btn,
.ajaxcart__row .btn { border-radius: 999px !important; }

/* ---- links ---- */
a { color: inherit; }
.site-footer a:hover,
.header-bar a:hover { color: var(--ll-accent); }

/* ---- footer: clean white with hairline ---- */
.site-footer {
  background: var(--ll-surface);
  border-top: 1px solid var(--ll-line);
}

/* ---- scroll-to-top button ---- */
#scrollTopButton svg { fill: var(--ll-accent); }

/* =================================================================
   Core palette enforcement — applies even if EasyStore does NOT
   recompile theme.css from scss.json on upload. Keeps the Pillow
   look self-sufficient.
   ================================================================= */
body { background: var(--ll-bg) !important; color: var(--ll-ink); }

/* primary (filled) buttons → lilac */
.btn:not(.btn--outline):not(.btn--secondary):not(.btn--link),
.addToCartList,
.float-btn,
input[type="submit"],
button.btn:not(.btn--outline) {
  background: var(--ll-accent) !important;
  color: #fff !important;
}

/* headings + text */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4 { color: var(--ll-ink) !important; }
.grid-link__title, .grid-link__meta { color: var(--ll-ink) !important; }

/* sale-percent chip + checkout button accent */
.grid-link__sale_price-percent { background: var(--ll-accent); color: #fff; }
.header-bar__nav-checkout, .btn--checkout {
  background: var(--ll-accent) !important; color: #fff !important;
}

/* nav + footer link hovers already lilac; keep base text readable */
.header-bar a, .site-nav a, .site-footer a, .mobile-nav a { color: var(--ll-ink); }

/* =================================================================
   Product page (PDP) polish — Phase 4. CSS-only, no markup changes,
   so all variant/add-to-cart logic stays intact.
   ================================================================= */
body.template-product .product-single__hero { gap: 44px; align-items: flex-start; }

/* gallery: round the big image + thumbnails (was 0px) */
body.template-product #ProductPhoto img,
body.template-product .product-flexslider img,
body.template-product .slide-img img {
  border-radius: var(--ll-radius) !important; overflow: hidden;
}
body.template-product .flex-control-thumbs li img,
body.template-product .flex-control-nav li img { border-radius: 14px !important; }

/* title + price prominence */
body.template-product .product_option-detail h1 { font-size: 40px; line-height: 1.08; margin-bottom: 6px; }
body.template-product .product-single__price {
  font-size: 26px !important; font-weight: 800 !important; color: var(--ll-accent) !important;
}

/* quantity stepper → rounded pill */
body.template-product .cart-qty-adjust {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--ll-line); border-radius: 999px; overflow: hidden;
}
body.template-product .product-single__btn-qty-adjust {
  width: 42px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--ll-ink); font-size: 17px; user-select: none;
}
body.template-product .product-single__btn-qty-adjust:hover { background: var(--ll-accent-soft); color: var(--ll-accent); }
body.template-product .quantity-selector {
  border: none !important; width: 50px; text-align: center; font-weight: 800; color: var(--ll-ink);
  -moz-appearance: textfield;
}
body.template-product .quantity-selector::-webkit-outer-spin-button,
body.template-product .quantity-selector::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* add-to-cart: full width, prominent pill */
body.template-product #AddToCart.addToCart-btn,
body.template-product .addToCart-btn:not(.top-addToCart-btn):not(.btn-back-home) {
  width: 100%; justify-content: center; padding: 16px 24px; font-size: 15px; margin-top: 10px;
}

/* option tag pills: gentle hover (selected state kept from theme) */
body.template-product .option_tags-wrapper label { transition: all .15s ease; }
body.template-product .option_tags-wrapper label:hover { border-color: var(--ll-accent); color: var(--ll-accent); }

/* description tables / sections: soften */
body.template-product .product-single__description table { border-radius: 12px; overflow: hidden; }

/* you-may-also-like: round related product imagery */
body.template-product .related-products img,
body.template-product .related-product-items img { border-radius: var(--ll-radius) !important; }

/* Header logo — match the existing design (smaller). Footer logo (.ll-foot-logo) unaffected. */
.site-header__logo img,
.logo-header img,
.header-bar .logo-wrapper img {
  height: 54px !important;
  width: auto !important;
  max-width: 160px !important;
}