/*
 * Tie The Ends — brand CSS layer ("Kiddy"/purple visual system).
 *
 * Ports docs/design/homepage-mockup.html onto Blocksy + WooCommerce markup.
 * Colors/spacing/radius/shadow/motion come ONLY from theme.json presets
 * (--wp--preset--color--*, --wp--preset--font-family--*, --wp--preset--spacing--*)
 * and assets/css/tokens.css (--tte-*). No hardcoded hex anywhere in this file.
 *
 * Cascade note (see tokens.css header comment for the full story): Blocksy's
 * compiled stylesheets (ct-main-styles-css, ct-woocommerce-styles-css, and the
 * per-page ct-main-styles-inline-css block) are enqueued AFTER this file but
 * drive buttons/badges/notices off their OWN --theme-* / --badge-* custom
 * properties, which wins the cascade at equal-or-higher specificity. Wherever
 * that happens we re-assert with the matching --wp--preset--*/--tte-* var
 * + !important, scoped tightly to the exact colliding selector — never a
 * hardcoded value.
 */

/* =========================================================================
   1. Base rhythm + layout helpers
   ========================================================================= */

:root {
  --tte-section-pad-y: var(--wp--preset--spacing--60); /* 48px mobile */
}

@media (min-width: 1024px) {
  :root {
    --tte-section-pad-y: var(--wp--preset--spacing--80); /* 96px desktop */
  }
}

.tte-wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--40);
}

.tte-section {
  padding-block: var(--tte-section-pad-y);
}

/* A brand motif (blob/divider) must never be the thing that introduces
   horizontal scroll on small screens. */
html,
body {
  overflow-x: hidden;
}

/* =========================================================================
   2. Section bands
   ========================================================================= */

.tte-band-bg {
  background: var(--wp--preset--color--bg);
}

.tte-band-lavender {
  background: var(--wp--preset--color--lavender);
}

.tte-band-mist {
  background: var(--wp--preset--color--mist);
}

.tte-band-plum {
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--surface);
}

/* the CTA band gradient from the mockup — used sparingly */
.tte-band-cta {
  background: linear-gradient(
    120deg,
    var(--wp--preset--color--grape),
    var(--wp--preset--color--orchid)
  );
  color: var(--wp--preset--color--surface);
  border-radius: var(--tte-r-card);
}

/* =========================================================================
   3. Buttons — pill, grape primary, ghost, focus ring, full-width mobile
   ========================================================================= */

/* Reusable brand button classes for patterns (Task 5+) */
.tte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1;
  min-height: 44px;
  padding: 0.85rem 1.6rem;
  border-radius: var(--tte-r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--tte-dur) var(--tte-ease), box-shadow var(--tte-dur) var(--tte-ease),
    background-color var(--tte-dur) var(--tte-ease);
}

.tte-btn-primary {
  background: var(--wp--preset--color--grape);
  color: var(--wp--preset--color--white);
  box-shadow: var(--tte-shadow-sm);
}
.tte-btn-primary:hover {
  background: color-mix(in srgb, var(--wp--preset--color--grape) 94%, black);
}

.tte-btn-secondary {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--lilac);
}

.tte-btn-ghost {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--lilac);
}
.tte-btn-ghost:hover {
  border-color: var(--wp--preset--color--orchid);
  color: var(--wp--preset--color--orchid);
}

.tte-btn-link {
  color: var(--wp--preset--color--orchid);
}
.tte-btn-link:hover {
  text-decoration: underline;
}

.tte-btn:focus-visible,
.tte-btn-primary:focus-visible,
.tte-btn-secondary:focus-visible,
.tte-btn-ghost:focus-visible {
  outline: none;
  box-shadow: var(--tte-focus);
}

/* --- Re-assert brand pill on real WordPress/WooCommerce button markup ---
   Blocksy's compiled CSS drives .wp-block-button__link / .woocommerce .button
   / .single_add_to_cart_button off --theme-button-border-radius (falls back
   to 3px) and --theme-button-background-initial-color (its own blue), and it
   loads after this file — so these need !important. */
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
.add_to_cart_button,
.checkout .button,
#place_order {
  border-radius: var(--tte-r-pill) !important;
  background-color: var(--wp--preset--color--grape) !important;
  color: var(--wp--preset--color--white) !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
  min-height: 44px !important;
}

.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce input.button:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.checkout .button:hover,
#place_order:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--grape) 94%, black) !important;
  color: var(--wp--preset--color--white) !important;
}

.wp-block-button__link:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.single_add_to_cart_button:focus-visible,
.add_to_cart_button:focus-visible,
#place_order:focus-visible {
  outline: none;
  box-shadow: var(--tte-focus) !important;
}

/* Secondary/ghost WooCommerce actions ("Continue shopping", quantity +/- etc.)
   keep the WHITE + border look rather than solid grape, so the primary CTA
   still reads as the one action per screen. */
.woocommerce a.button.wc-backward,
.woocommerce a.added_to_cart {
  background-color: var(--wp--preset--color--surface) !important;
  color: var(--wp--preset--color--grape) !important;
  border: 2px solid var(--wp--preset--color--lilac) !important;
}

/* Full-width pill CTAs on mobile (product card add-to-cart, single add-to-cart) */
@media (max-width: 767.98px) {
  .woocommerce ul.products li.product .add_to_cart_button,
  .woocommerce div.product form.cart .single_add_to_cart_button {
    width: 100%;
  }
}

/* =========================================================================
   4. Cards
   ========================================================================= */

.tte-card {
  background: var(--wp--preset--color--surface);
  border-radius: var(--tte-r-card);
  box-shadow: var(--tte-shadow-sm);
  padding: var(--wp--preset--spacing--40);
  transition: box-shadow var(--tte-dur) var(--tte-ease), transform var(--tte-dur) var(--tte-ease);
}

.tte-card:hover {
  box-shadow: var(--tte-shadow-md);
}

.tte-hero-card {
  background: var(--wp--preset--color--surface);
  border-radius: var(--tte-r-card);
  box-shadow: var(--tte-shadow-md);
  padding: var(--wp--preset--spacing--20);
  transform: rotate(-2deg);
}

/* =========================================================================
   5. WooCommerce — shop grid product cards
   ========================================================================= */

.woocommerce ul.products li.product {
  background: var(--wp--preset--color--surface);
  border-radius: var(--tte-r-card) !important;
  box-shadow: var(--tte-shadow-sm);
  padding: var(--wp--preset--spacing--20);
  transition: box-shadow var(--tte-dur) var(--tte-ease), transform var(--tte-dur) var(--tte-ease);
}

.woocommerce ul.products li.product:hover {
  box-shadow: var(--tte-shadow-md);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product img {
  border-radius: var(--tte-r-img) !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display) !important;
  color: var(--wp--preset--color--plum);
}

.woocommerce ul.products li.product .price,
.woocommerce .price {
  font-family: var(--wp--preset--font-family--display) !important;
  color: var(--wp--preset--color--ink) !important;
}

.woocommerce ul.products li.product .price del,
.woocommerce .price del {
  color: var(--wp--preset--color--muted) !important;
  opacity: 1 !important;
  font-weight: 600;
}

.woocommerce ul.products li.product .price ins,
.woocommerce .price ins {
  text-decoration: none;
}

/* Sale badge — a rose pill, top-left (matches the mockup's "−22%" badge) */
.woocommerce span.onsale,
.woocommerce .onsale {
  background-color: var(--wp--preset--color--rose) !important;
  color: var(--wp--preset--color--white) !important;
  border-radius: var(--tte-r-pill) !important;
  font-family: var(--wp--preset--font-family--display) !important;
  font-weight: 600 !important;
}

/* Star ratings — honey, via Blocksy's own custom props (safe: nothing after
   this file re-sets --star-rating-initial-color) */
.woocommerce .star-rating {
  --star-rating-initial-color: var(--wp--preset--color--honey);
  --star-rating-inactive-color: var(--wp--preset--color--lilac);
}

/* In-stock / cash-on-delivery style messaging → mint */
.woocommerce .stock.in-stock,
.woocommerce .ct-woo-card-stock.in-stock {
  color: var(--wp--preset--color--mint) !important;
  font-weight: 700;
}

/* =========================================================================
   6. WooCommerce — notices
   ========================================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce ul.woocommerce-error {
  background: var(--wp--preset--color--mist) !important;
  color: var(--wp--preset--color--ink) !important;
  border-radius: var(--tte-r-input) !important;
  border: 1px solid var(--wp--preset--color--lilac);
}

.woocommerce-info {
  background: var(--wp--preset--color--lavender) !important;
}

.woocommerce-error,
.woocommerce ul.woocommerce-error {
  background: color-mix(in srgb, var(--wp--preset--color--rose) 16%, var(--wp--preset--color--surface)) !important;
  border-color: var(--wp--preset--color--rose);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--wp--preset--color--grape) !important;
}

/* =========================================================================
   7. WooCommerce — single product summary + trust strip
   ========================================================================= */

.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--tte-r-img);
  overflow: hidden;
}

.woocommerce div.product .entry-summary .product_title,
.woocommerce div.product .entry-summary .entry-title {
  font-family: var(--wp--preset--font-family--display) !important;
  color: var(--wp--preset--color--plum);
}

.woocommerce div.product .entry-summary .price {
  font-family: var(--wp--preset--font-family--display) !important;
  font-size: 1.5rem !important;
  color: var(--wp--preset--color--ink) !important;
}

.woocommerce div.product .entry-summary .star-rating {
  --star-rating-initial-color: var(--wp--preset--color--honey);
  --star-rating-inactive-color: var(--wp--preset--color--lilac);
}

/* Description/Additional info/Reviews tabs — active indicator + label */
.woocommerce-tabs ul.tabs li.active:before {
  background: var(--wp--preset--color--grape) !important;
}
.woocommerce-tabs ul.tabs li.active a {
  color: var(--wp--preset--color--grape) !important;
}

/* Trust strip — a reusable row of trust markers (COD · delivery · WhatsApp ·
   certificate) that patterns/single-product templates can drop under the
   add-to-cart form. CSS-only for now; content is wired up when the patterns
   land (Task 5+). */
.tte-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30);
  margin-top: var(--wp--preset--spacing--40);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid var(--wp--preset--color--lilac);
}

.tte-trust-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--wp--preset--font-family--body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--wp--preset--color--muted);
}

.tte-trust-item.is-mint {
  color: var(--wp--preset--color--mint);
}

/* =========================================================================
   8. Header / footer polish hooks (Blocksy)
   ========================================================================= */

.ct-header {
  border-bottom: 1px solid var(--wp--preset--color--lilac);
}

.ct-header .site-logo-container img {
  border-radius: var(--tte-r-card);
  box-shadow: var(--tte-shadow-sm);
}

.ct-header [data-id="menu"] > ul > li > a {
  font-family: var(--wp--preset--font-family--body) !important;
  font-weight: 700 !important;
}

.ct-header [data-id="menu"] > ul > li > a:hover {
  color: var(--wp--preset--color--grape) !important;
}

/* Blocksy colors the active nav item via --theme-link-active-color, which
   falls back to its own (blue) --theme-link-hover-color when unset. */
.ct-header [data-id="menu"] li[class*="current-menu-"] > a {
  color: var(--wp--preset--color--grape) !important;
}

.ct-header a:hover {
  color: var(--wp--preset--color--grape);
}

.ct-header-cart:hover,
.ct-header [data-id="cart-icon"]:hover {
  color: var(--wp--preset--color--grape);
}

.ct-footer {
  background-color: var(--wp--preset--color--plum) !important;
  color: var(--wp--preset--color--mist) !important;
}

.ct-footer a {
  color: var(--wp--preset--color--lilac) !important;
}

.ct-footer a:hover {
  color: var(--wp--preset--color--surface) !important;
}

.ct-footer .widget-title {
  font-family: var(--wp--preset--font-family--display) !important;
  color: var(--wp--preset--color--surface) !important;
}

/* Footer Shop/Help/Follow link columns (Custom HTML widgets seeded by
   scripts/seed-blocksy-config.sh) render as bare concatenated <a> tags with
   no wrapper markup between them, so they run together on one line. Stack
   them with spacing. Scoped to `.textwidget.custom-html-widget` (the footer
   widget content wrapper) and excludes `.tte-btn` so the WhatsApp pill
   button in the brand column (widget-area-1) stays an inline button, not a
   full-width block. */
.ct-footer .textwidget.custom-html-widget a:not(.tte-btn) {
  display: block;
  margin: 7px 0;
}

/* =========================================================================
   9. Brand motifs — string divider, bow, blobs, sparkles
   ========================================================================= */

/* Hand-drawn string divider between sections (assets/img/string-divider.svg).
   Uses a CSS mask so the (stroke-based) SVG can be tinted via background-
   color instead of being locked to whatever color it was exported in. */
.tte-string-divider {
  display: block;
  width: 100%;
  height: 48px;
  margin-inline: auto;
  max-width: 1200px;
  background-color: var(--wp--preset--color--lilac);
  -webkit-mask: url("../img/string-divider.svg") no-repeat center / contain;
  mask: url("../img/string-divider.svg") no-repeat center / contain;
}

/* The bow alone, as a small bullet/accent mark */
.tte-bow {
  display: inline-block;
  width: 1.2em;
  height: 1em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("../img/bow.svg") no-repeat center / contain;
  mask: url("../img/bow.svg") no-repeat center / contain;
}

/* Soft organic blobs behind hero/CTA art — decorative, aria-hidden in markup */
.tte-blob {
  position: absolute;
  z-index: -1;
  border-radius: 46% 54% 60% 40% / 47% 46% 54% 53%;
  background: var(--wp--preset--color--lavender);
  opacity: 0.9;
  pointer-events: none;
}

.tte-blob.is-mist {
  background: var(--wp--preset--color--mist);
}

/* Tiny sparkle accents near headings */
.tte-sparkle {
  display: inline-block;
  color: var(--wp--preset--color--honey);
  font-size: 1.4em;
  line-height: 1;
}

.tte-sparkle.is-orchid {
  color: var(--wp--preset--color--orchid);
}

/* =========================================================================
   10. Motion — everything above wrapped in reduced-motion off-switch
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .tte-btn,
  .tte-btn-primary,
  .tte-card,
  .tte-hero-card,
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .single_add_to_cart_button,
  .add_to_cart_button,
  .woocommerce ul.products li.product {
    transition: none !important;
    transform: none !important;
  }

  .woocommerce ul.products li.product:hover {
    transform: none !important;
  }
}

/* =========================================================================
   11. Responsive — 768 / 1024 breakpoints
   ========================================================================= */

.tte-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--40);
  align-items: stretch;
}

.tte-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--30);
  align-items: stretch;
}

/* Equal-height cards: each grid item fills its (stretched) row cell, so tiles
   with shorter copy still match their taller siblings. Inner flex-column +
   justify-between keeps the CTA pinned to the bottom. */
.tte-grid-3 > *,
.tte-grid-4 > * {
  height: 100%;
}

@media (min-width: 768px) {
  .tte-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tte-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .tte-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767.98px) {
  .tte-trust-strip {
    gap: var(--wp--preset--spacing--20);
  }
}

/* Footer grid — the whole footer is one Custom HTML widget (seed-blocksy-config.sh);
   we lay out the columns ourselves because Blocksy's footer columns stacked. */
.ct-footer .tte-footer{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:28px 40px;
  align-items:start;
}
.ct-footer .tte-footer-logo{ height:30px; width:auto; margin-bottom:12px; display:block; }
.ct-footer .tte-footer-blurb{
  color:var(--wp--preset--color--mist); opacity:.82;
  max-width:24rem; margin:0 0 16px; font-size:.95rem;
}
.ct-footer .tte-footer-col h5{
  font-family:var(--wp--preset--font-family--display);
  font-size:1rem; font-weight:700; color:#fff; margin:0 0 10px;
}
.ct-footer .tte-footer-col a{
  display:block; color:var(--wp--preset--color--mist); opacity:.82;
  text-decoration:none; margin:8px 0; font-size:.95rem;
}
.ct-footer .tte-footer-col a:hover{ opacity:1; }
.ct-footer .tte-footer-wa{ margin-top:2px; }
@media (max-width:900px){
  .ct-footer .tte-footer{ grid-template-columns:1fr 1fr; }
  .ct-footer .tte-footer-brand{ grid-column:1 / -1; }
}
@media (max-width:520px){ .ct-footer .tte-footer{ grid-template-columns:1fr; } }

/* Footer copyright — Blocksy renders it dark by default; lighten for the plum bg. */
.ct-footer .ct-footer-copyright{
  color:var(--wp--preset--color--mist);
  opacity:.72;
  font-size:.85rem;
}
.ct-footer .ct-footer-copyright a{ color:var(--wp--preset--color--mist); }

/* Footer breathing room — keep content off the top/bottom edges of the plum band. */
.ct-footer{
  padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
}