/* ============================================================
   ACCREDO SHOP — sections of the shop pages
   Ported from the <style> block of design-reference/warm/shop/shop.html.
   The base design (header, footer, cards, cart drawer) lives in
   assets/css/neon.css.
   ============================================================ */

/* ----------  HOME HERO  ---------- */
.home-hero{ padding-top:96px; }
.hh-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.hh-main{ position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:clamp(420px,54vh,540px);
  display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(28px,3.5vw,48px); color:var(--hero-ink);
  background:var(--surface-2); box-shadow:var(--shadow); }
.hh-slide{ position:absolute; inset:0; background:center/cover no-repeat; opacity:0; transition:opacity 1.1s ease; }
.hh-slide.is-on{ opacity:1; animation:kenburns 7s ease-out forwards; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .hh-slide.is-on{ animation:none; } }
.hh-copy{ transition:opacity .45s ease, transform .45s ease; }
.hh-copy.is-out{ opacity:0; transform:translateY(10px); }
.hh-dots{ position:absolute; top:clamp(20px,2.5vw,30px); right:clamp(20px,2.5vw,30px); z-index:2; display:flex; gap:7px; }
.hh-dot{ width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer; background:oklch(1 0 0 / .45); transition:.3s; }
.hh-dot.on{ background:var(--accent); transform:scale(1.25); }
.hh-main::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, var(--hero-ov-1) 8%, var(--hero-ov-2) 50%, transparent 82%),
            linear-gradient(0deg, var(--hero-ov-1) 0%, transparent 46%); }
.hh-main > .hh-copy, .hh-main > .hh-dots{ position:relative; z-index:2; }
.hh-dots{ position:absolute; }
.hh-main .eyebrow{ color:var(--accent); }
.hh-main h1, .hh-main h2.h-hero{ color:var(--hero-ink); margin:14px 0 14px; }
.hh-main p{ color:var(--hero-dim); max-width:440px; }
.hh-side{ display:grid; grid-template-rows:1fr 1fr; gap:16px; }
.hh-promo{ position:relative; border-radius:var(--r-lg); overflow:hidden; padding:24px; display:flex; flex-direction:column;
  justify-content:flex-end; min-height:200px; color:var(--hero-ink); background:var(--surface-2) center/cover no-repeat;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease,cubic-bezier(.22,.61,.36,1)); }
.hh-promo::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(0deg, var(--hero-ov-1) 10%, transparent 70%); }
.hh-promo > *{ position:relative; z-index:1; }
.hh-promo:hover{ transform:translateY(-4px); }
.hh-promo h3{ color:var(--hero-ink); } .hh-promo .small{ color:var(--hero-dim); }
/* The two tiles are links now. The heading carries the real <a> — that is what
   a keyboard and a screen reader follow — and shop.js lets a click anywhere on
   the tile use it, the way the experience cards on the main site work. */
.hh-promo--link{ cursor:pointer; }
.hh-promo h3 a{ color:inherit; }
.hh-promo--link:hover h3 a{ color:var(--accent); }
@media(max-width:840px){ .hh-grid{ grid-template-columns:1fr; } .hh-side{ grid-template-columns:1fr 1fr; grid-template-rows:none; } }
@media(max-width:480px){ .hh-side{ grid-template-columns:1fr; } }

/* ----------  CATEGORIES  ---------- */
/* Eight categories: four per row, so the grid closes cleanly instead of
   leaving two orphans in a third row. */
.cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:1180px){ .cats{ grid-template-columns:repeat(3,1fr); } }
.catc{ position:relative; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; aspect-ratio:1/1.04;
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px; color:var(--hero-ink);
  background:var(--surface-2) center/cover no-repeat; transition:.35s var(--ease,cubic-bezier(.22,.61,.36,1)); }
/* The tiles carry the category description now, not just a name, so the copy
   reaches further up the picture than the prototype's gradient was cut for. */
.catc::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg, oklch(0.18 0.03 50 / .93) 44%, oklch(0.22 0.04 55 / .55) 72%, transparent 100%); }
.catc > *{ position:relative; z-index:1; }
.catc:hover{ border-color:var(--card-hover-border); transform:translateY(-4px); box-shadow:var(--glow,var(--shadow)); }
.catc h3{ color:var(--hero-ink); margin-bottom:3px; } .catc span{ color:var(--hero-dim); font-size:12.5px; font-weight:600; }
@media(max-width:840px){ .cats{ grid-template-columns:1fr 1fr; } }

/* Pictures in the shop sections live in core image blocks, like every media
   slot of the main site: the client swaps them by clicking and the alt text
   travels with the picture instead of sitting in a CSS background nobody can
   reach from the editor. Each slot fills itself with object-fit so the crop
   stays as designed.

   .catc and .hh-promo paint their gradient with ::after at z-index 0 and lift
   their own children to 1, so the picture goes to 0 as well and, being earlier
   in the source, stays under the gradient. */
.hh-slide .wp-block-image,
.hh-promo .wp-block-image,
.catc .wp-block-image,
.feat-band .wp-block-image{ position:absolute; inset:0; margin:0; }
.hh-slide .wp-block-image img,
.hh-promo .wp-block-image img,
.catc .wp-block-image img,
.feat-band .wp-block-image img{ width:100%; height:100%; object-fit:cover; }
.hh-promo .wp-block-image,
.catc .wp-block-image,
.feat-band .wp-block-image{ z-index:0; }

/* ----------  SECTION HEADING ROW  ---------- */
.shead-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:26px; }

/* ----------  BENEFITS  ---------- */
.ship{ display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.ship__c{ display:flex; gap:13px; align-items:center; padding:22px 24px; border-right:1px solid var(--line); }
.ship__c:last-child{ border-right:none; }
.ship__c svg{ width:25px; height:25px; color:var(--brand); flex:none; }
.ship__c b,.ship__c-title{ display:block; font-size:14px; } .ship__c span,.ship__c-text{ font-size:12px; color:var(--ink-3); }
@media(max-width:840px){ .ship{ grid-template-columns:1fr 1fr; } .ship__c:nth-child(-n+2){ border-bottom:1px solid var(--line); } .ship__c:nth-child(2){ border-right:none; } }
@media(max-width:480px){ .ship{ grid-template-columns:1fr; } .ship__c{ border-right:none; } }

/* ----------  CROSS-SELL BAND  ---------- */
.feat-band{ position:relative; border-radius:var(--r-lg); overflow:hidden; padding:clamp(34px,4.5vw,64px); text-align:center;
  color:var(--hero-ink); background:var(--surface-2) center/cover no-repeat; box-shadow:var(--shadow); }
.feat-band::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(0deg, var(--hero-ov-1), var(--hero-ov-2)); }
.feat-band > *{ position:relative; z-index:1; }
.feat-band h2{ color:var(--hero-ink); }
/* The band without a picture (shop-cta pattern) keeps the surface and the gradient. */
.feat-band--plain{ background-color:var(--surface-2); }

/* ----------  REVEAL FOR PATTERNS  ----------
   Same idea as on the main site: core blocks carry classes, not data
   attributes. */
.reveal, .reveal-stagger > *{ opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease,cubic-bezier(.16,1,.3,1)), transform .8s var(--ease,cubic-bezier(.16,1,.3,1)); }
.reveal.in, .reveal-stagger > *.in{ opacity:1; transform:none; }

/* ============================================================
   CATEGORY ARCHIVE
   Ported from the <style> block of shop/kategorija.html.
   ============================================================ */
.cat-top{ padding-top:96px; }
.cat-banner{ position:relative; border-radius:var(--r-lg); overflow:hidden; padding:clamp(28px,3.5vw,46px);
  display:flex; flex-direction:column; justify-content:flex-end; min-height:230px; color:var(--hero-ink);
  background:var(--surface-2) center/cover no-repeat; box-shadow:var(--shadow); }
.cat-banner::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(100deg, var(--hero-ov-1) 12%, var(--hero-ov-2) 60%, transparent 90%); }
.cat-banner > *{ position:relative; z-index:1; }
.cat-banner .eyebrow{ color:var(--accent); }
.cat-banner h1{ color:var(--hero-ink); margin-top:12px; }
.cat-banner p{ color:var(--hero-dim); margin-top:10px; max-width:56ch; }
/* The banner as blocks (shop-page-hero pattern): the picture is an image
   block behind the copy, under the gradient the banner paints itself. */
.cat-banner--page{ isolation:isolate; min-height:clamp(260px,32vw,380px); }
.cat-banner--page .wp-block-image{ position:absolute; inset:0; z-index:-1; margin:0; }
.cat-banner--page .wp-block-image img{ width:100%; height:100%; object-fit:cover; }
.cat-banner--page .crumb{ margin-bottom:0; }

/* Breadcrumb of category and product page; the product page had it slightly
   roomier, unified to 22px with wrapping. */
.crumb{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--ink-3); margin-bottom:22px; flex-wrap:wrap; }
.crumb a:hover{ color:var(--brand); } .crumb span{ opacity:.5; }

.cat-layout{ display:grid; grid-template-columns:248px 1fr; gap:32px; align-items:start; }
.filters{ position:sticky; top:84px; display:flex; flex-direction:column; gap:8px; }
.fgroup{ border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:18px 18px; }
.fgroup h4{ font-family:var(--font-display); font-weight:700; font-size:15px; text-transform:var(--head-case); letter-spacing:var(--head-ls); margin-bottom:13px; }
.fopt{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:14px; color:var(--ink-2); cursor:pointer; transition:.15s; }
.fopt:hover{ color:var(--ink); }
.fbox{ width:18px; height:18px; border:1.5px solid var(--line-2); border-radius:5px; display:grid; place-items:center; flex:none; transition:.18s; }
.fbox svg{ width:12px; height:12px; color:var(--on-accent); opacity:0; }
.fopt.on .fbox{ background:var(--brand); border-color:var(--brand); }
.fopt.on .fbox svg{ opacity:1; color:var(--on-brand); }
.fopt .cnt{ margin-left:auto; font-size:12px; color:var(--ink-3); }
/* Inside a category the list is the subtree. A child is indented under its
   parent by box plus gap, so its text starts where the parent's label does. */
.fopt--sub{ padding-left:calc(28px * var(--fdepth, 1)); }
/* The price slider used to be a bare input[type=range]: a bright blue native
   control, the one light element in a near-black panel. Both the track and the
   thumb are drawn here in the shop's own tokens. The two vendor blocks cannot
   be combined into one rule — a selector a browser does not know invalidates
   the whole rule, so ::-webkit- and ::-moz- have to stay apart. */
.price-range{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.price-range input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:22px;
  background:transparent; cursor:pointer; }
.price-range input[type="range"]:focus{ outline:none; }
.price-range input[type="range"]:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; border-radius:var(--r-pill); }

.price-range input[type="range"]::-webkit-slider-runnable-track{ height:5px; border-radius:var(--r-pill);
  background:var(--line-2); }
.price-range input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none;
  width:18px; height:18px; margin-top:-6.5px; border-radius:50%; background:var(--brand);
  border:2px solid var(--surface); box-shadow:0 0 0 1px var(--brand); transition:transform .15s; }
.price-range input[type="range"]:hover::-webkit-slider-thumb{ transform:scale(1.12); }

.price-range input[type="range"]::-moz-range-track{ height:5px; border-radius:var(--r-pill); background:var(--line-2); }
.price-range input[type="range"]::-moz-range-progress{ height:5px; border-radius:var(--r-pill); background:var(--brand); }
.price-range input[type="range"]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%;
  background:var(--brand); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--brand); }

.priceval{ font-size:13px; color:var(--ink-2); font-weight:600; margin-top:8px; }

.cat-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.cat-bar .count{ font-size:14px; color:var(--ink-3); }
.cat-bar .count b{ color:var(--ink); font-weight:700; }
.sortsel{ display:flex; align-items:center; gap:9px; }
.sortsel label{ font-size:13px; color:var(--ink-3); }
/* Without appearance:none the browser keeps drawing its own control on top: the
   text stayed black, the border stayed the system grey, the corners stayed
   square, and the native arrow sat next to the one this rule paints. On the
   dark catalogue that read as a light-theme control dropped into the page. */
.sortsel select{ -webkit-appearance:none; appearance:none;
  width:auto; padding:9px 34px 9px 13px; font-size:14px; font-weight:600; font-family:inherit;
  color:var(--ink); border:1.5px solid var(--line); border-radius:var(--r-sm); cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center/16px; }
.sortsel select:hover{ border-color:var(--line-2); }
.sortsel select:focus-visible{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent); }
/* The dropdown list is painted by the OS. Firefox and Chrome on Linux take
   these; without them the open list is white-on-white on the dark theme. */
.sortsel select option{ background:var(--surface); color:var(--ink); }

.fchips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.fchip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:7px 13px;
  border-radius:var(--r-pill); background:var(--brand-tint); color:var(--brand); }
.fchip a{ color:inherit; display:grid; place-items:center; opacity:.7; }
.fchip a:hover{ opacity:1; } .fchip svg{ width:13px; height:13px; }

.filt-toggle{ display:none; }
@media(max-width:880px){
  .cat-layout{ grid-template-columns:1fr; }
  .filters{ position:fixed; inset:0; top:auto; z-index:90; background:var(--bg); padding:22px; max-height:80vh; overflow-y:auto;
    border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:var(--shadow-lg); transform:translateY(100%); transition:transform .4s var(--ease,cubic-bezier(.22,.61,.36,1)); }
  .filters.is-open{ transform:none; }
  .filt-toggle{ display:inline-flex; }
}

/* Pagination in the design of the shop; the prototype had none. */
.spager{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:36px; }
.spager .page-numbers{ display:inline-grid; place-items:center; min-width:44px; height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); font-weight:600; font-size:15px; color:var(--ink-2); transition:.2s; }
.spager .page-numbers:hover{ border-color:var(--brand); color:var(--ink); }
.spager .page-numbers.current{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }

.no-results{ text-align:center; padding:60px 20px; color:var(--ink-3); }

/* ============================================================
   PRODUCT PAGE
   Ported from the <style> block of shop/proizvod.html.
   ============================================================ */
.pd-top{ padding-top:104px; }
.pd-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:start; }
@media(max-width:900px){ .pd-grid{ grid-template-columns:1fr; } }

.gallery{ display:flex; flex-direction:column; gap:14px; }
.gmain{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/0.92; background:var(--surface-2) center/cover no-repeat; border:1px solid var(--line); }
.gmain .badge{ position:absolute; top:16px; left:16px; z-index:2; }
.gthumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gthumb{ border-radius:var(--r-sm); overflow:hidden; aspect-ratio:1; background:var(--surface-2) center/cover no-repeat; border:2px solid transparent; cursor:pointer; transition:.2s; }
.gthumb.on{ border-color:var(--brand); } .gthumb:hover{ border-color:var(--line-2); }

.pd-info .cat{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:700; }
.pd-info h1{ margin:10px 0 12px; }
.pd-rate{ display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.pd-rate .pill{ white-space:nowrap; }
.pd-rate .small a{ color:var(--brand); text-decoration:underline; }
.pd-price{ display:flex; align-items:baseline; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.pd-price b{ font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4vw,44px); letter-spacing:-0.02em; white-space:nowrap; }
.pd-price s{ font-size:19px; color:var(--ink-3); white-space:nowrap; }
.pd-price .save{ font-size:13px; font-weight:700; color:var(--on-accent); background:var(--accent); padding:4px 10px; border-radius:var(--r-sm); }
.pd-vat{ font-size:13px; color:var(--ink-3); margin-bottom:22px; }

/* Sidrena cijena (plugin accredo-sidrena-cijena). Not part of the sale logic:
   no strike-through, no accent colour, it must never read as a discount. The
   plugin's own default CSS is dequeued in inc/woocommerce.php. */
.asc-sidrena{ display:block; margin-top:3px; font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:12.5px; font-weight:500; line-height:1.4; letter-spacing:0; text-transform:none; text-decoration:none; color:var(--ink-3); }
.asc-sidrena .asc-amount,.asc-sidrena .amount{ font:inherit; color:inherit; text-decoration:none; white-space:nowrap; }
.pd-info > .asc-sidrena{ margin:0 0 6px; font-size:14px; color:var(--ink-2); }
.pd-desc{ color:var(--ink-2); font-size:15.5px; line-height:1.65; margin-bottom:24px; max-width:52ch; }

.buy-row{ display:flex; gap:12px; align-items:stretch; margin-bottom:18px; flex-wrap:wrap; }
.qtybox{ display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:var(--r-pill); }
.qtybox button{ width:46px; height:52px; display:grid; place-items:center; font-size:20px; color:var(--ink-2); }
.qtybox button:hover{ color:var(--ink); }
.qtybox input{ min-width:46px; width:46px; text-align:center; font-weight:700; font-size:16px; border:none; background:none;
  color:var(--ink); font-family:inherit; -moz-appearance:textfield; }
.qtybox input::-webkit-outer-spin-button, .qtybox input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.buy-row .btn--primary{ flex:1; min-width:200px; }

.pd-perks{ display:flex; flex-direction:column; gap:11px; padding:20px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.pd-perk{ display:flex; gap:11px; align-items:center; font-size:14px; color:var(--ink-2); }
.pd-perk svg{ width:19px; height:19px; color:var(--brand); flex:none; }

/* tabs */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:26px; flex-wrap:wrap; }
.tab{ padding:14px 20px; font-weight:600; font-size:15px; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; transition:.2s; }
.tab.on{ color:var(--brand); border-color:var(--brand); }
.tabpane{ display:none; } .tabpane.on{ display:block; }
.spec{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; max-width:760px; }
.spec__row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14.5px; }
.spec__row b{ color:var(--ink); font-weight:600; } .spec__row span{ color:var(--ink-2); }
@media(max-width:600px){ .spec{ grid-template-columns:1fr; } }
.rev{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.rev__av{ width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; background:var(--brand); color:var(--on-brand); }
.rev__top{ display:flex; align-items:center; gap:10px; margin-bottom:5px; }
.rev__top b{ font-size:15px; } .rev__top .stars{ font-size:12px; }

/* ----------  REVIEW FORM  ----------
   comments_template() prints WooCommerce's own review markup, and none of it
   was styled: on the near-black product page that meant a white textarea, a
   grey system button and five hairline outline stars — the one unfinished
   corner of the shop. .rev above styles reviews the theme renders itself; this
   styles the ones WooCommerce renders, including the author and e-mail fields
   that only appear for a visitor who is not logged in. */
#reviews .woocommerce-Reviews-title,
#reviews #respond .comment-reply-title{ display:block; font-family:var(--font-display); font-weight:700;
  font-size:19px; text-transform:var(--head-case); letter-spacing:var(--head-ls); color:var(--ink); margin:0 0 12px; }
#reviews .woocommerce-noreviews,
#reviews .comment-notes{ color:var(--ink-3); font-size:14.5px; margin:0 0 18px; }
#reviews #respond .comment-reply-title small{ font-weight:500; font-size:14px; }
#reviews #respond .comment-reply-title a{ color:var(--brand); text-decoration:underline; }

#reviews #review_form_wrapper{ margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
#reviews .comment-form{ display:flex; flex-direction:column; gap:18px; max-width:640px; }
#reviews .comment-form > p{ margin:0; display:flex; flex-direction:column; gap:6px; }
#reviews .comment-form label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
#reviews .comment-form .required{ color:var(--brand); }

#reviews .comment-form input[type="text"],
#reviews .comment-form input[type="email"],
#reviews .comment-form textarea{ font-family:inherit; font-size:15px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-sm);
  padding:13px 15px; width:100%; transition:border-color .2s, box-shadow .2s; }
#reviews .comment-form textarea{ min-height:150px; line-height:1.6; resize:vertical; }
#reviews .comment-form input::placeholder,
#reviews .comment-form textarea::placeholder{ color:var(--ink-3); }
#reviews .comment-form input[type="text"]:focus,
#reviews .comment-form input[type="email"]:focus,
#reviews .comment-form textarea:focus{ outline:none; border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 18%, transparent); }

/* The rating. woocommerce.css already does the mechanics — it hides the label
   text with a big negative text-indent and draws each star as a glyph from the
   WooCommerce icon font in ::before, swapping outline for filled through the
   content property. So only the colour is missing, and colour is all that is
   set here: geometry and glyph stay WooCommerce's, which is what keeps this
   working across its updates. */
#reviews .comment-form-rating{ gap:8px; }
#reviews .stars{ margin:0; }
#reviews .stars a{ color:var(--ink-3); transition:color .15s; }
#reviews .stars:hover a,
#reviews .stars.selected a{ color:var(--accent); }
/* Coloured up to the star under the cursor or chosen, muted after it —
   WooCommerce swaps the glyph at the same boundary. */
#reviews .stars a:hover ~ a,
#reviews .stars.selected a.active ~ a{ color:var(--ink-3); }

/* Without JavaScript the plain <select> stays visible instead of the stars. */
#reviews .comment-form-rating select{ -webkit-appearance:none; appearance:none; font-family:inherit;
  font-size:15px; color:var(--ink); background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--r-sm); padding:13px 15px; cursor:pointer; }
#reviews .comment-form-rating select option{ background:var(--surface); color:var(--ink); }

#reviews .comment-form-cookies-consent{ flex-direction:row; align-items:flex-start; gap:9px; }
#reviews .comment-form-cookies-consent input{ margin-top:3px; flex:none; accent-color:var(--brand); }
#reviews .comment-form-cookies-consent label{ font-size:13px; font-weight:500; color:var(--ink-3); }

/* "#reviews #respond input#submit" and not the shorter form: woocommerce.css
   styles this button as ".woocommerce #respond input#submit" — two IDs — and a
   selector with one ID loses to it however many classes it carries. That is why
   the button kept its grey system look while everything around it changed. */
#reviews .form-submit{ margin:0; }
#reviews #respond input#submit,
#reviews .form-submit input[type="submit"]{ display:inline-flex; align-items:center; justify-content:center;
  align-self:flex-start; width:auto; font-family:inherit; font-weight:600; font-size:15px; padding:13px 26px;
  border:0; border-radius:var(--r-pill); background:var(--brand); color:var(--on-brand); cursor:pointer;
  transition:background .25s, transform .3s var(--ease,cubic-bezier(.22,.61,.36,1)); }
#reviews #respond input#submit:hover,
#reviews .form-submit input[type="submit"]:hover{ background:var(--brand-deep); color:var(--on-brand); transform:translateY(-2px); }
#reviews #respond input#submit:focus-visible,
#reviews .form-submit input[type="submit"]:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* The list of existing reviews, when there are any. */
#reviews .commentlist{ list-style:none; margin:0 0 8px; padding:0; }
#reviews .commentlist li{ padding:20px 0; border-bottom:1px solid var(--line); }
#reviews .commentlist .avatar{ width:44px; height:44px; border-radius:50%; float:left; margin-right:14px; }
#reviews .commentlist .comment-text{ overflow:hidden; }
#reviews .commentlist .meta{ font-size:14px; color:var(--ink-2); margin:0 0 6px; }
#reviews .commentlist .meta strong{ color:var(--ink); }
#reviews .commentlist .description{ color:var(--ink-2); font-size:15px; line-height:1.65; }

/* ============================================================
   BRIDGE TO WOOCOMMERCE
   ============================================================ */

/* Product templates run inside our own main element. No padding here: both
   templates that use it already carry the prototype's distance to the fixed
   header themselves (.cat-top 96px, .pd-top 104px, both unconditional). The
   96px that used to sit here stacked on top of those — at 1280px the product
   breadcrumb started at 234px instead of the prototype's 138px. */
.site-main--shop{ padding-top:0; }

/* Same rule as sections.css:367, repeated because that file is only enqueued
   for the warm variant. Without it the shop landing page fell back to
   .site-main{padding-top:clamp(110px,12vw,140px)} from neon.css and stacked
   that on top of .home-hero's own 96px: the hero started 140px lower than in
   the prototype (at 1280px: 270px instead of 130px). Pattern pages bring their
   own distance to the fixed header — .home-hero and .cat-top carry it. */
.site-main--sections{ padding-top:0; }

/* Except account: accredo_checkout_template() routes it through the same
   template, but its shortcode output has no section of its own. Checkout and
   cart do — their overrides wrap everything in .co-top — so they are not
   listed here. 110px is that same .co-top value. */
body.woocommerce-account .site-main--sections{ padding-top:110px; }

/* WooCommerce appends a "view cart" link after an AJAX add to cart; the
   drawer opens instead, so the link is not needed. */
.pcard__add + .added_to_cart{ display:none; }

/* Card is a div now, so the pointer has to say it is clickable. */
.pcard{ cursor:pointer; }
.pcard__name{ display:block; }

/* While a quantity change is in flight. */
#cart.is-busy .cart__body{ opacity:.55; pointer-events:none; transition:opacity .2s; }

/* WooCommerce notices inside the shop layout. */
.woocommerce-notices-wrapper:not(:empty){ margin-bottom:24px; }

/* Hero slider with one copy block per slide (the prototype had a single
   block fed from a JS array). */
.hh-copy.is-off{ display:none; }
.hh-copy.is-on{ display:block; }

/* ============================================================
   CHECKOUT AS A RESERVATION
   Ported from the <style> block of shop/blagajna.html.
   ============================================================ */
.co-top{ padding-top:110px; }
.co-steps{ display:flex; align-items:center; gap:10px; margin-bottom:34px; flex-wrap:wrap; }
.co-step{ display:flex; align-items:center; gap:10px; }
.co-step__n{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:14px;
  background:var(--surface-2); color:var(--ink-3); border:1.5px solid var(--line); }
.co-step.on .co-step__n, .co-step.done .co-step__n{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.co-step b{ font-size:14.5px; font-weight:600; color:var(--ink-3); }
.co-step.on b{ color:var(--ink); }
.co-step__bar{ width:34px; height:2px; background:var(--line); border-radius:2px; }

.co-grid{ display:grid; grid-template-columns:1fr 400px; gap:clamp(28px,4vw,48px); align-items:start; }
@media(max-width:920px){ .co-grid{ grid-template-columns:1fr; } }

.co-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:clamp(22px,3vw,32px); margin-bottom:20px; }
.co-card h3{ font-family:var(--font-display); font-weight:700; font-size:20px; text-transform:var(--head-case); letter-spacing:var(--head-ls); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.co-card h3 .n{ width:26px; height:26px; border-radius:50%; background:var(--brand); color:var(--on-brand); display:grid; place-items:center; font-size:13px; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.frow--1{ grid-template-columns:1fr; }
@media(max-width:520px){ .frow{ grid-template-columns:1fr; } }

.ship-opt{ display:flex; align-items:center; gap:14px; padding:16px; border:1.5px solid var(--line); border-radius:var(--r-card); cursor:pointer; margin-bottom:12px; transition:.2s; }
.ship-opt.on{ border-color:var(--brand); background:var(--brand-tint); }
.ship-opt .radio{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); flex:none; display:grid; place-items:center; transition:.2s; }
.ship-opt.on .radio{ border-color:var(--brand); }
.ship-opt.on .radio::after{ content:""; width:10px; height:10px; border-radius:50%; background:var(--brand); }
.ship-opt b{ display:block; font-size:14.5px; } .ship-opt span:not(.radio):not(.price){ font-size:13px; color:var(--ink-3); }
.ship-opt .price{ margin-left:auto; font-family:var(--font-display); font-weight:700; font-size:16px; }

.summary{ position:sticky; top:84px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.summary__head{ padding:20px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.summary__head h3{ font-family:var(--font-display); font-weight:700; font-size:19px; text-transform:var(--head-case); }
.summary__items{ padding:8px 22px; max-height:300px; overflow-y:auto; }
.sitem{ display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--line); }
.sitem:last-child{ border-bottom:none; }
.sitem__img{ width:58px; height:58px; border-radius:var(--r-sm); flex:none; background:var(--surface-2) center/cover; border:1px solid var(--line); position:relative; }
.sitem__q{ position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--ink); color:var(--bg); font-size:11px; font-weight:700; display:grid; place-items:center; }
.sitem__info{ flex:1; min-width:0; } .sitem__info b{ font-size:13.5px; font-weight:600; line-height:1.3; display:block; }
.sitem__price{ font-family:var(--font-display); font-weight:700; font-size:14.5px; white-space:nowrap; }
.summary__totals{ padding:18px 22px; }
.strow{ display:flex; justify-content:space-between; gap:14px; font-size:14px; color:var(--ink-2); margin-bottom:9px; }
.strow span:last-child{ white-space:nowrap; }
.strow.grand{ font-size:20px; color:var(--ink); font-weight:700; margin-top:12px; padding-top:14px; border-top:1px solid var(--line); }
.strow.grand b{ font-family:var(--font-display); }
.promo-row{ display:flex; gap:8px; padding:0 22px 18px; }
/* .field is a wrapper class — .field input is what carries the look — so the
   class on the input itself never styled anything and the promo box stayed
   browser white on both the cart and the checkout. Styled by its place
   instead, which needs no class on the input at all. */
.promo-row input{ flex:1; min-width:0; font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px 13px; }
.promo-row input::placeholder{ color:var(--ink-3); }
.promo-row input:focus{ outline:none; border-color:var(--brand); }
.summary__foot{ padding:0 22px 22px; }
.trust-line{ display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:var(--ink-3); margin-top:14px; }
.trust-line svg{ width:15px; height:15px; }

.co-empty{ text-align:center; padding:70px 20px; }
.co-empty svg{ width:60px; height:60px; color:var(--line-2); margin:0 auto 18px; }

/* ============================================================
   CART PAGE — woocommerce/cart/cart.php
   The prototype has no cart page, only the drawer and Blagajna.
   These rows are the drawer's .cart__row at page scale, sitting
   in the same card frame the checkout uses, so nothing about the
   look changes on the way to the checkout.
   ============================================================ */

/* The prototype pairs max-width:100% with no height, which is right for its
   own markup — plain <img src> with no dimensions. WordPress always writes
   width and height attributes, so a rule that sets only one of the two (core's
   cart does exactly that) stretches the picture: the default cart table showed
   a 32x800 sliver. Belongs here rather than in the ported neon.css. */
.woocommerce img[width][height]{ height:auto; }

.citems{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.citem{ display:grid; grid-template-columns:92px 1fr auto auto; gap:18px; align-items:center;
  padding:18px clamp(16px,2.4vw,22px); border-bottom:1px solid var(--line); }
.citem:last-child{ border-bottom:none; }
.citem__img{ width:92px; height:92px; flex:none; border-radius:var(--r-sm); background:var(--surface-2) center/cover; border:1px solid var(--line); }
.citem__info{ min-width:0; }
.citem__info b{ font-size:15px; font-weight:600; line-height:1.35; display:block; }
.citem__info b a:hover{ color:var(--brand); }
.citem__meta{ font-size:12.5px; color:var(--ink-3); margin-top:3px; }
.citem__meta p{ margin:0; }
.citem__unit{ font-size:13px; color:var(--ink-2); margin-top:4px; }
.citem__note{ font-size:12.5px; color:var(--brand); margin-top:5px; }
.citem__qty{ display:flex; align-items:center; }
.citem__single{ font-weight:700; font-size:15px; }
.citem__rm{ display:inline-block; margin-top:7px; background:none; color:var(--ink-3); font-size:12px; text-decoration:underline; }
.citem__rm:hover{ color:var(--accent); }
.citem__price{ font-family:var(--font-display); font-weight:700; font-size:17px; white-space:nowrap; text-align:right; }

/* The stepper of the product page, one size down. */
.qtybox--sm button{ width:34px; height:38px; font-size:17px; }
.qtybox--sm input{ min-width:36px; width:36px; font-size:14.5px; }

.citems__actions{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:20px; }

/* Core disables the update button until a quantity actually changes. */
.citems__actions button[name="update_cart"]:disabled{ opacity:.45; cursor:default; }

@media(max-width:620px){
  .citem{ grid-template-columns:72px 1fr auto; row-gap:14px;
    grid-template-areas:"img info info" "img qty price"; }
  .citem__img{ grid-area:img; width:72px; height:72px; align-self:start; }
  .citem__info{ grid-area:info; }
  .citem__qty{ grid-area:qty; flex-direction:row; align-items:center; gap:12px; justify-self:start; }
  .citem__price{ grid-area:price; align-self:center; }
  .citems__actions{ justify-content:center; }
}

.co-done{ text-align:center; max-width:560px; margin:0 auto; padding:30px 0; }
.co-done__ic{ width:88px; height:88px; border-radius:50%; background:var(--brand-tint); display:grid; place-items:center; margin:0 auto 24px; }
.co-done__ic svg{ width:44px; height:44px; color:var(--brand); }
.co-note{ display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-left:none; background:var(--brand-tint); border-radius:var(--r-card); padding:16px 18px; margin-bottom:26px; font-size:14.5px; color:var(--ink-2); }
.co-note svg{ width:20px; height:20px; flex:none; color:var(--brand); margin-top:2px; }
.co-note b{ color:var(--ink); }

/* WooCommerce renders its own wrappers around the fields. */
.co-card .form-row{ margin:0; padding:0; }
.co-card .form-row label{ font-size:12.5px; font-weight:600; color:var(--ink-2); display:block; margin-bottom:6px; }
.co-card .form-row .required{ color:var(--brand); text-decoration:none; }
.co-card .form-row input, .co-card .form-row textarea, .co-card .form-row select{
  font-family:inherit; font-size:15px; color:var(--ink); background:var(--surface);
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:13px 15px; width:100%; transition:.2s; }
.co-card .form-row input:focus, .co-card .form-row textarea:focus{ outline:none; border-color:var(--brand); }
.woocommerce-checkout .wc_payment_methods{ list-style:none; margin:0 0 14px; padding:0; }
.woocommerce-checkout .wc_payment_methods label{ font-weight:600; font-size:14px; }
.woocommerce-checkout .payment_box{ font-size:13px; color:var(--ink-3); padding:8px 0 0; }
.woocommerce-checkout .payment_box p:last-child{ margin-bottom:0; }
.woocommerce-checkout #place_order{ margin-top:4px; }

/* Newsletter signup in the shop footer (rendered by the plugin). */
.sfoot__nl{ max-width:520px; margin-top:34px; padding-top:24px; border-top:1px solid oklch(1 0 0 / .12); }

/* ============================================================
   CORE BLOCKS IN THE NEON LOOK
   blocks.css carries the variant neutral half of the bridge. What
   follows mirrors the .btn rules of neon.css, because theme.json
   describes the warm button (999px pill, 15px/26px, weight 600) and
   would otherwise put a rounded lowercase pill on the squared shop.
   ============================================================ */
.wp-block-button__link,
.wp-element-button{ border-radius:var(--r-pill); padding:13px 24px; font-size:15px;
  text-transform:uppercase; letter-spacing:.04em; font-weight:700; }

.wp-block-button.is-primary > .wp-block-button__link{ background:var(--brand); color:var(--on-brand); }
.wp-block-button.is-primary > .wp-block-button__link:hover{ background:var(--brand-deep); transform:translateY(-2px); }
.wp-block-button.is-ghost > .wp-block-button__link{ background:transparent; border:1.5px solid var(--line-2); color:var(--ink); }
.wp-block-button.is-ghost > .wp-block-button__link:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.wp-block-button.is-on-dark > .wp-block-button__link{ background:transparent; border:1.5px solid oklch(1 0 0 / .35); color:var(--hero-ink); }
.wp-block-button.is-on-dark > .wp-block-button__link:hover{ border-color:var(--hero-ink); background:oklch(1 0 0 / .08); transform:translateY(-2px); }
.wp-block-button.is-lg > .wp-block-button__link{ padding:16px 30px; font-size:16px; }

/* Arrow link as a paragraph, matching .link-arrow of the prototype. */
.link-arrow-p a{ color:var(--brand); font-size:14.5px; }
.link-arrow-p a:hover{ color:var(--accent); }

/* ============================================================
   LEGAL NOTICES (review of 2026-09-08)
   The sentence above every "send inquiry" button, the VAT line under the
   totals, the trader block and the withdrawal link in the footer.
   ============================================================ */
.co-legal{ font-size:12.5px; line-height:1.55; color:var(--ink-2); margin:0 0 12px; }
.co-legal--dim{ color:var(--ink-3); margin:14px 0 0; }
.co-legal a{ text-decoration:underline; text-underline-offset:2px; }
.co-legal a:hover{ color:var(--brand); }
.cart__foot .co-legal{ margin:12px 0 0; }
.cart__foot .btn--primary{ margin-top:14px; }
.summary__totals > .small{ margin-top:6px; }
.place-order .co-legal{ margin-bottom:14px; }
.wc_payment_methods{ list-style:none; margin:0 0 14px; padding:0; }
.wc_payment_methods li{ font-size:13.5px; color:var(--ink-2); }
.wc_payment_methods li > label{ font-weight:600; color:var(--ink); }
.wc_payment_methods .payment_box{ margin-top:4px; }
.wc_payment_methods .payment_box p{ margin:0; font-size:12.5px; color:var(--ink-3); }
.wc_payment_methods input[type="radio"]{ position:absolute; opacity:0; width:1px; height:1px; }

.sfoot__legal{ font-size:13px; line-height:1.7; color:var(--footer-dim); margin:0; }
.sfoot__legal b{ color:var(--footer-ink); font-weight:600; }
.sfoot__col .sfoot__legal a{ display:inline; padding:0; font-size:inherit; text-decoration:underline; text-underline-offset:2px; }
.sfoot__links{ display:inline-flex; gap:14px; align-items:center; flex-wrap:wrap; }
.sfoot__withdraw{ display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border:1px solid oklch(1 0 0 / .32);
  border-radius:var(--r-pill); color:var(--footer-ink); font-size:12.5px; font-weight:700; letter-spacing:.02em; transition:.2s; }
.sfoot__withdraw svg{ width:15px; height:15px; }
.sfoot__withdraw:hover{ border-color:var(--accent); color:var(--accent); }
.cat-bar .vat{ font-size:12.5px; color:var(--ink-3); }

/* ============================================================
   CATEGORY DIVISION (client feedback 2026-09-08)
   The children of the category in view as a chip row above the grid —
   Segway → ATV / UTV / SSV — the way segwaypowersports.hr divides its
   vehicles. Links, not checkboxes: one click swaps the category filter.
   ============================================================ */
.pdiv{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.pdiv__item{ display:inline-flex; align-items:center; gap:8px; padding:9px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-pill); font-size:13.5px; font-weight:600; color:var(--ink-2); background:var(--surface); transition:.18s; }
.pdiv__item:hover{ border-color:var(--brand); color:var(--ink); }
.pdiv__item.on{ background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.pdiv__item .cnt{ font-size:12px; opacity:.72; }
.pdiv__item.on .cnt{ opacity:.85; }

/* Safety tab on the product page */
.safety p{ margin:0 0 12px; }
.safety ul{ margin:0 0 14px; padding-left:20px; }
.safety li{ margin-bottom:8px; }
.safety li::marker{ color:var(--brand); }