msg
` and reveals it with an inline display:block, so .pv-hide is only the default state. Neutral rather than green: the same element carries failures ("Could not add to cart", "Only 2 available"), so a success-coloured panel would mislabel half its messages. */ #info { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100001; max-width: min(420px,calc(100vw - 32px)); padding: 14px 40px 14px 18px; border-radius: 10px; background: #5f9766; color: #040303; font-size: .88rem; line-height: 1.4; box-shadow: 14px 8px 24px rgba(56, 52, 52, 0.29); font-weight: 600; } /* #info { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:100001; max-width:min(420px,calc(100vw - 32px)); padding:14px 40px 14px 18px; border-radius:10px; background:#1f2937; color:#fff; font-size:.88rem; line-height:1.4; box-shadow:0 8px 24px rgba(0,0,0,.28); } */ #info p { margin:0; } #info .button { position:absolute; top:6px; right:10px; cursor:pointer; font-size:1rem; font-weight:700; line-height:1; opacity:.7; padding:4px; } #info .button:hover { opacity:1; } /* Add to Cart on listing cards (category-test.php JS renderer). Both states share .atcol so the card's height is identical whichever renders; .atcOpt is the variant "Choose options" label, which has no handler and lets the click reach the card's . */ .atcol { display:block; /*width:100%;*/ margin-top:10px; padding:9px 12px; border:none; border-radius:8px; background:var(--pAs); color:#fff; font-family:inherit; font-size:.82rem; font-weight:600; line-height:1.2; text-align:center; cursor:pointer; box-sizing:border-box; } .atcol:hover { background:var(--sAs); } .atcol:active { transform:scale(.98); } .atcOpt { background:transparent; color:var(--pAs); border:1px solid var(--pAs); } .atcOpt:hover { background:color-mix(in srgb,var(--pAs) 8%,transparent); } /* category-test1.php drops .atcol entirely: the card action is a bare glyph, like the wishlist heart. Scoped to .crdol rather than given its own class - the only other .mIcon on the page is the filter toggle, which is outside the cards. top:0 cancels the 0.15rem baseline nudge .mIcon carries for the topbar row. */ /* .crdol .mIcon { display:block; width:fit-content; margin-top:10px; top:0; color:var(--pAs); cursor:pointer; transition:color .15s; } */ .crdol .mIcon { top:0; color:var(--pAs); cursor:pointer; transition:color .15s; } .crdol .mIcon:hover { color:var(--sAs); } .crdol .mIcon:active { transform:scale(.92); } /* The variants state is a signpost, not an action - muted so the cart glyph reads as the button. */ .crdol .mIcon[role="img"] { color:var(--txtMut); } /* ── Video panel — ported from product-view.css:1200-1381 ────────────────────── .pv-info-section's horizontal padding is dropped (16px -> 0, 24px -> 0 at the breakpoint): the block sits inside .px20, which already supplies the page's 20px, so keeping it would step the videos inward the way the reviews block was. .pv-info-panel keeps its 24px — that one is inside the panel's own border. */ .pv-info-section { max-width:1200px; margin:0 auto; padding:16px 0; } .pv-info-panel { background:#fff; border-radius:12px; padding:24px; margin-bottom:20px; box-shadow:0 2px 12px rgba(0,0,0,0.06); border:1px solid #e5e7eb; } .pv-info-panel h3 { font-size:20px; font-weight:700; color:#1f2937; margin:0 0 16px 0; padding-bottom:12px; border-bottom:2px solid #667eea; display:flex; align-items:center; gap:10px; } .pv-info-panel h3::before { content:''; width:4px; height:24px; background:linear-gradient(135deg,#667eea,#764ba2); border-radius:2px; } .pv-info-panel p { font-size:15px; line-height:1.7; color:#4b5563; margin:0; } /* 16:9 box; the iframe is absolutely filled into the padding-bottom ratio. */ .pv-video-container { position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:8px; background:#000; } .pv-video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:none; border-radius:8px; } .pv-video-list { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; } .pv-video-list .pv-video-container { flex:1 1 320px; min-width:280px; } /* Vertical (Instagram reel) — fixed tall box, white bg for the embed's own chrome. */ .pv-video-container.vertical { flex:0 0 auto; width:340px; max-width:100%; padding-bottom:0; height:600px; background:#fff; } @media (min-width:768px) { .pv-info-section { padding:24px 0; } .pv-info-panel { padding:28px; } .pv-info-panel h3 { font-size:22px; } } /* Already-in-cart tick on a product card. setCarted() in cart-manager.js swaps the ligature and the role; this only recolours it. Kept off the [role="img"] rule above — that one is the muted "Choose options" signpost, and a tick wants to read as confirmation, not as a disabled control. */ .crdol .mIcon[data-incart] { color:var(--okTxt,#2e7d32); cursor:default; } .crdol .mIcon[data-incart]:hover { color:var(--okTxt,#2e7d32); } .crdol .mIcon[data-incart]:active { transform:none; } /* ═══ Available offers carousel ═══════════════════════════ Moved here from sf/style.css:753-778 — style.css takes no new rules. Used by product.php and by the cart (#offer-carousel, cart-manager.js), so cart.php and cart-load.php now link this file too. ═══════════════════════════════════════ */ .ofrCrsl { position:relative; width:100%; margin:0 auto; box-sizing:border-box; } .ofrTrack { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:8px 0 16px 0; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; user-select:none; touch-action:pan-y; } .ofrTrack::-webkit-scrollbar { display:none; } .ofrTrack.is-dragging { scroll-snap-type:none; scroll-behavior:auto; cursor:grabbing; } .ofrCard { flex:0 0 100%; width:100%; min-width:0; scroll-snap-align:start; scroll-snap-stop:always; display:flex; gap:12px; background:#ffffff; border-radius:12px; padding:14px; border:1px dotted #e2e8f0; box-sizing:border-box; container-type:inline-size; container-name:ofrCard; position:relative; overflow:hidden; } .ofrIcn { display:flex; position:absolute; top:-10px; right:-10px; z-index:0; width:120px; height:120px; background:none; color:#e2e8f0; border-radius:0; align-items:center; justify-content:center; opacity:1; pointer-events:none; font-size:90px; }.ofrCnt { display:flex; flex-direction:column; flex-grow:1; min-width:0; position:relative; z-index:1; } .ofrIcn .mIcon{ font-size:90px; color:#e2e8f07a; } .pofrTag { font-size:0.65rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#ff6b6b; margin-bottom:2px; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box;overflow-wrap: break-word;} .ofrCnt h3 { font-size:1rem; font-weight:700; color:#0f172a; line-height:1.2; margin:0; padding:0; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;display: -webkit-box;overflow-wrap: break-word;} .ofrDesc { font-size:0.8rem; color:#64748b; margin:4px 0 6px 0; line-height:1.3; } .ofrCode { display:inline-block; align-self:flex-start; margin-top:auto; padding:4px 8px; background-color:#f8fafc; border:1px dashed #cbd5e1; border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:0.75rem; font-weight:600; color:#334155; cursor:pointer; user-select:none; transition:all 0.2s ease; max-width:100%; overflow-wrap:break-word; word-break:break-word; } .ofrCode:hover { background-color:#f1f5f9; border-color:#94a3b8; } .ofrCode.is-copied { background-color:#dcfce7; border-color:#22c55e; color:#15803d; border-style:solid; } .ofrDots { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:8px; } .ofrDot { width:8px; height:8px; padding:0; border:none; border-radius:50%; background-color:#cbd5e1; cursor:pointer; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); } .ofrDot:hover { background-color:#94a3b8; } .ofrDot.is-active { width:20px; border-radius:10px; background-color:#ff6b6b; } @media (min-width:601px) { .ofrCrsl { max-width:700px; } .ofrCard { gap:16px; padding:18px; } .ofrCnt h3 { font-size:1.1rem; } } /* ── Available offers carousel End ───────────────────────── */ /* Breathing room when pagination scrolls the grid back into view */ .resultBar { scroll-margin-top:12px; } /* Info-row items sit directly in .infRw (no .infItm wrapper); tick is an .mIcon in the markup */ .infRw p { font-size:0.8rem; color:var(--g4); margin:0; display:flex; align-items:center; gap:6px; } .infRw .mIcon { font-size:1rem; top:0; color:var(--disC); font-variation-settings:'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 20; } /* Share link jumps to the #shareme buttons section at the foot of the page */ .infShr { display:flex; align-items:center; gap:6px; color:inherit; text-decoration:none; } .infShr:hover { color:var(--pAs); } /* ===== search.php page states ===================================================== */ /* This page renders nothing server-side, so the skeleton is what holds the layout while the single round trip is in flight — it stands in for the SSR first page. */ .srchHead { margin: 4px 0 10px; } .srchHead-q { font-size: 18px; font-weight: 600; color: var(--pTx, #333); word-break: break-word; } .srchCapNote { margin: 0 0 12px; padding: 10px 14px; font-size: 13px; color: var(--sTx, #555); background: var(--bxBg, #fff); border: 1px solid var(--bxBdrC, #a7a7a745); border-left: 3px solid var(--pAs, #fd7125); border-radius: 6px; } /* Sized to the real card so the grid does not reflow when results replace it. */ .crdol--skel { min-height: 300px; border-radius: 8px; background: linear-gradient(90deg, var(--g1, #eee) 25%, var(--sBg, #fff) 50%, var(--g1, #eee) 75%); background-size: 200% 100%; animation: srchSkel 1.2s ease-in-out infinite; } @keyframes srchSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .crdol--skel { animation: none; } } .srchEmpty { grid-column: 1 / -1; padding: 48px 16px; text-align: center; color: var(--sTx, #555); } .srchEmpty-t { font-size: 18px; font-weight: 600; color: var(--pTx, #333); margin-bottom: 6px; } .srchEmpty-s { font-size: 14px; margin-bottom: 10px; } /* ===== customer-orders.php — rows are .pcard-*, badge is .pv-stock-badge, buttons are .atcol ===== */ .ordList { display:grid; gap:12px; } .ordList a.atcol,.srchEmpty a.atcol { text-decoration:none; } .ordList .pcard-end .atcol { margin-top:0; min-width:120px; } .ordList .pv-stock-badge { margin:6px 0 0; text-transform:capitalize; } .ordSts-wait { background:#fff3cd; color:#856404; } .ordSts-go { background:#e3effd; color:#1d4f91; } .ordSts-done { background:#e3f6ea; color:#1e7a3d; } .ordSts-cancel { background:#fdecec; color:#c0392b; } /* ===== Offers pages — sf-offers-list.php / sf-offer-view.php ====================== Both pages used to ship ~200 lines of their own CSS against sf.css, a stylesheet no other live page loads. Cards are the shared .ofrCard from the carousel block above (same component product.php renders via pvOfrCard()); panels are .pv-info-panel / .pv-info-*. Only the grid, the meta stack and the view page's header need rules. */ /* List page: .ofrCard sits in a grid here, not the carousel's flex track */ .bxol.ofrList { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); } .ofrList .ofrCard { scroll-snap-align:none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);} .ofrList a.atcol { text-decoration:none; text-align:center; } /* Subtitle line under .srchHead-q (customer-orders.php uses .pcard-meta for this, but that lives in product-card.css and these pages have no .pcard rows to justify it) */ .srchHead-s { font-size:13px; color:var(--sTx,#555); margin:2px 0 0; } /* Stacked condition lines inside a card — .ofrDesc is the card's own muted text line */ .ofrMeta { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin:4px 0 8px; } .ofrMeta .ofrDesc { margin:0; display:flex; align-items:center; gap:6px; } .ofrMeta .ofrDesc .mIcon { font-size:1rem; top:0; } .ofrMeta .ofrLock { margin-left:0; } /* View page header: one full-width .ofrCard with the discount as a display headline */ .ofrHead { margin-bottom:18px; } .ofrHead .ofrCard { width:100%; } .ofrHead .ofrCnt h3 { font-size:1.8rem; line-height:1.15; -webkit-line-clamp:2; line-clamp:2; } .ofrHead .ofrIcn { width:150px; height:150px; } .ofrHead .ofrIcn .mIcon { font-size:120px; } .ofrHead .ofrActs { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; } .ofrHead .ofrActs .atcol { margin-top:0; text-decoration:none; } /* .ofrCode's margin-top:auto / align-self:flex-start are for the card's flex COLUMN */ .ofrHead .ofrActs .ofrCode { margin-top:0; align-self:center; } .ofrHead .ofrActs .ofrDesc { margin:0; display:flex; align-items:center; gap:6px; } .ofrHead .ofrActs .ofrLock { margin-left:0; } /* Section wrapper — h2.hSep supplies its own heading rule and spacing */ .ofrSection { margin-bottom:28px; } /* View page info panels — one full-width panel since "Offer Details" was dropped */ .ofrPanels { display:grid; grid-template-columns:1fr; gap:20px; } .ofrPanels .pv-info-panel { margin-bottom:0; } @media (min-width:641px) { /* .pv-info-row stacks label above value for the product page; offers read better side by side */ .ofrPanels .pv-info-row { flex-wrap:nowrap; align-items:baseline; gap:12px; } .ofrPanels .pv-info-label { flex:0 0 auto; } .ofrPanels .pv-info-value { flex:1 1 auto; text-align:right; font-weight:600; } } /* How to use this offer — browser numbering, accent marker */ .ofrSteps { margin:0; padding:0 0 0 22px; display:flex; flex-direction:column; gap:10px; } .ofrSteps li { font-size:14px; line-height:1.5; color:var(--pTx,#333); padding-left:4px; } .ofrSteps li::marker { color:var(--pAs); font-weight:800; } /* Applicable-category pills */ .cat-pills { display:flex; flex-wrap:wrap; gap:8px; } .cat-pill { padding:6px 16px; background:var(--pBg); border:1px solid var(--bxBdrC); border-radius:20px; font-size:13px; font-weight:600; color:var(--pAs); text-decoration:none; transition:background .18s,color .18s; } .cat-pill:hover { background:var(--pAs); color:#fff; } /* Back link under the page */ .ofrBack { text-align:center; margin-top:14px; } .ofrBack .atcol { display:inline-block; text-decoration:none; } /* ── Offers pages End ───────────────────────────────────── */ /* ===== Order view — order_view.php ================================================ Panels are .pv-info-panel, rows are .pcard-* (product-card.css), status is .pv-stock-badge + .ordSts-*, buttons are .atcol. What is left is this page's own layout: the two-column body, the timeline, and the billing rows. */ /* Body: summary sits under the order on narrow screens, beside it from 900px */ .ordView { display:grid; grid-template-columns:1fr; gap:24px; align-items:start; } @media (min-width:900px) { .ordView { grid-template-columns:2fr 1fr; } } /* Products block — h2.hSep section rather than a panel, see the note in order_view.php */ .ordSection { margin-bottom:20px; } /* Address block and the seller's note share one tinted box */ .ordAddr { background:var(--pBg); padding:1rem; border-radius:8px; line-height:1.6; color:var(--pTx); } .ordNote { white-space:pre-wrap; } /* Dispatch proof thumbnails (AWB slip / packed photo) */ .ordProof { display:flex; flex-wrap:wrap; gap:10px; } .ordProof--gap { margin-top:1rem; } .ordProof img { width:120px; height:120px; object-fit:cover; border:1px solid var(--bxBdrC); border-radius:8px; display:block; } /* Timeline: dot per item, connector drawn to the next one */ .ordTl { position:relative; padding-left:2rem; } .ordTl-item { position:relative; padding-bottom:1rem; color:var(--pTx); } .ordTl-item::before { content:''; position:absolute; left:-1.5rem; top:.5rem; width:1rem; height:1rem; border-radius:50%; background:var(--pAs); } .ordTl-item::after { content:''; position:absolute; left:-1.1rem; top:1.5rem; width:2px; height:100%; background:var(--hSpBdr); } .ordTl-item:last-child::after { display:none; } .ordTl-item small { color:var(--sTx); } /* Billing rows — mirrors .cl-foot-row / --save / --total in cart-temp.css, which the cart and checkout render from cart-manager.js. Duplicated rather than linked: cart-temp.css is marked temporary (cart.php:94) and should not gain new dependents. Fold the two together if .cl-foot-row is ever moved into this file. */ .ordSum-row { display:flex; justify-content:space-between; gap:24px; padding:6px 0; color:var(--pTx); } .ordSum-row--save { color:var(--disC); } .ordSum-row--total { margin-top:8px; padding-top:8px; border-top:1px solid var(--bxBdrC); color:var(--bxTx); font-weight:600; font-size:17px; } /* Action buttons stack in the sidebar; .atcol is display:block already */ .ordBtns { display:flex; flex-direction:column; gap:10px; margin-top:20px; } .ordBtns .atcol { margin-top:0; text-decoration:none; text-align:center; } .atcDanger { background:#c0392b; color:#fff; } .atcDanger:hover { background:#a93226; } /* ?debug=1 dump */ .ordDbg { background:var(--pBg); padding:1rem; border-radius:8px; overflow-x:auto; font-size:12px; } @media print { .ordBtns { display:none !important; } .ordView { grid-template-columns:1fr !important; } .sb { box-shadow:none !important; margin:0 !important; max-width:100% !important; } .pv-info-panel { box-shadow:none !important; break-inside:avoid; } } /* ── Order view End ─────────────────────────────────────── */