/* F5b: the buy bar and the sheet it opens. * * The whole point of this file is the media query at the bottom. Before it, the markup was chosen * by the SERVER from the user agent and the layout by the BROWSER from the width, so the two could * disagree -- and did: a 390px window with a desktop user agent had no bar (server said "not * mobile") and no inline button (CSS said "too narrow"), which is to say no way to buy at all. * One decision, one place: below the breakpoint the bar is the buy control, above it the inline * form is. * * Sizes are the storefront ladder set in F5c -- 12 · 14 · 16 · 18 · 22 · 28 -- and every control * clears the 24px web floor (WCAG 2.2 AA), most at 44/48 because they are the primary act. */ :root { --gs-buy-h: 48px; --gs-buy-line: #E7E2DC; --gs-buy-ink: #1C1917; --gs-buy-muted: #57534E; --gs-buy-faint: #94897F; --gs-buy-accent: var(--color-accent-500, #916A49); --gs-buy-soft: var(--color-accent-50, #F6EBE1); --gs-buy-strong: var(--color-accent-800, #614830); --gs-buy-surface: #fff; --gs-buy-bg: #F7F5F2; --gs-buy-warn: #B54708; --gs-buy-warn-bg: #FFFAEB; --gs-buy-ok: #067647; --gs-buy-ok-bg: #ECFDF3; --gs-buy-danger: #B42318; } /* ---------- the bar ---------- */ .ghaffa-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 998; display: none; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--gs-buy-surface); border-top: 1px solid var(--gs-buy-line); } .ghaffa-buybar__wa { flex: none; width: 48px; height: 48px; border: 1px solid var(--gs-buy-line); border-radius: 8px; display: grid; place-items: center; color: var(--gs-buy-ok); background: var(--gs-buy-surface); } .ghaffa-buybar__wa svg { width: 24px; height: 24px; } .ghaffa-buybar__buy { flex: 1; min-width: 0; height: var(--gs-buy-h); border: 0; border-radius: 8px; background: var(--gs-buy-accent); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; } .ghaffa-buybar__buy:hover, .ghaffa-buybar__buy:focus-visible { background: var(--gs-buy-strong); } /* Sold out or closed: a sentence, not a dead button. A greyed-out button still invites the tap and explains nothing, and the page stays live so "kapan restock?" is still one tap away. */ .ghaffa-buybar__note { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 1.35; color: var(--gs-buy-muted); } /* ---------- the sheet ---------- */ .ghaffa-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; } .ghaffa-sheet[hidden] { display: none; } /* The scrim is what makes the sheet the live layer. Without it the page behind stayed fully readable and nothing said which one was in charge (M38). */ .ghaffa-sheet__scrim { position: absolute; inset: 0; background: rgba(28, 25, 23, .45); } .ghaffa-sheet__panel { position: relative; width: 100%; max-height: 88vh; max-height: 88dvh; overflow: auto; background: var(--gs-buy-surface); border-radius: 14px 14px 0 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; } .ghaffa-sheet__grab { width: 36px; height: 4px; border-radius: 2px; background: #DDD5CC; margin: 0 auto 2px; } body.ghaffa-sheet-open { overflow: hidden; } .ghaffa-sheet__head { display: flex; gap: 12px; align-items: flex-start; } .ghaffa-sheet__photo { flex: none; width: 72px; height: 72px; border-radius: 8px; object-fit: cover; } .ghaffa-sheet__facts { flex: 1; min-width: 0; } .ghaffa-sheet__price { font-size: 22px; font-weight: 600; line-height: 1.2; color: var(--gs-buy-ink); } .ghaffa-sheet__price del { font-size: 14px; font-weight: 400; color: var(--gs-buy-faint); } .ghaffa-sheet__price ins { text-decoration: none; } .ghaffa-sheet__chosen { margin: 2px 0 6px; font-size: 12px; color: var(--gs-buy-muted); } /* 44px, up from the 16x24 hit area the old close button had -- under the web floor on one side. */ .ghaffa-sheet__close { flex: none; width: 44px; height: 44px; border: 1px solid var(--gs-buy-line); border-radius: 8px; background: var(--gs-buy-surface); color: var(--gs-buy-muted); display: grid; place-items: center; cursor: pointer; } .ghaffa-sheet__close svg { width: 20px; height: 20px; } .ghaffa-sheet__body { display: flex; flex-direction: column; gap: 12px; } .ghaffa-optgroup { border: 0; margin: 0; padding: 0; } .ghaffa-optgroup__label { display: block; margin: 0 0 8px; padding: 0; font-size: 14px; font-weight: 600; } .ghaffa-optgroup__chips { display: flex; flex-wrap: wrap; gap: 8px; } /* The radio is the state; the label is the target. Hidden with clip rather than display:none so it keeps its place in the tab order and screen readers still announce the group. */ .ghaffa-chip__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .ghaffa-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--gs-buy-line); border-radius: 8px; background: var(--gs-buy-surface); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--gs-buy-ink); cursor: pointer; } .ghaffa-chip img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; } .ghaffa-chip small { font-size: 12px; font-weight: 600; color: var(--gs-buy-warn); } .ghaffa-chip__input:checked + .ghaffa-chip { border-color: var(--gs-buy-accent); background: var(--gs-buy-soft); color: var(--gs-buy-strong); font-weight: 600; } .ghaffa-chip__input:focus-visible + .ghaffa-chip { outline: 2px solid var(--gs-buy-accent); outline-offset: 2px; } /* Struck through AND unselectable: today a buyer finds out a size is gone by picking it and watching the button die. */ .ghaffa-chip--gone { color: var(--gs-buy-faint); text-decoration: line-through; background: var(--gs-buy-bg); cursor: not-allowed; } .ghaffa-qty { display: inline-flex; align-items: center; border: 1px solid var(--gs-buy-line); border-radius: 8px; overflow: hidden; } .ghaffa-qty button { width: 44px; height: 44px; border: 0; background: var(--gs-buy-surface); color: var(--gs-buy-ink); font-size: 18px; line-height: 1; cursor: pointer; } .ghaffa-qty input { width: 56px; height: 44px; border: 0; border-left: 1px solid var(--gs-buy-line); border-right: 1px solid var(--gs-buy-line); text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; background: var(--gs-buy-surface); } .ghaffa-qty input::-webkit-outer-spin-button, .ghaffa-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ghaffa-sheet__add { height: var(--gs-buy-h); border: 0; border-radius: 8px; background: var(--gs-buy-accent); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; } .ghaffa-sheet__add:disabled { background: #D9D2CA; cursor: not-allowed; } .ghaffa-sheet__add.is-busy { opacity: .7; } .ghaffa-sheet__error { margin: 0; font-size: 14px; color: var(--gs-buy-danger); } /* M29's answer, in the shop's own colour and in the place the buyer is already looking. */ .ghaffa-sheet__done { display: flex; flex-direction: column; gap: 12px; } /* `hidden` is only a default of `display:none`, and any `display` here beats it — so the confirmation drew itself, tick and all, before anything had been added. Say it again explicitly for the two elements this file gives a display to. */ .ghaffa-sheet__done[hidden], .ghaffa-sheet__error[hidden] { display: none; } .ghaffa-sheet__toast { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px; border-radius: 8px; background: var(--gs-buy-soft); color: var(--gs-buy-strong); font-size: 14px; font-weight: 600; } .ghaffa-sheet__tick { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--gs-buy-accent); color: #fff; display: grid; place-items: center; } .ghaffa-sheet__tick svg { width: 14px; height: 14px; } .ghaffa-sheet__after { display: flex; gap: 8px; } .ghaffa-sheet__more, .ghaffa-sheet__cart { flex: 1; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } .ghaffa-sheet__more { border: 1px solid var(--gs-buy-line); background: var(--gs-buy-surface); color: var(--gs-buy-ink); } .ghaffa-sheet__cart { border: 0; background: var(--gs-buy-accent); color: #fff; } .gs-badge--ok { background: var(--gs-buy-ok-bg); color: var(--gs-buy-ok); } .gs-badge--low { background: var(--gs-buy-warn-bg); color: var(--gs-buy-warn); } .gs-badge--none { background: #F4F1EE; color: var(--gs-buy-muted); } .gs-badge--po { background: var(--gs-buy-accent); color: #fff; } .ghaffa-sheet .gs-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 5px; font-size: 12px; font-weight: 600; } /* ---------- the one decision ---------- Below 768 the bar is the buy control and the inline form steps aside; from 768 up the inline form is, and the bar is not drawn at all. Nothing here asks what browser this is. */ @media (max-width: 767.98px) { .ghaffa-buybar { display: flex; } /* Room for the bar under the page, so it never covers the last thing on it (M08). */ body.wc-single-product-page .site-content { padding-bottom: calc(var(--gs-buy-h) + 24px); } /* Two things had to be got right here, and both were got wrong first: 1. `wc-single-product-page` and `single-product` are both classes on , so they are one compound selector, not a descendant pair — written as a pair this matched nothing; 2. GeneratePress ships `.woocommerce div.product.do-quantity-buttons form.cart{display:flex}` (0,4,2) in woocommerce.min.css, which outranks the obvious rule (0,3,2) and left a phone showing BOTH the bar and the inline form. `div.product` is the ancestor that rule leans on, so naming it too makes this (0,4,3) — enough to win on its own, without !important. */ body.wc-single-product-page div.product form.cart:not(.ghaffa-sheet__panel), body.wc-single-product-page div.product .variations_form:not(.ghaffa-sheet__panel), body.wc-single-product-page form.cart:not(.ghaffa-sheet__panel), body.wc-single-product-page .variations_form:not(.ghaffa-sheet__panel), body.wc-single-product-page .ghaffa-buybar-wa { display: none; } } @media (min-width: 768px) { .ghaffa-sheet { display: none; } } /* ---------- the product page joins the storefront's type ladder (M72) ---------- The ladder 12 · 14 · 16 · 18 · 22 · 28 was set in F5c and every other storefront page was put on it then; the product page was the one left out. Measured here on 15 Sep, only counting text that is actually DRAWN (screen-reader text is clipped to 1px and is read, not drawn): h1.product_title 24px -> 22 the page title, the ladder's --fs-xl .price bdi 20px -> 22 the price is the other headline on this page, not a size of its own; the struck-through old price stays 14 h2 (Deskripsi) 20px -> 18 a section heading, --fs-lg .sku / .posted_in 12.8px -> 12 meta, --fs-xs the "–" separator 13.712px -> 12 same line, same size */ body.wc-single-product-page .summary h1.product_title, body.wc-single-product-page h1.product_title.entry-title { font-size: 22px; line-height: 1.25; } /* F5e: `div.product` is in the selector because WooCommerce's own `.woocommerce div.product p.price` is (0,3,2) and the line below it was (0,3,1) -- so this rule was written in F5b, read as intent ever since, and never actually drew anything. Measured on 15 Sep the price was still 20px/700/#222: WooCommerce's size, WooCommerce's weight, and a grey that is not --ink. Weight and colour are stated here for the same reason. */ body.wc-single-product-page div.product .summary > .price, body.wc-single-product-page div.product .summary > .price bdi, body.wc-single-product-page div.product .summary > .price .woocommerce-Price-currencySymbol { font-size: 22px; font-weight: var(--fw-title); color: var(--ink); } body.wc-single-product-page div.product .summary > .price del, body.wc-single-product-page div.product .summary > .price del bdi, body.wc-single-product-page div.product .summary > .price del .woocommerce-Price-currencySymbol { font-size: 14px; font-weight: var(--fw-body); color: var(--muted); } body.wc-single-product-page .woocommerce-tabs h2, body.wc-single-product-page .related h2, body.wc-single-product-page .upsells h2, body.wc-single-product-page .entry-summary h2 { font-size: 18px; line-height: 1.35; } body.wc-single-product-page .product_meta, body.wc-single-product-page .product_meta .sku_wrapper, body.wc-single-product-page .product_meta .sku, body.wc-single-product-page .product_meta .posted_in, body.wc-single-product-page .product_meta .tagged_as, body.wc-single-product-page .summary > .price span:not([class]) { font-size: 12px; } /* The "–" a price RANGE prints between its two amounts on a related-product card: an unclassed span, so it inherited 0.857em from WooCommerce and landed on 13,712px. */ body.wc-single-product-page li.product .price span:not([class]), body.wc-single-product-page .price span:not([class]) { font-size: 12px; }