/* Purpilo Frontend V2 — foundational brand layer (2026-10-15)
   Loaded last so earlier CSS can remain functional during incremental migration.
   Scoped to storefront pages only. Do not import on admin screens. */
:root {
 --brand:#564593; --brand-2:#6B58A4; --brand-dark:#3D316B; --brand-soft:#F0EDF8;
 --purple-soft:#564593; --purple-deep:#3D316B; --color-primary:#564593;
 --color-primary-light:#6B58A4; --color-primary-dark:#3D316B;
 --color-accent:#EFE754; --color-accent-light:#F5EE89; --color-accent-dark:#C1B839;
 --sun-yellow:#EFE754; --yellow:#EFE754; --grass-green:#9DC541; --color-success:#9DC541;
 --sky-blue:#8EC2CD; --color-info:#8EC2CD;
 --cream:#FEFCF7; --p-cream:#FEFCF7; --color-off-white:#FEFCF7;
 --paper:#FFFFFF; --p-ink:#29243A; --ink:#29243A; --color-gray-800:#29243A;
 --muted:#665F75; --p-muted:#665F75; --color-gray-600:#665F75;
 --p-purple:#564593; --p-purple-dark:#3D316B;
 --p-border:#E8E3F0; --line:#E8E3F0; --shadow-brand:0 14px 36px rgba(54,39,92,.11);
 --p-shadow:0 10px 26px rgba(54,39,92,.07);
 --font-display:'Fredoka','Nunito',sans-serif; --font-body:'Nunito',system-ui,sans-serif;
 --radius-card:22px; --radius-btn:999px; --container-max:1240px;
}
html {scroll-behavior:smooth;}
body {font-family:var(--font-body);color:var(--ink);background:var(--cream);}
body, input, button, select, textarea {font-family:var(--font-body);}
h1,h2,h3,h4,h5,h6,.section-title h2 {font-family:var(--font-display)!important;letter-spacing:-.02em;}
:where(.product-card,.card,.product-grid) h3 {font-family:var(--font-body)!important;}
:where(.page-home,.page-shop,.page-product,.page-cart,.page-checkout,.page-contact,.purpilo-info-page) small,
:where(.page-home,.page-shop,.page-product,.page-cart,.page-checkout,.page-contact,.purpilo-info-page) label {font-family:var(--font-body);}
p {line-height:1.65;}
a {text-underline-offset:3px;}
:where(button,a,input,textarea,select):focus-visible {outline:3px solid #8EC2CD!important;outline-offset:3px;}
:where(button,[role="button"]):not(:disabled) {cursor:pointer;}
/* One recognizable storefront chrome. Page-specific composition lives below. */
body > header:not(.mini-header),.purpilo-info-header {
 background:rgba(255,255,255,.97)!important;
 border-bottom:1px solid #EAE5F1;
 box-shadow:0 8px 24px rgba(58,43,94,.055)!important;
 backdrop-filter:blur(14px);
 -webkit-backdrop-filter:blur(14px);
 position:sticky;top:0;z-index:1000;
}
header .header-container {max-width:var(--container-max);min-height:78px;gap:clamp(10px,2vw,24px);}
header .logo {flex-shrink:0;text-decoration:none;}
header .logo img {max-height:46px;width:auto;object-fit:contain;}
header .logo span {font-family:var(--font-display)!important;color:var(--brand)!important;-webkit-text-fill-color:var(--brand)!important;background:none!important;}
.nav-desktop ul {gap:clamp(4px,.75vw,13px)!important;align-items:center;}
.nav-desktop a,.purpilo-info-header .nav-desktop a {
 font-family:var(--font-body);font-weight:800!important;font-size:.9rem;
 color:#40364F!important;padding:10px 12px!important;border:0!important;
 border-radius:999px;white-space:nowrap;text-decoration:none;
}
.nav-desktop a:hover,.nav-desktop a.active,.nav-desktop a[aria-current="page"] {
 background:#F0EDF8!important;color:var(--brand)!important;
}
.header-search {max-width:340px;min-width:150px;}
.header-search input {background:#F9F7FD!important;border:1px solid #E7E0F1!important;border-radius:999px!important;}
.header-search input:focus {border-color:var(--brand)!important;box-shadow:0 0 0 3px rgba(86,69,147,.11)!important;}
.header-actions {gap:12px!important;}
.cart-icon {color:var(--brand)!important;display:inline-flex;align-items:center;justify-content:center;min-height:42px;min-width:42px;border-radius:50%;}
.cart-count {background:var(--brand)!important;color:#fff!important;}
/* Unified action hierarchy, keeping existing JS hooks untouched. */
.btn,.product-btn,.add-to-cart-btn,button.btn,
a.btn {font-family:var(--font-body)!important;font-weight:800!important;border-radius:999px!important;}
.btn-primary,.product-btn,.add-to-cart-btn {
 background:var(--brand)!important;color:#fff!important;border:1px solid var(--brand)!important;
 box-shadow:0 5px 13px rgba(86,69,147,.15)!important;
 transition:background .2s ease,box-shadow .2s ease,transform .2s ease!important;
}
.btn-primary:hover,.product-btn:hover,.add-to-cart-btn:hover {
 background:var(--brand-dark)!important;color:#fff!important;
 box-shadow:0 8px 20px rgba(86,69,147,.2)!important;
 transform:translateY(-2px);
}
.btn-secondary,.btn-outline {background:#fff!important;color:var(--brand)!important;border:1.5px solid var(--brand)!important;box-shadow:none!important;}
.btn-secondary:hover,.btn-outline:hover {background:var(--brand-soft)!important;color:var(--brand-dark)!important;}
button:disabled,.btn:disabled {opacity:.55!important;cursor:not-allowed!important;transform:none!important;}
/* Products — consistent image frame, card rhythm, type hierarchy.
   Maintain existing grid and add-to-cart event bindings. */
.product-grid .product-card,.product-grid .card,.product-card {
 background:#fff!important;border:1px solid #E9E4F0!important;
 border-radius:20px!important;box-shadow:0 5px 18px rgba(54,39,92,.045)!important;
 overflow:hidden;transition:box-shadow .2s ease,transform .2s ease!important;
 min-width:0;
}
.product-grid .product-card:hover,.product-grid .card:hover {
 box-shadow:0 14px 28px rgba(54,39,92,.12)!important;transform:translateY(-3px);
}
.product-grid .product-image,.product-grid .product-img,.product-grid .card-image {
 background:#F9F7FD!important;border-radius:0;overflow:hidden;
}
.product-grid .product-image img,.product-grid .product-img img,.product-grid .card-image img {
 object-fit:contain!important;
}
.product-grid .product-content,.product-grid .card-content {padding:16px!important;gap:5px;}
.product-grid .product-title,.product-grid .card-title,.product-grid .product-content h3 {
 color:var(--ink)!important;font-family:var(--font-body)!important;
 font-size:clamp(.94rem,1.3vw,1.07rem)!important;font-weight:800!important;line-height:1.42!important;
}
.product-grid .product-price,.product-grid .price,.product-grid .card-price {
 color:var(--brand)!important;font-weight:900!important;font-family:var(--font-body)!important;
}
.product-grid .badge,.product-grid .product-badge {font-family:var(--font-body)!important;font-weight:800!important;border-radius:999px!important;}
/* Shared supporting-page shell, with individuality only in hero and content composition. */
.purpilo-info-page .info-hero {position:relative;overflow:hidden;isolation:isolate;padding:clamp(60px,8vw,104px) 0 clamp(40px,6vw,72px)!important;
 background:linear-gradient(120deg,#F7F3FD,#FFFDF8)!important;}
.purpilo-info-page .info-hero::after {content:"";pointer-events:none;position:absolute;z-index:-1;
 width:min(37vw,370px);aspect-ratio:1;border-radius:50%;right:-90px;top:-110px;
 background:radial-gradient(circle,rgba(157,197,65,.17),rgba(157,197,65,0) 70%);}
.purpilo-info-page .info-hero h1 {color:var(--brand-dark)!important;
 font-family:var(--font-display)!important;font-size:clamp(2.05rem,4.7vw,4.25rem)!important;
 line-height:1.09!important;max-width:910px;}
.purpilo-info-page .info-hero p {font-family:var(--font-body);font-size:clamp(1rem,1.55vw,1.16rem)!important;
 color:var(--muted)!important;line-height:1.7;max-width:720px;}
.purpilo-info-page .info-grid {gap:22px!important;}
.purpilo-info-page .info-card {background:#fff!important;border:1px solid var(--p-border)!important;
 box-shadow:0 8px 30px rgba(54,39,92,.045)!important;
 border-radius:22px!important;padding:clamp(22px,3vw,34px)!important;}
.purpilo-info-page .info-card h2,.purpilo-info-page .info-card h3 {color:var(--brand-dark)!important;}
.purpilo-info-page .info-card p,.purpilo-info-page .info-card li {color:var(--muted)!important;}
/* Intentional page character: same tokens, different hero compositions. */
.page-about .info-hero {background:linear-gradient(110deg,#F4F0FB 0%,#FFFAF2 94%)!important;}
.page-about .info-hero::after {background:radial-gradient(circle,rgba(239,231,84,.45),transparent 70%);}
.page-guides .info-hero {background:linear-gradient(112deg,#F1F9FB,#F7F3FD)!important;}
.page-guides .info-hero::after {background:radial-gradient(circle,rgba(142,194,205,.4),transparent 70%);}
.page-schools .info-hero {background:linear-gradient(112deg,#F1F7E6,#FEFCF7)!important;}
.page-schools .info-hero::after {background:radial-gradient(circle,rgba(157,197,65,.3),transparent 70%);}
.page-ages .info-hero {background:linear-gradient(112deg,#FFFBDF,#F7F3FD)!important;}
.page-brands .info-hero {background:linear-gradient(112deg,#FEF4F1,#F4F0FB)!important;}
.page-selection .info-hero {background:linear-gradient(112deg,#F2F0FB,#EFF8F3)!important;}
.page-privacy .info-hero,.page-terms .info-hero,.page-shipping-returns .info-hero {
 background:#F7F5FA!important;padding:clamp(45px,6vw,70px) 0!important;}
.page-privacy .info-hero h1,.page-terms .info-hero h1,.page-shipping-returns .info-hero h1 {font-size:clamp(2rem,3.4vw,3.2rem)!important;}
/* Complete mini pages into the standard storefront navigation and cart. */
.purpilo-info-header .header-container {display:flex;align-items:center;justify-content:space-between;gap:20px;}
.purpilo-info-header .logo {display:flex;align-items:center;gap:8px;font-weight:800;color:var(--brand);}
.purpilo-info-header .logo img {height:46px;width:auto;}
.purpilo-info-header .nav-desktop ul {display:flex;gap:4px;list-style:none;margin:0;padding:0;}
.purpilo-info-header .header-actions {display:flex;align-items:center;gap:12px;}
.purpilo-info-header .purpilo-info-search {position:relative;flex:1;max-width:250px;}
.purpilo-info-header .purpilo-info-search input {width:100%;border:1px solid var(--p-border);background:#F9F7FD;border-radius:999px;padding:11px 15px;min-width:0;}
.purpilo-info-header .purpilo-info-menu-btn {display:none;background:none;border:0;color:var(--brand);font-size:1.35rem;padding:8px;}
.purpilo-info-nav-drawer {display:none;background:#fff;border-top:1px solid var(--p-border);padding:10px 24px 18px;}
.purpilo-info-nav-drawer[hidden] {display:none!important;}
.purpilo-info-nav-drawer a {display:block;text-decoration:none;padding:10px 12px;color:var(--brand-dark);font-weight:800;border-radius:12px;}
.purpilo-info-nav-drawer a[aria-current="page"] {background:var(--brand-soft);}
.purpilo-info-page > footer {background:var(--brand-dark)!important;padding:36px 0!important;color:#fff!important;}
.purpilo-info-page > footer a {color:#F0EAF9!important;}
/* Avoid overriding layouts and critical in-page forms with global selectors. */
@media (max-width:1080px){
 .purpilo-info-header .purpilo-info-search{display:none;}
 .purpilo-info-header .nav-desktop a {font-size:.84rem;padding:8px!important;}
}
@media (max-width:820px){
 .purpilo-info-header .nav-desktop{display:none!important;}
 .purpilo-info-header .purpilo-info-menu-btn{display:inline-flex;align-items:center;}
 .purpilo-info-nav-drawer:not([hidden]){display:block;}
 .purpilo-info-header .header-container{min-height:68px;}
}
@media (max-width:700px){
 .product-grid .product-content,.product-grid .card-content {padding:12px!important;}
 .product-grid .product-card,.product-grid .card {border-radius:16px!important;}
 .purpilo-info-page .info-hero{padding-top:48px!important;}
 .purpilo-info-page .info-grid{grid-template-columns:1fr!important;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}
 .product-grid .product-card,.btn,.product-btn{transition:none!important;transform:none!important;}}