/* ═══════════════════════════════════════════════════════════════════════════════
   YHPRINTS THEME - COMPLETE STYLESHEET
   All styles for the YHPrints custom WordPress theme
   Includes aggressive WordPress/WooCommerce override reset
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 0: AGGRESSIVE WORDPRESS / PLUGIN OVERRIDE RESET
   This must be first to prevent any other theme/plugin styles from bleeding through.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Force reset ALL WordPress block & content element defaults */
.wp-block,
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-columns,
.wp-block-column,
.wp-block-cover,
.wp-block-media-text,
.wp-block-image,
.wp-block-gallery,
.wp-block-buttons,
.wp-block-button,
.wp-block-button__link,
.wp-block-quote,
.wp-block-pullquote,
.wp-block-separator,
.wp-block-spacer,
.wp-block-heading,
.wp-block-paragraph,
.wp-block-list,
.wp-block-table,
.wp-block-code,
.wp-block-html,
.wp-block-custom-html,
.wp-block-latest-posts,
.wp-block-search,
.wp-block-search__label,
.wp-block-search__input,
.wp-block-search__button,
.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-navigation-link,
.wp-block-navigation-item,
.wp-block-template-part,
.wp-block-query,
.wp-block-query-pagination,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-numbers,
.wp-block-page-list,
.wp-block-archives,
.wp-block-categories,
.wp-block-rss,
.wp-block-calendar,
.wp-block-tag-cloud,
.wp-block-verse,
.wp-block-audio,
.wp-block-video,
.wp-block-file,
.entry-content,
.entry,
.entry-header,
.entry-footer,
.entry-summary,
.page-content,
.page-header,
.hentry,
.post,
.type-page,
.type-post,
.singular,
.archive,
.blog,
.search,
.error404,
.attachment,
.site-content,
.site-main,
#content,
#primary,
#main,
.content-area,
.main-content,
.widget,
.sidebar,
.sidebar-primary,
.sidebar-secondary,
.site-info,
.site-footer-content,
.comment-content,
.comments-area,
.comment-list,
.comment,
.pingback,
.trackback,
.navigtion,
.pagination,
.wp-pagenavi,
nav.posts-navigation,
nav.post-navigation,
nav.comment-navigation,
.paging-navigation,
.posts-navigation,
.comment-navigation,
.breadcrumb,
nav.breadcrumb,
.site-branding,
.site-description,
.wp-caption,
.wp-caption-text,
.gallery,
.gallery-caption,
.alignleft,
.alignright,
.aligncenter,
.alignwide,
.alignfull,
.screen-reader-text,
.skip-link
{
    font-family: var(--font-sans) !important;
    color: var(--text-dark) !important;
    background: transparent !important;
    border-color: var(--ghost-orchid) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force body and theme root styles */
body,
.yhprints-theme,
.wp-site-blocks,
.is-root-container
{
    font-family: var(--font-sans) !important;
    background-color: #F5EDE8 !important;
    color: #2D2424 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    line-height: 1.6 !important;
}

/* Kill other theme headers / footers / navs entirely */
#masthead,
.site-header,
.main-navigation,
.site-footer,
#colophon,
.wp-block-template-part,
header.site-header,
footer.site-footer,
nav.main-navigation,
.primary-navigation,
.secondary-navigation,
.comment-navigation,
.post-navigation,
.paging-navigation,
.posts-navigation,
.breadcrumb,
.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-template-part,
.site-branding,
.site-title,
.site-description,
.top-bar,
.bottom-bar,
.pre-header,
.post-header,
.page-header.site-header,
.entry-header.site-header,
.custom-header,
#site-header,
#site-navigation,
#secondary,
.genesis-nav-menu,
.avada-header,
.elementor-location-header,
.elementor-location-footer,
.fl-theme-builder-header,
.fl-theme-builder-footer,
.oceanwp-header,
.oceanwp-footer,
.astra-header,
.astra-footer,
.kadence-header,
.kadence-footer,
.generatepress-header,
.generatepress-footer,
.bricks-header,
.bricks-footer
{
    display: none !important;
}

/* Ensure our content area takes over fully */
.site-content,
#content,
#primary,
#main,
.content-area,
main,
main.yhprints-main,
.page-content,
.entry-content,
.wp-site-blocks
{
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

/* WooCommerce aggressive overrides */
.woocommerce,
.woocommerce-page,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account,
.woocommerce-shop,
.woocommerce-single-product,
.wc-block-grid,
.wc-block-grid__products,
.wc-block-components-product-price,
.wc-block-components-product-button,
.wc-block-components-product-title,
.wc-block-components-product-rating,
.wc-block-components-product-image,
.products,
.product,
li.product,
div.product,
.single-product,
.product-title,
.price,
.woocommerce-result-count,
.woocommerce-ordering,
.woocommerce-breadcrumb,
.woocommerce-pagination,
nav.woocommerce-pagination,
ul.products,
ul.products li.product,
select.orderby,
form.woocommerce-cart-form,
table.shop_table,
table.shop_table th,
table.shop_table td,
.cart_totals,
.wc-proceed-to-checkout,
.cart-collaterals,
.checkout_coupon,
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-noreviews,
.comment-form,
.comment-respond,
#reviews,
#review_form_wrapper,
.woocommerce-Reviews-title,
.woocommerce-tabs,
ul.tabs,
ul.tabs li,
div.panel,
.shop_table_responsive,
.cart_item,
.product-name,
.product-thumbnail,
.product-price,
.product-quantity,
.product-subtotal,
.actions,
.coupon,
.quantity,
.qty,
.wc-block-cart,
.wc-block-checkout,
.wc-block-mini-cart,
.wc-block-mini-cart__button,
.wc-block-mini-cart__items,
.wc-block-components-sidebar-layout,
.wc-block-components-main,
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item,
.wc-block-components-order-summary,
.wc-block-components-order-summary-item,
.wc-block-components-formatted-money-amount
{
    font-family: var(--font-sans) !important;
    color: var(--text-dark) !important;
    background: transparent !important;
    border-color: var(--ghost-orchid) !important;
}

/* Reset common form elements globally */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
input[type="range"],
input[type="file"],
input[type="submit"],
input[type="button"],
input[type="reset"],
textarea,
select,
button,
.form-control,
.wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-checkbox),
.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea,
.wpcf7-select,
.wpcf7-submit,
.gform_fields .gfield input,
.gform_fields .gfield textarea,
.gform_fields .gfield select,
.ninja-forms-field,
.wpforms-field,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select,
.wpforms-submit
{
    font-family: var(--font-sans) !important;
    color: var(--text-dark) !important;
    border-color: var(--ghost-orchid) !important;
    outline-color: rgba(30, 82, 82, 0.5) !important;
}

/* Button color override - removed to prevent black text on ocean teal */

/* Reset common WordPress layout wrappers */
.wp-block-group,
.wp-block-group__inner-container,
.wp-block-columns,
.wp-block-column,
.alignwide,
.alignfull
{
    max-width: none !important;
    width: 100% !important;
}

/* Remove WordPress admin bar styling conflicts */
#wpadminbar,
#wp-toolbar
{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Force all links inside WordPress content to use our colors */
.entry-content a,
.page-content a,
.site-content a,
#content a,
.wp-block a
{
    color: var(--ocean-teal) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.entry-content a:hover,
.page-content a:hover,
.site-content a:hover,
#content a:hover,
.wp-block a:hover
{
    color: var(--coffee) !important;
}

/* Kill any global box-shadows from other themes/plugins */
#masthead *,
.site-header *,
.site-footer *,
#colophon * {
    box-shadow: none !important;
}

/* Reset table styles */
table,
.wp-block-table,
table.shop_table
{
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 1: CSS CUSTOM PROPERTIES (Color System & Design Tokens)
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Core Colors */
    --ghost-orchid: #E0D0EA;
    --ocean-teal: #1E5252;
    --coffee: #7D5A5A;
    --coffee-dark: #5A3E3E;
    --background-main: #F5EDE8;
    --text-dark: #2D2424;
    --text-light: #F5F0EC;
    --accent-plum: #3A2E3A;
    --card-bg: #FBF7F4;
    --ghost-white: #F8F4F0;

    /* Semantic Aliases */
    --primary: var(--ocean-teal);
    --primary-foreground: var(--text-light);
    --secondary: var(--ghost-orchid);
    --secondary-foreground: var(--text-dark);
    --muted: var(--ghost-white);
    --muted-foreground: var(--coffee);
    --accent: var(--ghost-orchid);
    --accent-foreground: var(--text-dark);
    --destructive: #e74c3c;
    --border: var(--ghost-orchid);
    --input: var(--ghost-orchid);
    --ring: var(--ocean-teal);

    /* Spacing Scale */
    --radius: 0.75rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);

    /* Font */
    --font-sans: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 30px rgba(224, 208, 234, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-bounce: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 2: BASE RESET & TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    border-color: var(--ghost-orchid);
    outline-color: rgba(30, 82, 82, 0.5);
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans) !important;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark) !important;
    background-color: var(--background-main) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}

/* Headings - all bold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--coffee);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }

/* Paragraphs */
p {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: var(--text-dark);
}

/* Links */
a {
    color: var(--ocean-teal);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--coffee);
}

a:focus-visible {
    outline: 2px solid var(--ocean-teal);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Lists */
ul, ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
}

dl, dt, dd {
    margin: 0;
    padding: 0;
}

/* Images */
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    border-style: none;
}

/* Blockquote */
blockquote {
    margin: 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--ghost-orchid);
    background-color: var(--card-bg);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--coffee);
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* Code & Pre */
code {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875em;
    padding: 0.125rem 0.375rem;
    background-color: var(--ghost-white);
    border-radius: 0.25rem;
    color: var(--coffee-dark);
}

pre {
    margin: 0;
    padding: 1rem;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    overflow-x: auto;
    border: 1px solid rgba(224, 208, 234, 0.3);
}

pre code {
    padding: 0;
    background: none;
    border-radius: 0;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

th, td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(224, 208, 234, 0.2);
}

th {
    font-weight: 700;
    color: var(--coffee);
    background-color: var(--ghost-white);
}

/* Horizontal Rule */
hr {
    border: none;
    border-top: 1px solid rgba(224, 208, 234, 0.2);
    margin: 1rem 0;
}

/* Strong & Em */
strong, b {
    font-weight: 700;
}

em, i {
    font-style: italic;
}

/* Form reset */
fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

legend {
    padding: 0;
}

label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--coffee);
    margin-bottom: 0.25rem;
}

/* Selection */
::selection {
    background-color: rgba(224, 208, 234, 0.4);
    color: var(--text-dark);
}

::-moz-selection {
    background-color: rgba(224, 208, 234, 0.4);
    color: var(--text-dark);
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--ocean-teal);
    outline-offset: 2px;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Scrollbar for body */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: var(--background-main);
}

body::-webkit-scrollbar-thumb {
    background: var(--ghost-orchid);
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--coffee);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 3: KAWAII HEADING STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */
.kawaii-heading {
    color: var(--coffee);
    -webkit-text-stroke: 3px white;
    paint-order: stroke fill;
    text-shadow: 2px 2px 0px var(--ghost-orchid), 3px 3px 6px rgba(224, 208, 234, 0.4);
    font-weight: 700;
    transition: transform var(--transition-bounce);
    display: inline-block;
}

.kawaii-heading:hover {
    transform: scale(1.05);
}

.kawaii-heading-sm {
    color: var(--coffee);
    -webkit-text-stroke: 2px white;
    paint-order: stroke fill;
    text-shadow: 1px 1px 0px var(--ghost-orchid), 2px 2px 4px rgba(224, 208, 234, 0.3);
    font-weight: 700;
    transition: transform var(--transition-bounce);
    display: inline-block;
}

.kawaii-heading-sm:hover {
    transform: scale(1.03);
}

/* Kawaii heading wrappers (replaces framer-motion rotation) */
.kawaii-wrap-1 { transform: rotate(-0.5deg); }
.kawaii-wrap-2 { transform: rotate(0.3deg); }
.kawaii-wrap-3 { transform: rotate(-0.2deg); }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 4: LAYOUT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Container Widths ─── */
.container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-sm {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-md {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.container-lg {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ─── Flexbox ─── */
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.inline-flex { display: inline-flex; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-grow { flex-grow: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.self-center { align-self: center; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* ─── Gap ─── */
.gap-0 { gap: 0; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }

/* ─── Grid ─── */
.grid { display: grid; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }

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

@media (max-width: 480px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
}

/* ─── Padding ─── */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.p-16 { padding: 4rem; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

.pt-0 { padding-top: 0; }
.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-10 { padding-top: 2.5rem; }
.pt-12 { padding-top: 3rem; }
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.pt-28 { padding-top: 7rem; }
.pt-32 { padding-top: 8rem; }

.pb-0 { padding-bottom: 0; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-10 { padding-bottom: 2.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pb-16 { padding-bottom: 4rem; }

.pl-0 { padding-left: 0; }
.pl-2 { padding-left: 0.5rem; }
.pl-3 { padding-left: 0.75rem; }
.pl-4 { padding-left: 1rem; }
.pl-6 { padding-left: 1.5rem; }
.pl-9 { padding-left: 2.25rem; }

.pr-0 { padding-right: 0; }
.pr-2 { padding-right: 0.5rem; }
.pr-4 { padding-right: 1rem; }

/* ─── Margin ─── */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mt-auto { margin-top: auto; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-auto { margin-bottom: auto; }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.ml-4 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-4 { margin-right: 1rem; }
.mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Negative margins */
.-mt-4 { margin-top: -1rem; }
.-mt-8 { margin-top: -2rem; }

/* ─── Sizing ─── */
.w-0 { width: 0; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-20 { width: 5rem; }
.w-24 { width: 6rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-44 { width: 11rem; }
.w-48 { width: 12rem; }
.w-56 { width: 14rem; }
.w-64 { width: 16rem; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.max-w-full { max-width: 100%; }
.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }

.h-0 { height: 0; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-48 { height: 12rem; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ─── Display ─── */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.table { display: table; }
.table-cell { display: table-cell; }
.table-row { display: table-row; }
.grid { display: grid; }

/* ─── Position ─── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }

/* ─── Overflow ─── */
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y-hidden; }
.overflow-ellipsis { text-overflow: ellipsis; }

/* ─── Inset / Top / Right / Bottom / Left ─── */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-1 { top: 0.25rem; }
.top-2 { top: 0.5rem; }
.top-4 { top: 1rem; }
.right-0 { right: 0; }
.right-1 { right: 0.25rem; }
.right-2 { right: 0.5rem; }
.right-4 { right: 1rem; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.left-1 { left: 0.25rem; }
.left-2 { left: 0.5rem; }
.left-3 { left: 0.75rem; }
.left-4 { left: 1rem; }
.left-1\/2 { left: 50%; }
.top-1\/2 { top: 50%; }

/* ─── Z-Index ─── */
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-60 { z-index: 60; }
.z-70 { z-index: 70; }
.z-100 { z-index: 100; }

/* ─── Cursor ─── */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }

/* ─── Pointer Events ─── */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ─── Resize ─── */
.resize-none { resize: none; }

/* ─── Select ─── */
.select-none { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

/* ─── Rounded Corners ─── */
.rounded { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* ─── Shadows ─── */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* ─── Text Alignment ─── */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ─── Font Sizes ─── */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-7xl { font-size: 4.5rem; line-height: 1; }

/* ─── Font Weights ─── */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* ─── Line Heights ─── */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* ─── Text Overflow ─── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ─── Whitespace ─── */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* ─── Text Colors ─── */
.text-coffee { color: var(--coffee); }
.text-coffee-dark { color: var(--coffee-dark); }
.text-ocean-teal { color: var(--ocean-teal); }
.text-text-dark { color: var(--text-dark); }
.text-text-light { color: var(--text-light); }
.text-ghost-orchid { color: var(--ghost-orchid); }
.text-accent-plum { color: var(--accent-plum); }
.text-white { color: #ffffff; }
.text-black { color: #000000; }
.text-green-600 { color: #16a34a; }
.text-green-700 { color: #15803d; }
.text-red-400 { color: #f87171; }
.text-red-500 { color: #ef4444; }
.text-amber-400 { color: #fbbf24; }
.text-coffee-40 { color: rgba(125, 90, 90, 0.4); }
.text-coffee-50 { color: rgba(125, 90, 90, 0.5); }
.text-coffee-60 { color: rgba(125, 90, 90, 0.6); }
.text-coffee-80 { color: rgba(125, 90, 90, 0.8); }
.text-text-dark-70 { color: rgba(45, 36, 36, 0.7); }
.text-text-dark-80 { color: rgba(45, 36, 36, 0.8); }
.text-text-dark-60 { color: rgba(45, 36, 36, 0.6); }

/* ─── Background Colors ─── */
.bg-card-bg { background-color: var(--card-bg); }
.bg-ghost-white { background-color: var(--ghost-white); }
.bg-ghost-orchid { background-color: var(--ghost-orchid); }
.bg-ghost-orchid-20 { background-color: rgba(224, 208, 234, 0.2); }
.bg-ghost-orchid-30 { background-color: rgba(224, 208, 234, 0.3); }
.bg-ghost-orchid-40 { background-color: rgba(224, 208, 234, 0.4); }
.bg-ghost-orchid-50 { background-color: rgba(224, 208, 234, 0.5); }
.bg-ocean-teal { background-color: var(--ocean-teal); }
.bg-ocean-teal-10 { background-color: rgba(30, 82, 82, 0.1); }
.bg-ocean-teal-20 { background-color: rgba(30, 82, 82, 0.2); }
.bg-ocean-teal-90 { background-color: rgba(30, 82, 82, 0.9); }
.bg-coffee { background-color: var(--coffee); }
.bg-background { background-color: var(--background-main); }
.bg-white { background-color: #ffffff; }
.bg-black { background-color: #000000; }
.bg-green-50 { background-color: #f0fdf4; }
.bg-green-500 { background-color: #22c55e; }
.bg-red-50 { background-color: #fef2f2; }
.bg-transparent { background-color: transparent; }

/* ─── Border ─── */
.border { border: 1px solid rgba(224, 208, 234, 0.3); }
.border-2 { border: 2px solid rgba(224, 208, 234, 0.3); }
.border-ghost-orchid { border-color: var(--ghost-orchid); }
.border-ghost-orchid-40 { border-color: rgba(224, 208, 234, 0.4); }
.border-ocean-teal { border-color: var(--ocean-teal); }
.border-coffee { border-color: var(--coffee); }
.border-green-400 { border-color: #4ade80; }
.border-red-400 { border-color: #f87171; }
.border-white { border-color: #ffffff; }
.border-transparent { border-color: transparent; }
.border-t { border-top: 1px solid rgba(224, 208, 234, 0.2); }
.border-b { border-bottom: 1px solid rgba(224, 208, 234, 0.2); }
.border-l { border-left: 1px solid rgba(224, 208, 234, 0.2); }
.border-r { border-right: 1px solid rgba(224, 208, 234, 0.2); }
.border-t-ghost-orchid { border-top-color: var(--ghost-orchid); }
.border-none { border: none; }

/* ─── Opacity ─── */
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-15 { opacity: 0.15; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* ─── Transitions ─── */
.transition-none { transition-property: none; }
.transition-colors { transition-property: color, background-color, border-color; transition-duration: var(--transition-base); transition-timing-function: ease; }
.transition-all { transition-property: all; transition-duration: var(--transition-slow); transition-timing-function: ease; }
.transition-transform { transition-property: transform; transition-duration: var(--transition-slow); transition-timing-function: ease; }
.transition-shadow { transition-property: box-shadow; transition-duration: var(--transition-slow); transition-timing-function: ease; }
.transition-opacity { transition-property: opacity; transition-duration: var(--transition-slow); transition-timing-function: ease; }
.duration-100 { transition-duration: 100ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.duration-400 { transition-duration: 400ms; }
.duration-500 { transition-duration: 500ms; }
.ease-linear { transition-timing-function: linear; }
.ease-in { transition-timing-function: ease-in; }
.ease-out { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

/* ─── Backdrop ─── */
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* ─── Aspect Ratios ─── */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }

/* ─── Transform ─── */
.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
.scale-100 { transform: scale(1); }
.scale-95 { transform: scale(0.95); }
.scale-105 { transform: scale(1.05); }
.scale-110 { transform: scale(1.1); }
.translate-x-0 { transform: translateX(0); }
.translate-y-0 { transform: translateY(0); }
.-translate-y-1 { transform: translateY(-0.25rem); }
.-translate-y-2 { transform: translateY(-0.5rem); }
.-translate-y-4 { transform: translateY(-1rem); }
.translate-x-1\/2 { transform: translateX(50%); }
.translate-x-full { transform: translateX(100%); }

/* ─── Space (gap between children) ─── */
.space-x-1 > * + * { margin-left: 0.25rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-3 > * + * { margin-left: 0.75rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* ─── Misc ─── */
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center { object-position: center; }
.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }
.list-none { list-style: none; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }
.collapse { visibility: collapse; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.border-collapse { border-collapse: collapse; }
.border-separate { border-collapse: separate; }
.outline-none { outline: none; }
.ring-2 { box-shadow: 0 0 0 2px var(--ocean-teal); }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 5: CUSTOM SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════════ */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--background-main); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--ghost-orchid); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--coffee); }

/* Firefox scrollbar */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--ghost-orchid) var(--background-main);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 6: ANIMATION KEYFRAMES & CLASSES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Keyframes ─── */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(3deg); }
}

@keyframes sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes letterPop {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRightDrawer {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes slideOutRightDrawer {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

@keyframes widthGrow {
    from { width: 0; }
    to { width: 200px; }
}

@keyframes bounceEmoji {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-8deg); }
    50% { transform: scale(1.1) rotate(0deg); }
    75% { transform: scale(1.15) rotate(8deg); }
}

@keyframes cartBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes cartBadgePop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes progressGrow {
    from { width: 0; }
}

@keyframes rotateChevron {
    from { transform: rotate(0deg); }
    to { transform: rotate(180deg); }
}

@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* ─── Animation Classes ─── */
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 4s ease-in-out infinite; }
.animate-sparkle { animation: sparkle 2s ease-in-out infinite; }
.animate-bob { animation: bob 2.5s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-fadeIn { animation: fadeIn 0.5s ease; }
.animate-fadeInUp { animation: fadeInUp 0.5s ease; }
.animate-scaleIn { animation: scaleIn 0.3s ease; }

/* ─── Scroll-triggered animations (JS adds .in-view class) ─── */
.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-in-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.slide-in-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.slide-in-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.scale-in.in-view {
    opacity: 1;
    transform: scale(1);
}

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease;
}
.fade-in.in-view {
    opacity: 1;
}

/* ─── Stagger delays for children ─── */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.05s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.1s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.15s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.2s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.25s; }
.stagger-children > *:nth-child(7) { transition-delay: 0.3s; }
.stagger-children > *:nth-child(8) { transition-delay: 0.35s; }
.stagger-children > *:nth-child(9) { transition-delay: 0.4s; }
.stagger-children > *:nth-child(10) { transition-delay: 0.45s; }
.stagger-children > *:nth-child(11) { transition-delay: 0.5s; }
.stagger-children > *:nth-child(12) { transition-delay: 0.55s; }
.stagger-children > *:nth-child(13) { transition-delay: 0.6s; }
.stagger-children > *:nth-child(14) { transition-delay: 0.65s; }
.stagger-children > *:nth-child(15) { transition-delay: 0.7s; }
.stagger-children > *:nth-child(16) { transition-delay: 0.75s; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 7: BUTTON SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-sans);
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 2px solid transparent;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

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

.btn:active {
    transform: scale(0.97) translateY(0);
}

.btn:focus-visible {
    outline: 2px solid var(--ocean-teal);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--ocean-teal);
    color: var(--text-light);
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

.btn-primary:hover {
    background-color: rgba(30, 82, 82, 0.9);
    color: var(--text-light);
}

.btn-primary-full {
    background-color: var(--ocean-teal);
    color: var(--text-light);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    width: 100%;
    border-radius: var(--radius-xl);
}

.btn-primary-full:hover {
    background-color: rgba(30, 82, 82, 0.9);
    color: var(--text-light);
}

.btn-outline {
    background: transparent;
    color: var(--coffee);
    border: 2px solid var(--ghost-orchid);
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 9999px;
}

.btn-outline:hover {
    background-color: rgba(224, 208, 234, 0.2);
    color: var(--coffee);
}

.btn-sm {
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    height: 1.75rem;
    border-radius: var(--radius);
}

.btn-ghost {
    background: transparent;
    border: none;
    color: rgba(125, 90, 90, 0.5);
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-ghost:hover {
    color: #f87171;
    background-color: rgba(254, 226, 226, 0.5);
}

.btn-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.btn-ghost-orchid {
    background-color: var(--ghost-orchid);
    color: var(--ocean-teal);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius);
}

.btn-ghost-orchid:hover {
    background-color: rgba(224, 208, 234, 0.8);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 8: FORM ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Text Input ─── */
.yh-input {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    background-color: var(--ghost-white);
    border: 1px solid rgba(224, 208, 234, 0.4);
    border-radius: var(--radius);
    color: var(--text-dark);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    outline: none;
}

.yh-input:focus {
    border-color: var(--ocean-teal);
    box-shadow: 0 0 0 3px rgba(30, 82, 82, 0.1);
}

.yh-input::placeholder {
    color: rgba(125, 90, 90, 0.4);
}

.yh-input-icon {
    padding-left: 2.25rem;
}

.yh-input-lg {
    padding: 0.75rem 0.75rem;
    height: 2.5rem;
}

/* ─── Textarea ─── */
.yh-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    background-color: var(--ghost-white);
    border: 1px solid rgba(224, 208, 234, 0.4);
    border-radius: var(--radius);
    color: var(--text-dark);
    resize: none;
    min-height: 56px;
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.yh-textarea:focus {
    border-color: var(--ocean-teal);
    box-shadow: 0 0 0 3px rgba(30, 82, 82, 0.1);
}

.yh-textarea::placeholder {
    color: rgba(125, 90, 90, 0.4);
}

/* ─── Select ─── */
.yh-select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    background-color: var(--ghost-white);
    border: 1px solid rgba(224, 208, 234, 0.4);
    border-radius: var(--radius);
    color: var(--text-dark);
    height: 2.25rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%237D5A5A'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    cursor: pointer;
}

.yh-select:focus {
    border-color: var(--ocean-teal);
    box-shadow: 0 0 0 3px rgba(30, 82, 82, 0.1);
}

/* ─── File Upload ─── */
.yh-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 4rem;
    border: 2px dashed rgba(224, 208, 234, 0.4);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all var(--transition-base);
}

.yh-upload:hover {
    border-color: var(--ghost-orchid);
    background-color: rgba(224, 208, 234, 0.05);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 9: CARD SYSTEM
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Base Card ─── */
.yh-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.yh-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.yh-card-body {
    padding: 1rem;
}

.yh-card-body-lg {
    padding: 1.25rem;
}

/* ─── Badge ─── */
.yh-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    backdrop-filter: blur(4px);
}

.yh-badge-teal {
    background-color: rgba(30, 82, 82, 0.9);
    color: var(--text-light);
}

.yh-badge-orchid {
    background-color: rgba(224, 208, 234, 0.4);
    color: var(--coffee);
}

/* ─── Pill / Filter Buttons ─── */
.yh-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    font-family: var(--font-sans);
    background-color: rgba(224, 208, 234, 0.3);
    color: var(--coffee);
}

.yh-pill:hover {
    background-color: rgba(224, 208, 234, 0.5);
}

.yh-pill:active {
    transform: scale(0.95);
}

.yh-pill.active {
    background-color: var(--ocean-teal);
    color: var(--text-light);
}

/* ─── Progress Bar ─── */
.yh-progress {
    width: 100%;
    background-color: rgba(224, 208, 234, 0.2);
    border-radius: 9999px;
    height: 6px;
    overflow: hidden;
}

.yh-progress-bar {
    background-color: var(--ocean-teal);
    border-radius: 9999px;
    height: 100%;
    transition: width 0.5s ease;
    animation: progressGrow 0.5s ease;
}

/* ─── Divider ─── */
.yh-divider {
    border: none;
    border-top: 1px solid rgba(224, 208, 234, 0.2);
    margin: 0.5rem 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 10: HEADER / NAVIGATION (Complete)
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    background: var(--background-main, #F5EDE8);
    animation: fadeIn 0.5s ease;
}

.yh-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    background-color: rgba(251, 247, 244, 0.8);
    box-shadow: 0 4px 12px rgba(224, 208, 234, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-slow);
}

.yh-nav.scrolled {
    background-color: rgba(251, 247, 244, 0.95);
    box-shadow: 0 10px 30px rgba(224, 208, 234, 0.2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.yh-logo {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--coffee);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-sans);
    transition: transform var(--transition-base);
}

.yh-logo:hover {
    transform: scale(1.05);
}

.yh-nav-links {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

@media (min-width: 1024px) {
    .yh-nav-links {
        display: flex;
    }
}

.yh-nav-link {
    padding: 0.375rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--coffee);
    text-decoration: none;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-sans);
}

.yh-nav-link:hover {
    background-color: rgba(224, 208, 234, 0.5);
}

.yh-nav-link.active {
    background-color: var(--ocean-teal);
    color: var(--text-light);
}

.yh-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.yh-icon-btn {
    position: relative;
    padding: 0.5rem;
    border-radius: 9999px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--coffee);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.yh-icon-btn:hover {
    background-color: rgba(224, 208, 234, 0.3);
    transform: scale(1.1);
}

.yh-icon-btn:active {
    transform: scale(0.9);
}

.yh-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: var(--coffee);
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 700;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cartBadgePop 0.3s ease;
}

.yh-mobile-toggle {
    display: flex;
    padding: 0.5rem;
    border-radius: 9999px;
    border: none;
    background: none;
    color: var(--coffee);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .yh-mobile-toggle {
        display: none;
    }
}

/* ─── Mobile Menu ─── */
.yh-mobile-menu {
    position: fixed;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    width: 90%;
    max-width: 28rem;
    background-color: rgba(251, 247, 244, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 0.75rem;
    display: none;
}

.yh-mobile-menu.open {
    display: block;
    animation: scaleIn 0.2s ease;
}

@media (min-width: 1024px) {
    .yh-mobile-menu {
        display: none !important;
    }
}

.yh-mobile-link {
    display: block;
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--coffee);
    text-decoration: none;
    text-align: left;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-sans);
}

.yh-mobile-link:hover {
    background-color: rgba(224, 208, 234, 0.3);
}

.yh-mobile-link.active {
    background-color: var(--ocean-teal);
    color: var(--text-light);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 11: CART DRAWER (Complete)
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-cart-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 60;
    animation: fadeIn 0.2s ease;
}

.yh-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 28rem;
    background-color: var(--card-bg);
    z-index: 70;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
    animation: slideInRightDrawer 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.yh-cart-drawer.closing {
    animation: slideOutRightDrawer 0.3s ease forwards;
}

.yh-cart-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(224, 208, 234, 0.2);
}

.yh-cart-drawer-items {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.yh-cart-drawer-footer {
    border-top: 1px solid rgba(224, 208, 234, 0.2);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.yh-cart-item {
    display: flex;
    gap: 0.75rem;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    animation: slideInRight 0.3s ease;
    transition: all var(--transition-slow);
}

.yh-cart-item.highlight {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3), 0 0 0 4px white;
}

.yh-cart-item-link {
    display: flex;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.yh-cart-item-link:hover {
    border-color: rgba(30, 82, 82, 0.25);
    background: rgba(30, 82, 82, 0.05);
    box-shadow: 0 2px 8px rgba(30, 82, 82, 0.1);
    transform: translateY(-1px);
}

.yh-cart-item-link:hover .yh-cart-item-name {
    color: #1E5252;
}

.yh-cart-item-link:hover .yh-cart-item-img img {
    transform: scale(1.05);
}

.yh-cart-item-details {
    flex: 1;
    min-width: 0;
}

.yh-cart-item-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.yh-cart-item-name {
    font-weight: 700;
    color: #7D5A5A;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.yh-cart-item-remove {
    padding: 0.25rem;
    border-radius: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: rgba(125, 90, 90, 0.4);
    flex-shrink: 0;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yh-cart-item-remove:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.08);
}

.yh-cart-item-remove:active {
    transform: scale(0.9);
}

.yh-cart-item-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.375rem;
}

.yh-cart-item-price {
    font-weight: 700;
    color: #1E5252;
    font-size: 0.875rem;
}

.yh-cart-qty-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.yh-cart-item-img {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-cart-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

.yh-cart-qty-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid rgba(224, 208, 234, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    color: var(--coffee);
    transition: all var(--transition-base);
    font-size: 0.75rem;
    font-family: var(--font-sans);
}

.yh-cart-qty-btn:hover {
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-added-toast {
    margin: 0 1rem;
    margin-top: 0.75rem;
    background-color: rgba(240, 253, 244, 0.95);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: rgba(21, 128, 61, 0.9);
    border-radius: var(--radius-xl);
    padding: 0.625rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: fadeInUp 0.3s ease;
    font-size: 0.875rem;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 12: PARALLAX BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-parallax {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.yh-parallax-blob {
    position: absolute;
    border-radius: 9999px;
    will-change: transform;
    transition: transform 0.1s linear;
}

.yh-parallax-dot {
    position: absolute;
    border-radius: 9999px;
    will-change: transform;
}

.yh-parallax-shape {
    position: absolute;
    will-change: transform;
    transition: transform 0.1s linear;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 13: FLOATING ELEMENTS
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-float-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.yh-float-el {
    position: absolute;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 14: HERO / ANIMATED TITLE
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-animated-title {
    text-align: center;
    padding: 2rem 0;
}

.yh-animated-title .letter {
    display: inline-block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--coffee);
    animation: letterPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
}

@media (min-width: 768px) {
    .yh-animated-title .letter {
        font-size: 4.5rem;
    }
}

.yh-animated-title .tagline {
    color: rgba(125, 90, 90, 0.8);
    font-size: 1.125rem;
    margin-top: 1rem;
    font-weight: 500;
    animation: fadeInUp 0.6s ease 0.8s forwards;
    opacity: 0;
}

@media (min-width: 768px) {
    .yh-animated-title .tagline {
        font-size: 1.25rem;
    }
}

.yh-animated-title .underline-deco {
    margin-top: 1rem;
    height: 4px;
    border-radius: 9999px;
    background: linear-gradient(to right, transparent, var(--ghost-orchid), transparent);
    animation: widthGrow 0.6s ease 1.2s forwards;
    width: 0;
    margin-left: auto;
    margin-right: auto;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 15: PRODUCT SLIDER
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-slider {
    position: relative;
    width: 100%;
    max-width: 42rem;
    margin: 0 auto;
}

.yh-slider-inner {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    aspect-ratio: 4/3;
    background-color: #1E5252;
    box-shadow: var(--shadow-lg);
}

.yh-slider-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.yh-slider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15%;
    background: linear-gradient(to top, rgba(125, 90, 90, 0.75) 0%, rgba(125, 90, 90, 0.4) 50%, rgba(125, 90, 90, 0) 100%);
}

.yh-slider-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 1rem 1.5rem;
    color: #F5F0EC;
}

.yh-slider-text h3 {
    color: #F5F0EC;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.125rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.yh-slider-text p {
    color: rgba(245, 240, 236, 0.9);
    font-size: 0.875rem;
    margin: 0;
}

.yh-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.375rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border: none;
    transition: background-color var(--transition-base);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
}

.yh-slider-arrow:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

.yh-slider-arrow.left {
    left: 0.5rem;
}

.yh-slider-arrow.right {
    right: 0.5rem;
}

.yh-slider-dots {
    position: absolute;
    bottom: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    z-index: 2;
}

.yh-slider-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all var(--transition-slow);
}

.yh-slider-dot.active {
    background-color: #fff;
    width: 1.25rem;
}

.yh-slide {
    position: absolute;
    inset: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.yh-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.yh-slide.next {
    opacity: 0;
    transform: translateX(50px);
}

.yh-slide.prev {
    opacity: 0;
    transform: translateX(-50px);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 16: PRODUCT CARD (Complete)
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-product-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.yh-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.yh-product-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.yh-product-card:hover .yh-product-card-img img {
    transform: scale(1.05);
}

.yh-product-card-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
}

.yh-product-card-body {
    padding: 1rem;
}

.yh-product-card-name {
    font-weight: 700;
    color: var(--coffee);
    font-size: 0.875rem;
    line-height: 1.25;
    margin-bottom: 0.25rem;
}

.yh-product-card-desc {
    font-size: 0.75rem;
    color: rgba(125, 90, 90, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yh-product-card-stars {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 0.5rem;
}

.yh-product-card-stars .star {
    width: 0.75rem;
    height: 0.75rem;
    color: #fbbf24;
    fill: #fbbf24;
}

.yh-product-card-stars .star-empty {
    width: 0.75rem;
    height: 0.75rem;
    color: #d1d5db;
}

.yh-product-card-stars .rating-text {
    font-size: 0.75rem;
    color: rgba(125, 90, 90, 0.5);
    margin-left: 0.25rem;
}

.yh-product-card-footer {
    display: flex;
    align-items: center;
    margin-top: 0.75rem;
}

.yh-product-card-price {
    font-weight: 700;
    color: var(--ocean-teal);
    font-size: 1.125rem;
}

.yh-product-card .add-to-cart-btn {
    margin-left: auto;
}

.add-to-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-sans);
    background-color: var(--ocean-teal);
    color: var(--text-light);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.add-to-cart-btn:hover {
    background-color: rgba(30, 82, 82, 0.9);
    transform: scale(1.05);
}

.add-to-cart-btn:active {
    transform: scale(0.95);
}

.add-to-cart-btn.added {
    background-color: #22c55e;
    color: white;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 17: FOOTER (Complete)
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-footer {
    background-color: var(--ocean-teal);
    color: var(--text-light);
    padding: 3rem 1rem 1.5rem;
    margin-top: 4rem;
}

.yh-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 1024px;
    margin: 0 auto;
}

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

.yh-footer-heading {
    color: var(--ghost-orchid);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.yh-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yh-footer-links li {
    margin-bottom: 0.375rem;
}

.yh-footer-links a {
    color: var(--text-light);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--transition-base);
    opacity: 0.8;
}

.yh-footer-links a:hover {
    color: var(--ghost-orchid);
    opacity: 1;
}

.yh-footer-social {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.yh-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(224, 208, 234, 0.2);
    color: var(--text-light);
    transition: all var(--transition-base);
    text-decoration: none;
    font-size: 1rem;
}

.yh-footer-social a:hover {
    background-color: rgba(224, 208, 234, 0.4);
    transform: translateY(-2px);
}

.yh-footer-heart {
    display: inline-block;
    animation: heartBeat 1.5s ease infinite;
    color: #f87171;
    fill: #f87171;
}

.yh-footer-bottom {
    max-width: 1024px;
    margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(245, 240, 236, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(245, 240, 236, 0.6);
}

@media (min-width: 768px) {
    .yh-footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

/* ─── FAQ Items ─── */
.yh-faq-item {
    border-radius: var(--radius);
    background-color: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    transition: background-color var(--transition-base);
}

.yh-faq-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.faq-chevron {
    transition: transform var(--transition-base);
    color: var(--ghost-orchid);
}

.faq-chevron.open {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--transition-slow), opacity var(--transition-slow), padding var(--transition-slow);
}

.faq-answer.open {
    max-height: 500px;
    opacity: 1;
    padding: 0 1rem 1rem;
}

/* ─── Newsletter Form ─── */
.yh-newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.yh-newsletter-form .yh-input {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(224, 208, 234, 0.3);
    color: var(--text-light);
}

.yh-newsletter-form .yh-input::placeholder {
    color: rgba(245, 240, 236, 0.4);
}

.yh-newsletter-form .yh-input:focus {
    border-color: var(--ghost-orchid);
    box-shadow: 0 0 0 3px rgba(224, 208, 234, 0.1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 18: VALUE CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-value-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.yh-value-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.yh-value-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(224, 208, 234, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    color: var(--ocean-teal);
    font-size: 1.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 19: REVIEW CARDS
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-review-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-xl);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-slow);
}

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

.yh-rating-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-xl);
    border: 2px solid transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-base);
    background-color: var(--ghost-white);
    color: var(--coffee);
}

.yh-rating-btn:hover {
    background-color: var(--card-bg);
}

/* Rating button selected states — see end-of-file block with !important for WP reset override */

.yh-review-reason {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--transition-slow), opacity var(--transition-slow);
}

.yh-review-reason.open {
    max-height: 200px;
    opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 20: BLOG CARDS (Complete)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Blog Card (Grid) ─── */
.yh-blog-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.yh-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.yh-blog-card-img {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.yh-blog-card:hover .yh-blog-card-img img {
    transform: scale(1.05);
}

.yh-blog-card-category {
    display: inline-block;
    background-color: rgba(30, 82, 82, 0.9);
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.yh-blog-card-body {
    padding: 1.25rem;
}

.yh-blog-card-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(125, 90, 90, 0.5);
    margin-bottom: 0.375rem;
}

.yh-blog-card-title {
    font-weight: 700;
    color: var(--coffee);
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 0.375rem;
}

.yh-blog-card-excerpt {
    font-size: 0.875rem;
    color: rgba(125, 90, 90, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.yh-blog-read-more {
    font-size: 0.875rem;
    color: var(--ocean-teal);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-base);
}

.yh-blog-read-more:hover {
    color: var(--coffee);
}

/* ─── Blog List Card ─── */
.yh-blog-list-card {
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    cursor: pointer;
}

@media (min-width: 640px) {
    .yh-blog-list-card {
        flex-direction: row;
    }
}

.yh-blog-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.yh-blog-list-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: rgba(224, 208, 234, 0.2);
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .yh-blog-list-card-img {
        width: 12rem;
        aspect-ratio: 1;
    }
}

.yh-blog-list-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─── Blog Single ─── */
.yh-blog-single {
    max-width: 48rem;
    margin: 0 auto;
}

.yh-blog-single-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-blog-single-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yh-blog-single-meta {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.yh-blog-single-category {
    display: inline-block;
    background-color: rgba(224, 208, 234, 0.4);
    color: var(--coffee);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.yh-blog-back-btn {
    font-size: 0.875rem;
    color: rgba(125, 90, 90, 0.6);
    text-decoration: none;
    transition: color var(--transition-base);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-sans);
    padding: 0;
}

.yh-blog-back-btn:hover {
    color: var(--coffee);
}

.yh-blog-prose {
    color: rgba(45, 36, 36, 0.8);
    line-height: 1.625;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.yh-blog-prose p {
    margin-bottom: 0;
}

.yh-blog-prose h2,
.yh-blog-prose h3,
.yh-blog-prose h4 {
    color: var(--coffee);
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.yh-blog-prose img {
    border-radius: var(--radius-xl);
}

.yh-blog-prose a {
    color: var(--ocean-teal);
    text-decoration: underline;
}

.yh-blog-prose ul,
.yh-blog-prose ol {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.yh-blog-prose ol {
    list-style: decimal;
}

.yh-blog-prose li {
    margin-bottom: 0.25rem;
}

.yh-blog-prose blockquote {
    border-left: 4px solid var(--ghost-orchid);
    padding-left: 1rem;
    color: var(--coffee);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 21: PERSONALIZED FORM
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-type-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem;
    border-radius: var(--radius-xl);
    border: 2px solid rgba(224, 208, 234, 0.3);
    overflow: hidden;
    cursor: pointer;
    font-family: var(--font-sans);
    background: var(--card-bg);
    transition: all var(--transition-base);
}

.yh-type-btn:hover {
    border-color: var(--ghost-orchid);
}

.yh-type-btn.selected {
    border-color: var(--ocean-teal);
    background-color: rgba(30, 82, 82, 0.1);
    color: var(--ocean-teal);
}

.yh-type-btn .type-glow {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: var(--ocean-teal);
    transform: scale(0);
    transition: transform 0.3s ease;
    opacity: 0.1;
}

.yh-type-btn.selected .type-glow {
    transform: scale(2);
}

.yh-type-btn .type-emoji {
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
}

.yh-type-btn .type-label {
    font-size: 0.75rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.yh-type-btn .type-check {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--ocean-teal);
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.625rem;
    opacity: 0;
    transform: scale(0);
    transition: all var(--transition-base);
}

.yh-type-btn.selected .type-check {
    opacity: 1;
    transform: scale(1);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 22: ACCOUNT PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-account-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.yh-tab-switcher {
    display: flex;
    gap: 0.25rem;
    background-color: var(--ghost-white);
    border-radius: var(--radius-xl);
    padding: 0.25rem;
}

.yh-tab-btn {
    flex: 1;
    padding: 0.5rem 0;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--coffee);
    font-family: var(--font-sans);
    transition: all var(--transition-base);
}

.yh-tab-btn.active {
    background-color: var(--ocean-teal);
    color: var(--text-light);
    border-radius: var(--radius);
}

.yh-tab-btn:hover:not(.active) {
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-tab-content {
    display: none;
}

.yh-tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

.yh-profile-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background-color: rgba(224, 208, 234, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--ocean-teal);
    font-weight: 700;
    overflow: hidden;
}

.yh-profile-action {
    background-color: var(--ghost-white);
    border-radius: var(--radius-xl);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.yh-profile-action:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.yh-profile-details {
    background-color: var(--ghost-white);
    border-radius: var(--radius-xl);
    padding: 1rem;
}

.yh-profile-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    padding: 0.375rem 0;
}

.yh-profile-row-label {
    color: rgba(125, 90, 90, 0.6);
}

.yh-profile-row-value {
    font-weight: 600;
    color: var(--text-dark);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 23: CART PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-cart-page {
    max-width: 1024px;
    margin: 0 auto;
    padding: 7rem 1rem 2rem;
}

.yh-cart-summary {
    background-color: var(--card-bg);
    border-radius: var(--radius-2xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 6rem;
}

.yh-retention-banner {
    border-radius: var(--radius-xl);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.yh-shipping-banner {
    background-color: var(--ocean-teal);
    color: var(--text-light);
}

.yh-shipping-banner .yh-retention-banner {
    background-color: transparent;
    padding: 0;
}

.yh-newsletter-banner {
    background-color: rgba(224, 208, 234, 0.3);
}

.yh-empty-cart {
    text-align: center;
    padding: 4rem 1rem;
}

.yh-empty-cart-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.yh-empty-cart h2 {
    color: var(--coffee);
    margin-bottom: 0.5rem;
}

.yh-empty-cart p {
    color: rgba(125, 90, 90, 0.6);
    margin-bottom: 1.5rem;
}

.yh-upsell-section {
    margin-top: 2.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 24: STORE PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */
.yh-store-controls {
    background-color: var(--card-bg);
    border-radius: var(--radius-2xl);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

.yh-store-search-wrapper {
    position: relative;
    flex: 1;
}

.yh-store-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(125, 90, 90, 0.4);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.yh-store-search {
    width: 100%;
    padding-left: 2.25rem;
    background-color: var(--ghost-white);
    border: 1px solid rgba(224, 208, 234, 0.4);
    font-size: 0.875rem;
    height: 2.25rem;
    border-radius: var(--radius);
    color: var(--text-dark);
    outline: none;
    font-family: var(--font-sans);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.yh-store-search::placeholder {
    color: rgba(125, 90, 90, 0.4);
}

.yh-store-search:focus {
    border-color: var(--ocean-teal);
    box-shadow: 0 0 0 3px rgba(30, 82, 82, 0.1);
}

.yh-store-sort {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    background-color: var(--ghost-white);
    border: 1px solid rgba(224, 208, 234, 0.4);
    border-radius: var(--radius);
    color: var(--text-dark);
    height: 2.25rem;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%237D5A5A'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    cursor: pointer;
}

@media (min-width: 640px) {
    .yh-store-sort {
        width: 11rem;
    }
}

.yh-store-sort:focus {
    border-color: var(--ocean-teal);
    box-shadow: 0 0 0 3px rgba(30, 82, 82, 0.1);
}

.yh-view-toggle {
    display: flex;
    gap: 0.25rem;
}

.yh-view-btn {
    height: 2.25rem;
    padding: 0 0.75rem;
    border-radius: var(--radius);
    border: 1px solid rgba(224, 208, 234, 0.3);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    background: var(--ghost-white);
    color: var(--coffee);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.yh-view-btn:hover {
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-view-btn.active {
    background-color: var(--ocean-teal);
    color: var(--text-light);
    border-color: var(--ocean-teal);
}

.yh-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.yh-category-filter {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
    font-family: var(--font-sans);
    background-color: rgba(224, 208, 234, 0.3);
    color: var(--coffee);
}

.yh-category-filter:hover {
    background-color: rgba(224, 208, 234, 0.5);
}

.yh-category-filter:active {
    transform: scale(0.95);
}

.yh-category-filter.active {
    background-color: var(--ocean-teal);
    color: var(--text-light);
}

.yh-store-results-count {
    font-size: 0.875rem;
    color: rgba(125, 90, 90, 0.6);
}

.yh-no-results {
    text-align: center;
    padding: 4rem 1rem;
}

.yh-no-results-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.yh-no-results h3 {
    color: var(--coffee);
    margin-bottom: 0.5rem;
}

.yh-no-results p {
    color: rgba(125, 90, 90, 0.6);
    margin-bottom: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 25: RESPONSIVE BREAKPOINTS & MOBILE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Small devices (portrait phones, < 480px) ─── */
@media (max-width: 479px) {
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    .container-lg { padding-left: 0.75rem; padding-right: 0.75rem; }
    .container-md { padding-left: 0.75rem; padding-right: 0.75rem; }
    .container-sm { padding-left: 0.75rem; padding-right: 0.75rem; }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .yh-animated-title .letter { font-size: 2.5rem; }
    .pt-24 { padding-top: 5rem; }
    .pt-28 { padding-top: 5.5rem; }

    .hidden-mobile { display: none !important; }
    .block-mobile { display: block !important; }
    .flex-col-mobile { flex-direction: column !important; }
}

/* ─── Medium devices (tablets, < 768px) ─── */
@media (max-width: 767px) {
    .hidden-sm { display: none !important; }
    .block-sm { display: block !important; }
}

/* ─── Large devices (desktops, >= 1024px) ─── */
@media (min-width: 1024px) {
    .hidden-lg { display: none !important; }
    .block-lg { display: block !important; }
}

/* ─── Print styles ─── */
@media print {
    .yh-header,
    .yh-parallax,
    .yh-float-elements,
    .yh-footer,
    .yh-cart-drawer,
    .yh-cart-backdrop,
    .yh-mobile-menu
    {
        display: none !important;
    }

    body {
        background-color: white !important;
        color: black !important;
    }

    a {
        color: black !important;
        text-decoration: underline !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 26: DARK MODE SUPPORT (Optional - class-based)
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    /* We intentionally do NOT apply dark mode by default.
       The YHPrints theme is designed for the light kawaii aesthetic.
       Dark mode can be toggled via .dark-mode class on body if needed in the future. */
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 27: ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════════ */

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

    .animate-float,
    .animate-float-slow,
    .animate-sparkle,
    .animate-bob,
    .animate-pulse,
    .animate-spin,
    .animate-ping {
        animation: none !important;
    }

    .fade-in-up,
    .slide-in-left,
    .slide-in-right,
    .scale-in,
    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }

    .stagger-children > * {
        transition-delay: 0s !important;
    }

    .yh-animated-title .letter {
        opacity: 1 !important;
        transform: none !important;
    }

    .yh-animated-title .tagline {
        opacity: 1 !important;
    }

    .yh-animated-title .underline-deco {
        width: 200px !important;
    }

    .kawaii-heading:hover,
    .kawaii-heading-sm:hover {
        transform: none !important;
    }
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--ocean-teal);
    color: var(--text-light);
    padding: 0.5rem 1rem;
    z-index: 9999;
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--transition-base);
}

.skip-link:focus {
    top: 0;
    color: var(--text-light);
}

/* Focus ring styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ocean-teal);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   END OF STYLESHEET
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 99: CRITICAL FIXES — Dark Background Color Overrides
   Fixes aggressive WordPress reset forcing dark text on dark backgrounds
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Footer — all text must be light on dark teal background */
.yh-footer,
.yh-footer *,
.yh-footer p,
.yh-footer h1,
.yh-footer h2,
.yh-footer h3,
.yh-footer h4,
.yh-footer h5,
.yh-footer h6,
.yh-footer a,
.yh-footer li,
.yh-footer span,
.yh-footer label,
.yh-footer div,
.yh-footer details,
.yh-footer summary,
.yh-footer input,
.yh-footer button,
.yh-footer svg,
.yh-footer-text,
.yh-footer-bottom,
.yh-footer-bottom p,
.yh-footer-bottom span
{
    color: rgba(245, 240, 236, 0.8) !important;
}

.yh-footer a:hover,
.yh-footer a:focus
{
    color: #fff !important;
}

/* Footer heading overrides */
.yh-footer-heading
{
    color: #F5F0EC !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.75rem !important;
}

.yh-footer-links li a
{
    color: rgba(245, 240, 236, 0.7) !important;
    font-size: 0.875rem !important;
    transition: color 0.2s ease !important;
}

.yh-footer-links li a:hover
{
    color: #fff !important;
}

/* Footer heart — beating red */
.yh-footer-heart
{
    display: inline-block !important;
    animation: heartBeat 1.5s ease infinite !important;
    color: #f87171 !important;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle !important;
}

.yh-footer-heart svg
{
    width: 16px !important;
    height: 16px !important;
    fill: #f87171 !important;
    stroke: none !important;
}

/* Footer social icons */
.yh-footer-social a
{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 9999px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #F5F0EC !important;
    transition: all 0.2s ease !important;
    margin-right: 0.5rem !important;
}

.yh-footer-social a:hover
{
    background-color: rgba(224, 208, 234, 0.4) !important;
    transform: translateY(-2px) !important;
}

.yh-footer-social a svg
{
    width: 16px !important;
    height: 16px !important;
}

/* FAQ in footer */
.yh-faq-item
{
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 0.75rem !important;
    margin-bottom: 0.5rem !important;
    overflow: hidden !important;
}

.yh-faq-item summary
{
    padding: 0.75rem 1rem !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    color: #F5F0EC !important;
    list-style: none !important;
}

.yh-faq-item summary::-webkit-details-marker
{
    display: none !important;
}

.faq-chevron
{
    font-size: 0.625rem !important;
    transition: transform 0.2s ease !important;
}

.yh-faq-item[open] .faq-chevron
{
    transform: rotate(180deg) !important;
}

.faq-answer
{
    padding: 0 1rem 0.75rem !important;
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
    color: rgba(245, 240, 236, 0.6) !important;
}

/* Slider text — light on coffee overlay */
.yh-slider-text,
.yh-slider-text h3,
.yh-slider-text p
{
    color: #F5F0EC !important;
}

.yh-slider-text h3
{
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.125rem !important;
}

.yh-slider-text p
{
    color: rgba(245, 240, 236, 0.9) !important;
    font-size: 0.8125rem !important;
    margin: 0 !important;
}

/* Teal/ocean background sections — ensure light text */
[style*="background-color:#1E5252"],
[style*="background-color: #1E5252"],
[style*="background-color:rgba(30, 82, 82"],
.bg-ocean-teal,
.yh-shipping-bar,
.yh-gift-bar
{
    color: #F5F0EC !important;
}

.yh-shipping-bar p,
.yh-shipping-bar svg,
.yh-gift-bar p,
.yh-gift-bar svg,
.yh-shipping-bar strong,
.yh-gift-bar strong,
.yh-shipping-bar span,
.yh-gift-bar span
{
    color: #F5F0EC !important;
}

/* Newsletter form in footer */
.yh-newsletter-form .yh-input
{
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #F5F0EC !important;
}

.yh-newsletter-form .yh-input::placeholder
{
    color: rgba(245, 240, 236, 0.5) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 100: SLIDER KAWAII OUTLINE
   Adds kawaii sticker border to the slider
   ═══════════════════════════════════════════════════════════════════ */
.yh-slider-kawaii .yh-slider-inner
{
    border: 3px solid rgba(224, 208, 234, 0.5);
    box-shadow: 4px 4px 0px var(--ghost-orchid), var(--shadow-lg);
    border-radius: 1.25rem;
}

.yh-slider-kawaii .yh-slider-arrow
{
    background-color: rgba(245, 240, 236, 0.9) !important;
    color: var(--coffee) !important;
}

.yh-slider-kawaii .yh-slider-arrow:hover
{
    background-color: #fff !important;
}

/* Make slider taller on homepage */
.yh-slider .yh-slider-inner
{
    aspect-ratio: 16 / 9;
    max-height: 28rem;
}

@media (min-width: 768px) {
    .yh-slider .yh-slider-inner
    {
        max-height: 32rem;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 101: IMAGE UPLOAD PREVIEW
   Shows filename, thumbnail, and remove button
   ═══════════════════════════════════════════════════════════════════ */
.yh-upload-preview
{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: rgba(224, 208, 234, 0.15);
    border-radius: 0.75rem;
    border: 1px solid rgba(224, 208, 234, 0.3);
}

.yh-upload-preview-img
{
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    overflow: hidden;
    flex-shrink: 0;
    background-color: rgba(224, 208, 234, 0.2);
}

.yh-upload-preview-img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yh-upload-preview-info
{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.yh-upload-preview-name
{
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--coffee);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yh-upload-preview-size
{
    font-size: 0.6875rem;
    color: rgba(125, 90, 90, 0.5);
}

.yh-upload-preview-remove
{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    border: none;
    background-color: #fef2f2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.yh-upload-preview-remove:hover
{
    background-color: #ef4444;
    color: #fff;
    transform: scale(1.1);
}

@keyframes scaleIn
{
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes typeGlow
{
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.15; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

@keyframes bounceRotate
{
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.3) rotate(-10deg); }
    60% { transform: scale(1.1) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes emojiHover
{
    0% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1); }
}

@keyframes pulse
{
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes cartBounce
{
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes float
{
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(3deg); }
}

@keyframes float-slow
{
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(-2deg); }
}

@keyframes bob
{
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(2deg); }
    66% { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes sparkle
{
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.5); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION: KAWAII TWINKLING STARS (Parallax Enhancement)
   ═══════════════════════════════════════════════════════════════════ */
@keyframes twinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.8) rotate(0deg); }
    25% { opacity: 0.6; transform: scale(1.2) rotate(15deg); }
    50% { opacity: 0.2; transform: scale(1) rotate(-5deg); }
    75% { opacity: 0.7; transform: scale(1.1) rotate(10deg); }
}

@keyframes twinkle-glow {
    0%, 100% { opacity: 0.2; transform: scale(0.7); filter: blur(0px); }
    50% { opacity: 0.8; transform: scale(1.3); filter: blur(1px); }
}

.yh-parallax-star {
    position: absolute;
    pointer-events: none;
    animation: twinkle 3s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.3));
}

.yh-parallax-star:nth-child(odd) {
    animation-name: twinkle-glow;
    animation-duration: 4s;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION: CRITICAL WORDPRESS OVERRIDE FIXES (Must be last in file!)
   These rules override the aggressive reset to fix known WordPress bleed-through.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Button text color fixes (override the global button reset) ─── */
.btn-primary,
.btn-primary:hover,
.btn-primary-full,
.btn-primary-full:hover,
.add-to-cart-btn,
.add-to-cart-btn:hover,
.add-to-cart-btn:active,
.add-to-cart-btn.added,
.yh-add-to-cart-btn,
.yh-add-to-cart-btn:hover,
.yh-add-to-cart-btn:active,
.yh-add-to-cart-btn.added,
.bg-ocean-teal,
.bg-ocean-teal button,
.bg-ocean-teal a,
.bg-ocean-teal svg,
.bg-ocean-teal-90,
.bg-ocean-teal-90 button,
.bg-ocean-teal-90 a,
.bg-ocean-teal-90 svg {
    color: #F5F0EC !important;
}
/* Ensure SVG icons inside ocean teal buttons are also light */
.yh-add-to-cart-btn svg,
.add-to-cart-btn svg {
    stroke: #F5F0EC !important;
}

.yh-pill.active,
.yh-view-btn.active,
.yh-tab-btn.active {
    color: #F5F0EC !important;
}

/* ─── Footer link/button overrides (WP reset makes links ocean-teal) ─── */
.yh-footer a,
.yh-footer .yh-footer-links a,
.yh-footer .yh-footer-social a {
    color: #F5F0EC !important;
}

.yh-footer .yh-footer-links a:hover {
    color: #E0D0EA !important;
}

.yh-footer .yh-footer-heading {
    color: #E0D0EA !important;
}

.yh-footer p,
.yh-footer span {
    color: rgba(245, 240, 236, 0.8) !important;
}

.yh-footer .yh-footer-bottom p {
    color: rgba(245, 240, 236, 0.6) !important;
}

/* ─── Newsletter form in footer ─── */
.yh-footer .yh-newsletter-form .yh-input {
    color: #F5F0EC !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(224, 208, 234, 0.3) !important;
}

.yh-footer .yh-newsletter-form .yh-input::placeholder {
    color: rgba(245, 240, 236, 0.4) !important;
}

.yh-footer .btn-ghost-orchid {
    color: #1E5252 !important;
    background-color: #E0D0EA !important;
}

.yh-footer .btn-ghost-orchid:hover {
    background-color: rgba(224, 208, 234, 0.8) !important;
    color: #1E5252 !important;
}

/* ─── FAQ in footer ─── */
.yh-footer .yh-faq-item {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: transparent !important;
}

.yh-footer .yh-faq-item summary {
    color: #F5F0EC !important;
    list-style: none !important;
}

.yh-footer .yh-faq-item summary::-webkit-details-marker {
    display: none !important;
}

.yh-footer .faq-answer {
    color: rgba(245, 240, 236, 0.75) !important;
}

.yh-footer .faq-chevron {
    color: #E0D0EA !important;
}

/* ─── Rating button persistent visual feedback ─── */
.yh-rating-btn.selected.up {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #16a34a !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), inset 0 1px 2px rgba(34, 197, 94, 0.1) !important;
}

.yh-rating-btn.selected.down {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: #f87171 !important;
    color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), inset 0 1px 2px rgba(239, 68, 68, 0.1) !important;
}

/* ─── Image upload enhanced animations ─── */
.yh-upload-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: var(--card-bg);
    border: 2px solid rgba(224, 208, 234, 0.3);
    border-radius: var(--radius-xl);
    margin-top: 0.5rem;
    animation: uploadSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

@keyframes uploadSlideIn {
    0% { opacity: 0; transform: translateY(10px) scale(0.95); max-height: 0; padding: 0 0.75rem; margin-top: 0; }
    50% { transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); max-height: 120px; }
}

.yh-upload-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #E0D0EA, #1E5252, #fbbf24);
    animation: uploadProgress 0.6s ease forwards;
}

@keyframes uploadProgress {
    0% { width: 0; }
    100% { width: 100%; }
}

.yh-upload-preview-img {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(224, 208, 234, 0.3);
    animation: imgPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes imgPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.yh-upload-preview-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yh-upload-preview-info {
    flex: 1;
    min-width: 0;
}

.yh-upload-preview-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--coffee);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yh-upload-preview-size {
    display: block;
    font-size: 0.6875rem;
    color: rgba(125, 90, 90, 0.5);
    margin-top: 0.125rem;
}

.yh-upload-preview-remove {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-base);
    animation: removeBtnPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

@keyframes removeBtnPop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.yh-upload-preview-remove:hover {
    background-color: #ef4444;
    color: white;
    border-color: #ef4444;
    transform: scale(1.1);
}

/* ─── Upload label enhanced hover ─── */
.yh-upload:hover {
    border-color: #1E5252 !important;
    background-color: rgba(30, 82, 82, 0.04) !important;
    box-shadow: 0 0 0 3px rgba(30, 82, 82, 0.08) !important;
}

/* ─── Enhanced button press feedback ─── */
.yh-rating-btn,
.yh-type-btn,
.btn-primary-full,
.btn-primary {
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.yh-rating-btn:active,
.yh-type-btn:active,
.btn-primary-full:active,
.btn-primary:active {
    transform: scale(0.94) !important;
}

/* ─── Textarea auto-resize (no scrollbar) ─── */
.yh-textarea {
    overflow: hidden !important;
    resize: none !important;
    min-height: 48px !important;
    transition: height 0.1s ease !important;
}

/* ─── Details/Summary WordPress fix ─── */
details.yh-faq-item {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

details.yh-faq-item summary {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.875rem 1rem !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    border-radius: var(--radius) !important;
}

details.yh-faq-item summary::-webkit-details-marker {
    display: none !important;
}

details.yh-faq-item summary::marker {
    display: none !important;
    content: '' !important;
}

/* ─── Product page template ─── */
.yh-product-page-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .yh-product-page-gallery {
        grid-template-columns: 1fr 1fr;
    }
}

.yh-product-page-gallery img {
    width: 100%;
    border-radius: var(--radius-xl);
    aspect-ratio: 1;
    object-fit: cover;
    background-color: rgba(224, 208, 234, 0.15);
}

.yh-product-page-info h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.yh-product-page-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ocean-teal);
    margin-bottom: 1rem;
}

/* ─── Blog page single post ─── */
.yh-blog-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

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

.yh-blog-card {
    background-color: var(--card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
    display: block;
    text-decoration: none !important;
}

.yh-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.yh-blog-card-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}

.yh-blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.yh-blog-card:hover .yh-blog-card-img img {
    transform: scale(1.05);
}

.yh-blog-card-tag {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
}

.yh-blog-card-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: rgba(125, 90, 90, 0.5);
    margin-bottom: 0.375rem;
}

.yh-blog-list-card {
    display: flex;
    gap: 1rem;
    background-color: var(--card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    text-decoration: none !important;
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.yh-blog-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.yh-blog-list-card .blog-thumb {
    width: 6rem;
    height: 6rem;
    flex-shrink: 0;
    overflow: hidden;
}

.yh-blog-list-card .blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yh-blog-list-card .blog-content {
    padding: 0.875rem;
    flex: 1;
    min-width: 0;
}

/* ─── Type button selection styles (personalized) ─── */
@keyframes typeGlow {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1); opacity: 0.15; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

@keyframes bounceRotate {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.3) rotate(-10deg); }
    50% { transform: scale(1.1) rotate(0deg); }
    75% { transform: scale(1.3) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes emojiHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.2) rotate(5deg); }
    100% { transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION X: V3.1 ADDITIONS — Form Validation, Multi-Upload, FAQ Fix, Slider, Product Detail, Upselling, Blog, Account
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Form Validation */
.yh-input-error, .yh-textarea-error {
    border-color: #f87171 !important;
    animation: shake 0.4s ease !important;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
.yh-form-error {
    display: flex; align-items: center; gap: 0.375rem;
    padding: 0.5rem 0.75rem; border-radius: var(--radius, 0.75rem);
    background-color: rgba(248, 113, 113, 0.1);
    color: #ef4444; font-size: 0.8125rem; font-weight: 500;
    margin-bottom: 0.75rem;
    animation: fadeInUp 0.3s ease;
}

/* Multi-Upload Grid */
.yh-upload-previews-grid {
    display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;
}

/* FAQ Custom Accordion (replace details/summary) */
.yh-faq-question {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 1rem; cursor: pointer; font-size: 0.875rem; font-weight: 500;
    color: var(--text-light, #F5F0EC); user-select: none;
}
.yh-faq-question:hover { background-color: rgba(255, 255, 255, 0.05); }

/* Homepage Hero Slider */
.yh-slider { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; border-radius: var(--radius-xl, 1rem); overflow: hidden; }
@media (max-width: 640px) { .yh-slider { aspect-ratio: 16/10; } }
.yh-slider-track { display: flex; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); height: 100%; }
.yh-slider-slide { min-width: 100%; position: relative; }
.yh-slider-slide img { width: 100%; height: 100%; object-fit: contain; }
.yh-slider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    background: linear-gradient(to top, rgba(90, 62, 62, 0.85) 0%, rgba(90, 62, 62, 0.5) 50%, transparent 100%);
    z-index: 1;
}
.yh-slider-dots { position: absolute; bottom: 0.75rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.375rem; z-index: 2; }
.yh-slider-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 9999px;
    background: rgba(255,255,255,0.4); border: none; cursor: pointer;
    transition: all 0.3s ease; padding: 0;
}
.yh-slider-dot.active { background: white; width: 1.5rem; }
.yh-slider-btn {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 2rem; height: 2rem; border-radius: 9999px;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
    border: none; color: white; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; font-size: 1rem;
}
.yh-slider-btn:hover { background: rgba(255,255,255,0.4); }
.yh-slider-btn.prev { left: 0.5rem; }
.yh-slider-btn.next { right: 0.5rem; }

/* Product Detail Modal */
.yh-product-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px); z-index: 80;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; animation: fadeIn 0.2s ease;
}
.yh-product-modal {
    background: var(--card-bg, #FBF7F4); border-radius: var(--radius-xl, 1rem);
    max-width: 42rem; width: 100%; max-height: 90vh;
    overflow-y: auto; animation: scaleIn 0.3s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
@media (max-width: 640px) {
    .yh-product-modal { position: fixed; bottom: 0; left: 0; right: 0; max-height: 85vh; border-radius: 1rem 1rem 0 0; max-width: 100%; animation: slideUp 0.3s ease; }
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.yh-product-modal-img { aspect-ratio: 1; overflow: hidden; background: rgba(224,208,234,0.2); }
.yh-product-modal-img img { width: 100%; height: 100%; object-fit: cover; }
.yh-product-modal-body { padding: 1.5rem; }
.yh-product-modal-close {
    position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem;
    border-radius: 9999px; border: none; background: rgba(248,244,240,0.9); cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--coffee, #7D5A5A);
    transition: all 0.2s ease; z-index: 2; font-size: 1rem;
}
.yh-product-modal-close:hover { background: rgba(224,208,234,0.5); }

/* Sale/Original Price on Product Cards */
.yh-product-card-pricing { display: flex; flex-direction: row; align-items: baseline; gap: 0.375rem; margin-top: 0.125rem; }
.yh-product-card-original-price { font-size: 0.75rem; color: rgba(125,90,90,0.4); text-decoration: line-through; font-weight: 400; }
.yh-badge-sale { position: absolute; top: 0.5rem; left: 0.5rem; background-color: #ef4444; color: white; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; backdrop-filter: blur(4px); z-index: 2; }
.yh-badge-low-stock { background-color: rgba(249,115,22,0.1); color: #ea580c; }
.yh-badge-popular { background-color: rgba(30,82,82,0.1); color: var(--ocean-teal, #1E5252); }

/* Promo Banner */
.yh-promo-banner {
    background: linear-gradient(90deg, var(--ocean-teal, #1E5252), #2a6e6e);
    color: white; text-align: center; padding: 0.375rem 1rem;
    font-size: 0.75rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    position: relative;
}
.yh-promo-close {
    display: none;
}

/* Trust Section */
.yh-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .yh-trust-grid { grid-template-columns: repeat(4, 1fr); } }
.yh-trust-item { text-align: center; padding: 1rem; background: var(--card-bg, #FBF7F4); border-radius: var(--radius-xl, 1rem); box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.yh-trust-item .trust-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.yh-trust-item .trust-number { font-weight: 700; color: var(--ocean-teal, #1E5252); font-size: 1.125rem; }
.yh-trust-item .trust-label { font-size: 0.6875rem; color: rgba(125,90,90,0.6); margin-top: 0.125rem; }

/* Cart Drawer - Free Shipping Progress */
.yh-shipping-progress { margin-bottom: 0.75rem; }
.yh-shipping-bar { width: 100%; height: 0.375rem; background: rgba(224,208,234,0.3); border-radius: 9999px; overflow: hidden; }
.yh-shipping-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ocean-teal, #1E5252), #2a8e8e); border-radius: 9999px; transition: width 0.5s ease; }
.yh-shipping-text { font-size: 0.6875rem; color: rgba(125,90,90,0.5); margin-top: 0.25rem; text-align: center; }
.yh-upsell-section { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid rgba(224,208,234,0.2); }
.yh-upsell-title { font-size: 0.75rem; font-weight: 600; color: var(--coffee, #7D5A5A); margin-bottom: 0.5rem; }
.yh-upsell-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; cursor: pointer; border-radius: var(--radius, 0.75rem); transition: background 0.2s ease; }
.yh-upsell-item:hover { background: rgba(224,208,234,0.1); }
.yh-upsell-item img { width: 2.5rem; height: 2.5rem; border-radius: var(--radius, 0.75rem); object-fit: cover; }
.yh-upsell-item-info { flex: 1; min-width: 0; }
.yh-upsell-item-name { font-size: 0.75rem; font-weight: 600; color: var(--coffee, #7D5A5A); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yh-upsell-item-price { font-size: 0.6875rem; color: var(--ocean-teal, #1E5252); font-weight: 700; }
.yh-upsell-add { padding: 0.25rem 0.5rem; font-size: 0.6875rem; font-weight: 700; border: none; border-radius: 9999px; background: var(--ocean-teal, #1E5252); color: var(--text-light, #F5F0EC); cursor: pointer; font-family: 'Quicksand', sans-serif; transition: all 0.2s ease; }
.yh-upsell-add:hover { background: rgba(30,82,82,0.9); }

/* Blog Improvements */
.yh-reading-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 100; background: linear-gradient(90deg, var(--ocean-teal, #1E5252), #2a8e8e); transition: width 0.1s linear; border-radius: 0 2px 2px 0; }
.yh-share-buttons { display: flex; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(224,208,234,0.3); }
.yh-share-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(224,208,234,0.4); background: var(--ghost-white, #F8F4F0); color: var(--coffee, #7D5A5A); font-family: 'Quicksand', sans-serif; transition: all var(--transition-base, 0.2s ease); }
.yh-share-btn:hover { background: rgba(224,208,234,0.2); }
.yh-scroll-section { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.yh-scroll-section::-webkit-scrollbar { display: none; }
.yh-scroll-card { min-width: 16rem; scroll-snap-align: start; background: var(--card-bg, #FBF7F4); border-radius: var(--radius-xl, 1rem); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06); cursor: pointer; transition: transform var(--transition-slow, 0.3s ease), box-shadow var(--transition-slow, 0.3s ease); flex-shrink: 0; }
.yh-scroll-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* Modal System */
.yh-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); z-index: 80; display: flex; align-items: flex-end; justify-content: center; padding: 0; animation: fadeIn 0.2s ease; }
@media (min-width: 640px) { .yh-modal-backdrop { align-items: center; padding: 1rem; } }
.yh-modal { background: var(--card-bg, #FBF7F4); border-radius: var(--radius-xl, 1rem) var(--radius-xl, 1rem) 0 0; max-width: 36rem; width: 100%; max-height: 85vh; overflow-y: auto; animation: slideUp 0.3s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
@media (min-width: 640px) { .yh-modal { border-radius: var(--radius-xl, 1rem); max-height: 80vh; } }
.yh-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(224,208,234,0.2); position: sticky; top: 0; background: var(--card-bg, #FBF7F4); z-index: 1; }
.yh-modal-body { padding: 1.25rem; }
.yh-modal-close { width: 2rem; height: 2rem; border-radius: 9999px; border: none; background: var(--ghost-white, #F8F4F0); cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--coffee, #7D5A5A); transition: all var(--transition-base, 0.2s ease); }
.yh-modal-close:hover { background: rgba(224,208,234,0.3); }

/* Order Cards */
.yh-order-card { background: var(--ghost-white, #F8F4F0); border-radius: var(--radius-xl, 1rem); padding: 1rem; margin-bottom: 0.75rem; transition: box-shadow var(--transition-slow, 0.3s ease); }
.yh-order-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.yh-order-status { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; }
.yh-order-status.delivered { background: rgba(34,197,94,0.1); color: #16a34a; }
.yh-order-status.shipped { background: rgba(59,130,246,0.1); color: #2563eb; }
.yh-order-status.processing { background: rgba(249,115,22,0.1); color: #ea580c; }
.yh-order-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.yh-order-item-img { width: 2.5rem; height: 2.5rem; border-radius: var(--radius, 0.75rem); overflow: hidden; background: rgba(224,208,234,0.2); flex-shrink: 0; }
.yh-order-item-img img { width: 100%; height: 100%; object-fit: cover; }

/* Settings Form */
.yh-toggle { position: relative; width: 2.5rem; height: 1.375rem; background: rgba(224,208,234,0.4); border-radius: 9999px; cursor: pointer; transition: background 0.2s; border: none; padding: 0; display: inline-block; }
.yh-toggle.active { background: var(--ocean-teal, #1E5252); }
.yh-toggle::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.125rem; height: 1.125rem; border-radius: 9999px; background: white; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.yh-toggle.active::after { transform: translateX(1.125rem); }

/* Product card clickable */
.yh-product-card { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION: V3.1 NEW STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Promo Banner */
.yh-promo-banner{
    background:linear-gradient(90deg,#1E5252 0%,#2a6e6e 100%);
    color:#F5F0EC;
    justify-content:center;
    position:relative;
    z-index:100;
    overflow:hidden;
}
.yh-promo-banner-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:0.5rem 2.5rem;
    font-size:0.8125rem;
    font-weight:600;
    gap:0.75rem;
}

/* Hero Slider */
.yh-slider{position:relative;width:100%;max-width:1280px;margin:0 auto;border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-lg);}
.yh-slider-inner{position:relative;width:100%;height:20rem;overflow:hidden;background-color:#1E5252;}
@media(min-width:768px){.yh-slider-inner{height:28rem;}}
@media(min-width:1024px){.yh-slider-inner{height:36rem;}}
.yh-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease,transform 0.6s ease;transform:scale(1.03);}
.yh-slide.active{opacity:1;transform:scale(1);z-index:2;}
.yh-slide.next{transform:scale(1.05);}
.yh-slide.prev{transform:scale(0.97);}
.yh-slider-img{width:100%;height:100%;object-fit:contain;object-position:center;}
.yh-slider-overlay{position:absolute;top:auto;bottom:0;left:0;right:0;height:15%;background:linear-gradient(to top,rgba(90,62,62,0.85) 0%,rgba(90,62,62,0.5) 50%,rgba(90,62,62,0) 100%);z-index:1;}
.yh-slider-text{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:1rem 1.5rem;color:#F5F0EC;text-align:center;}
.yh-slider-text h3{font-size:1.25rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,0.3);margin-bottom:0.125rem;}
.yh-slider-text p{font-size:0.8125rem;opacity:0.9;text-shadow:0 1px 2px rgba(0,0,0,0.3);}
@media(min-width:768px){.yh-slider-text h3{font-size:1.5rem;}.yh-slider-text p{font-size:0.9375rem;}.yh-slider-text{padding:1.5rem 2rem;}}
.yh-slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:rgba(245,240,236,0.85);backdrop-filter:blur(8px);border:1px solid rgba(224,208,234,0.3);border-radius:50%;width:2.25rem;height:2.25rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;color:var(--ocean-teal);}
.yh-slider-arrow:hover{background:#F5F0EC;box-shadow:var(--shadow-md);transform:translateY(-50%) scale(1.05);}
.yh-slider-arrow.left{left:0.75rem;}.yh-slider-arrow.right{right:0.75rem;}
.yh-slider-dots{position:absolute;bottom:0.75rem;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:0.5rem;}
.yh-slider-dot{width:0.5rem;height:0.5rem;border-radius:50%;border:none;background:rgba(245,240,236,0.4);cursor:pointer;transition:all 0.2s ease;padding:0;}
.yh-slider-dot.active{background:#F5F0EC;transform:scale(1.3);}

/* Slider paused visual feedback */
.yh-slider.paused .yh-slider-dot.active{background:rgba(245,240,236,0.5);animation:yh-pulse 1.5s ease-in-out infinite;}
@keyframes yh-pulse{0%,100%{opacity:0.5;}50%{opacity:1;}}

/* Product Card Square */
.yh-product-card-square{display:flex;flex-direction:column;background:var(--card-bg);border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-slow);border:1px solid rgba(224,208,234,0.2);}
.yh-product-card-square:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:rgba(224,208,234,0.5);}
.yh-product-card-square .yh-product-card-img{width:100%;aspect-ratio:1;overflow:hidden;position:relative;flex-shrink:0;}
.yh-product-card-square .yh-product-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;}
.yh-product-card-square:hover .yh-product-card-img img{transform:scale(1.05);}
.yh-product-card-square .yh-badge{position:absolute;top:0.5rem;left:0.5rem;z-index:2;}
.yh-product-card-square .yh-badge-sale{position:absolute;top:0.5rem;left:0.5rem;z-index:2;}
.yh-product-card-square .yh-product-card-body{padding:0.625rem 0.75rem;display:flex;flex-direction:column;gap:0.25rem;flex:1;}
.yh-product-card-square .yh-product-card-name{font-size:0.8125rem;font-weight:700;color:var(--coffee);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.yh-product-card-pricing{display:flex;align-items:baseline;gap:0.375rem;margin-top:0.125rem;}
.yh-price-current{font-size:1.125rem;font-weight:800;color:var(--ocean-teal);}
.yh-price-original{font-size:0.75rem;color:rgba(125,90,90,0.4);text-decoration:line-through;}
.yh-badge-sale{background:linear-gradient(135deg,#ef4444,#f97316);color:white;font-size:0.75rem;font-weight:700;padding:0.25rem 0.625rem;border-radius:9999px;text-shadow:0 1px 2px rgba(0,0,0,0.2);}
.yh-add-to-cart-btn{display:flex;align-items:center;justify-content:center;gap:0.375rem;width:100%;padding:0.5rem 0.75rem;background:var(--ocean-teal);color:var(--text-light);border:none;border-radius:0.625rem;font-size:0.8125rem;font-weight:700;cursor:pointer;transition:all 0.2s ease;font-family:var(--font-sans);margin-top:0.25rem;}
.yh-add-to-cart-btn:hover{background:#164040;transform:translateY(-1px);box-shadow:0 2px 8px rgba(30,82,82,0.3);}
.yh-add-to-cart-btn:active{transform:scale(0.97);}
.yh-product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;}
@media(min-width:768px){.yh-product-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.yh-product-grid{grid-template-columns:repeat(4,1fr);}}
.yh-bundle-card{transition:transform 0.2s ease,box-shadow 0.2s ease;}
.yh-bundle-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* FAQ Accordion */
.yh-faq-accordion-item{border-bottom:1px solid rgba(224,208,234,0.2);}
.yh-faq-accordion-item:last-child{border-bottom:none;}
.yh-faq-accordion-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0.875rem 0.75rem;background:none;border:none;cursor:pointer;font-size:0.875rem;font-weight:600;color:var(--coffee);text-align:left;font-family:var(--font-sans);transition:color 0.2s ease;}
.yh-faq-accordion-trigger:hover{color:var(--ocean-teal);}

/* Form Error */
.yh-input-error{border-color:#f87171!important;box-shadow:0 0 0 2px rgba(248,113,113,0.2)!important;animation:yh-shake 0.4s ease;}
@keyframes yh-shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}

/* Upload Previews */
.yh-upload-previews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));gap:0.5rem;margin-top:0.5rem;}
.yh-upload-preview{display:flex;align-items:center;gap:0.5rem;padding:0.375rem;background:var(--ghost-white);border-radius:0.5rem;border:1px solid rgba(224,208,234,0.2);}
.yh-upload-preview-img{width:2.5rem;height:2.5rem;border-radius:0.375rem;overflow:hidden;flex-shrink:0;}
.yh-upload-preview-img img{width:100%;height:100%;object-fit:cover;}
.yh-upload-preview-info{display:flex;flex-direction:column;min-width:0;}
.yh-upload-preview-name{font-size:0.6875rem;font-weight:600;color:var(--coffee);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.yh-upload-preview-size{font-size:0.625rem;color:rgba(125,90,90,0.5);}
.yh-upload-preview-remove{margin-left:auto;background:none;border:none;color:rgba(125,90,90,0.4);cursor:pointer;padding:0.25rem;border-radius:4px;flex-shrink:0;display:flex;align-items:center;}
.yh-upload-preview-remove:hover{color:#ef4444;background:#fef2f2;}

/* Blog Cards */
.yh-blog-featured{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:768px){.yh-blog-featured{grid-template-columns:repeat(2,1fr);}}
.yh-blog-card{background:var(--card-bg);border-radius:1rem;overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-slow);display:block;}
.yh-blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
.yh-blog-card-img{position:relative;aspect-ratio:16/9;overflow:hidden;}
.yh-blog-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;}
.yh-blog-card:hover .yh-blog-card-img img{transform:scale(1.05);}
.yh-blog-card-tag{position:absolute;top:0.75rem;left:0.75rem;}
.yh-blog-card-meta{display:flex;gap:0.75rem;font-size:0.75rem;color:rgba(125,90,90,0.5);margin-bottom:0.5rem;}
.yh-blog-list-card{display:flex;gap:1rem;padding:1rem;background:var(--card-bg);border-radius:1rem;box-shadow:var(--shadow-sm);transition:all var(--transition-slow);}
.yh-blog-list-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.blog-thumb{width:4rem;height:4rem;border-radius:0.75rem;overflow:hidden;flex-shrink:0;}
.blog-thumb img{width:100%;height:100%;object-fit:cover;}
.blog-content{flex:1;min-width:0;}

/* Floating Elements & Animations */
.yh-float-elements{position:fixed;inset:0;pointer-events:none;z-index:0;}
.yh-float-el{position:absolute;}
@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-10px);}}
@keyframes float-slow{0%,100%{transform:translateY(0px);}50%{transform:translateY(-6px);}}
@keyframes bob{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-8px) rotate(3deg);}}
@keyframes sparkle{0%,100%{opacity:0.15;transform:scale(1);}50%{opacity:0.4;transform:scale(1.5);}}
@keyframes scaleIn{0%{opacity:0;transform:scale(0.9);}100%{opacity:1;transform:scale(1);}}
@keyframes typeGlow{0%{transform:translate(-50%,-50%) scale(0);opacity:0;}50%{opacity:0.3;}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0;}}
@keyframes bounceRotate{0%{transform:scale(1) rotate(0deg);}30%{transform:scale(1.2) rotate(-10deg);}60%{transform:scale(0.95) rotate(5deg);}100%{transform:scale(1) rotate(0deg);}}
@keyframes emojiHover{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}
@keyframes heartBeat{0%{transform:scale(1);}15%{transform:scale(1.25);}30%{transform:scale(1);}45%{transform:scale(1.15);}60%{transform:scale(1);}}

/* Store page card size reduction */
#yh-store-grid .yh-product-card-square { max-width: 16rem; margin: 0 auto; }

/* Fun Fact card - light text on ocean teal */
.yh-fun-fact-card,
.yh-fun-fact-card p,
.yh-fun-fact-card span
{
    color: #F5F0EC !important;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION: V3.7 ADDITIONS — Wishlist Drawer, Card Wishlist Button, Badge Animations
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── Wishlist Drawer (mirrors cart drawer) ─── */
.yh-wishlist-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(45, 36, 36, 0.3);
    z-index: 100;
    transition: opacity 0.3s ease;
}
.yh-wishlist-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 24rem;
    background-color: #FBF7F4;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
    z-index: 101;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.yh-wishlist-drawer:not(.closing) {
    transform: translateX(0);
}
.yh-wishlist-drawer.closing {
    transform: translateX(100%);
}
.yh-wishlist-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(224, 208, 234, 0.2);
    flex-shrink: 0;
}
.yh-wishlist-drawer-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.25rem;
}
.yh-wishlist-drawer-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(224, 208, 234, 0.2);
    flex-shrink: 0;
}
.yh-wishlist-item-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    position: relative;
    margin-bottom: 0.25rem;
}
.yh-wishlist-item-link:hover {
    border-color: rgba(30, 82, 82, 0.25);
    background: rgba(30, 82, 82, 0.05);
    box-shadow: 0 2px 8px rgba(30, 82, 82, 0.1);
    transform: translateY(-1px);
}
.yh-wishlist-item-link:hover .yh-wishlist-item-name {
    color: #1E5252;
}
.yh-wishlist-item-link:hover .yh-wishlist-item-img {
    transform: scale(1.05);
}
.yh-wishlist-item-img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
    border-radius: 0.5rem;
    background: rgba(224, 208, 234, 0.12);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.yh-wishlist-item-info {
    flex: 1;
    min-width: 0;
}
.yh-wishlist-item-name {
    font-weight: 600;
    color: #2D2424;
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    transition: color 0.2s ease;
}
.yh-wishlist-item-price {
    color: #1E5252;
    font-weight: 700;
    font-size: 0.75rem;
    margin-top: 0.125rem;
    display: block;
}
.yh-wishlist-drawer-item-remove {
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(125, 90, 90, 0.4);
    padding: 0;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.yh-wishlist-drawer-item-remove:hover {
    color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.08);
}
.yh-wishlist-drawer-item-remove:active {
    transform: scale(0.9);
}

/* v4.32: Wishlist item wrapper with action buttons */
.yh-wishlist-item-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0.25rem;
}
.yh-wishlist-item-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: 0.25rem;
}
.yh-wishlist-item-add-cart {
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(30, 82, 82, 0.5);
    padding: 0;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.yh-wishlist-item-add-cart:hover {
    color: #1E5252 !important;
    background-color: rgba(30, 82, 82, 0.08);
    transform: translateY(-1px);
}
.yh-wishlist-item-add-cart:active {
    transform: scale(0.9);
}
.yh-wishlist-item-add-cart.added {
    color: #22c55e !important;
    background-color: rgba(34, 197, 94, 0.08);
}
.yh-wishlist-item-add-cart.adding {
    color: #1E5252 !important;
}
/* Adjust the wishlist item link to accommodate action buttons */
.yh-wishlist-item-wrapper .yh-wishlist-item-link {
    flex: 1;
    min-width: 0;
}
.yh-wishlist-drawer-toast-container {
    position: relative;
}
.yh-wishlist-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #ef4444;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cartBadgePop 0.3s ease;
    pointer-events: none;
}

/* ─── Wishlist Nav Icon Bounce Animation ─── */
@keyframes wishlistHeartBounce {
    0% { transform: scale(1); }
    20% { transform: scale(1.3) rotate(-10deg); }
    40% { transform: scale(0.9) rotate(5deg); }
    60% { transform: scale(1.15) rotate(-3deg); }
    80% { transform: scale(0.97) rotate(1deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.wishlist-heart-bounce {
    animation: wishlistHeartBounce 0.6s ease;
}
.wishlist-heart-bounce svg {
    stroke: #ef4444 !important;
}

/* ─── Card Wishlist Button (heart on product cards) ─── */
.yh-card-wishlist-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(125, 90, 90, 0.5);
    padding: 0;
    transition: all 0.2s ease;
    z-index: 5;
    opacity: 0;
    transform: scale(0.8);
}
.yh-product-card:hover .yh-card-wishlist-btn {
    opacity: 1;
    transform: scale(1);
}
.yh-card-wishlist-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    color: #ef4444;
    transform: scale(1.1) !important;
}
.yh-card-wishlist-btn.wishlisted {
    opacity: 1;
    transform: scale(1);
    color: #ef4444;
}
.yh-card-wishlist-btn.wishlisted svg {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}
.yh-card-wishlist-btn.wishlisted {
    background: rgba(239, 68, 68, 0.08);
}

/* ─── Cart Badge Pulse Animation ─── */
@keyframes cartBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.yh-cart-badge-pulse {
    animation: cartBadgePop 0.3s ease, cartBadgePulse 2s ease-in-out 0.3s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION: V3.9 — WOOCOMMERCE CHECKOUT OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Checkout grid */
.yh-checkout-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) {
    .yh-checkout-grid { grid-template-columns: 1.2fr 0.8fr; gap: 1.5rem; align-items: start; }
}

/* Form rows */
.woocommerce form .form-row,
.woocommerce-page form .form-row { padding: 0.25rem 0; margin-bottom: 0.375rem; }

.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
    font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.8125rem;
    color: #7D5A5A; margin-bottom: 0.25rem; display: block;
}

.woocommerce form .form-row .required { color: #ef4444; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
    font-family: 'Quicksand', sans-serif; font-size: 0.875rem; color: #2D2424;
    background-color: #FFFFFF !important; border: 1.5px solid rgba(224, 208, 234, 0.4) !important;
    border-radius: 0.625rem !important; padding: 0.625rem 0.875rem !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%; height: auto; line-height: 1.5;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: #1E5252 !important;
    box-shadow: 0 0 0 3px rgba(30, 82, 82, 0.1) !important;
    outline: none;
}

/* Section headings */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.woocommerce-checkout h3 {
    font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 1rem;
    color: #7D5A5A !important; margin-bottom: 0.75rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(224, 208, 234, 0.2);
}

/* Payment section — v4.26: REMOVED duplicate CSS.
   All payment styling is now handled exclusively by page-checkout.php inline CSS.
   Keeping duplicate #payment rules here with !important was overriding the
   v4.22/v4.23 payment fixes (event delegation, Affirm visibility, grid layout).
   This was a hidden cause of checkout enhancements not appearing to change. */

/* Place Order button */
#place_order {
    font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.9375rem;
    color: #F5F0EC !important; background: #1E5252; border: 2px solid #1E5252;
    border-radius: 0.75rem; padding: 0.75rem 1.5rem; cursor: pointer;
    transition: all 0.2s ease; width: 100%; display: block; text-align: center; line-height: 1.5;
}

#place_order:hover {
    background: #164040 !important; border-color: #164040 !important;
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 82, 82, 0.3);
}

/* Checkbox styling */
.woocommerce form .form-row input[type="checkbox"] { accent-color: #1E5252; width: 1rem; height: 1rem; margin-right: 0.375rem; vertical-align: middle; }

/* Validation errors */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
    border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Two-column form rows */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 48%; float: none; display: inline-block; vertical-align: top; }
.woocommerce form .form-row-first { margin-right: 2%; }
.woocommerce form .form-row-wide { clear: both; }

/* Terms */
.woocommerce-terms-and-conditions-wrapper { margin: 1rem 0; font-size: 0.8125rem; color: rgba(125, 90, 90, 0.7); }
.woocommerce-terms-and-conditions-wrapper a { color: #1E5252; text-decoration: underline; }

/* Coupon form */
.woocommerce-form-coupon {
    background: rgba(224, 208, 234, 0.08) !important; border-radius: 0.625rem;
    padding: 0.75rem 1rem; margin-bottom: 1rem;
    border: 1px solid rgba(224, 208, 234, 0.2) !important;
}

.woocommerce-form-coupon input.input-text {
    border: 1.5px solid rgba(224, 208, 234, 0.4) !important; border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important; font-family: 'Quicksand', sans-serif; font-size: 0.875rem;
}

.woocommerce-form-coupon button {
    font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.8125rem;
    color: #F5F0EC !important; background: #1E5252; border: none;
    border-radius: 0.5rem; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.2s ease;
}

.woocommerce-form-coupon button:hover { background: #164040 !important; }

/* Login form */
.woocommerce-form-login {
    background: rgba(224, 208, 234, 0.08) !important; border-radius: 0.625rem;
    padding: 1rem; margin-bottom: 1rem;
    border: 1px solid rgba(224, 208, 234, 0.2) !important;
}

.woocommerce-form-login button {
    font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.8125rem;
    color: #F5F0EC !important; background: #1E5252; border: none;
    border-radius: 0.5rem; padding: 0.5rem 1rem; cursor: pointer;
}

/* Ship to different address */
.woocommerce-shipping-fields #ship-to-different-address {
    font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 0.9375rem; color: #7D5A5A;
}

.woocommerce-shipping-fields #ship-to-different-address label { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; }

/* Clear floats */
.woocommerce form .form-row::after { content: ''; display: table; clear: both; }

/* Mobile checkout */
@media (max-width: 767px) {
    .woocommerce form .form-row-first,
    .woocommerce form .form-row-last { width: 100%; display: block; margin-right: 0; }
}

/* ─── Demo Orders styling ─── */
#yh-demo-orders-section .yh-order-card {
    border: 1px dashed rgba(224, 208, 234, 0.5);
}

/* ─── Wishlist page card image fix ─── */
#yh-wishlist-container .yh-product-card-img img {
    object-fit: contain;
}

/* ─── Product detail image sizing fix ─── */
.yh-product-main-img-wrap {
    max-height: 26rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yh-product-main-img {
    max-height: 26rem;
    object-fit: contain;
}