/* ========================================================= DESIGN TOKENS Palette: espresso base, saffron-amber accent, herb green, chili red, warm paper. Deliberately NOT cream+terracotta. ========================================================= */ :root { --danger-text: #c0392b; --card-bluedark: #e8821e; --tooltipbg: #241a14; --background-white: #fff; --borderradius16: 16px; --svgiconheightwidth24: 24px; --background-gray: #F8F8F8; --fontsize14: 14px; --fontsize16: 16px; --subinfocolor: #5d5046; --headingcolor: #5d5046; --gap16: 16px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --button-hovercolor: #e8821e; --button-hovercolor-view: #c8650a; --warning-text: #e8821e; --gap8: 8px; --espresso: #241a14; --size40: 40px; --size36: 36px; --textwhite-color: #fff; --espresso-soft: #3a2c22; --paper: #fbf7f0; --paper-2: #f3ece0; --ink: #1c1410; --ink-soft: #5d5046; --line: #e7ddcf; --saffron: #e8821e; --saffron-deep: #c8650a; --herb: #3f7d4e; --herb-soft: #eaf3ec; --chili: #c0392b; --gold: #f0b429; --white: #ffffff; --shadow-sm: 0 1px 2px rgba(36,26,20,.06),0 2px 8px rgba(36,26,20,.05); --shadow-md: 0 6px 24px rgba(36,26,20,.12); --shadow-lg: 0 18px 50px rgba(36,26,20,.22); --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; --fs-display: clamp(2rem,5vw,3.4rem); --maxw: 1240px; --ease: cubic-bezier(.2,.8,.2,1); } * { box-sizing: border-box } html { scroll-behavior: smooth } .slideviewformoverlay { position: fixed; inset: 0; background: rgba(28, 20, 16, .55); z-index: 99; opacity: 0; pointer-events: none; transition: opacity .25s; } .slideviewformoverlay.showaddview { opacity: 1; pointer-events: auto; } .slideviewformoverlay1.showaddview { opacity: 1; pointer-events: auto; } .slideviewformoverlay1 { position: fixed; inset: 0; background: rgba(28, 20, 16, .55); z-index: 99; opacity: 0; pointer-events: none; transition: opacity .25s; } #addrSearchBlock { position: relative; } .drawer-body { overflow: auto; flex: 1; padding: 18px 20px; } body.culinartv4 { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* generic element rules are scoped to migrated pages so they never touch un-migrated views or admin screens that share these partials/CSS */ body.culinartv4 h1, body.culinartv4 h2, body.culinartv4 h3, body.culinartv4 h4 { font-family: 'Fraunces',Georgia,serif; line-height: 1.1; font-weight: 600 } /*custom dropdown*/ .customdropdown { position: relative; } .vodiapicker { display: none; } #a { padding: 0px; margin: 0; } #a li { position: relative; } #a li img { position: absolute; } #a li:nth-child(1) img { height: 17px; left: 8px; opacity: 0.8; } #a li:nth-child(2) img { height: 17px; left: 9px; opacity: 0.8; } #a li:nth-child(3) img { height: 17px; left: 10px; opacity: 0.8; } .btn-select img { display: none; } #a li:last-child { border-bottom: 0px; } #a li { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px; font-size: 14px; color: var(--theme-color); font-weight: var(--font-weight-regular); cursor: pointer; } .box-header { background: var(--theme-yellowcolor) !important; border-bottom: 0 !important; } .closeicon span svg, .closeicon span img { filter: brightness(100); } #a li:hover { background-color: #faf6ef; color: var(--theme-yellowcolor); } #a li:hover img { filter: brightness(0) saturate(100%) invert(69%) sepia(27%) saturate(694%) hue-rotate(356deg) brightness(88%) contrast(86%); } #a li:first-child:hover { border-radius: 5px 5px 0 0; } #a li:last-child:hover { border-radius: 0 0 5px 5px; } #a li span { padding-left: 34px; } .myorder_left ul { padding: 0; margin: 0; list-style: none; } .myorder_left ul li:nth-child(1) { padding: 24px 16px; } .myorder_left ul li a { display: flex; align-items: center; grid-gap: 12px; color: var(--theme-color); width: 100%; padding: 12px 16px; transition: 0.5s; } .myorder_left ul li a.active { background: var(--brandsecondary-color) !important; } .myorder_left ul li a:hover { background: var(--theme-bgcolor); } .myorder_left ul li { display: flex; align-items: center; grid-gap: 12px; font-weight: var(--font-weight-medium); font-size: 14px; border-bottom: 1px solid var(--bordercolor); } .myorder_left ul li img { width: 18px; height: 18px; display: flex; } /* item list */ .outletAddress_main { display: flex; align-items: flex-start; justify-content: center; flex-direction: column; } .topmainlf { height: 38.8px; display: flex; flex-wrap: wrap; flex-direction: column; align-items: flex-start; justify-content: center; } .b { display: none; position: absolute; width: 155px; left: 0; background: var(--saffron); top: 52px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgb(0 0 0 / 9%); z-index: 99; } .open { display: show !important; } .btn-select.active li:after { transform: rotate(180deg); } .btn-select { outline: 0; border: 0px; background: transparent; padding: 0; } .btn-select:hover li { margin-left: 0px; } .lang-select { } /*custom dropdown*/ .mono { font-family: 'IBM Plex Mono',monospace } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0 } :focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; border-radius: 4px } .itemsubtotal { display: flex; justify-content: space-between; font-size: .86rem; padding: 3px 0; color: var(--ink-soft); } .deliverycharges i img { width: 14px; height: 14px; display: inline-flex; align-items: center; position: relative; top: -1px; } .deliverycharges { display: flex; justify-content: space-between; font-size: .86rem; padding: 3px 0; color: var(--ink-soft); } @media (prefers-reduced-motion:reduce) { * { animation: none !important; transition: none !important } } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0px; outline: 0; padding: 11px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; } .btn:active { transform: scale(.97) } .btn-primary { background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232,130,30,.35) } .btn-primary:hover { background: var(--saffron-deep) } .btn-ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm) } .btn-ghost:hover { border-color: var(--saffron); color: var(--saffron-deep) } .btn-dark { background: var(--espresso); color: #fff } .btn-dark:hover { background: var(--espresso-soft) } .btn-block { width: 100% } .btn-sm { padding: 7px 12px; font-size: .82rem } .btn:focus-visible { outline: 3px solid var(--saffron) !important; outline-offset: 2px !important; background: var(--saffron) !important; color: #fff !important; box-shadow: none !important; } .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { background: var(--saffron) !important; color: #fff !important; box-shadow: none !important; } /* ---------- header (dark bar) ---------- */ header.site { position: sticky; top: 0; z-index: 60; background: var(--espresso); border-bottom: 1px solid rgba(255,255,255,.08) } .bar { display: flex; align-items: center; gap: 16px; padding: 11px 20px; max-width: var(--maxw); margin: 0 auto } .brand { display: flex; align-items: center; flex-shrink: 0 } .brand-logo { height: 26px; width: auto; display: block } /* address / order-type pill (like a delivery selector) */ .addr-menu { display: none; } .addr-menu.show { display: block; } .dropdownaddressmain { flex-shrink: 0; } .addr-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 10px; border-radius: var(--r-sm); line-height: 1.2; text-align: left; color: #fff; background: transparent; outline: 0; border: 0; } .addr-pill:hover { background: rgba(255, 255, 255, .08); } .addr-mode { font-size: .92rem; font-weight: 800; color: #fff; white-space: nowrap } .addr-line { font-size: .76rem; color: #cbb9a6; max-width: 220px; display: flex; align-items: center; } .addr-line .caret { color: #fff; font-weight: 700 } .addr-menu { position: absolute; z-index: 80; width: 300px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 14px; top: 60px; left: 100px; } .addr-seg { display: flex; background: var(--paper-2); border-radius: var(--r-pill); padding: 4px; gap: 2px; margin-bottom: 12px } .addr-seg button { flex: 1; padding: 8px 12px; border-radius: var(--r-pill); font-weight: 600; font-size: .84rem; color: var(--ink-soft); border: 0px; outline: 0; } .addr-seg button.on { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm) } .addr-field-label { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 6px } .addr-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .9rem } .addr-input:focus { border-color: var(--saffron); box-shadow: none; border-radius: var(--r-sm); outline: 3px solid var(--saffron); outline-offset: 2px; } .addr-fixed { font-size: .9rem; font-weight: 600; background: var(--paper-2); border-radius: var(--r-sm); padding: 10px 12px } .addr-eta { font-size: .78rem; color: var(--herb); font-weight: 600; margin-top: 6px; min-height: 1em } .cart-mode-note img { width: 24px; } .cart-mode-note { font-size: .82rem; color: var(--ink-soft); font-weight: 600; margin-bottom: 14px; padding: 8px 12px; background: var(--paper-2); border-radius: var(--r-sm); display: flex; align-items: center; grid-gap: 8px; } ul.caritemlist li { margin-bottom: 12px; } ul.caritemlist li:last-child { margin-bottom: 0px; } li.cartempty { border-bottom: 0; text-align: center; padding: 16px 25px; } li.cartempty img { width: 290px; } li.cartempty:hover { background: transparent; } .cartemptyheading { font-size: 14px; font-weight: 600; margin-bottom: 5px; padding-top: 25px; color: var(--ink-soft); } .cartemptytext { font-weight: var(--font-weight-regular); line-height: 16px; padding-bottom: 17px; font-size: 13px; color: var(--ink-soft); } .head-actions { display: flex; align-items: center; gap: 8px } .icon-btn { width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); position: relative; font-size: 1.15rem; color: #fff } .icon-btn:hover { border-color: var(--saffron); background: rgba(255,255,255,.18) } .cart-btn { background: var(--saffron); color: var(--espresso); border-color: var(--saffron) } .cart-btn:hover { background: var(--gold); border-color: var(--gold) } .cart-count { position: absolute; top: -5px; right: -5px; background: var(--chili); color: #fff; font-size: .66rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; padding: 0 4px; border: 2px solid var(--espresso) } /* search (top bar) */ .search { flex: 1; position: relative; min-width: 180px } .search input { width: 100%; padding: 11px 14px 11px 42px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-pill); background: rgba(255,255,255,.12); font-size: .95rem; color: #fff } .search input::placeholder { color: #cbb9a6 } .search input:focus { border-color: var(--saffron); background: rgba(255,255,255,.18) } .search .ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); opacity: .7 } /* business toggle inside the rail (above All …) */ .biz-toggle { display: flex; gap: 4px; background: var(--paper-2); border-radius: var(--r-pill); padding: 4px; margin-bottom: 12px } .biz-toggle button { flex: 1; padding: 8px 10px; border-radius: var(--r-pill); font-weight: 600; font-size: .82rem; color: var(--ink-soft); display: flex; gap: 5px; align-items: center; justify-content: center; white-space: nowrap } .biz-toggle button[aria-selected="true"] { background: var(--espresso); color: #fff; box-shadow: var(--shadow-sm) } /* ---------- layout grid (nav | products) ---------- */ .shop { display: grid; grid-template-columns: 236px 1fr; gap: 24px; padding: 24px 20px; max-width: var(--maxw); margin: 0 auto; align-items: start } .panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm) } .rail { position: sticky; top: 80px } /* refined toolbar: result count + sort */ .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap } .toolbar .count { font-size: .84rem; color: var(--ink-soft); font-weight: 500 } .filterchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px } .fchip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--white); font-size: .83rem; font-weight: 600; color: var(--ink-soft); transition: border .15s,background .15s,color .15s } .fchip:hover { border-color: var(--ink-soft) } .fchip.on { background: var(--espresso); border-color: var(--espresso); color: #fff } .fchip.clear { color: var(--ink-soft); border-style: dashed } .fchip.clear:hover { color: var(--chili); border-color: var(--chili) } .sortsel { display: inline-flex; align-items: center; gap: 8px; font-size: .83rem; color: var(--ink-soft); font-weight: 600 } .sortsel select { padding: 6px 30px 6px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white) url("data:image/svg+xml;utf8,") no-repeat right 11px center; font-family: inherit; font-size: .83rem; font-weight: 600; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none } .sortsel select:focus { border-color: var(--saffron) } /* dietary label pill w/ tooltip */ .dlabel { position: relative; cursor: help } .dlabel[data-tip]:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--espresso); color: #fff; font-size: .7rem; font-weight: 600; padding: 5px 9px; border-radius: 6px; white-space: nowrap; z-index: 20; box-shadow: var(--shadow-md); pointer-events: none } .dlabel[data-tip]:hover::before { content: ""; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--espresso); z-index: 20 } /* category nav (the IA tree) */ .catnav { padding: 8px; margin-bottom: 18px } .catnav .tree-node > button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 9px 10px; border-radius: var(--r-sm); font-weight: 600; font-size: .9rem; text-align: left } .catnav .tree-node > button:hover { background: var(--paper-2) } .catnav .tree-node > button[aria-expanded="true"] { color: var(--saffron-deep) } .catnav .tree-children { padding-left: 12px; border-left: 2px solid var(--line); margin-left: 10px } .catnav .leaf { padding: 7px 10px; border-radius: var(--r-sm); font-size: .85rem; color: var(--ink-soft); width: 100%; text-align: left; display: block } .catnav .leaf:hover { background: var(--paper-2); color: var(--ink) } .catnav .leaf[aria-current="true"] { background: var(--herb-soft); color: var(--herb); font-weight: 600 } .chev { transition: transform .2s var(--ease); font-size: .8rem; opacity: .6 } [aria-expanded="true"] .chev { transform: rotate(90deg) } /* product grid */ .results-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap } .results-head h2 { font-size: 1.5rem } .crumbs { font-size: .82rem; color: var(--ink-soft); margin-bottom: 4px } .crumbs span { color: var(--saffron-deep); font-weight: 600 } .grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 18px } .card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease),box-shadow .2s; display: flex; flex-direction: column } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) } .card .thumb { position: relative; aspect-ratio: 4/3; background: var(--paper-2); overflow: hidden } .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease) } .card:hover .thumb img { transform: scale(1.05) } .veg-dot { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border-radius: 5px; background: #fff; border: 2px solid var(--herb); display: grid; place-items: center } .veg-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--herb) } .veg-dot.nonveg { border-color: var(--chili) } .veg-dot.nonveg::after { background: var(--chili) } .sold-out { position: absolute; inset: 0; background: rgba(28,20,16,.55); color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: .04em } .tag-row { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end } .tag { background: rgba(255,255,255,.95); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-pill); color: var(--herb) } .tag.gf { color: #8a6d1a } .tag.vegan { color: var(--herb) } .tag.jain { color: var(--saffron-deep) } .card .body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1 } .card h3 { font-size: 1.02rem; font-family: 'Inter',sans-serif; font-weight: 700; line-height: 1.25 } .card .desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .meta { display: flex; gap: 10px; align-items: center; font-size: .78rem; color: var(--ink-soft); flex-wrap: wrap } .rating { display: flex; gap: 3px; align-items: center; color: #8a6d1a; font-weight: 600 } .allergens { font-size: .72rem; color: var(--chili) } .card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px } .price { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.18rem } .price .from { font-size: .7rem; color: var(--ink-soft); font-family: 'Inter'; font-weight: 500 } /* qty stepper */ .stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: #fff } .stepper button { width: 30px; height: 32px; font-size: 1.1rem; color: var(--saffron-deep); font-weight: 700; background: transparent; border: 0; outline: 0; } .stepper button:hover { background: var(--paper-2) } .stepper span { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem } /* ---------- cart sidebar ---------- */ aside.cart { position: sticky; top: 120px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 140px) } .cart-head { padding: 16px 18px; background: var(--espresso); color: #fff; display: flex; justify-content: space-between; align-items: center } .cart-head h3 { color: #fff; font-size: 1.1rem } .cart-body { overflow: auto; flex: 1; padding: 8px 14px } .cart-empty { text-align: center; padding: 40px 16px; color: var(--ink-soft) } .cart-empty .emoji { font-size: 2.4rem; margin-bottom: 8px } .line { display: flex; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line) } .line img { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0 } .line .info { flex: 1; min-width: 0 } .line .info h4 { font-family: 'Inter'; font-size: .9rem; font-weight: 700 } .line .custom { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35 } .line .line-actions { display: flex; gap: 10px; margin-top: 6px; font-size: .76rem } .line .line-actions button { color: var(--saffron-deep); font-weight: 600; background: transparent; border: 0; outline: 0; } .line .line-actions button.rm { color: var(--ink-soft) } .line .lp { font-weight: 700; font-size: .9rem; white-space: nowrap } .cart-foot { border-top: 1px solid var(--line); padding: 14px 18px; background: var(--white) } .srow { display: flex; justify-content: space-between; font-size: .86rem; padding: 3px 0; color: var(--ink-soft) } .srow.total { font-size: 1.05rem; font-weight: 700; color: var(--ink); border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px } .upsell { padding: 10px 14px; background: var(--herb-soft); border-radius: var(--r-sm); margin: 8px 0; font-size: .82rem } .upsell strong { color: var(--herb) } /* ---------- modal / drawer ---------- */ /* scoped + :not(.fade) so the template modal never hijacks Bootstrap modals (e.g. the coupon user-validation popup uses .modal.fade) */ body.culinartv4 .overlay { position: fixed; inset: 0; background: rgba(28,20,16,.55); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .25s } body.culinartv4 .overlay.open { opacity: 1; pointer-events: auto } body.culinartv4 .modal:not(.fade) { position: fixed; z-index: 201; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); max-width: 920px; width: calc(100% - 32px); max-height: 92vh; overflow: auto; left: 50%; top: 50%; transform: translate(-50%,-46%) scale(.97); opacity: 0; pointer-events: none; transition: transform .3s var(--ease),opacity .25s } body.culinartv4 .modal:not(.fade).open { transform: translate(-50%,-50%) scale(1); opacity: 1; pointer-events: auto } body.culinartv4 .modal:not(.fade) .modal-close { position: sticky; top: 12px; float: right; margin: 12px 12px 0 0; z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.2rem } /* product detail */ .pd { display: grid; grid-template-columns: 1fr 1fr; gap: 0 } .pd-media { background: var(--paper-2); padding: 24px; display: flex; flex-direction: column; gap: 12px } .pd-media .main { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm) } .pd-media .main img { width: 100%; height: 100%; object-fit: cover } .pd-thumbs { display: flex; gap: 8px } .pd-thumbs img { width: 62px; height: 62px; border-radius: var(--r-sm); object-fit: cover; cursor: pointer; border: 2px solid transparent } .pd-thumbs img.sel { border-color: var(--saffron) } .pd-info { padding: 30px 26px } .pd-info h2 { font-size: 1.7rem; margin-bottom: 6px } .pd-info .sub { color: var(--ink-soft); font-size: .92rem; margin-bottom: 14px } .cust-block { margin: 18px 0; border-top: 1px solid var(--line); padding-top: 16px } .cust-block h4 { font-family: 'Inter'; font-size: .95rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center } .req-flag { font-size: .7rem; background: var(--chili); color: #fff; padding: 2px 8px; border-radius: var(--r-pill); font-weight: 700; text-transform: uppercase } .opt-flag { font-size: .7rem; color: var(--ink-soft); font-weight: 500 } .opt { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 8px; cursor: pointer; transition: border .15s,background .15s } .opt:hover { border-color: var(--saffron) } .opt.sel { border-color: var(--saffron); background: #fff7ee } .opt.disabled { opacity: .45; cursor: not-allowed; background: var(--paper-2) } .opt .lbl { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .9rem } .opt .add { font-size: .82rem; color: var(--saffron-deep); font-weight: 600 } .opt input { accent-color: var(--saffron); width: 18px; height: 18px } .nutri { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 8px } .nutri div { background: var(--paper-2); border-radius: var(--r-sm); padding: 8px; text-align: center } .nutri .n { font-family: 'Fraunces',serif; font-size: 1.1rem; font-weight: 600 } .nutri .l { font-size: .68rem; color: var(--ink-soft); text-transform: uppercase } .pd-foot { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); padding: 14px 26px; display: flex; gap: 14px; align-items: center; justify-content: space-between } .pd-total { font-family: 'Fraunces',serif; font-size: 1.5rem; font-weight: 600 } .pd-total small { font-size: .72rem; color: var(--ink-soft); font-family: 'Inter'; display: block } /* drawer (cart / checkout / account) */ .drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(460px,100%); background: var(--paper); z-index: 201; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column } .drawer.open { transform: translateX(0) } .drawer-head { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line) } .drawer-head h2 { font-size: 1.3rem } /* forms */ .field { margin-bottom: 14px } .field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-soft) } .field input, .field select, .field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: #fff } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--saffron) } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .note { font-size: .78rem; color: var(--ink-soft); margin-top: 4px } /* map placeholder */ .map-box { height: 180px; border-radius: var(--r-md); overflow: hidden; position: relative; border: 1px solid var(--line); background: repeating-linear-gradient(0deg,#e9e1d4 0 1px,transparent 1px 26px), repeating-linear-gradient(90deg,#e9e1d4 0 1px,transparent 1px 26px), linear-gradient(135deg,#f0ead d,#e7f0e9) } .map-box .pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); font-size: 2rem; cursor: grab; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)) } .map-box .road { position: absolute; background: #d9cdb8 } .map-tag { position: absolute; bottom: 8px; left: 8px; background: rgba(255,255,255,.92); font-size: .7rem; padding: 4px 8px; border-radius: var(--r-pill); color: var(--ink-soft) } /*map css view*/ .pac-item:hover { background-color: var(--background-gray); } .saveaddressview { display: grid; grid-template-columns: auto; row-gap: 16px; } .pac-item { display: flex; padding: 8px 12px 8px 30px; font-size: 12px; color: var(--ink); border: 0px; flex-wrap: wrap; flex-direction: column; align-items: flex-start; line-height: normal; grid-gap: 2px; position: relative; border-bottom: 1px solid var(--line); } .pac-item:last-child { border-bottom: 0px; } .hdpi .pac-icon { background-position: unset; background-image: url(https://cdn.edsy.ai/images/edsyicons/location.svg); background-size: 18px; background-repeat: no-repeat; } .pac-icon { border: 0px; width: 18px; height: 18px; margin: 0; display: flex; position: absolute; left: 8px; top: 16px; } .pac-item-query { font-size: 13px; color: var(--ink); padding: 0; } .pac-matched { font-weight: var(--font-weight-semibold); } .form-group { position: relative; } .pac-container { z-index: 99999999 !important; font-size: 14px; font-family: 'Inter', sans-serif; box-shadow: none; background: #fff; position: absolute !important; left: 0 !important; top: 65px !important; width: 450px !important; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); } .pac-container:after { display: none; } .pac-container.pac-logo:after { display: none; } .pac-container.hide { display: none !important; } /*map css view*/ .public-offers-wrpr.apply_coupon_applied .public-offer button { cursor: unset; } .public-offers-wrpr.apply_coupon_applied .public-offer button { padding: 0 8px; margin: 0; height: 40px; } .Couponview { padding-top: 12px; } .cartsummary_heading { color: var(--ink); margin-bottom: 12px; font-family: 'Fraunces', Georgia, serif; line-height: 1.1; font-weight: 600; font-size: 1.17em; } .public-offers-wrpr .public-offer button { border: 0.5px dashed var(--saffron); border-radius: 6px; background-color: #fff7ee; position: relative; color: var(--saffron); padding: 14px 8px 14px 0; display: flex; align-items: center; justify-content: center; width: 100%; outline: 0px; box-shadow: none; } .apply_coupon_applied .public-offer { display: grid; grid-gap: 12px; grid-template-columns: 1fr 1fr; width: 100%; } .public-offer { display: grid; grid-template-columns: 1fr; } .public-offers-wrpr.apply_coupon_applied .public-offer button .top-round { top: -0.9px; } .public-offers-wrpr.apply_coupon_applied .public-offer button .round { width: 10px; height: 5px; left: 35px; } .public-offers-wrpr .public-offer button .round { width: 20px; height: 10px; border: 0.5px dashed var(--saffron); background: var(--paper); position: absolute; z-index: 10; left: 37px; } .public-offers-wrpr .public-offer button .top-round { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top: 0 !important; top: -2px; } .public-offers-wrpr .public-offer button .bottom-round { border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 0; bottom: -1px; } .public-offers-wrpr.apply_coupon_applied .public-offer button .left { width: 36px; font-size: 18px; } .public-offers-wrpr .public-offer button .left { width: 50px; font-weight: var(--font-weight-semibold); line-height: 14px; font-size: 20px; } .public-offers-wrpr .public-offer button .right { flex: 1; line-height: 16px; padding: 0; text-align: left; color: var(--ink); } .public-offers-wrpr .public-offer button .right { flex-wrap: wrap; } .public-offers-wrpr.apply_coupon_applied .public-offer button .left i { cursor: unset; } .public-offers-wrpr .public-offer button .left i { margin: 0 auto; cursor: unset; } .public-offers-wrpr.apply_coupon_applied .public-offer button .right .bottom { font-size: 14px; gap: 6px; } .public-offers-wrpr .public-offer button .right .bottom { display: flex; align-items: center; justify-content: space-between; width: 100%; } .public-offers-wrpr .public-offer button .bottom { font-size: 14px; font-weight: var(--font-weight-regular); } .public-offers-wrpr .public-offer button .right .bottom img { width: 16px; height: 16px; display: flex; } span.couponcodetext { color: var(--saffron); } /* steps */ .steps { display: flex; gap: 8px; margin-bottom: 18px } .step { flex: 1; text-align: center; font-size: .74rem; font-weight: 600; color: var(--ink-soft); padding-bottom: 8px; border-bottom: 3px solid var(--line); display: flex; align-items: center; justify-content: center; grid-gap: 4px; } .step.active { color: var(--saffron-deep); border-color: var(--saffron) } .step.done { color: var(--herb); border-color: var(--herb) } /* address cards / chips */ .addr-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; cursor: pointer; display: flex; gap: 10px } .addr-card.sel { border-color: var(--saffron); background: #fff7ee } .addr-card .label-pill { font-size: .7rem; font-weight: 700; background: var(--espresso); color: #fff; padding: 2px 9px; border-radius: var(--r-pill); align-self: flex-start } .pay-opt { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 9px; cursor: pointer } .pay-opt.sel { border-color: var(--saffron); background: #fff7ee } .pay-opt .pico { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--paper-2); display: grid; place-items: center; font-size: 1.1rem } /* tabs (account) */ .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap } .tabs button { padding: 9px 14px; font-weight: 600; font-size: .88rem; color: var(--ink-soft); border-bottom: 3px solid transparent; margin-bottom: -1px } .tabs button[aria-selected="true"] { color: var(--saffron-deep); border-color: var(--saffron) } /* toast */ .toast-wrap { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center } .toast { background: var(--espresso); color: #fff; padding: 12px 18px; border-radius: var(--r-pill); box-shadow: var(--shadow-md); font-size: .88rem; font-weight: 600; display: flex; gap: 8px; align-items: center; animation: pop .3s var(--ease) } @keyframes pop { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } } /* order tracking */ .track { display: flex; flex-direction: column; gap: 0; margin: 16px 0 } .track-step { display: flex; gap: 12px; align-items: flex-start } .track-step .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex-shrink: 0; background: #fff; font-size: .8rem } .track-step.done .dot { background: var(--herb); border-color: var(--herb); color: #fff } .track-step.active .dot { border-color: var(--saffron); color: var(--saffron-deep) } .track-step .ln { width: 2px; flex: 1; background: var(--line); margin: 2px 0; min-height: 26px; margin-left: 12px } .track-step.done .ln { background: var(--herb) } .track-body { padding-bottom: 8px } .track-body .t { font-weight: 700; font-size: .9rem } .track-body .s { font-size: .78rem; color: var(--ink-soft) } /* footer */ footer.site { background: var(--espresso); color: #cdbfae; margin-top: 40px; padding: 36px 20px 24px } footer .cols { display: grid; grid-template-columns: 3fr 3fr 2fr 2fr; gap: 24px; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } footer h4 { color: #fff; font-family: 'Inter'; font-size: .92rem; margin-bottom: 10px } footer a { display: block; font-size: .85rem; padding: 3px 0; color: #cdbfae } footer a:hover { color: var(--gold) } footer .legal { max-width: var(--maxw); margin: 24px auto 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; font-size: .78rem } /* mobile cart bar */ .mcart { position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; background: var(--espresso); color: #fff; padding: 12px 18px; display: none; justify-content: space-between; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,.2) } .mcart .mc-info { font-size: .82rem } .mcart .mc-info b { font-size: 1rem; display: block; font-family: 'Fraunces',serif } /* mobile filter/cat toggles */ .mobile-controls { display: none; gap: 8px; padding: 0 20px 12px; max-width: var(--maxw); margin: 0 auto } /* ---------- responsive ---------- */ @media(max-width:880px) { .shop { grid-template-columns: 1fr; gap: 16px } .rail { position: static } .catnav { display: none } /* category tree → mobile picker via floating button */ .pd { grid-template-columns: 1fr } .mcart { display: flex } .bar { flex-wrap: wrap; gap: 10px 12px } .brand { order: 1 } .addr-pill { order: 2 } .head-actions { order: 3; margin-left: auto } .search { order: 4; flex-basis: 100% } .addr-line { max-width: 160px } } @media(max-width:520px) { .grid { grid-template-columns: 1fr 1fr; gap: 12px } .grid2 { grid-template-columns: 1fr } .nutri { grid-template-columns: 1fr 1fr } .card h3 { font-size: .92rem } .toolbar { gap: 10px } .sortsel { width: 100%; justify-content: space-between } } .mobile-cat-fab { display: none } .addrcardtop_left { display: flex; align-items: center; grid-gap: 12px; } @media(max-width:880px) { .mobile-cat-fab { display: flex; position: fixed; left: 16px; bottom: 78px; z-index: 54; background: var(--espresso); color: #fff; border-radius: var(--r-pill); padding: 11px 16px; box-shadow: var(--shadow-md); font-weight: 600; font-size: .85rem; gap: 7px; align-items: center; cursor: pointer; } } /* ---------- extracted inline utilities ---------- */ .u-pos-rel { position: relative } .u-pos-static { position: static } .u-clickable { cursor: pointer } .u-fw-700 { font-weight: 700 } .u-font-inter { font-family: Inter } .u-flex-1 { flex: 1 } .u-flex-gap-10 { display: flex; gap: 10px } .u-flex-gap-8 { display: flex; gap: 8px } .u-between-center { display: flex; justify-content: space-between; align-items: center } .u-mt-6 { margin-top: 6px } .u-mt-8 { margin-top: 8px } .u-mt-10 { margin-top: 10px } .u-mt-12 { margin-top: 12px } .u-mt-14 { margin-top: 14px } .u-mt-16 { margin-top: 16px } .u-mt-18 { margin-top: 18px } .u-mb-6 { margin-bottom: 6px } .u-mb-8 { margin-bottom: 8px } .u-mb-10 { margin-bottom: 10px } .u-mb-12 { margin-bottom: 12px } .u-mb-14 { margin-bottom: 14px } .u-mb-18 { margin-bottom: 18px } .u-my-12 { margin: 12px 0 } .text-herb { color: var(--herb) } .text-muted { color: var(--ink-soft) } .text-saffron-strong { color: var(--saffron-deep); font-weight: 600 } .radio-saffron { accent-color: var(--saffron) } .addr-results-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; display: none; max-height: 160px; overflow: auto } .place-results-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; display: none; max-height: 180px; overflow: auto } .place-option { width: 100%; text-align: left; padding: 10px 12px } .all-items-leaf { font-weight: 700 } .clear-filters-btn { margin-top: 10px } .brand-name { color: var(--saffron-deep); font-weight: 600 } .upsell-add { margin-top: 6px } .footer-logo { height: 26px; margin-bottom: 12px } .footer-blurb { font-size: .85rem; max-width: 30ch } .nutrition-panel { padding: 12px; margin-top: 4px } .nutrition-title { font-size: .85rem } .product-meta-line { margin-bottom: 6px } .related-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap } .pd-foot-left { display: flex; gap: 14px; align-items: center } .stepper-tall { height: 42px } .saved-title { margin-top: 18px; font-family: Inter } .modal-close-inline { position: static; margin: 0 } .discount-row { color: var(--herb) } .checkout-primary { margin-top: 12px } .checkout-actions { display: flex; gap: 10px; margin-top: 10px } .section-heading-tight { margin-bottom: 6px } .section-heading-payment { margin-bottom: 10px } .note-spaced { margin-bottom: 14px } .auth-link { color: var(--saffron-deep); font-weight: 600 } .saved-address-list { margin-bottom: 14px } .address-detail-text { font-size: .85rem; margin-top: 6px } .add-address-note { margin-bottom: 8px } .current-location-btn { margin-bottom: 12px } .road-horizontal-delivery { left: 0; right: 0; top: 60%; height: 8px } .road-horizontal-pickup { left: 0; right: 0; top: 55%; height: 8px } .road-vertical { top: 0; bottom: 0; left: 40%; width: 8px } .pickup-address-text { font-size: .9rem; margin-top: 6px } .pay-label { font-size: .92rem } .promo-row { display: flex; gap: 8px } .promo-success { color: var(--herb) } .summary-panel { padding: 14px; margin-top: 16px } .summary-title { font-family: Inter; font-size: .9rem; margin-bottom: 8px } .confirmation-wrap { padding: 34px 30px; text-align: center; max-width: 800px; margin: 40px auto; } .confirm-check { width: 72px; height: 72px; border-radius: 50%; background: var(--herb-soft); color: var(--herb); display: grid; place-items: center; font-size: 2rem; margin: 0 auto 14px } .confirm-title { font-size: 1.6rem } .confirm-order-note { margin: 6px 0 2px } .confirm-track { text-align: left; max-width: 300px; margin: 20px auto } .track-dot-stack { display: flex; flex-direction: column; align-items: center } .confirm-order-panel { padding: 14px; text-align: left; margin: 14px 0 } .order-details-title { font-family: Inter; font-size: .88rem; margin-bottom: 8px } .confirm-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center } .auth-seg { margin-bottom: 18px } .auth-divider { text-align: center; margin: 16px 0; color: var(--ink-soft); font-size: .82rem } .forgot-field { margin-top: 18px } .forgot-link { font-size: .82rem; color: var(--saffron-deep) } .account-order-card { padding: 14px; margin-bottom: 12px } .order-id-text { font-size: .85rem } .order-items-line { font-size: .85rem; margin: 6px 0 } .grid-one-col { grid-template-columns: 1fr } .rewards-panel { padding: 20px; text-align: center } .loyalty-points { font-family: Fraunces,serif; font-size: 2.4rem; color: var(--saffron-deep) } .rewards-note { margin-top: 12px } .payment-label { font-size: .9rem } .logout-btn { margin-top: 18px } .cat-all-btn { margin-bottom: 12px } .cat-mobile-group { margin-bottom: 10px } .cat-mobile-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px } /* ════════════════════════════════════════════════════════════════════ CulinART v4 — BRIDGE LAYER · Phase 1: shell, footer, cart drawer Re-skins the existing live markup to the template palette. Scoped to body.culinartv4 so it only affects migrated pages and overrides the legacy skin (frontnew.css / style.css) which stays linked until the Phase 9 cleanup. All JS hooks are preserved (ids, data-*, onclick, .cartbutton, .vodiapicker, .searchview, .caritemslideshow …). ════════════════════════════════════════════════════════════════════ */ body.culinartv4 h1, body.culinartv4 h2, body.culinartv4 h3, body.culinartv4 h4 { font-family: 'Fraunces',Georgia,serif } /* ───────────── HEADER (dark espresso bar) ───────────── */ body.culinartv4 header { position: sticky; top: 0; z-index: 60; } body.culinartv4 .headernewdesign { background: var(--espresso); border-bottom: 1px solid rgba(255, 255, 255, .08); } body.culinartv4 header .headernewdesign .headerview { display: flex; align-items: center; gap: 16px; padding: 11px 20px; max-width: var(--maxw); margin: 0 auto; position:relative; } body.culinartv4 header .header_left_part { display: flex; align-items: center; gap: 14px; flex-shrink: 0 } /* order-type selector → template addr-pill (mode line + location line) */ /*body.culinartv4 header #div_outlet_type_panel { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 10px; border-radius: var(--r-sm); flex-shrink: 0; line-height: 1.2; text-align: left; color: #fff; } body.culinartv4 header #div_outlet_type_panel:hover { background: rgba(255,255,255,.08) }*/ .addr-seg button img { width: 24px; } body.culinartv4 header #div_outlet_type_panel .outletAddress_main { align-items: flex-start; gap: 0 } body.culinartv4 header #div_outlet_type_panel .lang-select { width: auto } body.culinartv4 header #div_outlet_type_panel .btn-select { padding: 0 } body.culinartv4 header #div_outlet_type_panel .btn-select li { align-items: center; color: #fff; font-weight: 800; font-size: .92rem; white-space: nowrap } body.culinartv4 header #div_outlet_type_panel div#outletAddress > div { font-size: .76rem; color: #cbb9a6; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* search */ body.culinartv4 header .searchviewmaintop .searchview input[type="text"] { width: 100%; padding: 0px 14px 0px 42px; border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r-pill); background: rgba(255, 255, 255, .12); font-size: .95rem; color: #fff; height: 42px; } .searchview { position: relative; } span.searchiconitme { position: absolute; left: 15px; top: 48%; transform: translateY(-50%); opacity: .7; } body.culinartv4 header .searchviewmaintop .searchview input[type="text"]:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; border-radius: var(--r-pill); } .searchviewmaintop { flex: 1; position: relative; min-width: 180px; } body.culinartv4 header .searchviewmaintop .searchview input[type="text"]::placeholder { color: #cbb9a6 } body.culinartv4 header .searchviewmaintop .searchview input[type="text"]:focus { border-color: var(--saffron); background: rgba(255, 255, 255, .18); } body.culinartv4 header .searchviewmaintop .searchiconitme img { filter: invert(1) brightness(2); } body.culinartv4 header .placeholdernavin { color: #cbb9a6; display: none; } .btnsearch { display: none; } /* head-actions: icon buttons (account / login / signup / cart) */ body.culinartv4 header .head-actions { display: flex; align-items: center; gap: 8px } body.culinartv4 header .loginpartbox { display: flex; align-items: center; gap: 8px; justify-content: flex-end } body.culinartv4 header .icon-btn { width: 42px; height: 42px; border-radius: var(--r-pill); display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); color: #fff; position: relative; font-size: 1.05rem; padding: 0 } body.culinartv4 header .icon-btn:hover { border-color: var(--saffron); background: rgba(255,255,255,.18); color: #fff } body.culinartv4 header .icon-btn i { color: inherit } body.culinartv4 header .icon-btn .iconify { display: grid; place-items: center } body.culinartv4 header .icon-btn .iconify img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; filter: unset; } /* cart icon (saffron) + count badge */ body.culinartv4 header .icon-btn.cart-btn { background: var(--saffron); border-color: var(--saffron); color: var(--espresso) } body.culinartv4 header .icon-btn.cart-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso) } body.culinartv4 header .icon-btn.cart-btn[disabled] { opacity: .45 } body.culinartv4 header .cart-btn .cart-count { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--chili); color: #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--espresso); line-height: 1 } body.culinartv4 header .loginpartbox .dropdown-menu { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg) } /* ───────────── CART DRAWER (template drawer look) ───────────── */ .culinartv4 .caritemslideshow.caritemslideopen { transform: translateX(0); } .culinartv4 .caritemslideshow { position: fixed; top: 0; right: 0; height: 100vh; width: min(505px, 100%); background: var(--paper); z-index: 201; /*box-shadow: var(--shadow-lg);*/ transform: translateX(100%); transition: transform .3s var(--ease); display: flex; } h1, h2, h3, h4 { font-family: 'Fraunces', Georgia, serif; line-height: 1.1; margin: 0; font-weight: 600; } body.culinartv4 .caritemslideshow { } body.culinartv4 .caritemslideshow .cartviewpopup { display: flex; flex-direction: column; width: 100%; } body.culinartv4 .caritemslideshow .drawer-head { padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); } body.culinartv4 .caritemslideshow .drawer-head h2 { font-family: 'Fraunces',serif; font-size: 1.3rem; color: var(--ink); margin: 0 } body.culinartv4 .caritemslideshow .drawer-head .filterclose { z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.2rem; border: 0px; } body.culinartv4 .checkoutpage_left .drawer-head .filterclose { z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.2rem; border: 0px; } body.culinartv4 .caritemslideshow .cartmainboxview { overflow: auto; padding: 18px 20px; flex: 1; } .addcartoneitemview { display: flex; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .leftpartcart_n_main { width: 100%; } .customizationproducts.populate_custom_items { display: flex; align-items: center; grid-gap: 10px; font-size: .74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; } .editdatetimecustomization .cartitemprice { display: none; } .amount_pattern_cart.cartitemprice { font-weight: 700; font-size: .9rem; white-space: nowrap; } .cartitemname { line-height: normal; } .editdatetimecustomization .cartitemname > span { display: none; } .cartitemname > span { line-height: 1.1; font-family: 'Inter'; font-size: .9rem; font-weight: 700; } .buttonpriceview { display: flex; gap: 10px; margin-top: 6px; font-size: .76rem; align-items: center; } .editdatetimecustomization:before { content: '.'; position: absolute; top: -2px; left: -6px; } .editdatetimecustomization:first-child:before { display: none; } .editdatetimecustomization { position: relative; } .leftpartcart_n img.vegetarian_icon { display: none; } .itemimgbox { position: relative; flex-shrink: 0; } .itemimgbox img { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; } body.culinartv4 .caritemslideshow .bill_details { } body.culinartv4 .caritemslideshow .bill_details_heading { color: var(--ink); font-family: 'Fraunces',serif; display: none; } body.culinartv4 .caritemslideshow .itemsubtotal, body.culinartv4 .caritemslideshow .deliverycharges, body.culinartv4 .caritemslideshow .taxescharges { color: var(--ink-soft) } body.culinartv4 .caritemslideshow .LoginProceed { border-top: 1px solid var(--line); padding: 16px 20px; background: var(--white); } body.culinartv4 .caritemslideshow .LoginProceedbtn { } body.culinartv4 .caritemslideshow .LoginProceedbtn a, body.culinartv4 .caritemslideshow .LoginProceedbtn .LoginProceed_left div { color: #fff; font-weight: 700 } body.culinartv4 .caritemslideshow .LoginProceedbtn a { display: flex; align-items: center; gap: 8px } /* ───────────── FOOTER (dark espresso, template columns) ───────────── */ body.culinartv4 footer.footerview { background: var(--espresso); color: #cdbfae; margin-top: 40px; padding: 36px 0 24px } body.culinartv4 footer.footerview .container { max-width: var(--maxw) } body.culinartv4 footer.footerview h4 { color: #fff; font-family: 'Inter',sans-serif; font-size: .92rem; margin: 0 0 10px } body.culinartv4 footer.footerview a { display: flex; color: #cdbfae; font-size: .85rem; text-decoration: none; align-items: flex-start; margin-bottom: 10px; padding: 0; } body.culinartv4 footer.footerview a:hover { color: var(--saffron) } body.culinartv4 footer.footerview p { color: #cdbfae } body.culinartv4 footer.footerview .footerlogo { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; justify-content: flex-start; } body.culinartv4 footer.footerview .footerlogo a { padding: 0; margin: 0; } body.culinartv4 footer.footerview .footer-logo { height: 26px; width: auto; margin: 0; } body.culinartv4 footer.footerview .footer-partner img { height: 35px; width: auto; filter: brightness(0) invert(1); } body.culinartv4 footer.footerview .footer-blurb { font-size: .85rem; max-width: 34ch; line-height: 1.5 } body.culinartv4 footer.footerview .cols a iconify-icon { font-size: 18px; margin-right: 6px; position: relative; top: 1px; } body.culinartv4 footer.footerview .legal { max-width: var(--maxw); margin: 22px auto 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; font-size: .78rem; color: #cdbfae; text-align: center; } @media(max-width:780px) { body.culinartv4 footer.footerview .cols { grid-template-columns: 1fr 1fr } } @media(max-width:520px) { body.culinartv4 footer.footerview .cols { grid-template-columns: 1fr } } /* ════════════════════════════════════════════════════════════════════ CulinART v4 — PHASE 2: shop grid · category rail · product cards · filter Transforms the existing menu (category sidebar + list rows) into the template's rail + responsive card grid. All JS hooks preserved (data-itemid, addItemToCatNew, openItemDetails, qty-input stepper, data-bs-toggle tabs, accordion containers). ════════════════════════════════════════════════════════════════════ */ /* NOTE: menu content is AJAX-injected into #div_cat_subcat_item_html. We anchor every menu rule on that ID so it always beats frontnew.css's 3-class selectors (.newdesignnavi .x .y). #pillstab / .filterslidepopup_view are outside it. */ /* ── content width; the old separate top-bar toggle is hidden (toggle now lives inside the rail) ── */ body.culinartv4 .contentwrapper { max-width: var(--maxw); margin: 0 auto; width: 100% } body.culinartv4 .menuscrollsticky { display: none } /* ── menu-type toggle INSIDE the rail panel (template biz-toggle, above categories) ── */ body.culinartv4 #div_cat_subcat_item_html .biztoggle { display: flex; gap: 4px; background: var(--paper-2); border-radius: var(--r-pill); padding: 4px; margin-bottom: 12px } a { text-decoration: none; } body.culinartv4 #div_cat_subcat_item_html .biztoggle .biztoggle-btn { flex: 1; padding: 8px 10px; border-radius: var(--r-pill); font-weight: 600; font-size: .82rem; color: var(--ink-soft); display: flex; gap: 5px; align-items: center; justify-content: center; white-space: nowrap; outline: 0px; border: 0px; } body.culinartv4 #div_cat_subcat_item_html .biztoggle .biztoggle-btn.active { background: var(--espresso); color: #fff; box-shadow: var(--shadow-sm) } body.culinartv4 #div_cat_subcat_item_html .biztoggle .biztoggle-btn img { height: 18px; width: auto } /* ── shop layout: rail + products ── */ body.culinartv4 #div_cat_subcat_item_html .cat_main_view_main { background: transparent; border-radius: 0; padding: 0 } .fillteremptyicon img { width: 160px; } body.culinartv4 #div_cat_subcat_item_html .cat_main_view { display: grid!important; grid-template-columns: 236px 1fr; gap: 24px; padding: 24px 20px; align-items: start; background: transparent; } body.culinartv4 #div_cat_subcat_item_html .cat_main_view.cat_empty { display: block } body.culinartv4 #div_cat_subcat_item_html .cat_right { min-width: 0; padding: 0 } /* products breadcrumb + heading */ body.culinartv4 #div_cat_subcat_item_html .cat_right .crumbs { font-size: .82rem; color: var(--ink-soft); margin: 0 0 4px } body.culinartv4 #div_cat_subcat_item_html .cat_right .crumbs span { color: var(--saffron-deep); font-weight: 600 } body.culinartv4 #div_cat_subcat_item_html .cat_right .results-head { margin: 0 0 16px } body.culinartv4 #div_cat_subcat_item_html .cat_right .results-head h2 { font-family: 'Fraunces',serif; font-size: 1.6rem; font-weight: 600; color: var(--ink); margin: 0 } /* filter + sort toolbar */ body.culinartv4 #div_cat_subcat_item_html .cat_right .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; flex-wrap: wrap } body.culinartv4 #div_cat_subcat_item_html .cat_right .toolbar .count { font-size: .84rem; color: var(--ink-soft); font-weight: 500 } body.culinartv4 #div_cat_subcat_item_html .cat_right .filterchips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px } body.culinartv4 #div_cat_subcat_item_html .cat_right .fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); background: var(--white); font-size: .83rem; font-weight: 600; color: var(--ink-soft); border-radius: var(--r-sm); cursor: pointer; } body.culinartv4 #div_cat_subcat_item_html .cat_right .fchip:hover { border-color: var(--ink-soft) } body.culinartv4 #div_cat_subcat_item_html .cat_right .fchip.on { background: var(--espresso); border-color: var(--espresso); color: #fff } body.culinartv4 #div_cat_subcat_item_html .cat_right .fchip.clear { color: var(--ink-soft); border-style: dashed } body.culinartv4 #div_cat_subcat_item_html .cat_right .fchip.clear:hover { color: var(--chili); border-color: var(--chili) } body.culinartv4 #div_cat_subcat_item_html .cat_right .sortsel { display: inline-flex; align-items: center; gap: 8px; font-size: .83rem; color: var(--ink-soft); font-weight: 600; white-space: nowrap } .hamburgermenu { display: none; } /* ── category rail (catnav, expand/collapse tree) ── */ body.culinartv4 #div_cat_subcat_item_html .cat_left { position: sticky; top: 89px; width: auto; } body.culinartv4 #div_cat_subcat_item_html .menutypelist { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 8px; width: auto; margin-bottom: 18px; } body.culinartv4 #div_cat_subcat_item_html .menutypelist nav ul.nav { list-style: none; margin: 0; padding: 0; display: block; overflow: auto; height: calc(100vh - 180px); padding-right: 8px; margin-right: -8px; } body.culinartv4 #div_cat_subcat_item_html .menutypelist nav ul.nav::-webkit-scrollbar { width: 6px; } body.culinartv4 #div_cat_subcat_item_html .menutypelist nav ul.nav::-webkit-scrollbar:horizontal { width: 6px; height: 6px; } body.culinartv4 #div_cat_subcat_item_html .menutypelist nav ul.nav::-webkit-scrollbar-track { background-color: transparent; border-radius: 9999px; } body.culinartv4 #div_cat_subcat_item_html .menutypelist nav ul.nav::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 9999px; } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item.catcollapsed > a { color: #000; } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item { position: relative; display: block; width: 100%; margin: 0 } /* category names = bold orange; subcats grey; the "All" leaf = green */ body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: var(--r-sm); font-weight: 600; font-size: .9rem; text-align: left; color: var(--saffron-deep); } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a .catname { flex: 1 } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a:hover { background: var(--paper-2) } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a.active { background: var(--paper-2) } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a[id^='tab-all'] { color: var(--herb); font-weight: 600; } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a[id^='tab-all'].active, body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a[id^='tab-all'] { background: var(--herb-soft); color: var(--herb); padding: 6px 10px; border-radius: var(--r-sm); font-size: .85rem; width: 100%; text-align: left; display: block; } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item > a[id^='tab-all']::before { content: "\2726"; color: var(--herb); font-weight: 700; margin-right: 4px } body.culinartv4 #div_cat_subcat_item_html .menutypelist .catimgview { display: none } body.culinartv4 #div_cat_subcat_item_html .menutypelist .catbtn .chev { transition: transform .2s var(--ease); font-size: .8rem; opacity: .6; } body.culinartv4 #div_cat_subcat_item_html .menutypelist .nav-item.catcollapsed .chev { transform: rotate(-90deg) } body.culinartv4 #div_cat_subcat_item_html .menutypelist .innermenuview { padding-left: 12px; border-left: 2px solid var(--line); margin-left: 10px; } body.culinartv4 #div_cat_subcat_item_html .menutypelist .innermenuview li a { padding: 5px 10px; border-radius: var(--r-sm); font-size: .85rem; color: var(--ink-soft); width: 100%; text-align: left; display: block; cursor: pointer; } body.culinartv4 #div_cat_subcat_item_html .menutypelist .innermenuview li a:hover { background: var(--paper-2); color: var(--ink) } body.culinartv4 #div_cat_subcat_item_html .menutypelist .innermenuview li a.subactive { background: var(--herb-soft); color: var(--herb); font-weight: 600; } /* ── product card grid ── */ body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion, body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion-item, body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion-collapse, body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion-body { border: none; background: none; box-shadow: none; padding: 0; margin: 0 } body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion-header { margin: 0; background: none } body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion_main > .accordion-item > .accordion-header > .accordion-button { font-family: 'Fraunces',serif; font-size: 1.5rem; font-weight: 600; color: var(--ink); padding: 18px 0 10px; background: none; box-shadow: none; border: none; pointer-events: none } body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion_inner .subcatlistview > .accordion-header > .accordion-button { font-family: 'Inter',sans-serif; font-size: .95rem; font-weight: 700; color: var(--ink-soft); padding: 14px 0 8px; background: none; box-shadow: none; border: none; pointer-events: none; text-transform: uppercase; letter-spacing: .03em } body.culinartv4 #div_cat_subcat_item_html .catlistview .accordion-button::after { display: none } body.culinartv4 #div_cat_subcat_item_html .listviewtextimg { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-bottom: 18px; } #tabcontent-all_M1 .accordion-header, #tabcontent-all_M2 .accordion-header { display: none !important; } /* card */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; display: flex; flex-direction: column; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) } /* thumb (image is first child) */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .listviewitemimg { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .listviewitemimg img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; border-radius: 0; transition: transform .4s var(--ease) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox:hover .listviewitemimg img { transform: scale(1.05) } /* veg / non-veg / egg dot (top-left) */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .vegdot { position: absolute; top: 10px; left: 10px; z-index: 2; width: 20px; height: 20px; border-radius: 5px; background: #fff; border: 2px solid var(--herb); display: grid; place-items: center } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .vegdot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--herb) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .vegdot.nonveg { border-color: var(--chili) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .vegdot.nonveg::after { background: var(--chili) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .vegdot.egg { border-color: var(--gold) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .vegdot.egg::after { background: var(--gold) } /* dietary + special word-tags (top-right, stacked) */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardtagrow { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-end } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardtagrow .allergens, body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardtagrow .symbolsview, body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardtagrow .healthoption { display: flex; flex-direction: column; gap: 5px; align-items: flex-end } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .difftag { display: inline-block; background: rgba(255, 255, 255, .95); color: var(--herb); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .difftag.gf { color: #8a6d1a } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .difftag.vegan { color: var(--herb) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .difftag.jain { color: var(--saffron-deep) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .difftag.spice { color: var(--chili) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .difftag.allergen { color: #8a6d1a } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardtagrow .specialtags.d-none { display: none } /* body */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .listviewitemtext { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px 14px; flex: 1; width: auto } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .titleitem { font-size: 1.02rem; font-family: 'Inter', sans-serif; font-weight: 700; line-height: 1.25; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardesc { font-size: .82rem; color: var(--ink-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardmeta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .74rem; color: var(--ink-soft) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardmeta img { width: 14px; height: 14px; vertical-align: -2px } /* foot: price + add/stepper */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .priceandaddmore { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .priceitem { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.18rem; color: var(--ink); white-space: nowrap } .customization_box.customization_boxitem { margin: 18px 0; border-top: 1px solid var(--line); padding-top: 16px; } .addpricecustomization { display: flex; align-items: center; grid-gap: 12px; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .priceitem .fromlbl { font-family: 'Inter',sans-serif; font-size: .7rem; font-weight: 500; color: var(--ink-soft); display: none; } /* Add / Customize button */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .add_in_cart_new { background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232, 130, 30, .35); font-weight: 600; padding: 0px 12px; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; height: 34px; min-width: 93px; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .add_in_cart_new:hover { background: var(--saffron-deep) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .add_in_cart_new.soldout { background: var(--paper-2); color: var(--ink-soft); box-shadow: none; cursor: not-allowed } /* qty stepper */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .qty-input { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: #fff } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .qty-input label { width: 33px; height: 33px; display: grid; place-items: center; font-size: 13px; color: var(--saffron-deep); cursor: pointer; margin: 0; } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .qty-input label:hover { background: var(--paper-2) } body.culinartv4 #div_cat_subcat_item_html .listviewitembox .qty-input .total_item_new { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem } /* sold out */ body.culinartv4 #div_cat_subcat_item_html .listviewitembox .cardsoldout { position: absolute; inset: 0; background: rgba(28,20,16,.55); color: #fff; display: grid; place-items: center; font-weight: 700; letter-spacing: .04em; z-index: 3 } /* not-found */ body.culinartv4 #div_cat_subcat_item_html .fillterempty { padding: 60px 20px; text-align: center; color: var(--ink-soft) } /* ── sticky mobile cart bar ── */ body.culinartv4 #div_cat_subcat_item_html .additemvalueview { background: var(--espresso); color: #fff; box-shadow: 0 -4px 20px rgba(0,0,0,.2) } body.culinartv4 #div_cat_subcat_item_html .additemvalueview .additemvalueorder a { background: var(--saffron); color: #fff; font-weight: 700; border-radius: var(--r-pill); padding: 9px 18px } /* ── filter slide drawer ── */ body.culinartv4 .filterslidepopup_view { background: var(--paper) } body.culinartv4 .filterslidepopup_view .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--paper) } body.culinartv4 .filterslidepopup_view .drawer-head h2 { font-family: 'Fraunces',serif; font-size: 1.3rem; color: var(--ink); margin: 0 } body.culinartv4 .filterslidepopup_view .drawer-head .filterclose { background: var(--white); border: 1px solid var(--line); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-soft); cursor: pointer; font-size: 1.05rem; padding: 0 } body.culinartv4 .filterslidepopup_view .boxviewfilterheading { font-family: 'Inter',sans-serif; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 8px } body.culinartv4 .filterslidepopup_view .selectbtnfilter ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0 } body.culinartv4 .filterslidepopup_view .selectbtnfilter li label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .83rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; margin: 0; transition: border .15s,background .15s,color .15s } body.culinartv4 .filterslidepopup_view .selectbtnfilter li label:hover { border-color: var(--ink-soft) } body.culinartv4 .filterslidepopup_view .selectbtnfilter li label:has(input:checked) { background: var(--espresso); border-color: var(--espresso); color: #fff } body.culinartv4 .filterslidepopup_view .selectbtnfilter li input { position: absolute; opacity: 0; width: 0; height: 0 } body.culinartv4 .filterslidepopup_view .filterbottomview { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); background: var(--white) } body.culinartv4 .filterslidepopup_view .filterbottomview .customization_btn { flex: 1; padding: 11px 18px; border-radius: var(--r-pill); font-weight: 600; background: var(--saffron); color: #fff; border: none; cursor: pointer } body.culinartv4 .filterslidepopup_view .filterbottomview .customization_btn.withoutcolorview { background: var(--white); color: var(--ink); border: 1px solid var(--line) } /* ── responsive ── */ @media(max-width:880px) { body.culinartv4 #div_cat_subcat_item_html .cat_main_view { grid-template-columns: 1fr; grid-gap: 0; } } @media(max-width:520px) { body.culinartv4 #div_cat_subcat_item_html .listviewtextimg { grid-template-columns: 1fr 1fr; gap: 12px } } /* ════════════════════════════════════════════════════════════════════ CulinART v4 — PHASE 3: product customization modal → template .modal/.pd Re-skins #itemcustomizationpopup (.itemcustomization) to the template's centered product-detail modal. All JS hooks preserved (showaddview toggle, #item_*_info ids, .customization_item data-* attrs, the add/stepper, the #btn_custom_item_add_to_card button). ════════════════════════════════════════════════════════════════════ */ /* backdrop (shared overlay element gets .showaddview alongside the modal) */ body.culinartv4 .slideviewformoverlay.showaddview { position: fixed; inset: 0; z-index: 199 } /* modal: centered box */ body.culinartv4 #itemcustomizationpopup { display: none } body.culinartv4 #itemcustomizationpopup.showaddview { display: flex !important; position: fixed !important; inset: 0 !important; width: auto !important; max-width: none !important; height: auto !important; z-index: 10001; align-items: center; justify-content: center; background: rgba(28, 20, 16, .55); border-radius: 0; } body.culinartv4 #itemcustomizationpopup .midscreenview { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); height: auto !important; position: relative !important; display: flex !important; flex-direction: column; right: auto !important; left: auto !important; top: auto !important; bottom: auto !important; transform: none !important; max-width: 920px; width: calc(100% - 32px) !important; max-height: 92vh !important; overflow: auto; } /* header → floating close ✕ only */ body.culinartv4 #itemcustomizationpopup .headfilterview { position: absolute; top: 12px; left: 0; right: 12px; z-index: 6; height: auto; background: none; border: none; display: flex; justify-content: flex-end; } body.culinartv4 #itemcustomizationpopup .headfilterview_name { display: none } body.culinartv4 #itemcustomizationpopup .filterclose { width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); border: none; font-size: 1.05rem; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0 } body.culinartv4 #itemcustomizationpopup .filterclose:hover { color: var(--chili) } /* two-column pd body */ body.culinartv4 #itemcustomizationpopup .customizationsideviewmain { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden } body.culinartv4 #itemcustomizationpopup .customization_main { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; min-height: 0; overflow: auto; } /* media (left) */ body.culinartv4 #itemcustomizationpopup .customization_imgview { background: var(--paper-2); padding: 24px; margin: 0; display: flex; align-items: flex-start; justify-content: center; position: relative; } body.culinartv4 #itemcustomizationpopup .customization_imgview img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow-sm) } body.culinartv4 #itemcustomizationpopup .customization_imgview .cardtagrow { position: absolute; top: 34px; right: 34px; z-index: 2; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; } body.culinartv4 #itemcustomizationpopup .customization_imgview .symbolsview ul { flex-direction: column; align-items: flex-end; } body.culinartv4 #itemcustomizationpopup .customization_imgview .healthoption ul { flex-direction: column; align-items: flex-end; } body.culinartv4 #itemcustomizationpopup .customization_imgview .symbolsview ul li { display: inline-block; background: rgba(255, 255, 255, .95); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); color: var(--chili); } body.culinartv4 #itemcustomizationpopup .customization_imgview .symbolsview ul li img { display: none; } body.culinartv4 #itemcustomizationpopup .customization_imgview .healthoption ul li { display: inline-block; background: rgba(255, 255, 255, .95); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); color: #8a6d1a; } body.culinartv4 #itemcustomizationpopup .customization_imgview .healthoption ul li img { display: none; } /* info (right) */ body.culinartv4 #itemcustomizationpopup .pdinfowrap { padding: 30px 26px; margin-right: 50px; } body.culinartv4 #itemcustomizationpopup .tagandtitle { } body.culinartv4 #itemcustomizationpopup .iconpopupposition { line-height: 0; margin-bottom: 6px; } body.culinartv4 #itemcustomizationpopup .iconpopupposition img { width: 20px; height: 20px } body.culinartv4 #itemcustomizationpopup .titleitem { font-family: 'Fraunces', serif; font-weight: 600; color: var(--ink); margin: 0; font-size: 1.7rem; margin-bottom: 6px; line-height: 1.1; } body.culinartv4 #itemcustomizationpopup .specialtags:not(.d-none) .tagname { background: var(--herb-soft); color: var(--herb); font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--r-pill) } body.culinartv4 #itemcustomizationpopup .customization_titleview { margin-top: 8px; } body.culinartv4 #itemcustomizationpopup .descriptionview p { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; margin: 0 0 8px; } body.culinartv4 #itemcustomizationpopup .packview p { color: var(--ink-soft); font-size: .84rem; margin: 0 0 8px; } body.culinartv4 #itemcustomizationpopup .twoitemlistimg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center } body.culinartv4 #itemcustomizationpopup .twoitemlistimg ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0 } body.culinartv4 #itemcustomizationpopup .twoitemlistimg img { width: 16px; height: 16px } /* customization group → cust-block */ body.culinartv4 #itemcustomizationpopup .addcustomheading_selectportionview { gap: 10px; font-family: 'Inter'; font-size: .95rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; } body.culinartv4 #itemcustomizationpopup .addcustomheading { font-family: 'Inter',sans-serif; color: var(--ink); font-size: .95rem; font-weight: 700; } body.culinartv4 #itemcustomizationpopup [class*='selectportionview_'] { white-space: nowrap; font-size: .7rem; background: var(--chili); color: #fff; padding: 3px 8px; border-radius: var(--r-pill); font-weight: 700; text-transform: uppercase; } /* option row → .opt */ body.culinartv4 #itemcustomizationpopup .customization_item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 8px; cursor: pointer; transition: border .15s, background .15s; } .wrect > ul { display: flex; align-items: center; grid-gap: 6px; } body.culinartv4 #itemcustomizationpopup .customization_item:hover { border-color: var(--saffron) } body.culinartv4 #itemcustomizationpopup .titleviewincustom { min-width: 0; grid-gap: 12px; margin-top: 2px; } .checkboxcustome { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; } .editcombolink { color: var(--saffron-deep); font-weight: 600; font-size: 13px; } .checkboxcustome { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; } body.culinartv4 #itemcustomizationpopup .checkboxcustome label { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: .9rem; color: var(--ink); cursor: pointer; margin: 0 } body.culinartv4 #itemcustomizationpopup .checkboxcustome input[type=radio], body.culinartv4 #itemcustomizationpopup .checkboxcustome input[type=checkbox] { accent-color: var(--saffron); width: 18px; height: 18px; cursor: pointer } body.culinartv4 #itemcustomizationpopup .checkboxcustome input[type=checkbox] { display: none; } body.culinartv4 #itemcustomizationpopup .addcustomflex { display: flex; align-items: center; gap: 10px; flex-shrink: 0 } body.culinartv4 #itemcustomizationpopup .cartitemprice { white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--ink); } body.culinartv4 #itemcustomizationpopup .multivar select { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .82rem; background: var(--white) } /* add / stepper inside an option (multi-select) */ /* option ADD + stepper — identical to the menu-card Add/stepper (override frontnew's 60x32 box) */ body.culinartv4 #itemcustomizationpopup .customizationaddmore .additem { background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232, 130, 30, .35); font-weight: 600; padding: 0px 12px; font-size: .82rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; height: 34px; min-width: 93px; } body.culinartv4 #itemcustomizationpopup .customizationaddmore .additem i { display: none; } body.culinartv4 #itemcustomizationpopup .customizationaddmore .additem:hover { background: var(--saffron-deep) !important; color: #fff !important } body.culinartv4 #itemcustomizationpopup .customizationaddmore .qty-input { display: inline-flex; align-items: center; border: 1px solid var(--line) !important; border-radius: var(--r-pill) !important; overflow: hidden; background: #fff !important; width: auto !important; height: auto !important; padding: 0 } body.culinartv4 #itemcustomizationpopup .customizationaddmore .qty-input.d-none, body.culinartv4 #itemcustomizationpopup .customizationaddmore .additem.d-none { display: none !important } body.culinartv4 #itemcustomizationpopup .customization_item:has( .checkboxcustome input[type="radio"]:checked, .checkboxcustome input[type="checkbox"]:checked ) { border-color: var(--saffron); background: #fff7ee; } body.culinartv4 #itemcustomizationpopup .customizationaddmore .qty-input label { width: 33px; height: 33px; display: grid; place-items: center; font-size: 13px; color: var(--saffron-deep); cursor: pointer; margin: 0; } body.culinartv4 #itemcustomizationpopup .customizationaddmore .qty-input label:hover { background: var(--paper-2); } body.culinartv4 #itemcustomizationpopup .customizationaddmore .qty-input .total_item_new_popup { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; } /* sticky foot → pd-foot */ body.culinartv4 #itemcustomizationpopup .customization_button { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--line); padding: 14px 26px; display: flex; gap: 14px; align-items: center; justify-content: space-between; } body.culinartv4 #itemcustomizationpopup .rightsideflex { display: flex; align-items: center; grid-gap: 14px; } body.culinartv4 #itemcustomizationpopup .add_remove_main_item_popup { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: #fff; } body.culinartv4 #itemcustomizationpopup .add_remove_main_item_popup label { width: 40px; height: 40px; display: grid; place-items: center; color: var(--saffron-deep); font-weight: 700; cursor: pointer; margin: 0; } body.culinartv4 #itemcustomizationpopup .add_remove_main_item_popup label:hover { background: var(--paper-2); } body.culinartv4 #itemcustomizationpopup .add_remove_main_item_popup .total_item_main_item_popup { min-width: 30px; text-align: center; font-weight: 700; color: var(--ink) !important; background: none !important; } body.culinartv4 #itemcustomizationpopup .customization_btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 9px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232, 130, 30, .35); border: 0; outline: 0; } body.culinartv4 #itemcustomizationpopup .customization_btn:hover { background: var(--saffron-deep) } /* responsive: single column on small screens */ @media(max-width:760px) { body.culinartv4 #itemcustomizationpopup .customization_main { grid-template-columns: 1fr } body.culinartv4 #itemcustomizationpopup .customization_imgview { padding: 16px } body.culinartv4 #itemcustomizationpopup .customization_imgview img { aspect-ratio: 16/10; max-height: 200px } } /* ════════════════════════════════════════════════════════════════ PHASE 4 — STEPPED CHECKOUT (checkoutnew.cshtml, anchor #chkv4) Re-skins the existing one-page checkout into the template's stepped layout. Scoped under body.culinartv4 #chkv4 to beat frontnew.css without touching any logic/ids/data-hooks. ════════════════════════════════════════════════════════════════ */ body.culinartv4 section.container { max-width: var(--maxw); margin: 0 auto } /* two-column page frame + sticky summary */ /* hide the old "Details" back chip + decorative card bits — the steps bar is the nav now */ body.culinartv4 #chkv4 .checkoutpage_left > .headfilterview { display: none } body.culinartv4 #chkv4 .dotline, body.culinartv4 #chkv4 .positionixonview { display: none } /* steps indicator (global .steps/.step already styled; tune for the page) */ body.culinartv4 #chkv4 .step { cursor: pointer; font-size: 13px; padding-bottom: 8px; } body.culinartv4 #chkv4 .step.done::before { content: "\2713 " } /* step panes show/hide (the only behavioural CSS) */ body.culinartv4 #chkv4 .chk-step { display: none } body.culinartv4 #chkv4 .chk-step.active-step { display: block } /* each existing card → template panel */ /*body.culinartv4 #chkv4 .checkoutpage_boxview { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 20px 22px; margin-bottom: 16px; position: relative }*/ body.culinartv4 #chkv4 .checkoutpageheadview { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px } body.culinartv4 #chkv4 .checkoutpageheadview > .checkoutpageheadview_new { display: flex; flex-direction: column; gap: 3px } body.culinartv4 #chkv4 .checkoutpageheading { font-family: 'Fraunces',serif; font-size: 1.18rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.2 } body.culinartv4 #chkv4 .checkoutpageheadview_login { font-size: .76rem; color: var(--ink-soft); margin-top: 6px } body.culinartv4 #chkv4 .checkoutpageheadview_login a { color: var(--saffron-deep); font-weight: 700 } /* fields */ body.culinartv4 #chkv4 .checkoutpage_details, body.culinartv4 #chkv4 .checkoutpage_address { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; margin-bottom: 14px; } /*body.culinartv4 #chkv4 .form-group { margin-bottom: 14px }*/ body.culinartv4 #chkv4 .form-group > label, body.culinartv4 #chkv4 .checkoutpage_lefttorightview label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-soft); } body.culinartv4 #chkv4 .form-group label sup { color: var(--chili) } body.culinartv4 #chkv4 .form-control { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: #fff; line-height: normal; resize: unset; } body.culinartv4 #chkv4 .form-control:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; border-radius: var(--r-sm); } body.culinartv4 #chkv4 .form-control:focus { border-color: var(--saffron); box-shadow: none; border-radius: var(--r-sm); outline: 3px solid var(--saffron); outline-offset: 2px; } body.culinartv4 #chkv4 .form-control[disabled], body.culinartv4 #chkv4 .form-control[readonly] { background: var(--paper-2); color: var(--ink-soft) } body.culinartv4 #chkv4 .input-group { display: flex; align-items: stretch; flex-wrap: nowrap } body.culinartv4 #chkv4 .input-group-text { display: flex; align-items: center; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--paper-2); font-size: .85rem; font-weight: 600; color: var(--ink-soft) } body.culinartv4 #chkv4 .input-group .form-control { border-radius: 0 var(--r-sm) var(--r-sm) 0; flex: 1 1 auto; width: 1%; min-width: 0 } /* "Add New" address button (distinct from the pay button) */ body.culinartv4 #chkv4 .checkoutpageheadview #btn_add_new_address { display: inline-flex; align-items: center; gap: 6px; background: var(--saffron); color: #fff; font-weight: 700; font-size: .78rem; padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; box-shadow: 0 4px 14px rgba(232,130,30,.3) } body.culinartv4 #chkv4 .checkoutpageheadview #btn_add_new_address img { width: 14px; height: 14px; filter: brightness(0) invert(1) } /* saved-address cards (global .addr-card base applies; map app classes) */ body.culinartv4 #chkv4 .addr-card { align-items: flex-start; background: #fff } body.culinartv4 #chkv4 .addr-card.addr-card-selected { border-color: var(--saffron); background: #fff7ee } body.culinartv4 #chkv4 .addr-card-radio input { accent-color: var(--saffron); width: 18px; height: 18px; cursor: pointer; position: relative; top: 2px; } body.culinartv4 #chkv4 .addr-card-info { flex: 1; min-width: 0 } body.culinartv4 #chkv4 .addr-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px } body.culinartv4 #chkv4 .addrcardtop_left { display: flex; gap: 6px; align-items: center; flex-wrap: wrap } body.culinartv4 #chkv4 .addr-type-badge { font-size: .68rem; font-weight: 700; background: var(--espresso); color: #fff; padding: 2px 9px; border-radius: var(--r-pill) } body.culinartv4 #chkv4 .addr-default-badge { font-size: .66rem; font-weight: 700; background: var(--herb-soft,#e3efe6); color: var(--herb); padding: 2px 8px; border-radius: var(--r-pill) } body.culinartv4 #chkv4 .addr-card-actions { display: flex; gap: 6px } body.culinartv4 #chkv4 .addr-action-btn { color: var(--saffron-deep); font-weight: 600; padding: 0px 6px; cursor: pointer; font-size: 13px; } body.culinartv4 #chkv4 .addr-action-btn img { width: 14px; height: 14px } body.culinartv4 #chkv4 .addr-card-line { font-size: .85rem; color: var(--ink); font-weight: 500 } body.culinartv4 #chkv4 .addr-card-city { font-size: .78rem; color: var(--ink-soft); margin-top: 2px } body.culinartv4 #chkv4 .addr-empty-msg { font-size: .82rem; color: var(--ink-soft); } /* right-column cart summary panel */ body.culinartv4 #chkv4 .cartsummary_main { } .cartitemprice { font-weight: 700; font-size: .9rem; white-space: nowrap; } body.culinartv4 #chkv4 .cartsummary_listing { } .deliverydatetime { position: relative; display: inline-flex; align-items: center; } .deliverydatetime button { border: 1px solid var(--saffron); border-radius: 30px; background: #fff; font-size: 12px; padding: 7px 12px; color: var(--ink-soft); font-weight: 600; width: 100%; text-align: left; display: flex; align-items: center; gap: 5px; outline: 0; justify-content: space-between; position: relative; top: 1px; } .dropdown-menu-end.dateselectviewwidth.show { width: auto; display: grid; grid-template-columns: 64px 135px; padding: 8px; grid-gap: 10px; background: #fff; } .dateselectviewwidth select.form-control { padding: 5px 14px 5px 3px !important; font-size: 12px !important; line-height: normal; height: 28px; appearance: auto; } body.culinartv4.scrollhide { overflow: hidden; } .drawer-bodyview { overflow: auto; padding: 18px 20px; flex: 1; } #emptyaddress li.cartempty img { width: 145px; } #outletAddress > div { font-size: .76rem; color: #cbb9a6; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .timeselectview input[readonly] { background: #f4f4f4; } .timeselectview input { padding: 0 10px; font-size: 12px; line-height: normal; border: 1px solid var(--line); border-radius: var(--r-sm); outline: 0; width: 100%; height: 28px; } .customizationproducts.custom_items_cart_summary { display: flex; align-items: center; grid-gap: 10px; font-size: .74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; } /* bill rows → srow */ /* body.culinartv4 #chkv4 .bill_details { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px }*/ body.culinartv4 #chkv4 .bill_details_heading { font-weight: 700; font-size: .92rem; color: var(--ink); margin-bottom: 8px } body.culinartv4 #chkv4 .itemsubtotal, body.culinartv4 #chkv4 .deliverycharges, body.culinartv4 #chkv4 .taxescharges { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; padding: 3px 0; color: var(--ink-soft) } /*body.culinartv4 #chkv4 .deliverycharges.div_discount_view { color: var(--herb) }*/ body.culinartv4 #chkv4 .deliverycharges.totalview { font-size: 1.05rem; font-weight: 700; color: var(--ink); border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px } body.culinartv4 #chkv4 .itemsubtotal > div:first-child, body.culinartv4 #chkv4 .deliverycharges > div:first-child, body.culinartv4 #chkv4 .taxescharges > div:first-child { display: flex; align-items: center; gap: 5px } /* body.culinartv4 #chkv4 .pricefont { font-weight: 600; color: var(--ink); white-space: nowrap }*/ body.culinartv4 #chkv4 .deliverycharges i img, body.culinartv4 #chkv4 .taxescharges i img { width: 14px; height: 14px; } /* coupon block */ body.culinartv4 #chkv4 .apply_coupon { display: flex; justify-content: center; align-items: center; grid-gap: 12px; padding: 10px 16px; border-radius: var(--r-sm); background: var(--saffron); cursor: pointer; font-weight: 600; font-size: 14px; color: #fff; margin-bottom: 12px; } .addcartoneitemview:first-child { padding-top: 0; } .public-offers-wrpr.apply_coupon_applied .public-offer button:active { background: #fff7ee !important; border-color: var(--saffron) !important; color: var(--saffron) !important; } .public-offers-wrpr .public-offer button:active { background: #fff7ee !important; border-color: var(--saffron) !important; color: var(--saffron) !important; } ul.caritemlist li:first-child .addcartoneitemview { padding-top: 0; } body.culinartv4 #chkv4 .apply_coupon img { width: 20px; height: 20px; filter: brightness(0) invert(1); } /* left-column step nav + existing action buttons */ body.culinartv4 #chkv4 .chk-stepnav { display: flex; gap: 12px; margin-top: 12px } body.culinartv4 #chkv4 .chk-back { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none; } body.culinartv4 #chkv4 .chk-back:hover { border-color: var(--saffron); color: var(--saffron-deep) } body.culinartv4 #chkv4 .chk-continue { flex: 1; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--saffron); box-shadow: 0 4px 14px rgba(232, 130, 30, .35); font-weight: 600; border: 0px; outline: 0; padding: 11px 18px; border-radius: var(--r-pill); font-size: .92rem; transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; } body.culinartv4 #chkv4 .chk-continue:hover { background: var(--saffron-deep) } body.culinartv4 #chkv4 .chk-hide-step { display: none !important } /* right-column Proceed / Pay buttons (shown on final step) */ body.culinartv4 #chkv4 .paynowbtn { display: flex; flex-direction: column; gap: 10px; margin-top: 14px } body.culinartv4 #chkv4 .paynowbtn .proceedbtnview { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: var(--r-pill); font-weight: 700; font-size: .9rem; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-sm); cursor: pointer; text-decoration: none } body.culinartv4 #chkv4 .paynowbtn .proceedbtnview:hover { border-color: var(--saffron); color: var(--saffron-deep) } body.culinartv4 #chkv4 .paynowbtn .culinartbtnview { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 14px 24px; border-radius: var(--r-pill); font-weight: 700; font-size: .98rem; background: var(--saffron); color: #fff; box-shadow: 0 4px 16px rgba(232,130,30,.4); cursor: pointer; text-decoration: none } body.culinartv4 #chkv4 .paynowbtn .culinartbtnview:hover { background: var(--saffron-deep) } /* mobile pay bar hidden on desktop */ body.culinartv4 #chkv4 .btndetailsview { display: none } /* responsive */ @media(max-width:880px) { body.culinartv4 #chkv4 { grid-template-columns: 1fr; gap: 18px } body.culinartv4 #chkv4 .checkoutpage_right { position: static } body.culinartv4 #chkv4 .btndetailsview { display: flex; position: sticky; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(36,26,20,.08); padding: 12px 16px; margin: 0 -16px -16px } body.culinartv4 #chkv4 .btndetailsview .laternow a { display: inline-flex; align-items: center; gap: 5px; background: var(--saffron); color: #fff; font-weight: 700; padding: 12px 20px; border-radius: var(--r-pill); text-decoration: none } } /* ── PHASE 4 drawers: coupon slide-panel + new-address popup + staff modal ── */ /* coupon slide-panel */ body.culinartv4 .couponslidepopup.showaddview { transform: translateX(0); } body.culinartv4 .couponslidepopup { position: fixed; top: 0; right: 0; height: 100vh; width: min(505px, 100%); background: var(--paper); z-index: 201; /*box-shadow: var(--shadow-lg);*/ transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; } body.culinartv4 .couponslidepopup .headfilterview { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--paper); height: auto } body.culinartv4 .couponslidepopup .headfilterview > div:first-child { font-family: 'Fraunces',serif; font-size: 1.3rem; font-weight: 600; color: var(--ink) } body.culinartv4 .couponslidepopup .filterclose { z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.2rem; border: 0px; } body.culinartv4 .couponslidepopup .filterclose img { width: 14px; height: 14px } body.culinartv4 .couponcode_mainview { padding: 18px 20px; overflow: auto } body.culinartv4 .couponcode_mainview .coupon_heading { font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; letter-spacing: .04em } body.culinartv4 .couponcodeinput { display: flex; gap: 8px } body.culinartv4 .couponcodeinput .form-control { flex: 1; width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: #fff; line-height: 1.1; } body.culinartv4 .couponcodeinput .form-control:focus { outline: 3px solid var(--saffron); outline-offset: 2px; box-shadow: none; border-color: var(--saffron); } body.culinartv4 .couponcodeinput .btn_applycoupon { background: var(--saffron); color: #fff; border: none; border-radius: var(--r-sm); padding: 0 18px; font-weight: 700; font-size: .8rem; letter-spacing: .03em; cursor: pointer; } body.culinartv4 .couponcodeinput .btn_applycoupon:disabled { opacity: 0.3; cursor: not-allowed; } body.culinartv4 .oriconview { display: flex; align-items: center; justify-content: center; color: var(--ink-soft); font-size: .78rem; margin: 16px 0; position: relative } body.culinartv4 .oriconview::before { content: ""; height: 1px; border-bottom: 1px dashed var(--saffron); width: 100px; } body.culinartv4 .oriconview::after { content: ""; height: 1px; border-bottom: 1px dashed var(--saffron); width: 100px; } body.culinartv4 .oriconview span { background: #fff; color: var(--saffron); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--saffron); } /* coupon tickets */ body.culinartv4 .coupon_main_box .coupon_heading { margin-bottom: 10px } body.culinartv4 .coupon_main_box .public-offer { display: flex; flex-direction: column; gap: 10px } body.culinartv4 .coupon_main_box .btn .right .top span { font-weight: 700; color: var(--ink); font-size: .92rem } body.culinartv4 .coupon_main_box .btn .right .bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 4px } body.culinartv4 .coupon_main_box .btn .right .bottom > div:first-child { font-size: .78rem; color: var(--ink-soft) } body.culinartv4 .coupon_main_box .btn .couponcodetext { font-weight: 700; color: var(--saffron-deep) } body.culinartv4 .coupon_main_box .btn .couponapply { color: var(--saffron-deep); font-weight: 700; font-size: .82rem; white-space: nowrap } /* new-address popup */ body.culinartv4 .newAddresspopup { position: fixed; top: 0; right: 0; height: 100vh; width: min(505px, 100%); background: var(--paper); z-index: 201; /*box-shadow: var(--shadow-lg);*/ transform: translateX(100%); transition: transform .3s var(--ease); display: flex; flex-direction: column; } body.culinartv4 .newAddresspopup.caritemslideopen { transform: translateX(0); } body.culinartv4 .newAddresspopup .cartviewpopup { display: flex; flex-direction: column; height: 100% } body.culinartv4 .newAddresspopup .headfilterview { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--paper); height: auto } body.culinartv4 .newAddresspopup .headfilterview > div:first-child { font-family: 'Fraunces',serif; font-size: 1.3rem; font-weight: 600; color: var(--ink) } body.culinartv4 .newAddresspopup .filterclose { z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.2rem; border: 0px; } body.culinartv4 .newAddresspopup .filterclose img { width: 14px; height: 14px } body.culinartv4 .newAddresspopup .cartmainboxview { flex: 1; overflow: auto; padding: 18px 20px } body.culinartv4 .newAddresspopup .checkoutpage_boxview { background: transparent; border: none; box-shadow: none; padding: 0; margin: 0 } body.culinartv4 .newAddresspopup .form-group { margin-bottom: 14px } body.culinartv4 .newAddresspopup .form-group label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: 6px; color: var(--ink-soft) } body.culinartv4 .newAddresspopup .form-group label sup { color: var(--chili) } body.culinartv4 .newAddresspopup .form-control, body.culinartv4 .newAddresspopup .form-select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: #fff; line-height: 1.1; } body.culinartv4 .newAddresspopup .form-select { background: var(--white) url("data:image/svg+xml;utf8,") no-repeat right 11px center; } body.culinartv4 .newAddresspopup .form-control:focus, body.culinartv4 .newAddresspopup .form-select:focus { outline: 3px solid var(--saffron); outline-offset: 2px; box-shadow: none; border-color: var(--saffron); } body.culinartv4 .newAddresspopup .checkbox { display: flex; align-items: center; gap: 8px } body.culinartv4 .newAddresspopup .checkbox input { accent-color: var(--saffron); width: 18px; height: 18px; cursor: pointer; } .checkoutpage_instructions label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-soft); } body.culinartv4 .newAddresspopup .checkbox label { display: flex; align-items: center; font-size: .85rem; color: var(--ink); margin: 0; cursor: pointer } body.culinartv4 .newAddresspopup .LoginProceed { border-top: 1px solid var(--line); background: var(--white); padding: 14px 20px } body.culinartv4 .newAddresspopup .LoginProceedbtn1 { display: flex; align-items: center; justify-content: center; background: var(--saffron); color: #fff; font-weight: 700; border-radius: var(--r-pill); padding: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(232,130,30,.35) } body.culinartv4 .newAddresspopup .LoginProceedbtn1:hover { background: var(--saffron-deep) } /* staff-validation modal (#couponpopup is a Bootstrap .modal.fade — Bootstrap positions it) */ body.culinartv4 #couponpopup .modal-content.boot5popup { background: var(--paper); border: none; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 24px; position: relative } body.culinartv4 #couponpopup .modal-title { font-family: 'Fraunces',serif; font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0 0 4px; background: none; border: none; padding: 0 } body.culinartv4 #couponpopup .btn-close { position: absolute; top: 18px; right: 18px } body.culinartv4 #couponpopup .modal-body { padding: 14px 0 0 } body.culinartv4 #couponpopup .formgroupflex { display: flex; flex-direction: column; gap: 12px } body.culinartv4 #couponpopup .form-control { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; font-size: .9rem; color: var(--ink) } body.culinartv4 #couponpopup .customization_button { position: static; background: none; border: none; padding: 0; box-shadow: none; display: block } body.culinartv4 #couponpopup .customization_btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; width: 100%; background: var(--saffron); color: #fff; font-weight: 700; border: none; border-radius: var(--r-pill); padding: 13px; cursor: pointer; max-width: none } body.culinartv4 #couponpopup .customization_btn:hover { background: var(--saffron-deep) } /* ── PHASE 4: checkout slide drawer — cart drawer flips to this; the checkout partial is AJAX-loaded into #checkoutDrawerBody (Request.IsAjaxRequest()) ── */ body.culinartv4 .checkoutslidedrawer { display: flex !important; position: fixed; top: 0; right: 0; width: min(505px, 100%); height: 100vh; background: var(--paper); z-index: 10000; transition: transform .3s var(--ease); /*box-shadow: var(--shadow-lg);*/ transform: translateX(100%); -webkit-overflow-scrolling: touch; } .drawer-footview { border-top: 1px solid var(--line); padding: 16px 20px; background: var(--white); } body.culinartv4 .checkoutslidedrawer.caritemslideopen { transform: translateX(0); } body.culinartv4 .checkoutslidedrawer-body { min-height: 100%; display: flex; width: 100%; } body.culinartv4 #chkv4 .deliverycharges.totalview.dddd { margin: 0; padding: 0; border-top: 0px; } .checkoutpage { display: flex; width: 100%; } .checkoutpage_left { display: flex; flex-direction: column; width: 100%; } /* the AJAX-loaded checkout renders single-column inside the drawer */ /* ════════════════════════════════════════════════════════════════ PHASE 5 — payment finish / confirmation (finishcheckoutNew, thankyouculinartnew) ════════════════════════════════════════════════════════════════ */ body.culinartv4 .culinartthankyoupage { min-height: 62vh; height: auto !important; display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: transparent } body.culinartv4 .culinartthankyoupage .wrapperview { width: 100%; max-width: 520px; margin: 0 auto } body.culinartv4 .confirmation-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 40px 34px } body.culinartv4 .confirm-check.fail { background: rgba(192,57,43,.12); color: var(--chili) } body.culinartv4 .confirm-msg { color: var(--ink); font-size: .95rem; line-height: 1.55; margin-top: 4px } body.culinartv4 .confirm-msg h1, body.culinartv4 .confirm-msg h2, body.culinartv4 .confirm-msg h3, body.culinartv4 .confirm-msg h4 { font-family: 'Fraunces',serif; color: var(--ink); margin: 0 0 8px; line-height: 1.2 } body.culinartv4 .confirm-msg h1 { font-size: 1.6rem } body.culinartv4 .confirm-msg h2 { font-size: 1.4rem } body.culinartv4 .confirm-msg p, body.culinartv4 .confirm-msg span, body.culinartv4 .confirm-msg div { color: var(--ink-soft) } body.culinartv4 .confirm-msg b, body.culinartv4 .confirm-msg strong { color: var(--ink) } /* track timeline — left-aligned within the centered card */ body.culinartv4 .confirm-track { text-align: left; max-width: 300px; margin: 24px auto 4px } body.culinartv4 .track-dot-stack { display: flex; flex-direction: column; align-items: center; flex-shrink: 0 } body.culinartv4 .confirm-track .track-step .ln { margin-left: 0 } body.culinartv4 .confirm-track .track-body .t { color: var(--ink) } /* new-order / action button surfaced by the server message */ body.culinartv4 .confirmation-wrap #div_btn_new_order { margin-top: 20px } body.culinartv4 .confirmation-wrap #div_btn_new_order a, body.culinartv4 .confirmation-wrap #div_btn_new_order button, body.culinartv4 .confirmation-wrap a.btnneworder, body.culinartv4 .confirmation-wrap .neworderbtn a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--saffron); color: #fff; font-weight: 700; padding: 12px 26px; border-radius: var(--r-pill); text-decoration: none; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(232,130,30,.3) } body.culinartv4 .confirmation-wrap #div_btn_new_order a:hover { background: var(--saffron-deep) } /* ════════════ checkout: role-based Pay/Proceed + cart stepper + guest popup ════════════ */ /* tuck-shop students see Proceed only; everyone else sees Pay Now only (covers the right-column .paynowbtn and the mobile .btndetailsview pay bar) */ body.culinartv4 #chkv4 .chk-role-off { display: none !important } /* cart-summary qty stepper (and header cart drawer) → saffron theme, like the menu cards */ body.culinartv4 #chkv4 .cartsummary_listing .qty-input, body.culinartv4 .caritemslideshow .qty-input { display: inline-flex; align-items: center; border: 1px solid var(--line) !important; border-radius: var(--r-pill); overflow: hidden; background: #fff !important; height: auto; padding: 0 } body.culinartv4 #chkv4 .cartsummary_listing .qty-input label, body.culinartv4 .caritemslideshow .qty-input label { width: 30px; height: 32px; display: grid; place-items: center; color: var(--saffron-deep) !important; background: none !important; font-weight: 700; cursor: pointer; margin: 0 } span.edit_custom_items_multiple { color: var(--saffron-deep); font-weight: 600; padding: 0px 6px; cursor: pointer; font-size: 13px; } body.culinartv4 #chkv4 .cartsummary_listing .qty-input label:hover, body.culinartv4 .caritemslideshow .qty-input label:hover { background: var(--paper-2) !important; } body.culinartv4 #chkv4 .cartsummary_listing .qty-input span, body.culinartv4 .caritemslideshow .qty-input span { min-width: 26px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--ink) !important; background: none !important } body.culinartv4 #chkv4 .cartsummary_listing .qty-input label i, body.culinartv4 .caritemslideshow .qty-input label i { font-size: .7rem } /* Wizemen generic popup (#wizemenpopupsmall) → template modal look. Used by BOTH the guest-register popup and the order-summary popup: flex column, fixed light header, body scrolls only when taller than the viewport (no forced short height). */ body.culinartv4 #wizemenpopupsmall .divoutersmall { height: auto !important; max-height: 92vh; min-width: min(420px,94vw); max-width: 94vw; background: var(--paper); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); display: flex; flex-direction: column } body.culinartv4 #wizemenpopupsmall #bodyofcontentsmall { height: auto !important; min-height: 0; overflow: hidden; display: flex; flex-direction: column; flex: 1 } body.culinartv4 #wizemenpopupsmall .box-header { flex: none; background: var(--paper) !important; border: none !important; border-bottom: 1px solid var(--line) !important; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between } body.culinartv4 #wizemenpopupsmall .box-title-custom { font-family: 'Fraunces',serif; font-size: 1.25rem; font-weight: 600; color: var(--ink) !important; margin: 0 } body.culinartv4 #wizemenpopupsmall .box-header .closeicon { cursor: pointer } body.culinartv4 #wizemenpopupsmall .box-header .wizemenpopupclosesmall { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center } .order-sub a { font-weight: 600; color: var(--saffron-deep); font-size: 16px; } body.culinartv4 #wizemenpopupsmall .box-header .wizemenpopupclosesmall img { filter: none !important; width: 24px; height: 24px } body.culinartv4 #wizemenpopupsmall .dialogbox_inner { height: auto !important; min-height: 0 !important; max-height: none !important; flex: 1; overflow: auto; background: var(--paper) } body.culinartv4 #wizemenpopupsmall .dialogbox_inner_content { padding: 0px } body.culinartv4 #wizemenpopupsmall .confirmpopupview .paynowbtn { margin: 0 } body.culinartv4 #wizemenpopupsmall .confirmpopupview .paynowbtn p { text-align: center; color: var(--ink-soft); font-weight: 700; margin: 12px 0 } .confirmpopupview { padding: 20px; } body.culinartv4 #wizemenpopupsmall .confirmpopupview a.culinartbtnview { display: flex; align-items: center; justify-content: center; width: 100%; padding: 9px 13px; border-radius: var(--r-pill); font-weight: 700; text-decoration: none; } body.culinartv4 #wizemenpopupsmall .confirmpopupview .paynowbtn:first-child a.culinartbtnview { background: #fff; color: var(--saffron-deep); border: 1px solid var(--saffron) } body.culinartv4 #wizemenpopupsmall .confirmpopupview .paynowbtn:first-child a.culinartbtnview:hover { background: #fff7ee } body.culinartv4 #wizemenpopupsmall .confirmpopupview .paynowbtn:last-child a.culinartbtnview { background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232,130,30,.3) } body.culinartv4 #wizemenpopupsmall .confirmpopupview .paynowbtn:last-child a.culinartbtnview:hover { background: var(--saffron-deep) } /* ════════════════════════════════════════════════════════════════ PHASE 6 — My Orders (myorders.cshtml) ════════════════════════════════════════════════════════════════ */ body.culinartv4 .orderpageheader { display: flex; align-items: center; justify-content: space-between; padding: 26px 0 18px; flex-wrap: wrap; gap: 12px } body.culinartv4 .orderpageheader .pagetitle { font-family: 'Fraunces',serif; font-size: 1.7rem; font-weight: 600; color: var(--ink); margin: 0 } body.culinartv4 .orderpageheader .edsybtn_button { display: inline-flex; align-items: center; gap: 6px; background: var(--saffron); color: #fff; font-weight: 700; font-size: .9rem; padding: 11px 22px; border-radius: var(--r-pill); text-decoration: none; box-shadow: 0 4px 14px rgba(232,130,30,.3) } body.culinartv4 .orderpageheader .edsybtn_button:hover { background: var(--saffron-deep); color: #fff } /* two-column layout: sidebar + orders */ body.culinartv4 .myordermain { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; padding-bottom: 60px } .dialogbox_inner_content .drawer-foot { border-top: 1px solid var(--line); padding: 16px 20px; background: var(--white); display: flex; align-items: center; justify-content: space-between; } body.culinartv4 .myorder_left { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 10px; position: sticky; top: 90px } body.culinartv4 .myorder_left ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px } body.culinartv4 .myorder_left li { margin: 0 } body.culinartv4 .myorder_left li:first-child { display: flex; align-items: center; gap: 10px; padding: 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; font-family: 'Fraunces',serif; font-weight: 600; color: var(--ink) } body.culinartv4 .myorder_left li a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm); color: var(--ink-soft); font-weight: 600; font-size: .9rem; text-decoration: none } body.culinartv4 .myorder_left li a:hover { background: var(--paper-2) } body.culinartv4 .myorder_left li a.active { background: #fff7ee; color: var(--saffron-deep) } body.culinartv4 .myorder_left li img { width: 18px; height: 18px } /* order cards */ body.culinartv4 .myorder_right { display: flex; flex-direction: column; gap: 14px; min-width: 0 } body.culinartv4 .order-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: 16px 18px; cursor: pointer; transition: border-color .15s,box-shadow .15s } body.culinartv4 .order-card:hover { border-color: var(--saffron); box-shadow: var(--shadow-md) } body.culinartv4 .order-card .order-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px } body.culinartv4 .order-card .order-title { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.02rem; color: var(--ink) } body.culinartv4 .order-card .order-sub { font-size: .82rem; color: var(--ink-soft) } body.culinartv4 .order-card .order-header .order-left:last-child { display: flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-soft); white-space: nowrap } body.culinartv4 .order-card .products { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) } body.culinartv4 .order-card .products .product { display: flex; align-items: center; gap: 6px } body.culinartv4 .order-card .products .product img { width: 14px; height: 14px } body.culinartv4 .order-card .products_price { margin-top: 10px } body.culinartv4 .order-card .products_price .product { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px } body.culinartv4 .order-card .Order_Status { font-weight: 600; color: var(--ink) } body.culinartv4 .order-card .innerpageview { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces',serif; font-weight: 700; font-size: 1.1rem; color: var(--ink); white-space: nowrap } body.culinartv4 .order-card .innerpageview img { width: 16px; height: 16px; opacity: .5 } /* status badges */ body.culinartv4 .statusbtn { display: inline-block; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); line-height: 1.5 } body.culinartv4 .greenstatus { background: rgba(63,125,78,.12); color: var(--herb) } body.culinartv4 .orangestatus { background: #fff0dd; color: var(--saffron-deep) } body.culinartv4 .redstatus { background: rgba(192,57,43,.12); color: var(--chili) } /* order-summary popup content */ body.culinartv4 #wizemenpopupsmall .ordersummerypopup_tatalprice { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); margin-bottom: 12px } body.culinartv4 #wizemenpopupsmall .itemnuber { font-weight: 700; color: var(--ink) } body.culinartv4 #wizemenpopupsmall .itemnuber span { font-weight: 600; color: var(--saffron-deep); margin-left: 4px } body.culinartv4 #wizemenpopupsmall .orderlist .orderlistitem { display: flex; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); } body.culinartv4 #wizemenpopupsmall .detailsbilbox { margin-top: 16px; background: var(--paper-2); border-radius: var(--r-md); padding: 14px 16px } body.culinartv4 #wizemenpopupsmall .detailsbilbox h3 { font-family: 'Fraunces',serif; font-size: 1rem; font-weight: 600; color: var(--ink); margin: 0 0 8px } body.culinartv4 #wizemenpopupsmall .detailsbilbox ul { list-style: none; margin: 0; padding: 0 } body.culinartv4 #wizemenpopupsmall .detailsbilbox li { display: flex; justify-content: space-between; font-size: .85rem; padding: 4px 0; color: var(--ink-soft) } body.culinartv4 #wizemenpopupsmall .detailsbilbox li:last-child { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--ink) } /* responsive */ @media(max-width:880px) { body.culinartv4 .myordermain { grid-template-columns: 1fr } body.culinartv4 .myorder_left { position: static } } /* ── My Orders = account slide drawer (template account drawer with tabs) ── */ body.culinartv4 .accountslidedrawer { overflow: hidden } body.culinartv4 .accountslidedrawer .checkoutslidedrawer-body { height: 100%; min-height: 0 } body.culinartv4 .accountslidedrawer .accountdrawerview { height: 100%; display: flex; flex-direction: column; min-height: 0; width: 100%; } /* page-mode fallback: centered card */ body.culinartv4 .account-page-wrap { max-width: 680px; margin: 0 auto; padding: 24px 16px 60px } body.culinartv4 .account-page-wrap .accountdrawerview { height: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden } body.culinartv4 .accountdrawerview .drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--paper) } body.culinartv4 .accountdrawerview .acct-head-user h2 { font-family: 'Fraunces',serif; font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 0 } body.culinartv4 .accountdrawerview .acct-head-user .note { font-size: .82rem; color: var(--ink-soft); margin-top: 2px } body.culinartv4 .accountdrawerview .acct-close { z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.2rem; border: 0px; } body.culinartv4 .accountdrawerview .acct-close:hover { } body.culinartv4 .accountdrawerview .account-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 16px 18px } .product .vegdot { width: 18px; height: 18px; border-radius: 5px; background: #fff; border: 2px solid var(--herb); display: grid; place-items: center; } .product .vegdot:after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--herb); } .invoice a { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232, 130, 30, .35); } .invoice img { width: 16px; filter: brightness(0) invert(1); } .order-delivery-info { border: 0px; background: transparent; font-size: 12px; padding: 0; color: var(--ink-soft); font-weight: 600; width: 100%; text-align: left; display: flex; align-items: center; gap: 5px; outline: 0; justify-content: space-between; position: relative; top: 1px; } .orderleft { display: flex; grid-gap: 16px; align-items: center; } .orderimg { } .orderimg img { width: 54px; height: 54px; border-radius: var(--r-sm); object-fit: cover; } .itemnuber { font-size: 14px; font-weight: var(--font-weight-medium); } .orderlistitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .ordertitle { line-height: 1.1; font-family: 'Inter'; font-size: .9rem; font-weight: 700; } .detailsbilboxpopup .grandtotal { font-size: 14px; } .orderdetails { border-top: 1px solid var(--bordercolor); padding-top: 16px; margin-top: 16px; } .orderdetails h3 { font-size: 14px; margin-bottom: 12px; font-weight: var(--font-weight-semibold); } .orderdetails label { font-size: 12px; color: var(--theme-color-light); margin-bottom: 3px; } .orderdetails p { margin: 0; color: var(--theme-color); font-size: 12px; } .orderdetails p a { color: var(--theme-yellowcolor); } .detailsbilbox.detailsbilboxpopup { box-shadow: none; padding: 0; border-top: 1px solid var(--bordercolor); border-radius: 0px; padding-top: 16px; } .detailsbilboxpopup .grandtotal { font-size: 14px; } .detailsbilbox.detailsbilboxpopup h3 { font-size: 14px; margin-bottom: 12px; } .ordertext ul li { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.35; } .ordertext { display: flex; flex-wrap: wrap; flex-direction: column; grid-gap: 2px; } .orderprice { font-weight: 700; font-size: .9rem; white-space: nowrap; } /* tabs */ body.culinartv4 .account-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 16px; justify-content: flex-start; grid-gap: 14px; } body.culinartv4 .account-tabs .acct-tab { background: none; border: none; padding: 8px 2px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px } body.culinartv4 .account-tabs .acct-tab:hover { color: var(--ink) } body.culinartv4 .account-tabs .acct-tab.active { color: var(--saffron-deep); border-bottom-color: var(--saffron) } /* panels */ body.culinartv4 .acct-panel { display: none } body.culinartv4 .acct-panel.acct-panel-active { display: block } body.culinartv4 .acct-panel .myorder_right { display: flex; flex-direction: column; gap: 12px } /* saved addresses (Addresses tab, read-only) */ body.culinartv4 .acct-addr-list { display: flex; flex-direction: column; gap: 10px } body.culinartv4 .acct-addr-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px } body.culinartv4 .acct-addr-card .addr-card-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 5px } body.culinartv4 .acct-addr-card .addr-type-badge { font-size: .68rem; font-weight: 700; background: var(--espresso); color: #fff; padding: 2px 9px; border-radius: var(--r-pill) } body.culinartv4 .acct-addr-card .addr-default-badge { font-size: .66rem; font-weight: 700; background: var(--herb-soft,#e3efe6); color: var(--herb); padding: 2px 8px; border-radius: var(--r-pill) } body.culinartv4 .acct-addr-card .addr-card-line { font-size: .88rem; color: var(--ink); font-weight: 500 } body.culinartv4 .acct-addr-card .addr-card-city { font-size: .8rem; color: var(--ink-soft); margin-top: 2px } /* empty states */ body.culinartv4 .acct-empty { text-align: center; padding: 44px 20px; color: var(--ink-soft) } body.culinartv4 .acct-empty-ic { font-size: 2rem; margin-bottom: 10px; opacity: .65 } body.culinartv4 .acct-empty p { margin: 0; font-size: .9rem; line-height: 1.55 } /* logout footer (fixed at the bottom of the drawer, with a gap above) */ body.culinartv4 .accountdrawerview .account-foot { flex: none; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--paper) } body.culinartv4 .acct-logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0px; outline: 0; padding: 9px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232, 130, 30, .35); width: 100%; } body.culinartv4 .acct-logout:hover { background: var(--saffron-deep); } /* ── Auth (login / sign-up) slide drawer for guests — OTP only, no social ── */ /*body.culinartv4 .authslidedrawer { overflow: hidden; width: min(440px,100vw) }*/ body.culinartv4 .authslidedrawer .checkoutslidedrawer-body { height: 100%; min-height: 0 } body.culinartv4 .authslidedrawer .authdrawerview { height: 100%; display: flex; flex-direction: column; min-height: 0; width: 100%; } body.culinartv4 .authdrawerview .drawer-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--paper) } body.culinartv4 .authdrawerview .acct-head-user h2 { font-family: 'Fraunces',serif; font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 0 } body.culinartv4 .authdrawerview .acct-head-user .note { font-size: .82rem; color: var(--ink-soft); margin-top: 2px } body.culinartv4 .authdrawerview .acct-close { z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); font-size: 1.2rem; border: 0px; display: grid; place-items: center; cursor: pointer; } body.culinartv4 .authdrawerview .acct-close:hover { } body.culinartv4 .auth-body { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column } /* re-skin the OTP login form (.edsyform) */ body.culinartv4 .authdrawerview .loginoption { margin-bottom: 14px } body.culinartv4 header .icon-btn img { filter: brightness(0) invert(1); width: 20px; } body.culinartv4 .authdrawerview .form__label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-soft); } .seg.u-mb-18 button { cursor: pointer; border: none; background: none; color: var(--ink); font-family: 'Inter', system-ui, sans-serif; font-size: 14px; line-height: 1.5; font-weight: 500; } body.culinartv4 .authdrawerview .form-element-field { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: #fff; line-height: normal; } body.culinartv4 .authdrawerview .form-element-field:focus { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(232,130,30,.12) } body.culinartv4 .checkoutpage_details .form-group { margin-bottom: 14px; } body.culinartv4 .checkoutpage_details .form-group label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-soft); } body.culinartv4 .checkoutpage_details .form-group label sup { color: var(--chili); } .body.culinartv4 .checkoutpage_details .form-element-field { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font-family: inherit; font-size: .92rem; background: #fff; line-height: normal; opacity: 0 !important; } body.culinartv4 .authdrawerview .formgroup { margin-top: 6px } body.culinartv4 .authdrawerview .culinartbtnview { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: .92rem; transition: transform .15s var(--ease), box-shadow .2s, background .2s; white-space: nowrap; background: var(--saffron); color: #fff; box-shadow: 0 4px 14px rgba(232, 130, 30, .35); outline: 0; border: 0; line-height: 1.1; width: 100%; } body.culinartv4 .authdrawerview .culinartbtnview:hover { background: var(--saffron-deep); color: #fff } button.tab-btn.active { color: var(--saffron); } body.culinartv4 .authdrawerview .alignview { display: flex; align-items: center; justify-content: space-between; margin-top: -6px } body.culinartv4 .authdrawerview .wizemenforget { font-size: .82rem; color: var(--ink-soft) } body.culinartv4 .authdrawerview #resendOtpLink { color: var(--saffron-deep); font-weight: 700; cursor: pointer } body.culinartv4 .authdrawerview .textmsg { font-size: .9rem; color: var(--ink-soft) } /* signup note pinned to bottom */ body.culinartv4 .auth-signup-note { margin-top: auto; padding-top: 20px; text-align: center; font-size: .86rem; color: var(--ink-soft); border-top: 1px dashed var(--line) } body.culinartv4 .auth-signup-note a { color: var(--saffron-deep); font-weight: 700; text-decoration: none } /* ════════════════════════════════════════════════════════════════════════ Auth PAGES — newuser / forgotpassword / newpassword / resetpassword (standalone, rendered through _LayoutAccount → dark header + footer already skinned). Scoped to body.authpageview so these page-level rules never bleed into ordernew/order which also use .contentwrapper. Centered card on paper, Fraunces heading, saffron submit. Logic/markup untouched — re-skin only. ════════════════════════════════════════════════════════════════════════ */ body.authpageview .contentwrapper { background: var(--paper); padding: 40px 16px 64px; min-height: 64vh } body.authpageview .contentwrapper .wrapperview { max-width: 480px; margin: 0 auto; width: 100% } body.authpageview .contentwrapper .wrapperview .container { max-width: 100%; width: 100%; padding: 0; margin: 0 } body.authpageview .contentwrapper .wrapperview .row { margin: 0 } /* the card */ body.authpageview .registerpage { width: 100%; max-width: 100%; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 30px 30px 26px } body.authpageview .registerpage .checkoutpage_left, body.authpageview .registerpage .mobviewforgot, body.authpageview .registerpage .newuserpage, body.authpageview .registerpage .mobnewuser, body.authpageview .registerpage .detailsviewpage { background: none !important; background-image: none !important; padding: 0; height: auto; display: block; position: static; overflow: visible } body.authpageview .registerpage .headfilterview { display: none !important } /* heading */ body.authpageview .registerpage .checkoutpageheadview { margin: 0 0 20px; padding: 0; border: 0 } body.authpageview .registerpage .checkoutpageheading { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.55rem; line-height: 1.2; color: var(--ink); margin: 0 } /* fields (single column, like the auth drawer) */ body.authpageview .registerpage .checkoutpage_details { display: flex; flex-direction: column; gap: 15px; margin: 0 } body.authpageview .registerpage .checkoutpage_details .form-group { width: 100%; max-width: 100%; margin: 0; flex: none } body.authpageview .registerpage .checkoutpage_boxview label { display: block; font-family: 'Inter',sans-serif; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px } body.authpageview .registerpage .checkoutpage_boxview label sup { color: var(--saffron-deep); font-weight: 700 } body.authpageview .registerpage .form-control { width: 100%; height: 46px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; padding: 0 14px; font-family: 'Inter',sans-serif; font-size: .92rem; color: var(--ink); box-shadow: none; line-height: normal } body.authpageview .registerpage .form-control:focus { border-color: var(--saffron); box-shadow: 0 0 0 3px rgba(232,130,30,.16); outline: 0 } body.authpageview .registerpage .form-control:disabled, body.authpageview .registerpage .form-control[disabled] { background: var(--paper-2); color: var(--ink-soft); cursor: not-allowed } /* +91 mobile group */ body.authpageview .registerpage .input-group { display: flex; align-items: stretch; flex-wrap: nowrap } body.authpageview .registerpage .input-group-text { display: flex; align-items: center; border: 1px solid var(--line); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--paper-2); padding: 0 12px; color: var(--ink-soft); font-weight: 600; font-size: .9rem } body.authpageview .registerpage .input-group-text span { color: var(--ink-soft) } body.authpageview .registerpage .input-group .form-control { flex: 1; border-top-left-radius: 0; border-bottom-left-radius: 0 } /* submit button (saffron, full width) */ body.authpageview .registerpage .paynowbtn { margin: 24px 0 0; padding: 0; border: 0; text-align: center; position: static; background: none } body.authpageview .registerpage .edsybtn_button { margin-top: 24px } body.authpageview .registerpage .culinartbtnview, body.authpageview .registerpage .paynowbtnview { display: flex; align-items: center; justify-content: center; width: 100%; padding: 13px; border-radius: var(--r-pill); background: var(--saffron); color: #fff; font-weight: 700; font-family: 'Inter',sans-serif; font-size: .98rem; text-decoration: none; border: 0; box-shadow: 0 4px 14px rgba(232,130,30,.3); cursor: pointer } body.authpageview .registerpage .culinartbtnview:hover, body.authpageview .registerpage .paynowbtnview:hover { background: var(--saffron-deep); color: #fff } body.authpageview .registerpage .culinartbtnview[disabled] { opacity: .65; cursor: wait } /* small screens — card fills width */ @media (max-width:520px) { body.authpageview .contentwrapper { padding: 20px 12px 40px } body.authpageview .registerpage { padding: 22px 18px } body.authpageview .registerpage .checkoutpageheading { font-size: 1.35rem } } /* ═══════════════════════════════════════════════════════════════════════════ PHASE 8 — TUCKSHOP (student flow) on _LayoutCulinartV4. Restyles the _CustomerLayout-derived markup + customtuckshopcss "_xxxxx" Swiggy stepper classes to the espresso/saffron template. Scoped to body.culinartv4 ONLY (admin/cashier stay on _CustomerLayout, untouched). The "_xxxxx" display toggle (._4aKW6 = display:none!important) is NEVER overridden here — only colors/borders. All JS hooks/data-names preserved. ═══════════════════════════════════════════════════════════════════════════ */ /* ---- shell ---- */ body.culinartv4 .content__wrapper { background: var(--paper); min-height: 100vh } body.culinartv4 .main__wrapper { display: flex; align-items: flex-start; max-width: var(--maxw); margin: 0 auto } body.culinartv4 .main__wrapper__content { flex: 1; min-width: 0; padding: 18px 22px 56px } body.culinartv4 #div_main_wrapper { display: none } /* ---- header brand + greeting + actions (reuses header.site/.bar/.icon-btn/.cart-btn) ---- */ body.culinartv4 .tuckshop-site .brand { flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.05 } body.culinartv4 .brand-mark { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.35rem; color: #fff; letter-spacing: .2px } body.culinartv4 .brand-school { font-size: .7rem; color: var(--saffron); font-weight: 700; text-transform: uppercase; letter-spacing: .7px } body.culinartv4 .tuck-greeting { flex: 1; min-width: 0; text-align: center } body.culinartv4 .tuck-greeting h3 { margin: 0; font-size: .95rem; font-weight: 500; color: #e9ddcd; font-family: 'Inter',sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } body.culinartv4 .tuck-greeting h3 span { color: #fff; font-weight: 600 } body.culinartv4 .tuck-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0 } /* ---- sidebar nav (keeps .menu + hrefs + Session gating + ViewBag highlight) ---- */ body.culinartv4 .main__wrapper > .sidebar { background: #fff; border-right: 1px solid var(--line); width: 228px; flex-shrink: 0; padding: 14px 0; box-shadow: none; min-height: calc(100vh - 64px); border-radius: 0 } body.culinartv4 .sidebar .menu { list-style: none; margin: 0; padding: 0 } body.culinartv4 .sidebar .menu > li > a { display: block; padding: 11px 22px; color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; border-left: 3px solid transparent; font-family: 'Inter',sans-serif } body.culinartv4 .sidebar .menu > li > a:hover { background: var(--paper); color: var(--saffron-deep) } body.culinartv4 .sidebar .menu > li.active > a { background: var(--paper-2); border-left-color: var(--saffron); color: var(--saffron-deep) } body.culinartv4 .sidebar .menu .inner_menu a { padding: 8px 22px 8px 34px; font-weight: 500; font-size: .85rem; color: var(--ink-soft); border-left: 3px solid transparent } body.culinartv4 .sidebar .menu i.fa-angle-down { float: right; margin-top: 3px } /* ---- breadcrumb / page-title bar ---- */ body.culinartv4 .breadcrumb__wizmenen { background: transparent; box-shadow: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 2px 0 16px; border: 0 } body.culinartv4 .breadcrumb__wizmenen .left__bar h1, body.culinartv4 .breadcrumb__wizmenen .topsideview { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.1rem; color: var(--ink); margin: 0 } body.culinartv4 .breadcrumb__wizmenen [data-name='showCart'] { color: var(--saffron-deep); cursor: pointer; font-weight: 700 } body.culinartv4 .breadcrumb__wizmenen .breadcrumb { background: none; margin: 0; padding: 0 } body.culinartv4 .breadcrumb__wizmenen .breadcrumb-item.active { color: var(--ink-soft); font-size: .85rem } /* ---- shopping-selection picker + category boxes ---- */ body.culinartv4 .productviewcss .box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin-bottom: 18px; overflow: hidden } body.culinartv4 .productviewcss .box-header { display: flex; align-items: center; gap: 10px; background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 12px 16px; border-radius: 0 } body.culinartv4 .productviewcss .box-header img { height: 22px; width: auto } body.culinartv4 .productviewcss .box-title, body.culinartv4 .productviewcss .box-header h4 { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 0 } body.culinartv4 .productviewcss .box-body { padding: 16px } body.culinartv4 .productviewcss .box-body .row { margin: 0 } body.culinartv4 #cmbItemCategoryType { height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; font-family: 'Inter',sans-serif; font-size: .92rem; color: var(--ink); background: #fff; width: 100% } body.culinartv4 #btnShow { height: 44px; padding: 0 26px; border-radius: var(--r-pill); background: var(--saffron); color: #fff; border: 0; font-weight: 700; font-family: 'Inter',sans-serif; width: auto; min-width: 110px; white-space: nowrap } body.culinartv4 #pendingOrders .col-md-1 { width: auto; flex: 0 0 auto; max-width: none } body.culinartv4 #btnShow:hover { background: var(--saffron-deep) } /* ---- item grid + cards (re-authored .tuckcard wrapper; stepper block kept) ---- */ body.culinartv4 [data-name='divItems'] { display: grid; grid-template-columns: repeat(auto-fill,minmax(228px,1fr)); gap: 16px; float: none; width: auto; padding: 0 } body.culinartv4 .tuckcard-col { width: auto; max-width: none; padding: 0; margin: 0; float: none } body.culinartv4 .tuckcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: box-shadow .15s ease,transform .15s ease } body.culinartv4 .tuckcard:hover { box-shadow: var(--shadow-md); transform: translateY(-2px) } body.culinartv4 .tuckcard-thumb { aspect-ratio: 3/2; background: var(--paper-2); overflow: hidden } body.culinartv4 .tuckcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block } body.culinartv4 .tuckcard-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1 } body.culinartv4 .tuckcard-title { display: flex; align-items: center; gap: 7px; margin-bottom: 5px } body.culinartv4 .tuckcard-title .veg-mark { height: 15px; width: 15px; flex-shrink: 0; float: none; margin: 0 } body.culinartv4 .tuckcard-title span { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1rem; color: var(--ink); line-height: 1.2 } body.culinartv4 .tuckcard-desc { font-size: .8rem; color: var(--ink-soft); line-height: 1.45; margin-bottom: 12px; flex: 1; max-height: 62px; overflow: auto } body.culinartv4 .tuckcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; min-height: 34px } body.culinartv4 .tuckcard-price { font-weight: 700; font-size: 1.02rem; color: var(--ink); font-family: 'Inter',sans-serif } /* ---- stepper recolor — green→saffron, geometry + ._4aKW6 toggle untouched ---- */ body.culinartv4 ._3L1X9 { border: 1px solid var(--saffron); border-radius: var(--r-pill); color: var(--saffron-deep); background: #fff; font-weight: 700 } body.culinartv4 ._1RPOp { color: var(--saffron-deep) } body.culinartv4 ._1RPOp:hover { box-shadow: 0 2px 8px rgba(232,130,30,.25) } body.culinartv4 ._2zAXs { background-color: var(--saffron); color: #fff; border-radius: 0 } body.culinartv4 ._1ds9T, body.culinartv4 ._29Y5Z { color: var(--saffron-deep) } body.culinartv4 ._29Y5Z:before { background-color: var(--saffron-deep) } /* ---- header cart slide drawer (#CartMenu .hd_menucart) ---- */ body.culinartv4 .hd_menucart { position: fixed; top: 0; right: -400px; left: auto; width: min(400px,100vw); max-width: none; height: 100vh; height: 100dvh; max-height: none !important; background: #fff; border: 0; border-radius: 0; box-shadow: -10px 0 36px rgba(36,26,20,.20); display: flex !important; flex-direction: column; z-index: 10000; overflow: hidden; transition: right .32s cubic-bezier(.25,.46,.45,.94) } body.culinartv4 .hd_menucart.active { right: 0 } body.culinartv4 .hd_menucart > .tuckcart-head { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; flex: none; padding: 16px 18px; background: var(--paper-2); border-bottom: 1px solid var(--line) } body.culinartv4 .hd_menucart .tuckcart-title { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.15rem; color: var(--ink) } body.culinartv4 .hd_menucart .tuckcart-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; display: grid; place-items: center; flex: none } body.culinartv4 .hd_menucart .tuckcart-close:hover { border-color: var(--saffron); color: var(--saffron-deep) } body.culinartv4 .tuckdrawer-overlay { position: fixed; inset: 0; background: rgba(28,20,16,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 9990 } body.culinartv4 .tuckdrawer-overlay.show { opacity: 1; visibility: visible } body.culinartv4 .chk-drawer-loading { padding: 46px 20px; text-align: center; color: var(--ink-soft); font-size: .95rem } body.culinartv4 .hd_menucart table { margin: 0 } body.culinartv4 .hd_menucart th { font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); font-weight: 700; padding: 8px 12px; background: #fff } body.culinartv4 .hd_menucart td { padding: 8px 12px; font-size: .85rem; color: var(--ink); border-top: 1px solid var(--line) } body.culinartv4 .hd_menucart > table { flex: none; margin: 0 } body.culinartv4 #divCartMenu { flex: 1 1 auto; height: auto !important; max-height: none; min-height: 0; overflow-y: auto } body.culinartv4 #btnSubmitCart { background: var(--saffron) !important; color: #fff !important; border: 0; border-radius: 0; height: 48px !important; font-weight: 700; font-family: 'Inter',sans-serif; flex: none } body.culinartv4 #btnSubmitCart span { color: #fff !important } body.culinartv4 #btnSubmitCart:hover { background: var(--saffron-deep) !important } /* ---- TUCKSHOP: MyOrders section tables + burger-off ---- */ body.culinartv4 .box-header img[src*="burger"] { display: none } body.culinartv4 .box-body table.table { margin: 0; background: #fff } body.culinartv4 .box-body table.table thead th { background: var(--paper-2); color: var(--ink); font-family: 'Inter',sans-serif; font-weight: 700; font-size: .73rem; text-transform: uppercase; letter-spacing: .4px; border: 0; border-bottom: 1px solid var(--line); padding: 11px 12px; vertical-align: middle } body.culinartv4 .box-body table.table tbody td { font-size: .86rem; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); padding: 11px 12px; vertical-align: middle; background: #fff } body.culinartv4 .box-body table.table.table-bordered, body.culinartv4 .box-body table.table.table-bordered td, body.culinartv4 .box-body table.table.table-bordered th { border-color: var(--line) } body.culinartv4 .box-body table.table tbody tr:hover td { background: var(--paper) } body.culinartv4 .box-body table.table .fa-eye, body.culinartv4 .box-body table.table .fa-file-invoice-dollar, body.culinartv4 .box-body table.table .fa-file-invoice { color: var(--saffron-deep) } /* ---- TUCKSHOP: UserOrderConfirmation (cart-review/submit) ---- */ body.culinartv4 .tuck-pagehead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; background: transparent; box-shadow: none; border: 0; padding: 2px 0 14px } body.culinartv4 .tuck-pagehead #page-title { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.25rem; color: var(--ink); margin: 0 } body.culinartv4 .cart-total-amt { color: var(--saffron-deep); font-weight: 700 } body.culinartv4 .tuck-pagehead .breadcrumb { background: none; margin: 0; padding: 0 } body.culinartv4 .tuck-pagehead .breadcrumb li, body.culinartv4 .tuck-pagehead .breadcrumb a { font-size: .84rem; color: var(--ink-soft); text-decoration: none } .additemvalueview { display: none; } body.culinartv4 .placeorderpage { padding: 0 } body.culinartv4 .tuck-review-wrap { max-width: 760px; margin: 0 auto } body.culinartv4 .addmorebtnview { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: .9rem; text-decoration: none } body.culinartv4 .addmorebtnview:hover { border-color: var(--saffron); color: var(--saffron-deep) } body.culinartv4 .placeorderpage .box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden } body.culinartv4 .placeorderpage .box-header { display: flex; align-items: center; gap: 10px; background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 12px 16px } body.culinartv4 .placeorderpage .box-title { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); margin: 0 } /* confirmation submit panel + form fields */ body.culinartv4 #reviewCartMenu .ordernumberview { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; border-top: 1px solid var(--line) } body.culinartv4 #reviewCartMenu .samewidthview { width: 100%; flex: none; min-width: 0; padding: 0 } body.culinartv4 #reviewCartMenu .samewidthview label { display: block; font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 5px } body.culinartv4 #reviewCartMenu #btnSubmitOrder { width: 100% !important } body.culinartv4 .placeorderpage .form-control, body.culinartv4 #reviewCartMenu .form-control { height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; font-family: 'Inter',sans-serif; font-size: .9rem; color: var(--ink); background: #fff; width: 100% } body.culinartv4 #reviewCartMenu textarea.form-control { height: auto; padding: 10px 12px } body.culinartv4 #btnSubmitOrder { background: var(--saffron) !important; color: #fff !important; border: 0 !important; border-radius: var(--r-pill) !important; height: 44px !important; font-weight: 700; font-family: 'Inter',sans-serif } body.culinartv4 #btnSubmitOrder span { color: #fff !important } body.culinartv4 #btnSubmitOrder:hover { background: var(--saffron-deep) !important } body.culinartv4 #reviewCartMenu .input-group.date .input-group-addon { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-left: 0; color: var(--ink-soft); background: var(--paper-2) } /* legacy .breadcrumb__wizmenen is position:fixed — make it flow in-document (tuckshop) */ body.culinartv4 .breadcrumb__wizmenen { position: static } body.culinartv4 section.content, body.culinartv4 #sectionmain { margin-top: 0 } /* ---- TUCKSHOP: checkout + My-Orders slide drawers (loaded partials) ---- */ body.culinartv4 .tuckcheckoutdrawer, body.culinartv4 .tuckmyordersdrawer { display: flex !important; flex-direction: column; overflow: hidden; width: min(520px,100vw) } body.culinartv4 .tuckcheckoutdrawer .drawer-head, body.culinartv4 .tuckmyordersdrawer .drawer-head { flex: none; background: var(--paper) } body.culinartv4 .tuckcheckoutdrawer .drawer-title, body.culinartv4 .tuckmyordersdrawer .drawer-title { font-family: 'Fraunces',serif; font-weight: 600; font-size: 1.25rem; color: var(--ink); margin: 0 } body.culinartv4 .tuckcheckoutdrawer .acct-close, body.culinartv4 .tuckmyordersdrawer .acct-close { background: #fff; border: 1px solid var(--line); width: 36px; height: 36px; border-radius: 50%; font-size: 1rem; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; padding: 0; flex: none } body.culinartv4 .tuckcheckoutdrawer .acct-close:hover, body.culinartv4 .tuckmyordersdrawer .acct-close:hover { border-color: var(--saffron); color: var(--saffron-deep) } body.culinartv4 .tuckcheckoutdrawer .checkoutslidedrawer-body, body.culinartv4 .tuckmyordersdrawer .checkoutslidedrawer-body { flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; padding: 18px 20px 28px } /* checkout drawer: trim redundant chrome from the loaded confirmation body */ body.culinartv4 .tuckcheckoutdrawer .tuck-pagehead { padding: 0 0 12px } body.culinartv4 .tuckcheckoutdrawer .tuck-pagehead .breadcrumb { display: none } body.culinartv4 .tuckcheckoutdrawer .tuck-pagehead #page-title { font-size: 1.1rem } body.culinartv4 .tuckcheckoutdrawer .tuck-review-wrap { max-width: none } body.culinartv4 .tuckcheckoutdrawer .placeorderpage, body.culinartv4 .tuckcheckoutdrawer section.content { padding: 0; margin: 0 } /* my-orders drawer: hide MyOrders' own breadcrumb (the drawer head replaces it) */ body.culinartv4 .tuckmyordersdrawer .breadcrumb__wizmenen { display: none } body.culinartv4 .tuckmyordersdrawer .productviewcss { padding: 0 } body.culinartv4 .tuckmyordersdrawer section.content { margin: 0; padding: 0 } /* ═══ TUCKSHOP responsive (880 / 520) ═══ */ @media(max-width:880px) { /* sidebar → horizontal nav bar above content (beat newdesign.css width:250px!important) */ body.culinartv4 .main__wrapper { flex-direction: column } body.culinartv4 .main__wrapper > aside.sidebar { width: 100% !important; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); padding: 0; background: #fff } body.culinartv4 .main__wrapper__content { width: 100% !important; margin-left: 0 !important } /* neutralise the customer-header .brand{order:1} (unscoped template rule) for the tuckshop */ body.culinartv4 .tuckshop-site .brand { order: 0 } body.culinartv4 .sidebar .menu { display: flex; flex-wrap: nowrap; overflow-x: auto } body.culinartv4 .sidebar .menu > li > a { border-left: 0; border-bottom: 3px solid transparent; white-space: nowrap; padding: 12px 16px } body.culinartv4 .sidebar .menu > li.active > a { border-left: 0; border-bottom-color: var(--saffron); background: var(--paper-2) } body.culinartv4 .sidebar .menu .inner_menu a { padding: 10px 16px; border-left: 0 } body.culinartv4 .sidebar .menu i.fa-angle-down { float: none; margin-left: 4px } body.culinartv4 .main__wrapper__content { padding: 14px 14px 48px } /* greeting takes too much room on small screens */ body.culinartv4 .tuck-greeting { display: none } /* MyOrders 5-col tables scroll instead of cramming */ body.culinartv4 #pendingOrders, body.culinartv4 #confirmedOrders, body.culinartv4 #deliveredOrders { overflow-x: auto } body.culinartv4 #tblPendingOrders, body.culinartv4 #tblConfirmedOrders, body.culinartv4 #tblDeliveredOrders { min-width: 520px } } @media(max-width:520px) { body.culinartv4 .bar { padding: 10px 14px; gap: 10px } body.culinartv4 .brand-mark { font-size: 1.15rem } body.culinartv4 .brand-school { font-size: .62rem } body.culinartv4 .tuck-actions { gap: 8px } body.culinartv4 [data-name='divItems'] { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px } /* shopping-selection picker stacks */ body.culinartv4 #pendingOrders .col-md-3, body.culinartv4 #pendingOrders .col-md-1 { width: 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 8px } body.culinartv4 #btnShow { width: 100% } body.culinartv4 .main__wrapper__content { padding: 12px 12px 44px } } /* TUCKSHOP order-detail popup (#modalBodyOrder, wizemenpopup chrome): scroll the wide 7-col delivered table on phones */ @media(max-width:880px) { body.culinartv4 #modalBodyOrder { overflow-x: auto; -webkit-overflow-scrolling: touch } body.culinartv4 #modalBodyOrder table { min-width: 560px } }