/* ------------------------------------------------ one margin for the page -- Her word, 9 Oct 2026: from the header to the footer, every page keeps the same distance from the edge of the screen — **35px on a phone, 50px on a pad, 100px on a desktop** — the announcement bar, the navigation and the footer included. It is one number, --edge, declared in store.css. This file is loaded last and does nothing but hold the bands to it, because each band sets its own padding in its own stylesheet and would otherwise win on load order alone. Two kinds of container, two ways of holding them: · a band that paints a colour keeps its full width and takes the distance as padding, so the colour still reaches the edge and the words move in; · a band that is centred with a maximum width takes it as a margin instead. What is deliberately left alone: boxes *inside* a band — a product's picker, a payment card, the cart summary, a card in a grid — because their padding is the inside of a card, not the margin of a page. And anything meant to bleed: photographs, the Drop scene, the film strips. */ /* Plain selectors, not :where() — this file has to win on load order, and :where() carries no weight at all, which is why nothing moved the first time (9 Oct 2026). */ .announce, .site-head, .fnd, .dds, .sl, .sl-head, .st-sticky, .sun-top, .sun-foot, .cf, .dv-head, .dv, .hb, .rs, .rq-band, .rq-only, .lb, .cmty, .gcs, .mo-band, .gcs-stage, .x-stat { /* .x-bento is NOT in this list: its tiles carry their own colour and have to reach the edge of the screen. Holding them 35px in left a strip of the page's cream down each side (her word, 10 Oct 2026: "remove the cream color sa side"). The words inside the tiles keep the margin instead. */ /* .can is NOT in this list: it is a floating product circle in the Drop scene, not a band across the page. Giving it 35/50/100px of side padding squeezed the photo into a narrow strip inside the round frame, so the circles stopped reading as circles (her word, 9 Oct 2026). */ padding-left: var(--edge); padding-right: var(--edge); } /* the ones that centre themselves inside a maximum width */ .wrap, .foot-grid, .foot-end, .gcs-in, .st-page, .sl-grid, .sl-note, .sun-words { width: min(var(--inner, 1280px), 100% - var(--edge) * 2); margin-inline: auto; } .wrap.narrow { --inner: 860px; } /* ------------------------------------------- the space above and below ---- Her word, 10 Oct 2026: "dun sa layo ng text sa border ng bawat section, make it 100px per section, top and bottom." One number, the way --edge is one number for the sides. Each band used to carry its own: 64 on Where Your Money Goes, 70 on Gift Cards, 80 on Who, 82 on Shirt Legend, 90 on CTA, 60 on Forum — six slightly different answers to the same question. They are all 100 now. The scenes are not in this list: Hero, Wear What You Stand Circle, Best Sellers and Why are stages measured against the screen, not bands with text against a border, and padding is not what holds them apart. */ :root { --band: 100px; } .fnd, .manifesto, .dds, .sl, .gcs, .final { padding-top: var(--band); padding-bottom: var(--band); } /* Her word, 10 Oct 2026: "make sure that on every section, 100px ang layo ng top and bottom ng text sa borders ng section." The band holds the 100 above, but the first words inside often carry a margin of their own on top of it, and the last words one below — so the distance from the words to the border came out as 126 here and 78 there. A first child has nothing above it to be pushed away from, and a last child nothing below, so those margins are taken off at every depth. What is left is the band's own 100, and that is what the words stand at. */ /* Only along the leading edge — the first child of the first child, and so on down — not every first child anywhere inside, which would have stripped spacing from the middle of a card or a list that had nothing to do with the band's border. */ :is(.fnd, .manifesto, .dds, .sl, .gcs, .final) > :first-child, :is(.fnd, .manifesto, .dds, .sl, .gcs, .final) > :first-child > :first-child, :is(.fnd, .manifesto, .dds, .sl, .gcs, .final) > :first-child > :first-child > :first-child { margin-top: 0; } :is(.fnd, .manifesto, .dds, .sl, .gcs, .final) > :last-child, :is(.fnd, .manifesto, .dds, .sl, .gcs, .final) > :last-child > :last-child, :is(.fnd, .manifesto, .dds, .sl, .gcs, .final) > :last-child > :last-child > :last-child { margin-bottom: 0; } /* and the pull quote's own 4px under its words, which sat on top of the 100 */ .manifesto .pull { padding-bottom: 0; } /* the tiles reach the edge; their words keep her margin */ .x-bento-grid > * { padding-left: var(--edge); padding-right: var(--edge); } /* ----------------------------------------------- the prices, one size ---- Her word, 10 Oct 2026: every price on the Shop and on a product page, and the struck-through old price beside them, is the size the Best Sellers prices are — 17.5px, the number she set there. The statistic tiles are left out: ₱150 under SHIPPING NATIONWIDE is a figure on a poster, not a price on a product, and it stands with 30 and 6 · 13. */ .money, .was, s.was, .buybox-price, .buybox-price s { font-size: 17.5px; } .x-stat .money, .x-stat .was { font-size: inherit; } /* on the Shop itself they are smaller, and the old price smaller again — her numbers, 10 Oct 2026 */ body.shop .money { font-size: 15px; } body.shop .was, body.shop s.was, body.shop s .money, body.shop .was .money { font-size: 10px; } body.shop .x-stat .money, body.shop .x-stat .was { font-size: inherit; } /* ------------------------------------ the collection heads, one voice ---- Her word, 11 Oct 2026: the Yin Yang Collection, the Land of the Rising Sun, Home is Davao and the Complete Collection should read the same. Three of them already did — Anton in capitals for the name, Space Grotesk in small capitals for the label and the count, Figtree for the line between. The Complete Collection was the odd one: Fraunces, in sentence case, with its intro at 15px. It takes the same voice now, with the same clamp, so the four grow and shrink together. */ .listing-head .display { font: 400 clamp(34px, 5vw, 72px)/1 'Anton', var(--display); text-transform: uppercase; letter-spacing: .01em; font-variation-settings: normal; } .listing-head p { font: italic 400 clamp(17px, 1.6vw, 22px)/1.45 var(--body); letter-spacing: .01em; opacity: .92; } .listing-head .sort .muted { font: 600 var(--tiny) var(--mono); letter-spacing: .24em; text-transform: uppercase; opacity: .6; } /* down the middle, the way the Yin Yang and Home is Davao heads read (her word, 11 Oct 2026) */ .listing-head { justify-content: center; text-align: center; } .listing-head .listing-copy { flex-basis: 100%; } .listing-head p { margin-inline: auto; } /* the words inside the sort box sit in the middle of it, not against its left edge (her word, 11 Oct 2026). The arrow a browser draws takes room on the right, so it is taken off and the box keeps its own padding either side. */ .sort select { text-align: center; text-align-last: center; appearance: none; -webkit-appearance: none; padding-left: 18px; padding-right: 18px; } /* "Sort" stands as far from its box as the count does — 16px, the row's own gap. The word and the box share a label, so the space between them was a plain word space and read as nothing at all (her word, 11 Oct 2026). */ .sort label { display: inline-flex; align-items: center; gap: 16px; } /* ------------------------------------------- a photograph under the mouse --- Her word, 11 Oct 2026: every photograph on the Shop lifts a little when the pointer rests on it, the way Home is Davao already does — the same 4% over the same .8s, so the whole page answers the mouse in one voice. It is the picture that grows inside its frame, never the frame, so nothing shifts around it. A phone has no hover, so none of this reaches one. */ @media (hover: hover) { .tw-shot img, .rs-shot img, .hb-shot img, .dv-a a img, .dv-b a img, .dv-c a img, .card a img, .grid .card img, .coll-card img { transition: transform .8s ease; } .tw-shot:hover img, .rs-shot:hover img, .hb-shot:hover img, .dv-a a:hover img, .dv-b a:hover img, .dv-c a:hover img, .card a:hover img, .grid .card a:hover img, .coll-card:hover img { transform: scale(1.04); } /* the frame holds the picture in while it grows */ .tw-shot, .rs-shot, .hb-shot, .dv-a a, .dv-b a, .dv-c a { overflow: hidden; } } /* ------------------------------- 100px from the words to every border ---- Her word, 11 Oct 2026, for the Shop as well as the home page. Each band is given the padding that puts its first and last words 100px from its own edges — measured band by band, because what sits at the edge differs: a carousel's arrows, a photo collage's plane, a stage's foot. */ /* the 100 is measured from the turning yin-yang mark, not from the words below it (her word, 11 Oct 2026) */ .cf.cf-twins { padding-top: 101px; padding-bottom: 100px; } /* Home is Davao: her 100px is measured from the BROKEN LINE itself, the same as the yin-yang mark is from its border (her word, 11 Oct 2026). The route is a 400x120 picture whose dashed arc tops out at y=42, so the top 35% of it is empty sky — that much is taken off the padding, and the dashes land at 100. At the foot it is a plain 100: the price pill's own box ends where the row does, so nothing is carried there. */ .hb { --route-w: min(300px, 70vw); --route-sky: calc(var(--route-w) * .3 * .35); padding-top: calc(100px - var(--route-sky)); padding-bottom: 100px; } .hb-route { width: var(--route-w); } /* and the Japanese band the same way: 100 from its border to the first thing in it, not to its words */ /* the band's padding is set through its own --PT, so the red sun — which is placed from the border and must add the padding back — cannot drift from it. No padding at the foot: the sea must run straight into the section below it, with no white strip between (her word, 22 Sep 2026, again 11 Oct 2026). */ .rs { --PT: 100px; padding-bottom: 0; } /* Request A Design is cut as a marker, not a pill: square down the left side and coming to a point on the right (her drawing, 11 Oct 2026). The point is cut at the same angle as the arrow printed inside it — that glyph's head rises one pixel for every pixel back from its tip, a true 45 degrees — so the point is half the button's height deep. The words stand as far from the TIP as they do from the square left side — her word, 11 Oct 2026 — which is why no room is added for the point: at the height the words sit, the 45 degree edge is still some way out, so nothing is cut. SHOP THE COLLECTION KEEPS ITS PILL. Her word, 11 Oct 2026: do not change it. */ .rq-band .btn { --point: calc(var(--btn-h, 60px) / 2); border-radius: 0; /* 25px from the square side to the words, 35px from the words to the tip (her word, 11 Oct 2026). The padding is 2px less than each: the letters carry that much white of their own before the ink begins. */ padding-left: 23px; padding-right: 33px; clip-path: polygon(0 0, calc(100% - var(--point)) 0, 100% 50%, calc(100% - var(--point)) 100%, 0 100%); } /* The Complete Collection stands 50px from the side, whatever screen it is on (her word, 11 Oct 2026) — its heading, its sort line and its grid of designs, so the words and the pictures share one edge. The band's own --edge (35 on a phone, 100 on a desktop) is overruled here and nowhere else. */ .listing-full .dv-head, .listing-full .dv { /* the grid's own phone rule writes its padding with !important, so the side has to be stated the same way to be heard; the top and bottom are left as they were */ padding-left: 50px !important; padding-right: 50px !important; } /* On a pad the Complete Collection's designs are one under the other, and each one spans the band: 50px of margin on the left AND on the right, not 50 on one side and a wide gap on the other (her word, 11 Oct 2026 — she picked this over keeping the left-right stagger). The phone keeps its stagger until she says otherwise. */ @media (max-width: 1024px) and (min-width: 701px) { .listing-full .dv-shop > figure, .listing-full .dv-shop .dv-a, .listing-full .dv-shop .dv-b, .listing-full .dv-shop .dv-c { width: 100% !important; max-width: 100% !important; justify-self: stretch !important; align-self: start !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } } /* A design's own page: every band stands 100px from its border, top and foot (her word, 11 Oct 2026) — the lookbook, the words under it, and the panel. The first and last thing inside gives up its own margin, or her 100 reads as 130 or 146 instead. (.bgbar is her own control, not a band, and is left out.) */ .lb, .pdp-under, .pnl { padding-top: 100px !important; padding-bottom: 100px !important; } .lb > :first-child, .pdp-under > :first-child, .pnl > :first-child { margin-top: 0 !important; } .lb > :last-child, .pdp-under > :last-child, .pnl > :last-child { margin-bottom: 0 !important; } /* On a desktop the lookbook's picture is placed absolutely, so the band's own padding never reaches it: it is inset by hand instead — its foot 100px from the border, and its head kept the same 4px under the band's small heading, which now starts at 100. Below 901px the picture stands in the flow and the padding above does the work. */ @media (min-width: 901px) { .lb .lb-look { top: 118px !important; bottom: 100px !important; } } /* On a pad the design's photograph stands UPRIGHT, not in a wide band across the page (her word, 11 Oct 2026). It was 705 x 376 — a letterbox that cut the head and the feet off her tall model shots. It now keeps the same upright shape the desktop gives it, 476 by 682, and sits in the middle of the page. A phone is left alone: that one is square, as she set it. */ @media (max-width: 900px) and (min-width: 701px) { .on-lookbook .lb-fig { width: min(100%, 520px); height: auto; aspect-ratio: 476 / 682; margin-left: auto; margin-right: auto; } } /* The quantity on a design's page is a CREAM pill with RED words — her word, 11 Oct 2026, the same pair as Shop The Collection. It was cream on white before that, which could not be read at all. The little box around the number takes the same red, faintly, or it disappears into the cream. */ .qty { background: var(--cream, #EAE2B7); color: var(--red, #AE2012); border-color: color-mix(in srgb, var(--red, #AE2012) 30%, transparent); } .qty button { color: inherit; background: none; } /* the number stands on white inside the cream pill (her word, 11 Oct 2026) */ .qty input, .buybox .qty-row .qty input { color: inherit; background: #fff; font-weight: 700; border-color: color-mix(in srgb, var(--red, #AE2012) 35%, transparent); } /* Her word, 11 Oct 2026, on the cream pill in the final call: the words in it are the band's own red, not navy. Request A Design carries it too — she asked for those two to be the same button. */ .final .btn-light, .rq-band .btn-light { color: var(--red, #AE2012); } /* And Add to cart is that same red with CREAM words, where it had white. */ .btn-solid[data-add-btn] { background: var(--red, #AE2012); color: var(--cream, #EAE2B7); } .btn-solid[data-add-btn]:hover { color: var(--cream, #EAE2B7); } /* The design's name under its photograph stands in the middle (her word, 11 Oct 2026). */ .on-design .lb-name, .on-lookbook .lb-name { text-align: center; } /* The price in a design's buy box, her word 11 Oct 2026: the price she sells at stands alone on the first line, hard against the right; under it the SAVE and then the old crossed-out price, in that order (she moved the SAVE up beside the price, then back down, then in front of the old price). The break is a pseudo-element's newline rather than a new tag, so the places her saved text sizes are counted by do not all shift by one. */ .buybox-head .buybox-price { display: flex; flex-wrap: wrap; justify-content: flex-end; /* centred on each other, not sat on a shared baseline: the SAVE pill carries padding, so on a baseline its words rode 2.5px low against the old price (her word, 11 Oct 2026 — dead centre) */ align-items: center; gap: 2px 10px; text-align: right; /* and it keeps the width its two lines need: squeezed by a long design name it was dropping the SAVE and the old price onto separate lines */ flex-shrink: 0; } /* an empty full-width piece of the box itself ends the first line, so the price keeps it alone; then the SAVE, then the old price after it */ .buybox-head .buybox-price::after { content: ''; order: 1; flex: 0 0 100%; height: 0; } .buybox-head .buybox-price > .badge { order: 2; } .buybox-head .buybox-price > s { order: 3; } /* On a phone every choice in the buy box is lettered the same — the inks, the types and the sizes, White through 5XL — at the size she set on White (her word, 11 Oct 2026). It holds on every design's page, not just the one she was looking at. */ @media (max-width: 700px) { .buybox .pill span, .buybox .pill-link span { font-size: 12px; } } /* and 15 on a pad, Raw Edge through 5XL — her word, 12 Oct 2026. White and Black she had already set to 15, so the whole row reads the same. */ @media (min-width: 701px) and (max-width: 1024px) { .buybox .pill span, .buybox .pill-link span { font-size: 15px; } } /* and every one of those boxes is 40 tall, phone through desktop (her word, 11 Oct 2026). The inks were 32 and everything else 44. */ .buybox .pill span, .buybox .pill-link span { height: 40px; } /* The white panel that shows the cut, front and back: 150 tall on a phone, 175 on a pad, 200 on a desktop (her word, 11 Oct 2026). Its height is the picture's, so each number is 24 less — the 4px above it, the 18px under it that the cut's name sits in, and the 1px border top and foot. */ .buybox .fitbox img, .fitbox img { height: 176px; } /* desktop 200 */ @media (max-width: 1024px) { .buybox .fitbox img, .fitbox img { height: 151px; } } /* pad 175 */ @media (max-width: 700px) { .buybox .fitbox img, .fitbox img { height: 126px; } } /* phone 150 */ /* The buy box is headed by the design's BATCH NUMBER, not its name — lettered exactly as the Shop letters it (12px, 600, the mono, .26em, uppercase) and in her yellow (her word, 11 Oct 2026). */ .buybox-head .buybox-batch { font: 600 12px/1.3 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--nav-ink, #FFB627); white-space: nowrap; } /* The batch number and the price stand on ONE line, level with each other (her word, 11 Oct 2026). They only fit because the SAVE and the old price are hung underneath instead of widening the price: they are one wrapper, taken out of the flow and pinned under the price's right edge, and the head is given the room they need below it. */ .price-sub { display: contents; } /* 5px from the batch number down to the first boxes (her word, 11 Oct 2026 — 10 first, then 5). No room is reserved under the head for the hanging SAVE line: it hangs over the right-hand side of that row, where the boxes on the left never reach. */ .buybox-head { flex-wrap: nowrap; align-items: flex-start; padding-bottom: 0; margin-bottom: 6.2px; } /* 6.2 reads as 15 on the page: the head is as tall as the PRICE, bigger type than the batch, so some of its height already sits under the batch's letters. Her three numbers, 11 Oct 2026: batch to the White box 12, that box to the INK letters 5, those letters to the Raw Edge box 12. All measured on the LETTERS. */ .buybox-head .buybox-price { position: relative; margin-left: auto; display: block; flex: 0 0 auto; } .buybox-head .buybox-price::after { content: none; } .buybox-head .buybox-price .price-sub { position: absolute; top: 100%; right: 0; display: flex; align-items: center; gap: 10px; white-space: nowrap; margin-top: 2px; } /* SAVE COMES FIRST, THEN THE OLD PRICE. Her word, 11 Oct 2026, twice, the second time: "HUWAG MONG BAGUHIN." The two sit in that order whatever the mark-up says — it prints the old price first. DO NOT REVERSE THIS. */ .buybox-head .price-sub .badge { order: 1; } .buybox-head .price-sub s { order: 2; } /* Size guide is written in capitals (her word, 11 Oct 2026). */ .buybox .link-btn { text-transform: uppercase; } /* The size chart stands on the page under the choices and changes with the cut; a click on it opens the big one (her word, 11 Oct 2026). */ .chart-inline { display: block; width: 100%; padding: 0; border: 0; background: #fff; border-radius: 10px; overflow: hidden; cursor: zoom-in; } .chart-inline figure { margin: 0; } .chart-inline figure picture, .chart-inline figure img { display: block; width: 100%; height: auto; object-fit: contain; } .chart-inline .chart-none { display: block; padding: 14px; font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--navy, #001E2D); } /* a display of its own beats the browser's own hiding, so say it again */ .chart-inline .chart-none[hidden], .chart-dlg .chart-none[hidden] { display: none; } /* and the quantity pill stands as tall as Add to Cart beside it */ .buybox .qty { height: 42px; } .buybox .qty button { height: 100%; } /* The name of each choice sits UNDER its boxes (her word, 11 Oct 2026), lettered exactly as it was when it stood over them. */ /* line-height 1 so the name's box hugs its letters: with the usual leading the box ended 2.9px below the ink, and a gap set to 5 measured 7.9 to the eye (her word, 11 Oct 2026, measured with the ruler). */ .buybox .opt .opt-name { display: block; font: 600 var(--tiny)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); opacity: .78; padding: 10.86px 0 0; } /* a true 12 on the letters */ /* 12px of real air above the letters */ /* and 5px from that name down to the next lot of boxes: the form sets them 10 apart, so one group pulls up 5 against the one before it (her word, 11 Oct 2026). Only between the groups — the room before Add to cart stays. */ /* THE GAP THAT MATTERS, her word 11 Oct 2026, said over and over: the air under the BATCH line before the White box is the measure, and the air under each choice's name before the next lot of boxes must be THE SAME. Measured on the letters, the batch leaves 13.8px; the name's own line leaves 8.8 less than that, so it is given the difference back. */ .buybox .opt + .opt { margin-top: 8.6px; } /* 20px from the TYPE line's letters down to the white cut panel, and the same 20 from the SIZE line down to the size chart — the two boxes hang the same way (her word, 11 Oct 2026; 12, then 15, then 20). */ .buybox .opt .fitbox { margin-top: 19.1px; } .buybox .chart-inline { margin-top: 9.1px; } /* 15px from the SIZE line's letters down to SIZE GUIDE's (her word, 11 Oct 2026). The form's own 10px gap left 15.2 from ink to ink; this takes the 0.2 back. */ .buybox .link-btn { margin-top: -0.2px; } /* 12px from the colour circles down to COLOR: … (her word, 11 Oct 2026). The one that is chosen wears a ring 2px wide sitting 3px clear of it, so its lowest ink is 5px below the circle's own box — that 5 is added here, and nowhere else. */ .buybox .opt:has(.swatches) .opt-name { padding-top: 15.86px; } /* The size charts keep their own shape. Wrapping each in a
so the guide can show one at a time brought it under a rule that stretches a picture to fill its figure, and an 804x402 chart was being drawn 721x1000 — the shirt pulled long (her word, 11 Oct 2026: "This is wrong in size"). */ .chart-dlg figure { margin: 0 0 12px; } .chart-dlg figure picture, .chart-dlg figure img { display: block; width: 100%; height: auto; object-fit: contain; } /* The words under the size chart, lettered like every other name in the buy box and saying what a click does (her word, 11 Oct 2026). */ .buybox .chart-say { display: block; font: 600 var(--tiny)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream); opacity: .78; padding: 1.16px 0 0; } /* 12px of air under the chart */ /* The big size chart: its ✕ pinned in the upper right corner, and room for her fingers to work (her word, 11 Oct 2026 — pinch out to zoom, pinch in to go back). touch-action none so the phone does not take the pinch for itself. */ .chart-dlg { position: relative; overflow: hidden; touch-action: none; } .chart-dlg .icon-btn { position: absolute; top: 10px; right: 10px; float: none; z-index: 5; background: #fff; border-radius: 999px; } .chart-dlg figure { transition: transform .12s ease-out; will-change: transform; } .chart-dlg.is-zoomed { cursor: grab; } .chart-dlg.is-zoomed figure { transition: none; } /* 20px from the SIZE GUIDE line's letters down to the quantity (her word, 11 Oct 2026 — 15 first, then 20). The row carried 26 of its own and read as 35.2 from the ink. */ .buybox .qty-row { margin-top: 10.8px; } /* 15px from the quantity and Add to cart row down to Buy it now — her word, 11 Oct 2026: 12, then 20, then "No retain 15 dyan." It was 22 of its own. */ .buybox .btn-line.btn-block { margin-top: -7px; } /* 50px of air inside the buy box, top and foot: from its border down to the BATCH line's letters, and from Buy it now down to its border (her word, 11 Oct 2026). The top was 20.5 from the ink with 16px of padding, the foot 18; 45.5 and 50 give her the two 50s. */ .buybox { padding-top: 45.5px; padding-bottom: 50px; } /* 100px from the cream band's border to the first line's letters (her word, 11 Oct 2026). The paragraph carried 15 of its own and the line another 7.3, so her 100 was reading 122.3; the margin goes and the padding takes the rest. */ /* and 100 from the last line's letters down to the foot: the Shipping line sits 19.6 inside its own box, so the padding gives that back. */ .pdp-under { padding-top: 92.7px !important; padding-bottom: 80.4px !important; } .pdp-under > .pdp-desc > :first-child { margin-top: 0; } /* The panel band measured on its letters too, not on its boxes (her word, 11 Oct 2026): 100 from the border to "Six designs, one at a time", and 100 from the last line down to the foot. It read 102.9 and 101.5. */ .pnl { padding-top: 97.1px !important; padding-bottom: 98.5px !important; } /* Her "Adjust photo" on each panel — her own control, on the page. It carries none of the pay band's class names on purpose: those rules made it a block that covered the design's face (11 Oct 2026). A thin bar at the foot of the screen, never over the panel. */ .pnl-card .pa-open { position: absolute; z-index: 6; right: 10px; top: 10px; font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(0,18,25,.75); color: #EAE2B7; } .pa-tool { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, 94vw); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 999px; background: rgba(0,18,25,.96); color: #EAE2B7; box-shadow: 0 18px 44px -18px rgba(0,0,0,.8); } .pa-tool[hidden] { display: none; } .pa-tool b { font: 600 9px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; } .pa-tool input[type=range] { flex: 1 1 140px; min-width: 120px; accent-color: #AE2012; } .pa-row { display: flex; gap: 6px; } .pa-tool button { font: 600 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 9px; border-radius: 999px; border: 1px solid rgba(234,226,183,.35); background: transparent; color: #EAE2B7; cursor: pointer; } .pa-tool .pa-save { background: #AE2012; border-color: transparent; color: #fff; } .pa-tool small { flex: 1 1 100%; font-size: 10px; opacity: .85; } /* The panel band stands on EVERY design's page but shows different designs on each, so a size kept by "the nth piece of text" cannot travel. These are kept by their role instead, which does: on a phone the design's name in a panel is 7.5px with 12 above and below, and its number 25 — her numbers, 11 Oct 2026 (the name went 12, then 10, then 7.5). Pad and desktop are left as they were until she says. */ @media (max-width: 700px) { .pnl-card .pnl-side i { font-size: 7.5px; padding-top: 12px; padding-bottom: 12px; } .pnl-card .pnl-side b { font-size: 25px; } /* and the line under the band, which reads the same on every design's page. Named three times over: the house type ladder's own rule for a paragraph is more specific than a lone class and was winning (11 Oct 2026). */ .pnl .pnl-foot[class] { font-size: 10px; } } /* The same panel band on a pad, kept by role as well — her word, 12 Oct 2026: "kung anong settings ko here, iset mo sa lahat until sa pinakalast." She set the first panel on the Duterte Club page; the other five read 26 / 25 / 18 / 17.5. Her numbers now stand on every panel, on every design's page. Named through .pnl and the card so the house type ladder's own rule for an h3 (two classes and a tag) does not win. */ @media (min-width: 701px) and (max-width: 1024px) { .pnl .pnl-card .pnl-open .pnl-num { font-size: 35px; } .pnl .pnl-card .pnl-open h3 { font-size: 35px; } .pnl .pnl-card .pnl-open .pnl-btn { font-size: 12px; } .pnl .pnl-card .pnl-price, .pnl .pnl-card .pnl-price s, .pnl .pnl-card .pnl-price span { font-size: 20px; } } /* No italic in the Story's quote — her word, 12 Oct 2026: "Remove italicized from mobile, pad and desktop." The odd lines were set in italic by the section's own rule; the red and the ink stay exactly as they were, upright on all three screens. */ .st-quote span { font-style: normal; } /* ───────────────────────────────────────────────────────────────────────── Every product page reads the same — her word, 12 Oct 2026: "Isync mo 'ung ginawa ko sa tatlong yan, iapply mo lahat sa lahat ng products pages. ALL PRODUCTS!!!" She set these by pointing at a line on three pages — Free Duterte Surf (Black Ink), Duterte Club, Duterte Republic Italic Bold (White Ink) — and a size kept that way belongs to that page alone, because "the fourth piece of text" is a different thing on every design's page. Kept by role here, so all 43 of them read the same. Desktop is untouched. Where two of her saves disagreed, the most recent one stands (her rule, 11 Oct 2026): the previous/next buttons were 20 on Duterte Club at 3:38 and 25 on White Ink at 3:59 — so 25. ───────────────────────────────────────────────────────────────────────── */ @media (min-width: 701px) and (max-width: 1024px) { /* the buy box */ .buybox .buybox-head .buybox-batch { font-size: 10px; } .buybox .buybox-head .buybox-price, .buybox .buybox-head .buybox-price s, .buybox .buybox-head .buybox-price .money { font-size: 20px; } /* the design before and the design after */ .pd-walk .pd-walk-btn b { font-size: 25px; } /* the lookbook's name for the design */ .lb .lb-look .lb-name { font-size: 35px; } /* the panel band's own heading and the line under it */ .pnl .pnl-head h2 { font-size: 35px; } .pnl .pnl-foot[class] { font-size: 10px; } } @media (max-width: 700px) { .buybox .buybox-head .buybox-batch { font-size: 7.5px; } .buybox .buybox-head .buybox-price, .buybox .buybox-head .buybox-price .money { font-size: 20px; } .buybox .buybox-head .buybox-price s, .buybox .buybox-head .buybox-price s .money { font-size: 12px; } .pd-walk .pd-walk-btn b { font-size: 20px; } /* the panel card, opened */ .pnl .pnl-card .pnl-open .pnl-num { font-size: 25px; } .pnl .pnl-card .pnl-open .pnl-btn { font-size: 10.5px; } .pnl .pnl-card .pnl-price, .pnl .pnl-card .pnl-price s, .pnl .pnl-card .pnl-price span { font-size: 20px; } } /* The last thing that still lived on one page only: her own Adjust photo button, set on Duterte Club at 3:39 — 10, with 4 beneath it. A rule now, like the rest, so no product page carries a size of its own any more (12 Oct 2026). */ @media (min-width: 701px) and (max-width: 1024px) { .pnl-card .pa-open { font-size: 10px; padding-bottom: 4px; } } /* ═════════════════════════════════════════════════════════════════════════ Every product page, her whole table — her word, 12 Oct 2026. One block, the last word in the file, so there is a single place to read these from. Phone · pad · desktop, exactly as she wrote them. ═════════════════════════════════════════════════════════════════════════ */ /* ── desktop ──────────────────────────────────────────── 1025px and wider ── */ @media (min-width: 1025px) { .buybox .buybox-head .buybox-batch { font-size: 12px; } .buybox .buybox-head .buybox-price, .buybox .buybox-head .buybox-price s, .buybox .buybox-head .buybox-price s .money { font-size: 20px; } .buybox .pill span, .buybox .pill-link span { font-size: 20px; } .pd-walk .pd-walk-btn b { font-size: 25px; } /* her own number, saved 14 Oct 2026 1:57 AM — and the one that fits the card */ .lb .lb-look .lb-name { font-size: 50px; } .pnl .pnl-head h2 { font-size: 50px; } .pnl .pnl-foot[class] { font-size: 15px; } .pnl .pnl-card .pnl-open .pnl-num { font-size: 50px; } .pnl .pnl-card .pnl-open h3 { font-size: 50px; } .pnl .pnl-card .pnl-open .pnl-btn { font-size: 15px; } .pnl .pnl-card .pnl-price, .pnl .pnl-card .pnl-price s, .pnl .pnl-card .pnl-price span { font-size: 20px; } .pnl .pnl-card .pnl-side i { font-size: 12px; } .pnl .pnl-card .pnl-side b { font-size: 50px; } } /* ── pad ──────────────────────────────────────────────────── 701 – 1024px ── */ @media (min-width: 701px) and (max-width: 1024px) { .buybox .buybox-head .buybox-batch { font-size: 10px; } .buybox .buybox-head .buybox-price, .buybox .buybox-head .buybox-price s, .buybox .buybox-head .buybox-price s .money { font-size: 20px; } .buybox .pill span, .buybox .pill-link span { font-size: 15px; } .pd-walk .pd-walk-btn b { font-size: 25px; } .lb .lb-look .lb-name { font-size: 35px; } .pnl .pnl-head h2 { font-size: 35px; } .pnl .pnl-foot[class] { font-size: 12px; } .pnl .pnl-card .pnl-open .pnl-num { font-size: 35px; } .pnl .pnl-card .pnl-open h3 { font-size: 35px; } .pnl .pnl-card .pnl-open .pnl-btn { font-size: 12px; } .pnl .pnl-card .pnl-price, .pnl .pnl-card .pnl-price s, .pnl .pnl-card .pnl-price span { font-size: 20px; } .pnl .pnl-card .pnl-side i { font-size: 10px; } .pnl .pnl-card .pnl-side b { font-size: 35px; } } /* ── phone ───────────────────────────────────────────── 700px and narrower ── */ @media (max-width: 700px) { .buybox .buybox-head .buybox-batch { font-size: 7.5px; } .buybox .buybox-head .buybox-price, .buybox .buybox-head .buybox-price s, .buybox .buybox-head .buybox-price s .money { font-size: 20px; } .buybox .pill span, .buybox .pill-link span { font-size: 12px; } .pd-walk .pd-walk-btn b { font-size: 20px; } .lb .lb-look .lb-name { font-size: 25px; } .pnl .pnl-head h2 { font-size: 25px; } .pnl .pnl-foot[class] { font-size: 10px; } .pnl .pnl-card .pnl-open .pnl-num { font-size: 25px; } .pnl .pnl-card .pnl-open h3 { font-size: 25px; } .pnl .pnl-card .pnl-open .pnl-btn { font-size: 10px; } .pnl .pnl-card .pnl-price, .pnl .pnl-card .pnl-price s, .pnl .pnl-card .pnl-price span { font-size: 20px; } .pnl .pnl-card .pnl-side i { font-size: 7.5px; } .pnl .pnl-card .pnl-side b { font-size: 25px; } } /* The buy box was being cut off at the foot — her word, 12 Oct 2026: "Putol." The lookbook band is a fixed stage and the buy box is placed inside it, so when the box grew past the stage the band's overflow:hidden sliced it. With her new desktop sizes the tallest box is 1073, and the stage gives the look the band's height less 218 (118 above, 100 below), so the band needs 1291 to hold it. 1320 leaves a little room for a design with more rows than any has today. Measured, not guessed. Desktop only; the pad and the phone stack instead and were never cut. */ @media (min-width: 1025px) { .product-lookbook .lb { min-height: max(1320px, 100svh); } } /* The design's name lies across the photograph beside it. Where it crosses the picture the navy letters are lost on a dark shot, so that part is painted white — the same words again, drawn by the stylesheet and cut off at the photograph's edge, which name-over-photo.js works out as --name-cut. Her word, 14 Oct 2026: "'Ung pumatong sa photo, dapat white if black ang sample photo." */ /* (the name is already placed by its own stylesheet — absolute on a desktop, relative on a phone — so nothing here may touch its position) */ /* a desktop only: on a phone and a pad the name stands clear of the photograph, so it stays navy the whole way through (her word, 14 Oct 2026: "Sa mobile and pad, blue lang ito") */ @media (min-width: 1025px) { .lb-name[data-name]::before { content: attr(data-name) / ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; color: #fff; text-shadow: 0 1px 10px rgba(0, 18, 25, .35); clip-path: inset(0 0 0 var(--name-cut, 100%)); } } /* The old price and its "Save 33%" hang below the price, placed absolutely, so they take no room of their own — and once the shirt chips underneath came up to 12px they sat right under them and the two collided (her word, 14 Oct 2026, with the picture). The price now keeps that much room beneath it, measured in its own letters so it follows whatever size she gives the price. Only when there IS an old price: nothing is reserved otherwise. */ .buybox-head .buybox-price:has(.price-sub) { margin-bottom: 1.4em; } /* The other way round, her word 14 Oct 2026: the breadcrumb keeps its own size — the --tiny ladder, 7.5 on a phone, 10 on a pad, 12 on a desktop — and the panel band's line, "Hover a panel on a computer · tap one on a phone", follows IT. */ @media (min-width: 1025px) { .pnl .pnl-foot[class] { font-size: 12px; } } @media (min-width: 701px) and (max-width: 1024px) { .pnl .pnl-foot[class] { font-size: 10px; } } @media (max-width: 700px) { .pnl .pnl-foot[class] { font-size: 7.5px; } } /* "Ink: White" and its fellows — Type, Color, Size — read on a desktop at the same size they do on a pad: 10px (her word, 14 Oct 2026). They are one family of labels, so all four move together. */ @media (min-width: 1025px) { .buybox .opt .opt-name { font-size: 10px; } } /* the same reach as the rule above, or it is not heard */ /* The rest of the buy box reads on a desktop at the pad's size, 10px — the batch number at the top, the shirt's name under its picture, and the size guide's line (her word, 14 Oct 2026: "Batch design… until Size Guide… should all be same size sa Pad"). Each is written with the same reach as the rule it answers, or it is not heard. */ @media (min-width: 1025px) { .buybox .buybox-head .buybox-batch { font-size: 10px; } .buybox .fitbox .fitbox-name, .product .fitbox-name { font-size: 10px; } .buybox .chart-say { font-size: 10px; } } /* The gift cards sit the way they do on a phone — uneven, overlapping, one high and one low — on the pad and the desktop too; and on a desktop they are half as big again (her word, 14 Oct 2026: "Mas gusto ko ang placement ng [cards] on mobile. Mas maganda 'ung hindi siya pantay pantay. Gawin mo sa Pad and Desktop. Maliit pa ang sa Desktop gawin mong 50% bigger"). How far apart they stand is measured against the STAGE (cqw), not against the card, so making the cards bigger does not fling them off the sides — it makes them overlap more, which is the phone's own look. SHE SHOWED ME THE PICTURE SHE WANTS, 14 Oct 2026 ("GANITO NGA"): the whole phone composition, not only the lean of the cards. The pad and the desktop follow it below. */ /* The stage is a frame for the cards, not a band across the page, so it does not take the page's side margin — with it, the span the fan is measured against was 180px wide on a phone but 490 on a desktop, and the cards spread further apart the bigger the screen instead of keeping the phone's arrangement. The cards themselves are unaffected either way (they are measured against the padding box), so the phone does not move: 22.464% of its 250px stage is the same 56px it already had. */ .gcs .gcs-stage { aspect-ratio: 1.35; --k: .52; --sp: 53.5%; } .gcs .gcs-1 { transform: translate(-50%, -50%) translateX(calc(var(--sp) * -1)) translateY(6%) rotate(-9deg); } .gcs .gcs-2 { transform: translate(-50%, -50%) translateY(-42%); } .gcs .gcs-3 { transform: translate(-50%, -50%) translateX(var(--sp)) translateY(13.4%) rotate(9deg); } .gcs .gcs-stage:hover .gcs-1 { transform: translate(-50%, -50%) translateX(calc(var(--sp) * -1.13)) translateY(4%) rotate(-13deg); } .gcs .gcs-stage:hover .gcs-2 { transform: translate(-50%, -50%) translateY(-48%) scale(1.04); } .gcs .gcs-stage:hover .gcs-3 { transform: translate(-50%, -50%) translateX(calc(var(--sp) * 1.13)) translateY(11.4%) rotate(13deg); } /* THE PAD AND THE DESKTOP ARE LAID OUT LIKE THE PHONE (her picture, saved 2026-10-14 04:57). The fan goes on top, across the whole width, with the words centred under it — not squeezed into a column beside them. */ .gcs .gcs-in { grid-template-columns: 1fr; text-align: center; } .gcs .gcs-words p { margin-left: auto; margin-right: auto; } .gcs .gcs-picks { justify-content: center; } .gcs .gcs-stage { width: 100%; margin: 10px auto 0; order: -1; max-width: 520px; } /* On a desktop the cards are half as big again than they were on the Main page: 359px where they were 238 (her word: "Maliit pa ang sa Desktop gawin mong 50% bigger sa Main"). The card is .52 of the stage, so the stage is 690px — nothing about the fan itself changes, it is the phone's fan, bigger. */ /* THE DESKTOP KEEPS THE OLD LAYOUT — the words on the left, the cards on the right (her word, 14 Oct 2026: "for the Desktop Version of Gift Cards, same sa dati ang layout but the Cards should be like this, text on the left, Gift Cards on the right. At 50% bigger"). Only the fan itself is her picture. Saved 2026-10-14 05:15. --k .597 is what makes the card exactly half as big again as it was at every desktop width: 329px at 1400px wide, where it was 219. */ @media (min-width: 1025px) { .gcs .gcs-in { grid-template-columns: 1fr 1.45fr; text-align: left; } .gcs .gcs-words p { margin-left: 0; margin-right: 0; } .gcs .gcs-picks { justify-content: flex-start; } /* 50% bigger means the fan is wider than the column it sits in — it has to spill somewhere, and 46px to the right keeps the left-hand card off the paragraph while the spare room on the right takes the rest. */ .gcs .gcs-stage { order: 0; max-width: none; width: 100%; margin: 0 0 0 46px; --k: .597; } } /* The giant GIFT is pinned to the middle of the SECTION, so the moment the fan moves to the top the word lands behind the headline instead of behind the cards — the very fault she caught on a phone, 10 Oct ("pangit na nakapatong ang text sa GIFT sa likod"). So above 700px it is drawn on the stage as well, measured against the stage: 120cqw is the 300px she chose for the phone's 250px stage, carried up. The phone's own rule is untouched. */ @media (min-width: 701px) { .gcs .gcs-stage { --ghost: 148.6cqw; } .gcs .gcs-ghost { display: none; } .gcs .gcs-stage::before { content: attr(data-ghost); position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 400 var(--ghost)/.8 'Anton', sans-serif; letter-spacing: -.01em; color: transparent; -webkit-text-stroke: .5cqw color-mix(in srgb, var(--ink) 14%, transparent); white-space: nowrap; pointer-events: none; } .gcs .gcs-glow { z-index: 1; } .gcs .gcs-card { z-index: 2; } .gcs .gcs-2 { z-index: 3; } .gcs .gcs-3 { z-index: 4; } } /* after the block above, or it would win on a desktop too */ @media (min-width: 1025px) { .gcs .gcs-stage { --ghost: 199.6cqw; } } /* ------------------------------------------------ the policy pages' text ---- Her word, 14 Oct 2026, last: "12" (after "Make 10 then."). The content — paragraphs, lists, the small headings — is 12px; the Last Updated line stays 7.5px. This file loads last, so the number lives here — a 10 left here overruled every later change to store.css. */ .typewriter { font-size: 15px; } /* 15 on all three policy pages, her word 14 Oct 2026 */ .typewriter h3 { font-size: 15px; text-transform: uppercase; text-align: center; text-decoration: underline; text-underline-offset: 4px; } /* the small headings in capitals (her word, 14 Oct 2026) */ .typewriter .pp-updated { font-size: 7.5px; } /* How to Pay, at the Terms of Service's sizes (her word, 14 Oct 2026): the title at the policy pages' title size, the writing at their 15px. Only the sizes — no boxes. */ /* How to Pay and Shipping: the title dressed like Track My Order's again — no box, not in capitals — but kept at the Terms of Service size (her word, 14 Oct 2026) */ /* the titles of How to Pay, Shipping and Track My Order at 50px (her word, 14 Oct 2026) */ .page:is([data-page="payments"], [data-page="shipping"]) > h1.display, .status:has(.track-form) > h1.display { font-size: 50px; line-height: 1.1; } /* Checkout reads like Track my Order (her word, 14 Oct 2026): the 50px title, and its buttons at 15px */ .checkout .co-form > h1.display { font-size: 50px; line-height: 1.1; } .checkout-page main .btn { font-size: 15px; } .page[data-page="payments"] .post-body, .page[data-page="payments"] .post-body :is(p, li, b, strong, a) { font-size: 15px; } /* 100px of air above the first words and below the last on the plain pages — How to Pay, Shipping, Track My Order — as the three policy pages have (her word, 14 Oct 2026) */ .page:is([data-page="payments"], [data-page="shipping"]), .status:has(.track-form) { padding-top: 100px; padding-bottom: 100px; } .page:is([data-page="payments"], [data-page="shipping"]) .post-body { padding-bottom: 0; } .page:is([data-page="payments"], [data-page="shipping"]) .post-body > :last-child, .status:has(.track-form) > :last-child, .status:has(.track-form) .track-form > :last-child { margin-bottom: 0; } /* The cart reads at the Order Summary's sizes (her word, 14 Oct 2026): a design's name 15px, the subtotal line 15px — the summary's own figures, measured on the checkout. */ .drawer-panel [data-cart-lines] a:not(.btn) { font-size: 15px; line-height: 1.4; } .drawer-panel [data-cart-foot] .row span { font-size: 15px; } .drawer-panel [data-cart-foot] .row b { font: 600 15px var(--mono-price, 'Space Grotesk'), ui-monospace, sans-serif; } /* ------------------------------------------------- the forum topic question ---- Her word, 14 Oct 2026: a question under the email and the number, an essay box, and a line under it. The question is a long one, so it is given back some of the air the short labels can afford to spend on letter-spacing. */ .dds-form .dds-ask { letter-spacing: .1em; line-height: 1.5; } .dds-form .dds-ask textarea { padding: 13px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; font: 400 16px var(--body); resize: vertical; min-height: 110px; } .dds-form .dds-ask textarea::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); } .dds-form .dds-note { margin: -4px 0 2px; font: 600 var(--tiny) var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .62; line-height: 1.6; }