@import "https://fonts.googleapis.com/css2?family=Anton&family=Be+Vietnam+Pro:wght@400;500;700&display=swap";
:root{--color-primary:#a33e00;--color-primary-container:#f60;--color-on-primary-container:#561d00;--color-secondary:#5f5e5e;--color-secondary-container:#e2dfde;--color-on-secondary-container:#636262;--color-tertiary:#685d4c;--color-tertiary-container:#a29582;--color-on-tertiary-container:#372e20;--color-error:#ba1a1a;--color-on-error:#fff;--color-background:#fcf9f4;--color-on-background:#1c1c19;--color-surface:#fcf9f4;--color-surface-dim:#dcdad5;--color-surface-bright:#fcf9f4;--color-on-surface:#1c1c19;--color-on-surface-variant:#5a4136;--color-inverse-surface:#31302d;--color-inverse-on-surface:#f3f0eb;--color-outline:#8e7164;--color-outline-variant:#e3bfb1;--font-headline:"Anton", sans-serif;--font-body:"Be Vietnam Pro", sans-serif;--spacing-xs:4px;--spacing-base:8px;--spacing-sm:12px;--spacing-md:24px;--spacing-lg:48px;--spacing-xl:80px;--layout-gutter:24px;--margin-mobile:16px;--margin-desktop:64px;--radius-sm:.125rem;--radius-default:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-full:9999px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-background);color:var(--color-on-background);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-headline);text-transform:uppercase;margin-bottom:var(--spacing-sm);color:var(--color-on-surface);font-weight:400}h1{letter-spacing:.02em;font-size:clamp(36px,8vw,64px);line-height:1.1}h2{font-size:clamp(28px,6vw,48px);line-height:1.2}h3{font-size:clamp(22px,4vw,32px);line-height:1.2}a{color:inherit;text-decoration:none}.container{width:100%;max-width:1280px;padding-left:var(--margin-mobile);padding-right:var(--margin-mobile);margin:0 auto}@media (min-width:768px){.container{padding-left:var(--margin-desktop);padding-right:var(--margin-desktop)}}.text-body-lg{font-size:18px;line-height:1.6}.text-label-bold{font-size:14px;font-weight:700;line-height:1.2}.price-display{font-family:var(--font-headline);color:var(--color-primary-container);font-size:24px;line-height:1}.border-on-background{border:2px solid var(--color-on-background)}.hard-depth{box-shadow:8px 8px 0px 0px var(--color-on-background)}.material-symbols-outlined{letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;-webkit-font-smoothing:antialiased;direction:ltr;font-family:Material Symbols Outlined;font-size:24px;font-style:normal;font-weight:400;line-height:1;display:inline-block}[dir=rtl]{--font-headline:"Cairo", sans-serif;--font-body:"Cairo", sans-serif;text-align:right}[dir=rtl] .rtl-mirror{display:inline-block;transform:scaleX(-1)}[dir=rtl] .text-left{text-align:right}[dir=rtl] .text-right{text-align:left}
.floating-cart{bottom:var(--margin-mobile);right:var(--margin-mobile);z-index:50;position:fixed}@media (min-width:768px){.floating-cart{bottom:var(--margin-desktop);right:var(--margin-desktop)}}.cart-fab{background-color:var(--color-primary-container);color:var(--color-on-background);border-radius:var(--radius-full);border:4px solid var(--color-on-background);cursor:pointer;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .2s cubic-bezier(.4,0,.2,1),background-color .2s,color .2s,box-shadow .2s;display:flex;position:relative}.cart-fab:hover{background-color:var(--color-primary);color:#fff;transform:scale(1.08)}.cart-fab .icon{font-variation-settings:"FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24;font-family:Material Symbols Outlined;font-size:28px}.cart-badge-count{background-color:var(--color-on-background);color:var(--color-background);border-radius:var(--radius-full);border:2px solid var(--color-primary-container);justify-content:center;align-items:center;width:24px;height:24px;font-size:12px;font-weight:700;display:flex;position:absolute;top:-2px;right:-2px}.cart-toast{bottom:calc(var(--margin-mobile) + 80px);right:var(--margin-mobile);background-color:var(--color-surface);color:var(--color-on-background);padding:var(--spacing-sm) var(--spacing-md);border:3px solid var(--color-on-background);border-radius:var(--radius-md);box-shadow:6px 6px 0px var(--color-on-background);align-items:center;gap:var(--spacing-base);z-index:60;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideInUp;display:flex;position:fixed}@media (min-width:768px){.cart-toast{bottom:calc(var(--margin-desktop) + 80px);right:var(--margin-desktop)}}.toast-icon{color:#1b8a5a;font-size:24px}.toast-text{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.05em;font-size:14px;font-weight:700}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.cart-drawer-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:310;background-color:#1c1c1966;width:100vw;height:100vh;animation:.2s ease-out forwards fadeIn;position:fixed;top:0;left:0}.cart-drawer{background-color:var(--color-surface);z-index:311;flex-direction:column;width:100%;max-width:440px;height:100dvh;animation:.3s cubic-bezier(.16,1,.3,1) forwards slideInLeft;display:flex;position:fixed;top:0;right:0;box-shadow:-10px 0 30px #0000000d}@media (min-width:768px){.cart-drawer{border-left:4px solid var(--color-on-background)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(100%)}to{transform:translate(0)}}.cart-drawer-header{padding:var(--spacing-md);border-bottom:3px solid var(--color-on-background);justify-content:space-between;align-items:center;display:flex}.cart-drawer-header h2{font-family:var(--font-headline);color:var(--color-on-background);margin-bottom:0;font-size:32px}.cart-drawer-close{border:2px solid var(--color-on-background);border-radius:var(--radius-full);cursor:pointer;background:0 0;justify-content:center;align-items:center;width:40px;height:40px;transition:transform .2s,background-color .2s;display:flex}.cart-drawer-close:hover{background-color:var(--color-on-background);color:var(--color-background);transform:rotate(90deg)}.cart-drawer-body{padding:var(--spacing-md);flex:1;overflow-y:auto}.cart-empty-state{text-align:center;height:100%;padding:var(--spacing-lg) var(--spacing-md);flex-direction:column;justify-content:center;align-items:center;display:flex}.cart-empty-state .empty-icon{color:var(--color-secondary);margin-bottom:var(--spacing-sm);font-size:64px}.cart-empty-state h3{font-family:var(--font-headline);margin-bottom:var(--spacing-xs);font-size:24px}.cart-empty-state p{color:var(--color-on-surface-variant);margin-bottom:var(--spacing-md);font-size:14px}.cart-items-list{gap:var(--spacing-md);flex-direction:column;display:flex}.cart-item-row{gap:var(--spacing-sm);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--color-surface-dim);display:flex}.cart-item-row:last-child{border-bottom:none}.cart-item-image{object-fit:cover;border:2px solid var(--color-on-background);flex-shrink:0;width:80px;height:80px}.cart-item-info{flex-direction:column;flex:1;display:flex}.cart-item-info h3{font-family:var(--font-body);text-transform:none;letter-spacing:normal;color:var(--color-on-background);text-align:left;margin-bottom:4px;font-size:16px;font-weight:700}.cart-item-price-unit{font-family:var(--font-headline);color:var(--color-primary-container);margin-bottom:var(--spacing-sm);font-size:16px}.cart-item-actions{justify-content:space-between;align-items:center;margin-top:auto;display:flex}.quantity-controls{border:2px solid var(--color-on-background);border-radius:var(--radius-sm);background-color:var(--color-surface);align-items:center;display:flex}.quantity-controls button{cursor:pointer;width:32px;height:32px;color:var(--color-on-background);background:0 0;border:none;justify-content:center;align-items:center;font-weight:700;display:flex}.quantity-controls button:hover{background-color:var(--color-secondary-container)}.quantity-val{font-family:var(--font-body);text-align:center;border-left:2px solid var(--color-on-background);border-right:2px solid var(--color-on-background);width:32px;font-size:14px;font-weight:700;line-height:32px}.remove-item-btn{cursor:pointer;color:var(--color-secondary);border-radius:var(--radius-sm);background:0 0;border:none;justify-content:center;align-items:center;width:32px;height:32px;transition:color .2s,background-color .2s;display:flex}.remove-item-btn:hover{color:var(--color-error);background-color:#ba1a1a14}.cart-drawer-footer{padding:var(--spacing-md);border-top:3px solid var(--color-on-background);background-color:var(--color-surface-container-low)}.cart-summary-totals{gap:var(--spacing-xs);margin-bottom:var(--spacing-md);flex-direction:column;display:flex}.summary-row{color:var(--color-on-surface-variant);justify-content:space-between;font-size:14px;font-weight:500;display:flex}.total-val{font-family:var(--font-body);color:var(--color-on-background);font-weight:700}.free-delivery{color:#1b8a5a;font-weight:700}.total-row{border-top:2px dashed var(--color-surface-dim);padding-top:var(--spacing-sm);margin-top:var(--spacing-xs);color:var(--color-on-background);font-size:18px;font-weight:700}.grand-total-val{font-family:var(--font-headline);color:var(--color-primary-container);font-size:24px}.checkout-btn{text-align:center;letter-spacing:.05em;width:100%;font-size:18px}.checkout-modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:110;background-color:#1c1c1999;width:100vw;height:100vh;animation:.2s ease-out forwards fadeIn;position:fixed;top:0;left:0}.checkout-success-modal{background-color:var(--color-surface);border:4px solid var(--color-on-background);border-radius:var(--radius-md);width:90%;max-width:480px;padding:var(--spacing-lg) var(--spacing-md);z-index:111;box-shadow:10px 10px 0px var(--color-on-background);animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards scaleIn;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.9)}@keyframes scaleIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.8)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.success-modal-icon{color:var(--color-primary-container);margin-bottom:var(--spacing-sm);font-size:72px}.checkout-success-modal h2{font-family:var(--font-headline);margin-bottom:var(--spacing-sm);font-size:36px}.checkout-success-modal p{color:var(--color-on-surface-variant);margin-bottom:var(--spacing-md);font-size:15px;line-height:1.6}.success-modal-badge{background-color:var(--color-on-background);color:var(--color-background);padding:4px var(--spacing-sm);font-family:var(--font-body);border-radius:var(--radius-sm);text-transform:uppercase;margin-bottom:var(--spacing-lg);font-size:12px;font-weight:700;display:inline-block}.success-modal-btn{width:80%;margin:0 auto}[dir=rtl] .floating-cart{right:auto;left:var(--margin-mobile)}@media (min-width:768px){[dir=rtl] .floating-cart{right:auto;left:var(--margin-desktop)}}[dir=rtl] .cart-badge-count{left:-2px;right:auto}[dir=rtl] .cart-toast{right:auto;left:var(--margin-mobile)}@media (min-width:768px){[dir=rtl] .cart-toast{right:auto;left:var(--margin-desktop)}}[dir=rtl] .cart-drawer{animation:.3s cubic-bezier(.16,1,.3,1) forwards slideInRightRTL;left:0;right:auto;box-shadow:10px 0 30px #0000000d}@media (min-width:768px){[dir=rtl] .cart-drawer{border-left:none;border-right:4px solid var(--color-on-background)}}[dir=rtl] .cart-item-info h3{text-align:right}@keyframes slideInRightRTL{0%{transform:translate(-100%)}to{transform:translate(0)}}
