/* Garnserier use the same visual language and modules as the standard Glapris PDP. */ body.has-glp-yarn-series #content.site-content, body.has-glp-yarn-series #content.site-content > .ast-container, body.has-glp-yarn-series #primary, body.has-glp-yarn-series #main.site-main { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff; } body.has-glp-yarn-series .ast-header-breadcrumb { display: none; } .glp-yarn { --glp-success: #2d8a4e; --glp-error: #d93025; } .glp-yarn button, .glp-yarn input { font: inherit; } .glp-yarn__empty { padding: 40px 0 80px; } .glp-yarn-gallery .glp-gallery__img { transition: opacity .16s ease; } .glp-yarn-gallery .glp-gallery__img.is-changing { opacity: .28; } .glp-yarn__buy { min-width: 0; } .glp-yarn .glp-buy__title { margin-bottom: 7px; } .glp-yarn .glp-buy__price-block { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; } .glp-yarn__price-note { color: var(--glp-grey-500); font-size: 12px; } .glp-yarn__buy-intro { margin: 0; color: var(--glp-grey-600); font-size: 13px; line-height: 1.55; } .glp-yarn__buy-actions { display: grid; grid-template-columns: 1fr 48px; gap: 10px; margin-top: 18px; } .glp-yarn__jump { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; background: var(--glp-orange); box-shadow: var(--glp-cta-shadow); color: #fff !important; font-size: 15px; font-weight: 800; text-decoration: none; transition: background .2s, transform .2s; } .glp-yarn__jump:hover { background: var(--glp-orange-dark); transform: translateY(-1px); } .glp-yarn__wish { width: 48px !important; height: 50px !important; border: 1.5px solid var(--glp-grey-200) !important; border-radius: 999px !important; background: #fff !important; color: var(--glp-charcoal) !important; } .glp-yarn__wish.is-active { border-color: var(--glp-orange) !important; color: var(--glp-orange) !important; } .glp-yarn .glp-buy__payments { margin: 16px 0 17px; } .glp-yarn .glp-trust { margin: 0; } /* Semantic product facts sit inside the normal description card. */ .glp-yarn__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 20px 0 0; border-top: 1px solid var(--glp-grey-100); } .glp-yarn__facts > div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--glp-grey-100); } .glp-yarn__facts > div:nth-child(odd) { padding-right: 16px; } .glp-yarn__facts > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--glp-grey-100); } .glp-yarn__facts dt { color: var(--glp-grey-500); font-size: 11px; font-weight: 650; } .glp-yarn__facts dd { margin: 0; color: var(--glp-charcoal); font-size: 12px; font-weight: 700; text-align: right; } .glp-yarn__facts a { color: var(--glp-orange-dark); } .glp-yarn__color-list { padding-top: 13px; } .glp-yarn__color-list summary { color: var(--glp-orange-dark); cursor: pointer; font-size: 12px; font-weight: 700; } .glp-yarn__color-list p { margin: 10px 0 0; color: var(--glp-grey-500); font-size: 11px; line-height: 1.7; } /* Colour and quantity picker. */ .glp-yarn__picker { margin-top: 42px; overflow: hidden; border: 1px solid var(--glp-grey-100); border-radius: 16px; background: #fff; scroll-margin-top: 18px; } .glp-yarn__picker-head { padding: 26px 26px 18px; } .glp-yarn__picker-head h2 { margin: 0; font-family: var(--glp-display); font-size: 29px; font-weight: 700; line-height: 1; letter-spacing: -.25px; text-transform: uppercase; } .glp-yarn__picker-head p { margin: 6px 0 0; color: var(--glp-grey-500); font-size: 13px; } .glp-yarn__fulfilment { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--glp-grey-100); border-bottom: 1px solid var(--glp-grey-100); } .glp-yarn__fulfilment-choice { display: grid; grid-template-columns: 32px 1fr 20px; align-items: center; gap: 10px; width: 100%; min-height: 76px; padding: 14px 18px; border: 0; background: #fff; color: var(--glp-charcoal); cursor: pointer; text-align: left; } .glp-yarn__fulfilment > .glp-yarn__fulfilment-choice:first-child { border-right: 1px solid var(--glp-grey-100); } .glp-yarn__fulfilment-choice > span:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .glp-yarn__fulfilment-choice strong { font-size: 13px; font-weight: 750; } .glp-yarn__fulfilment-choice small { color: var(--glp-grey-500); font-size: 11px; line-height: 1.35; } .glp-yarn__fulfilment-icon { display: grid; place-items: center; color: var(--glp-grey-500); } .glp-yarn__fulfilment-check { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--glp-grey-300); border-radius: 50%; color: transparent; font-size: 11px; } .glp-yarn__fulfilment-choice.is-active { background: #fffaf5; } .glp-yarn__fulfilment-choice.is-active .glp-yarn__fulfilment-icon { color: var(--glp-orange-dark); } .glp-yarn__fulfilment-choice.is-active .glp-yarn__fulfilment-check { border-color: var(--glp-orange); background: var(--glp-orange); color: #fff; } .glp-yarn__fulfilment-choice::before, .glp-yarn__fulfilment-choice::after { display: none !important; content: none !important; } .glp-yarn__fulfilment-choice:hover, .glp-yarn__fulfilment-choice:focus, .glp-yarn__fulfilment-choice:focus-visible { background: #fffaf5 !important; box-shadow: none !important; color: var(--glp-charcoal) !important; transform: none !important; } .glp-yarn__toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 26px; border-top: 1px solid var(--glp-grey-100); border-bottom: 1px solid var(--glp-grey-100); background: #fcfcfb; } .glp-yarn__search { position: relative; margin-right: auto; } .glp-yarn__search > span[aria-hidden] { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--glp-grey-400); font-size: 20px; line-height: 1; } .glp-yarn__search input { width: 230px; height: 40px; padding: 0 14px 0 38px; border: 1.5px solid var(--glp-grey-200); border-radius: 8px; background: #fff; color: var(--glp-charcoal); font-size: 12.5px; } .glp-yarn__only-stock { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 3px; border: 0; background: transparent; color: var(--glp-grey-700); cursor: pointer; font-size: 12.5px; font-weight: 650; } .glp-yarn__only-stock:hover, .glp-yarn__only-stock:focus { border: 0; background: transparent !important; box-shadow: none !important; color: var(--glp-charcoal) !important; transform: none !important; } .glp-yarn__checkbox { display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--glp-grey-300); border-radius: 4px; background: #fff; } .glp-yarn__only-stock.is-active .glp-yarn__checkbox { border-color: var(--glp-orange); background: var(--glp-orange); } .glp-yarn__only-stock.is-active .glp-yarn__checkbox::after { content: '✓'; color: #fff; font-size: 12px; line-height: 1; } .glp-yarn__sort { display: flex; padding: 3px; border: 1.5px solid var(--glp-grey-200); border-radius: 999px; background: var(--glp-grey-50); } .glp-yarn__sort button { min-height: 30px; padding: 5px 13px; border: 0; border-radius: 999px; background: transparent; color: var(--glp-grey-500); cursor: pointer; font-size: 12px; font-weight: 650; } .glp-yarn__sort button.is-active { background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.09); color: var(--glp-charcoal); } .glp-yarn__sort button:hover, .glp-yarn__sort button:focus { border: 0; background: #fff !important; box-shadow: none !important; color: var(--glp-charcoal) !important; transform: none !important; } .glp-yarn__grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(176px,1fr)); gap: 18px 12px; padding: 24px 26px 30px; } .glp-yarn-card { display: flex; min-width: 0; flex-direction: column; padding: 8px; border: 1px solid transparent; border-radius: 10px; background: #fff; transition: opacity .15s; } .glp-yarn-card.is-mode-unavailable { opacity: 1; } .glp-yarn-card[hidden] { display: none; } .glp-yarn-card, .glp-yarn-card__select, .glp-yarn-card__media { box-shadow: none !important; } .glp-yarn-card::before, .glp-yarn-card::after, .glp-yarn-card__select::before, .glp-yarn-card__select::after, .glp-yarn-card__media::before, .glp-yarn-card__media::after { display: none !important; content: none !important; } .glp-yarn-card__select { display: flex; flex: 1; flex-direction: column; align-items: stretch; width: 100%; padding: 0; border: 0; border-radius: 0; outline-offset: 2px; appearance: none; background: transparent !important; color: inherit; cursor: pointer; text-align: left; } .glp-yarn-card__media { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 10px; overflow: hidden; border-radius: 7px; background: #f7f5f2; } .glp-yarn-card__media img { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; mix-blend-mode: normal; filter: none !important; transform: none !important; transition: none; } .glp-yarn-card__copy { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; min-height: 45px; } .glp-yarn-card__copy strong { min-width: 0; overflow: hidden; color: var(--glp-charcoal); font-size: 13px; font-weight: 650; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .glp-yarn-card__copy > span { color: var(--glp-grey-500); font-size: 10.5px; } .glp-yarn-card__stock { display: flex; min-height: 38px; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; margin-top: 2px; } .glp-yarn-card__stockline { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; color: var(--glp-success); font-size: 10.5px; font-weight: 600; line-height: 1.3; text-align: left; } .glp-yarn-card__stockline > span:first-child { width: 6px; height: 6px; flex: 0 0 6px; margin-top: 3px; border-radius: 50%; background: currentColor; } .glp-yarn-card__stockline.is-out { color: var(--glp-error); } .glp-yarn-card__storeline { cursor: pointer; } .glp-yarn-card__storeline.is-prompt { color: var(--glp-orange-dark); } .glp-yarn-card__storeline:hover, .glp-yarn-card__storeline:focus, .glp-yarn-card__storeline:focus-visible { border: 0; background: transparent !important; box-shadow: none !important; color: var(--glp-orange-dark) !important; outline-offset: 2px; transform: none !important; } .glp-yarn-card__storeline:hover span:last-child { text-decoration: underline; text-underline-offset: 2px; } .glp-yarn-card__actions { display: grid; gap: 5px; margin-top: 5px; } .glp-yarn-card__add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 38px; border: 0; border-radius: 999px; background: var(--glp-orange); box-shadow: 0 3px 9px rgba(245,130,32,.2); color: #fff; cursor: pointer; font-size: 12px; font-weight: 750; transition: background .2s, transform .2s; } .glp-yarn-card__add:disabled { border: 1px solid var(--glp-grey-200); background: var(--glp-grey-50); box-shadow: none; color: var(--glp-grey-400); cursor: not-allowed; } .glp-yarn-stepper { display: none; grid-template-columns: 38px 1fr 38px; width: 100%; height: 38px; overflow: hidden; border: 1.5px solid var(--glp-orange); border-radius: 999px; background: #fff; } .glp-yarn-card.has-quantity .glp-yarn-card__add { display: none; } .glp-yarn-card.has-quantity .glp-yarn-stepper { display: grid; } .glp-yarn-card__waitlist { display: none; width: 100%; min-height: 38px; padding: 5px 8px; border: 1.5px solid var(--glp-orange); border-radius: 999px; background: #fff; color: var(--glp-orange-dark); cursor: pointer; font-size: 10.5px; font-weight: 750; line-height: 1.2; } .glp-yarn-card.can-waitlist:not(.has-quantity) .glp-yarn-card__waitlist { display: block; } .glp-yarn-card.is-mode-unavailable.can-waitlist:not(.has-quantity) .glp-yarn-card__add { display: none; } .glp-yarn-stepper button, .glp-yarn-stepper input { display: grid; place-items: center; min-width: 0; border: 0; background: #fff; color: var(--glp-orange-dark); line-height: 1; } .glp-yarn-stepper button { cursor: pointer; font-size: 17px; } .glp-yarn-stepper button:disabled { color: var(--glp-grey-300); cursor: not-allowed; } .glp-yarn-stepper input { width: 100%; padding: 0; color: var(--glp-charcoal); font-family: var(--glp-display); font-size: 16px; font-weight: 750; text-align: center; appearance: textfield; -moz-appearance: textfield; } .glp-yarn-stepper input::-webkit-inner-spin-button, .glp-yarn-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; -webkit-appearance: none; } .glp-yarn__no-results { margin: 0 26px 24px; padding: 32px; border-radius: 10px; background: var(--glp-grey-50); color: var(--glp-grey-500); text-align: center; } .glp-yarn-waitlist { margin: 0; } .glp-yarn-waitlist [data-yarn-alert-option][hidden] { display: none !important; } .glp-yarn__cart-summary { padding: 13px 26px; border-top: 1px solid var(--glp-grey-100); font-size: 13px; } .glp-yarn__cart-summary[hidden] { display: none; } .glp-yarn__cart-summary a { color: var(--glp-orange-dark); font-weight: 750; text-decoration: none; } .glp-yarn__message { margin: 0 26px 18px; padding: 9px 10px; border-radius: 5px; background: #ecf7ef; color: #176b35; font-size: 12px; } .glp-yarn__message.is-error { background: #fff0ef; color: #ad291f; } .glp-yarn-cart-color { display: block; margin-top: 3px; color: #6b6b6b; font-size: 11px; font-weight: 500; } .glp-yarn__recommendations { margin-top: 42px; } .glp-yarn__recommendations .glp-rail { margin-top: 0; } @media (hover:hover) and (min-width:922px) { .glp-yarn-card, .glp-yarn-card:hover { border-color: transparent; background: #fff; box-shadow: none !important; filter: none !important; transform: none !important; } .glp-yarn-card__select:hover, .glp-yarn-card__select:focus { border: 0; background: transparent !important; box-shadow: none !important; color: inherit !important; filter: none !important; transform: none !important; } .glp-yarn__grid button::before, .glp-yarn__grid button::after { display: none !important; content: none !important; } .glp-yarn-card__add:hover:not(:disabled) { background: var(--glp-orange-dark) !important; color: #fff !important; transform: translateY(-1px); } .glp-yarn-card__waitlist:hover { background: #fff7ef !important; color: var(--glp-orange-dark) !important; transform: none !important; } .glp-yarn-stepper button:hover { border: 0; background: #fff !important; box-shadow: none !important; color: var(--glp-orange-dark) !important; transform: none !important; } } @media (max-width:921px) { .glp-yarn { padding-right: 0; padding-left: 0; } .glp-yarn .glp-pdp__breadcrumbs, .glp-yarn .glp-pdp__main, .glp-yarn__picker, .glp-yarn__recommendations { margin-right: 18px; margin-left: 18px; } .glp-yarn .glp-pdp__main { display: flex; flex-direction: column; gap: 20px; } .glp-yarn .glp-gallery, .glp-yarn .glp-pdp__buyarea, .glp-yarn .glp-desc { width: 100%; } .glp-yarn .glp-pdp__buyarea { position: static; } .glp-yarn__toolbar { flex-wrap: wrap; justify-content: flex-start; } .glp-yarn__fulfilment { grid-template-columns: 1fr; } .glp-yarn__fulfilment > .glp-yarn__fulfilment-choice:first-child { border-right: 0; border-bottom: 1px solid var(--glp-grey-100); } .glp-yarn__search { width: 100%; margin: 0; } .glp-yarn__search input { width: 100%; } } @media (max-width:560px) { .glp-yarn .glp-pdp__breadcrumbs, .glp-yarn .glp-pdp__main, .glp-yarn__picker, .glp-yarn__recommendations { margin-right: 14px; margin-left: 14px; } .glp-yarn__facts { grid-template-columns: 1fr; } .glp-yarn__facts > div:nth-child(n) { padding: 9px 0; border-left: 0; } .glp-yarn__picker { margin-top: 30px; overflow: visible; border: 0; border-radius: 0; } .glp-yarn__picker-head { padding: 10px 0 14px; } .glp-yarn__picker-head h2 { font-size: 24px; } .glp-yarn__fulfilment { margin: 0; } .glp-yarn__fulfilment-choice { min-height: 68px; padding: 11px 8px; grid-template-columns: 28px 1fr 18px; gap: 7px; } .glp-yarn__toolbar { gap: 10px; padding: 12px 0; border-bottom: 0; background: #fff; } .glp-yarn__only-stock { margin-right: auto; } .glp-yarn__sort { order: 3; width: 100%; } .glp-yarn__sort button { flex: 1; padding-right: 6px; padding-left: 6px; } .glp-yarn__grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px 6px; padding: 12px 0 20px; } .glp-yarn-card { padding: 0; border: 0; border-radius: 0; } .glp-yarn-card__media { margin-bottom: 7px; border-radius: 5px; } .glp-yarn-card__media img { padding: 2px; } .glp-yarn-card__copy { display: flex; min-height: 53px; flex-direction: column; align-items: center; gap: 1px; text-align: center; } .glp-yarn-card__copy strong { max-width: 100%; font-size: 10.5px; } .glp-yarn-card__copy > span { font-size: 9.5px; } .glp-yarn-card__stock { min-height: 34px; gap: 2px; } .glp-yarn-card__stockline { gap: 4px; font-size: 8px; line-height: 1.25; } .glp-yarn-card__stockline > span:first-child { width: 5px; height: 5px; flex-basis: 5px; margin-top: 2px; } .glp-yarn-card__actions { margin-top: 3px; } .glp-yarn-card__add { height: 34px; padding: 0 3px; font-size: 10px; } .glp-yarn-card__waitlist { min-height: 34px; padding: 3px; font-size: 8.5px; } .glp-yarn-stepper { grid-template-columns: 29px 1fr 29px; height: 34px; } .glp-yarn__cart-summary { padding: 12px 0; } .glp-yarn__message { margin: 0 0 12px; } .glp-yarn__recommendations { margin-top: 30px; } } /* ── Catalog/PDP card parity (2026-07-22) — give each colour a defined product-card frame + match stock dots ── */ @media (min-width:922px){ .glp-yarn__grid .glp-yarn-card{padding:10px;border:1.5px solid var(--glp-grey-100)!important;border-radius:10px;background:#fff;transition:box-shadow .2s,transform .2s;} .glp-yarn__grid .glp-yarn-card:hover{border-color:var(--glp-grey-100)!important;box-shadow:0 8px 32px rgba(0,0,0,.10)!important;transform:translateY(-2px)!important;} } @media(min-width:922px){.glp-yarn-card__stockline{font-size:11.5px;font-weight:500;}} .glp-yarn-card__storeline.is-prompt{color:var(--glp-orange);} .glp-yarn-card__storeline.is-prompt>span:first-child{background:var(--glp-orange);} /* ── Per-colour add-to-handleliste heart (2026-07-22) ── */ .glp-yarn-card{position:relative;} .glp-yarn-card__heart{position:absolute;top:8px;right:8px;z-index:3;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 1px 6px rgba(0,0,0,.16);color:var(--glp-grey-500);cursor:pointer;transition:color .15s,transform .15s;} .glp-yarn-card__heart svg{width:16px;height:16px;} .glp-yarn-card__heart:hover{color:var(--glp-orange);transform:translateY(-1px);} .glp-yarn-card__heart.is-active{color:var(--glp-orange);} .glp-yarn-card__heart.is-active svg{fill:currentColor;} .glp-yarn-card__ti{display:none!important;} /* ── Mobile order / font / wrapping fixes (2026-07-22 iter 3) ── */ /* Product image at the TOP on mobile (was rendering below title/CTA via order:1) */ @media (max-width:921px){ .glp-yarn .glp-gallery{order:-1!important;} .glp-yarn .glp-pdp__buyarea{order:0!important;} } /* Numbers use the site body font (Inter is loaded; Antonio was not) — matches catalog cards */ .glp-yarn .glp-buy__price{font-family:var(--glp-body)!important;} .glp-yarn-stepper input{font-family:var(--glp-body)!important;font-weight:700;} .glp-yarn__picker-head h2{font-family:var(--glp-body)!important;font-weight:800;letter-spacing:-.01em;} /* Mobile: stock lines on ONE line, tidy add button, no overflowing "+" */ @media (max-width:560px){ .glp-yarn-card__stockline{font-size:8px;font-weight:600;flex-wrap:nowrap;} .glp-yarn-card__stockline>span:last-child{white-space:nowrap;} .glp-yarn-card__add{gap:4px;padding:0 6px;white-space:nowrap;overflow:hidden;} .glp-yarn-card__add>span[aria-hidden]{display:none;} } /* Force stockline size on the store