/* Lambspun Florals — style.css (streamlined) */ /* Fonts */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Quicksand:wght@400;600&family=Pacifico&family=Great+Vibes&display=swap'); /* Tokens */ :root{ --bg-grad-a:#eb62d4; --bg-grad-b:#daac8c; --ink-1:#553947; --ink-2:#a25d8a; --ink-3:#8f5a87; --accent-1:#d16ba5; --accent-2:#b677a2; --shadow-1:rgba(209,107,165,.11); --shadow-2:rgba(185,140,166,.06); --card-border:#edd3ee; --chip-bg:#fff6f9; --badge:#dc3163; --panel:#fff0f6; --page-max:1280px; --page-pad:1rem; --r-lg:16px; --fs-body:clamp(16px,1.1vw,18px); --fs-nav:clamp(14px,1.05vw,18px); --fs-h1:clamp(28px,3vw,42px); --fs-h2:clamp(20px,1.6vw,26px); /* set via JS for sticky spacing */ --nav-h:60px; --stick-h:260px; --toggle-gap:10px; /* button theme */ --btn-bg:#fff9fd; --btn-ink:#7f3d68; --btn-br:var(--card-border); --btn-fill-1:#a2716c; --btn-fill-2:#b677a2; } /* Base */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html,body{ height:100%; width:100%; } html,body{ overflow-x:clip; } @supports not (overflow-x:clip){ html,body{ overflow-x:hidden; } } html{ scroll-behavior:smooth; } body{ font-family:'Cormorant Garamond',serif; text-align:center; background:linear-gradient(120deg,var(--bg-grad-a),var(--bg-grad-b)); color:var(--ink-1); font-size:var(--fs-body); line-height:1.6; } a{ color:inherit; text-decoration:none; } img,iframe{ display:block; max-width:100%; } /* Page width helpers */ .hero-inner,.hero-wrap,.navbar-container,.grid-wrap,.product-grid,.map-container,footer.site-footer{ width:min(92vw,var(--page-max)); margin:0 auto; padding-inline:var(--page-pad); } /*----- Sticky wrapper (hero + navbar) -----*/ /*.header-stick{ position:static; z-index:120; } */ /*@media (min-width:1024px){ .header-stick{ position:sticky; top:0; z-index:120; } } */ /* Hero */ .hero-banner{ width:100%; position:relative; text-align:center; padding:.8rem 1rem .9rem; overflow:; isolation:isolate; background: radial-gradient(1200px 500px at 10% -10%, rgba(255,255,255,.65), transparent 60%), radial-gradient(900px 400px at 90% 10%, rgba(255,255,255,.45), transparent 60%), linear-gradient(135deg,#ffd5e6 0%,#ffe1cc 45%,#ffd1e8 100%); } .hero-banner::after{ content:""; position:absolute; inset:-40% -2px auto -2px; height:70%; background:linear-gradient(to bottom, rgba(255,255,255,.55), transparent 60%); transform:skewY(-8deg); pointer-events:none; mix-blend-mode:screen; } .hero-wrap{ max-width:1100px; } .hero-title{ font-family:"Great Vibes","Pacifico",cursive; font-size:clamp(2.4rem,5.2vw,4.85rem); line-height:1.05; letter-spacing:.02em; background:linear-gradient(#fff 0%,#fff 45%,#ececec 60%,#fff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 1px 0 rgba(255,255,255,.9), 0 2px 0 rgba(255,200,220,.55), 0 8px 18px rgba(0,0,0,.18); filter:drop-shadow(0 2px 4px rgba(255,255,255,.35)); } .hero-sub{ display:inline-block; margin-top:.6rem; padding:.45rem .9rem; font:600 clamp(.95rem,2.2vw,1.12rem)/1 "Quicksand",system-ui,sans-serif; letter-spacing:.06em; color:#6b4c5c; background:rgba(255,255,255,.78); border-radius:999px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(0,0,0,.08); } /* Navbar */ .navbar{ width:100%; background:#ffe9f5; border-bottom:1.5px solid var(--card-border); box-shadow:0 2px 8px var(--shadow-2); } .navbar-container{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:.6em var(--page-pad); } .navbar-brand{ grid-column:1; justify-self:start; font-family:'Pacifico',cursive; font-size:clamp(18px,1.6vw,24px); color:var(--ink-1); display:flex; gap:.45em; } .navbar-links{ grid-column:2; display:flex; align-items:center; justify-content:center; gap:0; list-style:none; } .navbar-links li{ display:flex; align-items:center; line-height:1; } .navbar-links li + li::before{ content:"•"; display:inline-flex; align-items:center; justify-content:center; margin:0 14px; opacity:.55; font-size:18px; line-height:1; } .navbar-links a{ display:inline-flex; align-items:center; gap:.45rem; font:600 var(--fs-nav)/1.15 "Quicksand",sans-serif; color:var(--ink-2); padding:.45rem .75rem; border-radius:12px; white-space:nowrap; transition:background .15s,color .15s,box-shadow .15s; } .navbar-links a:hover{ background:rgba(208,122,163,.20); box-shadow:inset 0 0 0 1px rgba(208,122,163,.35); color:#7f3d68; } .cart-link .cart-icon{ width:22px; height:22px; display:block; } .cart-badge{ position:absolute; top:-6px; right:2px; background:var(--badge); color:#fff; font-weight:700; font-size:.8em; padding:2px 6px; border-radius:50%; line-height:1; } .navbar-toggle{ display:none; background:none; border:0; font-size:1.8em; color:var(--accent-1); cursor:pointer; } @media (max-width:768px){ .navbar-container{ display:flex; align-items:center; justify-content:space-between; } .navbar-toggle{ display:block; } .navbar-links{ position:absolute; top:100%; left:0; right:0; display:none; flex-direction:column; background:#fff9fc; box-shadow:0 8px 24px rgba(233,196,225,.36); padding:.8em 1em; z-index:110; } .navbar-links.show{ display:flex; } .navbar-links li + li::before{ content:none; } .navbar-links a{ width:100%; padding:.8em 1em; font-size:1rem; } } /* View toggle */ .grid-wrap{ position:relative; width:min(92vw,var(--page-max)); margin-inline:auto; } .grid-wrap .product-grid{ padding-top:calc(40px + var(--toggle-gap)); } .view-toggle{ position:absolute; top:var(--toggle-gap); right:var(--page-pad); display:flex; gap:6px; z-index:10; } .toggle-btn{ width:2.8rem; height:2.8rem; border:1.5px solid var(--card-border); background:#fff6f9; color:var(--ink-2); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; cursor:pointer; } .toggle-btn:hover{ background:#f2e6ed; } .toggle-btn.active{ background:var(--accent-1); color:#fff; } @media (max-width:768px){ .view-toggle{ display:none !important; } .grid-wrap .product-grid{ padding-top:0; } } /* Product grid + cards */ .product-grid.grid-view{ display:grid; gap:1.5em; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin:2rem auto; padding:1rem; } /* --- Fixed list-view alignment (uniform height + proper flex layout) --- */ .product-grid.list-view { display: flex; flex-direction: column; gap: 12px; margin: 12px auto; padding: 0; } .product-grid.list-view .product-card { display: flex; align-items: flex-start; justify-content: space-between; text-align: left; padding: 14px 18px; border-radius: var(--r-lg); background: #feddd4; box-shadow: 0 3px 18px rgba(209,107,165,.07); transition: transform .25s, box-shadow .2s; } .product-grid.list-view .product-card img { flex: 0 0 128px; height: 128px; object-fit: contain; border-radius: 10px; background: #ffe1ee; padding: 6px; margin-right: 16px; } .product-grid.list-view .product-card .body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 6px; max-width: 100%; } .product-grid.list-view .product-card .actions { flex: 0 0 auto; align-self: center; } .product-grid.list-view .product-card h2 { font-size: 1.1rem; line-height: 1.2; color: var(--ink-3); margin: 0; } .product-grid.list-view .product-card .price { color: #9e6a94; font-weight: 600; margin-bottom: 4px; } .product-grid.list-view .product-card .add-to-cart-btn { padding: .55em .9em; font-size: .95rem; border-radius: 8px; background: #a2716c; color: #fff; border: 0; cursor: pointer; } .product-grid.list-view .product-card .add-to-cart-btn:hover { background: #b6777c; } /* === Refined List View (full-width horizontal cards) === */ .product-grid.list-view { display: flex; flex-direction: column; gap: 18px; margin: 1.5rem auto; padding: 0 1rem; max-width: min(95vw, 1200px); } .product-grid.list-view .product-card { display: flex; align-items: center; justify-content: space-between; background: #fff0f6; border-radius: var(--r-lg); box-shadow: 0 3px 18px rgba(209,107,165,.07); padding: 16px 22px; width: 100%; max-width: 1200px; margin-inline: auto; text-align: left; transition: transform .25s, box-shadow .25s; } .product-grid.list-view .product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(209,107,165,.12); } .product-grid.list-view .product-card img { flex: 0 0 160px; height: 160px; object-fit: contain; border-radius: 12px; background: #ffe1ee; padding: 8px; margin-right: 22px; } .product-grid.list-view .product-card .body { flex: 1; display: flex; flex-direction: column; gap: 6px; max-width: 100%; } .product-grid.list-view .product-card h2 { font-family: 'Cormorant Garamond', serif; color: var(--ink-3); font-size: 1.25rem; line-height: 1.2; margin: 0; } .product-grid.list-view .product-card .price { font-weight: 600; color: #9e6a94; margin-bottom: 4px; } .product-grid.list-view .product-card .actions { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } .product-grid.list-view .product-card .add-to-cart-btn { background: #a2716c; color: #fff; padding: .65em 1.1em; border-radius: 8px; border: 0; cursor: pointer; font-size: .95rem; } .product-grid.list-view .product-card .add-to-cart-btn:hover { background: #b6777c; } /* Responsive collapse */ @media (max-width: 768px) { .product-grid.list-view .product-card { flex-direction: column; text-align: center; align-items: center; } .product-grid.list-view .product-card img { margin: 0 0 12px; } .product-grid.list-view .product-card .actions { align-items: center; } } /* === Square Thumbnail Patch for List View === */ .product-grid.list-view .product-card img, .product-grid.list-view .product-card .thumb { aspect-ratio: 1 / 1; /* force perfect square */ width: 160px; /* consistent size */ height: auto; flex: 0 0 160px; object-fit: cover; /* fills square nicely */ border-radius: 12px; background: #ffe1ee; padding: 6px; margin-right: 24px; display: block; } /* === Center the square thumbnail vertically in List View === */ .product-grid.list-view .product-card { display: flex; align-items: center; /* centers image + text vertically */ justify-content: space-between; gap: 22px; } .product-grid.list-view .product-card img, .product-grid.list-view .product-card .thumb { flex: 0 0 160px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: #ffe1ee; padding: 6px; display: flex; align-items: center; justify-content: center; /* centers image inside thumb box */ margin: 0 24px 0 0; } .product-grid.list-view .product-card .body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 6px; } /* Friendly title wrapping */ .product-card h2,.product-card .title,.product-card .title a{ overflow-wrap:anywhere; word-break:normal; hyphens:auto; text-wrap:balance; } /* Inline variant picker */ .vp{ background:var(--chip-bg); border:1px solid var(--card-border); border-radius:12px; padding:10px; margin:.5rem 0; display:none; max-height:240px; overflow:auto; padding-right:6px; } .vp.open{ display:block; } .vp-row{ display:flex; align-items:center; gap:8px; padding:6px 4px; } .vp-dot{ width:18px; height:18px; border-radius:50%; border:1px solid #e7cde3; box-shadow:0 0 0 2px #fff inset; } .vp-name{ min-width:110px; text-align:left; color:var(--ink-3); } .vp-qty{ display:flex; align-items:center; gap:6px; margin-left:auto; } .vp-btn{ width:28px; height:28px; border:1px solid #e7cde3; background:#fff; border-radius:8px; cursor:pointer; } .vp-num{ width:42px; text-align:center; border:1px solid #e7cde3; border-radius:8px; padding:3px 6px; background:#fff; } .product-card .vp-quick[data-toggle="picker"]{ appearance:none; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1rem; border:1.5px solid var(--card-border); border-radius:12px; background:linear-gradient(180deg,#fff,#fff9fd); color:var(--ink-2); font:600 .95rem/1 "Quicksand",system-ui,sans-serif; box-shadow:inset 0 1px 0 #fff, 0 3px 10px var(--shadow-1); transition:background .2s, color .2s, box-shadow .2s, transform .05s; width:auto; max-width:100%; } .product-card .vp-quick[data-toggle="picker"]{ } .product-card .vp-quick[data-toggle="picker"]:hover{ background:rgba(208,122,163,.20); color:#7f3d68; box-shadow:inset 0 0 0 1px rgba(208,122,163,.35), 0 4px 12px var(--shadow-1); } /* Color drawer (desktop + tablet too) */ #cd-backdrop,.cd-backdrop{ position:fixed; inset:0; display:none; background:rgba(0,0,0,.18); backdrop-filter:blur(1.5px); z-index:800; } #cd-backdrop.show,.cd-backdrop.show{ display:block; } .color-drawer{ position:fixed; left:50%; transform:translateX(-50%); top:var(--nav-h,64px); width:min(92vw,var(--page-max)); background:var(--panel); border:1px solid var(--card-border); border-radius:16px; box-shadow:0 10px 22px rgba(209,107,165,.18); z-index:900; display:none; max-height:340px; overflow:hidden; grid-template-rows:auto 1fr auto; } .color-drawer.show{ display:grid; } .color-drawer .cd-head{ position:relative; display:flex; align-items:center; justify-content:center; padding:10px 16px; border-bottom:1px solid var(--card-border); background:rgba(255,255,255,.6); } .color-drawer .cd-title{ font:600 1rem "Quicksand",system-ui,sans-serif; color:#7b4b6f; } .color-drawer .cd-close, .color-drawer .close, .color-drawer [data-close], .color-drawer [data-dismiss]{ position:absolute; top:8px; right:10px; width:34px; height:34px; border:0; background:transparent; color:#8f5a87; line-height:1; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:20px; } .color-drawer .cd-close:hover, .color-drawer .close:hover, .color-drawer [data-close]:hover, .color-drawer [data-dismiss]:hover{ background:rgba(208,122,163,.12); } .color-drawer .cd-row{ display:flex !important; gap:16px; padding:12px 16px; overflow:auto hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .color-drawer .cd-row::-webkit-scrollbar{ height:10px; } .color-drawer .cd-row::-webkit-scrollbar-thumb{ background:#e7cde3; border-radius:999px; } .color-drawer .cd-item{ flex:0 0 260px; scroll-snap-align:start; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1px solid var(--card-border); border-radius:14px; box-shadow:0 2px 6px var(--shadow-2); } .color-drawer .cd-item.is-picked{ outline:2px solid rgba(209,107,165,.35); background:#fffafc; } .color-drawer .cd-dot{ width:24px; height:24px; border-radius:50%; border:1px solid #e7cde3; box-shadow:0 0 0 2px #fff inset; } .color-drawer .cd-name{ font:600 .95rem "Quicksand",system-ui,sans-serif; color:#6f3f61; } .color-drawer .cd-qty{ display:inline-flex; align-items:center; gap:6px; } .color-drawer .cd-btn{ width:30px; height:30px; border:1.5px solid var(--card-border); background:#fff; color:#7f3d68; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1; cursor:pointer; } .color-drawer .cd-btn:active{ transform:translateY(1px); } .color-drawer .cd-num{ width:54px; text-align:center; border:1.5px solid var(--card-border); border-radius:10px; padding:4px 6px; background:#fff; color:#7f3d68; font:600 .95rem "Quicksand",system-ui,sans-serif; } .color-drawer .cd-foot{ padding:8px 12px 12px; border-top:1px solid var(--card-border); display:grid; gap:8px; } .color-drawer .cd-remaining{ font:500 .95rem/1.4 "Cormorant Garamond",serif; color:#8f5a87; text-align:center; } .color-drawer .cd-actions{ display:flex; gap:8px; justify-content:center; } .color-drawer .cd-actions .cd-quick, .color-drawer .cd-quick, .color-drawer .cd-apply{ appearance:none; border:1.5px solid var(--card-border); background:linear-gradient(180deg,#fff,#fff9fd); color:#7f3d68; padding:.6rem 1rem; border-radius:12px; font:600 .95rem "Quicksand",system-ui,sans-serif; box-shadow:inset 0 1px 0 #fff, 0 3px 10px var(--shadow-1); cursor:pointer; } .color-drawer .cd-quick:hover{ background:#f7eaf1; } .color-drawer .cd-apply{ background:var(--accent-1); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(209,107,165,.25); } .color-drawer .cd-apply:hover{ filter:brightness(.98); } /* ======================================================= Lambspun Florals — Floating Cart Overlay & FAB (v2) Refined: overlays navbar + hero, smooth slide-in, pastel styling ======================================================= */ .floating-cart-overlay { position: fixed; top: 0; right: 0; width: 340px; max-width: 95vw; height: 100vh; background: #fff; box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(255, 255, 255, 0.6) inset; display: flex; flex-direction: column; z-index: 12000; /* 🟣 Above navbar + hero */ transform: translateX(100%); opacity: 0; pointer-events: none; transition: transform 0.35s ease, opacity 0.25s ease; } /* When active */ .floating-cart-overlay.show { transform: translateX(0); opacity: 1; pointer-events: all; } /* Optional dimmed background for better focus */ .floating-cart-overlay::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: -1; } /* Header */ .floating-cart-header { display: flex; align-items: center; gap: 0.6rem; padding: 1em 1.3em; border-bottom: 1px solid #ffe9f5; font-family: 'Pacifico', cursive; color: var(--accent-2); background: linear-gradient(180deg, #fff9fd 0%, #fff3f8 100%); box-shadow: 0 1px 3px rgba(209, 107, 165, 0.08); } .floating-remove-btn { margin-left: auto; width: 34px; height: 34px; border: 0; background: transparent; color: var(--accent-1); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .floating-remove-btn:hover { background: rgba(208, 122, 163, 0.12); transform: scale(1.05); } /* Items list */ .floating-cart-items { flex: 1; overflow-y: auto; padding: 0.9em 1.3em; font-family: 'Cormorant Garamond', serif; color: var(--ink-1); background: #fffafc; scrollbar-width: thin; scrollbar-color: rgba(209,107,165,0.3) transparent; } .floating-cart-items::-webkit-scrollbar { width: 6px; } .floating-cart-items::-webkit-scrollbar-thumb { background: rgba(209, 107, 165, 0.3); border-radius: 8px; } /* Footer */ .floating-cart-footer { padding: 0.9em 1.3em 1.3em; display: flex; flex-direction: column; gap: 0.7em; border-top: 1px solid #ffe9f5; background: linear-gradient(180deg, #fff8fb 0%, #fff0f6 100%); } .floating-cart-total { font-weight: bold; color: var(--ink-2); font-family: 'Quicksand', sans-serif; font-size: 1rem; text-align: right; } .go-to-cart-btn { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); color: #fff; padding: 10px; border-radius: 8px; text-align: center; cursor: pointer; font: 600 0.95rem "Quicksand", sans-serif; box-shadow: 0 6px 16px rgba(209, 107, 165, 0.25); transition: filter 0.2s, transform 0.1s; } .go-to-cart-btn:hover { filter: brightness(1.05); transform: translateY(-1px); } /* Floating Action Button (FAB) */ #floating-cart-fab, .floating-cart-fab { position: fixed; right: 18px; bottom: 18px; width: 56px; height: 56px; border: 0; border-radius: 999px; background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(209, 107, 165, 0.35); cursor: pointer; z-index: 12010; /* 🟣 Slightly above overlay edge */ transition: transform 0.08s ease, filter 0.15s ease; } #floating-cart-fab:hover, .floating-cart-fab:hover { filter: brightness(1.06); transform: translateY(-1px); } /* Cart Badge */ #fab-badge, .floating-cart-fab .badge { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; display: grid; place-items: center; background: #dc3163; color: #fff; border-radius: 50%; font: 700 0.75rem/1 "Quicksand", system-ui, sans-serif; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } /* Map + sections */ .map-container{ width:600px; height:600px; max-width:92vw; margin:2rem auto; overflow:hidden; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.1); background:#fff; } .map-container iframe{ width:100%; height:100%; border:0; display:block; } h1,.faq h1{ text-align:center; margin:2rem auto 1rem; font-size:var(--fs-h1); } .faq{ width:min(92vw,800px); margin:2rem auto; font-family:'Quicksand',sans-serif; } footer.site-footer{ padding:1.5rem 1rem; } /* Buttons (unified) */ .btn{ appearance:none; border:1.5px solid var(--btn-br); background:var(--btn-bg); color:var(--btn-ink); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.65rem 1.1rem; border-radius:12px; text-decoration:none; font:600 .95rem "Quicksand",system-ui,sans-serif; box-shadow:inset 0 1px 0 #fff; cursor:pointer; transition:filter .15s, transform .05s, box-shadow .2s; } a.btn{ text-decoration:none; } .btn:hover{ filter:brightness(.98); box-shadow:inset 0 0 0 1px rgba(208,122,163,.35), 0 6px 16px rgba(209,107,165,.20); } .btn:active{ transform:translateY(1px); } .btn[disabled],.btn:disabled{ opacity:.55; pointer-events:none; } .btn-primary{ border-color:transparent; color:#fff; background:linear-gradient(180deg,var(--btn-fill-1),var(--btn-fill-2)); box-shadow:0 6px 16px rgba(209,107,165,.25); } .btn-primary:hover{ filter:brightness(1.03); } /* Cart table + qty controls */ .cart-table{ width:100%; max-width:600px; margin:0 auto 2em; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.05); text-align:left; } .cart-table th,.cart-table td{ padding:1em; border-bottom:1px solid #f1dcea; color:#5e406d; font-size:1rem; } .cart-table th{ background:#fdf4f9; font-weight:700; } .cart-table tr:last-child td{ border-bottom:none; } .cart-table .qty-cell,.cart-table .qty-control{ display:flex; align-items:center; gap:6px; white-space:nowrap; } .cart-table .btn-qty,.cart-table .qty-cell button{ width:32px; height:32px; padding:0; border:1.5px solid var(--btn-br); background:#fff; color:var(--btn-ink); border-radius:10px; display:inline-flex; align-items:center; justify-content:center; font:700 .95rem "Quicksand",system-ui,sans-serif; line-height:1; cursor:pointer; } .cart-table input[type="number"]{ width:64px; text-align:center; border:1.5px solid var(--btn-br); border-radius:10px; padding:.35rem .4rem; background:#fff; } .cart-table .link-remove,.link-remove.btn,.btn-danger{ background:#fff0f3; border-color:#f0c2d6; color:#a03c63; border-radius:10px; padding:.35rem .6rem; } .cart-table .link-remove:hover,.btn-danger:hover{ background:#ffe6ee; } /* Utilities */ html.drawer-open,body.drawer-open{ overflow:hidden; } /* Mobile tweaks */ @media (max-width:768px){ .product-grid.list-view{ grid-template-columns:1fr !important; } .product-grid.grid-view{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } .product-grid{ gap:1rem !important; margin:1rem auto !important; padding:0 1rem !important; } .product-card{ padding:.9rem; border-radius:14px; } .product-card img{ height:210px; } } /* Cart: make the middle-column "Remove" compact */ .cart-table .qty-cell .remove-line { display:inline-block; } .cart-table .qty-cell .link-remove{ padding:.25rem .5rem !important; font-size:.85rem !important; line-height:1 !important; border-radius:8px !important; background:#fff6f9 !important; border:1px solid #efd6e7 !important; } .cart-table .qty-cell .link-remove:hover{ background:#f7eaf1 !important; } /* Cart: don't style "Remove" like the +/- buttons */ .cart-table td.qty-cell button.link-remove{ width:auto !important; height:auto !important; min-width:0 !important; padding:.2rem .45rem !important; /* tweak smaller chip size */ border:1px solid #efd6e7 !important; background:#fff6f9 !important; border-radius:8px !important; line-height:1.1 !important; box-shadow:none !important; } /* --- Page title spacing: make Cart + Checkout uniform --- */ .cart-card > h2, main > h2 { /* both pages use one of these */ margin: 0 0 2rem; /* no extra top space; 1rem below */ line-height: 1.2; } /* kill any extra top margin on the first block after the title -- This makes the gap under Your Cart and Checkout match, regardless of what the next element is (table, .wrap, etc.). If you prefer a tighter or looser look, just tweak the 1rem.*/ .cart-card > h2 + *, main > h2 + * { margin-top: 0; } /* ================= MOBILE NAV: OPEN-IN-VIEW, NO SCROLL, SNUG LINKS ================= */ @media (max-width: 768px) { /* Keep the nav bar fixed to the top on mobile */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 10010; /* above banners/hero */ } /* Prevent the hero/banner from pushing content under the fixed nav */ .banner:first-of-type { margin-top: calc(var(--nav-height, 56px)); } /* Base menu panel: fixed directly under the nav bar */ .navbar-menu { position: fixed; top: var(--nav-height, 56px); /* adjust if your nav is taller */ left: 0; right: 0; max-height: calc(100dvh - var(--nav-height, 56px)); overflow-y: auto; margin: 0; padding: 4px 0; z-index: 10009; background: #fff; /* ensure readable over hero image */ box-shadow: 0 10px 20px rgba(0,0,0,.12); transform: none !important; /* kill slide-down transforms that push out of view */ opacity: 1 !important; visibility: visible !important; } /* Tighten list spacing */ .navbar-menu ul { margin: 0; padding: 0; list-style: none; } .navbar-menu li { margin: 0; padding: 0; border: 0; } .navbar-menu a { display: block; padding: 10px 14px; /* snug but tappable */ line-height: 1.2; font-size: 16px; } /* Optional: subtle separators without big frames */ .navbar-menu li + li a { border-top: 1px solid rgba(0,0,0,.06); } /* When menu is closed, hide it completely. Cover common "open" toggles so this works with your current JS. */ .navbar-menu { display: none; } .navbar.open .navbar-menu, .navbar-menu.open, .navbar-menu[aria-hidden="false"], .navbar-menu[aria-expanded="true"], .navbar-toggle[aria-expanded="true"] ~ .navbar-menu { display: block; } /* Lock background scroll when menu is open (if your JS toggles .menu-open on <body>) */ body.menu-open { overflow: hidden; } /* If your page content jumps under the fixed nav, give the main flow a top padding */ main, .page, .content { padding-top: calc(var(--nav-height, 56px)); } } /* Title strip just below the banner */ .page-head{ max-width: 1100px; /* match your content width */ margin: 0 auto; padding: 10px 16px 0; /* tiny breathing room from the nav */ } .page-head h2{ margin: 0; text-align: center; line-height: 1.2; font-size: clamp(24px, 2.4vw, 36px); } /* Trim top spacing of the content now that the title moved out */ .page-head + .cart-wrap{ padding-top: .5rem !important; } .page-head + main{ margin-top: .5rem; } /* Put nav directly below hero and (optionally) make nav sticky */ .navbar{ margin: 0; position: sticky; /* remove if you don't want it sticky */ top: 0; z-index: 1000; } /* Prevent surprise top spacing left over from the old wrapper */ .header-stick{ all: unset; } /* neutralize if it still exists in DOM */ :root{ --stick-h: 0px; } /* harmless if referenced elsewhere */ /* If any page content was offset for the old wrapper, reset it */ main, .cart-wrap, .container{ margin-top: 0 !important; padding-top: 0 !important; } body { background: linear-gradient(to bottom right, peachpuff, pink, lavender); font-family: sans-serif; margin: 0; display: flex; flex-direction: column; /* vertical stacking */ min-height: 100vh; } #game-wrapper { flex: 1; /* takes all space above footer */ display: flex; flex-direction: row; } #left-panel { width: 250px; } #game-area { flex: 1; } /* ======================================================= LAMBSPUN — COLOR PICKER BEAUTIFICATION ======================================================= */ /* Container: soft pop-out with slight lift */ .vp { display: none; margin-top: .75rem; padding: .75rem 1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.85); border: 1px solid #f0cfe1; box-shadow: 0 6px 20px rgba(209,107,165,0.12); backdrop-filter: blur(4px); animation: vpSlideDown 0.25s ease; } .vp.open { display: block; } @keyframes vpSlideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* Each row = one color line */ .vp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(209,107,165,.12); } .vp-row:last-child { border-bottom: none; } /* Dot + color label */ .vp-dot { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #efd6e7; box-shadow: 0 0 0 2px #fff inset; } .vp-name { flex-grow: 1; text-align: left; color: var(--ink-3); font-family: "Quicksand", sans-serif; font-weight: 600; letter-spacing: .02em; } /* Qty controls: pastel pill-shaped */ .vp-qty { display: flex; align-items: center; gap: 6px; } .vp-btn { width: 30px; height: 30px; border: 1.5px solid #efd6e7; background: linear-gradient(180deg, #fff, #fff6f9); border-radius: 999px; color: #7f3d68; font-size: 1rem; line-height: 1; font-weight: 700; box-shadow: 0 3px 6px rgba(209,107,165,.08); cursor: pointer; transition: all .15s ease; } .vp-btn:hover { background: #ffe9f5; transform: translateY(-1px); } .vp-num { width: 44px; height: 30px; text-align: center; border: 1.5px solid #efd6e7; border-radius: 10px; background: #fff; font: 600 .9rem/1 "Quicksand", sans-serif; color: #7f3d68; } /* Customize button itself: make it feel clickable & cute */ .vp-quick[data-toggle="picker"] { margin-top: .5rem; font-size: .95rem; border-radius: 999px; background: linear-gradient(180deg, #fff, #fff9fd); border: 1.5px solid #f0cfe1; padding: .5rem 1rem; color: #7f3d68; font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; box-shadow: 0 4px 10px rgba(209,107,165,.12); transition: all .2s ease; } /* 🎨 Pastel Customize Colors Button (Lambspun Florals Theme) */ .vp-quick[data-toggle="picker"] { --btn-bg: linear-gradient(180deg, #fff4f8, #ffe9f2); --btn-hover: linear-gradient(180deg, #ffe6f0, #ffd9ec); --btn-border: #f9b6cc; --btn-shadow: rgba(240, 156, 181, 0.3); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: "Quicksand", sans-serif; font-weight: 600; font-size: 0.9rem; color: #a44a6a; border: 1px solid var(--btn-border); border-radius: 999px; padding: 0.4rem 0.9rem; background: var(--btn-bg); cursor: pointer; box-shadow: 0 4px 10px var(--btn-shadow); transition: all 0.25s ease; } .vp-quick[data-toggle="picker"]:hover { background: var(--btn-hover); transform: translateY(-1px); box-shadow: 0 6px 12px rgba(238, 122, 162, 0.3); } /* 🎨 single emoji only, centered nicely */ .vp-quick[data-toggle="picker"]::before { content: "🎨"; font-size: 1.1rem; line-height: 1; margin-right: 0.25rem; } .vp-quick[data-toggle="picker"]:hover { background: rgba(208,122,163,.20); box-shadow: 0 6px 16px rgba(209,107,165,.22); } /* Responsive tuning */ @media (max-width: 768px) { .vp { margin-top: .5rem; padding: .6rem .8rem; max-height: 240px; overflow-y: auto; } .vp-row { flex-wrap: wrap; gap: 8px; } .vp-name { width: 100%; font-size: .9rem; } .vp-qty { justify-content: flex-end; width: 100%; } } /* ======================================================= Lambspun Florals — Floating Color Picker Drawer (Themed) ======================================================= */ @media (min-width: 900px) { .color-drawer { position: fixed; top: calc(var(--nav-h, 70px) + 40px); left: 50%; transform: translateX(-50%); width: min(780px, 90vw); background: linear-gradient(135deg, #fff8fb 0%, #ffe9f4 60%, #fffafc 100%); border: 2px solid rgba(209, 107, 165, 0.25); border-radius: 24px; box-shadow: 0 8px 24px rgba(209, 107, 165, 0.15), 0 0 0 6px rgba(255, 255, 255, 0.5) inset; z-index: 1200; overflow: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, -20px); transition: all 0.3s ease; } .color-drawer.show { opacity: 1; pointer-events: all; transform: translate(-50%, 0); } /* Dim the background */ .cd-backdrop { position: fixed; inset: 0; background: rgba(255, 220, 240, 0.4); backdrop-filter: blur(3px); z-index: 1190; } /* Panel layout */ .cd-panel { display: flex; flex-direction: column; max-height: 75vh; overflow: hidden; } /* Header */ .cd-head { display: flex; justify-content: center; align-items: center; background: rgba(255, 255, 255, 0.6); border-bottom: 1.5px solid rgba(209, 107, 165, 0.25); padding: 14px 20px; position: relative; } .cd-title { font-family: "Quicksand", sans-serif; font-weight: 700; color: #7b4b6f; font-size: 1.2rem; letter-spacing: 0.03em; } .cd-close { position: absolute; right: 14px; top: 10px; width: 36px; height: 36px; font-size: 20px; color: #9a6288; border: 1.5px solid rgba(209, 107, 165, 0.25); border-radius: 10px; background: #fff9fc; box-shadow: 0 3px 8px rgba(209, 107, 165, 0.1); cursor: pointer; transition: background 0.2s, transform 0.1s; } .cd-close:hover { background: #ffeaf4; transform: scale(1.05); } /* Body content (scrollable) */ .cd-body { overflow-y: auto; padding: 16px 20px; scrollbar-width: thin; scrollbar-color: rgba(209, 107, 165, 0.3) rgba(255, 245, 250, 0.9); } .cd-body::-webkit-scrollbar { width: 8px; } .cd-body::-webkit-scrollbar-thumb { background: rgba(209, 107, 165, 0.3); border-radius: 8px; } /* Rows */ .cd-row { background: #fff; margin: 8px 0; padding: 10px 12px; border-radius: 12px; border: 1.5px solid #efd6e7; display: flex; align-items: center; justify-content: space-between; transition: box-shadow 0.2s; } .cd-row:hover { box-shadow: 0 0 0 2px rgba(209, 107, 165, 0.25); } .cd-dot { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #e7cde3; box-shadow: 0 0 0 2px #fff inset; } .cd-name { font-family: "Quicksand", sans-serif; color: #7f3d68; flex: 1; padding-left: 10px; } .cd-qty { display: flex; align-items: center; gap: 6px; } .cd-btn { width: 32px; height: 32px; border: 1.5px solid #e7cde3; border-radius: 10px; background: #fff; color: #a25d8a; font-weight: 700; font-size: 16px; cursor: pointer; transition: background 0.15s, transform 0.1s; } .cd-btn:hover { background: #ffe6f2; transform: translateY(-1px); } .cd-num { width: 50px; text-align: center; border: 1.5px solid #e7cde3; border-radius: 10px; background: #fff; color: #7f3d68; font-weight: 600; } /* Footer */ .cd-foot { border-top: 1.5px solid rgba(209, 107, 165, 0.25); padding: 16px; display: flex; justify-content: center; background: rgba(255, 255, 255, 0.6); } .cd-apply { appearance: none; border: 0; background: linear-gradient(180deg, #d16ba5, #b677a2); color: #fff; font: 600 1rem "Quicksand", sans-serif; border-radius: 12px; padding: 10px 24px; cursor: pointer; box-shadow: 0 6px 16px rgba(209, 107, 165, 0.25); transition: filter 0.15s, transform 0.1s; } .cd-apply:hover { filter: brightness(1.05); transform: translateY(-1px); } } /* ======================================================= Lambspun Florals — Unified Drawer Fix (Mobile + Tablet) ======================================================= */ @media (max-width: 820px) and (orientation: portrait) { /* Force drawer to be visible and floating mid-screen on tablets */ .color-drawer { position: fixed !important; inset: auto 0 auto 0 !important; top: 8vh !important; left: 50% !important; transform: translateX(-50%) !important; width: 92% !important; max-height: 82vh !important; background: linear-gradient(180deg, #fff9fd 0%, #fff3f9 100%) !important; border-radius: 24px !important; border: 2px solid rgba(255,182,210,0.5) !important; box-shadow: 0 10px 50px rgba(208,130,170,0.25) !important; z-index: 1200 !important; opacity: 1 !important; transform-origin: center !important; transition: opacity 0.3s ease, transform 0.3s ease !important; } /* Ensure it's fully visible when .show is active */ .color-drawer.show { transform: translateX(-50%) !important; opacity: 1 !important; } /* Make the color list scroll properly */ .color-drawer .cd-body { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(209,107,165,0.3) transparent; } .color-drawer .cd-body::-webkit-scrollbar { width: 6px; } .color-drawer .cd-body::-webkit-scrollbar-thumb { background: rgba(209,107,165,0.3); border-radius: 8px; } /* Slightly stronger blur for better focus contrast */ .cd-backdrop { background: rgba(0, 0, 0, 0.25); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 1190; } } .cart-thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; margin-right: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.08); display: inline-block; vertical-align: middle; } .cart-item-title { font-weight: 600; color: #7f3d68; display: inline-block; vertical-align: middle; } .navbar-links li + li::before { content:"•"; display:inline-flex; align-items:center; justify-content:center; margin:0 14px; opacity:.55; font-size:18px; line-height:1; }
/* ==========================================================
   Floating Cart — Variant Chips (match shop page theme)
   ========================================================== */
.cart-item-variants,
.fc-variants {
  margin-top:.35rem;
  line-height:1.4;
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.cart-item-variants .vs-chip,
.fc-variants .vs-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff;
  border:1px solid #efd6e7;
  border-radius:999px;
  padding:.22rem .55rem;
  color:#a25d8a; font-weight:600; font-size:.83rem; white-space:nowrap;
  box-shadow:0 1px 4px rgba(209,107,165,.08);
}
.cart-item-variants .vs-dot,
.fc-variants .vs-dot{
  width:10px; height:10px; border-radius:50%;
  border:1px solid #e7cde3; display:inline-block;
}