/* Products page: photo category tiles (2026-11-04). Loaded by inc/category-tiles.php */
.niki-tiles-section{margin:8px 0 44px}
.niki-tiles-heading{font-size:32px;margin:0 0 18px}
.niki-cat-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.niki-cat-tile{display:flex;flex-direction:column;background:#fff;border:1px solid #ead9d6;border-radius:18px;overflow:hidden;text-decoration:none;color:#753249;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.niki-cat-tile:hover,.niki-cat-tile:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(117,50,73,.13);border-color:#d9b5ba}
.niki-cat-tile:focus-visible{outline:2px solid #753249;outline-offset:3px}
.niki-cat-img{display:block;aspect-ratio:4/3;background:#fff;overflow:hidden}
.niki-cat-img img{display:block;width:100%!important;height:100%!important;object-fit:contain;padding:6px;box-sizing:border-box;transition:transform .35s ease}
.niki-cat-tile:hover .niki-cat-img img{transform:scale(1.04)}
.niki-gift-tile .niki-cat-img img{object-fit:cover;padding:0}
.niki-cat-text{display:flex;flex-direction:column;gap:4px;padding:16px 20px 18px;border-top:1px solid #f1e6e3}
.niki-cat-name{font-family:Georgia,serif;font-size:22px;line-height:1.2}
.niki-cat-count{font-size:14px;color:#7d6a6e}
.niki-tiles-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.niki-pill{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:8px 18px;border:1px solid #d9b5ba;border-radius:30px;background:#fff8f5;color:#753249;font-size:15px;text-decoration:none}
.niki-pill span{opacity:.7}
.niki-pill:hover,.niki-pill.is-active{background:#753249;border-color:#753249;color:#fff}
.niki-pill-strong{background:#753249;border-color:#753249;color:#fff}
.niki-pill-strong:hover{background:#5c2539}
.niki-pill-leaf::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C9 3 4 9 4 15c0 2 .5 3.5 1.2 4.6L3 22l1.4 1.4 2.5-2.5C8 21.6 9.6 22 11 22c7 0 10-7 9-19zM8 18c2-5 5-8 9-10-3 3-6 6-9 10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C9 3 4 9 4 15c0 2 .5 3.5 1.2 4.6L3 22l1.4 1.4 2.5-2.5C8 21.6 9.6 22 11 22c7 0 10-7 9-19zM8 18c2-5 5-8 9-10-3 3-6 6-9 10z'/%3E%3C/svg%3E") center/contain no-repeat}
.niki-crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px;color:#7d6a6e;margin:0 0 10px}
.niki-crumbs a{color:#753249;text-decoration:none;border-bottom:1px solid #d9b5ba}
.niki-crumbs a:hover{border-bottom-color:#753249}
.niki-cat-nav{margin:18px 0 14px}
.niki-cat-nav a.is-active{background:#753249;border-color:#753249;color:#fff}
.niki-cat-nav a.niki-back{border-style:dashed}
/* Toolbar above the list: sugar switch left, search right, well below the category buttons */
.niki-list-toolbar{clear:both;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px 30px;margin:142px 0 34px}
.niki-list-toolbar .niki-product-search{margin:9px 0 0 auto}
/* "With sugar" / "No added sugar" switch: one two-part control in the green of "No added sugar",
   the chosen part filled with a tick - different from the berry category buttons above. */
.niki-sugar-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0}
.niki-sugar-switch{display:inline-flex;gap:4px;padding:5px;border:2px solid #c5d4a6;border-radius:40px;background:#fff;box-shadow:0 6px 18px rgba(91,114,54,.12)}
.niki-sugar-switch .niki-pill{min-height:50px;padding:10px 26px;border:0;border-radius:32px;background:transparent;color:#4b5e2d;font-size:17px;font-weight:600}
.niki-sugar-switch .niki-pill:hover{background:#eef4e2;color:#4b5e2d}
.niki-sugar-switch .niki-pill.is-active{background:#5b7236;color:#fff;box-shadow:0 3px 10px rgba(91,114,54,.3)}
.niki-sugar-switch .niki-pill.is-active::after{content:"✓";margin-left:2px;font-weight:700}
.niki-sugar-switch .niki-pill span{opacity:.75;font-weight:400}
.niki-sugar-hint{margin:0 0 0 22px;font-size:15px}
.niki-sugar-hint a{color:#4b5e2d;text-decoration:none;border-bottom:1px solid #c5d4a6}
.niki-sugar-hint a:hover{border-bottom-color:#4b5e2d}
@media(max-width:520px){
 .niki-sugar-switch{display:flex;width:100%;box-sizing:border-box}
 .niki-sugar-switch .niki-pill{flex:1 1 0;justify-content:center;flex-wrap:wrap;gap:4px;min-height:46px;padding:8px 10px;font-size:15px;text-align:center}
 .niki-sugar-hint{font-size:14px;margin:0;align-self:center}
 .niki-list-toolbar{flex-direction:column;align-items:stretch;gap:16px;margin-top:80px}
 .niki-list-toolbar-left,.niki-sugar-wrap{width:100%}
 .niki-list-toolbar .niki-product-search{margin:0}
}
@media(max-width:850px) and (min-width:521px){
 .niki-list-toolbar .niki-product-search{margin-left:0}
}
@media(max-width:1100px) and (min-width:851px){
 .niki-cat-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:850px){
 .niki-cat-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .niki-cat-name{font-size:19px}
}
@media(max-width:520px){
 .niki-cat-tiles{gap:12px}
 .niki-cat-img img{padding:4px}
 .niki-cat-text{padding:12px 12px 14px}
 .niki-cat-name{font-size:17px}
 .niki-cat-count{font-size:13px}
 .niki-tiles-heading{font-size:26px}
}

/* Product search box (niki_tiles_search_form, assets/product-search.js) */
.niki-product-search{display:flex;max-width:100%;margin:0 0 24px}
.niki-product-search input[type=search]{width:280px;min-height:46px;padding:8px 18px;border:1px solid #d9b5ba;border-right:0;border-radius:30px 0 0 30px;background:#fff;color:#4a3a3e;font-size:15px;box-sizing:border-box}
.niki-product-search input[type=search]:focus{outline:none;border-color:#753249;box-shadow:0 0 0 3px rgba(117,50,73,.12)}
.niki-product-search button[type=submit]{min-height:46px;padding:8px 20px;border:1px solid #753249;border-radius:0 30px 30px 0;background:#753249;color:#fff;font-size:15px;cursor:pointer}
.niki-product-search button[type=submit]:hover{background:#5c2539}
.niki-product-search .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.niki-product-search.is-landing{float:none;justify-content:center;margin:0 auto 30px}
.niki-product-search.is-landing input[type=search]{width:min(440px,70vw)}
.niki-search-empty{clear:both;margin:10px 0 40px;padding:26px;border:1px dashed #d9b5ba;border-radius:18px;text-align:center;color:#7d6a6e}
.niki-search-empty a{color:#753249}
@media(max-width:520px){
 .niki-product-search{width:100%}
 .niki-product-search input[type=search],.niki-product-search.is-landing input[type=search]{flex:1 1 auto;width:auto;min-width:0}
}

/* Product cards see-through: no white box or side/bottom border, only the coloured line on top stays.
   The photos' white background is blended into the marble (multiply), so the jars stand on the page. */
ul.products li.product{background:transparent!important;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important;box-shadow:none!important}
ul.products li.product .niki-product-frame{background:transparent!important;isolation:auto!important}
ul.products li.product img{background:transparent!important;mix-blend-mode:multiply!important}

/* Bigger header logo on computer screens (owner's request, then made smaller so the page starts higher):
   grows with the screen, ~320px wide on a 1900px screen, 250px on a 1280px laptop. Tablets/phones: theme size. */
@media(min-width:1100px){
 .header .custom-logo{width:clamp(250px,17vw,340px)!important;max-width:none!important;max-height:none!important;height:auto!important}
}

/* Story timeline ("Our story" page): any Elementor row with the CSS class niki-timeline.
   Each column = one milestone (year, text, later a photo). Computers: a winding road, 4 stops per row,
   left-to-right then a U-turn and back right-to-left (rows 2, 4, ... are mirrored). Phones: one line down the left.
   New milestones: add another column inside the row in Elementor; the road extends by itself.
   Pieces: column ::before = road segment, column ::after = U-turn at a row end, heading ::before = the stop (dot). */
@media(min-width:900px){
 .e-con.niki-timeline{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row dense;column-gap:0!important;row-gap:44px!important;padding:0 52px!important;margin-top:30px}
 .e-con.niki-timeline>.e-con{position:relative;width:auto!important;max-width:none!important;align-items:center!important;justify-content:flex-start!important;text-align:center;padding:62px 14px 0!important}
 .e-con.niki-timeline>.e-con>.elementor-widget-heading{position:static!important}
 /* mirrored rows: 5th-8th stop of every 8 run right-to-left */
 .e-con.niki-timeline>.e-con:nth-child(8n+5){grid-column:4}
 .e-con.niki-timeline>.e-con:nth-child(8n+6){grid-column:3}
 .e-con.niki-timeline>.e-con:nth-child(8n+7){grid-column:2}
 .e-con.niki-timeline>.e-con:nth-child(8n+8){grid-column:1}
 /* road segment through the stop */
 .e-con.niki-timeline>.e-con::before{content:""!important;display:block!important;position:absolute!important;inset:14px 0 auto 0!important;width:auto!important;height:8px!important;background:#753249!important;opacity:1!important;mix-blend-mode:normal!important}
 .e-con.niki-timeline>.e-con:first-child::before{left:50%!important;border-radius:8px 0 0 8px}
 .e-con.niki-timeline>.e-con:last-child::before{right:50%!important;border-radius:0 8px 8px 0}
 .e-con.niki-timeline>.e-con:is(:nth-child(8n+5),:nth-child(8n+6),:nth-child(8n+7),:nth-child(8n+8)):last-child::before{left:50%!important;right:0!important;border-radius:8px 0 0 8px}
 /* U-turns: right side after the 4th stop of a row, left side after the 8th */
 .e-con.niki-timeline>.e-con::after{content:none!important}
 .e-con.niki-timeline>.e-con:is(:nth-child(8n+4),:nth-child(8n+8)):not(:last-child)::after{content:""!important;display:block!important;position:absolute!important;top:14px!important;bottom:auto!important;width:44px!important;height:calc(100% + 44px + 8px)!important;border:8px solid #753249!important;background:transparent!important;opacity:1!important;box-sizing:border-box!important}
 .e-con.niki-timeline>.e-con:nth-child(8n+4):not(:last-child)::after{left:100%!important;right:auto!important;border-left:0!important;border-radius:0 999px 999px 0!important}
 .e-con.niki-timeline>.e-con:nth-child(8n+8):not(:last-child)::after{right:100%!important;left:auto!important;border-right:0!important;border-radius:999px 0 0 999px!important}
 /* the stop */
 .e-con.niki-timeline>.e-con>.elementor-widget-heading::before{content:"";position:absolute;top:5px;left:calc(50% - 13px);width:26px;height:26px;border-radius:50%;background:#fff8f5;border:7px solid #753249;box-sizing:border-box;z-index:1}
 .e-con.niki-timeline .elementor-heading-title{margin-bottom:6px}
 .e-con.niki-timeline p{max-width:240px;margin-left:auto;margin-right:auto}
}
@media(max-width:899px){
 .e-con.niki-timeline{position:relative;padding:0 0 0 46px!important;gap:30px!important;margin-top:18px}
 .e-con.niki-timeline::after{content:"";position:absolute;top:6px;bottom:6px;left:9px;width:7px;border-radius:8px;background:#753249}
 .e-con.niki-timeline>.e-con{position:relative;width:100%!important}
 .e-con.niki-timeline>.e-con::after{content:""!important;display:block!important;position:absolute!important;inset:16px auto auto -31px!important;width:26px!important;height:5px!important;border-radius:3px!important;background:#753249!important;opacity:1!important}
 .e-con.niki-timeline>.e-con::before{content:""!important;display:block!important;position:absolute!important;inset:9px auto auto -45px!important;width:19px!important;height:19px!important;border-radius:50%!important;background:#753249!important;box-shadow:0 0 0 5px #f6e4e6;opacity:1!important;mix-blend-mode:normal!important;z-index:1}
}

/* Product page gallery: no white behind the big photo or the thumbnails; the photos' white background
   blends into the marble (needs the gallery to slide without transforms - inc/product-sizes.php). */
.woocommerce-product-gallery .woocommerce-product-gallery__image{isolation:auto!important;background:transparent!important}
.woocommerce-product-gallery img{background:transparent!important;mix-blend-mode:multiply!important}
.woocommerce-product-gallery .flex-control-thumbs li{background:transparent!important}
/* Hover zoom lays a big copy (.zoomImg) over the photo; with see-through photos both showed at once,
   so the normal photo is hidden while the zoomed copy is visible. */
.woocommerce-product-gallery__image:has(.zoomImg:not([style*="opacity: 0"])) img:not(.zoomImg){visibility:hidden!important}

/* Closing call-to-action cards (Gift Baskets: .niki-cta-pair with two cards; Event Favours: the single
   .service-end box). Main card = deep berry with a cream button; second card = light card with an outline button. */
.e-con.niki-cta-pair{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px!important;background:transparent!important;align-items:stretch}
.e-con.niki-cta-card,.e-con.service-end{position:relative;justify-content:center!important;gap:6px!important;padding:52px 56px!important;border-radius:26px;overflow:hidden}
.e-con.niki-cta-card{background:rgba(255,253,249,.82)!important;border:1px solid #ead9d6;box-shadow:0 14px 36px rgba(97,42,61,.08)}
.e-con.niki-cta-primary,.e-con.service-end{background:linear-gradient(135deg,#612a3d 0%,#7e3a52 100%)!important;border:0;box-shadow:0 18px 44px rgba(97,42,61,.28)}
.e-con.service-end{max-width:1160px;margin-left:auto!important;margin-right:auto!important;width:calc(100% - 10%)!important}
.e-con.niki-cta-primary::after,.e-con.service-end::after{content:""!important;position:absolute!important;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,248,245,.07)!important;pointer-events:none}
.e-con.niki-cta-card .elementor-heading-title,.e-con.service-end .elementor-heading-title{font-size:clamp(28px,2.6vw,38px)!important;line-height:1.15;margin-bottom:4px}
.e-con.niki-cta-primary .elementor-heading-title,.e-con.service-end .elementor-heading-title{color:#fff!important}
.e-con.niki-cta-primary .elementor-widget-text-editor,.e-con.service-end .elementor-widget-text-editor{color:#f3e1e7!important}
.e-con.niki-cta-card .elementor-widget-text-editor{max-width:520px}
.e-con.niki-cta-card .elementor-widget-button,.e-con.service-end .elementor-widget-button{margin-top:10px}
.e-con.niki-cta-card .elementor-button{border-radius:30px!important;padding:15px 30px!important;letter-spacing:1.5px}
.e-con.niki-cta-primary .elementor-button,.e-con.service-end .elementor-button{background:#fff8f5!important;color:#612a3d!important;border:1px solid #fff8f5!important}
.e-con.niki-cta-primary .elementor-button:hover,.e-con.service-end .elementor-button:hover{background:#f3dfe4!important;border-color:#f3dfe4!important}
.e-con.niki-cta-card:not(.niki-cta-primary) .elementor-button{background:transparent!important;color:#612a3d!important;border:1.5px solid #612a3d!important}
.e-con.niki-cta-card:not(.niki-cta-primary) .elementor-button:hover{background:#612a3d!important;color:#fff!important}
.e-con.service-end .elementor-button{border-radius:30px!important;padding:15px 30px!important;letter-spacing:1.5px}
@media(max-width:850px){
 .e-con.niki-cta-pair{grid-template-columns:1fr;gap:18px!important}
 .e-con.niki-cta-card,.e-con.service-end{padding:36px 28px!important;border-radius:20px}
}

/* "A little inspiration" galleries (Event Favours, Gift Baskets): no white bands around the photos.
   Photos fill their box; a gallery of only landscape (1000x667) photos gets 3:2 boxes so nothing is cut. */
.service-gallery .service-gallery-item img{background:transparent!important;object-fit:cover!important}
.service-gallery:not(:has(img[height="1000"])) .service-gallery-item img{aspect-ratio:3/2!important}

/* Syrups & Cordials page: tall bottles looked tiny in square boxes, so narrower cards (5 per row on computers)
   with tall photo boxes (2:5); the empty sides of the photos are trimmed, so the bottles show about twice as big. */
body.term-syrups.woocommerce ul.products li.product a > img:not(.niki-framed-photo){aspect-ratio:2/5!important;height:auto!important;padding:0!important;object-fit:cover!important;
 transform:translate(calc(var(--tx,0) * 100%),calc(var(--ty,0) * 100%)) scale(var(--s,1))!important;
 clip-path:inset(calc((0.5 - (0.5 + var(--ty,0)) / var(--s,1)) * 100%) calc((0.5 - (0.5 - var(--tx,0)) / var(--s,1)) * 100%) calc((0.5 - (0.5 - var(--ty,0)) / var(--s,1)) * 100%) calc((0.5 - (0.5 + var(--tx,0)) / var(--s,1)) * 100%))}
/* Per-bottle zoom so every bottle fills ~92% of the box height, centred (measured from each photo):
   --s = zoom, --tx/--ty = shift as a share of the box. 250 ml bottles are smaller in their photos, so zoom more.
   A new syrup without a line here just shows its photo unzoomed. */
body.term-syrups ul.products li.post-24{--s:1.415;--tx:-0.177;--ty:-0.045}  /* Carob Syrup 250 ml */
body.term-syrups ul.products li.post-247{--s:1.43;--tx:-0.018;--ty:-0.041}  /* Grape Syrup (Epsima) 250 ml */
body.term-syrups ul.products li.post-242{--s:1.14;--tx:0.052;--ty:0.031}    /* Lemon Squash 500 ml */
body.term-syrups ul.products li.post-244{--s:1.14;--tx:0.033;--ty:0.034}    /* Mandarin Squash 500 ml */
body.term-syrups ul.products li.post-240{--s:1.14;--tx:0.009;--ty:0.034}    /* Rose Cordial 500 ml */
@media(min-width:851px){
 body.term-syrups.woocommerce ul.products{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}

/* Product cards: name / weight / no-added-sugar as rounded labels (inc/product-title-pills.php) */
ul.products li.product h2.niki-title-pills{display:flex!important;flex-wrap:wrap;align-items:center;align-content:flex-start;height:auto!important;min-height:0!important;flex:0 0 auto!important;gap:8px;margin:16px 0 8px!important;padding:0!important;font-size:15px!important;line-height:1.2!important}
.niki-title-pills span{display:inline-flex;align-items:center;min-height:40px;padding:7px 17px;border-radius:30px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.2;box-sizing:border-box}
.niki-tp-name{border:1px solid #d9b5ba;background:#fff8f5;color:#753249}
/* Second line: always its own row, with smaller weight / no-added-sugar circles */
.niki-title-pills .niki-tp-row{display:flex;flex:0 0 100%;flex-wrap:wrap;gap:6px;min-height:0;padding:0;border:0;border-radius:0;background:none}
.niki-title-pills .niki-tp-row span{min-height:28px;padding:3px 12px}
.niki-tp-weight{border:1px solid #c5d4a6;background:#eef4e2;color:#4b5e2d;font-size:13px!important}
.niki-tp-nas{border:1px solid #c5d4a6;background:#fff;color:#4b5e2d;font-size:12px!important;gap:5px}
.niki-tp-nas::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C9 3 4 9 4 15c0 2 .5 3.5 1.2 4.6L3 22l1.4 1.4 2.5-2.5C8 21.6 9.6 22 11 22c7 0 10-7 9-19zM8 18c2-5 5-8 9-10-3 3-6 6-9 10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C9 3 4 9 4 15c0 2 .5 3.5 1.2 4.6L3 22l1.4 1.4 2.5-2.5C8 21.6 9.6 22 11 22c7 0 10-7 9-19zM8 18c2-5 5-8 9-10-3 3-6 6-9 10z'/%3E%3C/svg%3E") center/contain no-repeat}
ul.products li.product a:hover .niki-tp-name{background:#753249;border-color:#753249;color:#fff}
@media(max-width:520px){
 ul.products li.product h2.niki-title-pills{gap:6px;margin:12px 0 6px!important}
 .niki-title-pills span{min-height:32px;padding:5px 11px;font-size:13px}
 .niki-title-pills .niki-tp-row span{min-height:26px;padding:2px 10px}
 .niki-tp-weight{font-size:12px!important}
 .niki-tp-nas{font-size:11px!important}
}

/* Product page size buttons (inc/product-sizes.php) */
.niki-sizes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:18px 0 22px}
.niki-sizes-label{font-size:15px;color:#7d6a6e}
.niki-sizes-buttons{display:flex;flex-wrap:wrap;gap:10px}
.niki-size{min-height:44px;padding:8px 22px;border:1px solid #c5d4a6;border-radius:30px;background:#eef4e2;color:#4b5e2d;font:inherit;font-size:16px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.niki-size:hover{border-color:#8fa66a}
.niki-size.is-active{background:#5b7236;border-color:#5b7236;color:#fff}
.niki-size:focus-visible{outline:2px solid #5b7236;outline-offset:3px}
.niki-has-sizes form.variations_form table.variations{display:none}
/* Size label under each photo thumbnail (assets/product-sizes.js) */
.niki-has-sizes .flex-control-thumbs li{display:flex;flex-direction:column;align-items:center}
.niki-thumb-size{display:inline-block;margin-top:8px;padding:3px 12px;border:1px solid #c5d4a6;border-radius:20px;background:#eef4e2;color:#4b5e2d;font-size:13px;line-height:1.4;white-space:nowrap;cursor:pointer}
.flex-control-thumbs img.flex-active~.niki-thumb-size{background:#5b7236;border-color:#5b7236;color:#fff}