/* Theme Name: Colourful Smells Theme URI: https://colourfulsmells.com Author: Colourful Smells Description: Ročno vlito. Flat colour, hard borders, no gradients. WooCommerce ready. Version: 2.30.0 Requires at least: 6.4 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: cs */ /* ============================================================================ CONTENTS 01 Tokens 02 Reset & base 03 Typography 04 Layout primitives 05 Buttons 06 Header 07 Marquee 08 Hero 09 Collections 10 Bands (formats / steps) 11 Product cards 12 Roulette 13 Accordions 14 Newsletter 15 Footer 16 WooCommerce — shop archive 17 WooCommerce — single product 18 WooCommerce — variation picker 19 WooCommerce — blocks (cart, checkout, my account) 20 Responsive 21 Motion & print HOUSE RULES - No gradients. Flat fills only. - Border radius never above 2px. - Shadows are hard offsets, never blurred. - Borders are 3px solid black. - Lime is a background for black text, never lime text on white. ABOUT !important Used only against CSS that WordPress or WooCommerce generates at runtime and prints after this file — block layout rules, woocommerce-layout.css, and Woo Blocks. Every instance is commented with what it overrides. Nowhere else. GRID SIZING Tracks are minmax(min(100%, Npx), 1fr) with auto-FILL. - min(100%, Npx): a track can never demand more width than its container, so a grid cannot cause horizontal overflow at any screen size. - auto-fill keeps empty tracks. auto-fit collapses them and lets leftover items expand — which is how two products on a last row ended up half a page wide each. ========================================================================= */ /* ============================================================================ 01 TOKENS ========================================================================= */ :root{ /* Palette */ --cs-black:#0E0E10; --cs-pink:#FF2E88; --cs-lime:#D4FF3F; --cs-blue:#2B4CFF; --cs-violet:#9B4DFF; --cs-orange:#FF6B1A; --cs-paper:#FFF0F6; --cs-white:#FFFFFF; --cs-ink-soft:#45454E; /* Type. Archivo is variable: wdth 62–125, wght 100–900. Three settings cover the whole site — don't invent more. */ --cs-font:'Archivo',system-ui,-apple-system,sans-serif; --cs-mono:'Roboto Mono',ui-monospace,monospace; --cs-vf-hero:'wdth' 72,'wght' 900; --cs-vf-head:'wdth' 84,'wght' 800; --cs-vf-ui:'wdth' 82,'wght' 900; /* Shape */ --cs-border:3px solid var(--cs-black); --cs-radius:2px; --cs-shadow:5px 5px 0 var(--cs-black); --cs-shadow-light:5px 5px 0 var(--cs-white); --cs-shadow-lg:7px 7px 0 var(--cs-black); /* Rhythm */ --cs-max:1240px; --cs-pad:20px; --cs-gap:18px; --cs-ease:.15s ease; } /* Collection colours, keyed to category slug. New collection = one line here + one in cs_collection_slugs(). */ .cs-col--mir {background:var(--cs-violet);color:var(--cs-white)} .cs-col--fokus {background:var(--cs-lime);color:var(--cs-black)} .cs-col--zate {background:var(--cs-orange);color:var(--cs-black)} /* ============================================================================ 02 RESET & BASE ========================================================================= */ *,*::before,*::after{box-sizing:border-box} /* overflow-x on both elements. Without it, one oversized or rotated child makes the document wider than the window — and then every full-width section stretches to the document width, which is what made card grids compute four columns inside a 320px screen. */ html{overflow-x:hidden;max-width:100%} body{ margin:0; max-width:100%; overflow-x:hidden; background:var(--cs-pink); color:var(--cs-black); font-family:var(--cs-font); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; } img,svg,video,iframe{max-width:100%;height:auto;display:block} a{color:inherit} button{font-family:inherit} .screen-reader-text{ position:absolute;width:1px;height:1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; } .cs-skip:focus{ position:fixed;top:8px;left:8px;z-index:999; width:auto;height:auto;clip:auto; background:var(--cs-black);color:var(--cs-lime);padding:10px 14px; } /* Anchor targets sit under the sticky header without this. The offset is the header height plus a little breathing room, so #priljubljeni and friends land with the section heading visible. Available anchors: #kolekcije #priljubljeni #rulet #oblike #kako #faq */ html{scroll-behavior:smooth} [id]{scroll-margin-top:110px} @media (max-width:700px){ [id]{scroll-margin-top:96px} } /* ============================================================================ 03 TYPOGRAPHY ========================================================================= */ h1,h2,h3,h4{margin:0;text-transform:uppercase;letter-spacing:-.03em} h1{font-variation-settings:var(--cs-vf-hero);font-size:clamp(38px,7.2vw,94px);line-height:.92} h2{font-variation-settings:'wdth' 74,'wght' 900;font-size:clamp(28px,5vw,56px);line-height:.94} h3{font-variation-settings:var(--cs-vf-head);font-size:20px;line-height:1.05;letter-spacing:-.015em} p{margin:0 0 1em} p:last-child{margin-bottom:0} .cs-mono{ font-family:var(--cs-mono);font-size:11px;font-weight:500; letter-spacing:.1em;text-transform:uppercase; } /* ============================================================================ 04 LAYOUT PRIMITIVES Sections are full-bleed colour bands with a centred content column. The column is centred on the SECTION — not by giving children auto margins, because any child with its own narrower max-width (the hero headline at 17ch, the sub-card at 46ch) would then be centred instead of sitting at the column's left edge. ========================================================================= */ .cs-wrap{ width:100%;max-width:var(--cs-max); margin:0 auto;padding:0 var(--cs-pad); } .cs-hero, .cs-section, .cs-news{ display:grid; grid-template-columns:minmax(0,min(var(--cs-max),100%)); justify-content:center; padding-left:var(--cs-pad); padding-right:var(--cs-pad); max-width:100vw; overflow-x:clip; /* contains tilted children without a scroll container */ } .cs-section{padding-top:56px;padding-bottom:64px;border-bottom:var(--cs-border)} .cs-section--paper{background:var(--cs-paper)} .cs-section--white{background:var(--cs-white)} .cs-section--lime {background:var(--cs-lime)} /* WordPress prints `.wp-container-xxxx > * { margin-inline: auto }` for any group using constrained layout. That selector carries a per-block hash, so it can't be targeted directly — this is the override. */ .cs-hero > *, .cs-section > *, .cs-news > *{ margin-left:0 !important; margin-right:0 !important; max-width:none !important; } .cs-section > h2{max-width:20ch;margin-bottom:30px !important} .cs-sechead{ display:flex;flex-wrap:wrap;gap:16px; align-items:flex-end;justify-content:space-between; margin-bottom:30px; } /* ============================================================================ 05 BUTTONS core/button puts custom classes on the wrapper
, not on the . The theme moves them onto the link at render time (inc/blocks.php), so here the wrapper only needs neutralising — otherwise you get a button drawn inside a button. ========================================================================= */ .cs-btn, a.cs-btn, .wp-block-button__link{ display:inline-block; font-family:var(--cs-font); font-variation-settings:var(--cs-vf-ui); font-size:17px;line-height:1.2; text-transform:uppercase;text-decoration:none; background:var(--cs-black);color:var(--cs-lime); border:var(--cs-border);border-radius:var(--cs-radius); padding:11px 16px;cursor:pointer; box-shadow:var(--cs-shadow-light); transition:transform var(--cs-ease),box-shadow var(--cs-ease); } .cs-btn:hover, .wp-block-button__link:hover{ background:var(--cs-black);color:var(--cs-lime); transform:translate(3px,3px);box-shadow:2px 2px 0 var(--cs-white); } .cs-btn:focus-visible, .wp-block-button__link:focus-visible{outline:3px solid var(--cs-blue);outline-offset:3px} .cs-btn--alt, a.cs-btn--alt, .wp-block-button__link.cs-btn--alt{ background:var(--cs-white);color:var(--cs-black); box-shadow:var(--cs-shadow); } .cs-btn--alt:hover, .wp-block-button__link.cs-btn--alt:hover{ background:var(--cs-white);color:var(--cs-black); box-shadow:2px 2px 0 var(--cs-black); } /* On white or paper the white offset shadow would be invisible. */ .cs-section--white .cs-btn, .cs-section--paper .cs-btn, .cs-section--white .wp-block-button__link, .cs-section--paper .wp-block-button__link{box-shadow:var(--cs-shadow)} .cs-section--white .cs-btn:hover, .cs-section--paper .cs-btn:hover, .cs-section--white .wp-block-button__link:hover, .cs-section--paper .wp-block-button__link:hover{box-shadow:2px 2px 0 var(--cs-black)} .wp-block-button{ background:none;border:0;box-shadow:none; padding:0;border-radius:0;font-size:inherit; } .wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} .wp-block-buttons > .wp-block-button{margin:0} /* ============================================================================ 06 HEADER ========================================================================= */ .cs-ship{ background:var(--cs-black);color:var(--cs-lime); text-align:center;padding:8px var(--cs-pad); } .cs-ship span{ display:block; font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.1em;text-transform:uppercase; /* One line at any width. The mono face plus wide tracking is what pushed this to two rows on narrow screens; the size and tracking come down rather than the text wrapping. */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .cs-header{ position:sticky;top:0;z-index:80; background:var(--cs-lime);border-bottom:var(--cs-border); } .cs-bar{ display:flex;align-items:stretch;justify-content:space-between; max-width:var(--cs-max);margin:0 auto; min-width:0; } /* The wordmark may shrink; the nav, burger and cart may not. */ .cs-bar > .cs-mark{flex:0 1 auto;min-width:0} .cs-bar > .cs-nav, .cs-bar > .cs-cart, .cs-bar > .cs-burger, .cs-bar > .cs-nav-setup{flex:0 0 auto} .cs-mark{ display:flex;align-items:center;gap:8px; padding:12px var(--cs-pad); font-variation-settings:'wdth' 78,'wght' 900; font-size:19px;text-transform:uppercase;letter-spacing:-.01em; text-decoration:none;white-space:nowrap; } .cs-mark b{ display:inline-block;padding:1px 6px; background:var(--cs-black);color:var(--cs-lime);transform:rotate(-2deg); } /* Desktop: height drives the size, width follows. A max-width here becomes the binding constraint on a wide horizontal lockup (aspect ~12:1) and shrinks it to ~20px tall, which is what made the wordmark look tiny. The width cap is only needed on phones, where the burger and cart need room. */ .cs-mark{min-width:0} .cs-mark img, .cs-mark__img{ height:34px !important; width:auto !important; max-width:none; display:block; } @media (max-width:820px){ .cs-mark img, .cs-mark__img{ height:auto !important; max-height:30px; max-width:min(300px,46vw); object-fit:contain; } } @media (max-width:700px){ .cs-mark{padding:8px 10px} .cs-mark img, .cs-mark__img{max-height:24px;max-width:42vw} } @media (max-width:400px){ .cs-mark{padding:8px} .cs-mark img, .cs-mark__img{max-height:20px;max-width:38vw} } @media (max-width:430px){ .cs-ship span{font-size:8.5px;letter-spacing:.02em} } @media (max-width:400px){ .cs-mark{padding:8px} .cs-mark img, .cs-mark__img{max-height:18px;max-width:36vw} } .cs-nav{display:flex;align-items:stretch} .cs-nav ul{display:flex;align-items:stretch;list-style:none;margin:0;padding:0} .cs-nav li{display:flex;align-items:stretch} /* The links must fill the bar's height, or the black dividers between them render as short stubs floating in the lime. align-self:stretch rather than height:100% — `align-items:stretch` only stretches items whose height is auto, so setting an explicit height opts the element OUT of stretching and it shrinks to its text. */ .cs-nav a, .cs-cart, .cs-burger, .cs-nav-setup{ display:flex;align-items:center; align-self:stretch; padding:0 15px; border:0;border-left:var(--cs-border); background:transparent; font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;text-decoration:none; white-space:nowrap;cursor:pointer; } .cs-nav a:hover, .cs-nav-setup:hover{background:var(--cs-black);color:var(--cs-lime)} .cs-nav a:focus-visible{outline:3px solid var(--cs-pink);outline-offset:-6px} /* The cart is a direct child of .cs-bar, not inside the nav list, so it needs its own stretch. It's also replaced wholesale by Woo's cart fragments on every add-to-cart, which is why it must not depend on anything but its own class to size correctly. */ .cs-bar > .cs-cart, a.cs-cart{ align-self:stretch; display:flex;align-items:center; min-height:100%; background:var(--cs-black);color:var(--cs-lime); } .cs-cart:hover{background:var(--cs-pink);color:var(--cs-black)} .cs-burger{display:none} /* ============================================================================ 07 MARQUEE Two identical sets; the animation shifts by -50%, which is exactly one set, so the second lands where the first began. The shortcode repeats the phrase list enough times to overflow any screen — a short list would otherwise have to stretch, leaving big holes between phrases. ========================================================================= */ .cs-marq{ background:var(--cs-black);color:var(--cs-lime); border-top:var(--cs-border);border-bottom:var(--cs-border); padding:10px 0;overflow:hidden;max-width:100vw; } .cs-marq__in{ display:flex;width:max-content; animation:cs-slide 42s linear infinite; will-change:transform; } .cs-marq__set{ display:flex;align-items:center;flex:0 0 auto; gap:26px;padding-right:26px; width:max-content; /* Each set must be at least one screen wide, or translating by -50% leaves a gap. `min-width:100%` cannot do this: the parent is sized max-content, so a percentage resolves against an indefinite width and is ignored. 100vw is definite. The parent clips overflow, so this can't widen the document. The shortcode also repeats the phrase list enough times that the natural width usually exceeds this anyway — which is what keeps the spacing tight instead of stretched. */ min-width:100vw; white-space:nowrap; } .cs-marq__set span{ font-variation-settings:'wdth' 80,'wght' 800; font-size:16px;text-transform:uppercase;white-space:nowrap; } .cs-marq:hover .cs-marq__in{animation-play-state:paused} @keyframes cs-slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ============================================================================ 08 HERO ========================================================================= */ .cs-hero{position:relative;padding-top:54px;padding-bottom:60px} .cs-hero > h1{max-width:17ch;margin:0 !important} /* !important: §04 */ .cs-hero mark{ display:inline-block;padding:0 .1em; background:var(--cs-lime);color:var(--cs-black); transform:rotate(-1.2deg); } .cs-hero .cs-out{ display:inline-block; -webkit-text-stroke:2.5px var(--cs-black);color:transparent; } .cs-hero > .cs-hero__sub{ max-width:46ch; margin:26px 0 0 !important; /* !important: §04 */ padding:14px 16px; background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); font-size:19px;font-weight:500;line-height:1.4; transform:rotate(-.5deg);transform-origin:left center; } .cs-hero > .wp-block-buttons{margin-top:26px !important;justify-content:flex-start} .cs-stickers{position:absolute;inset:0;pointer-events:none;display:none} .cs-stk{ position:absolute;padding:7px 10px; background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } .cs-stk:nth-child(1){top:9%;right:4%;transform:rotate(7deg);background:var(--cs-lime)} .cs-stk:nth-child(2){top:36%;right:10%;transform:rotate(-6deg);background:var(--cs-blue);color:var(--cs-white)} .cs-stk:nth-child(3){top:60%;right:2%;transform:rotate(3deg);background:var(--cs-orange)} .cs-stk:nth-child(4){top:80%;right:15%;transform:rotate(-9deg)} /* ============================================================================ 09 COLLECTIONS A solid band: no gap, no margins, one black rule between blocks. Flex so they wrap on container width; the divider moves from right edge to bottom edge once they stack. ========================================================================= */ .cs-cols{border-bottom:var(--cs-border);overflow:hidden;max-width:100vw} .cs-colgrid{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0} .cs-col{ flex:1 1 300px;min-width:0;max-width:100%; display:flex;flex-direction:column; position:relative;overflow:hidden; padding:44px 26px 40px;min-height:340px; border-right:var(--cs-border); text-decoration:none; transition:transform var(--cs-ease); } .cs-col:last-child{border-right:0} .cs-col:hover{transform:translateY(-4px)} .cs-col:focus-visible{outline:4px solid var(--cs-black);outline-offset:-8px} .cs-col > *{position:relative;z-index:1} .cs-col__img{ position:absolute;inset:0;z-index:0; width:100%;height:100%;object-fit:cover; opacity:.14;pointer-events:none; } .cs-col__kicker{ font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;opacity:.75; } .cs-col h2{ font-variation-settings:'wdth' 70,'wght' 900; font-size:clamp(42px,5.6vw,70px);line-height:.9;letter-spacing:-.035em; margin:10px 0 14px; } .cs-col p{font-size:16px;font-weight:500;max-width:26ch} .cs-col__list{ margin-top:auto;padding-top:20px; font-family:var(--cs-mono);font-size:11px;line-height:1.9; letter-spacing:.03em;opacity:.85; } .cs-col__go{ align-self:flex-start;margin-top:16px;padding-bottom:2px; font-variation-settings:var(--cs-vf-head);font-size:15px;text-transform:uppercase; border-bottom:3px solid currentColor; } /* ============================================================================ 10 BANDS — [cs_formats] and [cs_steps] These shortcodes render their own markup rather than nested group blocks, so no WordPress layout class can compete with the theme's own layout. ========================================================================= */ .cs-band{ display:block;width:100%;max-width:100vw; padding:56px var(--cs-pad) 64px; border-bottom:var(--cs-border); overflow-x:clip; } .cs-band--white{background:var(--cs-white)} .cs-band--lime {background:var(--cs-lime)} .cs-band--paper{background:var(--cs-paper)} .cs-band__inner{width:100%;max-width:var(--cs-max);margin:0 auto} .cs-band__title{ font-variation-settings:'wdth' 74,'wght' 900; font-size:clamp(28px,5vw,56px);line-height:.94; letter-spacing:-.03em;text-transform:uppercase; max-width:20ch;margin:0 0 32px; } /* Lead paragraph under a section heading. */ .cs-band__lead, .cs-roul__lead{ max-width:56ch;margin:-18px 0 30px; font-size:17px;font-weight:500;color:var(--cs-ink-soft); } .cs-roul__lead{color:rgba(255,255,255,.9);margin:14px 0 0;max-width:44ch} .cs-section > .cs-band__lead{margin:-18px 0 30px !important} /* !important: §04 */ .cs-tile p + p{margin-top:.6em} .cs-tiles{display:flex;flex-wrap:wrap;gap:var(--cs-gap);width:100%} .cs-tile{ flex:1 1 210px;min-width:0;max-width:100%; padding:20px 18px 22px; background:var(--cs-paper); border:var(--cs-border);border-radius:var(--cs-radius); } .cs-tiles--steps .cs-tile{flex:1 1 240px;background:var(--cs-white);position:relative} /* A format card that links into the filtered shop. */ .cs-tile--link{ display:flex;flex-direction:column;text-decoration:none; transition:transform var(--cs-ease),box-shadow var(--cs-ease); } .cs-tile--link:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--cs-black)} .cs-tile--link:focus-visible{outline:3px solid var(--cs-blue);outline-offset:3px} .cs-tile--link .cs-tile__go{ align-self:flex-start;margin-top:auto;padding-top:14px; font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; border-bottom:3px solid var(--cs-black);color:var(--cs-black); } .cs-tile--link:hover .cs-tile__go{background:var(--cs-black);color:var(--cs-lime)} @media (max-width:700px){ .cs-tile--link:hover{transform:none;box-shadow:none} } .cs-tile h3{margin:0 0 8px} .cs-tile p{font-size:15px;color:var(--cs-ink-soft)} /* A label, not a button — flat highlight, no border, no pointer cursor. */ .cs-tile__who, .cs-who{ display:inline-block;margin-top:14px;padding:3px 6px; background:var(--cs-lime);color:var(--cs-black); font-family:var(--cs-mono);font-size:10px;font-weight:700; letter-spacing:.07em;text-transform:uppercase; cursor:default; } .cs-tile__num{ display:inline-block;margin:0 0 10px;padding:2px 8px; background:var(--cs-pink);border:var(--cs-border); font-variation-settings:'wdth' 88,'wght' 900;font-size:16px; transform:rotate(-3deg); } /* The fourth step. The heading says three, so this one is the joke — it reads as part of the sequence but is the link out to the explainer. Inverted colours so it's obviously a different kind of thing. */ .cs-tile--bonus{ display:flex;flex-direction:column; background:var(--cs-black) !important; color:var(--cs-white); text-decoration:none; transition:transform var(--cs-ease),box-shadow var(--cs-ease); } .cs-tile--bonus:hover, .cs-tile--bonus:focus-visible{ transform:translate(-3px,-3px); box-shadow:6px 6px 0 var(--cs-black); } .cs-tile--bonus:focus-visible{outline:3px solid var(--cs-blue);outline-offset:3px} .cs-tile--bonus .cs-tile__num{ background:var(--cs-lime);color:var(--cs-black); border-color:var(--cs-black); /* The card is a flex column, so a block child stretches to full width. Hug the text like the other three badges do. */ align-self:flex-start; width:auto; } .cs-tile--bonus h3{color:var(--cs-lime)} .cs-tile--bonus p{color:#C9C9D2} .cs-tile__go{ display:inline-block;align-self:flex-start; margin-top:auto;padding-top:14px; font-variation-settings:var(--cs-vf-head); font-size:15px;text-transform:uppercase;letter-spacing:-.01em; color:var(--cs-lime); border-bottom:3px solid var(--cs-lime); } .cs-tile--bonus:hover .cs-tile__go{background:var(--cs-lime);color:var(--cs-black)} /* ============================================================================ 11 PRODUCT CARDS One card design. The homepage shortcode, the shop archive and related products all render through cs_render_product_card(), so the design can never drift between them. ========================================================================= */ /* Standalone: a [cs_products] shortcode dropped straight onto a page has no section around it, so it needs its own centred column — otherwise it runs the full width of the body. */ .cs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:var(--cs-gap); list-style:none; max-width:var(--cs-max); margin:34px auto; padding:0 var(--cs-pad); } /* Inside a section or band the column already exists — don't inset twice. */ .cs-section .cs-grid, .cs-band .cs-grid, .cs-page .cs-grid{max-width:none;margin:0;padding:0} .cs-card{ display:flex;flex-direction:column; min-width:0;max-width:100%; position:relative;overflow:hidden; background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); transition:transform var(--cs-ease),box-shadow var(--cs-ease); } .cs-card:hover, .cs-card:focus-within{transform:translateY(-5px);box-shadow:var(--cs-shadow-lg)} .cs-card__media{ position:relative;flex:none; aspect-ratio:4/3;overflow:hidden; background:var(--cs-paper);border-bottom:var(--cs-border); } .cs-card__media img{width:100%;height:100%;object-fit:cover} .cs-card__tag{ position:absolute;left:9px;top:9px;z-index:2;padding:3px 6px; background:var(--cs-black);color:var(--cs-white); font-family:var(--cs-mono);font-size:10px;font-weight:700; letter-spacing:.09em;text-transform:uppercase; } .cs-card__flag{ position:absolute;right:-4px;bottom:8px;z-index:2;padding:3px 7px; background:var(--cs-lime);border:var(--cs-border); font-family:var(--cs-mono);font-size:10px;font-weight:700; letter-spacing:.05em;text-transform:uppercase; transform:rotate(-4deg); } .cs-card__body{flex:1 1 auto;display:flex;flex-direction:column;padding:14px 14px 16px} .cs-card__body h3{font-size:18px} .cs-card__body h3 a{text-decoration:none} .cs-card__body h3 a::after{content:"";position:absolute;inset:0} /* whole card clickable */ .cs-card__joke{margin:7px 0 0;font-size:14px;font-style:italic;color:var(--cs-ink-soft)} .cs-card__foot{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:8px;row-gap:8px; margin-top:auto;padding-top:11px;border-top:var(--cs-border); } .cs-card__price{ flex:1 1 auto;min-width:0; font-variation-settings:'wdth' 86,'wght' 900; font-size:16px;line-height:1.25; } .cs-card__price del{opacity:.45;font-size:14px;margin-right:5px} .cs-card__price ins{text-decoration:none} .cs-add{ flex:0 0 auto;white-space:nowrap;position:relative;z-index:3; padding:7px 9px;cursor:pointer;text-decoration:none; background:var(--cs-black);color:var(--cs-lime); border:0;border-radius:var(--cs-radius); font-family:var(--cs-mono);font-size:10px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } .cs-add:hover{background:var(--cs-pink);color:var(--cs-black)} .cs-add.loading{opacity:.6} .cs-add.added::after{content:" ✓"} /* ============================================================================ 12 ROULETTE ========================================================================= */ .cs-roul{ background:var(--cs-blue);color:var(--cs-white); border-bottom:var(--cs-border); padding:52px var(--cs-pad); max-width:100vw;overflow-x:clip; } .cs-roul__box{ display:flex;flex-wrap:wrap;gap:26px; align-items:center;justify-content:space-between; } .cs-roul h2{max-width:14ch} .cs-roul__out{ display:block;min-width:min(300px,100%); padding:18px 20px;text-decoration:none; background:var(--cs-white);color:var(--cs-black); border:var(--cs-border);border-radius:var(--cs-radius); transform:rotate(1deg); } .cs-roul__pick{ margin:6px 0 5px; font-variation-settings:var(--cs-vf-ui); font-size:28px;line-height:1.02;text-transform:uppercase; } .cs-roul__why{margin:0;font-size:14px;color:var(--cs-ink-soft)} .cs-roul__kol{ display:inline-block;margin-top:10px;padding:2px 7px; background:var(--cs-lime);border:2px solid var(--cs-black); font-family:var(--cs-mono);font-size:10px;font-weight:700; letter-spacing:.09em;text-transform:uppercase; } /* ============================================================================ 13 ACCORDIONS — FAQ and product details ========================================================================= */ .cs-acc{padding:34px 0 10px;margin-top:20px} .cs-q, details.wp-block-details.cs-q{ margin-top:14px; background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); } .cs-q:first-child{margin-top:0} .cs-q summary{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 16px;cursor:pointer;list-style:none; font-variation-settings:var(--cs-vf-head); font-size:18px;text-transform:uppercase;letter-spacing:-.01em; } .cs-q summary::-webkit-details-marker{display:none} .cs-q summary::after{content:"+";font-family:var(--cs-mono);font-weight:700;font-size:22px} .cs-q[open] summary::after{content:"–"} .cs-q[open] summary{background:var(--cs-lime);border-bottom:var(--cs-border)} .cs-q summary:focus-visible{outline:3px solid var(--cs-blue);outline-offset:-6px} .cs-q > p, .cs-q__in{padding:14px 16px;margin:0;font-size:15px;color:var(--cs-ink-soft);text-align:left} .cs-q__in p{padding:0;margin:0 0 .7em} .cs-q__in p:last-child{margin:0} .cs-q__in ul, .cs-q__in ol{margin:8px 0 0 20px} .cs-q__in li{margin-bottom:8px} /* ============================================================================ 14 NEWSLETTER ========================================================================= */ .cs-news{ background:var(--cs-violet);color:var(--cs-white); border-bottom:var(--cs-border); padding-top:52px;padding-bottom:52px; } .cs-news__row{ display:flex;flex-wrap:wrap;gap:26px; align-items:flex-end;justify-content:space-between; } .cs-news h2{max-width:16ch} .cs-signup{ display:flex;width:100%;max-width:400px; background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); } .cs-signup input{ flex:1;min-width:0;border:0;background:transparent;color:var(--cs-black); font-family:var(--cs-mono);font-size:13px;padding:12px; } .cs-signup input:focus{outline:3px solid var(--cs-lime);outline-offset:-3px} .cs-signup button{ padding:0 16px;cursor:pointer; background:var(--cs-lime);color:var(--cs-black); border:0;border-left:var(--cs-border); font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } .cs-signup button:hover{background:var(--cs-pink)} /* ============================================================================ 15 FOOTER ========================================================================= */ .cs-footer{background:var(--cs-black);color:var(--cs-white);padding:48px 0 34px} .cs-footgrid{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between} .cs-footer h4{ margin:0 0 12px;color:var(--cs-lime); font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.1em;text-transform:uppercase; } .cs-footer ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2} .cs-footer a{text-decoration:none} .cs-footer a:hover{background:var(--cs-lime);color:var(--cs-black)} .cs-footer address{font-style:normal;font-size:14px;line-height:1.8;color:#C9C9D2} .cs-colophon{ display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between; margin-top:40px;padding-top:16px; border-top:3px solid #2C2C33;color:#8A8A96; } /* ============================================================================ 16 WOOCOMMERCE — SHOP ARCHIVE Woo's `ul.products` is a float grid with percentage widths and clearfix pseudo-elements. All of that has to be unwound before CSS grid can take over — that's what the !importants in this block are doing. ========================================================================= */ .woocommerce-page{background:var(--cs-paper)} .cs-shopwrap{max-width:var(--cs-max);margin:0 auto;padding:16px var(--cs-pad) 56px} /* Everything WooCommerce renders inside the wrapper must fill it. Woo's own stylesheet constrains several of these containers, and on the classic cart that made the page visibly narrower than the checkout beside it. Covers block markup too, in case either page is switched later. */ .cs-shopwrap > .woocommerce, .cs-shopwrap .woocommerce, .cs-shopwrap .woocommerce-cart-form, .cs-shopwrap .cart-collaterals, .cs-shopwrap .woocommerce-cart-form__contents, .cs-shopwrap .wp-block-woocommerce-cart, .cs-shopwrap .wp-block-woocommerce-checkout, .cs-shopwrap .wc-block-cart, .cs-shopwrap .wc-block-checkout{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; float:none !important; } /* The empty-cart message is a Woo template that centres itself narrow. */ .cs-shopwrap .cart-empty, .cs-shopwrap .return-to-shop{ max-width:none !important; margin-left:0 !important; text-align:left !important; } .woocommerce ul.products{ display:grid !important; /* over Woo's float grid */ grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)) !important; gap:var(--cs-gap) !important; list-style:none;margin:0 !important;padding:0 !important; } .woocommerce ul.products::before, .woocommerce ul.products::after{display:none !important} /* Woo clearfix */ .woocommerce ul.products > li.product{ width:auto !important; /* Woo sets % widths */ margin:0 !important;float:none !important; min-width:0;max-width:100%; display:flex;flex-direction:column; } /* Woo styles `li.product img` more specifically than .cs-card__media img, which let tall photos grow the media box and spill over the title. */ .woocommerce ul.products li.product .cs-card__media img{ width:100% !important;height:100% !important;object-fit:cover;margin:0; } .woocommerce .woocommerce-result-count{ font-family:var(--cs-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase; } .woocommerce .woocommerce-ordering select, .woocommerce select{ padding:9px 10px;background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); font-family:var(--cs-mono);font-size:12px; } .woocommerce nav.woocommerce-pagination ul{border:0;display:flex;gap:8px;justify-content:center} .woocommerce nav.woocommerce-pagination ul li{border:0;margin:0} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ padding:8px 12px;background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); font-family:var(--cs-mono);font-size:12px;font-weight:700; } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover{background:var(--cs-black);color:var(--cs-lime)} /* Notices are NOT scoped to .woocommerce: they appear on the homepage too, where the body has no woocommerce class. Prefixing these was why the default icon and grey button came back outside shop pages. */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ padding:14px 16px;margin:0 0 20px; list-style:none; display:flex;flex-wrap:wrap;align-items:center;gap:12px; background:var(--cs-lime);color:var(--cs-black); border:var(--cs-border);border-top-width:3px;border-radius:var(--cs-radius); font-size:15px; } .woocommerce-error{background:var(--cs-pink);color:var(--cs-white)} /* Woo positions a glyph absolutely at the left and pads the notice to make room for it. This design doesn't use the icon, and leaving it in drops the glyph on top of the first word. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before{display:none !important} .woocommerce-message li, .woocommerce-info li, .woocommerce-error li{list-style:none;margin:0;padding:0} .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button){color:inherit;font-weight:600} /* "Prikaži košarico" sits at the far end of the notice, styled like the rest of the site rather than Woo's grey pill. */ .woocommerce-message .button, .woocommerce-info .button{ order:2;margin-left:auto;float:none; padding:9px 14px;min-width:0; background:var(--cs-black) !important;color:var(--cs-lime) !important; border:var(--cs-border);border-radius:var(--cs-radius); font-family:var(--cs-font);font-variation-settings:var(--cs-vf-ui); font-size:14px;text-transform:uppercase;text-decoration:none; box-shadow:none; } .woocommerce-message .button:hover, .woocommerce-info .button:hover{background:var(--cs-pink) !important;color:var(--cs-black) !important} .woocommerce-error .button{ background:var(--cs-white) !important;color:var(--cs-black) !important; border:var(--cs-border);border-radius:var(--cs-radius); order:2;margin-left:auto;padding:9px 14px; } /* ============================================================================ 17 WOOCOMMERCE — SINGLE PRODUCT woocommerce-layout.css floats the gallery and summary and gives each `width: 48%`. Inside a grid cell that 48% is measured against the CELL, so the content sat in a narrow strip with dead space beside it. Both have to be forced back to full width. ========================================================================= */ .woocommerce div.product{ display:grid !important; /* over Woo's floats */ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:34px;align-items:start; } .woocommerce div.product::before, .woocommerce div.product::after{display:none !important} /* Woo clearfix */ .woocommerce div.product > .woocommerce-product-gallery, .woocommerce div.product > .summary{ grid-row:1;min-width:0; width:100% !important;max-width:100% !important; /* over Woo's 48% */ float:none !important;margin:0 !important; } /* Deliberately NOT position:sticky. A sticky element is constrained by its containing block — here the whole product grid, not its own row — so it scrolls down over the accordions and cross-sell band beneath it. */ .woocommerce div.product > .woocommerce-product-gallery{grid-column:1;align-self:start} .woocommerce div.product > .summary{grid-column:2} /* Everything Woo appends after the summary is also a grid child, so without this it gets dealt into the two columns instead of running full width. */ .woocommerce div.product > .cs-acc, .woocommerce div.product > .cs-cross, .woocommerce div.product > .related, .woocommerce div.product > .upsells, .woocommerce div.product > .woocommerce-tabs, .woocommerce div.product > .product_meta{grid-column:1 / -1} /* --- Gallery --- */ .woocommerce div.product .woocommerce-product-gallery__wrapper{ margin:0;overflow:hidden;background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); } .woocommerce div.product .woocommerce-product-gallery__image img{width:100%;height:auto} .woocommerce div.product .woocommerce-product-gallery__trigger{ top:12px;right:12px;width:38px;height:38px; display:flex;align-items:center;justify-content:center; background:var(--cs-lime);color:var(--cs-black); border:var(--cs-border);border-radius:var(--cs-radius); font-size:16px;text-indent:0; } .woocommerce div.product .flex-control-thumbs{ display:grid !important; /* over flexslider floats */ grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;margin:10px 0 0 !important;padding:0 !important;list-style:none; } .woocommerce div.product .flex-control-thumbs li{ width:auto !important;float:none !important;margin:0 !important; } .woocommerce div.product .flex-control-thumbs li img{ width:100% !important;height:auto !important; aspect-ratio:1/1;object-fit:cover;opacity:1;cursor:pointer; border:var(--cs-border);border-radius:var(--cs-radius); } .woocommerce div.product .flex-control-thumbs li img.flex-active{ outline:3px solid var(--cs-pink);outline-offset:2px; } /* --- Summary --- */ .cs-kol{ display:inline-block;padding:4px 9px;text-decoration:none; background:var(--cs-lime); border:var(--cs-border);border-radius:var(--cs-radius); font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.09em;text-transform:uppercase; transform:rotate(-1.5deg); } .cs-kol:hover{background:var(--cs-black);color:var(--cs-lime)} .woocommerce div.product .product_title{ margin:14px 0 0; font-variation-settings:'wdth' 74,'wght' 900; font-size:clamp(36px,5.4vw,62px);line-height:.92; } .cs-single__joke{ margin:12px 0 0;max-width:34ch; font-size:19px;font-style:italic;color:var(--cs-ink-soft); } /* The whole summary column reads left. Product descriptions often carry alignment from however they were written in the editor — centred body copy at this measure is hard to read and fights the rest of the page. !important because the alignment is inline on the content itself. */ .woocommerce div.product .summary, .woocommerce div.product .summary p, .woocommerce div.product .summary li, .woocommerce-product-details__short-description, .woocommerce-product-details__short-description *{text-align:left !important} .woocommerce-product-details__short-description{ margin-top:16px;max-width:60ch; font-size:16px;line-height:1.5; } .woocommerce-product-details__short-description p{margin:0 0 .8em} .woocommerce-product-details__short-description p:last-child{margin:0} /* Same for the description inside the accordion. */ .cs-q__in, .cs-q__in *{text-align:left !important} .woocommerce div.product p.price, .woocommerce div.product span.price{ margin:18px 0 0;color:var(--cs-black); font-variation-settings:'wdth' 86,'wght' 900;font-size:26px; } .woocommerce div.product .woocommerce-variation-price .price{font-size:34px;margin:0} .woocommerce div.product .stock{ color:var(--cs-black); font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.08em;text-transform:uppercase; } .woocommerce div.product .stock.out-of-stock{color:var(--cs-pink)} /* --- Buy row --- */ .woocommerce div.product form.cart{ display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin-top:20px; } .woocommerce div.product form.cart::before, .woocommerce div.product form.cart::after{display:none !important} .woocommerce div.product form.cart .quantity{ display:inline-flex;float:none;margin:0; background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); } .woocommerce div.product form.cart .quantity input.qty{ width:64px;padding:12px 4px;border:0;background:transparent;text-align:center; font-family:var(--cs-mono);font-size:16px;font-weight:700; } .woocommerce div.product form.cart .single_variation_wrap{width:100%} .woocommerce div.product .woocommerce-variation-add-to-cart{ display:flex;flex-wrap:wrap;align-items:stretch;gap:12px; } /* Woo's stylesheet loads after this file and its button colour would win. */ .woocommerce div.product form.cart button.single_add_to_cart_button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt{ background:var(--cs-black) !important; color:var(--cs-lime) !important; border:var(--cs-border);border-radius:var(--cs-radius); padding:13px 22px;min-width:210px; font-family:var(--cs-font);font-variation-settings:var(--cs-vf-ui); font-size:19px;text-transform:uppercase; box-shadow:var(--cs-shadow-light); transition:transform var(--cs-ease),box-shadow var(--cs-ease); } .woocommerce div.product form.cart button.single_add_to_cart_button:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{ transform:translate(3px,3px);box-shadow:2px 2px 0 var(--cs-white); } .woocommerce button.button.alt.disabled{opacity:.4;box-shadow:none;transform:none} .cs-freeship{margin-top:14px;font-size:14px;color:var(--cs-ink-soft)} .cs-freeship b{background:var(--cs-lime);padding:1px 5px;font-weight:500} .cs-freeship b .woocommerce-Price-amount{font-weight:500} /* --- Scent notes --- */ .cs-notes{ margin-top:26px;background:var(--cs-white); border:var(--cs-border);border-radius:var(--cs-radius); } .cs-notes__head{ padding:9px 14px;background:var(--cs-black);color:var(--cs-lime); font-family:var(--cs-mono);font-size:11px;font-weight:700; letter-spacing:.09em;text-transform:uppercase; } .cs-notes__rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .cs-notes__r{padding:14px;border-right:var(--cs-border)} .cs-notes__r:last-child{border-right:0} .cs-notes__r span{ display:block;color:var(--cs-ink-soft); font-family:var(--cs-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase; } .cs-notes__r b{ display:block;margin-top:4px; font-variation-settings:'wdth' 86,'wght' 800;font-size:17px;letter-spacing:-.01em; } /* --- Cross-sell band --- */ .cs-cross{ margin-top:48px;padding:44px 0; background:var(--cs-blue);color:var(--cs-white); border-top:var(--cs-border);border-bottom:var(--cs-border); } .cs-cross__row{ display:flex;flex-wrap:wrap;gap:26px; align-items:center;justify-content:space-between; } .cs-cross h2{font-size:clamp(26px,4vw,44px)} .cs-cross p{max-width:38ch;margin:10px 0 0} /* --- Related --- */ .woocommerce .related{ margin-top:0;padding:52px 0 60px;background:var(--cs-white); border-top:var(--cs-border);border-bottom:var(--cs-border); } .woocommerce .related > h2{ max-width:var(--cs-max);margin:0 auto 26px;padding:0 var(--cs-pad); font-variation-settings:'wdth' 74,'wght' 900;font-size:clamp(28px,4.4vw,50px); } .woocommerce .related ul.products{max-width:var(--cs-max);margin:0 auto;padding:0 var(--cs-pad)} /* ============================================================================ 18 WOOCOMMERCE — VARIATION PICKER Woo's real