:root{--color-primary:#555992;--color-primary-dark:#3B4083;--color-primary-light:#BEC2FF;--color-on-primary:#FFFFFF;--color-primary-container:#E0E0FF;--color-on-primary-container:#3E4278;--color-secondary:#5C5D72;--color-secondary-dark:#454556;--color-secondary-light:#E2E0F6;--color-on-secondary:#FFFFFF;--color-secondary-container:#E1E0F9;--color-on-secondary-container:#444559;--color-tertiary:#845416;--color-on-tertiary:#FFFFFF;--color-tertiary-container:#FFDCBB;--color-on-tertiary-container:#673D00;--color-surface:#FBF8FF;--color-surface-tint:#555992;--color-surface-variant:#E4E1EC;--color-on-surface:#1B1B21;--color-on-surface-variant:#46464F;--color-surface-dim:#DBD9E0;--color-surface-bright:#FBF8FF;--color-surface-container-lowest:#FFFFFF;--color-surface-container-low:#F5F2FA;--color-surface-container:#F0ECF4;--color-surface-container-high:#EAE7EF;--color-surface-container-highest:#E4E1E9;--color-background:#FBF8FF;--color-on-background:#1B1B21;--color-error:#BA1A1A;--color-on-error:#FFFFFF;--color-error-container:#FFDAD6;--color-on-error-container:#93000A;--color-success:#2E7D32;--color-success-container:#E8F5E9;--color-warning:#FFB300;--color-warning-container:#FFF3E0;--color-favorite:#FF4444;--color-favorite-container:#FFE8E8;--color-outline:#777680;--color-outline-variant:#C7C5D0;--color-inverse-surface:#303036;--color-inverse-on-surface:#F2EFF7;--color-inverse-primary:#BEC2FF;--color-scrim:#000000;--color-shadow:#000000;--color-disabled-background:#E4E1E9;--color-disabled-content:#78767A;--font-family-base:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;--font-size-display-large:57px;--font-size-display-medium:45px;--font-size-display-small:36px;--font-size-headline-large:32px;--font-size-headline-medium:28px;--font-size-headline-small:24px;--font-size-title-large:22px;--font-size-title-medium:16px;--font-size-title-small:14px;--font-size-body-large:16px;--font-size-body-medium:14px;--font-size-body-small:12px;--font-size-label-large:14px;--font-size-label-medium:12px;--font-size-label-small:11px;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.75;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-xxl:32px;--spacing-xxxl:48px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);--transition-fast:150ms ease-in-out;--transition-base:250ms ease-in-out;--transition-slow:350ms ease-in-out;--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-modal-backdrop:1040;--z-index-modal:1050;--z-index-popover:1060;--z-index-tooltip:1070;--breakpoint-mobile:480px;--breakpoint-tablet:768px;--breakpoint-desktop:1024px;--breakpoint-wide:1200px}@media (prefers-color-scheme:dark){:root{--color-primary:#BEC2FF;--color-primary-dark:#E0E0FF;--color-primary-light:#3B4083;--color-on-primary:#272B60;--color-primary-container:#3E4278;--color-on-primary-container:#E0E0FF;--color-secondary:#C5C4DD;--color-secondary-dark:#E2E0F6;--color-secondary-light:#454556;--color-on-secondary:#2E2F42;--color-secondary-container:#444559;--color-on-secondary-container:#E1E0F9;--color-tertiary:#FBBA73;--color-on-tertiary:#482900;--color-tertiary-container:#673D00;--color-on-tertiary-container:#FFDCBB;--color-surface:#131318;--color-surface-tint:#BEC2FF;--color-surface-variant:#46464F;--color-on-surface:#E4E1E9;--color-on-surface-variant:#C7C5D0;--color-surface-dim:#131318;--color-surface-bright:#39393F;--color-surface-container-lowest:#0E0E13;--color-surface-container-low:#1B1B21;--color-surface-container:#1F1F25;--color-surface-container-high:#2A292F;--color-surface-container-highest:#34343A;--color-background:#131318;--color-on-background:#E4E1E9;--color-error:#FFB4AB;--color-on-error:#690005;--color-error-container:#93000A;--color-on-error-container:#FFDAD6;--color-success:#81C784;--color-success-container:#1B5E20;--color-warning:#FFD54F;--color-warning-container:#5D4037;--color-favorite:#FF6B6B;--color-favorite-container:#5C1A1A;--color-outline:#91909A;--color-outline-variant:#46464F;--color-inverse-surface:#E4E1E9;--color-inverse-on-surface:#303036;--color-inverse-primary:#555992;--color-scrim:#000000;--color-shadow:#000000;--color-disabled-background:#313033;--color-disabled-content:#78767A;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -1px rgba(0,0,0,0.3);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.4),0 4px 6px -2px rgba(0,0,0,0.3);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.4),0 10px 10px -5px rgba(0,0,0,0.3)}}.display-large{font-size:var(--font-size-display-large);font-weight:var(--font-weight-regular);line-height:var(--line-height-tight)}.headline-medium{font-size:var(--font-size-headline-medium);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.headline-small{font-size:var(--font-size-headline-small);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.title-large{font-size:var(--font-size-title-large);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}.title-medium{font-size:var(--font-size-title-medium);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}.body-large{font-size:var(--font-size-body-large);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.body-medium{font-size:var(--font-size-body-medium);font-weight:var(--font-weight-regular);line-height:var(--line-height-normal)}.label-small{font-size:var(--font-size-label-small);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);letter-spacing:0.5px}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-y:scroll}body{font-family:var(--font-family-base);background-color:var(--color-background);color:var(--color-on-background);line-height:var(--line-height-normal);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-xl)}.container-fluid{width:100%;padding:0 var(--spacing-xl)}.mobile-search-container{display:block}@media (min-width:768px){.mobile-search-container{display:none}}.header{position:relative}@media (max-width:767px){.header{height:0;overflow:visible;background:transparent;box-shadow:none}.header-content{visibility:hidden;height:0}.header-content .island-container{visibility:visible}.header-content .logo,.header-content .desktop-nav,.header-content .back-button{display:none}}@media (min-width:768px){.header{display:block;position:fixed;top:0;left:0;right:0;z-index:var(--z-index-fixed);background-color:var(--color-surface-container);color:var(--color-on-surface);box-shadow:var(--shadow-sm);transition:transform 0.3s ease-in-out;will-change:transform}.header-content{padding:var(--spacing-md) 0;min-height:64px}.header-scroll-hidden{transform:translateY(-100%)}}.header h1{font-size:var(--font-size-headline-medium);font-weight:var(--font-weight-bold);margin:0}.header a{color:inherit;text-decoration:none;transition:opacity var(--transition-fast)}.header a:hover{opacity:0.8}.header-content{display:flex;align-items:center;gap:16px}@media (min-width:768px){.header-content{gap:24px}}.logo{margin:0;font-size:20px;font-weight:700;flex-shrink:0;line-height:1.2}@media (min-width:768px){.logo{font-size:24px}}.logo a{text-decoration:none;color:inherit}.header-center{flex:1;max-width:600px}.back-button{background:transparent;border:none;font-size:14px;font-weight:500;cursor:pointer;padding:4px 8px;color:inherit;display:flex;align-items:center;justify-content:center;gap:4px;border-radius:6px;transition:background-color 0.2s;flex-shrink:0;line-height:1;height:28px;white-space:nowrap}.back-button:hover{background-color:rgba(0,0,0,0.05)}@media (min-width:768px){.back-button{font-size:14px;padding:4px 8px;height:28px}}.main-content{padding:var(--spacing-2xl) 0;flex:1}@media (max-width:767px){.main-content{padding-top:72px;padding-bottom:80px}}@media (min-width:768px){.main-content{padding-top:120px}}.footer{background-color:var(--color-surface-variant);padding:var(--spacing-xl) 0;text-align:center;color:var(--color-on-surface-variant);margin-top:var(--spacing-3xl);border-top:1px solid var(--color-outline-variant)}.footer p{margin:0;font-size:var(--font-size-body-medium)}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:var(--spacing-lg)}.spinner{width:48px;height:48px;border:4px solid var(--color-outline-variant);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:var(--font-size-body-large);color:var(--color-on-surface-variant)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.flex-center{display:flex;align-items:center;justify-content:center}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.p-1{padding:var(--spacing-xs)}.p-2{padding:var(--spacing-sm)}.p-3{padding:var(--spacing-md)}.p-4{padding:var(--spacing-lg)}@media (max-width:768px){.container{padding:0 var(--spacing-lg)}.header h1{font-size:var(--font-size-headline-small)}}.btn{padding:var(--spacing-md) var(--spacing-xl);border:none;border-radius:var(--radius-full);font-size:var(--font-size-label-large);font-weight:var(--font-weight-medium);font-family:var(--font-family-base);cursor:pointer;transition:all var(--transition-base);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.btn-primary{background-color:var(--color-primary);color:var(--color-on-primary)}.btn-primary:hover{background-color:var(--color-primary-dark);box-shadow:var(--shadow-md);transform:translateY(-2px)}.btn-secondary{background-color:var(--color-secondary);color:var(--color-on-secondary)}.btn-secondary:hover{background-color:var(--color-secondary-dark)}.btn-outlined{background-color:transparent;color:var(--color-primary);border:2px solid var(--color-primary)}.btn-outlined:hover{background-color:var(--color-primary-container)}.btn:active{transform:scale(0.98)}.btn:disabled{opacity:0.5;cursor:not-allowed}.btn-disabled{background-color:var(--color-disabled-background);color:var(--color-disabled-content);cursor:not-allowed}.card{background-color:var(--color-surface);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:box-shadow var(--transition-base)}.card-elevated{box-shadow:var(--shadow-lg)}.card:hover{box-shadow:var(--shadow-lg)}.badge{display:inline-flex;align-items:center;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-full);font-size:var(--font-size-label-small);font-weight:var(--font-weight-medium)}.badge-primary{background-color:var(--color-primary-container);color:var(--color-on-primary-container)}.badge-secondary{background-color:var(--color-secondary-container);color:var(--color-on-secondary-container)}.badge-success{background-color:var(--color-success-container);color:var(--color-success)}.badge-error{background-color:var(--color-error-container);color:var(--color-error)}.link{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}.link:hover{color:var(--color-primary-dark);text-decoration:underline}.back-button{display:inline-flex;align-items:center;color:var(--color-primary);text-decoration:none;font-weight:var(--font-weight-medium);margin-bottom:var(--spacing-xl);transition:color var(--transition-base)}.back-button:hover{color:var(--color-primary-dark)}.divider{height:1px;background-color:var(--color-outline-variant);border:none;margin:var(--spacing-lg) 0}.status-indicator{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-full);font-size:var(--font-size-body-small);font-weight:var(--font-weight-semibold);width:fit-content}.in-stock{background-color:var(--color-success-container);color:var(--color-success)}.out-of-stock{background-color:var(--color-error-container);color:var(--color-error)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn var(--transition-base)}.slide-up{animation:slideUp var(--transition-base)}.slide-down{animation:slideDown var(--transition-base)}.desktop-nav{display:none;gap:8px;margin-left:auto;flex-shrink:0}@media (min-width:768px){.desktop-nav{display:flex}}.desktop-nav .nav-link{text-decoration:none;color:var(--color-on-surface);font-weight:500;font-size:15px;padding:10px 20px;border-radius:8px;transition:all 0.2s;white-space:nowrap}.desktop-nav .nav-link:hover{background:var(--color-surface-variant)}.desktop-nav .nav-link.active{color:var(--color-primary);background:var(--color-primary-light)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;background-color:var(--color-surface);padding:var(--spacing-sm) 0;box-shadow:var(--shadow-sm);z-index:var(--z-index-sticky)}@media (min-width:768px){.bottom-nav{display:none}}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;text-decoration:none;color:var(--color-on-surface-variant);transition:all 0.2s ease;border-radius:8px;min-width:64px;flex:1;max-width:100px}.nav-item:focus{outline:none;-webkit-tap-highlight-color:transparent}@media (hover:hover){.nav-item:hover{background:var(--color-surface-variant)}}.nav-item.active{color:var(--color-primary)}.nav-item.active .nav-icon{background:var(--color-primary-light);border-radius:16px;padding:4px 16px}.nav-icon{font-size:24px;line-height:1}.nav-label{font-size:12px;font-weight:500}.lang-switcher{display:flex;align-items:center;gap:4px;margin-left:12px;padding-left:12px;border-left:1px solid var(--color-outline-variant)}.lang-option{font-size:13px;font-weight:500;color:var(--color-on-surface-variant);cursor:default}.lang-option a{text-decoration:none;color:var(--color-on-surface-variant);padding:4px 6px;border-radius:4px;transition:all 0.2s}.lang-option a:hover{color:var(--color-primary);background:var(--color-primary-light)}.lang-option.active{color:var(--color-primary);font-weight:700}.main-content{min-height:calc(100vh - 200px)}@media (max-width:767px){.main-content{padding-bottom:80px}}@media (max-width:767px){.header-content{gap:12px}.logo{font-size:20px}.header-center{max-width:none}.back-button{padding:8px;font-size:14px}}