/* ICANCROCHET storefront chrome */
.ic-landing{margin-top:26px}
.ic-landing .elementor-widget-container>p:last-child{margin-bottom:0}

/* Accordion styled to match the brand (Elementor's own controls do not cover the frame) */
.ic-landing .elementor-accordion .elementor-accordion-item{border:1.5px solid var(--ic-border,#f8c8d8);border-radius:10px;overflow:hidden;margin-bottom:10px;background:var(--ic-pink-bg,#fff7fa);transition:border-color .22s,box-shadow .22s,transform .22s}
.ic-landing .elementor-accordion .elementor-accordion-item:hover{border-color:#e00189;box-shadow:0 4px 14px rgba(224,1,137,.11);transform:translateY(-2px)}
.ic-landing .elementor-accordion .elementor-tab-title{padding:16px 20px;font-weight:700}
.ic-landing .elementor-accordion .elementor-tab-title.elementor-active{border-bottom:1px dashed var(--ic-border,#f8c8d8)}
.ic-landing .elementor-accordion .elementor-tab-content{border:none;padding:14px 20px 20px;background:#fff}
.ic-landing .elementor-accordion .elementor-tab-content a{color:#e00189;font-weight:700}
.ic-landing .elementor-accordion .elementor-tab-content img{max-width:380px;width:100%;border-radius:10px;margin:10px 0;border:2px solid #f8c8d8}

/* Etsy screenshot caption */
.ic-landing .elementor-image figcaption{font-size:12.5px;color:#888;text-align:center;margin-top:8px;font-style:italic}

/* ---------------- sticky add to cart ---------------- */
.ic-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9990;background:#fff;border-top:1px solid #f3c9d6;box-shadow:0 -4px 20px rgba(0,0,0,.10);transform:translateY(110%);transition:transform .28s ease;padding:10px 0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.ic-sticky.is-on{transform:translateY(0)}
.ic-sticky[hidden]{display:block}
.ic-sticky-in{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:14px;justify-content:space-between}
.ic-sticky-info{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
.ic-sticky-thumb{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid #f8c8d8;flex:0 0 52px}
.ic-sticky-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.ic-sticky-name{font-family:'Nunito',sans-serif;font-size:14px;font-weight:700;color:#333;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.ic-sticky-price{font-family:'Nunito',sans-serif;font-size:16px;font-weight:800;color:#e00189;line-height:1.2}
.ic-sticky-price del{color:#aaa;font-weight:600;font-size:13.5px;margin-left:4px}
.ic-sticky-price del .woocommerce-Price-amount{color:#aaa}
.ic-sticky-btn{display:inline-block;background:#e00189;color:#fff!important;font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:14px 30px;border-radius:8px;text-decoration:none;white-space:nowrap;transition:background .18s,transform .15s}
.ic-sticky-btn:hover{background:#b30070;transform:translateY(-1px);color:#fff!important}

@media (max-width:600px){
  .ic-sticky-in{gap:10px;padding:0 12px}
  .ic-sticky-thumb{width:44px;height:44px;flex:0 0 44px}
  .ic-sticky-name{font-size:12.5px;max-width:38vw}
  .ic-sticky-price{font-size:14.5px}
  .ic-sticky-btn{padding:12px 16px;font-size:12px;letter-spacing:.03em}
}
@media (max-width:360px){
  .ic-sticky-name{display:none}
}

@media (prefers-reduced-motion:reduce){
  .ic-sticky,.ic-top{transition:none}
}

/* ---------------- back to top (Astra's button, branded) ---------------- */
#ast-scroll-top{background:#e00189!important;color:#fff!important;border-radius:50%!important;width:44px!important;height:44px!important;line-height:44px!important;box-shadow:0 4px 14px rgba(224,1,137,.35)!important;bottom:84px!important;right:16px!important;display:flex!important;align-items:center;justify-content:center;transition:background .18s,transform .18s}
#ast-scroll-top:hover{background:#b30070!important;transform:translateY(-2px)}
#ast-scroll-top:focus-visible{outline:3px solid #f8c8d8;outline-offset:2px}
#ast-scroll-top .ast-arrow-svg{fill:#fff!important;width:17px!important;height:auto}
@media (max-width:600px){#ast-scroll-top{bottom:80px!important;right:12px!important;width:40px!important;height:40px!important;line-height:40px!important}}

/* ---------------- product gallery safety ---------------- */
/* WooCommerce ships the gallery at opacity:0 and fades it in with JS.
   If that script is slow or blocked the main image never shows, so we
   make visibility the default and let the JS do the rest. */
.woocommerce div.product div.images.woocommerce-product-gallery{opacity:1!important}
.woocommerce-product-gallery__image img{width:100%;height:auto;border-radius:10px}

/* ---------------- header identity ---------------- */
/* The logo image already contains the wordmark, so the text title is a
   visual duplicate. Keep it for screen readers and search engines. */
.ast-site-identity .ast-site-title-wrap{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.site-header .custom-logo-link img{max-width:190px;height:auto}
@media (max-width:768px){.site-header .custom-logo-link img{max-width:140px}}

/* ---------------- gallery thumbnails ---------------- */
/* WooCommerce lays the flexslider thumbnails out as a 4-column grid. With
   62 images that is a wall of thumbnails on a phone, so make it a single
   swipeable strip -- the same shape the old Shopify gallery had. */
.woocommerce div.product .flex-control-thumbs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px;margin:14px 0 0!important;padding:0 0 8px!important;list-style:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#f8c8d8 transparent}
.woocommerce div.product .flex-control-thumbs::-webkit-scrollbar{height:6px}
.woocommerce div.product .flex-control-thumbs::-webkit-scrollbar-thumb{background:#f8c8d8;border-radius:4px}
.woocommerce div.product .flex-control-thumbs li{flex:0 0 76px!important;width:76px!important;margin:0!important;padding:0!important;float:none!important;list-style:none;scroll-snap-align:start}
.woocommerce div.product .flex-control-thumbs li img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:2px solid transparent;opacity:.75;transition:opacity .18s,border-color .18s;cursor:pointer}
.woocommerce div.product .flex-control-thumbs li img:hover{opacity:1}
.woocommerce div.product .flex-control-thumbs li img.flex-active{opacity:1;border-color:#e00189}
@media (max-width:600px){.woocommerce div.product .flex-control-thumbs li{flex:0 0 64px!important;width:64px!important}.woocommerce div.product .flex-control-thumbs li img{width:64px;height:64px}}

/* the gallery box is the positioning context for the thumbnail nav */
.woocommerce-product-gallery,
.woocommerce-product-gallery .flex-viewport{position:relative}

/* the thumbnail strip has to be able to scroll, on touch as well as click */
.flex-control-thumbs{overflow-x:auto!important;-webkit-overflow-scrolling:touch}


/* ic-gal-touch: FlexSlider never set touch-action here, so on a phone the
   browser panned the page at the same time as the slider dragged the
   strip -- the two fought each other and a swipe landed several photos
   away. pan-y hands horizontal gestures to the slider and keeps vertical
   scrolling with the page. */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper{touch-action:pan-y}
.woocommerce-product-gallery__image img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}

/* ic-thumb-nav: the thumbnail strip gets its own pair of arrows, so it can
   be walked with a mouse as well as a finger, and so it is obvious on a
   phone that there are more patterns further along. */
.ic-thumbs{position:relative}
.ic-thumb-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;font:inherit;font-size:13px;line-height:1;background:#fff;color:#ad1457;border:1.5px solid #f8c8d8;border-radius:50%;box-shadow:0 3px 10px rgba(0,0,0,.16);cursor:pointer;transition:background .15s ease,color .15s ease}
.ic-thumb-arrow:hover,.ic-thumb-arrow:focus-visible{background:#fff0f7;color:#e00189;outline:none}
.ic-thumb-arrow[hidden]{display:none}
.ic-thumb-prev{left:0}
.ic-thumb-next{right:0}
/* keep the first and last thumbnail clear of the buttons */
.ic-thumbs.has-nav .flex-control-thumbs{scroll-padding-left:36px;scroll-padding-right:36px}
.ic-thumbs.has-nav .flex-control-thumbs::before,
.ic-thumbs.has-nav .flex-control-thumbs::after{content:'';flex:0 0 26px}
@media (max-width:600px){.ic-thumb-arrow{width:28px;height:28px;font-size:12px}}

/* ============================ gallery: INITIALIZING ======================
   The server prints .ic-gal-init on the gallery, so this state is in force
   from the first byte of HTML -- no script has to run for it to hold, and
   no amount of delay can defeat it. While it is on:
     - the gallery is a fixed square box, the size of one product image
     - the wrapper cannot be widened by FlexSlider's inline width
     - slides two to sixty-two cannot paint at all
     - the first slide fills the box, at full opacity, not lazy-loaded
   ic-gallery.js removes the class once the slider has actually sized its
   slides, and every rule below switches off together at that moment. */
.woocommerce-product-gallery.ic-gal-init{position:relative;aspect-ratio:1/1;overflow:hidden}
.woocommerce-product-gallery.ic-gal-init .flex-viewport{width:100%!important;max-width:100%!important;height:auto!important;overflow:hidden}
.woocommerce-product-gallery.ic-gal-init .woocommerce-product-gallery__wrapper{width:100%!important;max-width:100%!important;margin:0!important;transform:none!important}
.woocommerce-product-gallery.ic-gal-init .woocommerce-product-gallery__image{display:none!important}
.woocommerce-product-gallery.ic-gal-init .woocommerce-product-gallery__image:first-child{display:block!important;position:static!important;float:none!important;width:100%!important;max-width:100%!important;margin:0!important}
.woocommerce-product-gallery.ic-gal-init .woocommerce-product-gallery__image:first-child img{display:block!important;width:100%!important;max-width:100%!important;height:auto!important}
.woocommerce-product-gallery.ic-gal-init .flex-control-nav{display:none!important}
.woocommerce-product-gallery.ic-gal-init .ic-thumb-arrow{display:none!important}

/* One thumbnail per flick. Snap points alone only decide where a scroll may
   come to rest; a fast swipe on a phone sails past four or five of them
   before momentum runs out. scroll-snap-stop makes each thumbnail a hard
   stop, so a swipe moves one image whether it is slow or quick, in both
   directions. */
.flex-control-thumbs li{scroll-snap-align:start;scroll-snap-stop:always}