/*
 * Sweet BakeArt — visual polish layer
 * Purpose: make every public-facing page feel more premium without
 * changing the brand palette, page content, or underlying functionality.
 */

:root {
  --polish-maroon: #852d38;
  --polish-rose: #f5c5d9;
  --polish-peach: #e8beba;
  --polish-cream: #fae6be;
  --polish-lilac: #c5bed3;
  --polish-blue: #c5dbe9;
  --polish-ink: #6f3340;
  --polish-soft: #fffafb;
  --polish-border: rgba(133, 45, 56, 0.12);
  --polish-shadow: 0 22px 60px rgba(73, 31, 45, 0.12);
  --polish-shadow-hover: 0 28px 70px rgba(73, 31, 45, 0.18);
  --polish-radius: 24px;
  --polish-ease: cubic-bezier(.2,.75,.2,1);
}

body:not(.page-admin):not(.page-admin-add):not(.page-admin-orders) {
  background:
    radial-gradient(circle at 6% 12%, rgba(245,197,217,.22), transparent 24rem),
    radial-gradient(circle at 94% 30%, rgba(197,219,233,.22), transparent 26rem),
    linear-gradient(180deg, #fffafb 0%, #fdf7fa 100%) !important;
}

/* Thin brand progress indicator */
.polish-progress {
  position: fixed;
  z-index: 12000;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  background: rgba(255,255,255,.14);
}

.polish-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--polish-maroon), var(--polish-rose), var(--polish-blue));
  box-shadow: 0 0 16px rgba(133,45,56,.35);
  transition: width 80ms linear;
}

/* ------------------------------------------------------------
   Navbar refinement
   ------------------------------------------------------------ */
header.navbar .cart-icon,
header.navbar .menu-toggle {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow: 0 12px 32px rgba(62,33,43,.13) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .3s var(--polish-ease), box-shadow .3s var(--polish-ease), background .3s ease !important;
}

header.navbar .cart-icon:hover,
header.navbar .menu-toggle:hover {
  transform: translateY(-3px) scale(1.03);
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 38px rgba(62,33,43,.18) !important;
}

header.navbar .logo img {
  filter: drop-shadow(0 10px 20px rgba(81,38,52,.12));
  transition: width .35s var(--polish-ease), height .35s var(--polish-ease), filter .35s ease !important;
}

header.navbar .nav-links a {
  isolation: isolate;
  transition: transform .25s var(--polish-ease), background .25s ease, color .25s ease !important;
}

header.navbar .nav-links a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 6px;
  border-radius: 999px;
  opacity: 0;
  transform: scale(.86);
  background: rgba(255,255,255,.5);
  box-shadow: 0 8px 24px rgba(91,44,58,.08);
  transition: opacity .25s ease, transform .25s var(--polish-ease);
}

header.navbar .nav-links a:hover::before {
  opacity: 1;
  transform: scale(1);
}

header.navbar.polish-scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: rgba(255,250,251,.86) !important;
  border-bottom: 1px solid rgba(133,45,56,.08) !important;
  box-shadow: 0 16px 45px rgba(76,38,51,.11) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  animation: polishNavIn .38s var(--polish-ease) both;
}

header.navbar.polish-scrolled .nav-container {
  min-height: 76px !important;
  padding-top: .2rem !important;
  padding-bottom: .2rem !important;
}

header.navbar.polish-scrolled .logo img {
  width: 76px !important;
  height: 76px !important;
}

@keyframes polishNavIn {
  from { transform: translateY(-105%); opacity: .4; }
  to { transform: translateY(0); opacity: 1; }
}

/* ------------------------------------------------------------
   Hero refinement
   ------------------------------------------------------------ */
.hero-wrapper,
body.page-index > div[style*="position:relative"] {
  position: relative;
}

.hero {
  isolation: isolate;
  background: #e9d8dc;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 3;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
  opacity: .65;
}

.hero::before {
  width: clamp(130px, 18vw, 260px);
  height: clamp(130px, 18vw, 260px);
  left: -5%;
  bottom: 7%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.48), rgba(245,197,217,.12) 58%, transparent 70%);
  animation: polishFloat 8s ease-in-out infinite;
}

.hero::after {
  width: clamp(120px, 16vw, 230px);
  height: clamp(120px, 16vw, 230px);
  right: -3%;
  top: 13%;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.42), rgba(197,219,233,.14) 60%, transparent 72%);
  animation: polishFloat 10s ease-in-out -2s infinite reverse;
}

@keyframes polishFloat {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-16px,0) scale(1.04); }
}

.hero-slider img.active {
  animation: polishKenBurns 16s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes polishKenBurns {
  from { transform: scale(1.01) translate3d(0,0,0); }
  to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}

.hero-overlay {
  background:
    radial-gradient(800px 500px at 15% 20%, rgba(245,197,217,.46), transparent 62%),
    radial-gradient(760px 500px at 84% 22%, rgba(197,219,233,.34), transparent 62%),
    linear-gradient(115deg, rgba(255,246,248,.62), rgba(251,221,206,.54) 42%, rgba(226,222,238,.55) 72%, rgba(220,237,246,.58)) !important;
}

.hero-content {
  position: relative;
  z-index: 5;
  padding: clamp(1.45rem, 3.5vw, 2.55rem) clamp(1.25rem, 4vw, 3.1rem);
  border: 1px solid rgba(255,255,255,.58);
  border-radius: clamp(22px, 3vw, 34px);
  background: linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.22));
  box-shadow: 0 30px 80px rgba(78,39,52,.16), inset 0 1px 0 rgba(255,255,255,.58);
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

.hero-title {
  position: relative;
  text-shadow: 0 2px 0 rgba(255,255,255,.28);
  letter-spacing: -.025em;
}

.hero-title::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin: .72rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--polish-maroon), var(--polish-rose), var(--polish-blue));
  box-shadow: 0 6px 16px rgba(133,45,56,.2);
}

.hero-subtitle {
  text-wrap: balance;
}

.hero-actions .btn,
.hero-actions .btn-hero,
.hero-actions .btn-hero-ghost,
.btn-submit,
.btn,
.filter-btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.hero-actions .btn::after,
.hero-actions .btn-hero::after,
.hero-actions .btn-hero-ghost::after,
.btn-submit::after,
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.36) 48%, transparent 66%);
  transform: translateX(-125%);
  transition: transform .7s var(--polish-ease);
  pointer-events: none;
}

.hero-actions .btn:hover::after,
.hero-actions .btn-hero:hover::after,
.hero-actions .btn-hero-ghost:hover::after,
.btn-submit:hover::after,
.btn:hover::after {
  transform: translateX(125%);
}

/* Inner pages should feel intentional rather than like a full-screen panel. */
body.page-about .hero,
body.page-gallery .hero,
body.page-shop .hero,
body.page-contact .hero {
  height: clamp(560px, 72vh, 760px) !important;
  min-height: 560px !important;
  border-radius: 0 0 42px 42px;
  box-shadow: 0 26px 65px rgba(72,34,48,.14);
}

body.page-about .hero-content,
body.page-gallery .hero-content,
body.page-shop .hero-content,
body.page-contact .hero-content {
  max-width: 780px !important;
}

/* ------------------------------------------------------------
   Content sections and cards
   ------------------------------------------------------------ */
main,
section:not(.hero) {
  position: relative;
}

.section-title,
.page-title,
.contact-page h2,
.map-card h2,
.shop-page h2,
.gallery-page h2,
.about-page h2 {
  letter-spacing: -.02em;
  text-wrap: balance;
}

.section-title::after,
.page-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  margin: .8rem auto 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--polish-rose), var(--polish-maroon), var(--polish-blue));
}

.feature-card,
.why-card,
.product-card,
.about-feature-item,
.founder-block,
.contact-form-container,
.contact-info,
.map-card,
.cart-panel,
.summary-panel,
.detail-card,
.newsletter-box,
.review-card,
.testimonial-card,
.gallery-item,
.auth-card,
.admin-card,
.admin-form-container,
.orders-container {
  border: 1px solid var(--polish-border) !important;
  box-shadow: var(--polish-shadow) !important;
  transition: transform .35s var(--polish-ease), box-shadow .35s var(--polish-ease), border-color .35s ease !important;
}

.feature-card:hover,
.why-card:hover,
.product-card:hover,
.about-feature-item:hover,
.contact-form-container:hover,
.contact-info:hover,
.map-card:hover,
.review-card:hover,
.testimonial-card:hover,
.gallery-item:hover {
  transform: translateY(-7px);
  border-color: rgba(133,45,56,.2) !important;
  box-shadow: var(--polish-shadow-hover) !important;
}

.feature-card,
.product-card,
.gallery-item,
.gallery-preview-grid a,
.instagram-grid a,
.about-preview-image,
.founder-image,
.detail-image,
.map-wrap {
  overflow: hidden;
}

.feature-card img,
.product-card img,
.gallery-item img,
.gallery-preview-grid img,
.instagram-grid img,
.about-preview-image img,
.founder-image img,
.detail-image img {
  transition: transform .7s var(--polish-ease), filter .5s ease !important;
}

.feature-card:hover img,
.product-card:hover img,
.gallery-item:hover img,
.gallery-preview-grid a:hover img,
.instagram-grid a:hover img,
.about-preview-image:hover img,
.founder-image:hover img {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.02);
}

.why-icon,
.about-feature-item i,
.info-row i {
  box-shadow: 0 12px 30px rgba(133,45,56,.13);
}

/* Contact page — turn the practical content into a premium composition. */
body.page-contact .contact-page {
  padding-top: clamp(3rem, 7vw, 5rem) !important;
}

body.page-contact .contact-content {
  align-items: stretch;
}

body.page-contact .contact-form-container,
body.page-contact .contact-info,
body.page-contact .map-card {
  position: relative;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg, rgba(245,197,217,.7), rgba(250,230,190,.55), rgba(197,219,233,.7)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: var(--polish-radius) !important;
}

body.page-contact .contact-form-container::before,
body.page-contact .contact-info::before,
body.page-contact .map-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 5px;
  border-radius: var(--polish-radius) var(--polish-radius) 0 0;
  background: linear-gradient(90deg, var(--polish-maroon), var(--polish-rose), var(--polish-blue));
  opacity: .85;
}

body.page-contact .contact-form input,
body.page-contact .contact-form textarea {
  background: #fffdfd !important;
  border-color: rgba(133,45,56,.13) !important;
  box-shadow: inset 0 1px 2px rgba(80,35,49,.025);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

body.page-contact .contact-form input:focus,
body.page-contact .contact-form textarea:focus {
  transform: translateY(-1px);
  border-color: rgba(133,45,56,.42) !important;
  box-shadow: 0 0 0 4px rgba(245,197,217,.3), 0 14px 30px rgba(80,35,49,.08) !important;
}

body.page-contact .info-row {
  padding: .82rem .9rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,197,217,.17), rgba(197,219,233,.12));
  border: 1px solid rgba(133,45,56,.07);
}

body.page-contact .info-row i {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-top: 0 !important;
  background: #fff;
}

body.page-contact .hours-row {
  padding: .65rem .8rem;
  border-radius: 12px;
  background: #fffafb;
  border: 1px solid rgba(133,45,56,.07);
}

body.page-contact .map-wrap {
  border-radius: 18px !important;
}

/* Shop filters */
.filters {
  padding: .55rem !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(133,45,56,.09);
  box-shadow: 0 16px 45px rgba(73,31,45,.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.filter-btn {
  border-radius: 14px !important;
  transition: transform .25s var(--polish-ease), box-shadow .25s ease, background .25s ease !important;
}

.filter-btn:hover {
  transform: translateY(-2px);
}

/* Gallery */
.gallery-item {
  border-radius: 20px !important;
}

.gallery-item::after {
  content: "View";
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: .42rem .72rem;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  color: var(--polish-maroon);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .03em;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity .3s ease, transform .3s var(--polish-ease);
  backdrop-filter: blur(8px);
}

.gallery-item:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Cart and product detail */
.cart-panel,
.summary-panel,
.detail-card {
  border-radius: var(--polish-radius) !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.summary-panel {
  background:
    radial-gradient(circle at 85% 0%, rgba(245,197,217,.25), transparent 38%),
    rgba(255,255,255,.94) !important;
}

/* Footer refinement */
.footer {
  border-radius: 36px 36px 0 0;
  box-shadow: 0 -20px 55px rgba(57,27,41,.11);
}

.footer-section a {
  transition: transform .25s var(--polish-ease), color .25s ease, opacity .25s ease !important;
}

.footer-section li a:hover {
  display: inline-block;
  transform: translateX(4px);
}

.social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* Authentication and admin pages */
body.page-login,
body.page-register,
body.page-forgot {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 15% 15%, rgba(245,197,217,.5), transparent 28rem),
    radial-gradient(circle at 85% 85%, rgba(197,219,233,.5), transparent 28rem),
    #fffafb !important;
}

body.page-login .auth-container,
body.page-register .auth-container,
body.page-forgot .auth-container,
body.page-login form,
body.page-register form,
body.page-forgot form {
  border-radius: 24px !important;
  box-shadow: var(--polish-shadow) !important;
}

body.page-admin,
body.page-admin-add,
body.page-admin-orders {
  background: linear-gradient(180deg, #fffafb, #f7eff2) !important;
}

/* ------------------------------------------------------------
   Scroll reveal system
   ------------------------------------------------------------ */
.polish-js .polish-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0) scale(.988);
  transition:
    opacity .72s var(--polish-ease),
    transform .72s var(--polish-ease);
  transition-delay: var(--polish-delay, 0ms);
}

.polish-js .polish-reveal.polish-visible {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

/* ------------------------------------------------------------
   Responsive visual refinements
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  header.navbar.polish-scrolled .nav-container {
    min-height: 74px !important;
  }

  header.navbar.polish-scrolled .logo img {
    width: 62px !important;
    height: 62px !important;
    max-width: 62px !important;
    max-height: 62px !important;
  }

  body.page-about .hero,
  body.page-gallery .hero,
  body.page-shop .hero,
  body.page-contact .hero {
    height: clamp(520px, 68svh, 650px) !important;
    min-height: 520px !important;
    border-radius: 0 0 32px 32px;
  }

  body.page-about .hero-overlay,
  body.page-gallery .hero-overlay,
  body.page-shop .hero-overlay,
  body.page-contact .hero-overlay {
    padding-top: 7rem !important;
    padding-bottom: 2.2rem !important;
  }

  .hero-content {
    width: min(100% - 32px, 720px) !important;
  }
}

@media (max-width: 600px) {
  .hero::before { left: -22%; bottom: 3%; }
  .hero::after { right: -20%; top: 14%; }

  body.page-about .hero,
  body.page-gallery .hero,
  body.page-shop .hero,
  body.page-contact .hero {
    height: 510px !important;
    min-height: 510px !important;
    max-height: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 26px 26px;
  }

  body.page-about .hero-overlay,
  body.page-gallery .hero-overlay,
  body.page-shop .hero-overlay,
  body.page-contact .hero-overlay {
    padding: 6.3rem .85rem 2rem !important;
  }

  body.page-about .hero-content,
  body.page-gallery .hero-content,
  body.page-shop .hero-content,
  body.page-contact .hero-content {
    width: calc(100% - 8px) !important;
    padding: 1.35rem 1.05rem !important;
    border-radius: 22px !important;
    backdrop-filter: blur(8px) saturate(1.06);
  }

  body.page-about .hero-title,
  body.page-gallery .hero-title,
  body.page-shop .hero-title,
  body.page-contact .hero-title {
    font-size: clamp(2rem, 10vw, 2.45rem) !important;
  }

  body.page-about .hero-subtitle,
  body.page-gallery .hero-subtitle,
  body.page-shop .hero-subtitle,
  body.page-contact .hero-subtitle {
    font-size: .94rem !important;
    line-height: 1.55 !important;
    margin-bottom: .25rem !important;
  }

  .feature-card:hover,
  .why-card:hover,
  .product-card:hover,
  .about-feature-item:hover,
  .contact-form-container:hover,
  .contact-info:hover,
  .map-card:hover,
  .review-card:hover,
  .testimonial-card:hover,
  .gallery-item:hover {
    transform: none;
  }

  .gallery-item::after { display: none; }

  body.page-contact .contact-form-container,
  body.page-contact .contact-info,
  body.page-contact .map-card {
    border-radius: 20px !important;
  }

  body.page-contact .info-row {
    padding: .72rem;
  }

  .footer {
    border-radius: 26px 26px 0 0;
  }
}

@media (max-width: 390px) {
  body.page-about .hero,
  body.page-gallery .hero,
  body.page-shop .hero,
  body.page-contact .hero {
    height: 490px !important;
    min-height: 490px !important;
  }

  body.page-contact .hero-content {
    padding: 1.15rem .9rem !important;
  }

  body.page-contact .hero-subtitle {
    font-size: .89rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .polish-js .polish-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}