/*
Theme Name: GIO – Lala Theme
Theme URI: https://lalaforher.com/
Author: GIO
Description: A light, fast theme made for LALA FOR HER. The page shell, side panels and WooCommerce structure live here; the look comes from the LALA Design plugin.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gio-lala
WC requires at least: 8.0
*/

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:#161619;background:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img,svg,video{max-width:100%;height:auto}
img{vertical-align:middle;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{margin:0 0 .6em;line-height:1.2;font-weight:500}
h1{font-size:40px}h2{font-size:32px}h3{font-size:26px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
p{margin:0 0 1em}
ul,ol{padding-inline-start:1.2em}
table{border-collapse:collapse;width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=search],input[type=url],select,textarea{max-width:100%;padding:10px 14px;border:1px solid #d8d3dc;border-radius:12px;background:#fff}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link:focus{position:fixed!important;top:10px;left:10px;z-index:100010;width:auto;height:auto;clip:auto;clip-path:none;padding:10px 16px;border-radius:999px;background:#fff;box-shadow:0 6px 20px rgb(0 0 0 / .15)}
.clearfix::after{content:"";display:table;clear:both}
.svg-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.svg-icon svg{width:20px;height:20px}

/* ---------- layout ---------- */
.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}
@media (min-width:768px){.container{width:750px}}
@media (min-width:992px){.container{width:970px}}
@media (min-width:1200px){.container{width:1170px}}
@media (max-width:991px){.container{width:auto;margin-left:25px;margin-right:25px}}
@media (max-width:767px){.container{margin-left:5px;margin-right:5px}}
.site{position:relative}
.site-content{padding-bottom:60px}
.entry-header{margin:40px 0 24px;text-align:center}
.entry-content > :last-child{margin-bottom:0}
.alignwide{margin-inline:calc(50% - 50vw + 40px)}
.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw;width:100vw}

/* ---------- side panels (cart, sign in, mobile menu) ---------- */
.offscreen-panel{position:fixed;inset:0;z-index:1600;display:none;pointer-events:none}
.offscreen-panel.is-visible,.offscreen-panel.open{display:block}
.offscreen-panel.open{pointer-events:auto}
.offscreen-panel .backdrop{position:absolute;inset:0;cursor:pointer;background:rgb(22 22 25 / .2);opacity:0;transition:opacity .4s}
.offscreen-panel.open .backdrop{opacity:1}
.offscreen-panel .panel{position:absolute;top:0;right:0;height:100%;width:520px;max-width:100%;margin:0;background:#fff;box-shadow:0 0 30px rgb(0 0 0 / .1);transform:translateX(100%);transition:transform .5s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column}
.offscreen-panel.open .panel{transform:none}
.mobile-menu-panel .panel{right:auto;left:0;transform:translateX(-100%)}
html[dir="rtl"] .offscreen-panel .panel{right:auto;left:0;transform:translateX(-100%)}
html[dir="rtl"] .mobile-menu-panel .panel{left:auto;right:0;transform:translateX(100%)}
html[dir="rtl"] .offscreen-panel.open .panel{transform:none}
.offscreen-panel .button-close{position:absolute;top:24px;right:28px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent}
html[dir="rtl"] .offscreen-panel .button-close{right:auto;left:28px}
.offscreen-panel .panel-header{padding:32px 40px 0}
.offscreen-panel .panel__title{margin:0;font-size:18px;font-weight:500;line-height:1}
.offscreen-panel .panel-content{flex:1;overflow-y:auto;padding:40px}
html.gio-locked,html.gio-locked body{overflow:hidden}
@media (max-width:600px){.offscreen-panel .panel-header{padding:26px 22px 0}.offscreen-panel .panel-content{padding:30px 22px}.offscreen-panel .button-close{top:16px;right:14px}}
@media (prefers-reduced-motion:reduce){.offscreen-panel .panel,.offscreen-panel .backdrop{transition:none}}

/* ---------- WooCommerce structure ---------- */
.woocommerce ul.products,.woocommerce-page ul.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px;margin:0 0 40px;padding:0;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{display:none!important}
.woocommerce ul.products.columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.woocommerce ul.products.columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{float:none!important;width:auto!important;margin:0!important;padding:0;list-style:none;position:relative}
@media (max-width:991px){.woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}}
ul.products li.product .product-thumbnail{position:relative;overflow:hidden}
ul.products li.product .product-thumbnail img{display:block;width:100%;height:auto;margin:0!important}
/* photos stacked; one shows at a time (LALA Design turns them with a time bar) */
ul.products li.product .product-thumbnails--slider > a{display:block}
ul.products li.product .product-thumbnails--slider > a:not(:first-child){position:absolute;inset:0}
ul.products li.product .product-thumbnails--slider > a{opacity:0;transition:opacity .7s ease}
ul.products li.product .product-thumbnails--slider > a.is-on{opacity:1;z-index:1}
ul.products li.product .product-thumbnails--slider > a:first-child{position:relative}
ul.products li.product .product-thumbnails--slider > a img{width:100%;height:100%;object-fit:cover}
ul.products li.product .woocommerce-loop-product__title{margin:6px 0 4px;padding:0;font-size:18px}
ul.products li.product .woocommerce-loop-product__title a{text-decoration:none}
.quantity{display:inline-flex;align-items:center}
.quantity .qty{width:56px;text-align:center;-moz-appearance:textfield;appearance:textfield}
.quantity .qty::-webkit-outer-spin-button,.quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.quantity .qty-button{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:transparent;color:inherit}
.quantity .qty-button svg{width:16px;height:16px}
.woocommerce .quantity.hidden{display:none}

/* ---------- posts, 404 ---------- */
.gio-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;margin:30px 0}
.gio-card-thumb img{border-radius:18px}
.gio-404{max-width:640px;margin:60px auto;text-align:center}
.gio-404-code{margin:0;font-size:120px;line-height:1;opacity:.15}
.gio-404-links{display:flex;gap:12px;justify-content:center}
.gio-fallback-header{display:flex;align-items:center;justify-content:space-between;min-height:72px}
.gio-fallback-header ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.gio-fallback-footer{padding:30px 15px;text-align:center}

/* theme icons are outlines: keep them unfilled even where the design paints icons with fill */
body.gio-lala .svg-icon[class*="icon-"] svg{fill:none!important;stroke:currentColor}

/* ---------- WooCommerce details the design relies on ---------- */
select{-webkit-appearance:none;appearance:none;padding-inline-end:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6f80' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:18px!important}
html[dir="rtl"] select{background-position:left 12px center!important;padding-inline-end:14px!important;padding-inline-start:38px!important}
/* stars */
.star-rating{position:relative;display:inline-block;width:5.6em;height:1em;overflow:hidden;font-size:14px;line-height:1;vertical-align:middle;font-family:inherit!important}
.star-rating::before,.star-rating span::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg%3E%3Cpath id='s' d='M12 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L2.9 9.4l6.3-.9Z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/g%3E%3C/svg%3E") left center/5.6em 1em no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24'%3E%3Cg%3E%3Cpath id='s' d='M12 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.1 6.4 20l1.1-6.2L2.9 9.4l6.3-.9Z'/%3E%3Cuse href='%23s' x='24'/%3E%3Cuse href='%23s' x='48'/%3E%3Cuse href='%23s' x='72'/%3E%3Cuse href='%23s' x='96'/%3E%3C/g%3E%3C/svg%3E") left center/5.6em 1em no-repeat}
.star-rating::before{color:#d9d2dd}
.star-rating span{position:absolute;inset:0 auto 0 0;overflow:hidden;padding-top:1.5em;color:#E9B949}
html[dir="rtl"] .star-rating span{inset:0 0 0 auto}
.woocommerce-product-rating{display:flex;align-items:center;gap:8px}
.woocommerce-product-rating .woocommerce-review-link{font-size:13px;text-decoration:none;opacity:.75}
/* labels: the design writes "(optional)" itself where it matters */
.woocommerce form .form-row label .optional{display:none}
/* checkout "Your order": photo + name */
.woocommerce-checkout-review-order-table td.product-name{display:flex;align-items:center;gap:12px}
.woocommerce-checkout-review-order-table td.product-name img{flex:none;width:52px!important;height:52px!important;border-radius:12px;object-fit:cover;margin:0!important}
/* sign in (My account, signed out) */
.woocommerce-account:not(.logged-in) .woocommerce > h2{text-align:center;font-size:20px;margin:10px 0 18px}
.woocommerce-account:not(.logged-in) .woocommerce form.login{max-width:440px;margin:0 auto;padding:26px 26px 22px;border-radius:24px;border:1px solid rgb(0 0 0 / .06);background:#fff;box-shadow:0 30px 60px -44px rgb(43 31 51 / .45)}
.woocommerce form.login .form-row{margin:0 0 14px}
.woocommerce form.login .form-row label{display:block;margin:0 0 6px;font-size:13px;font-weight:600}
.woocommerce form.login .input-text{width:100%;min-height:48px;border-radius:14px}
.woocommerce form.login .woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:13px;margin:4px 0 14px}
.woocommerce form.login button[type=submit]{width:100%;min-height:50px;border-radius:999px}
.woocommerce form.login .lost_password{margin:14px 0 0;text-align:center;font-size:13px}
.woocommerce .password-input{position:relative;display:block}
.woocommerce .show-password-input{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer}
html[dir="rtl"] .woocommerce .show-password-input{right:auto;left:12px}
.woocommerce .show-password-input::after{content:"";position:absolute;inset:4px;background:currentColor;opacity:.6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
/* 404 in the LALA look */
.gio-404{padding:20px 0 40px}
.gio-404-code{font-family:var(--lala-display,Georgia,serif);font-size:clamp(110px,18vw,180px);font-weight:600;color:var(--lala-accent,#6E4A8E);opacity:.18}
.gio-404 .entry-title{font-family:var(--lala-display,Georgia,serif);font-size:clamp(30px,4vw,46px);color:var(--lala-ink,#2B1F33)}
.gio-404 p{color:var(--lala-muted,#6f6377)}
.gio-404-links a.button{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--lala-ink,#2B1F33);color:var(--lala-bg,#fff);font-weight:600;text-decoration:none}
.gio-404-links a.button.alt{background:transparent;color:var(--lala-ink,#2B1F33);border:1px solid var(--lala-line,#e6dfec)}
/* stars: hide the "Rated x out of 5" text completely, gold fill on any background */
.star-rating span{color:transparent!important}
.star-rating span::before{background:#E9B949!important}
html[data-theme="dark"] body .star-rating::before{background:rgb(255 255 255 / .2)!important}
/* text uses the LALA fonts everywhere (the design sets the font tokens) */
body{font-family:var(--lala-body,"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif)}

/* type scale exactly as before the theme change (Konte defaults the design was built on) */
body{font-size:18px;line-height:1.5555555556;color:#161619}
h1,h2,h3,h4,h5,h6{line-height:inherit;font-weight:500}
h1{font-size:60px}h2{font-size:40px}h3{font-size:30px}h4{font-size:24px}h5{font-size:18px}h6{font-size:16px}
p{margin:0 0 1.5em}
a{transition:color .3s ease-in,background-color .3s ease-in,opacity .3s ease-in}