.elementor-4208 .elementor-element.elementor-element-15e6f2af{--display:flex;--overflow:hidden;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4208 .elementor-element.elementor-element-d53528d{--display:flex;}.elementor-4208 .elementor-element.elementor-element-66550ef{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4208 .elementor-element.elementor-element-e94ae7b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-4208 .elementor-element.elementor-element-7cdf5a03{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4208 .elementor-element.elementor-element-615e31e2{--display:flex;}.elementor-widget-woocommerce-product-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.woocommerce .elementor-widget-woocommerce-product-price .price{color:var( --e-global-color-primary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-woocommerce-product-add-to-cart .added_to_cart{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-4208 .elementor-element.elementor-element-5938ce90 .cart button, .elementor-4208 .elementor-element.elementor-element-5938ce90 .cart .button{transition:all 0.2s;}.elementor-4208 .elementor-element.elementor-element-5938ce90 .quantity .qty{transition:all 0.2s;}.elementor-4208 .elementor-element.elementor-element-49acae3c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4208 .elementor-element.elementor-element-7209bfde{--display:flex;}.elementor-4208 .elementor-element.elementor-element-a1377b7{--display:flex;}.elementor-4208 .elementor-element.elementor-element-206a534{--display:flex;}@media(max-width:767px){.elementor-4208 .elementor-element.elementor-element-7cdf5a03{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-4208 .elementor-element.elementor-element-e94ae7b{--content-width:1350px;}.elementor-4208 .elementor-element.elementor-element-49acae3c{--content-width:1350px;}.elementor-4208 .elementor-element.elementor-element-7209bfde{--content-width:1350px;}.elementor-4208 .elementor-element.elementor-element-a1377b7{--content-width:1350px;}.elementor-4208 .elementor-element.elementor-element-206a534{--content-width:1350px;}}/* Start custom CSS for html, class: .elementor-element-269e6afd *//* ============================================================
   SECTION 01 — GALLERY + BUY BOX
   Append to 00-pdp-styles.css in the container's Custom CSS.
   ============================================================ */

/* ------------------------------------------------------------
   GALLERY  (widget: Product Images)

   IMPORTANT: the product's gallery images are currently studio
   shots on white. On a dark template they render as bright white
   panels. CSS cannot knock a white background out of a JPEG —
   the real fix is uploading transparent PNG/WebP versions to the
   product gallery. Kratos-Rifle-no-bg-1.webp is already in the
   media library and is the right treatment.

   The stage below assumes transparent images. If any gallery
   image still has a white background it will look wrong, and
   that is a content fix, not a CSS one.
   ------------------------------------------------------------ */

.k1 .woocommerce-product-gallery{
  position:relative;padding:40px 24px;
  background:
    radial-gradient(900px 520px at 60% 40%, rgba(168,148,111,.16) 0%, transparent 70%),
    linear-gradient(160deg,#232019 0%,#171614 55%,#0F0E0D 100%);
  border:1px solid var(--hairline);
}
.k1 .woocommerce-product-gallery__image img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.7));
}

/* zoom trigger, so it does not sit as a black blob on dark */
.k1 .woocommerce-product-gallery__trigger{
  background:rgba(19,18,17,.8);border:1px solid var(--hairline);
  color:var(--bone);border-radius:0;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s ease,color .18s ease;
}
.k1 .woocommerce-product-gallery__trigger:hover{border-color:var(--fde-bright);color:var(--fde-bright)}

/* thumbnails */
.k1 .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:10px 0 0;padding:0;list-style:none;
}
.k1 .flex-control-thumbs li{margin:0;width:auto}
.k1 .flex-control-thumbs img{
  display:block;width:100%;height:auto;padding:10px;
  background:var(--gunmetal);border:1px solid var(--hairline);
  opacity:.72;cursor:pointer;
  transition:opacity .18s ease,border-color .18s ease;
}
.k1 .flex-control-thumbs img:hover,
.k1 .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--fde-bright)}

/* ------------------------------------------------------------
   CATEGORY CHIPS  (widget: Product Meta)
   Woo prints "Categories: a, b, c" as inline links. Restyling
   the links as chips and hiding the label reads better here.
   ------------------------------------------------------------ */
.k1 .product_meta .posted_in{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:0;                       /* hides the "Categories:" label text */
  margin-bottom:18px;
}
.k1 .product_meta .posted_in a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border:1px solid var(--hairline);
  color:var(--bone-dim);text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.k1 .product_meta .posted_in a:hover{border-color:var(--fde-bright);color:var(--fde-bright)}

/* SKU stays as a quiet line under the button */
.k1 .product_meta .sku_wrapper{display:block;font-size:12px;margin-top:4px}

/* ------------------------------------------------------------
   ASSURANCE LIST  (HTML widget, markup in 01-pdp-assurance.html)
   ------------------------------------------------------------ */
.k1 .assure{display:grid;gap:12px;margin:22px 0 0;padding-top:20px;
            border-top:1px solid var(--hairline);list-style:none}
.k1 .assure li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
               font-size:14px;color:var(--bone-dim);line-height:1.45}
.k1 .assure b{color:var(--bone);font-weight:600;display:block;font-size:14px;margin-bottom:1px}
.k1 .assure svg{width:16px;height:16px;color:var(--fde-bright);margin-top:2px;flex:0 0 auto}

/* ------------------------------------------------------------
   RESPONSIVE
   Elementor handles the column stack; these are the details it
   will not know about.
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .k1 .woocommerce-product-gallery{padding:28px 18px}
}
@media (max-width:640px){
  .k1 .flex-control-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .k1 form.cart{flex-wrap:wrap}
  .k1 form.cart button.single_add_to_cart_button{flex:1 1 100%}
  .k1 .price,.k1 .woocommerce-Price-amount{font-size:28px}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e94ae7b *//* ============================================================
   SECTION 02 — PDP HERO  +  PURCHASE AREA
   Append to the container's Custom CSS.
   ============================================================ */

/* ------------------------------------------------------------
   HERO
   Build it in Elementor so it stays dynamic across every tagged
   product — do NOT hardcode the name in an HTML widget:

     Container  (CSS class: pdp-hero)
       Heading      -> Dynamic Tags > Product Title
       Text Editor  -> Dynamic Tags > Product Short Description
                       (or a static config line)

   Container settings: full width, min-height 320px,
   content vertical-align: center, no padding (CSS handles it).
   ------------------------------------------------------------ */

.k1 .pdp-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:96px 0 72px;margin-bottom:56px;
  border-bottom:1px solid var(--hairline);
  background:
    radial-gradient(1100px 640px at 74% 44%, rgba(168,148,111,.22) 0%,
                                             rgba(168,148,111,.07) 44%, transparent 72%),
    radial-gradient(760px 520px at 8% 6%,   rgba(235,231,223,.07) 0%, transparent 62%),
    radial-gradient(900px 700px at 50% 118%, rgba(179,40,45,.10) 0%, transparent 66%),
    linear-gradient(158deg,#26221E 0%,#1B1917 34%,#131211 64%,#0B0A09 100%);
}

/* grain, so the gradient does not band on 8-bit displays */
.k1 .pdp-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

.k1 .pdp-hero h1,
.k1 .pdp-hero .elementor-heading-title{
  font-family:var(--font-display)!important;
  font-size:clamp(34px,5vw,62px)!important;
  line-height:1.05!important;letter-spacing:-.017em!important;
  text-transform:uppercase!important;color:var(--bone)!important;
  max-width:18ch;margin:0 0 18px;
}
.k1 .pdp-hero p,
.k1 .pdp-hero .elementor-widget-text-editor{
  color:var(--bone-dim);font-size:17px;line-height:1.6;max-width:46ch;
}

@media (max-width:1024px){
  .k1 .pdp-hero{padding:64px 0 52px;margin-bottom:36px}
  .k1 .pdp-hero h1,.k1 .pdp-hero .elementor-heading-title{max-width:none}
}

/* ------------------------------------------------------------
   PURCHASE AREA

   The !important flags below are deliberate. Elementor writes
   per-element rules (.elementor-element-xxxxx .product_title)
   that outrank a plain .k1 descendant .elementor-4208 .elementor-element.elementor-element-e94ae7b. The alternative
   is setting each colour in every widget's Style tab, which
   scatters the design across a dozen panels instead of one file.
   ------------------------------------------------------------ */

/* title was rendering dark on dark */
.k1 .elementor-widget-woocommerce-product-title .product_title,
.k1 .elementor-widget-woocommerce-product-title h1,
.k1 .elementor-widget-woocommerce-product-title h2{
  color:var(--bone)!important;
  font-family:var(--font-display)!important;
  letter-spacing:-.017em!important;
  text-transform:uppercase!important;
  line-height:1.05!important;
}

/* give the buy box a body instead of floating on the background */
.k1 .pdp-buybox{
  background:linear-gradient(180deg,#201E1B 0%,#1A1917 100%);
  border:1px solid var(--hairline);
  padding:32px;
}

.k1 .elementor-widget-woocommerce-product-price .price,
.k1 .elementor-widget-woocommerce-product-price .woocommerce-Price-amount{
  color:var(--bone)!important;
  font-family:'IBM Plex Mono',monospace!important;
}

/* quantity: match the button height exactly, kill the theme's rounding */
.k1 form.cart .quantity,
.k1 form.cart .quantity input.qty{border-radius:0!important;height:56px}
.k1 form.cart .quantity input.qty{
  width:72px!important;background:var(--panel)!important;color:var(--bone)!important;
  border:1px solid var(--hairline)!important;
}
.k1 form.cart button.single_add_to_cart_button{
  min-height:56px!important;border-radius:0!important;
  background:var(--crimson)!important;color:#fff!important;
  letter-spacing:.08em!important;
}
.k1 form.cart button.single_add_to_cart_button:hover{background:#911F24!important}

/* the FFL / shipping note under the button */
.k1 .pdp-note{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline);
  font-size:14px;line-height:1.6;color:var(--bone-dim);max-width:58ch;
}

@media (max-width:640px){
  .k1 .pdp-buybox{padding:22px 18px}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-300c1b64 *//* ============================================================
   SECTION 04 — CONTENT GALLERY
   Append to the container's Custom CSS.
   ============================================================ */

.k1 .pgal{padding:72px 0}

.k1 .pgal-grid{
  display:grid;gap:14px;margin-top:36px;
  grid-template-columns:repeat(3,1fr);
}
.k1 .pgal-lead{grid-column:1 / -1}

.k1 .pgal-item{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--hairline);background:var(--gunmetal);
}
.k1 .pgal-item img{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:3/2;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.k1 .pgal-lead img{aspect-ratio:21/9}
.k1 .pgal-item:hover img{transform:scale(1.035)}

/* caption: mono tag pinned bottom-left over a local gradient */
.k1 .pgal-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,transparent 0%,rgba(10,10,11,.82) 100%);
  pointer-events:none;
}

.k1 .pgal-item:focus-visible{outline:2px solid var(--fde-bright);outline-offset:3px}

@media (max-width:900px){
  .k1 .pgal{padding:52px 0}
  .k1 .pgal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .k1 .pgal-lead{grid-column:1 / -1}
}
@media (max-width:560px){
  .k1 .pgal-grid{grid-template-columns:1fr}
  .k1 .pgal-item img{aspect-ratio:16/10}
}

/* scroll reveal, same double guard as the landing page */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .k1 .pgal-item{
      opacity:0;animation:pgal-in linear both;
      animation-timeline:view();animation-range:entry 8% cover 26%;
    }
    .k1 .pgal-item:nth-child(2){animation-range:entry 8% cover 32%}
    .k1 .pgal-item:nth-child(3){animation-range:entry 8% cover 38%}
    .k1 .pgal-item:nth-child(4){animation-range:entry 8% cover 44%}
    @keyframes pgal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7418ccfa *//* ============================================================
   SECTION 05 — FEATURE BLOCKS
   Append to the container's Custom CSS.
   ============================================================ */

.k1 .pfeat{padding:72px 0 8px}

.k1 .feat{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;
  padding:38px 0;border-top:1px solid var(--hairline);
}
.k1 .pfeat .feat:first-of-type{margin-top:34px}

.k1 .feat h3{font-size:clamp(20px,2.2vw,27px);margin:0 0 10px}
.k1 .feat-copy p{font-size:15px;line-height:1.6;max-width:46ch;margin:0}

.k1 .feat-list{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.k1 .feat-list li{
  position:relative;padding-left:20px;
  font-size:15px;color:var(--bone-dim);line-height:1.5;
}
.k1 .feat-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--fde-bright);
}

@media (max-width:1024px){
  .k1 .pfeat{padding:52px 0 8px}
  .k1 .feat{grid-template-columns:1fr;gap:16px;padding:30px 0}
}

/* reveal, same double guard */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .k1 .feat{
      opacity:0;animation:feat-in linear both;
      animation-timeline:view();animation-range:entry 8% cover 24%;
    }
    @keyframes feat-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-063df15 *//* ============================================================
   SECTION 06 — SPECIFICATIONS
   Append to the container's Custom CSS.
   ============================================================ */

.k1 .pspec{padding:64px 0 72px}

.k1 .spec-table{
  margin-top:34px;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:56px;
  border-top:1px solid var(--hairline);
}
.k1 .spec-row{
  display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--hairline);
}
.k1 .spec-k{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);
  flex:0 0 auto;
}
.k1 .spec-v{
  font-size:15px;color:var(--bone);text-align:right;font-weight:500;
}

.k1 .spec-note{
  margin-top:22px;font-size:13px;color:var(--bone-dim);
  font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;max-width:64ch;
}

@media (max-width:820px){
  .k1 .pspec{padding:48px 0 56px}
  .k1 .spec-table{grid-template-columns:1fr;column-gap:0}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-15e6f2af *//* ==================== 00-pdp-styles.css ==================== */
/* ============================================================
   KRATOS PRODUCT TEMPLATE — STYLES
   Elementor Theme Builder > Single Product template.

   WHERE THIS GOES
   Outer container > Advanced > Custom CSS
   Same container > Advanced > CSS Classes:  k1

   Everything is scoped under .k1, so this cannot leak into the
   theme header, footer, cart, checkout, or untagged products.

   NOTE ON SELECTORS
   The rules below target Elementor's WooCommerce widget output
   (.elementor-widget-woocommerce-*) and Woo's own classes
   (.product_title, .price, .cart, .qty). Those are stable, but
   verify against the rendered markup on the live template —
   themes occasionally wrap them differently.
   ============================================================ */

.k1{
  --ink:#131211;
  --gunmetal:#1E1C1A;
  --panel:#262320;
  --bone:#EBE7DF;
  --bone-dim:#B5B0A6;
  --fde:#8C7A5B;
  --fde-bright:#A8946F;
  --crimson:#B3282D;
  --green:#3E7A4E;
  --amber:#C08A2D;
  --hairline:rgba(235,231,223,.14);
  --font-display:"Thunder Squad","Archivo Black",sans-serif;

  background:var(--ink);
  color:var(--bone);
  font-family:'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased;
}

.k1 h1,.k1 h2,.k1 h3{
  font-family:var(--font-display);font-weight:400;line-height:1.1;
  letter-spacing:-.017em;text-transform:uppercase;color:var(--bone);
}
.k1 p{color:var(--bone-dim);line-height:1.6}
.k1 a{color:var(--bone)}

.k1 .section-label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fde-bright);
  margin-bottom:14px;
}

/* ------------------------------------------------------------
   PRODUCT TITLE  (widget: Product Title)
   ------------------------------------------------------------ */
.k1 .product_title,
.k1 .elementor-widget-woocommerce-product-title h1{
  font-family:var(--font-display);font-size:clamp(30px,3.6vw,46px);
  line-height:1.05;letter-spacing:-.017em;text-transform:uppercase;
  color:var(--bone);margin:0 0 14px;
}

/* ------------------------------------------------------------
   PRICE  (widget: Product Price)
   ------------------------------------------------------------ */
.k1 .elementor-widget-woocommerce-product-price{
  padding:18px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-bottom:22px;
}
.k1 .price,
.k1 .woocommerce-Price-amount{
  font-family:'IBM Plex Mono',monospace!important;font-size:34px;letter-spacing:-.02em;
  color:var(--bone);
}
.k1 .price del{opacity:.45;font-size:22px;margin-right:10px}
.k1 .price ins{text-decoration:none;color:var(--fde-bright)}

/* ------------------------------------------------------------
   ADD TO CART  (widget: Add To Cart)
   Quantity stepper and the button, restyled to page buttons.
   ------------------------------------------------------------ */
.k1 form.cart{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap;margin:0 0 16px}

.k1 form.cart .quantity{
  display:flex;align-items:center;border:1px solid var(--hairline);
  background:var(--gunmetal);
}
.k1 form.cart .quantity input.qty{
  width:64px;height:52px;background:none;border:none;color:var(--bone);
  text-align:center;font-family:'IBM Plex Mono',monospace;font-size:16px;
  -moz-appearance:textfield;
}
.k1 form.cart .quantity input.qty::-webkit-outer-spin-button,
.k1 form.cart .quantity input.qty::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

.k1 form.cart button.single_add_to_cart_button,
.k1 .elementor-button-wrapper .elementor-button{
  flex:1 1 auto;min-height:52px;
  background:var(--crimson);color:#fff;border:1px solid transparent;border-radius:0;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease;
}
.k1 form.cart button.single_add_to_cart_button:hover{background:#911F24;transform:translateY(-1px)}
.k1 form.cart button.single_add_to_cart_button:active{transform:translateY(0)}
.k1 form.cart button.single_add_to_cart_button:focus-visible{
  outline:2px solid var(--fde-bright);outline-offset:3px;
}

/* stock / backorder notices */
.k1 .stock{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.06em}
.k1 .stock.in-stock{color:var(--green)}
.k1 .stock.out-of-stock{color:var(--crimson)}

/* ------------------------------------------------------------
   PRODUCT META  (widget: Product Meta) — SKU, categories, tags
   ------------------------------------------------------------ */
.k1 .product_meta{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;
  color:var(--bone-dim);border:none;padding:0;margin:0 0 22px;
}
.k1 .product_meta a{color:var(--bone-dim);text-decoration:none}
.k1 .product_meta a:hover{color:var(--fde-bright)}

/* ------------------------------------------------------------
   SHORT DESCRIPTION  (widget: Short Description)
   ------------------------------------------------------------ */
.k1 .woocommerce-product-details__short-description{
  color:var(--bone-dim);font-size:16px;max-width:44ch;margin-bottom:24px;
}

/* ------------------------------------------------------------
   BREADCRUMB  (widget: Breadcrumbs)
   ------------------------------------------------------------ */
.k1 .woocommerce-breadcrumb{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:28px;
}
.k1 .woocommerce-breadcrumb a{color:var(--bone-dim);text-decoration:none}
.k1 .woocommerce-breadcrumb a:hover{color:var(--fde-bright)}


/* ==================== 01-pdp-hero.css ==================== */
/* ============================================================
   SECTION 01 — GALLERY + BUY BOX
   Append to 00-pdp-styles.css in the container's Custom CSS.
   ============================================================ */

/* ------------------------------------------------------------
   GALLERY  (widget: Product Images)

   IMPORTANT: the product's gallery images are currently studio
   shots on white. On a dark template they render as bright white
   panels. CSS cannot knock a white background out of a JPEG —
   the real fix is uploading transparent PNG/WebP versions to the
   product gallery. Kratos-Rifle-no-bg-1.webp is already in the
   media library and is the right treatment.

   The stage below assumes transparent images. If any gallery
   image still has a white background it will look wrong, and
   that is a content fix, not a CSS one.
   ------------------------------------------------------------ */

.k1 .woocommerce-product-gallery{
  position:relative;padding:40px 24px;
  background:
    radial-gradient(900px 520px at 60% 40%, rgba(168,148,111,.16) 0%, transparent 70%),
    linear-gradient(160deg,#232019 0%,#171614 55%,#0F0E0D 100%);
  border:1px solid var(--hairline);
}
.k1 .woocommerce-product-gallery__image img{
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.7));
}

/* zoom trigger, so it does not sit as a black blob on dark */
.k1 .woocommerce-product-gallery__trigger{
  background:rgba(19,18,17,.8);border:1px solid var(--hairline);
  color:var(--bone);border-radius:0;width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s ease,color .18s ease;
}
.k1 .woocommerce-product-gallery__trigger:hover{border-color:var(--fde-bright);color:var(--fde-bright)}

/* thumbnails */
.k1 .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:10px 0 0;padding:0;list-style:none;
}
.k1 .flex-control-thumbs li{margin:0;width:auto}
.k1 .flex-control-thumbs img{
  display:block;width:100%;height:auto;padding:10px;
  background:var(--gunmetal);border:1px solid var(--hairline);
  opacity:.72;cursor:pointer;
  transition:opacity .18s ease,border-color .18s ease;
}
.k1 .flex-control-thumbs img:hover,
.k1 .flex-control-thumbs img.flex-active{opacity:1;border-color:var(--fde-bright)}

/* ------------------------------------------------------------
   CATEGORY CHIPS  (widget: Product Meta)
   Woo prints "Categories: a, b, c" as inline links. Restyling
   the links as chips and hiding the label reads better here.
   ------------------------------------------------------------ */
.k1 .product_meta .posted_in{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:0;                       /* hides the "Categories:" label text */
  margin-bottom:18px;
}
.k1 .product_meta .posted_in a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;border:1px solid var(--hairline);
  color:var(--bone-dim);text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.k1 .product_meta .posted_in a:hover{border-color:var(--fde-bright);color:var(--fde-bright)}

/* SKU stays as a quiet line under the button */
.k1 .product_meta .sku_wrapper{display:block;font-size:12px;margin-top:4px}

/* ------------------------------------------------------------
   ASSURANCE LIST  (HTML widget, markup in 01-pdp-assurance.html)
   ------------------------------------------------------------ */
.k1 .assure{display:grid;gap:12px;margin:22px 0 0;padding-top:20px;
            border-top:1px solid var(--hairline);list-style:none}
.k1 .assure li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:start;
               font-size:14px;color:var(--bone-dim);line-height:1.45}
.k1 .assure b{color:var(--bone);font-weight:600;display:block;font-size:14px;margin-bottom:1px}
.k1 .assure svg{width:16px;height:16px;color:var(--fde-bright);margin-top:2px;flex:0 0 auto}

/* ------------------------------------------------------------
   RESPONSIVE
   Elementor handles the column stack; these are the details it
   will not know about.
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .k1 .woocommerce-product-gallery{padding:28px 18px}
}
@media (max-width:640px){
  .k1 .flex-control-thumbs{grid-template-columns:repeat(4,1fr);gap:8px}
  .k1 form.cart{flex-wrap:wrap}
  .k1 form.cart button.single_add_to_cart_button{flex:1 1 100%}
  .k1 .price,.k1 .woocommerce-Price-amount{font-size:28px}
}


/* ==================== 02-pdp-hero.css ==================== */
/* ============================================================
   SECTION 02 — PDP HERO  +  PURCHASE AREA
   Append to the container's Custom CSS.
   ============================================================ */

/* (flat-gradient pdp-hero removed — superseded by the video hero in section 03) */

/* ------------------------------------------------------------
   PURCHASE AREA

   The !important flags below are deliberate. Elementor writes
   per-element rules (.elementor-element-xxxxx .product_title)
   that outrank a plain .k1 descendant .elementor-4208 .elementor-element.elementor-element-15e6f2af. The alternative
   is setting each colour in every widget's Style tab, which
   scatters the design across a dozen panels instead of one file.
   ------------------------------------------------------------ */

/* title was rendering dark on dark */
.k1 .elementor-widget-woocommerce-product-title .product_title,
.k1 .elementor-widget-woocommerce-product-title h1,
.k1 .elementor-widget-woocommerce-product-title h2{
  color:var(--bone)!important;
  font-family:var(--font-display)!important;
  letter-spacing:-.017em!important;
  text-transform:uppercase!important;
  line-height:1.05!important;
}

/* give the buy box a body instead of floating on the background */
.k1 .pdp-buybox{
  background:linear-gradient(180deg,#201E1B 0%,#1A1917 100%);
  border:1px solid var(--hairline);
  padding:32px;
}

.k1 .elementor-widget-woocommerce-product-price .price,
.k1 .elementor-widget-woocommerce-product-price .woocommerce-Price-amount{
  color:var(--bone)!important;
  font-family:'IBM Plex Mono',monospace!important;
}

/* quantity: match the button height exactly, kill the theme's rounding */
.k1 form.cart .quantity,
.k1 form.cart .quantity input.qty{border-radius:0!important;height:56px}
.k1 form.cart .quantity input.qty{
  width:72px!important;background:var(--panel)!important;color:var(--bone)!important;
  border:1px solid var(--hairline)!important;
}
.k1 form.cart button.single_add_to_cart_button{
  min-height:56px!important;border-radius:0!important;
  background:var(--crimson)!important;color:#fff!important;
  letter-spacing:.08em!important;
}
.k1 form.cart button.single_add_to_cart_button:hover{background:#911F24!important}

/* the FFL / shipping note under the button */
.k1 .pdp-note{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline);
  font-size:14px;line-height:1.6;color:var(--bone-dim);max-width:58ch;
}

@media (max-width:640px){
  .k1 .pdp-buybox{padding:22px 18px}
}


/* ==================== 03-pdp-tophero.css ==================== */
/* ============================================================
   SECTION 03 — FULL BLEED TOP HERO
   Sits above everything, edge to edge, product name over media.
   Supersedes the flat-gradient .pdp-hero from section 02.
   ============================================================ */

/* ------------------------------------------------------------
   BUILD IT IN ELEMENTOR (same pattern as the home page hero)

   Container  (CSS class: pdp-hero)
     Layout    : full width, min-height 0 (CSS sets it)
     Background: Video
                 - Background Video Link:
                   /wp-content/uploads/2026/08/HERO-Video.mp4
                 - Play On Mobile: OFF  (phones get the fallback)
                 - Background Fallback: a lifestyle still
     Advanced  : Z-Index 1, no padding

   Inside it:
     Container (CSS class: pdp-hero-inner)
       Text Editor -> eyebrow line (CSS class: pdp-eyebrow)
                      static, or Dynamic Tags > ACF field
       Heading     -> Dynamic Tags > Product Title
       Text Editor -> Dynamic Tags > Product Short Description

   PER PRODUCT MEDIA
   Hardcoding the video link only works for the Kratos. To let
   every tagged product bring its own, add two ACF fields to the
   existing "Custom Product Fields" group:
       hero_video   (URL / File)
       hero_image   (Image)
   then set the container background via Dynamic Tags > ACF.
   Products with the fields empty fall back to the featured image.
   ------------------------------------------------------------ */

.k1 .pdp-hero{
  position:relative;overflow:hidden;
  min-height:min(66vh,620px);
  display:flex;align-items:flex-end;
  padding:0 0 64px;margin:0 0 56px;
  /* No background-color here: Elementor paints container backgrounds ON the
     container, which sits OVER its own video child. The dark base lives on
     ::before with the scrim instead, explicitly UNDER everything at z-index:0
     alongside the video. */
}

/* Elementor's video wrapper: pin it explicitly so nothing can re-flow it */
.k1 .pdp-hero .elementor-background-video-container{
  position:absolute!important;inset:0;z-index:0;
}

/* the theme header sits over this — pull it up like the home page */
.k1 .pdp-hero{margin-top:-80px;padding-top:160px}

/* Elementor drops the video in .elementor-background-video-container */
.k1 .pdp-hero .elementor-background-video-container video,
.k1 .pdp-hero video{
  object-fit:cover!important;
  /* The footage is genuinely dark (mean luma 13-21/255). It needs a real
     lift or it is indistinguishable from the fallback gradient. */
  filter:brightness(1.45) contrast(1.05) saturate(.95);
}

/* scrim: clear at the top so the nav reads, heavy at the base
   under the type. Two stops, not a flat wash. */
/* Much lighter than v1. Dark footage needs almost no help — the scrim only
   has to hold the type zones: a little at the top for the nav, more at the
   base under the headline. The middle stays open so the footage reads. */
.k1 .pdp-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,10,9,.42) 0%, transparent 30%),
    linear-gradient(180deg, transparent 46%, rgba(11,10,9,.42) 78%, rgba(11,10,9,.78) 100%),
    linear-gradient(90deg,  rgba(11,10,9,.38) 0%, transparent 46%);
}

/* warm edge light, so it ties to the landing page palette */
.k1 .pdp-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(900px 520px at 82% 28%, rgba(168,148,111,.20) 0%, transparent 68%);
  mix-blend-mode:screen;
}

/* Lift the CONTENT above the scrim — but never touch Elementor's video
   wrapper, which is also a direct child. Making it position:relative
   collapses it out of the frame; that was the disappearing-video bug. */
.k1 .pdp-hero > *:not(.elementor-background-video-container){position:relative;z-index:2}

/* ---- type ---- */
.k1 .pdp-eyebrow,
.k1 .pdp-eyebrow p{
  font-family:'IBM Plex Mono',monospace!important;
  font-size:13px!important;letter-spacing:.22em!important;
  text-transform:uppercase!important;color:var(--fde-bright)!important;
  margin:0 0 16px!important;
}

.k1 .pdp-hero .elementor-heading-title,
.k1 .pdp-hero h1{
  font-family:var(--font-display)!important;
  font-size:clamp(38px,6.4vw,84px)!important;
  line-height:.98!important;letter-spacing:-.02em!important;
  text-transform:uppercase!important;color:var(--bone)!important;
  max-width:16ch;margin:0 0 20px!important;
  text-shadow:0 2px 24px rgba(0,0,0,.55);
}

.k1 .pdp-hero .elementor-widget-text-editor:not(.pdp-eyebrow),
.k1 .pdp-hero .elementor-widget-text-editor:not(.pdp-eyebrow) p{
  color:var(--bone-dim)!important;font-size:17px!important;
  line-height:1.6!important;max-width:44ch;
}

/* ---- scroll cue ---- */
.k1 .pdp-hero-inner::after{
  content:"";position:absolute;left:0;bottom:-34px;
  width:1px;height:26px;
  background:linear-gradient(180deg,var(--fde-bright),transparent);
}

@media (prefers-reduced-motion: no-preference){
  .k1 .pdp-hero .elementor-heading-title,
  .k1 .pdp-hero h1{animation:pdp-rise .9s cubic-bezier(.2,.7,.3,1) both}
  .k1 .pdp-hero .elementor-widget-text-editor{animation:pdp-rise .9s cubic-bezier(.2,.7,.3,1) .12s both}
  @keyframes pdp-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
}

@media (max-width:1024px){
  .k1 .pdp-hero{
    min-height:min(56vh,460px);
    margin-top:-64px;padding:120px 0 44px;margin-bottom:36px;
  }
  .k1 .pdp-hero .elementor-heading-title,
  .k1 .pdp-hero h1{max-width:none}
  /* phones use the fallback image, not the video — set Play On Mobile: OFF */
}
@media (max-width:640px){
  .k1 .pdp-hero{min-height:auto;padding:104px 0 40px}
  .k1 .pdp-hero::before{
    background:linear-gradient(180deg, rgba(11,10,9,.62) 0%, rgba(11,10,9,.40) 40%,
                                       rgba(11,10,9,.92) 100%);
  }
}

/* ------------------------------------------------------------
   ALIGNMENT FIX
   Elementor containers default to flex with centered/end
   alignment depending on the parent, which pushed the widgets
   right and let each one shrink-wrap at a different width.
   Pin the inner container's children hard left and full width.
   ------------------------------------------------------------ */
/* Elementor containers are flex and driven by --align-items / --justify-content
   custom properties. Set the variables rather than the raw properties, so the
   rules do not fight what the Layout tab writes. */
.k1 .pdp-hero{--align-items:flex-end;--justify-content:center}
.k1 .pdp-hero-inner{
  --align-items:flex-start;
  width:100%;max-width:1120px;margin-left:auto;margin-right:auto;
  padding-left:24px;padding-right:24px;
  text-align:left;
}
.k1 .pdp-hero-inner > .elementor-element,
.k1 .pdp-hero-inner .elementor-widget,
.k1 .pdp-hero-inner .elementor-widget-container{
  width:100%;max-width:none;text-align:left;
}


/* ==================== 04-pdp-gallery.css ==================== */
/* ============================================================
   SECTION 04 — CONTENT GALLERY
   Append to the container's Custom CSS.
   ============================================================ */

.k1 .pgal{padding:72px 0}

.k1 .pgal-grid{
  display:grid;gap:14px;margin-top:36px;
  grid-template-columns:repeat(3,1fr);
}
.k1 .pgal-lead{grid-column:1 / -1}

.k1 .pgal-item{
  position:relative;display:block;overflow:hidden;
  border:1px solid var(--hairline);background:var(--gunmetal);
}
.k1 .pgal-item img{
  display:block;width:100%;height:100%;object-fit:cover;
  aspect-ratio:3/2;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.k1 .pgal-lead img{aspect-ratio:21/9}
.k1 .pgal-item:hover img{transform:scale(1.035)}

/* caption: mono tag pinned bottom-left over a local gradient */
.k1 .pgal-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 16px 14px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);
  background:linear-gradient(180deg,transparent 0%,rgba(10,10,11,.82) 100%);
  pointer-events:none;
}

.k1 .pgal-item:focus-visible{outline:2px solid var(--fde-bright);outline-offset:3px}

@media (max-width:900px){
  .k1 .pgal{padding:52px 0}
  .k1 .pgal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .k1 .pgal-lead{grid-column:1 / -1}
}
@media (max-width:560px){
  .k1 .pgal-grid{grid-template-columns:1fr}
  .k1 .pgal-item img{aspect-ratio:16/10}
}

/* scroll reveal, same double guard as the landing page */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .k1 .pgal-item{
      opacity:0;animation:pgal-in linear both;
      animation-timeline:view();animation-range:entry 8% cover 26%;
    }
    .k1 .pgal-item:nth-child(2){animation-range:entry 8% cover 32%}
    .k1 .pgal-item:nth-child(3){animation-range:entry 8% cover 38%}
    .k1 .pgal-item:nth-child(4){animation-range:entry 8% cover 44%}
    @keyframes pgal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
}


/* ==================== 05-pdp-features.css ==================== */
/* ============================================================
   SECTION 05 — FEATURE BLOCKS
   Append to the container's Custom CSS.
   ============================================================ */

.k1 .pfeat{padding:72px 0 8px}

.k1 .feat{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start;
  padding:38px 0;border-top:1px solid var(--hairline);
}
.k1 .pfeat .feat:first-of-type{margin-top:34px}

.k1 .feat h3{font-size:clamp(20px,2.2vw,27px);margin:0 0 10px}
.k1 .feat-copy p{font-size:15px;line-height:1.6;max-width:46ch;margin:0}

.k1 .feat-list{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.k1 .feat-list li{
  position:relative;padding-left:20px;
  font-size:15px;color:var(--bone-dim);line-height:1.5;
}
.k1 .feat-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:var(--fde-bright);
}

@media (max-width:1024px){
  .k1 .pfeat{padding:52px 0 8px}
  .k1 .feat{grid-template-columns:1fr;gap:16px;padding:30px 0}
}

/* reveal, same double guard */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .k1 .feat{
      opacity:0;animation:feat-in linear both;
      animation-timeline:view();animation-range:entry 8% cover 24%;
    }
    @keyframes feat-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}


/* ==================== 06-pdp-specs.css ==================== */
/* ============================================================
   SECTION 06 — SPECIFICATIONS
   Append to the container's Custom CSS.
   ============================================================ */

.k1 .pspec{padding:64px 0 72px}

.k1 .spec-table{
  margin-top:34px;
  display:grid;grid-template-columns:1fr 1fr;
  column-gap:56px;
  border-top:1px solid var(--hairline);
}
.k1 .spec-row{
  display:flex;justify-content:space-between;gap:24px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--hairline);
}
.k1 .spec-k{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);
  flex:0 0 auto;
}
.k1 .spec-v{
  font-size:15px;color:var(--bone);text-align:right;font-weight:500;
}

.k1 .spec-note{
  margin-top:22px;font-size:13px;color:var(--bone-dim);
  font-family:'IBM Plex Mono',monospace;letter-spacing:.02em;max-width:64ch;
}

@media (max-width:820px){
  .k1 .pspec{padding:48px 0 56px}
  .k1 .spec-table{grid-template-columns:1fr;column-gap:0}
}


/* ==================== 07-pdp-buybar.css ==================== */
/* ============================================================
   SECTION 07 — STICKY BUY BAR
   Append to the container's Custom CSS.
   ============================================================ */

.k1 .buybar{
  position:sticky;bottom:0;z-index:40;
  background:rgba(19,18,17,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);
}
.k1 .buybar .wrap{
  display:flex;align-items:center;gap:20px;
  min-height:70px;padding-top:10px;padding-bottom:10px;
}
.k1 .bb-name{font-weight:700;font-size:15px;color:var(--bone)}
.k1 .bb-price{
  font-family:'IBM Plex Mono',monospace;font-size:18px;
  color:var(--bone);margin-left:auto;
}
.k1 .bb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 26px;
  background:var(--crimson);color:#fff;text-decoration:none;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background .18s ease,transform .18s ease;
}
.k1 .bb-btn:hover{background:#911F24;transform:translateY(-1px)}
.k1 .bb-btn:focus-visible{outline:2px solid var(--fde-bright);outline-offset:3px}

/* smooth ride back up to the purchase anchor */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
/* keep the anchor target clear of the transparent site header */
.k1 #buy{scroll-margin-top:96px}

@media (max-width:640px){
  .k1 .bb-name{display:none}
  .k1 .buybar .wrap{min-height:62px;gap:14px}
  .k1 .bb-btn{flex:1}
}


/* ==================== 08-pdp-stage-img.css ==================== */
/* Featured image widget: add CSS class  pdp-stage-img  to the Image widget. */
.k1 .pdp-stage-img{
  padding:48px 28px;
  background:
    radial-gradient(900px 520px at 60% 40%, rgba(168,148,111,.16) 0%, transparent 70%),
    linear-gradient(160deg,#232019 0%,#171614 55%,#0F0E0D 100%);
  border:1px solid var(--hairline);
}
.k1 .pdp-stage-img img{filter:drop-shadow(0 24px 34px rgba(0,0,0,.7))}

/* ==================== 08-pdp-gallery-swap.css ==================== */
/* ============================================================
   SECTION 08 — PRODUCT IMAGE + THUMBNAIL SWAP
   Append to the container's Custom CSS.
   (Replaces the earlier .pdp-stage-img rules if the Image
   widget is removed — safe to leave both in the file.)
   ============================================================ */

.k1 .pswap-stage{
  position:relative;padding:44px 28px;min-height:340px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 520px at 60% 40%, rgba(168,148,111,.16) 0%, transparent 70%),
    linear-gradient(160deg,#232019 0%,#171614 55%,#0F0E0D 100%);
  border:1px solid var(--hairline);
}
.k1 .pswap-stage img{
  display:block;max-width:100%;height:auto;
  transition:opacity .18s ease;
}
/* cutouts float with a shadow; photos fill the frame flat */
.k1 .pswap-stage[data-fit="contain"] img{
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.7));
}
.k1 .pswap-stage[data-fit="cover"]{padding:0}
.k1 .pswap-stage[data-fit="cover"] img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;filter:none;
}

.k1 .pswap-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px;
}
.k1 .pswap-thumb{
  padding:8px;background:var(--gunmetal);
  border:1px solid var(--hairline);border-radius:0;cursor:pointer;
  transition:border-color .18s ease,opacity .18s ease;opacity:.7;
}
.k1 .pswap-thumb img{
  display:block;width:100%;height:52px;object-fit:contain;
}
.k1 .pswap-thumb:hover{opacity:1}
.k1 .pswap-thumb.is-active{opacity:1;border-color:var(--fde-bright)}
.k1 .pswap-thumb:focus-visible{outline:2px solid var(--fde-bright);outline-offset:2px}

@media (max-width:640px){
  .k1 .pswap-stage{padding:28px 16px;min-height:220px}
  .k1 .pswap-thumbs{gap:8px}
  .k1 .pswap-thumb{padding:6px}
  .k1 .pswap-thumb img{height:40px}
}

/* ==================== kratos related carousel ==================== */
.k1 .krel{padding:72px 0}
.k1 .krel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.k1 .krel-nav{display:flex;gap:8px;flex:0 0 auto}
.k1 .krel-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--hairline);color:var(--bone);
  font-size:17px;cursor:pointer;border-radius:0;
  transition:border-color .18s ease,color .18s ease;
}
.k1 .krel-btn:hover{border-color:var(--fde-bright);color:var(--fde-bright)}
.k1 .krel-btn:focus-visible{outline:2px solid var(--fde-bright);outline-offset:2px}

.k1 .krel-track{
  list-style:none;margin:0;padding:4px 0 18px;
  display:flex;gap:14px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;scrollbar-color:var(--fde) transparent;
  -webkit-overflow-scrolling:touch;
}
.k1 .krel-track::-webkit-scrollbar{height:4px}
.k1 .krel-track::-webkit-scrollbar-thumb{background:var(--fde)}

.k1 .krel-card{
  /* 4-up on desktop: card width derives from the track, so four fill the row
     and the fifth peeks, cueing the scroll. */
  flex:0 0 calc((100% - 3 * 14px) / 4);
  min-width:250px;
  scroll-snap-align:start;
  background:var(--gunmetal);border:1px solid var(--hairline);
  transition:border-color .18s ease,transform .25s ease;
}
.k1 .krel-card:hover{border-color:var(--fde-bright);transform:translateY(-3px)}
.k1 .krel-card a{display:block;text-decoration:none;padding:14px}
/* White plate: photography is on white, frame matches it exactly. */
.k1 .krel-media{margin:0 0 12px;background:#fff;padding:14px}
.k1 .krel-media img{display:block;width:100%;height:150px;object-fit:contain;filter:none}
.k1 .krel-name{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:13.5px;line-height:1.35;
  letter-spacing:.01em;text-transform:none;color:var(--bone);margin:0 0 8px;
}
.k1 .krel-price,.k1 .krel-price .woocommerce-Price-amount{
  font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--fde-bright);
}
.k1 .krel-price del{opacity:.5;margin-right:8px}
.k1 .krel-price ins{text-decoration:none}

@media (max-width:1100px){
  .k1 .krel-card{flex:0 0 calc((100% - 2 * 14px) / 3);min-width:230px}
}
@media (max-width:760px){
  .k1 .krel-card{flex:0 0 calc((100% - 14px) / 2);min-width:210px}
}
@media (max-width:480px){
  .k1 .krel{padding:52px 0}
  .k1 .krel-card{flex:0 0 82%;min-width:0}
}/* End custom CSS */